/* =================================================
S3M INDUSTRY PAGE DESIGN SYSTEM
FINAL CLEAN VERSION
Sections + Typography + Cards + Buttons
Dividers + Grid + Pattern Library
================================================ */


/* =================================================
SECTION SYSTEM — RESPONSIVE OPTIMIZED
================================================ */

/* =========================
BASE
========================= */
.s3m-section{
  padding:120px 40px;
  position:relative;
  overflow:visible;
}

.s3m-container{
  max-width:1200px;
  margin:auto;
}

.s3m-section-dark{
  background:#0B1120;
  color:#CBD5E1;
  padding:120px 40px;
}

.s3m-section-light{
  background:#FFFFFF;
  color:#0F172A;
  padding:120px 40px;
}

.s3m-architecture-image img{
  border-radius:12px;
  box-shadow:0 20px 50px rgba(15,23,42,.15);
}


/* =================================================
TABLET (<=1024px)
================================================ */
@media (max-width:1024px){

  .s3m-section,
  .s3m-section-dark,
  .s3m-section-light{
    padding:100px 32px;
  }

  .s3m-container{
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }

}


/* =================================================
MOBILE (<=768px)
================================================ */
@media (max-width:768px){

  .s3m-section,
  .s3m-section-dark,
  .s3m-section-light{
    padding:80px 20px;
  }

  /* 🔥 CRITICAL: section spacing consistency */
  .s3m-section + .s3m-section{
    margin-top:0;
  }

  /* container full fluid */
  .s3m-container{
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  /* images breathing */
  .s3m-architecture-image img{
    border-radius:10px;
    box-shadow:0 15px 40px rgba(15,23,42,.18);
  }

}


/* =================================================
SMALL MOBILE (<=480px)
================================================ */
@media (max-width:480px){

  .s3m-section,
  .s3m-section-dark,
  .s3m-section-light{
    padding:70px 16px;
  }

  .s3m-container{
    padding-left:8px;
    padding-right:8px;
  }

}
/* =================================================
TYPOGRAPHY SYSTEM — OPTIMIZED (ELEMENTOR SAFE)
================================================ */

/* =========================
LABEL
========================= */
.s3m-label{
  font-family:Inter;
  font-size:13px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.2;
  color:#38BDF8;
  margin-bottom:14px;
}


/* =========================
H1 — HERO / PRIMARY
========================= */
.s3m-heading-xl .elementor-heading-title{
  font-family:Sora;
  font-size:52px;
  font-weight:700;

  /* 🔥 TYPOGRAPHY FIX */
  letter-spacing:-0.6px;
  line-height:1.04;

  /* 🔥 BREAK CONTROL */
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;

  /* 🔥 WIDTH CONTROL (CRITICAL) */
  max-width:720px;

  margin:0 0 28px 0;
  color:#0F172A;
}


/* =========================
H2 — SECTION TITLES
========================= */
.s3m-heading-lg .elementor-heading-title{
  font-family:Sora;
  font-size:32px;
  font-weight:600;

  letter-spacing:-0.3px;
  line-height:1.15;

  max-width:680px;
  margin-bottom:18px;

  color:#0F172A;
}


/* =========================
DARK MODE TYPOGRAPHY
========================= */
.s3m-section-dark .s3m-heading-xl .elementor-heading-title,
.s3m-section-dark .s3m-heading-lg .elementor-heading-title{
  color:#FFFFFF !important;
}


/* =========================
BODY TEXT
========================= */
.s3m-text-body{
  font-family:Inter;
  font-size:17.5px;
  line-height:1.65;
  font-weight:400;

  max-width:640px;

  /* 🔥 FIX (önceden margin:auto bug vardı) */
  margin-left:0;
  margin-right:0;

  color:#CBD5E1;
}


/* LIGHT MODE */
.s3m-section-light .s3m-text-body{
  color:#475569;
}


/* =========================
IMAGE SYSTEM
========================= */
.s3m-image img{
  width:100%;
  height:auto;
  display:block;

  border-radius:14px;

  /* 🔥 SOFTER SHADOW */
  box-shadow:0 25px 70px rgba(0,0,0,0.35);
}
/* =================================================
BUTTON STYLES (LAYOUT FREE)
================================================ */

.s3m-btn-primary .elementor-button{
background:#38BDF8;
color:#FFFFFF;
border-radius:8px;
font-weight:600;
padding:14px 26px;
transition:all .25s ease;
border:none;
}

.s3m-btn-primary .elementor-button:hover{
background:#0EA5E9;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(56,189,248,.35);
}


/* OUTLINE BUTTON */

.s3m-btn-outline .elementor-button{
background:transparent;
color:#FFFFFF;
border:1px solid rgba(255,255,255,.4);
border-radius:8px;
font-weight:600;
padding:14px 26px;
transition:all .25s ease;
}

.s3m-btn-outline .elementor-button:hover{
border-color:#38BDF8;
color:#38BDF8;
background:rgba(56,189,248,.08);
}

/* =========================================
OUTLINE BUTTON — LIGHT SECTION FIX
========================================= */

.s3m-section-light .s3m-btn-outline .elementor-button{
color:#2563EB;
border:1px solid #2563EB;
background:transparent;
}

.s3m-section-light .s3m-btn-outline .elementor-button:hover{
background:#2563EB;
color:#FFFFFF;
border-color:#2563EB;
box-shadow:0 8px 20px rgba(37,99,235,.25);
transform:translateY(-2px);
}
/* =========================================
S3M ORANGE BUTTON
========================================= */

.s3m-btn-orange .elementor-button{
background: #FF7B03;
color:#FFFFFF;

border-radius:8px;
font-weight:600;

padding:14px 26px;

border:none;

transition:all .25s ease;
}

/* HOVER */
.s3m-btn-orange .elementor-button:hover{
background: linear-gradient(135deg, #ff8c1a, #ffb347);

transform:translateY(-2px);

box-shadow:0 10px 22px rgba(255,122,0,.35);
}

/* ACTIVE */
.s3m-btn-orange .elementor-button:active{
transform:translateY(0);
box-shadow:0 4px 10px rgba(255,122,0,.25);
}
/* =================================================
CARD SYSTEM — FINAL (ELEMENTOR SAFE + STABLE)
================================================ */

/* =========================
BASE CARD
========================= */
.s3m-card,
.s3m-card-light{
  border-radius:14px !important;
  padding:32px 28px !important;

  transition:all .28s ease;
  position:relative;

  /* 🔥 CRITICAL FIX */
  overflow:hidden; /* radius fix */
}

/* DARK */
.s3m-card{
  background:#111827;
  border:1px solid #1F2937;
}

/* LIGHT */
.s3m-card-light{
  background:#FFFFFF;
  border:1px solid #E5E7EB;
}


/* =========================
ELEMENTOR INNER FIX (CRITICAL)
========================= */
.s3m-card > .e-con-inner,
.s3m-card-light > .e-con-inner{
  padding:0 !important;
  display:flex;
  flex-direction:column;
  height:100%;
}


/* =========================
TYPOGRAPHY MODE FIX
========================= */

/* DARK CARD (always white text) */
.s3m-card .elementor-heading-title{
  color:#FFFFFF;
}

.s3m-card .s3m-card-text{
  color:#CBD5E1;
}

/* LIGHT CARD */
.s3m-card-light .elementor-heading-title{
  color:#0F172A;
}

.s3m-card-light .s3m-card-text{
  color:#475569;
}


/* =========================
LIGHT SECTION DARK CARD FIX
========================= */
.s3m-section-light .s3m-card{
  color:#CBD5E1;
}

.s3m-section-light .s3m-card .s3m-icon-list li{
  color:#CBD5E1 !important;
}

.s3m-section-light .s3m-card .s3m-divider-grid{
  opacity:.6;
}


/* =========================
CARD SHADOW
========================= */
.s3m-card-shadow{
  box-shadow:0 12px 30px -10px rgba(0,0,0,.35);
}


/* =========================
HOVER SYSTEM
========================= */
.s3m-card-hover:hover,
.s3m-card-hover-light:hover{
  transform:translateY(-6px);
}

/* DARK HOVER */
.s3m-card-hover:hover{
  box-shadow:0 20px 45px -12px rgba(0,0,0,.5);
  border-color:#38BDF8;
}

/* LIGHT HOVER */
.s3m-card-hover-light:hover{
  box-shadow:0 20px 40px -10px rgba(0,0,0,.18);
  border-color:#2563EB;
}

/* GLOW */
.s3m-card-glow:hover{
  box-shadow:
    0 0 22px rgba(56,189,248,.35),
    0 20px 45px -12px rgba(0,0,0,.45);
}


/* =========================
PARAGRAPH SPACING
========================= */
.s3m-card p{
  margin-top:10px;
}


/* =========================
CARD TITLE
========================= */
.s3m-card-title{
  min-height:56px;
  display:flex;
  align-items:flex-start;
}

.s3m-card-title .elementor-heading-title{
  font-family:Sora;
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:10px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* =========================
CARD TEXT
========================= */
.s3m-card-text{
  font-family:Inter;
  font-size:15.5px;
  line-height:1.65;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;

  flex-grow:1; /* 🔥 equal height fix */
}


/* =========================
DIVIDER FIX
========================= */
.s3m-card .elementor-divider,
.s3m-card-light .elementor-divider{
  margin-top:6px;
  margin-bottom:14px;
}

.s3m-card .s3m-divider-grid{
  background:repeating-linear-gradient(
    90deg,
    #38BDF8 0px,
    #38BDF8 10px,
    transparent 10px,
    transparent 18px
  );
}


/* =========================
GRID / LOOP FIX
========================= */
.elementor-loop-container .s3m-card,
.elementor-loop-container .s3m-card-light{
  display:flex;
  flex-direction:column;
  height:100%;
}

.elementor-loop-container .s3m-card .e-con-inner,
.elementor-loop-container .s3m-card-light .e-con-inner{
  display:flex;
  flex-direction:column;
  height:100%;
}

.elementor-loop-container.elementor-grid{
  align-items:stretch;
}

/* =========================================
S3M ICON BOX BASE (SVG SAFE)
========================================= */

.s3m-icon-box{
transition:all .25s ease;
padding:18px;
border-radius:10px;
}


/* ICON */

.s3m-icon-box .elementor-icon{
margin-bottom:12px;
}

/* SVG SIZE */

.s3m-icon-box .elementor-icon svg{
width:30px;
height:30px;
}

/* SVG SAFE COLOR CONTROL */

.s3m-icon-box .elementor-icon svg,
.s3m-icon-box .elementor-icon svg path{
fill:currentColor;
}


/* TITLE */

.s3m-icon-box .elementor-icon-box-title{
font-family:Sora;
font-size:18px;
font-weight:600;
line-height:1.35;
margin-bottom:6px;
}


/* DESCRIPTION */

.s3m-icon-box .elementor-icon-box-description{
font-family:Inter;
font-size:15px;
line-height:1.6;
}


/* =========================================
ICON BOX — DARK SECTION
========================================= */

.s3m-section-dark .s3m-icon-box .elementor-icon{
color:#38BDF8;
}

.s3m-section-dark .s3m-icon-box .elementor-icon-box-title{
color:#FFFFFF;
}

.s3m-section-dark .s3m-icon-box .elementor-icon-box-description{
color:#CBD5E1;
}

.s3m-section-dark .s3m-icon-box:hover{
transform:translateY(-4px);
background:rgba(56,189,248,.06);
}

.s3m-section-dark .s3m-icon-box:hover .elementor-icon{
transform:scale(1.08);
}

/* =========================================
S3M OUTCOME CARD COMPONENT
========================================= */

.s3m-outcome-card{

position:relative;

padding:32px;

border-radius:14px;

display:flex;
flex-direction:column;

gap:16px;

min-height:210px;

transition:all .25s ease;

}


/* =========================================
ICON CONTAINER
========================================= */

.s3m-outcome-icon{
width:52px;
height:52px;

display:flex;
align-items:center;
justify-content:center;

border-radius:12px;

}

.s3m-outcome-icon img{

width:24px;
height:24px;

object-fit:contain;

}


/* =========================================
TITLE
========================================= */

.s3m-outcome-title{

font-size:19px;

font-weight:600;

line-height:1.35;

margin-top:4px;

}


/* =========================================
TEXT
========================================= */

.s3m-outcome-text{

font-size:14.5px;

line-height:1.65;

}



/* =========================================
DARK THEME
Parent section class: theme-dark
========================================= */

.theme-dark .s3m-outcome-card{

background:#0f172a;

border:1px solid rgba(255,255,255,0.06);

}

.theme-dark .s3m-outcome-card:hover{

transform:translateY(-6px);

border-color:rgba(99,102,241,.5);

box-shadow:
0 10px 40px rgba(0,0,0,.45),
0 0 0 1px rgba(99,102,241,.2);

}

.theme-dark .s3m-outcome-icon{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

}

.theme-dark .s3m-outcome-icon img{

filter:brightness(0) invert(1);

}

.theme-dark .s3m-outcome-title{

color:#ffffff;

}

.theme-dark .s3m-outcome-text{

color:#94a3b8;

}



/* =========================================
LIGHT THEME
Parent section class: theme-light
========================================= */

.theme-light .s3m-outcome-card{

background:#ffffff;

border:1px solid #e5e7eb;

}

.theme-light .s3m-outcome-card:hover{

transform:translateY(-6px);

border-color:#6366f1;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

}

.theme-light .s3m-outcome-icon{

background:#f3f4f6;

border:1px solid #e5e7eb;

}

.theme-light .s3m-outcome-icon img{

filter:none;

}

.theme-light .s3m-outcome-title{

color:#111827;

}

.theme-light .s3m-outcome-text{

color:#6b7280;

}



/* =========================================
PREMIUM GLOW EFFECT
========================================= */

.s3m-outcome-card::before{

content:"";

position:absolute;

inset:0;

border-radius:14px;

background:linear-gradient(
120deg,
rgba(99,102,241,.15),
transparent 40%
);

opacity:0;

transition:.3s;

}

.s3m-outcome-card:hover::before{

opacity:1;

}
.s3m-outcome-title{

font-size:19px;
font-weight:600;
line-height:1.35;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;

min-height:52px;

}
/* =========================================
ICON BOX — LIGHT SECTION
========================================= */

.s3m-section-light .s3m-icon-box .elementor-icon{
color:#2563EB;
}

.s3m-section-light .s3m-icon-box .elementor-icon-box-title{
color:#0F172A;
}

.s3m-section-light .s3m-icon-box .elementor-icon-box-description{
color:#475569;
}

.s3m-section-light .s3m-icon-box:hover{
transform:translateY(-4px);
background:#F8FAFC;
border:1px solid #E2E8F0;
}


/* =========================================
ARCHITECTURE POINT ICON BOX
(section 5 diagram explanation)
========================================= */

.s3m-arch-point{
text-align:center;
padding:10px 20px;
}


/* ICON */

.s3m-arch-point .elementor-icon{
color:#38BDF8;
margin-bottom:14px;
}

/* SVG SIZE */

.s3m-arch-point .elementor-icon svg{
width:28px;
height:28px;
}

/* SVG SAFE */

.s3m-arch-point .elementor-icon svg,
.s3m-arch-point .elementor-icon svg path{
fill:currentColor;
}


/* TITLE */

.s3m-arch-point .elementor-icon-box-title{
font-family:Sora;
font-size:18px;
font-weight:600;
line-height:1.3;
margin-bottom:8px;
color:#FFFFFF;
}


/* DESCRIPTION */

.s3m-arch-point .elementor-icon-box-description{
font-family:Inter;
font-size:15px;
line-height:1.6;
color:#CBD5E1;
max-width:260px;
margin:auto;
}


/* HOVER */

.s3m-arch-point:hover .elementor-icon{
transform:scale(1.08);
color:#38BDF8;
transition:all .25s ease;
}
/* =================================================
ICON LIST SYSTEM
================================================ */

.s3m-icon-list{
list-style:none;
padding:0;
margin:0;
}

.s3m-icon-list li{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
font-family:Inter;
font-size:15px;
line-height:1.6;
}

.s3m-section-light .s3m-icon-list li{
color:#475569;
}

.s3m-section-dark .s3m-icon-list li{
color:#CBD5E1;
}

/*.s3m-icon-list li::before{
content:"•";
color:#38BDF8;
font-weight:700;
margin-top:2px;
}*/


/* =================================================
DIVIDER LIBRARY
================================================ */

.s3m-divider-neural{
border:none;
height:1px;
width:120px;
margin:40px auto;
background:linear-gradient(90deg,transparent,rgba(56,189,248,.7),transparent);
}

.s3m-divider-glow{
border:none;
height:2px;
width:80px;
margin:auto;
background:linear-gradient(90deg,transparent,#38BDF8,transparent);
box-shadow:0 0 14px rgba(56,189,248,.45);
}

.s3m-divider-grid{
border:none;
height:2px;
width:90px;
margin:auto;
background:repeating-linear-gradient(
90deg,
#38BDF8 0px,
#38BDF8 10px,
transparent 10px,
transparent 18px
);
}

.s3m-divider-pulse{
border:none;
height:2px;
width:80px;
margin:auto;
background:#38BDF8;
box-shadow:0 0 12px rgba(56,189,248,.6);
animation:s3mDividerPulse 2.8s infinite ease-in-out;
}

@keyframes s3mDividerPulse{
0%{opacity:.4;transform:scaleX(.9);}
50%{opacity:1;transform:scaleX(1);}
100%{opacity:.4;transform:scaleX(.9);}
}


/* =================================================
GRID SYSTEM
================================================ */

.s3m-grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}

.s3m-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.s3m-grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}


/* =================================================
S3M PATTERN LIBRARY
Dark + Light Compatible
================================================ */


/* ================================================
BASE PATTERN WRAPPER
================================================ */

.pattern-section{
position:relative;
overflow:hidden;
background-repeat:repeat;
background-position:center;
}


/* ================================================
GRID PATTERN
================================================ */

.pattern-grid{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px);

background-size:70px 70px;
}


/* DARK OPTIMIZATION */

.s3m-section-dark.pattern-grid{
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}



/* ================================================
BASE PATTERN WRAPPER
================================================ */

.pattern-section{
position:relative;
overflow:hidden;
background-repeat:repeat;
background-position:center;
}


/* ================================================
NETWORK PATTERN
================================================ */

.pattern-network{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px),
radial-gradient(circle, rgba(148,163,184,.25) 2px, transparent 2px);

background-size:
80px 80px,
80px 80px,
120px 120px;

background-position:
0 0,
0 0,
40px 40px;
}

