/* ============ VİZYON & MİSYON — dual split pillars theme ============ */

/* Page ambient */
.maskajans-vizyon-misyon{
	background:
		radial-gradient(ellipse 80% 50% at 15% 0%,rgba(59,130,246,0.12) 0%,transparent 55%),
		radial-gradient(ellipse 70% 45% at 85% 20%,rgba(16,185,129,0.1) 0%,transparent 50%),
		radial-gradient(ellipse 60% 40% at 50% 100%,rgba(96,165,250,0.06) 0%,transparent 45%),
		#050810;
}

/* —— Hero —— */
.viz-hero{position:relative;overflow:hidden;padding:120px 0 0;background:linear-gradient(180deg,#060a14 0%,#040810 100%)}
.viz-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.viz-hero-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 20% 30%,rgba(59,130,246,0.16) 0%,transparent 55%),radial-gradient(ellipse 65% 50% at 80% 35%,rgba(16,185,129,0.14) 0%,transparent 50%),radial-gradient(ellipse 50% 40% at 50% 90%,rgba(96,165,250,0.08) 0%,transparent 55%);animation:vizMeshShift 16s ease-in-out infinite alternate}
.viz-hero-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.42;mix-blend-mode:screen}
.viz-hero-blob--1{width:520px;height:520px;top:-18%;left:-8%;background:radial-gradient(circle,rgba(59,130,246,0.55),transparent 70%);animation:vizBlobDrift1 22s ease-in-out infinite}
.viz-hero-blob--2{width:460px;height:460px;bottom:-12%;right:-6%;background:radial-gradient(circle,rgba(16,185,129,0.5),transparent 70%);animation:vizBlobDrift2 20s ease-in-out infinite reverse}

.viz-hero > .container{position:relative;z-index:2;max-width:none;padding:0;width:100%}
.viz-hero-split{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	min-height:clamp(520px,72vh,680px);
	position:relative;
	align-items:stretch;
}

/* Pillars */
.viz-pillar{
	position:relative;display:flex;flex-direction:column;justify-content:center;
	min-height:clamp(480px,68vh,640px);
	padding:clamp(48px,6vw,80px) clamp(32px,5vw,72px);
	overflow:hidden;isolation:isolate;
}
.viz-pillar-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.viz-pillar-glow{position:absolute;inset:0;opacity:0.7;transition:opacity .5s}
.viz-pillar--vision{background:linear-gradient(165deg,rgba(15,23,42,0.95) 0%,rgba(30,58,138,0.35) 45%,rgba(15,23,42,0.9) 100%)}
.viz-pillar--vision .viz-pillar-glow{background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(59,130,246,0.35) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(96,165,250,0.15) 0%,transparent 60%)}
.viz-pillar--mission{background:linear-gradient(195deg,rgba(6,24,20,0.95) 0%,rgba(6,78,59,0.32) 50%,rgba(6,20,16,0.92) 100%)}
.viz-pillar--mission .viz-pillar-glow{background:radial-gradient(ellipse 75% 55% at 70% 25%,rgba(16,185,129,0.32) 0%,transparent 65%),radial-gradient(ellipse 45% 35% at 15% 85%,rgba(52,211,153,0.12) 0%,transparent 60%)}

/* Starfield — vision pillar */
.viz-stars{position:absolute;inset:0;overflow:hidden}
.viz-stars::before,.viz-stars::after{content:'';position:absolute;inset:0;background-repeat:repeat}
.viz-stars::before{background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 80px 120px,rgba(96,165,250,0.8),transparent),radial-gradient(1.5px 1.5px at 150px 60px,rgba(255,255,255,0.5),transparent),radial-gradient(1px 1px at 220px 180px,rgba(147,197,253,0.6),transparent),radial-gradient(1px 1px at 300px 40px,rgba(255,255,255,0.4),transparent),radial-gradient(1.5px 1.5px at 380px 140px,rgba(96,165,250,0.5),transparent),radial-gradient(1px 1px at 60px 220px,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 420px 90px,rgba(147,197,253,0.45),transparent);background-size:450px 250px;animation:vizStarsDrift 80s linear infinite}
.viz-stars::after{background-image:radial-gradient(1px 1px at 40px 70px,rgba(255,255,255,0.5),transparent),radial-gradient(1.5px 1.5px at 120px 40px,rgba(59,130,246,0.6),transparent),radial-gradient(1px 1px at 200px 160px,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 280px 100px,rgba(96,165,250,0.5),transparent),radial-gradient(1px 1px at 360px 200px,rgba(255,255,255,0.4),transparent);background-size:400px 220px;opacity:0.6;animation:vizStarsDrift 120s linear infinite reverse}

