/* VKB Bethesda — bolum bilesenleri.
   Koyu bolumler .vkb-on-dark-surface tasir; metin renkleri base.css'teki
   --vkb-fg* token'larindan kalitilir (ozgulluk savasi yok). */

/* =========================================================
   01 — HEADER
   ========================================================= */
.vkb-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 900;
	block-size: var(--vkb-header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: block-size .4s var(--vkb-ease),
		background-color .4s var(--vkb-ease),
		box-shadow .4s var(--vkb-ease);
}

/* Seffaf durumda ince bir taban cizgisi header'i yine de "bar" yapar. */
.vkb-header::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--vkb-line);
	opacity: 1;
	transition: opacity .4s var(--vkb-ease);
}

.vkb-header.is-stuck::after {
	opacity: 0;
}

.vkb-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 3rem);
	inline-size: 100%;
}

.vkb-header__logo {
	display: flex;
	align-items: center;
	flex: none;
	position: relative;
}

body.vkb-site .vkb-header__logo img {
	display: block;
	block-size: 48px;
	inline-size: auto;
	/* Yatay logo (4.72:1) global img{max-width:100%} ile dar konteynerde kisilip
	   sabit yukseklikle birlikte EZILIYOR. Oran her zaman korunsun. */
	max-inline-size: none;
	transition: block-size .4s var(--vkb-ease);
}

.vkb-header__nav {
	display: flex;
	justify-content: center;
	min-inline-size: 0;
}

.vkb-menu {
	display: flex;
	align-items: center;
	gap: clamp(.875rem, 1.9vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vkb-menu > li {
	position: relative;
}

.vkb-menu > li > a {
	font-family: var(--vkb-font-accent);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .015em;
	color: var(--vkb-ink);
	padding-block: .625rem;
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	white-space: nowrap;
	position: relative;
	transition: color .3s var(--vkb-ease);
}

.vkb-menu > li > a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: 1.5px;
	inline-size: 0;
	background: var(--vkb-lime);
	transition: inline-size .34s var(--vkb-ease);
}

.vkb-menu > li > a:hover::after,
.vkb-menu > li > a:focus-visible::after,
.vkb-menu > li.current-menu-item > a::after {
	inline-size: 100%;
}

.vkb-menu__caret {
	inline-size: 9px;
	block-size: 9px;
	opacity: .5;
	transition: transform .3s var(--vkb-ease);
}

.vkb-menu > li:hover .vkb-menu__caret {
	transform: rotate(180deg);
}

.vkb-menu .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + .75rem);
	inset-inline-start: -1.125rem;
	min-inline-size: 250px;
	background: #fff;
	border: 1px solid var(--vkb-line);
	border-radius: var(--vkb-radius-lg);
	box-shadow: var(--vkb-shadow-md);
	list-style: none;
	margin: 0;
	padding: .5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .3s var(--vkb-ease), transform .3s var(--vkb-ease), visibility .3s;
	z-index: 10;
}

.vkb-menu > li:hover > .sub-menu,
.vkb-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vkb-menu .sub-menu a {
	display: block;
	padding: .625rem .875rem;
	font-family: var(--vkb-font-ui);
	font-size: .9375rem;
	color: var(--vkb-body);
	border-radius: var(--vkb-radius);
	transition: background-color .25s var(--vkb-ease), color .25s var(--vkb-ease);
}

.vkb-menu .sub-menu a:hover,
.vkb-menu .sub-menu a:focus {
	background: var(--vkb-stone);
	color: var(--vkb-ink);
}

.vkb-header__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: none;
}

.vkb-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--vkb-font-accent);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--vkb-ink);
	white-space: nowrap;
	transition: color .3s var(--vkb-ease);
}

.vkb-header__phone svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--vkb-lime);
	flex: none;
}

.vkb-header .vkb-btn {
	padding: .8125rem 1.375rem;
	font-size: .875rem;
}

/* Kaydirilmis durum — lacivert cam */
.vkb-header.is-stuck {
	block-size: var(--vkb-header-h-scrolled);
	background: rgba(10, 37, 64, .92);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	backdrop-filter: saturate(150%) blur(16px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 16px 44px rgba(6, 24, 41, .30);
}

.vkb-header.is-stuck .vkb-menu > li > a,
.vkb-header.is-stuck .vkb-header__phone {
	color: var(--vkb-on-dark);
}

body.vkb-site .vkb-header.is-stuck .vkb-header__logo img {
	block-size: 38px;
}

/* Mobil: yatay logo + hamburger ayni satirda; 320px'de bile sigsin diye kisildi. */
@media (max-width: 560px) {
	body.vkb-site .vkb-header__logo img {
		block-size: 38px;
	}

	body.vkb-site .vkb-header.is-stuck .vkb-header__logo img {
		block-size: 34px;
	}
}

/* Anasayfa disi: bastan koyu. */
body.vkb-site:not(.vkb-overlay-header) .vkb-header {
	background: var(--vkb-navy);
}

body.vkb-site:not(.vkb-overlay-header) .vkb-header::after {
	opacity: 0;
}

body.vkb-site:not(.vkb-overlay-header) .vkb-header .vkb-menu > li > a,
body.vkb-site:not(.vkb-overlay-header) .vkb-header .vkb-header__phone {
	color: var(--vkb-on-dark);
}

/* Logo takasi — element+sinif, boyut kuralindan daha ozgul. */
body.vkb-site .vkb-header__logo img.vkb-logo--light {
	display: none;
}

body.vkb-site .vkb-header.is-stuck .vkb-header__logo img.vkb-logo--dark,
body.vkb-site:not(.vkb-overlay-header) .vkb-header .vkb-header__logo img.vkb-logo--dark {
	display: none;
}

body.vkb-site .vkb-header.is-stuck .vkb-header__logo img.vkb-logo--light,
body.vkb-site:not(.vkb-overlay-header) .vkb-header .vkb-header__logo img.vkb-logo--light {
	display: block;
}

/* Hamburger */
.vkb-burger {
	display: none;
	flex: none;
	inline-size: 46px;
	block-size: 46px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(18, 22, 28, .16);
	border-radius: var(--vkb-radius);
	cursor: pointer;
	padding: 0;
	transition: border-color .3s var(--vkb-ease), background-color .3s var(--vkb-ease);
}

.vkb-burger__bar {
	display: block;
	inline-size: 18px;
	block-size: 1.5px;
	background: var(--vkb-ink);
	position: relative;
}

.vkb-burger__bar::before,
.vkb-burger__bar::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inline-size: 18px;
	block-size: 1.5px;
	background: var(--vkb-ink);
}

.vkb-burger__bar::before {
	inset-block-start: -6px;
}

.vkb-burger__bar::after {
	inset-block-start: 6px;
}

.vkb-header.is-stuck .vkb-burger,
body.vkb-site:not(.vkb-overlay-header) .vkb-burger {
	border-color: rgba(255, 255, 255, .26);
}

.vkb-header.is-stuck .vkb-burger .vkb-burger__bar,
.vkb-header.is-stuck .vkb-burger .vkb-burger__bar::before,
.vkb-header.is-stuck .vkb-burger .vkb-burger__bar::after,
body.vkb-site:not(.vkb-overlay-header) .vkb-burger .vkb-burger__bar,
body.vkb-site:not(.vkb-overlay-header) .vkb-burger .vkb-burger__bar::before,
body.vkb-site:not(.vkb-overlay-header) .vkb-burger .vkb-burger__bar::after {
	background: var(--vkb-on-dark);
}

/* Drawer */
.vkb-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(410px, 90vw);
	background: var(--vkb-navy);
	z-index: 950;
	transform: translateX(103%);
	transition: transform .5s var(--vkb-ease);
	display: flex;
	flex-direction: column;
	padding: 1rem var(--vkb-gutter) 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vkb-drawer.is-open {
	transform: none;
}

.vkb-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	block-size: var(--vkb-header-h);
	flex: none;
}

body.vkb-site .vkb-drawer__top img {
	block-size: 38px;
	inline-size: auto;
	max-inline-size: none;
	display: block;
}

.vkb-drawer__close {
	inline-size: 46px;
	block-size: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--vkb-radius);
	color: var(--vkb-on-dark);
	cursor: pointer;
}

.vkb-drawer__close svg {
	inline-size: 18px;
	block-size: 18px;
}

