.elementor-525 .elementor-element.elementor-element-5f1cbc5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-525 .elementor-element.elementor-element-302ddd2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-fa97b83{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-1b85df3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-d33ca81{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-c9826e3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS *//*
* SOSTAR — Shared Stylesheet
* Sopex Marka Kimliği Rehberi v1.0 · 2026
*
* Elementor ana sayfasına eklenecek CSS.
* Google Fonts bağlantısını da 'e ekleyin:
*
*
*
*/
/* ═══════════════════════════════════════════════
BRAND TOKENS — Sopex Marka Kimliği Rehberi
═══════════════════════════════════════════════ */
:root {
--teal-dark: #1A485E;
--teal-deep: #0D2E3C;
--teal-primary: #1BAA87;
--teal-bright: #2DC4A2;
--teal-light: #5BD4B8;
--teal-pale: #E0F5F0;
--gold: #C9A84C;
--gold-bright: #E4C97A;
--gold-dark: #A0802A;
--near-black: #0F1A18;
--dark-surface: #132A22;
--mid-surface: #1E4035;
--off-white: #F2F7F5;
--white: #FFFFFF;
--text-on-dark: rgba(255,255,255,.88);
--text-muted: rgba(255,255,255,.50);
--text-faint: rgba(255,255,255,.28);
--gray-mid: #6A8A82;
--gray-border: rgba(255,255,255,.10);
--gray-border-light: rgba(0,0,0,.08);
}
/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* ── Shared Button Styles ─────────────────────── */
.btn-gold {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 32px;
background: var(--gold); color: var(--near-black);
font-family: 'Montserrat', sans-serif;
font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
text-decoration: none;
box-shadow: 0 8px 32px rgba(201,168,76,.30), 0 2px 8px rgba(201,168,76,.15);
transition: background .22s, transform .18s, box-shadow .22s;
}
.btn-gold:hover {
background: var(--gold-bright);
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(201,168,76,.38), 0 4px 12px rgba(201,168,76,.20);
color: var(--near-black);
}
.btn-gold:active { transform: translateY(0); }
.btn-gold:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 32px;
background: transparent; color: rgba(255,255,255,.75);
font-family: 'Montserrat', sans-serif;
font-size: 12px; font-weight: 600; letter-spacing: .8px;
border: 1px solid rgba(255,255,255,.20); text-decoration: none;
transition: border-color .22s, background .22s, color .22s;
}
.btn-outline:hover { border-color: var(--teal-bright); background: rgba(27,170,135,.08); color: var(--teal-bright); }
.btn-outline:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
/* ── Shared Section Tag ───────────────────────── */
.section-tag {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--teal-primary); margin-bottom: 20px;
}
.section-tag::before { content: ''; width: 28px; height: 2px; background: var(--teal-primary); }
/* ══════════════════════════════════════════════════
NAV
══════════════════════════════════════════════════ */
.sostar-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
height: 68px;
background: rgba(13,46,60,.92);
backdrop-filter: blur(20px) saturate(1.6);
border-bottom: 1px solid rgba(27,170,135,.12);
transition: background .3s;
}
.sostar-nav.scrolled { background: rgba(13,46,60,.98); }
.sostar-nav-inner {
max-width: 1200px; margin: 0 auto; padding: 0 48px;
height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.sostar-nav-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; flex-shrink: 0; }
.sostar-nav-brand img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.sostar-nav-divider { width: 1px; height: 20px; background: rgba(27,170,135,.3); }
.sostar-nav-sub {
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
color: var(--teal-bright); opacity: .8;
}
.sostar-nav-links { display: flex; align-items: center; gap: 28px; }
.sostar-nav-links a {
font-family: 'Montserrat', sans-serif;
font-size: 12px; font-weight: 500; letter-spacing: .5px;
color: rgba(255,255,255,.55); text-decoration: none;
transition: color .2s;
}
.sostar-nav-links a:hover { color: rgba(255,255,255,.9); }
.sostar-nav-cta {
font-family: 'Montserrat', sans-serif;
font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
padding: 9px 22px;
background: var(--gold); color: var(--near-black) !important;
text-decoration: none;
transition: background .22s, transform .18s;
display: inline-flex; align-items: center; gap: 6px;
}
.sostar-nav-cta:hover { background: var(--gold-bright); transform: translateY(-1px); }
.sostar-nav-cta:active { transform: translateY(0); }
.sostar-nav-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media(max-width:900px) {
.sostar-nav-links { display: none; }
.sostar-nav-inner { padding: 0 24px; }
}
/* ══════════════════════════════════════════════════
S1 — HERO
══════════════════════════════════════════════════ */
.s1 {
position: relative; overflow: hidden;
min-height: 100vh; padding-top: 68px;
background: var(--near-black);
display: flex; align-items: center;
}
.s1-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 70% 80% at 70% 40%, rgba(27,170,135,.18) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 5% 80%, rgba(13,46,60,.9) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 100% 0%, rgba(201,168,76,.06) 0%, transparent 50%),
linear-gradient(160deg, #0D2E3C 0%, #0F1A18 60%, #0A1E18 100%);
}
.s1-bg::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.s1-accent-line {
position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
background: linear-gradient(180deg, transparent, var(--teal-primary) 20%, var(--teal-bright) 60%, transparent);
}
.s1-wrap {
position: relative; z-index: 3;
max-width: 1200px; margin: 0 auto; padding: 80px 48px 100px;
display: grid; grid-template-columns: 1fr 360px;
gap: 80px; align-items: center; width: 100%;
}
.s1-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 24px;
}
.s1-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--teal-bright); opacity: .6; }
.s1-logo-img {
display: block; height: 72px; width: auto;
margin-bottom: 36px;
filter: brightness(0) invert(1);
}
.s1-h1 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(42px,5.5vw,70px);
font-weight: 900; line-height: 1.04;
color: var(--white); letter-spacing: -1.5px;
margin-bottom: 10px;
}
.s1-h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--teal-bright), var(--teal-primary));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.s1-h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(14px,1.6vw,18px);
font-weight: 300; font-style: italic;
color: rgba(255,255,255,.55); margin-bottom: 32px; line-height: 1.6;
letter-spacing: .3px;
}
.s1-p {
font-size: 15px; line-height: 1.85;
color: rgba(255,255,255,.55);
max-width: 540px; margin-bottom: 44px;
font-family: 'Inter', sans-serif; font-weight: 300;
}
.s1-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.s1-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.s1-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 14px;
background: rgba(27,170,135,.10);
border: 1px solid rgba(27,170,135,.22);
font-family: 'Montserrat', sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: 1px;
color: var(--teal-bright);
}
.s1-badge::before { content: ''; width: 5px; height: 5px; background: var(--teal-primary); border-radius: 50%; }
.s1-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(27,170,135,.15);
backdrop-filter: blur(16px);
padding: 36px 32px;
position: relative; overflow: hidden;
}
.s1-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--teal-primary), transparent);
}
.s1-card-label {
font-family: 'Montserrat', sans-serif;
font-size: 8px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 28px; opacity: .8;
}
.s1-stat {
display: flex; align-items: baseline; gap: 10px;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.s1-stat:last-of-type { border-bottom: none; }
.s1-stat-num {
font-family: 'Montserrat', sans-serif;
font-size: 38px; font-weight: 900; line-height: 1;
color: var(--white); letter-spacing: -1px;
}
.s1-stat-unit {
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 500; color: var(--teal-bright);
}
.s1-stat-label {
font-size: 12px; color: var(--text-muted); line-height: 1.5;
font-family: 'Inter', sans-serif; font-weight: 300;
}
@media(max-width:900px) {
.s1-wrap { grid-template-columns: 1fr; padding: 60px 24px 80px; gap: 48px; }
.s1-card { display: none; }
}
/* ══════════════════════════════════════════════════
S2 — NEDEN SOSTAR
══════════════════════════════════════════════════ */
.s2 {
background: var(--off-white);
padding: 120px 48px;
font-family: 'Inter', sans-serif;
}
.s2-wrap { max-width: 1200px; margin: 0 auto; }
.s2-intro {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center; margin-bottom: 80px;
}
.s2-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(28px,3.5vw,44px);
font-weight: 800; color: var(--near-black);
line-height: 1.12; margin-bottom: 24px; letter-spacing: -1px;
}
.s2-h em { font-style: normal; color: var(--teal-dark); }
.s2-lead { font-size: 16px; line-height: 1.85; color: #3A5A50; font-weight: 400; }
.s2-bigstat {
background: var(--dark-surface);
padding: 52px 44px;
position: relative; overflow: hidden;
}
.s2-bigstat::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 70% at 80% 20%, rgba(27,170,135,.15) 0%, transparent 60%);
}
.s2-bigstat::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--teal-primary), var(--gold));
}
.s2-bigstat-num {
font-family: 'Montserrat', sans-serif;
font-size: 80px; font-weight: 900; line-height: 1;
color: var(--white); letter-spacing: -3px; margin-bottom: 12px;
position: relative; z-index: 1;
}
.s2-bigstat-num span {
font-size: 36px; font-weight: 400;
color: var(--teal-bright); letter-spacing: -1px;
}
.s2-bigstat-label {
font-size: 14px; color: rgba(255,255,255,.55);
line-height: 1.7; max-width: 280px;
font-weight: 300; position: relative; z-index: 1;
}
.s2-bigstat-source {
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 600; letter-spacing: 2px;
color: var(--gold); margin-top: 20px; opacity: .8;
position: relative; z-index: 1;
}
.s2-cards {
display: grid; grid-template-columns: repeat(4,1fr);
gap: 2px; background: #E0EAE6;
box-shadow: 0 16px 60px rgba(27,100,80,.07);
}
.s2-card {
background: var(--white);
padding: 40px 28px;
border-bottom: 3px solid transparent;
transition: border-color .25s, box-shadow .25s, transform .22s;
cursor: default;
}
.s2-card:hover {
border-bottom-color: var(--teal-primary);
box-shadow: 0 -4px 0 var(--teal-primary), 0 16px 40px rgba(27,170,135,.08);
transform: translateY(-4px);
z-index: 1; position: relative;
}
.s2-card-icon {
width: 48px; height: 48px;
background: var(--teal-pale);
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 24px;
}
.s2-card-title {
font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 700;
color: var(--near-black); margin-bottom: 12px; line-height: 1.3; letter-spacing: -.3px;
}
.s2-card-body { font-size: 13.5px; color: #567A74; line-height: 1.75; font-weight: 400; }
@media(max-width:1024px) { .s2-cards { grid-template-columns: 1fr 1fr; } .s2-intro { grid-template-columns: 1fr; gap: 48px; } }
@media(max-width:600px) { .s2 { padding: 80px 24px; } .s2-cards { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════
S3 — NASIL ÇALIŞIR
══════════════════════════════════════════════════ */
.s3 {
background: var(--near-black);
padding: 120px 48px;
position: relative; overflow: hidden;
font-family: 'Inter', sans-serif;
}
.s3::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 50% at 100% 0%, rgba(27,170,135,.08) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13,46,60,.8) 0%, transparent 60%);
pointer-events: none;
}
.s3::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none; z-index: 0;
}
.s3-wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.s3-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 72px; gap: 48px;
}
.s3-section-tag {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 20px;
}
.s3-section-tag::before { content: ''; width: 28px; height: 2px; background: var(--teal-bright); }
.s3-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(28px,3.5vw,44px);
font-weight: 800; color: var(--white);
line-height: 1.1; letter-spacing: -1px;
}
.s3-h em { font-style: normal; color: var(--teal-bright); }
.s3-header-note {
font-size: 14px; color: var(--text-muted);
line-height: 1.8; max-width: 340px; flex-shrink: 0; font-weight: 300;
}
.s3-phases { display: flex; flex-direction: column; gap: 2px; }
.s3-phase {
display: grid; grid-template-columns: 200px 1fr 100px; gap: 0;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
transition: background .25s, border-color .25s; cursor: default;
}
.s3-phase:hover { background: rgba(27,170,135,.06); border-color: rgba(27,170,135,.15); }
.s3-phase--1 { border-left: 3px solid var(--teal-primary); }
.s3-phase--2 { border-left: 3px solid var(--gold); }
.s3-phase--3 { border-left: 3px solid var(--teal-bright); }
.s3-num-col {
padding: 44px 36px;
border-right: 1px solid rgba(255,255,255,.05);
display: flex; flex-direction: column; justify-content: center;
}
.s3-num-big {
font-family: 'Montserrat', sans-serif;
font-size: 52px; font-weight: 900; line-height: 1;
color: rgba(255,255,255,.08); letter-spacing: -2px;
}
.s3-num-label {
font-family: 'Montserrat', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 8px;
}
.s3-phase--1 .s3-num-label { color: var(--teal-primary); }
.s3-phase--2 .s3-num-label { color: var(--gold); }
.s3-phase--3 .s3-num-label { color: var(--teal-bright); }
.s3-body-col { padding: 44px 48px; }
.s3-phase-sub {
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--gray-mid); margin-bottom: 10px;
}
.s3-phase-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px; font-weight: 700;
color: var(--white); margin-bottom: 14px; letter-spacing: -.3px;
}
.s3-phase-desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; max-width: 560px; }
.s3-pts-col {
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-left: 1px solid rgba(255,255,255,.05); padding: 44px 24px;
}
.s3-pts-num {
font-family: 'Montserrat', sans-serif;
font-size: 40px; font-weight: 900; line-height: 1; color: var(--white); letter-spacing: -1px;
}
.s3-pts-unit {
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: var(--gray-mid); margin-top: 4px;
}
.s3-total {
margin-top: 2px;
background: rgba(27,170,135,.08);
border: 1px solid rgba(27,170,135,.18);
padding: 28px 48px;
display: flex; align-items: center; gap: 28px;
}
.s3-total-num {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 800;
color: var(--teal-bright); white-space: nowrap; letter-spacing: -.5px;
}
.s3-total-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }
.s3-certs { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 56px; }
.s3-cert { padding: 36px 32px; position: relative; overflow: hidden; }
.s3-cert--bronze { background: linear-gradient(140deg, #1E1409 0%, #160E05 100%); border-top: 3px solid #8B6914; }
.s3-cert--silver { background: linear-gradient(140deg, #111C22 0%, #0B1418 100%); border-top: 3px solid #5A7880; }
.s3-cert--gold { background: linear-gradient(140deg, #1E1A05 0%, #150F02 100%); border-top: 3px solid var(--gold); }
.s3-cert--gold::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(201,168,76,.08) 0%, transparent 60%);
}
.s3-cert-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.s3-cert-name {
font-family: 'Montserrat', sans-serif;
font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 6px; letter-spacing: 2px;
}
.s3-cert-range { font-size: 13px; font-weight: 600; margin-bottom: 12px; font-family: 'Montserrat', sans-serif; }
.s3-cert--bronze .s3-cert-range { color: #8B6914; }
.s3-cert--silver .s3-cert-range { color: #5A7880; }
.s3-cert--gold .s3-cert-range { color: var(--gold); }
.s3-cert-tag {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 8px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
padding: 4px 12px; margin-bottom: 16px;
}
.s3-cert--bronze .s3-cert-tag { background: rgba(139,105,20,.2); color: #C4A060; }
.s3-cert--silver .s3-cert-tag { background: rgba(90,120,128,.2); color: #90AEBA; }
.s3-cert--gold .s3-cert-tag { background: rgba(201,168,76,.15); color: var(--gold-bright); }
.s3-cert-body { font-size: 13px; color: var(--text-muted); line-height: 1.75; font-weight: 300; position: relative; z-index: 1; }
@media(max-width:900px) {
.s3-phase { grid-template-columns: 1fr; }
.s3-pts-col { flex-direction: row; gap: 8px; border-left: none; border-top: 1px solid rgba(255,255,255,.05); padding: 20px 36px; }
.s3-certs { grid-template-columns: 1fr; }
.s3-header { flex-direction: column; align-items: flex-start; }
.s3 { padding: 80px 24px; }
}
/* ══════════════════════════════════════════════════
S4 — DENETİM SÜRECİ
══════════════════════════════════════════════════ */
.s4 {
background: var(--off-white);
padding: 120px 48px;
font-family: 'Inter', sans-serif;
}
.s4-wrap { max-width: 1200px; margin: 0 auto; }
.s4-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(28px,3.5vw,44px);
font-weight: 800; color: var(--near-black);
line-height: 1.12; margin-bottom: 16px; letter-spacing: -1px;
}
.s4-h em { font-style: normal; color: var(--teal-dark); }
.s4-sub { font-size: 15px; color: #567A74; line-height: 1.8; max-width: 560px; margin-bottom: 72px; font-weight: 300; }
.s4-timeline {
position: relative; display: grid;
grid-template-columns: repeat(5,1fr); gap: 0;
}
.s4-timeline::before {
content: '';
position: absolute; top: 40px; left: 8%; right: 8%; height: 2px;
background: linear-gradient(90deg, var(--teal-primary), var(--gold));
z-index: 0;
}
.s4-step {
position: relative; z-index: 1;
display: flex; flex-direction: column;
align-items: center; text-align: center; padding: 0 16px;
}
.s4-dot {
width: 80px; height: 80px;
background: var(--dark-surface);
border: 2px solid rgba(27,170,135,.25);
display: flex; flex-direction: column; align-items: center; justify-content: center;
margin-bottom: 24px; position: relative; z-index: 2;
transition: background .25s, border-color .25s, transform .2s, box-shadow .25s;
}
.s4-step:hover .s4-dot {
background: var(--teal-primary); border-color: var(--teal-primary);
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 32px rgba(27,170,135,.35);
}
.s4-dot-num {
font-family: 'Montserrat', sans-serif;
font-size: 16px; font-weight: 900; color: var(--white); line-height: 1;
}
.s4-dot-label {
font-family: 'Montserrat', sans-serif;
font-size: 7px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--teal-bright); margin-top: 3px;
}
.s4-step-title {
font-family: 'Montserrat', sans-serif;
font-size: 12px; font-weight: 700; color: var(--near-black);
margin-bottom: 8px; line-height: 1.35; letter-spacing: -.2px;
}
.s4-step-body { font-size: 11.5px; color: #567A74; line-height: 1.7; font-weight: 400; }
.s4-note {
margin-top: 72px;
background: var(--dark-surface);
padding: 40px 48px;
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px;
position: relative; overflow: hidden;
}
.s4-note::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--teal-primary), var(--gold), var(--teal-bright));
}
.s4-note-item { display: flex; gap: 20px; align-items: flex-start; }
.s4-note-icon {
width: 44px; height: 44px; flex-shrink: 0;
background: rgba(27,170,135,.12);
border: 1px solid rgba(27,170,135,.2);
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.s4-note-title {
font-family: 'Montserrat', sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 8px;
}
.s4-note-body { font-size: 13px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }
@media(max-width:900px) {
.s4-timeline { grid-template-columns: 1fr; gap: 32px; }
.s4-timeline::before { display: none; }
.s4-step { flex-direction: row; text-align: left; gap: 24px; }
.s4-dot { flex-shrink: 0; }
.s4-note { grid-template-columns: 1fr; }
.s4 { padding: 80px 24px; }
}
/* ══════════════════════════════════════════════════
S5 — AVANTAJLAR
══════════════════════════════════════════════════ */
.s5 {
background: var(--dark-surface);
padding: 120px 48px;
position: relative; overflow: hidden;
font-family: 'Inter', sans-serif;
}
.s5::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 60% at 0% 50%, rgba(27,170,135,.07) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 100% 80%, rgba(201,168,76,.04) 0%, transparent 50%);
pointer-events: none;
}
.s5-wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.s5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.s5-section-tag {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 20px;
}
.s5-section-tag::before { content: ''; width: 28px; height: 2px; background: var(--teal-bright); }
.s5-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px,3.2vw,40px);
font-weight: 800; color: var(--white);
line-height: 1.12; margin-bottom: 40px; letter-spacing: -1px;
}
.s5-h em { font-style: normal; color: var(--gold); }
.s5-adv-list { display: flex; flex-direction: column; gap: 2px; }
.s5-adv {
display: grid; grid-template-columns: 56px 1fr; gap: 0;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
border-left: 3px solid transparent;
transition: background .22s, border-left-color .22s;
}
.s5-adv:hover { background: rgba(27,170,135,.06); border-left-color: var(--teal-primary); }
.s5-adv-icon {
display: flex; align-items: center; justify-content: center;
font-size: 22px; border-right: 1px solid rgba(255,255,255,.05);
}
.s5-adv-body { padding: 24px 26px; }
.s5-adv-title {
font-family: 'Montserrat', sans-serif;
font-size: 13.5px; font-weight: 700; color: var(--white); margin-bottom: 6px; letter-spacing: -.2px;
}
.s5-adv-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }
.s5-esg {
margin-top: 32px;
border: 1px solid rgba(201,168,76,.2); padding: 28px 28px 24px;
background: rgba(201,168,76,.04);
}
.s5-esg-title {
font-family: 'Montserrat', sans-serif;
font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
color: var(--gold); margin-bottom: 16px;
}
.s5-esg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.s5-esg-tag {
font-family: 'Montserrat', sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: .5px;
padding: 5px 13px;
background: rgba(201,168,76,.10); border: 1px solid rgba(201,168,76,.2);
color: var(--gold-bright);
}
.s5-who {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
padding: 44px 40px; position: relative; overflow: hidden;
}
.s5-who::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--teal-primary), var(--gold));
}
.s5-who-title {
font-family: 'Montserrat', sans-serif;
font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 8px; letter-spacing: -.5px;
}
.s5-who-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.7; font-weight: 300; }
.s5-who-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 36px; }
.s5-who-item {
display: flex; gap: 16px; align-items: flex-start;
padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.s5-who-item:last-child { border-bottom: none; }
.s5-who-dot { width: 6px; height: 6px; background: var(--teal-primary); border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.s5-who-item-title {
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; letter-spacing: -.2px;
}
.s5-who-item-body { font-size: 12.5px; color: var(--text-muted); line-height: 1.65; font-weight: 300; }
.s5-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 28px; width: 100%;
background: var(--gold); color: var(--near-black);
font-family: 'Montserrat', sans-serif;
font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
text-decoration: none;
box-shadow: 0 6px 24px rgba(201,168,76,.25);
transition: background .22s, transform .18s, box-shadow .22s;
}
.s5-cta:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201,168,76,.35); color: var(--near-black); }
.s5-cta:active { transform: translateY(0); }
.s5-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media(max-width:900px) { .s5-grid { grid-template-columns: 1fr; gap: 48px; } .s5 { padding: 80px 24px; } }
/* ══════════════════════════════════════════════════
S6 — SSS
══════════════════════════════════════════════════ */
.s6 {
background: var(--off-white);
padding: 120px 48px;
font-family: 'Inter', sans-serif;
}
.s6-wrap { max-width: 1200px; margin: 0 auto; }
.s6-grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
.s6-left-sticky { position: sticky; top: 88px; }
.s6-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(26px,3vw,38px);
font-weight: 800; color: var(--near-black);
line-height: 1.15; margin-bottom: 20px; letter-spacing: -1px;
}
.s6-note { font-size: 14px; color: #567A74; line-height: 1.8; margin-bottom: 32px; font-weight: 300; }
.s6-contact {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 24px;
background: var(--near-black); color: var(--white);
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
text-decoration: none; transition: background .22s;
}
.s6-contact:hover { background: var(--teal-dark); color: var(--white); }
.s6-contact:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 3px; }
.s6-faqs { display: flex; flex-direction: column; gap: 2px; }
.s6-faq {
background: var(--white);
border-left: 3px solid transparent;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
transition: border-color .22s, box-shadow .22s;
}
.s6-faq.open { border-left-color: var(--teal-primary); box-shadow: 0 4px 20px rgba(27,170,135,.08); }
.s6-faq-q {
padding: 22px 28px;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; gap: 16px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; font-weight: 600; color: var(--near-black);
line-height: 1.4; user-select: none; transition: color .2s;
}
.s6-faq-q:hover { color: var(--teal-dark); }
.s6-faq-icon {
width: 28px; height: 28px; flex-shrink: 0;
background: var(--teal-pale);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 300; color: var(--teal-primary); line-height: 1;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .22s, color .22s;
}
.s6-faq.open .s6-faq-icon { transform: rotate(45deg); background: var(--teal-primary); color: var(--white); }
.s6-faq-a {
max-height: 0; overflow: hidden;
transition: max-height .38s ease, padding .32s;
padding: 0 28px;
}
.s6-faq.open .s6-faq-a { max-height: 400px; padding: 0 28px 24px; }
.s6-faq-a p { font-size: 13.5px; color: #567A74; line-height: 1.8; margin: 0; font-weight: 300; }
.s6-faq-a strong { color: var(--near-black); font-weight: 600; }
@media(max-width:900px) {
.s6-grid { grid-template-columns: 1fr; gap: 48px; }
.s6-left-sticky { position: static; }
.s6 { padding: 80px 24px; }
}
/* ══════════════════════════════════════════════════
CTA BAND
══════════════════════════════════════════════════ */
.cta-band {
background: var(--near-black);
padding: 100px 48px;
text-align: center;
position: relative; overflow: hidden;
font-family: 'Inter', sans-serif;
}
.cta-band::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 90% at 50% 50%, rgba(27,170,135,.12) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 80% 20%, rgba(201,168,76,.06) 0%, transparent 50%);
pointer-events: none;
}
.cta-band::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-logo { height: 56px; width: auto; display: block; margin: 0 auto 36px; filter: brightness(0) invert(1); opacity: .85; }
.cta-eyebrow {
display: flex; align-items: center; justify-content: center; gap: 16px;
font-family: 'Montserrat', sans-serif;
font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--teal-bright); margin-bottom: 24px; opacity: .8;
}
.cta-eyebrow::before, .cta-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--teal-bright); opacity: .6; }
.cta-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(30px,4.5vw,56px);
font-weight: 900; color: var(--white);
line-height: 1.08; margin-bottom: 20px; letter-spacing: -1.5px;
}
.cta-h em { font-style: normal; color: var(--gold); }
.cta-p { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 44px; font-weight: 300; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-fine { margin-top: 28px; font-size: 12px; color: var(--text-faint); letter-spacing: .3px; }
@media(max-width:600px) { .cta-band { padding: 70px 24px; } }
/* ══════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════ */
.sostar-footer {
background: #080F0D;
padding: 40px 48px;
border-top: 1px solid rgba(27,170,135,.10);
font-family: 'Inter', sans-serif;
}
.sostar-footer-inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.sostar-footer-logo { height: 36px; width: auto; opacity: .75; }
.sostar-footer-text {
font-family: 'Montserrat', sans-serif;
font-size: 11px; color: rgba(255,255,255,.25); line-height: 1.7; letter-spacing: .2px;
}
.sostar-footer-links { display: flex; gap: 24px; }
.sostar-footer-links a {
font-family: 'Montserrat', sans-serif;
font-size: 11px; color: rgba(255,255,255,.3); text-decoration: none; letter-spacing: .3px;
transition: color .2s;
}
.sostar-footer-links a:hover { color: var(--teal-bright); }
@media(max-width:860px) {
.sostar-footer { padding: 32px 24px; }
.sostar-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}/* End custom CSS */