/* Compass — mission pillar */
.viz-compass{position:absolute;top:12%;right:10%;width:clamp(100px,14vw,160px);height:clamp(100px,14vw,160px);display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(16,185,129,0.08);border:1px solid rgba(52,211,153,0.2);box-shadow:0 0 60px rgba(16,185,129,0.15),inset 0 0 40px rgba(16,185,129,0.06);animation:vizCompassFloat 6s ease-in-out infinite}
.viz-compass i{font-size:clamp(48px,7vw,72px);color:rgba(52,211,153,0.55);animation:vizCompassSpin 24s linear infinite}

/* Pillar divider */
.viz-pillar-divider{
	position:relative;width:3px;align-self:stretch;flex-shrink:0;
	z-index:3;
	background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,0.5) 20%,rgba(255,255,255,0.25) 50%,rgba(16,185,129,0.5) 80%,transparent 100%);
	box-shadow:0 0 24px rgba(96,165,250,0.3),0 0 24px rgba(52,211,153,0.2);
}
.viz-pillar-divider::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#10b981);box-shadow:0 0 20px rgba(59,130,246,0.5),0 0 20px rgba(16,185,129,0.4)}

/* Pillar content */
.viz-pillar-label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:0.5px;padding:8px 18px;border-radius:50px;margin-bottom:24px;backdrop-filter:blur(10px)}
.viz-pillar--vision .viz-pillar-label{color:rgba(255,255,255,0.9);background:rgba(59,130,246,0.12);border:1px solid rgba(96,165,250,0.35)}
.viz-pillar--vision .viz-pillar-label i{color:#60a5fa;font-size:14px}
.viz-pillar--mission .viz-pillar-label{color:rgba(255,255,255,0.9);background:rgba(16,185,129,0.12);border:1px solid rgba(52,211,153,0.35)}
.viz-pillar--mission .viz-pillar-label i{color:#34d399;font-size:14px}

.viz-pillar h1,.viz-pillar h2{position:relative;z-index:2;font-size:clamp(28px,3.8vw,46px);font-weight:400;letter-spacing:-0.5px;line-height:1.15;margin-bottom:18px;max-width:520px}
.viz-pillar p{position:relative;z-index:2;font-size:clamp(15px,1.6vw,17px);color:var(--text-secondary);line-height:1.75;max-width:480px;margin:0}

.viz-accent-vision{background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 50%,#93c5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.viz-accent-mission{background:linear-gradient(135deg,#10b981 0%,#34d399 50%,#6ee7b7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.viz-hero-fade{position:relative;z-index:1;height:80px;margin-top:-1px;background:linear-gradient(180deg,transparent,#050810);pointer-events:none}

/* —— Sections —— */
.viz-section{padding:clamp(72px,9vw,110px) 0;position:relative;overflow:hidden}
.viz-section > .container{position:relative;z-index:2}
.viz-sec-head{text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.viz-sec-head .section-subtitle{max-width:560px;margin:12px auto 0}

.viz-sec-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.viz-sec-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 30%,rgba(59,130,246,0.08) 0%,transparent 55%),radial-gradient(ellipse 50% 45% at 70% 60%,rgba(96,165,250,0.05) 0%,transparent 50%)}
.viz-sec-mesh--emerald{background:radial-gradient(ellipse 60% 50% at 25% 40%,rgba(16,185,129,0.1) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 75% 50%,rgba(52,211,153,0.06) 0%,transparent 50%)}
.viz-sec-grid{position:absolute;inset:0;opacity:0.2;background-image:linear-gradient(rgba(59,130,246,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 75%)}
.viz-sec-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35}
.viz-sec-blob--1{width:400px;height:400px;top:-10%;right:-5%;background:radial-gradient(circle,rgba(16,185,129,0.4),transparent 70%);animation:vizSecBlob 18s ease-in-out infinite}
.viz-sec-blob--2{width:360px;height:360px;bottom:-15%;left:10%;background:radial-gradient(circle,rgba(59,130,246,0.35),transparent 70%);animation:vizSecBlob 22s ease-in-out infinite reverse}

.viz-principles-section{background:linear-gradient(180deg,#050810 0%,#080c18 50%,#060a12 100%)}
.viz-goals-section{background:linear-gradient(165deg,#060a10 0%,#081418 40%,#050810 100%)}
.viz-manifesto-section{background:linear-gradient(180deg,#050810,#0a0e1a 50%,#050810)}
.viz-cta-section{background:linear-gradient(180deg,#050810,transparent);padding-bottom:clamp(80px,10vw,120px)}

/* Principles grid */
.viz-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);max-width:1200px;margin:0 auto}
.viz-principle{position:relative;padding:clamp(28px,3vw,36px) clamp(22px,2.5vw,28px);background:rgba(10,14,24,0.75);border:1px solid rgba(255,255,255,0.07);border-radius:20px;transition:all .4s;overflow:hidden}
.viz-principle::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);opacity:0;transition:opacity .4s}
.viz-principle:nth-child(even)::before{background:linear-gradient(90deg,#10b981,#34d399)}
.viz-principle:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.14);box-shadow:0 24px 60px rgba(0,0,0,0.35)}
.viz-principle:hover::before{opacity:1}
.viz-principle-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}
.viz-principle:nth-child(odd) .viz-principle-icon{background:rgba(59,130,246,0.14);color:#60a5fa;box-shadow:0 8px 24px rgba(59,130,246,0.15)}
.viz-principle:nth-child(even) .viz-principle-icon{background:rgba(16,185,129,0.14);color:#34d399;box-shadow:0 8px 24px rgba(16,185,129,0.15)}
.viz-principle h3{font-size:clamp(16px,1.8vw,18px);font-weight:600;margin-bottom:10px}
.viz-principle p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin:0}

/* Goals layout */
.viz-goals-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,72px);align-items:center;max-width:1140px;margin:0 auto}
.viz-goals-copy .section-label{margin-bottom:16px}
.viz-goals-copy .section-title{text-align:left;margin-bottom:16px}
.viz-goals-copy > p{font-size:16px;color:var(--text-secondary);line-height:1.75;max-width:440px;margin:0}
.viz-goals-list{display:flex;flex-direction:column;gap:14px}
.viz-goal{display:flex;align-items:center;gap:clamp(20px,3vw,28px);padding:clamp(22px,2.5vw,28px) clamp(24px,3vw,32px);background:rgba(10,16,20,0.8);border:1px solid rgba(255,255,255,0.07);border-radius:18px;transition:all .35s}
.viz-goal:hover{border-color:rgba(16,185,129,0.3);background:rgba(16,185,129,0.04);transform:translateX(8px);box-shadow:0 12px 40px rgba(0,0,0,0.25)}
.viz-goal-pct{flex-shrink:0;font-size:clamp(32px,4vw,44px);font-weight:800;line-height:1;min-width:clamp(72px,9vw,100px);background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.viz-goal strong{display:block;font-size:clamp(15px,1.6vw,17px);font-weight:600;margin-bottom:4px}
.viz-goal em{display:block;font-size:13px;font-style:normal;color:var(--text-secondary)}

/* Manifesto */
.viz-manifesto{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:clamp(48px,6vw,72px) clamp(32px,5vw,56px);background:linear-gradient(135deg,rgba(59,130,246,0.06) 0%,rgba(16,185,129,0.06) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,0.3)}
.viz-manifesto::before{content:'\201C';position:absolute;top:16px;left:clamp(24px,4vw,40px);font-size:clamp(64px,10vw,96px);font-weight:800;line-height:1;background:linear-gradient(135deg,rgba(59,130,246,0.25),rgba(16,185,129,0.25));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;pointer-events:none}
.viz-manifesto p{font-size:clamp(20px,2.8vw,28px);font-weight:400;line-height:1.55;letter-spacing:-0.3px;margin:0 0 24px;color:rgba(255,255,255,0.92)}
.viz-manifesto cite{font-size:14px;font-style:normal;color:var(--text-secondary);letter-spacing:0.5px}

/* CTA */
.viz-cta{text-align:center;padding:clamp(48px,6vw,64px) clamp(32px,5vw,48px);background:linear-gradient(135deg,rgba(30,58,138,0.2) 0%,rgba(6,78,59,0.18) 100%);border:1px solid rgba(255,255,255,0.1);border-radius:24px;box-shadow:0 24px 64px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06)}
.viz-cta h2{font-size:clamp(26px,3.5vw,38px);font-weight:400;letter-spacing:-0.3px;margin-bottom:28px;line-height:1.2}
.viz-cta .btn-primary{background:linear-gradient(135deg,#3b82f6,#10b981);padding:14px 32px;font-size:15px}
.viz-cta .btn-primary:hover{box-shadow:0 8px 32px rgba(59,130,246,0.25),0 8px 32px rgba(16,185,129,0.2)}

/* —— Keyframes —— */
@keyframes vizMeshShift{0%{opacity:0.85;transform:scale(1)}100%{opacity:1;transform:scale(1.04)}}
@keyframes vizBlobDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes vizBlobDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,25px)}}
@keyframes vizStarsDrift{0%{transform:translateY(0)}100%{transform:translateY(-250px)}}
@keyframes vizCompassSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes vizCompassFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes vizSecBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.08)}}