.vkb-drawer__menu {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.vkb-drawer__menu > li {
	border-block-end: 1px solid rgba(255, 255, 255, .09);
}

.vkb-js .vkb-drawer__menu > li {
	opacity: 0;
	transform: translateX(18px);
}

.vkb-js .vkb-drawer.is-open .vkb-drawer__menu > li {
	animation: vkb-drawer-in .5s var(--vkb-ease) forwards;
	animation-delay: calc(var(--i, 0) * 50ms + 100ms);
}

@keyframes vkb-drawer-in {
	to {
		opacity: 1;
		transform: none;
	}
}

.vkb-drawer__menu a {
	display: block;
	padding: .9375rem 0;
	font-family: var(--vkb-font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--vkb-on-dark);
}

.vkb-drawer__menu .sub-menu {
	list-style: none;
	margin: 0 0 .75rem;
	padding: 0 0 0 1rem;
	border-inline-start: 1px solid rgba(255, 255, 255, .12);
}

.vkb-drawer__menu .sub-menu li {
	border: 0;
	opacity: 1;
	transform: none;
	animation: none;
}

.vkb-drawer__menu .sub-menu a {
	font-family: var(--vkb-font-ui);
	font-size: .9375rem;
	padding: .4375rem 0;
	color: var(--vkb-on-dark-muted);
}

.vkb-drawer__foot {
	margin-block-start: auto;
	padding-block-start: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.vkb-drawer__foot .vkb-btn {
	inline-size: 100%;
}

.vkb-drawer__meta {
	font-size: var(--vkb-small);
	color: var(--vkb-on-dark-muted);
	display: flex;
	flex-direction: column;
	gap: .375rem;
	line-height: 1.55;
}

.vkb-drawer__meta strong {
	color: var(--vkb-on-dark);
	font-family: var(--vkb-font-accent);
	font-weight: 600;
	font-size: 1.0625rem;
}

.vkb-drawer__social {
	display: flex;
	gap: .625rem;
}

.vkb-drawer__social a {
	inline-size: 40px;
	block-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: var(--vkb-on-dark);
	transition: background-color .3s var(--vkb-ease), color .3s var(--vkb-ease), border-color .3s var(--vkb-ease);
}

.vkb-drawer__social a:hover,
.vkb-drawer__social a:focus {
	background: var(--vkb-lime);
	color: var(--vkb-ink);
	border-color: var(--vkb-lime);
}

.vkb-drawer__social svg {
	inline-size: 17px;
	block-size: 17px;
}

.vkb-scrim {
	position: fixed;
	inset: 0;
	background: rgba(6, 24, 41, .58);
	z-index: 940;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--vkb-ease), visibility .4s;
}

.vkb-scrim.is-open {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1180px) {

	.vkb-header__nav,
	.vkb-header__actions .vkb-btn {
		display: none;
	}

	.vkb-header__inner {
		grid-template-columns: auto 1fr;
	}

	.vkb-header__actions {
		justify-self: end;
	}

	.vkb-burger {
		display: inline-flex;
	}
}

@media (max-width: 560px) {
	.vkb-header__phone span {
		display: none;
	}
}

/* 400px alti: yatay logo + "Book Now" + hamburger ayni satira sigmiyor
   (320px'de buton ekran disina tasiyordu). Buton cekmecede zaten var,
   telefon ikonu da burada kaliyor — CTA kaybi yok. */
@media (max-width: 400px) {
	body.vkb-site .vkb-header__actions .vkb-btn {
		display: none;
	}
}

/* =========================================================
   02 — HERO
   ========================================================= */
.vkb-hero {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, var(--vkb-paper) 0%, var(--vkb-paper) 62%, var(--vkb-stone) 100%);
	padding-block-start: calc(var(--vkb-header-h) + clamp(1rem, 2vw, 1.75rem)); /* token 120'ye cikti; net ust bosluk eski haliyle ayni */
	padding-block-end: clamp(3.5rem, 6vw, 6rem);
	min-block-size: 86vh;
	display: flex;
	align-items: center;
}

.vkb-hero__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.vkb-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

body.vkb-site .vkb-hero__title {
	font-size: clamp(2.5rem, 4.3vw, 3.875rem);
	letter-spacing: -.028em;
	max-inline-size: 17ch;
}

.vkb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
}

.vkb-hero__trust {
	list-style: none;
	margin: .75rem 0 0;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--vkb-line);
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.vkb-hero__trust li {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-family: var(--vkb-font-accent);
	font-size: .875rem;
	font-weight: 500;
	color: var(--vkb-body);
}

.vkb-hero__trust svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--vkb-lime);
	flex: none;
}

/* Medya: lime cerceve fotografin altindan tasar. */
.vkb-hero__media {
	position: relative;
	align-self: center;
}

.vkb-hero__figure {
	position: relative;
	z-index: 2;
	margin: 0;
	inline-size: 100%;
	block-size: clamp(380px, 46vw, 590px);
	overflow: hidden;
	border-radius: var(--vkb-radius-lg);
	box-shadow: var(--vkb-shadow-md);
}

.vkb-hero__figure img {
	animation: vkb-slow-zoom 26s var(--vkb-ease) infinite alternate;
}

@keyframes vkb-slow-zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.07);
	}
}

.vkb-hero__frame {
	position: absolute;
	z-index: 1;
	inset-block-end: -26px;
	inset-inline-end: -26px;
	inline-size: 58%;
	block-size: 54%;
	border: 1px solid var(--vkb-lime);
	border-radius: var(--vkb-radius-lg);
	pointer-events: none;
}

.vkb-hero__badge {
	position: absolute;
	z-index: 3;
	inset-block-end: -22px;
	inset-inline-start: -28px;
	background: var(--vkb-navy);
	padding: 1.125rem 1.375rem;
	border-radius: var(--vkb-radius-lg);
	box-shadow: var(--vkb-shadow-md);
	display: flex;
	align-items: center;
	gap: 1rem;
	max-inline-size: 264px;
}

.vkb-hero__badge b {
	font-family: var(--vkb-font-display);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--vkb-lime);
	flex: none;
}

.vkb-hero__badge span {
	font-family: var(--vkb-font-accent);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--vkb-on-dark-muted);
}

@media (max-width: 1024px) {
	.vkb-hero {
		min-block-size: 0;
	}

	.vkb-hero__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.vkb-hero__figure {
		block-size: clamp(320px, 58vw, 460px);
	}

	.vkb-hero__badge {
		inset-inline-start: 1rem;
	}

	.vkb-hero__trust {
		flex-direction: row;
		flex-wrap: wrap;
		gap: .75rem 2rem;
	}
}

@media (max-width: 560px) {
	.vkb-hero__frame {
		inset-inline-end: -14px;
		inset-block-end: -14px;
	}

	.vkb-hero__badge {
		position: static;
		max-inline-size: none;
		margin-block-start: 1.25rem;
	}

	.vkb-hero__actions .vkb-btn {
		inline-size: 100%;
	}
}

/* =========================================================
   03 — VR SERIDI (imza bolum)
   ========================================================= */
.vkb-vr {
	background:
		radial-gradient(90% 120% at 78% 30%, var(--vkb-navy-glow) 0%, transparent 60%),
		var(--vkb-navy);
	position: relative;
	overflow: hidden;
	padding-block: clamp(5.5rem, 10vw, 9.5rem);
	isolation: isolate;
}

.vkb-vr__grid-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .16;
	pointer-events: none;
	background-image:
		linear-gradient(115deg, rgba(199, 232, 106, .5) 1px, transparent 1px),
		linear-gradient(65deg, rgba(255, 255, 255, .45) 1px, transparent 1px);
	background-size: 72px 72px, 72px 72px;
	mask-image: radial-gradient(115% 105% at 72% 45%, #000 15%, transparent 74%);
}

.vkb-vr__scan {
	position: absolute;
	inset-inline: 0;
	z-index: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(147, 191, 36, .85), transparent);
	pointer-events: none;
	animation: vkb-scan 16s linear infinite alternate;
}

@keyframes vkb-scan {
	from {
		inset-block-start: 6%;
	}

	to {
		inset-block-start: 94%;
	}
}

.vkb-vr__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

body.vkb-site .vkb-vr__title {
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	line-height: 1.02;
	max-inline-size: 12ch;
	font-style: italic;
	font-weight: 500;
	position: relative;
	padding-inline-start: 2.25rem;
}

/* Lime kose parantezi — bandi "imza bolum" yapan aksan. */
body.vkb-site .vkb-vr__title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: .18em .12em;
	inline-size: 2px;
	background: linear-gradient(180deg, var(--vkb-lime), rgba(147, 191, 36, 0));
}

.vkb-vr__side {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	align-items: flex-start;
}

.vkb-vr__tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--vkb-lime);
	border: 1px solid rgba(147, 191, 36, .38);
	border-radius: 999px;
	padding: .4375rem .9375rem;
}

.vkb-vr__text {
	font-size: 1.0625rem;
	line-height: 1.72;
	max-inline-size: 46ch;
}

.vkb-vr__text strong {
	color: var(--vkb-on-dark);
	font-weight: 600;
}

@media (max-width: 900px) {
	.vkb-vr__inner {
		grid-template-columns: 1fr;
	}

	.vkb-vr__title {
		max-inline-size: 16ch;
	}
}

/* =========================================================
   04 — RAKAMLAR
   ========================================================= */
.vkb-stats {
	background: var(--vkb-paper);
	padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.vkb-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	border-block-start: 1px solid var(--vkb-line);
	padding-block-start: clamp(2rem, 3.5vw, 3rem);
}