.s3m-section-dark.pattern-network{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,.12) 2px, transparent 2px);
}


/* ================================================
DATA FLOW
================================================ */

.pattern-data{
background-image:
repeating-linear-gradient(
45deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 2px,
transparent 2px,
transparent 30px
);
}

.s3m-section-dark.pattern-data{
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 2px,
transparent 2px,
transparent 30px
);
}


/* ================================================
DOT MATRIX
================================================ */

.pattern-dots{
background-image:
radial-gradient(rgba(148,163,184,.25) 1px, transparent 1px);
background-size:24px 24px;
}

.s3m-section-dark.pattern-dots{
background-image:
radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}


/* ================================================
CIRCUIT BOARD
================================================ */

.pattern-circuit{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px),
radial-gradient(circle, rgba(148,163,184,.25) 1px, transparent 1px);

background-size:
60px 60px,
60px 60px,
30px 30px;
}

.s3m-section-dark.pattern-circuit{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
}


/* ================================================
NETWORK MESH
================================================ */

.pattern-mesh{
background-image:
repeating-linear-gradient(
60deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 40px
);
}

.s3m-section-dark.pattern-mesh{
background-image:
repeating-linear-gradient(
60deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 40px
);
}


/* ================================================
DATA WAVE
================================================ */

.pattern-wave{
background-image:
repeating-linear-gradient(
90deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 2px,
transparent 2px,
transparent 40px
);
}

