/* section-security — split from vala-onboarding-redesign.css (do not reorder vs main bundle). */
/* --- Security band --- */
.vala-landing-v2--premium .vala-security-band {
	background: linear-gradient(142deg, var(--vala-navy-900, #0b1728) 0%, #0f2744 46%, var(--vala-navy-850, #10243a) 100%);
	border: 1px solid rgba(56, 189, 248, 0.22);
	box-shadow:
		0 0 0 1px rgba(223, 243, 255, 0.06) inset,
		0 28px 72px rgba(6, 17, 31, 0.38),
		0 0 80px rgba(56, 189, 248, 0.1);
	padding: 44px 42px;
}

.vala-landing-v2--premium .vala-security-main h2 {
	color: #f8fafc;
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 900;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.vala-landing-v2--premium .vala-security-main p {
	color: rgba(226, 232, 240, 0.95);
	font-size: 17px;
	line-height: 1.72;
}

.vala-landing-v2--premium .vala-security-items span {
	color: #e0f2fe;
	font-weight: 800;
}

.vala-landing-v2--premium .vala-security-items span::before {
	color: #38bdf8;
}


.vala-landing-v2--premium #guvenlik {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	overflow-y: visible;
	/* Phase 11D: calmer section bed — reads continuous with scenarios, not a new grey slab */
	background: rgba(11, 23, 40, 0.16);
}

/* Phase 11B — scenarios→security: #guvenlik::before only */
.vala-landing-v2--premium #guvenlik::before {
	content: "";
	position: absolute;
	width: min(150vw, 2400px);
	/* Phase 11D: smaller navy cap — pale global cream must not compete here */
	height: clamp(260px, 30vw, 400px);
	left: 50%;
	top: clamp(-300px, -23vw, -180px);
	transform: translateX(-50%) rotate(-3deg);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
		195deg,
		var(--vala-bg-deep, #06111f) 0%,
		var(--vala-bg-navy, #0b1728) 48%,
		var(--vala-bg-blue, #10243a) 100%
	);
	opacity: var(--vala-transition-opacity-medium, 0.12);
	box-shadow: none;
	filter: none;
	/* Phase 11C — top transition only: fades before security card column */
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 12%,
		#000 30%,
		transparent 66%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 12%,
		#000 30%,
		transparent 66%
	);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.vala-landing-v2--premium #guvenlik::after {
	display: none;
}

@media (min-width: 769px) and (max-width: 1050px) {
	.vala-landing-v2--premium #guvenlik::before {
		height: calc(clamp(260px, 30vw, 400px) * 0.61);
		top: clamp(-280px, -22vw, -170px);
		opacity: min(0.14, var(--vala-transition-opacity-medium, 0.12));
	}
}

@media (max-width: 768px) {
	.vala-landing-v2--premium #guvenlik::before {
		height: clamp(200px, 46vw, 300px);
		top: clamp(-160px, -24vw, -100px);
		opacity: min(0.14, var(--vala-transition-opacity-medium, 0.12));
	}
}

@media (max-width: 520px) {
	.vala-landing-v2--premium #guvenlik::before {
		opacity: var(--vala-transition-opacity-soft, 0.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vala-landing-v2--premium #guvenlik::before {
		opacity: var(--vala-transition-opacity-medium, 0.12);
	}
}

.vala-landing-v2--premium #guvenlik > .vala-landing-container {
	position: relative;
	z-index: 2;
}

/* Security trust band */
.vala-landing-v2--premium .vala-security-band--human .vala-security-main__glyph {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	font-size: 26px;
	line-height: 1;
	opacity: 1;
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.55));
	border: 1px solid rgba(56, 189, 248, 0.38);
	box-shadow:
		0 0 48px rgba(56, 189, 248, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #f0f9ff;
}

.vala-landing-v2--premium .vala-security-main h2 {
	font-size: clamp(26px, 3vw, 34px);
}

.vala-landing-v2--premium .vala-security-items span::before {
	color: #5eead4;
}

.vala-landing-v2--premium #guvenlik .vala-security-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 20px;
}


@media (max-width: 900px) {
	.vala-landing-v2--premium #guvenlik .vala-security-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


@media (max-width: 520px) {
	.vala-landing-v2--premium #guvenlik .vala-security-items {
		grid-template-columns: 1fr;
	}
}