/* --- Bolum basligi (v2'nin "Numbers before you commit" / "Remodel now, pay monthly") --- */
.vkb-stats__head {
	max-inline-size: 62ch;
	margin-block-end: clamp(2rem, 3.5vw, 3rem);
}

body.vkb-site .vkb-stats__title {
	font-family: var(--vkb-font-display);
	font-size: var(--vkb-h2);
	line-height: 1.1;
	margin: 0;
	color: var(--vkb-ink);
}

.vkb-stats__lead {
	margin-block-start: 1.125rem;
	color: var(--vkb-body);
	max-inline-size: 56ch;
}

.vkb-stats__cta {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

.vkb-stats__fine {
	margin-block-start: 1.5rem;
	font-size: .78rem;
	color: var(--vkb-muted, var(--vkb-body));
}

/* --- Koyu zemin varyanti (finansman bandi) --- */
.vkb-stats--dark {
	background: var(--vkb-navy);
	color: var(--vkb-on-dark);
}

body.vkb-site .vkb-stats--dark .vkb-stats__title,
body.vkb-site .vkb-stats--dark .vkb-stats__num {
	color: var(--vkb-on-dark);
}

body.vkb-site .vkb-stats--dark .vkb-stats__lead,
body.vkb-site .vkb-stats--dark .vkb-stats__label {
	color: var(--vkb-on-dark-muted);
}

.vkb-stats--dark .vkb-stats__grid,
.vkb-stats--dark .vkb-stats__item {
	border-color: var(--vkb-line-dark);
}

body.vkb-site .vkb-stats--dark .vkb-stats__fine {
	color: var(--vkb-on-dark-muted);
}

.vkb-stats__item {
	padding-inline: clamp(1rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	border-inline-start: 1px solid var(--vkb-line);
}

.vkb-stats__item:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

body.vkb-site .vkb-stats__num {
	font-family: var(--vkb-font-display);
	font-size: clamp(3rem, 5.4vw, 4.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--vkb-ink);
	letter-spacing: -.035em;
	display: flex;
	align-items: flex-start;
	gap: .25rem;
}

.vkb-stats__dot {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--vkb-lime);
	flex: none;
	margin-block-start: .625rem;
}

.vkb-stats__label {
	font-family: var(--vkb-font-accent);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--vkb-body);
	line-height: 1.4;
}

@media (max-width: 860px) {
	.vkb-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem 0;
	}

	.vkb-stats__item:nth-child(odd) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* Ustteki blok 320px'e kadar IKI sutun dayatiyordu. 390px ekranda hucre 135px
   kaliyor, ama rakam 48 puntoda "$15,000+" icin 214px yer istiyor ve icinde
   satir sonu firsati yok — sag sutundaki deger sayfayi 43px yatayda tasiriyordu
   (8 Eyl, olculdu). Tek sutunda hucre ~335px, rakam rahat siginiyor; punto
   kucultmeye gerek kalmiyor. */
@media (max-width: 560px) {
	.vkb-stats__grid {
		grid-template-columns: 1fr;
	}

	.vkb-stats__item {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* =========================================================
   05 — HIZMETLER (katalog satiri)
   ========================================================= */
.vkb-services {
	background: var(--vkb-stone);
}

.vkb-services__list {
	margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
	border-block-start: 1px solid var(--vkb-line);
}

.vkb-services__row {
	display: grid;
	grid-template-columns: 72px 1fr 300px 48px;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(1.375rem, 2.4vw, 1.75rem);
	padding-inline: clamp(.5rem, 1.6vw, 1.25rem);
	border-block-end: 1px solid var(--vkb-line);
	position: relative;
	transition: background-color .4s var(--vkb-ease);
}

.vkb-services__row:hover,
.vkb-services__row:focus-within {
	background: rgba(255, 255, 255, .68);
}

.vkb-services__num {
	font-family: var(--vkb-font-accent);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--vkb-body);
	transition: color .4s var(--vkb-ease);
}

.vkb-services__num::after {
	content: "";
	display: block;
	inline-size: 14px;
	block-size: 2px;
	background: var(--vkb-lime);
	margin-block-start: .625rem;
	transition: inline-size .4s var(--vkb-ease);
}

.vkb-services__row:hover .vkb-services__num,
.vkb-services__row:focus-within .vkb-services__num {
	color: var(--vkb-ink);
}

.vkb-services__row:hover .vkb-services__num::after,
.vkb-services__row:focus-within .vkb-services__num::after {
	inline-size: 40px;
}

.vkb-services__body {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	min-inline-size: 0;
}

body.vkb-site .vkb-services__name {
	font-family: var(--vkb-font-display);
	font-size: clamp(1.625rem, 2.7vw, 2.25rem);
	font-weight: 600;
	color: var(--vkb-ink);
	letter-spacing: -.022em;
	line-height: 1.12;
}

.vkb-services__desc {
	font-size: var(--vkb-small);
	color: var(--vkb-body);
	max-inline-size: 60ch;
}

.vkb-services__thumb {
	/* 168x112 idi; musteri isin gorunmesini istedi (869f144aj) -> 300x200 (3:2). */
	inline-size: 300px;
	block-size: 200px;
	overflow: hidden;
	border-radius: var(--vkb-radius);
	background: var(--vkb-line);
	flex: none;
}

.vkb-services__thumb img {
	transition: transform .7s var(--vkb-ease);
}

.vkb-services__row:hover .vkb-services__thumb img,
.vkb-services__row:focus-within .vkb-services__thumb img {
	transform: scale(1.07);
}

.vkb-services__go {
	inline-size: 48px;
	block-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vkb-line);
	border-radius: 50%;
	color: var(--vkb-ink);
	flex: none;
	transition: background-color .4s var(--vkb-ease), border-color .4s var(--vkb-ease), transform .4s var(--vkb-ease);
}

.vkb-services__go svg {
	inline-size: 15px;
	block-size: 15px;
}

.vkb-services__row:hover .vkb-services__go,
.vkb-services__row:focus-within .vkb-services__go {
	background: var(--vkb-lime);
	border-color: var(--vkb-lime);
	transform: translateX(4px);
}

.vkb-services__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vkb-services__row > *:not(.vkb-services__cover) {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

@media (max-width: 900px) {
	.vkb-services__row {
		grid-template-columns: 52px 1fr 180px;
		gap: 1.25rem;
	}

	.vkb-services__go {
		display: none;
	}

	.vkb-services__thumb {
		inline-size: 180px;
		block-size: 120px;
	}
}

@media (max-width: 520px) {
	.vkb-services__row {
		grid-template-columns: 44px 1fr;
		row-gap: .875rem;
	}

	/* Telefonda fotograf gizleniyordu; artik satirin USTUNDE tam genislik. */
	.vkb-services__thumb {
		grid-column: 1 / -1;
		grid-row: 1;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 3 / 2;
	}
}

/* =========================================================
   06 — PORTFOLYO
   ========================================================= */
.vkb-gallery {
	background: var(--vkb-paper);
	overflow: hidden;
}

.vkb-gallery__nav {
	display: flex;
	gap: .625rem;
}

body.vkb-site .vkb-gallery__btn {
	inline-size: 48px;
	block-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vkb-line);
	background: transparent;
	border-radius: 50%;
	color: var(--vkb-ink);
	cursor: pointer;
	transition: background-color .3s var(--vkb-ease), border-color .3s var(--vkb-ease), opacity .3s var(--vkb-ease);
}

body.vkb-site .vkb-gallery__btn:hover:not(:disabled),
body.vkb-site .vkb-gallery__btn:focus:not(:disabled) {
	background: var(--vkb-navy);
	border-color: var(--vkb-navy);
	color: var(--vkb-on-dark);
}

body.vkb-site .vkb-gallery__btn:disabled {
	opacity: .3;
	cursor: default;
}

.vkb-gallery__btn svg {
	inline-size: 16px;
	block-size: 16px;
}

.vkb-gallery__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-block-start: clamp(2.25rem, 3.5vw, 3rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block-end: 4px;
}

.vkb-gallery__track::-webkit-scrollbar {
	display: none;
}

.vkb-gallery__card {
	flex: 0 0 clamp(238px, 25vw, 330px);
	scroll-snap-align: start;
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vkb-radius-lg);
	aspect-ratio: 4 / 5;
	background: var(--vkb-stone);
	transition: transform .4s var(--vkb-ease), box-shadow .4s var(--vkb-ease);
}

.vkb-gallery__card:hover,
.vkb-gallery__card:focus {
	transform: translateY(-3px);
	box-shadow: var(--vkb-shadow-md);
}

.vkb-gallery__card img {
	transition: transform .9s var(--vkb-ease);
}

.vkb-gallery__card:hover img,
.vkb-gallery__card:focus img {
	transform: scale(1.05);
}

.vkb-gallery__cap {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 2.5rem 1.375rem 1.25rem;
	background: linear-gradient(to top, rgba(6, 24, 41, .90), rgba(6, 24, 41, .45) 45%, rgba(6, 24, 41, 0));
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.vkb-gallery__kind {
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--vkb-lime);
}