.s3m-section-dark.pattern-wave{
background-image:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 2px,
transparent 2px,
transparent 40px
);
}


/* ================================================
ZERO TRUST RINGS
================================================ */

.pattern-trust{
background-image:
radial-gradient(circle at center, rgba(148,163,184,.15) 1px, transparent 1px);
background-size:200px 200px;
}

.s3m-section-dark.pattern-trust{
background-image:
radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1px);
}


/* ================================================
NEW PATTERN — CIRCUIT LINES
(cybersecurity architecture)
================================================ */

.pattern-circuit-lines{
background-image:
repeating-linear-gradient(
90deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
0deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 60px
);
}

.s3m-section-dark.pattern-circuit-lines{
background-image:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 60px
);
}


/* ================================================
NEW PATTERN — HEX GRID
(Security mesh style)
================================================ */

.pattern-hex{
background-image:
radial-gradient(circle at 25% 25%, rgba(148,163,184,.15) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(148,163,184,.15) 2px, transparent 2px);
background-size:60px 60px;
}

.s3m-section-dark.pattern-hex{
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.08) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,.08) 2px, transparent 2px);
}


/* ================================================
FAQ BACKGROUND
================================================ */

.pattern-faq{
position:relative;
}

.pattern-faq::after{
content:"?   ?   ?   ?   ?   ?";
position:absolute;
font-size:140px;
color:rgba(148,163,184,.08);
letter-spacing:180px;
top:40%;
left:-200px;
transform:rotate(-20deg);
white-space:nowrap;
pointer-events:none;
}

