/* ════════════════════════════════════════════════════════════
   3K TEDARİK — Ana Sayfa (Premium Theme)
   services.css ile aynı sl-* tasarım dili
   (Hero mevcut özgün tasarımıyla bırakılır.)
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1. STATS BAR (Hero altı, kompakt)
   ═══════════════════════════════════════════════════════════ */
.sl-stats-bar{
    padding:40px 0;
    background:var(--sl-bg);
    position:relative;
}

.sl-stats-bar .sl-stats{
    grid-template-columns:repeat(4,1fr);
    max-width:1200px;
    gap:18px;
}

/* ═══════════════════════════════════════════════════════════
   2. HOME SERVICES SECTION (sl-grid + sl-card kullanır)
   ═══════════════════════════════════════════════════════════ */
.sl-home-services{
    padding:60px 0 50px;
    background:var(--sl-bg);
}

.sl-home-services-cta{
    text-align:center;
    margin-top:36px;
}

/* ═══════════════════════════════════════════════════════════
   3. WHY US SECTION (Premium 2 sütun: sol features, sağ visual)
   ═══════════════════════════════════════════════════════════ */
.sl-why-section{
    padding:70px 0;
    background:linear-gradient(180deg,var(--sl-bg) 0%,var(--sl-bg-soft) 100%);
    position:relative;
    overflow:hidden;
}
.sl-why-section::before{
    content:"";
    position:absolute;
    top:-200px;left:-200px;
    width:500px;height:500px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(74,127,181,.10) 0%,transparent 65%);
    pointer-events:none;
}

.sl-why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    position:relative;
    z-index:1;
}

/* ── Sol: Features Listesi ── */
.sl-why-text{
    position:relative;
}
.sl-why-kicker{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;
    background:linear-gradient(135deg,rgba(74,127,181,.10),rgba(27,42,74,.08));
    border:1px solid rgba(74,127,181,.20);
    border-radius:100px;
    color:var(--sl-accent);
    font-size:.78rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    margin-bottom:16px;
}
.sl-why-kicker i{font-size:.72rem}
.sl-why-title{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(1.7rem,3vw,2.3rem);
    font-weight:800;
    color:var(--sl-text);
    line-height:1.25;
    letter-spacing:-.02em;
    margin:0 0 14px;
}
.sl-why-title .sl-grad{
    background:linear-gradient(135deg,var(--sl-accent),var(--sl-primary));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.sl-why-desc{
    font-size:1rem;
    color:var(--sl-text-soft);
    line-height:1.7;
    margin:0 0 28px;
}

.sl-feature-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.sl-feature-item{
    display:flex;align-items:flex-start;gap:16px;
    padding:18px 20px;
    background:#fff;
    border:1px solid var(--sl-border);
    border-radius:14px;
    box-shadow:var(--sl-card-shadow);
    transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    position:relative;
    overflow:hidden;
}
.sl-feature-item::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:3px;
    background:linear-gradient(180deg,var(--sl-accent),var(--sl-accent-2));
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .35s ease;
}
.sl-feature-item:hover{
    transform:translateX(4px);
    box-shadow:var(--sl-card-shadow-hover);
    border-color:rgba(74,127,181,.28);
}
.sl-feature-item:hover::before{transform:scaleY(1)}

.sl-feature-icon{
    width:46px;height:46px;
    border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.15rem;
    flex-shrink:0;
}
.sl-feature-icon.is-blue{background:linear-gradient(135deg,rgba(74,127,181,.14),rgba(27,42,74,.10));color:var(--sl-accent)}
.sl-feature-icon.is-green{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.10));color:#059669}
.sl-feature-icon.is-amber{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(217,119,6,.10));color:#d97706}
.sl-feature-icon.is-violet{background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(76,29,149,.10));color:#7c3aed}

.sl-feature-body{flex:1;min-width:0}
.sl-feature-title{
    font-family:'Montserrat',sans-serif;
    font-size:1rem;
    font-weight:800;
    color:var(--sl-text);
    margin:0 0 6px;
    line-height:1.3;
    letter-spacing:-.005em;
}
.sl-feature-desc{
    font-size:.88rem;
    color:var(--sl-text-soft);
    line-height:1.6;
    margin:0;
}

/* ── Sağ: Visual (Chart + Metrics) ── */
.sl-why-visual{
    position:relative;
}
.sl-why-visual-card{
    background:#fff;
    border:1px solid var(--sl-border);
    border-radius:20px;
    padding:32px;
    box-shadow:var(--sl-card-shadow);
    position:relative;
    overflow:hidden;
}
.sl-why-visual-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--sl-accent),var(--sl-accent-2));
    border-radius:20px 20px 0 0;
}
.sl-why-visual-card::after{
    content:"";
    position:absolute;
    top:-100px;right:-100px;
    width:280px;height:280px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(74,127,181,.08) 0%,transparent 65%);
    pointer-events:none;
}