body.vkb-site .vkb-gallery__name {
	font-family: var(--vkb-font-display);
	font-size: 1.3125rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

.vkb-gallery__progress {
	margin-block-start: 1.75rem;
	block-size: 2px;
	background: var(--vkb-line);
	position: relative;
	overflow: hidden;
}

.vkb-gallery__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 24%;
	background: var(--vkb-lime);
	transition: inline-size .18s linear, transform .18s linear;
}

/* =========================================================
   07 — SUREC
   ========================================================= */
.vkb-process {
	background: var(--vkb-stone);
}

.vkb-process__inner {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.vkb-process__aside {
	position: sticky;
	inset-block-start: calc(var(--vkb-header-h) + 3rem);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.vkb-process__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.vkb-process__steps::before {
	content: "";
	position: absolute;
	inset-block: 15px 15px;
	inset-inline-start: 15px;
	inline-size: 1px;
	background: var(--vkb-line);
}

.vkb-process__step {
	position: relative;
	padding-inline-start: 4.25rem;
	padding-block-end: clamp(2.25rem, 3.5vw, 3.25rem);
}

.vkb-process__step:last-child {
	padding-block-end: 0;
}

.vkb-process__dot {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1px;
	inline-size: 31px;
	block-size: 31px;
	border-radius: 50%;
	border: 1px solid var(--vkb-line);
	background: var(--vkb-stone);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vkb-font-accent);
	font-size: .75rem;
	font-weight: 700;
	color: var(--vkb-body);
	transition: background-color .45s var(--vkb-ease), border-color .45s var(--vkb-ease), color .45s var(--vkb-ease);
}

.vkb-process__step.is-active .vkb-process__dot {
	background: var(--vkb-lime);
	border-color: var(--vkb-lime);
	color: var(--vkb-ink);
}

body.vkb-site .vkb-process__step .vkb-item-title {
	margin-block-end: .5rem;
	font-size: 1.5rem;
}

.vkb-process__step p {
	font-size: var(--vkb-small);
	color: var(--vkb-body);
	max-inline-size: 54ch;
}

@media (max-width: 900px) {
	.vkb-process__inner {
		grid-template-columns: 1fr;
	}

	.vkb-process__aside {
		position: static;
	}
}

/* =========================================================
   08 — NEDEN BIZ
   ========================================================= */
.vkb-why {
	background: var(--vkb-paper);
}

.vkb-why__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.vkb-why__media {
	position: relative;
	padding-block-end: 5rem;
	padding-inline-end: 3.5rem;
}

.vkb-why__big {
	margin: 0;
	overflow: hidden;
	border-radius: var(--vkb-radius-lg);
	aspect-ratio: 4 / 3;
	box-shadow: var(--vkb-shadow-sm);
}

.vkb-why__small {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	inline-size: 50%;
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--vkb-radius-lg);
	border: 7px solid var(--vkb-paper);
	outline: 1px solid var(--vkb-lime);
	outline-offset: 6px;
	box-shadow: var(--vkb-shadow-md);
}

.vkb-why__list {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.625rem;
}

.vkb-why__item {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 1.125rem;
	align-items: start;
}

.vkb-why__tick {
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	border: 1px solid var(--vkb-lime);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--vkb-ink);
	flex: none;
	margin-block-start: 1px;
}

.vkb-why__tick svg {
	inline-size: 13px;
	block-size: 13px;
}

body.vkb-site .vkb-why__item .vkb-item-title {
	font-family: var(--vkb-font-ui);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	margin-block-end: .3125rem;
}

.vkb-why__item p {
	font-size: var(--vkb-small);
	color: var(--vkb-body);
}

@media (max-width: 900px) {
	.vkb-why__inner {
		grid-template-columns: 1fr;
	}

	.vkb-why__media {
		padding-inline-end: 2.5rem;
		padding-block-end: 3.5rem;
	}
}

/* =========================================================
   09 — YORUMLAR
   ========================================================= */
.vkb-reviews {
	background: var(--vkb-navy);
	overflow: hidden;
}

.vkb-reviews__inner {
	max-inline-size: 920px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.vkb-reviews__viewport {
	inline-size: 100%;
	position: relative;
	display: grid;
}

.vkb-reviews__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .55s var(--vkb-ease), transform .55s var(--vkb-ease), visibility .55s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.625rem;
}

.vkb-reviews__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vkb-reviews__stars {
	display: inline-flex;
	gap: .1875rem;
	color: var(--vkb-lime);
}

.vkb-reviews__stars svg {
	inline-size: 17px;
	block-size: 17px;
}

body.vkb-site .vkb-reviews__quote {
	font-family: var(--vkb-font-display);
	font-size: clamp(1.625rem, 3.3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.018em;
	color: var(--vkb-on-dark);
	margin: 0;
	max-inline-size: 24ch;
}

.vkb-reviews__who {
	display: flex;
	align-items: center;
	gap: .875rem;
}

.vkb-reviews__avatar {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--vkb-navy-soft);
}

.vkb-reviews__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vkb-font-accent);
	font-weight: 700;
	color: var(--vkb-lime);
	border: 1px solid rgba(147, 191, 36, .4);
}

.vkb-reviews__name {
	text-align: start;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.vkb-reviews__name strong {
	font-family: var(--vkb-font-accent);
	font-weight: 600;
	color: var(--vkb-on-dark);
}

.vkb-reviews__name span {
	font-size: .8125rem;
	color: var(--vkb-on-dark-muted);
}

.vkb-reviews__controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

body.vkb-site .vkb-reviews__btn {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	background: transparent;
	color: var(--vkb-on-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .3s var(--vkb-ease), border-color .3s var(--vkb-ease), color .3s var(--vkb-ease);
}

body.vkb-site .vkb-reviews__btn:hover,
body.vkb-site .vkb-reviews__btn:focus {
	background: var(--vkb-lime);
	border-color: var(--vkb-lime);
	color: var(--vkb-ink);
}

.vkb-reviews__btn svg {
	inline-size: 15px;
	block-size: 15px;
}

.vkb-reviews__dots {
	display: inline-flex;
	gap: .5rem;
}

.vkb-reviews__dot {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .26);
	cursor: pointer;
	transition: background-color .3s var(--vkb-ease), transform .3s var(--vkb-ease);
}

.vkb-reviews__dot.is-active {
	background: var(--vkb-lime);
	transform: scale(1.3);
}

/* =========================================================
   10 — SUBELER
   ========================================================= */
.vkb-locations {
	background: var(--vkb-paper);
}

.vkb-locations__grid {
	margin-block-start: clamp(2.25rem, 4vw, 3.25rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.vkb-locations__card {
	border: 1px solid var(--vkb-line);
	border-radius: var(--vkb-radius-lg);
	padding: 1.875rem 1.625rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: .625rem;
	transition: transform .4s var(--vkb-ease), box-shadow .4s var(--vkb-ease);
}

.vkb-locations__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vkb-shadow-sm);
}

.vkb-locations__card.is-active {
	border-color: var(--vkb-lime);
	box-shadow: 0 0 0 1px var(--vkb-lime);
}

.vkb-locations__badge {
	font-family: var(--vkb-font-accent);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vkb-ink);
	background: var(--vkb-lime);
	align-self: flex-start;
	padding: .3125rem .5625rem;
	border-radius: 2px;
}

body.vkb-site .vkb-locations__city {
	font-family: var(--vkb-font-display);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--vkb-ink);
	line-height: 1.1;
}

.vkb-locations__addr {
	font-size: var(--vkb-small);
	color: var(--vkb-body);
	line-height: 1.55;
}