.s3m-section-dark.pattern-faq::after{
color:rgba(255,255,255,.05);
}

/* =================================================
RESPONSIVE
================================================ */

@media(max-width:1024px){

.s3m-heading-xl .elementor-heading-title{
font-size:40px;
}

.s3m-heading-lg .elementor-heading-title{
font-size:28px;
}

.s3m-section{
padding:100px 32px;
}

}

@media(max-width:768px){

.s3m-heading-xl .elementor-heading-title{
font-size:32px;
}

.s3m-heading-lg .elementor-heading-title{
font-size:24px;
}

.s3m-section{
padding:80px 24px;
}

.s3m-grid-2,
.s3m-grid-3,
.s3m-grid-4{
grid-template-columns:1fr;
}

}
.elementor-button{
white-space:normal !important;
}

.elementor-button-content-wrapper{
white-space:normal !important;
flex-wrap:wrap;
}

.elementor-button-text{
white-space:normal !important;
word-break:break-word;
}

/* =========================================
FAQ TEXT BOOST (LIGHT SECTION)
========================================= */

.s3m-faq-text{
font-family:Inter;
font-size:18px;
line-height:1.65;
font-weight:400;
max-width:720px;
margin:auto;
color:#1E293B; /* daha güçlü */
}

/* =========================================
FAQ CLOSING TEXT
========================================= */