.sl-why-chart-head{
    display:flex;align-items:center;gap:10px;
    font-size:.84rem;font-weight:700;
    color:var(--sl-text-muted);
    margin-bottom:20px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.sl-why-chart-head i{
    color:var(--sl-accent);
    font-size:1rem;
}

.sl-why-chart-bars{
    display:flex;align-items:flex-end;
    gap:12px;
    height:170px;
    margin-bottom:14px;
    padding:0 4px;
}
.sl-why-bar{
    flex:1;
    border-radius:8px 8px 0 0;
    height:0;
    transition:height 1.2s cubic-bezier(.16,1,.3,1);
    box-shadow:0 4px 12px rgba(27,42,74,.18);
}
.sl-why-chart-labels{
    display:flex;
    gap:12px;
    padding:0 4px;
    border-top:1px solid var(--sl-border);
    padding-top:12px;
    margin-bottom:24px;
}
.sl-why-chart-label{
    flex:1;
    text-align:center;
    font-size:.78rem;
    color:var(--sl-text-muted);
    font-weight:600;
}

.sl-why-metrics{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}
.sl-why-metric{
    text-align:center;
    padding:16px 10px;
    background:linear-gradient(135deg,#fafbfd 0%,#f1f5fb 100%);
    border:1px solid var(--sl-border);
    border-radius:12px;
    transition:transform .25s ease, border-color .2s ease;
}
.sl-why-metric:hover{
    transform:translateY(-3px);
    border-color:rgba(74,127,181,.30);
}
.sl-why-metric-num{
    font-family:'Montserrat',sans-serif;
    font-size:1.55rem;
    font-weight:800;
    line-height:1.05;
    color:var(--sl-primary);
    margin:0 0 4px;
    letter-spacing:-.015em;
    background:linear-gradient(135deg,var(--sl-primary),var(--sl-accent));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.sl-why-metric-label{
    font-size:.74rem;
    color:var(--sl-text-muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════════
   4. PROCESS SECTION (4 adım premium)
   ═══════════════════════════════════════════════════════════ */
.sl-process-section{
    padding:70px 0;
    background:var(--sl-bg);
    position:relative;
}

.sl-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:48px;
    position:relative;
}
.sl-process-grid::before{
    content:"";
    position:absolute;
    top:46px;
    left:13%;right:13%;
    height:2px;
    background:repeating-linear-gradient(
        to right,
        rgba(74,127,181,.30) 0,
        rgba(74,127,181,.30) 6px,
        transparent 6px,
        transparent 12px
    );
    z-index:0;
}

.sl-process-card{
    position:relative;
    z-index:1;
    background:#fff;
    border:1px solid var(--sl-border);
    border-radius:18px;
    padding:30px 22px 24px;
    text-align:center;
    box-shadow:var(--sl-card-shadow);
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease;
    overflow:hidden;
}
.sl-process-card::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--sl-accent),var(--sl-accent-2));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
    border-radius:18px 18px 0 0;
}
.sl-process-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--sl-card-shadow-hover);
    border-color:rgba(74,127,181,.30);
}
.sl-process-card:hover::after{transform:scaleX(1)}

.sl-process-num{
    width:64px;height:64px;
    border-radius:50%;
    margin:0 auto 18px;
    background:linear-gradient(135deg,var(--sl-primary),var(--sl-accent));
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Montserrat',sans-serif;
    font-size:1.45rem;
    font-weight:800;
    box-shadow:0 12px 26px rgba(27,42,74,.30);
    border:4px solid #fff;
    position:relative;
    transition:transform .3s ease;
}
.sl-process-card:hover .sl-process-num{
    transform:scale(1.08) rotate(-4deg);
}

.sl-process-title{
    font-family:'Montserrat',sans-serif;
    font-size:1.1rem;
    font-weight:800;
    color:var(--sl-text);
    line-height:1.3;
    letter-spacing:-.01em;
    margin:0 0 10px;
    transition:color .2s ease;
}
.sl-process-card:hover .sl-process-title{color:var(--sl-accent)}

.sl-process-desc{
    font-size:.88rem;
    color:var(--sl-text-soft);
    line-height:1.65;
    margin:0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
    .sl-process-grid{grid-template-columns:repeat(2,1fr);gap:18px}
    .sl-process-grid::before{display:none}
    .sl-stats-bar .sl-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
    .sl-why-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:760px){
    .sl-stats-bar{padding:30px 0}
    .sl-home-services{padding:44px 0 36px}
    .sl-why-section{padding:50px 0}
    .sl-process-section{padding:50px 0}
    .sl-why-visual-card{padding:24px 20px}
    .sl-why-chart-bars{height:130px;gap:8px}
    .sl-why-metrics{gap:10px}
    .sl-why-metric{padding:12px 8px}
    .sl-why-metric-num{font-size:1.3rem}
}
@media(max-width:480px){
    .sl-process-grid{grid-template-columns:1fr;gap:14px}
    .sl-stats-bar .sl-stats{grid-template-columns:1fr}
}