@charset "utf-8";

/* =======================================================
   INDEX NEDEN BİZ ALANI
======================================================= */

.indexnedenbiz-section{
    width:100%;
    padding:0px 70px 70px;
    background:#f7f7f7;
}

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

.indexnedenbiz-container{

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:0.9fr 1.3fr;

    gap:45px;

    align-items:center;
}

/* =======================================================
   SOL YAZI ALANI
======================================================= */

.indexnedenbiz-left span{

    color:#f47b00;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;
}

.indexnedenbiz-left h2{

    font-size:38px;

    color:#222;

    margin:12px 0 18px;
}

.indexnedenbiz-left p{

    font-size:16px;

    line-height:1.9;

    color:#666;
}

/* =======================================================
   KART ALANI
======================================================= */

.indexnedenbiz-right{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

/* =======================================================
   KART TASARIMI
======================================================= */

.indexnedenbiz-card{

    background:#fff;

    padding:28px 18px;

    border-radius:20px;

    border:1px solid #eee;

    box-shadow:0 10px 28px rgba(0,0,0,0.06);

    transition:0.35s ease;

    position:relative;

    overflow:hidden;

    opacity:0;

    transform:translateY(25px);
}

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

.indexnedenbiz-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:#f47b00;

    transition:0.35s ease;
}

/* =======================================================
   HOVER EFEKTİ
======================================================= */

.indexnedenbiz-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

.indexnedenbiz-card:hover::before{

    width:100%;
}

/* =======================================================
   ICON ALANI
======================================================= */

.indexnedenbiz-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(244,123,0,0.12);

    color:#f47b00;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:bold;

    margin-bottom:15px;
}

/* =======================================================
   KART BAŞLIĞI
======================================================= */

.indexnedenbiz-card h3{

    font-size:16px;

    color:#222;

    line-height:1.5;
}

/* =======================================================
   JAVASCRIPT ACTIVE CLASS
======================================================= */

.indexnedenbiz-card.active{

    opacity:1;

    transform:translateY(0);
}

/* =======================================================
   TABLET UYUM
======================================================= */

@media(max-width:992px){

    .indexnedenbiz-container{

        grid-template-columns:1fr;
    }

    .indexnedenbiz-right{

        grid-template-columns:repeat(2,1fr);
    }

}

/* =======================================================
   MOBİL UYUM
======================================================= */

@media(max-width:600px){

    .indexnedenbiz-section{

        padding:50px 20px;
    }

    .indexnedenbiz-left h2{

        font-size:30px;
    }

    .indexnedenbiz-right{

        grid-template-columns:1fr;
    }

}