.s3m-faq-closing{
font-family:Inter;
font-size:17px;
line-height:1.65;
max-width:720px;
margin:32px auto 0 auto;
color:#334155;
}

/* =================================================
S3M FLOW — FINAL PRODUCTION VERSION
Icon Box Based Flow System
================================================ */


/* =========================================
FLOW CONTAINER
========================================= */

.s3m-flow{
display:flex;
align-items:stretch;
justify-content:space-between;
gap:40px;
margin-top:60px;
flex-wrap:nowrap;
}


/* =========================================
FLOW STEP (EQUAL HEIGHT FIX)
========================================= */

.s3m-flow-step{
flex:1;
display:flex;
justify-content:center;
}


/* =========================================
ICON BOX WRAPPER (FULL CONTROL)
========================================= */

.s3m-flow-step .elementor-icon-box-wrapper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
text-align:center;
height:100%;
gap:12px;
}


/* =========================================
ICON (PERFECT CENTER + FIXED SIZE)
========================================= */

.s3m-flow-step .elementor-icon{
width:64px;
height:64px;
display:flex !important;
align-items:center;
justify-content:center;
border-radius:16px;
background:rgba(56,189,248,.08);
border:1px solid rgba(56,189,248,.25);
margin:0 auto 10px auto;
transition:all .25s ease;
}