.vkb-locations__meta {
	font-size: .8125rem;
	color: var(--vkb-body);
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.vkb-locations__card .vkb-link {
	margin-block-start: auto;
	padding-block-start: 1.25rem;
	align-self: flex-start;
	font-size: .875rem;
}

@media (max-width: 1100px) {
	.vkb-locations__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.vkb-locations__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   11 — CTA
   ========================================================= */
.vkb-cta {
	background: var(--vkb-navy);
	position: relative;
	overflow: hidden;
}

.vkb-cta__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.vkb-cta__copy {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

body.vkb-site .vkb-cta__title {
	max-inline-size: 15ch;
}

.vkb-cta__rows {
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
}

.vkb-cta__rows li {
	display: flex;
	align-items: flex-start;
	gap: .9375rem;
	padding-block: 1.125rem;
	border-block-start: 1px solid var(--vkb-line-dark);
	font-size: var(--vkb-small);
	line-height: 1.55;
}

.vkb-cta__rows svg {
	inline-size: 17px;
	block-size: 17px;
	color: var(--vkb-lime);
	flex: none;
	margin-block-start: 5px;
}

.vkb-cta__rows strong {
	color: var(--vkb-on-dark);
	font-weight: 600;
	display: block;
	font-family: var(--vkb-font-accent);
	font-size: 1.0625rem;
}

.vkb-cta__panel {
	background: var(--vkb-navy-soft);
	border: 1px solid var(--vkb-line-dark);
	border-radius: var(--vkb-radius-lg);
	padding: clamp(1.875rem, 3vw, 2.75rem);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

body.vkb-site .vkb-cta__panel .vkb-item-title {
	font-size: 1.75rem;
}

.vkb-cta__panel p {
	font-size: var(--vkb-small);
}

.vkb-cta__panel .vkb-btn {
	inline-size: 100%;
}

.vkb-cta__note {
	font-size: .75rem;
	opacity: .8;
}

/* Panel gorsel modu (27 Agu): form kartinin yerine fotograf — ayni kose yaricapi,
   dolgu yok, tasan kirpilir. img absolute: yukseklik copy kolonundan gelir,
   fotograftan degil (portre fotograf bandi sisirmesin). */
.vkb-cta__panel--media {
	padding: 0;
	overflow: hidden;
	position: relative;
	min-block-size: clamp(360px, 42vw, 560px);
}

.vkb-cta__media {
	position: absolute;
	inset: 0;
}

/* body.vkb-site oneki sart: `.elementor img { height: auto }` (0,1,1) block-size'i ezmesin. */
body.vkb-site .vkb-cta__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vkb-cta__embed {
	inline-size: 100%;
}

.vkb-cta__embed iframe {
	inline-size: 100%;
	border: 0;
	display: block;
	min-block-size: 420px;
}

/* Gomulu form paneli (cabinets). Olcum: form kendi kaynaginda 440px'te 891px,
   310px'te 973px, 273px'te 1039px, 256px ve altinda 1078px. Yani cerceve
   daraldikca form UZUYOR — dar ekranda hem genisligi geri almak hem de
   yuksekligi buyutmek gerekiyor.

   1) Panelin 30px ic dolgusu 390px telefonda iframe'i 273px'e dusuruyordu
      (telefon alani bile kirpiliyordu). Dolgu yatayda 10px'e iniyor. */
@media (max-width: 767px) {
	.vkb-cta__panel--embed {
		padding-block: 1.25rem;
		padding-inline: .625rem;
	}
}

/* 2) Elementor'un mobil degeri 1000px. 380px altinda iframe 305px'in altina
      duser ve form 1078px'e cikar; 1000px orada formu kirpar.
      Ozgulluk sart: Elementor'un kurali (0,4,1) — bu (0,4,2). */
@media (max-width: 380px) {
	body.vkb-site .vkb-cta__panel--embed.vkb-cta__panel .vkb-cta__embed iframe {
		min-block-size: 1100px;
	}
}

/* 3) 560-767px arasi iframe 480px'i asar, form 844-865px'e iner; mobil
      degerin 1000px'i orada formun altinda bos koyu bant birakiyordu.
      (651px'te olculen boy: 844px.) */
@media (min-width: 560px) and (max-width: 767px) {
	body.vkb-site .vkb-cta__panel--embed.vkb-cta__panel .vkb-cta__embed iframe {
		min-block-size: 900px;
	}
}

@media (max-width: 900px) {
	.vkb-cta__inner {
		grid-template-columns: 1fr;
	}
}

/* Gomulu form: izgara 1024px'te tek sutuna iner. 1000px ekranda iki sutunda
   panel 350px kaliyor ve form 948px'e uzuyordu; tek sutunda ayni yerde 898px
   genislik + 844px form. Tablette formu ezmemek icin sart. */
@media (max-width: 1024px) {
	.vkb-cta__inner--embed {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   12 — FOOTER
   ========================================================= */
.vkb-footer {
	background: var(--vkb-navy-deep);
	padding-block-start: clamp(3.5rem, 6vw, 5.5rem);
}

.vkb-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

/* Showroom sutunu doluysa 5 sutun. Asagidaki kirilim kurallari (ayni ozgulluk,
   daha sonra geldigi icin) dar ekranda yine 2/1 sutuna dusurur. */
.vkb-footer__top--5 {
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
}

.vkb-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	align-items: flex-start;
}

body.vkb-site .vkb-footer__brand img {
	block-size: 46px;
	inline-size: auto;
	max-inline-size: none;
	display: block;
}

.vkb-footer__brand p {
	font-size: var(--vkb-small);
	max-inline-size: 34ch;
}

.vkb-footer__social {
	display: flex;
	gap: .625rem;
	margin-block-start: .25rem;
}

.vkb-footer__social a {
	inline-size: 38px;
	block-size: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	color: var(--vkb-on-dark);
	transition: background-color .3s var(--vkb-ease), color .3s var(--vkb-ease), border-color .3s var(--vkb-ease);
}

.vkb-footer__social a:hover,
.vkb-footer__social a:focus {
	background: var(--vkb-lime);
	border-color: var(--vkb-lime);
	color: var(--vkb-ink);
}

.vkb-footer__social svg {
	inline-size: 16px;
	block-size: 16px;
}

body.vkb-site .vkb-footer__col .vkb-item-title {
	font-family: var(--vkb-font-accent);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--vkb-on-dark);
	margin-block-end: 1.25rem;
}

.vkb-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6875rem;
}

.vkb-footer__col a,
.vkb-footer__col li {
	font-size: var(--vkb-small);
	transition: color .3s var(--vkb-ease);
}

.vkb-footer__col a:hover,
.vkb-footer__col a:focus {
	color: var(--vkb-lime-soft);
}

.vkb-footer__contact li {
	display: flex;
	gap: .6875rem;
	align-items: flex-start;
	line-height: 1.55;
}

.vkb-footer__contact svg {
	inline-size: 15px;
	block-size: 15px;
	color: var(--vkb-lime);
	flex: none;
	margin-block-start: 4px;
}

.vkb-footer__cities {
	border-block-start: 1px solid var(--vkb-line-dark);
	padding-block: 1.375rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
}

.vkb-footer__cities span {
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--vkb-on-dark);
}

.vkb-footer__cities a {
	font-size: .8125rem;
	transition: color .3s var(--vkb-ease);
}

.vkb-footer__cities a:hover,
.vkb-footer__cities a:focus {
	color: var(--vkb-lime-soft);
}

.vkb-footer__bottom {
	border-block-start: 1px solid var(--vkb-line-dark);
	padding-block: 1.625rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .8125rem;
}

.vkb-footer__legal {
	display: flex;
	gap: 1.5rem;
}

.vkb-footer__legal a:hover,
.vkb-footer__legal a:focus {
	color: var(--vkb-lime-soft);
}

@media (max-width: 1000px) {
	.vkb-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.vkb-footer__top {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Elementor konum sarmalayicilari
   ========================================================= */
body.vkb-site .elementor-location-header,
body.vkb-site .elementor-location-footer {
	margin: 0;
	padding: 0;
}

body.vkb-site .elementor-location-header .e-con,
body.vkb-site .elementor-location-footer .e-con,
body.vkb-site .elementor-location-header .e-con-inner,
body.vkb-site .elementor-location-footer .e-con-inner {
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	max-inline-size: none;
}

.vkb-i {
	inline-size: 1em;
	block-size: 1em;
	flex: none;
}


/* =========================================================
   DUZELTME + EKLER
   Hello Elementor reset.css su kurali basiyor:
     [type=button],[type=submit],button        -> border/color #c36 (PEMBE)
     button:hover, button:focus                -> background-color #c36 (PEMBE DOLGU)
   (0,1,1) ozgullugunde oldugu icin tek sinifli kurallarimizi yener. Asagida tum
   ozel dugmelerin HER durumu `body.vkb-site` onekiyle (0,2,x) pinlenir.
   ========================================================= */
body.vkb-site .vkb-burger,
body.vkb-site .vkb-burger:hover,
body.vkb-site .vkb-burger:focus,
body.vkb-site .vkb-burger:active,
body.vkb-site .vkb-drawer__close,
body.vkb-site .vkb-drawer__close:hover,
body.vkb-site .vkb-drawer__close:focus,
body.vkb-site .vkb-drawer__close:active,
body.vkb-site .vkb-reviews__dot,
body.vkb-site .vkb-reviews__dot:hover,
body.vkb-site .vkb-reviews__dot:focus,
body.vkb-site .vkb-top,
body.vkb-site .vkb-top:hover,
body.vkb-site .vkb-top:focus {
	background-color: transparent;
	box-shadow: none;
}

body.vkb-site .vkb-burger:hover,
body.vkb-site .vkb-burger:focus-visible {
	border-color: var(--vkb-lime);
}

body.vkb-site .vkb-drawer__close:hover,
body.vkb-site .vkb-drawer__close:focus-visible {
	border-color: var(--vkb-lime);
	color: var(--vkb-lime);
}

body.vkb-site .vkb-reviews__dot {
	background-color: rgba(255, 255, 255, .26);
}

body.vkb-site .vkb-reviews__dot.is-active {
	background-color: var(--vkb-lime);
}

/* --- Cekmece koyu yuzey: linkler acik renk --- */
body.vkb-site .vkb-drawer {
	--vkb-fg-strong: var(--vkb-on-dark);
	--vkb-fg: var(--vkb-on-dark-muted);
	color: var(--vkb-fg);
}

body.vkb-site .vkb-drawer__menu > li > a {
	color: var(--vkb-on-dark);
}

body.vkb-site .vkb-drawer__menu .sub-menu a {
	color: var(--vkb-on-dark-muted);
}

body.vkb-site .vkb-drawer__menu a:hover,
body.vkb-site .vkb-drawer__menu a:focus {
	color: var(--vkb-lime-soft);
}

/* --- Ozel hamburger: asimetrik, alt cizgi lime --- */
body.vkb-site .vkb-burger__bar,
body.vkb-site .vkb-burger__bar::before,
body.vkb-site .vkb-burger__bar::after {
	transition: inline-size .38s var(--vkb-ease), background-color .38s var(--vkb-ease);
}

body.vkb-site .vkb-burger__bar::after {
	inline-size: 11px;
	background: var(--vkb-lime);
}

body.vkb-site .vkb-burger:hover .vkb-burger__bar::after,
body.vkb-site .vkb-burger:focus-visible .vkb-burger__bar::after {
	inline-size: 18px;
}

body.vkb-site .vkb-burger:hover .vkb-burger__bar::before,
body.vkb-site .vkb-burger:focus-visible .vkb-burger__bar::before {
	inline-size: 12px;
}

/* --- Yukari don --- */
body.vkb-site .vkb-top {
	position: fixed;
	inset-block-end: clamp(1.25rem, 3vw, 2.25rem);
	inset-inline-end: clamp(1.25rem, 3vw, 2.25rem);
	z-index: 880;
	inline-size: 52px;
	block-size: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--vkb-on-dark);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .4s var(--vkb-ease), transform .4s var(--vkb-ease), visibility .4s;
}

body.vkb-site .vkb-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Dolgu ayri katmanda: Hello'nun buton kurali arka plani ezemesin. */
body.vkb-site .vkb-top::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--vkb-navy);
	box-shadow: 0 8px 30px rgba(6, 24, 41, .32);
	transition: background-color .35s var(--vkb-ease), transform .35s var(--vkb-ease);
	z-index: 0;
}

body.vkb-site .vkb-top:hover::before,
body.vkb-site .vkb-top:focus-visible::before {
	background: var(--vkb-lime);
	transform: scale(1.06);
}

body.vkb-site .vkb-top:hover,
body.vkb-site .vkb-top:focus-visible {
	color: var(--vkb-ink);
}

/* Ilerleme halkasi */
body.vkb-site .vkb-top svg.vkb-top__ring {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
	z-index: 1;
	pointer-events: none;
}

body.vkb-site .vkb-top__ring circle {
	fill: none;
	stroke-width: 2;
}

body.vkb-site .vkb-top__ring .vkb-top__track {
	stroke: rgba(255, 255, 255, .18);
}

body.vkb-site .vkb-top__ring .vkb-top__bar {
	stroke: var(--vkb-lime);
	stroke-linecap: round;
	transition: stroke-dashoffset .12s linear;
}

body.vkb-site .vkb-top:hover .vkb-top__ring .vkb-top__bar,
body.vkb-site .vkb-top:focus-visible .vkb-top__ring .vkb-top__bar {
	stroke: var(--vkb-ink);
}

body.vkb-site .vkb-top__icon {
	position: relative;
	z-index: 2;
	inline-size: 16px;
	block-size: 16px;
}

/* =========================================================
   RANDEVU POP-UP  (ClickUp 869ev556g)
   =========================================================
   "Book" butonlari formu burada acar. Pi Suite kurallari:
   sarmalayici ZEMINSIZ (form kendi beyaz kartini ciziyor),
   iframe'e border-radius YOK (kartin kenarligini kirpar).
   Boy olculmus degerden gelir; JS sayfadaki hero formunun
   yuksekligini kopyalar.
   ========================================================= */
[hidden] {
	display: none !important;
}

.vkb-bookmodal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 76px 20px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vkb-bookmodal__scrim {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 18, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s var(--vkb-ease);
}

.vkb-bookmodal.is-open .vkb-bookmodal__scrim {
	opacity: 1;
}

.vkb-bookmodal__box {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: 560px;
	margin: auto;
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity .34s var(--vkb-ease), transform .34s var(--vkb-ease);
}

.vkb-bookmodal.is-open .vkb-bookmodal__box {
	opacity: 1;
	transform: none;
}

body.vkb-site .vkb-bookmodal__box iframe {
	inline-size: 100%;
	min-block-size: 860px;
	border: 0;
	border-radius: 0;
	display: block;
	background: transparent;
}

.vkb-bookmodal__x {
	position: absolute;
	inset-block-start: -52px;
	inset-inline-end: 0;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	border: 1px solid rgba(244, 241, 233, .34);
	background: rgba(10, 22, 18, .5);
	color: var(--vkb-on-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .26s var(--vkb-ease);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* hello-elementor reset.css: [type="button"]:hover/:focus -> background #CC3366 (PEMBE).
   Ozgullugu (0,2,0) bizim (0,1,0) kuralimizi eziyordu; kapatma dugmesi uzerine
   gelince pembe kutuya donusuyordu. body.vkb-site ile (0,3,1)'e cikarilip
   zemin acikca yeniden veriliyor — :focus de kapsanmali, :focus-visible yetmiyor. */
body.vkb-site .vkb-bookmodal__x:hover,
body.vkb-site .vkb-bookmodal__x:focus,
body.vkb-site .vkb-bookmodal__x:focus-visible {
	background: rgba(10, 22, 18, .74);
	border-color: var(--vkb-brass, #C3A15B);
	color: var(--vkb-brass, #C3A15B);
	transform: rotate(90deg);
}

@media (max-width: 640px) {
	.vkb-bookmodal {
		padding: 66px 14px 28px;
	}

	.vkb-bookmodal__x {
		inset-block-start: -48px;
		inset-inline-end: 2px;
	}

	body.vkb-site .vkb-bookmodal__box iframe {
		min-block-size: 1000px;
	}
}

/* =========================================================
   PEMBE BUTON KORUMASI  (hello-elementor reset.css)
   =========================================================
   Parent temanin reset.css'i su kurali basiyor:

     [type="button"]:hover, [type="button"]:focus,
     button:hover, button:focus { background-color: #CC3366; }

   Ozgulluk (0,2,0) — widget'larin kendi (0,1,0) zemin kurallarini eziyor.
   Sonuc: uzerine gelinen/odaklanan her <button> PEMBE kutuya donusuyordu
   (randevu pop-up'inin kapatma dugmesi, hamburger, SSS sorulari, yorum
   noktalari). Her biri kendi zeminiyle, (0,3,1) ozgullukle sabitleniyor.
   `:focus-visible` yetmez — reset duz `:focus` de veriyor.
   ========================================================= */
body.vkb-site .vkb-burger:hover,
body.vkb-site .vkb-burger:focus {
	background-color: transparent;
}

body.vkb-site .vkb-faq__q:hover,
body.vkb-site .vkb-faq__q:focus {
	background-color: transparent;
}

body.vkb-site .vkb-reviews__dot:hover,
body.vkb-site .vkb-reviews__dot:focus {
	background-color: rgba(255, 255, 255, .26);
}

body.vkb-site .vkb-reviews__dot.is-active:hover,
body.vkb-site .vkb-reviews__dot.is-active:focus {
	background-color: var(--vkb-lime);
}

body.vkb-site .vkb-drawer__close:focus,
body.vkb-site .vkb-gallery__btn:focus,
body.vkb-site .vkb-reviews__btn:focus {
	background-color: inherit;
}

/* =========================================================
   PROJE VITRINI (vkb-showcase)
   =========================================================
   Buyuk fotograf + yanda proje notu + altta kucuk resim seridi.
   Yapi Fairfax'teki pi-gallery'den alindi, gorunum VKB diline cevrildi:
   kirmizi dolu hap yerine tonlu cip, koyu kart yerine tas yuzey. */
.vkb-showcase__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
	align-items: start;
	margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

.vkb-showcase__figure {
	margin: 0;
	min-inline-size: 0;
}

.vkb-showcase__stage {
	block-size: 460px;
	border-radius: var(--vkb-radius-lg);
	overflow: hidden;
	background: var(--vkb-stone);
}

/* `.elementor img { height: auto }` (0,1,1) block-size'i eziyor — body.vkb-site sart. */
body.vkb-site .vkb-showcase__lead {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vkb-showcase__cap {
	margin-block-start: .75rem;
	font-size: .875rem;
	font-style: italic;
	color: var(--vkb-muted, var(--vkb-body));
}

.vkb-showcase__panel {
	background: var(--vkb-stone);
	border: 1px solid var(--vkb-line);
	border-radius: var(--vkb-radius-lg);
	padding: clamp(1.25rem, 2.2vw, 1.875rem);
	display: flex;
	flex-direction: column;
	gap: .875rem;
	min-inline-size: 0;
}

.vkb-showcase__tag {
	margin: 0;
}

body.vkb-site .vkb-showcase__name {
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	margin: 0;
}

.vkb-showcase__text {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.vkb-showcase__text p {
	margin: 0;
	font-size: .9375rem;
}

.vkb-showcase__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4375rem;
}

/* Cip dili marka kartlariyla ayni recete (.vkb-bcard__badges): tonlu zemin +
   murekkebe cekilmis yazi. %50 lime kart zemininde 5.2:1 veriyor. */
.vkb-showcase__chips li {
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .03em;
	padding: .3125rem .625rem;
	border-radius: 999px;
	color: color-mix(in srgb, var(--vkb-lime) 50%, var(--vkb-ink));
	background: color-mix(in srgb, var(--vkb-lime) 12%, #fff);
}

.vkb-showcase__chips:empty {
	display: none;
}

/* --- kucuk resim seridi --- */
.vkb-showcase__strip {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-block-start: 1rem;
}

/* Buyuk kare lightbox baglantisi: sag ustte kucuk "buyut" rozeti. */
.vkb-showcase__zoom {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	cursor: zoom-in;
}

.vkb-showcase__zoomicon {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	inline-size: 36px;
	block-size: 36px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(14, 28, 24, .62);
	color: #F4F1E9;
	backdrop-filter: blur(4px);
	transition: background-color .25s var(--vkb-ease), transform .25s var(--vkb-ease);
}

.vkb-showcase__zoom:hover .vkb-showcase__zoomicon,
.vkb-showcase__zoom:focus-visible .vkb-showcase__zoomicon {
	background: rgba(14, 28, 24, .85);
	transform: scale(1.06);
}

.vkb-showcase__thumb {
	flex: 0 0 auto;
	inline-size: 118px;
	block-size: 84px;
	padding: 0;
	border: 0;
	border-radius: var(--vkb-radius-sm, 4px);
	overflow: hidden;
	cursor: pointer;
	background: var(--vkb-stone);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color .25s var(--vkb-ease), opacity .25s var(--vkb-ease);
	opacity: .72;
}

body.vkb-site .vkb-showcase__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vkb-showcase__thumb:hover,
.vkb-showcase__thumb:focus-visible {
	opacity: 1;
}

.vkb-showcase__thumb.is-open {
	outline-color: var(--vkb-lime);
	opacity: 1;
}

/* Ana temanin reset.css'i [type="button"] hover/focus'ta pembe zemin basiyor
   (0,2,0) — kucuk resimlerde de olacakti. */
body.vkb-site .vkb-showcase__thumb:hover,
body.vkb-site .vkb-showcase__thumb:focus {
	background-color: var(--vkb-stone);
}

/* Ayni tuzak: govde reset'i `body.vkb-site p` ile margin'i siliyordu,
   bu bosluk hic uygulanmiyordu. */
body.vkb-site .vkb-showcase__more {
	margin-block-start: 1.25rem;
}

@media (max-width: 900px) {
	.vkb-showcase__inner {
		grid-template-columns: 1fr;
	}

	/* Telefonda serit tek satirda parmakla kayar; kaydirma cubugu gizli,
	   kareler hizaya oturur (snap). Emre: "mobilde galeri cok kotu". */
	.vkb-showcase__strip {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-block-start: .75rem;
		padding-block-end: .125rem;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.vkb-showcase__strip::-webkit-scrollbar {
		display: none;
	}

	.vkb-showcase__thumb {
		scroll-snap-align: start;
	}

	.vkb-showcase__panel {
		margin-block-start: .25rem;
	}
	/* Buyuk fotografin yuksekligi BURADAN verilmez: Elementor'un responsive
	   kontrolu {{WRAPPER}} ile (0,4,1) ozgullukte yaziyor ve bu medya sorgusunu
	   yener. Tablet/mobil boyu widget'in kendi kontrolunden ayarlanir. */
}

/* Marka kartlarinin altindaki kapanis satiri (musteri "Bottom line" diye
   veriyor: showroomda ayrica bulunan malzemeler). */
.vkb-bcards__note {
	margin-block-start: clamp(1.25rem, 2vw, 1.75rem);
	font-size: .875rem;
	color: var(--vkb-muted, var(--vkb-body));
	max-inline-size: 76ch;
}

/* --- About sayfasi duzeltmeleri (12 Eyl) ------------------------------ */

/* vkb-why: hic gorsel yoksa metin tam genislige yayilir (ekip bolumu). */
.vkb-why__inner--notext {
	grid-template-columns: 1fr;
}

/* Rakamlar bandinin giris metni artik cok paragrafli olabiliyor; paragraflar
   arasinda bosluk yoktu ve tek dar sutunda duvar gibi duruyordu. Genis
   ekranda iki sutuna akar (v2 tasariminin story-grid duzeni). */
.vkb-stats__lead + .vkb-stats__lead {
	margin-block-start: .875rem;
}

@media (min-width: 900px) {
	.vkb-stats__head:has(.vkb-stats__lead + .vkb-stats__lead) .vkb-stats__lead {
		max-inline-size: none;
	}

	.vkb-stats__head:has(.vkb-stats__lead + .vkb-stats__lead) {
		max-inline-size: none;
	}

	.vkb-stats__lead {
		max-inline-size: 62ch;
	}
}

/* =========================================================
   WP ADMIN CUBUGU + SABIT HEADER (12 Eyl)
   Giris yapmis kullanicida WordPress `html{margin-top:32px}` basar; header
   `position:fixed; top:0` oldugu icin cubugun altinda kalir, govde ise
   32 + header kadar asagidan baslar -> header ile kirinti arasinda 32px'lik
   kagit rengi bir bant gorunur (Emre: "yukarida beyaz bosluk"). Ziyaretci bunu
   hic gormez; yine de header cubugun altina alinir. WP cubugu 782px altinda
   46px'tir.
   ========================================================= */
body.vkb-site.admin-bar .vkb-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	body.vkb-site.admin-bar .vkb-header {
		inset-block-start: 46px;
	}
}

/* =========================================================
   PORTFOLIO (12 Eyl 2026) — Figma "Work · portfolio page"
   Is hero'su, one cikan proje, dolap serileri, fotograf kartlari
   ========================================================= */

/* --- fotograf karti (ortak) -------------------------------------------- */
.vkb-pcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2rem);
	margin-block-start: 1rem;
}

.vkb-pcard {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--vkb-radius-lg);
	background: var(--vkb-stone);
	transition: transform .4s var(--vkb-ease), box-shadow .4s var(--vkb-ease);
}

a.vkb-pcard:hover,
a.vkb-pcard:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--vkb-shadow-md);
}

.vkb-pcard img {
	transition: transform .9s var(--vkb-ease);
}

a.vkb-pcard:hover img {
	transform: scale(1.05);
}

.vkb-pcard__cap {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 2.75rem 1.375rem 1.25rem;
	background: linear-gradient(to top, rgba(14, 28, 24, .92), rgba(14, 28, 24, .5) 45%, rgba(14, 28, 24, 0));
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.vkb-pcard__kind {
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--vkb-lime);
}

body.vkb-site .vkb-pcard__name {
	font-family: var(--vkb-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

/* --- is hero'su --------------------------------------------------------- */
.vkb-workhero {
	position: relative;
	isolation: isolate;
	min-block-size: 620px;
	display: flex;
	align-items: flex-end;
	background: var(--vkb-navy);
	color: var(--vkb-on-dark);
	overflow: hidden;
}

.vkb-workhero__bg,
.vkb-workhero__slide {
	position: absolute;
	inset: 0;
}

.vkb-workhero__bg {
	z-index: -2;
}

.vkb-workhero__slide {
	opacity: 0;
	transition: opacity .9s var(--vkb-ease);
}

.vkb-workhero__slide.is-active {
	opacity: 1;
}

/* Figma: murekkep %20 + metin tarafi gradyani + marka yesili %8. */
.vkb-workhero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(14, 28, 24, .82), rgba(14, 28, 24, .62) 45%, rgba(14, 28, 24, .18)),
		rgba(147, 191, 36, .08);
}

.vkb-workhero__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(4.5rem, 8vw, 7rem) clamp(2rem, 3.5vw, 3rem);
}

.vkb-workhero__content {
	max-inline-size: 52rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

body.vkb-site .vkb-workhero__title {
	color: var(--vkb-on-dark);
	font-size: clamp(2.375rem, 5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	max-inline-size: 14ch;
}

body.vkb-site .vkb-workhero__lead {
	color: var(--vkb-on-dark);
	opacity: .92;
	max-inline-size: 58ch;
}

.vkb-workhero__filter {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

body.vkb-site .vkb-workhero__pill {
	font: 600 .8125rem/1 var(--vkb-font-ui);
	letter-spacing: .02em;
	padding: .5rem .875rem;
	border-radius: 999px;
	border: 1px solid rgba(244, 241, 233, .18);
	background: rgba(20, 37, 31, .78);
	color: #B7CE9B;
	cursor: pointer;
	transition: background-color .25s var(--vkb-ease), color .25s var(--vkb-ease), border-color .25s var(--vkb-ease);
}

body.vkb-site .vkb-workhero__pill:hover,
body.vkb-site .vkb-workhero__pill:focus {
	background: rgba(20, 37, 31, 1);
	color: #fff;
	border-color: rgba(244, 241, 233, .35);
}

body.vkb-site .vkb-workhero__pill.is-active,
body.vkb-site .vkb-workhero__pill.is-active:hover,
body.vkb-site .vkb-workhero__pill.is-active:focus {
	background: var(--vkb-paper);
	color: var(--vkb-ink);
	border-color: var(--vkb-paper);
}

.vkb-workhero__slides {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-inline-start: auto;
}

.vkb-workhero__thumbs {
	display: flex;
	gap: .625rem;
}

body.vkb-site .vkb-workhero__thumb {
	inline-size: 84px;
	block-size: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--vkb-radius);
	overflow: hidden;
	background: var(--vkb-stone);
	cursor: pointer;
	opacity: .7;
	transition: opacity .25s var(--vkb-ease), border-color .25s var(--vkb-ease);
}

body.vkb-site .vkb-workhero__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

body.vkb-site .vkb-workhero__thumb:hover,
body.vkb-site .vkb-workhero__thumb:focus {
	opacity: 1;
	background: var(--vkb-stone);
}

body.vkb-site .vkb-workhero__thumb.is-active {
	opacity: 1;
	border-color: var(--vkb-lime);
}

.vkb-workhero__nav {
	display: flex;
	gap: .625rem;
}

body.vkb-site .vkb-workhero__btn {
	inline-size: 48px;
	block-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--vkb-ink);
	cursor: pointer;
	transition: background-color .3s var(--vkb-ease), color .3s var(--vkb-ease);
}

body.vkb-site .vkb-workhero__btn:hover,
body.vkb-site .vkb-workhero__btn:focus {
	background: var(--vkb-lime);
	color: var(--vkb-ink);
}

.vkb-workhero__btn svg {
	inline-size: 16px;
	block-size: 16px;
}

@media (max-width: 900px) {
	.vkb-workhero__inner {
		padding-block-start: clamp(3rem, 8vw, 4rem);
	}

	.vkb-workhero__slides {
		margin-inline-start: 0;
	}
}

@media (max-width: 560px) {
	/* 4 kucuk resim + 2 ok 390'da 408px ediyordu; sarsin, kucuk kalsin. */
	.vkb-workhero__slides {
		flex-wrap: wrap;
		gap: .75rem;
	}

	body.vkb-site .vkb-workhero__thumb {
		inline-size: 60px;
		block-size: 42px;
	}

	body.vkb-site .vkb-workhero__btn {
		inline-size: 40px;
		block-size: 40px;
	}

}

/* --- one cikan proje ----------------------------------------------------- */
.vkb-featured {
	background: var(--vkb-paper);
}

.vkb-featured__compare {
	margin-block-start: clamp(2rem, 3.5vw, 3rem);
	background: #fff;
	border: 1px solid var(--vkb-line);
	border-radius: var(--vkb-radius-lg);
	overflow: hidden;
	box-shadow: var(--vkb-shadow-sm);
}

.vkb-featured__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--vkb-line);
}