/* —— Responsive —— */
@media(max-width:1024px){
	.viz-principles{grid-template-columns:repeat(2,1fr)}
	.viz-goals-layout{grid-template-columns:1fr;gap:40px}
	.viz-goals-copy .section-title{text-align:center}
	.viz-goals-copy > p{margin:0 auto;text-align:center}
	.viz-compass{top:8%;right:6%;width:90px;height:90px}
	.viz-compass i{font-size:42px}
}
@media(max-width:768px){
	.viz-hero{padding-top:100px}
	.viz-hero-split{grid-template-columns:1fr;min-height:auto}
	.viz-pillar-divider{
		width:100%;height:3px;align-self:auto;
		background:linear-gradient(90deg,transparent,rgba(59,130,246,0.5) 25%,rgba(255,255,255,0.25) 50%,rgba(16,185,129,0.5) 75%,transparent);
	}
	.viz-pillar-divider::before{width:12px;height:12px}
	.viz-pillar{
		min-height:auto;
		justify-content:flex-start;
		padding:clamp(40px,8vw,56px) clamp(24px,5vw,32px);
	}
	.viz-pillar h1,.viz-pillar h2{max-width:none;font-size:clamp(24px,6vw,32px)}
	.viz-compass{top:auto;bottom:20%;right:8%;opacity:0.5}
	.viz-principles{grid-template-columns:1fr;max-width:480px}
	.viz-goal:hover{transform:none}
}
@media(max-width:480px){
	.viz-manifesto{padding:40px 24px}
	.viz-manifesto p{font-size:18px}
	.viz-cta{padding:40px 24px}
}
@media(prefers-reduced-motion:reduce){
	.viz-hero-mesh,.viz-hero-blob,.viz-stars::before,.viz-stars::after,.viz-compass,.viz-compass i,.viz-sec-blob{animation:none}
}