.s3m-flow-step .elementor-icon i{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
font-size:22px;
}

.s3m-flow-step .elementor-icon svg{
display:block;
margin:auto;
}


/* =========================================
TITLE (FIXED HEIGHT ALIGN)
========================================= */

.s3m-flow-step .elementor-icon-box-title{
font-family:Sora;
font-size:16px;
font-weight:600;
line-height:1.35;
color:#FFFFFF;

min-height:44px; /* eşit title height */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}


/* =========================================
DESCRIPTION (EQUAL HEIGHT FIX)
========================================= */

.s3m-flow-step .elementor-icon-box-description{
font-family:Inter;
font-size:14px;
line-height:1.6;
color:#CBD5E1;

min-height:72px; /* 🔥 kritik fix */
max-width:220px;
margin:auto;

display:flex;
align-items:flex-start;
justify-content:center;
text-align:center;
}


/* =========================================
HOVER EFFECT
========================================= */

.s3m-flow-step:hover .elementor-icon{
transform:translateY(-4px) scale(1.05);
background:rgba(56,189,248,.15);
box-shadow:0 8px 20px rgba(56,189,248,.25);
}


/* =========================================
ARROW (NO FONT AWESOME DEPENDENCY)
========================================= */

.s3m-flow-step:not(:last-child)::after{
content:"→"; /* 🔥 FIXED */
position:absolute;
right:-22px;
top:50%;
transform:translateY(-50%);
font-size:18px;
color:#38BDF8;
opacity:.7;
}


/* LINE */

.s3m-flow-step:not(:last-child)::before{
content:"";
position:absolute;
right:-50px;
top:50%;
transform:translateY(-50%);
width:40px;
height:2px;
background:linear-gradient(90deg,#38BDF8,transparent);
opacity:.5;
}


/* =========================================
LIGHT MODE
========================================= */

.s3m-section-light .s3m-flow-step .elementor-icon{
background:#EFF6FF;
border:1px solid #BFDBFE;
}

.s3m-section-light .s3m-flow-step .elementor-icon i{
color:#2563EB;
}

.s3m-section-light .s3m-flow-step .elementor-icon-box-title{
color:#0F172A;
}

.s3m-section-light .s3m-flow-step .elementor-icon-box-description{
color:#475569;
}

.s3m-section-light .s3m-flow-step:not(:last-child)::after{
color:#2563EB;
}

.s3m-section-light .s3m-flow-step:not(:last-child)::before{
background:linear-gradient(90deg,#2563EB,transparent);
}


/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1024px){

.s3m-flow{
flex-wrap:wrap;
justify-content:center;
gap:40px;
}

.s3m-flow-step{
width:45%;
}

.s3m-flow-step::before,
.s3m-flow-step::after{
display:none;
}

}

@media(max-width:768px){

.s3m-flow{
flex-direction:column;
gap:30px;
}

.s3m-flow-step{
width:100%;
}

}
.s3m-flow-last::after,
.s3m-flow-last::before{
display:none !important;
}

/* =================================================
S3M TYPOGRAPHY FIX PATCH (NON-BREAKING)
APPEND ONLY — DO NOT REMOVE OLD SYSTEM
================================================ */


/* =========================================
TEXT BODY FIX
(eski margin:auto bug fix)
========================================= */

.s3m-text-body{
margin-left:0 !important;
margin-right:0 !important;
}


/* =========================================
FAQ TEXT FIX
========================================= */

.s3m-faq-text{
margin-left:0 !important;
margin-right:0 !important;
}

.s3m-faq-closing{
margin-left:0 !important;
margin-right:0 !important;
}


/* =========================================
NEW TEXT UTILITIES (SAFE ADD)
========================================= */

/* CENTER */
.s3m-text-center{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}

/* LEFT */
.s3m-text-left{
margin-left:0 !important;
margin-right:0 !important;
text-align:left;
}

/* RIGHT */
.s3m-text-right{
margin-left:auto !important;
text-align:right;
}
/* =================================================
ARCHITECTURE LAYER LOOP — FULL SYSTEM
================================================ */

/* =========================
BASE CARD
========================= */

.s3m-layer-card{
    border-radius:14px !important;
    padding:32px 28px !important;
    transition:all .28s ease;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* =========================
LIGHT MODE
========================= */

.s3m-section-light .s3m-layer-card{
    background:#ffffff;
    border:1px solid #E5E7EB;
}

.s3m-section-light .s3m-layer-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.15);
    border-color:#2563EB;
}

