@charset "utf-8";

/* ======================================================
   INDEX HİZMET SÜRECİ ANA ALANI
====================================================== */

.index-surec{
    width:100%;
    padding:10px 0 75px 0;
    background:#f7f7f7;
}


/* ======================================================
   ANA TAŞIYICI
====================================================== */

.index-surec-wrapper{
    width:90%;
    max-width:1180px;
    margin:0 auto;
    padding:42px;
    background:#fff;
    border-radius:32px;
    box-shadow:0 20px 50px rgba(0,0,0,0.07);
    position:relative;
    overflow:hidden;
}


/* ======================================================
   ARKA PLAN DEKORATİF EFEKTLER
====================================================== */

.index-surec-wrapper::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    right:-130px;
    top:-140px;
    background:rgba(244,123,0,0.10);
    border-radius:50%;
    filter:blur(80px);
}

.index-surec-wrapper::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    left:-130px;
    bottom:-130px;
    background:rgba(15,23,42,0.05);
    border-radius:50%;
    filter:blur(90px);
}


/* ======================================================
   ÜST BAŞLIK ALANI
====================================================== */

.index-surec-header{
    max-width:760px;
    position:relative;
    z-index:2;
    margin-bottom:36px;
}


/* KÜÇÜK BAŞLIK */

.index-surec-small-title{
    display:inline-block;
    margin-bottom:14px;
    padding:8px 18px;
    background:rgba(244,123,0,0.12);
    color:#f47b00;
    border-radius:30px;
    font-size:13px;
    font-weight:800;
    letter-spacing:0.3px;
}


/* ANA BAŞLIK */

.index-surec-header h2{
    color:#111827;
    font-size:36px;
    line-height:1.2;
    letter-spacing:-0.8px;
    margin-bottom:18px;
}


/* AÇIKLAMA */

.index-surec-header p{
    color:#64748b;
    font-size:16px;
    line-height:1.9;
}


/* ======================================================
   SÜREÇ KART GRID YAPISI
====================================================== */

.index-surec-steps{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}


/* ======================================================
   SÜREÇ KARTLARI
====================================================== */

.index-surec-step{
    min-height:270px;
    padding:26px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,0.06);
    border-radius:26px;
    position:relative;
    overflow:hidden;
    transition:0.35s ease;

    opacity:0;
    transform:translateY(25px);
}


/* ACTIVE */

.index-surec-step.active{
    opacity:1;
    transform:translateY(0);
}


/* HOVER */

.index-surec-step:hover{
    transform:translateY(-8px);
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,0.10);
    border-color:rgba(244,123,0,0.18);
}


/* ======================================================
   ÜST TURUNCU ÇİZGİ EFEKTİ
====================================================== */

.index-surec-step::before{
    content:"";
    position:absolute;
    top:0;
    left:24px;
    right:24px;
    height:3px;
    background:linear-gradient(90deg,#f47b00,#ffb347);
    border-radius:0 0 12px 12px;
    opacity:0;
    transition:0.35s ease;
}


/* HOVER */

.index-surec-step:hover::before{
    opacity:1;
}


/* ======================================================
   ADIM NUMARASI
====================================================== */

.index-surec-number{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    background:linear-gradient(135deg,#f47b00,#ffb347);
    color:#fff;
    border-radius:18px;
    font-size:15px;
    font-weight:900;
    box-shadow:0 14px 24px rgba(244,123,0,0.26);
}


/* ======================================================
   KART İÇERİKLERİ
====================================================== */

.index-surec-content h3{
    color:#111827;
    font-size:19px;
    line-height:1.35;
    margin-bottom:12px;
}

.index-surec-content p{
    color:#64748b;
    font-size:14px;
    line-height:1.85;
}


/* ======================================================
   ALT SEO VE LİNK ALANI
====================================================== */

.index-surec-bottom{
    margin-top:28px;
    padding:20px 24px;
    background:linear-gradient(135deg,#07101f,#0d1b2d);
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    z-index:2;
    overflow:hidden;
}


/* PARLAKLIK EFEKTİ */

.index-surec-bottom::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-120px;
    top:-120px;
    background:rgba(244,123,0,0.14);
    border-radius:50%;
    filter:blur(80px);
}


/* SEO YAZISI */

.index-surec-bottom p{
    color:#dbe2ea;
    font-size:15px;
    line-height:1.85;
    max-width:760px;
    position:relative;
    z-index:2;
}


/* ======================================================
   PROJELER BUTONU
====================================================== */

.index-surec-link{
    min-width:max-content;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 22px;
    background:linear-gradient(135deg,#f47b00,#ff9b21);
    color:#fff;
    border-radius:16px;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    transition:0.35s ease;
    position:relative;
    z-index:2;
}


/* HOVER */

.index-surec-link:hover{
    transform:translateY(-3px) translateX(4px);
    box-shadow:0 14px 26px rgba(244,123,0,0.30);
}


/* ======================================================
   TABLET UYUMLULUK
====================================================== */

@media(max-width:992px){

    .index-surec-wrapper{
        padding:34px;
    }

    .index-surec-steps{
        grid-template-columns:repeat(2,1fr);
    }

    .index-surec-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}


/* ======================================================
   MOBİL UYUMLULUK
====================================================== */

@media(max-width:768px){

    .index-surec{
        padding:0 0 55px 0;
    }

    .index-surec-wrapper{
        width:92%;
        padding:26px;
        border-radius:24px;
    }

    .index-surec-header h2{
        font-size:28px;
        line-height:1.3;
    }

    .index-surec-header p{
        font-size:15px;
    }

    .index-surec-steps{
        grid-template-columns:1fr;
    }

    .index-surec-step{
        min-height:auto;
    }

    .index-surec-bottom{
        padding:22px;
    }

    .index-surec-link{
        width:100%;
        text-align:center;
    }

}