.vkb-featured__pane {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vkb-stone);
}

.vkb-featured__chip {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	font-family: var(--vkb-font-accent);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	padding: .375rem .75rem;
	border-radius: 999px;
	background: rgba(14, 28, 24, .92);
	color: var(--vkb-lime);
}

.vkb-featured__chip--after {
	background: var(--vkb-lime);
	color: var(--vkb-ink);
}

.vkb-featured__body {
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

body.vkb-site .vkb-featured__title {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.vkb-featured__body .vkb-item-text {
	max-inline-size: 78ch;
}

body.vkb-site .vkb-featured__more {
	margin-block-start: .5rem;
}

.vkb-featured__facts {
	list-style: none;
	margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2rem);
}

.vkb-featured__fact {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	border-inline-start: 2px solid var(--vkb-lime);
	padding-inline-start: 1.125rem;
}

.vkb-featured__figure {
	font-family: var(--vkb-font-display);
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	color: #7D6636;
}

.vkb-featured__note {
	font-size: .875rem;
	line-height: 1.55;
	color: var(--vkb-body);
	max-inline-size: 34ch;
}

.vkb-featured__strip {
	margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

body.vkb-site .vkb-featured__striplabel,
body.vkb-site .vkb-lines__label {
	margin-block-end: .25rem;
}

@media (max-width: 700px) {
	.vkb-featured__media {
		grid-template-columns: 1fr;
	}
}

/* --- dolap serileri ------------------------------------------------------ */
.vkb-lines {
	background: var(--vkb-paper);
}

.vkb-lines__grid {
	list-style: none;
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(1.25rem, 2vw, 1.75rem);
}

.vkb-lines__item {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-inline-size: 0;
}

.vkb-lines__pic {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--vkb-radius);
	background: var(--vkb-stone);
}

body.vkb-site .vkb-lines__name {
	font-family: var(--vkb-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin-block-start: .25rem;
}

.vkb-lines__desc {
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--vkb-body);
}

.vkb-lines__scenes {
	margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

/* Galeri filtresi (is hero pilleri): eslesmeyen kart gizlenir. */
.vkb-gallery__card.is-filtered-out {
	display: none;
}

/* Seri kartlari telefonda tek kolonda 6 ekran uzuyordu; Figma mobilde iki kolon.
   Dosyada base kuraldan SONRA ve bir sinif daha ozgul olmali, yoksa
   `.vkb-lines__grid` base kurali (ayni ozgulluk, sonra gelen) kazaniyor. */
@media (max-width: 560px) {
	.vkb-lines .vkb-lines__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	body.vkb-site .vkb-lines__name {
		font-size: 1.0625rem;
	}

	.vkb-lines .vkb-lines__desc {
		font-size: .75rem;
	}
}

/* One cikan proje: seridin altindaki "tum projeler" baglantisi (p reset'i icin body ile). */
body.vkb-site .vkb-featured__all {
	margin-block-start: clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================================================
   IS KARTLARI (13 Eyl) — cabinets spec "Recent cabinet projects":
   ortali baslik, beyaz kartlar, buyuk fotograf (istenirse iki kare yan
   yana), altyazi + baglanti. Vitrinden (vkb-featured) AYRI bir bolum.
   ========================================================= */
.vkb-workcards--paper {
	background: var(--vkb-paper);
}

.vkb-workcards--stone {
	background: var(--vkb-stone);
}

.vkb-workcards__head {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.vkb-workcards__head .vkb-eyebrow {
	justify-content: center;
}

.vkb-workcards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2rem);
	margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

.vkb-workcards__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vkb-workcards__card {
	background: #fff;
	border: 1px solid var(--vkb-line);
	border-radius: var(--vkb-radius-lg);
	padding: 1rem;
	box-shadow: var(--vkb-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: .875rem;
	min-inline-size: 0;
}

.vkb-workcards__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	border-radius: var(--vkb-radius);
	overflow: hidden;
	background: var(--vkb-line);
}

.vkb-workcards__media--pair {
	grid-template-columns: 1fr 1fr;
}

.vkb-workcards__pic {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--vkb-stone);
}

a.vkb-workcards__pic {
	cursor: zoom-in;
}

.vkb-workcards__pic img {
	transition: transform .9s var(--vkb-ease);
}

a.vkb-workcards__pic:hover img {
	transform: scale(1.04);
}

.vkb-workcards__chip {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-start: .75rem;
	font-family: var(--vkb-font-accent);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .3125rem .625rem;
	border-radius: 999px;
	background: rgba(14, 28, 24, .92);
	color: var(--vkb-lime);
}

.vkb-workcards__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding-inline: .25rem;
	padding-block-end: .25rem;
}

.vkb-workcards__body .vkb-item-text {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--vkb-body);
}

body.vkb-site .vkb-workcards__link {
	font-size: .875rem;
	align-self: flex-start;
}

@media (max-width: 860px) {
	.vkb-workcards__grid,
	.vkb-workcards__grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Yan yana iki kare: tek karenin (4:3) yuksekligini tutsun diye her biri 2:3;
   yoksa cift kartin alti bos kaliyordu (olculdu: 1440'ta 300px delik). */
.vkb-workcards__media--pair .vkb-workcards__pic {
	aspect-ratio: 2 / 3;
}

@media (max-width: 480px) {
	.vkb-workcards__media--pair {
		grid-template-columns: 1fr;
	}

	.vkb-workcards__media--pair .vkb-workcards__pic {
		aspect-ratio: 4 / 3;
	}
}

/* Rakamlar bandindaki kucuk yazi artik baglanti tasiyor (Synchrony Bank);
   koyu zeminde okunur, alti cizili, hover'da acik renk. */
body.vkb-site .vkb-stats__fine a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.vkb-site .vkb-stats__fine a:hover,
body.vkb-site .vkb-stats__fine a:focus {
	color: var(--vkb-on-dark);
	text-decoration-color: var(--vkb-lime);
}