/* =========================
DARK MODE
========================= */

.s3m-section-dark .s3m-layer-card{
    background:#111827;
    border:1px solid #1F2937;
}

.s3m-section-dark .s3m-layer-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.45);
    border-color:#38BDF8;
}

/* =========================
TITLE
========================= */

.s3m-layer-title{
    font-family:Sora;
    font-size:20px;
    font-weight:600;
    line-height:1.35;
}

/* LIGHT */
.s3m-section-light .s3m-layer-title{
    color:#0F172A;
}

/* DARK */
.s3m-section-dark .s3m-layer-title{
    color:#FFFFFF;
}

/* =========================
DESCRIPTION
========================= */

.s3m-layer-text{
    font-family:Inter;
    font-size:15.5px;
    line-height:1.65;
}

/* LIGHT */
.s3m-section-light .s3m-layer-text{
    color:#475569;
}

/* DARK */
.s3m-section-dark .s3m-layer-text{
    color:#CBD5E1;
}

/* =========================
PRODUCT WRAPPER
========================= */

.s3m-layer-products{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

/* =========================
PRODUCT TAG
========================= */

.s3m-layer-product{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-family:Inter;
    font-size:13.5px;
    font-weight:500;

    padding:6px 12px;
    border-radius:999px;

    text-decoration:none;

    transition:all .25s ease;
}

/* LIGHT */
.s3m-section-light .s3m-layer-product{
    background:#F1F5F9;
    color:#0F172A;
}

.s3m-section-light .s3m-layer-product:hover{
    background:#2563EB;
    color:#ffffff;
}

/* DARK */
.s3m-section-dark .s3m-layer-product{
    background:#1F2937;
    color:#CBD5E1;
}

.s3m-section-dark .s3m-layer-product:hover{
    background:#38BDF8;
    color:#0B1120;
}

/* =========================
DOT INDICATOR
========================= */

.s3m-layer-product::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    display:inline-block;
}

/* LIGHT DOT */
.s3m-section-light .s3m-layer-product::before{
    background:#2563EB;
}

.s3m-section-light .s3m-layer-product:hover::before{
    background:#ffffff;
}

/* DARK DOT */
.s3m-section-dark .s3m-layer-product::before{
    background:#38BDF8;
}

.s3m-section-dark .s3m-layer-product:hover::before{
    background:#0B1120;
}

/* =========================
OPTIONAL MINI LABEL (PRODUCTS TITLE)
========================= */

.s3m-layer-products-label{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:600;
    margin-top:8px;
}

/* LIGHT */
.s3m-section-light .s3m-layer-products-label{
    color:#94A3B8;
}

/* DARK */
.s3m-section-dark .s3m-layer-products-label{
    color:#64748B;
}

/* ===============================
LOOP ITEM CENTER FIX
=============================== */
.e-loop-item .e-con-inner{
display:flex;
align-items:center;
justify-content:center;
}


/* ===============================
BADGE WRAPPER (VERTICAL NAV)
=============================== */
.s3m-badge-wrap{
display:flex !important;
flex-direction:column;

align-items:flex-start; /* 🔥 BURASI KRİTİK */

gap:14px;

max-width:600px;
margin:20px 0 0 0; /* 🔥 center kaldırıldı */
}


/* ===============================
BADGE (EQUAL SIZE + PREMIUM)
=============================== */
.s3m-badge{
display:flex;
align-items:center;
justify-content:center;

width: 100%;
height:44px;

padding:0 20px;

border-radius:999px;

background:rgba(56,189,248,0.08);
color:#38BDF8;

font-size:14px;
font-weight:500;
text-align:center;

border:1px solid rgba(56,189,248,0.25);

text-decoration:none;
cursor:pointer;

transition:all .25s ease;

/* 🔥 TEXT CONTROL */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


/* HOVER */
.s3m-badge:hover{
background:#38BDF8;
color:#0B1220;
border-color:#38BDF8;

transform:translateY(-2px);
box-shadow:0 0 14px rgba(56,189,248,0.5);
}


/* ACTIVE */
.s3m-badge.active{
background:#38BDF8;
color:#0B1220;
border-color:#38BDF8;
}


/* CLICK */
.s3m-badge:active{
transform:scale(0.96);
}


/* ===============================
STICKY NAV
=============================== */
.s3m-anchor-nav{
position:sticky;
top:80px;
z-index:10;

display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}


/* ===============================
ANCHOR OFFSET FIX
=============================== */
:target{
scroll-margin-top:120px;
}

html{
scroll-behavior:smooth;
}


/* ===============================
CARD BASE
=============================== */
.s3m-card{
transition:all .3s ease;
}


/* CARD HOVER */
.s3m-card:hover{
transform:translateY(-6px);
border-color:#38BDF8;

box-shadow:
0 20px 40px -12px rgba(0,0,0,.45),
0 0 0 1px rgba(56,189,248,.25);
}


/* ===============================
ANCHOR TARGET HIGHLIGHT
=============================== */
.s3m-card:target{
animation:s3mHighlight 1.2s ease;

border-color:#38BDF8;
box-shadow:
0 0 0 1px rgba(56,189,248,.4),
0 0 20px rgba(56,189,248,.25);
}

@keyframes s3mHighlight{
0%{
transform:scale(1);
box-shadow:none;
}
50%{
transform:scale(1.02);
box-shadow:0 0 25px rgba(56,189,248,.4);
}
100%{
transform:scale(1);
}
}


/* ===============================
ICON LIST BASE
=============================== */
/* ===============================
ICON LIST BASE (UL + ELEMENTOR FIX)
=============================== */

/* BOTH SYSTEM SUPPORT */
.s3m-icon-list li,
.s3m-icon-list .elementor-icon-list-item{
position:relative;
padding-left:22px;

transition:all .3s ease;
opacity:.9;
}


/* ===============================
CUSTOM ICON
=============================== */

/* BOTH SYSTEM SUPPORT */
.s3m-icon-list li::before,
.s3m-icon-list .elementor-icon-list-item::before{
content:"";
position:absolute;
left:0;
top:7px;

width:10px;
height:10px;

background:#38BDF8;

clip-path:polygon(14% 44%, 0 59%, 38% 100%, 100% 19%, 84% 0%, 36% 62%);

transform:scale(0) rotate(-20deg);
opacity:0;

transition:all .35s cubic-bezier(.4,0,.2,1);
}


/* ===============================
REMOVE ELEMENTOR DEFAULT ICON
=============================== */

.s3m-icon-list .elementor-icon-list-icon{
display:none !important;
}


/* ===============================
ICON ANIMATION
=============================== */

.s3m-card:hover .s3m-icon-list li::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item::before{
transform:scale(1) rotate(0);
opacity:1;

box-shadow:0 0 8px rgba(56,189,248,0.7);
}


/* ===============================
TEXT MOVE
=============================== */

.s3m-card:hover .s3m-icon-list li,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item{
transform:translateX(3px);
opacity:1;
}


/* ===============================
STAGGER (UL + ELEMENTOR)
=============================== */

.s3m-card:hover .s3m-icon-list li:nth-child(1)::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item:nth-child(1)::before{transition-delay:.05s;}

.s3m-card:hover .s3m-icon-list li:nth-child(2)::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item:nth-child(2)::before{transition-delay:.1s;}

.s3m-card:hover .s3m-icon-list li:nth-child(3)::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item:nth-child(3)::before{transition-delay:.15s;}

.s3m-card:hover .s3m-icon-list li:nth-child(4)::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item:nth-child(4)::before{transition-delay:.2s;}

.s3m-card:hover .s3m-icon-list li:nth-child(5)::before,
.s3m-card:hover .s3m-icon-list .elementor-icon-list-item:nth-child(5)::before{transition-delay:.25s;}


/* ===============================
CTA BUTTON HOVER
=============================== */

.s3m-card:hover .s3m-btn-outline .elementor-button{
background:rgba(56,189,248,0.1);
border-color:#38BDF8;
color:#38BDF8;
}


/* ===============================
PERFORMANCE
=============================== */

.s3m-icon-list li,
.s3m-icon-list li::before,
.s3m-icon-list .elementor-icon-list-item,
.s3m-icon-list .elementor-icon-list-item::before{
will-change:transform, opacity;
}


/* ===============================
MOBILE
=============================== */
@media(max-width:768px){
.s3m-badge-wrap{
align-items:flex-start;
}
}

/* =========================================
FORCE S3M ICON LIST (PROD FIX)
========================================= */

.s3m-section .s3m-icon-list li,
.s3m-section .s3m-icon-list .elementor-icon-list-item{
position:relative !important;
padding-left:22px !important;
}

/* ICON */
.s3m-section .s3m-icon-list li::before,
.s3m-section .s3m-icon-list .elementor-icon-list-item::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:7px !important;

width:10px !important;
height:10px !important;

background:#38BDF8 !important;

clip-path:polygon(14% 44%, 0 59%, 38% 100%, 100% 19%, 84% 0%, 36% 62%) !important;

transform:scale(0) rotate(-20deg);
opacity:0;
}

/* REMOVE ELEMENTOR ICON */
.s3m-section .s3m-icon-list .elementor-icon-list-icon{
display:none !important;
}