.services{
    position:relative;
    overflow:hidden;

    padding:50px 0;
}

.services .container{
    position:relative;
    z-index:2;
}

.services-bg{
    position:absolute;
    inset:0;

    transition:opacity 1.5s ease;

    will-change:opacity;
}

.services-bg.current{
    opacity:1;
}

.services-bg.next{
    opacity:0;
}



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





.service-card{
    position:relative;
    
    border-radius:28px;
    background: #2c2c2c00;
    
}

.service-image{
    position:relative;
    height:420px;
    
    max-width:100%;
    
}

.service-image img{
    display:block;

    width:95%;
    height:95%;

    object-fit:contain;
    object-position:center;

    transition:transform .6s ease;
}

.service-card:hover .service-image img{
    transform:scale(1.08);
}


.service-content{
    padding:34px;
    
}



.service-content h3{
    font-size:32px;
    margin-bottom:14px;
}

.service-content p{
    opacity:.7;
    line-height:1.7;
    
}

.section-title span{
    font-size:18px;
    color:#c79b6a
    
}

.incele-btn{
    display: inline-block;
    margin-top: 15px;
    color: #c79b6a;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.incele-btn:hover{
    color: #fff;
    transform: translateX(5px);
}

/* =====================================================
   SERVICES - MOBİL UYUMLULUK
===================================================== */

@media (max-width: 991px){

    .services{
        padding:60px 0;
        overflow:hidden;
    }

    /* Hizmetler 2 sütundan 1 sütuna */
    .services-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    /* Kart */
    .service-card{
        width:100%;
        max-width:100%;
        min-width:0;
        border-radius:22px;
    }

    /* Görsel alanı */
    .service-image{
        width:100%;
        max-width:100%;
        height:360px;
        overflow:hidden;
    }

    .service-image img{
        width:100%;
        height:100%;
        max-width:100%;
        object-fit:contain;
    }

    /* İçerik */
    .service-content{
        padding:25px 20px;
    }

    .service-content h3{
        font-size:26px;
        line-height:1.2;
        margin-bottom:12px;
    }

    .service-content p{
        font-size:15px;
        line-height:1.7;
    }

    .incele-btn{
        font-size:15px;
        margin-top:14px;
    }

}


/* =====================================================
   KÜÇÜK TELEFON
   600px VE ALTI
===================================================== */

@media (max-width:600px){

    .services{
        padding:45px 0;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .service-card{
        width:100%;
        border-radius:18px;
    }

    .service-image{
        height:280px;
    }

    .service-image img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .service-content{
        padding:20px 15px;
    }

    .service-content h3{
        font-size:22px;
        line-height:1.25;
        margin-bottom:10px;
    }

    .service-content p{
        font-size:14px;
        line-height:1.7;
    }

    .incele-btn{
        font-size:14px;
        margin-top:12px;
    }

    /* Section başlığı */
    .section-title{
        margin-bottom:40px;
    }

    .section-title span{
        font-size:14px;
        letter-spacing:2px;
    }

    .section-title h2{
        font-size:32px;
        line-height:1.15;
    }

}


/* =====================================================
   ÇOK KÜÇÜK TELEFON
   390px VE ALTI
===================================================== */

@media (max-width:390px){

    .services{
        padding:40px 0;
    }

    .services-grid{
        gap:35px;
    }

    .service-image{
        height:240px;
    }

    .service-content{
        padding:18px 12px;
    }

    .service-content h3{
        font-size:21px;
    }

    .service-content p{
        font-size:13px;
        line-height:1.65;
    }

    .incele-btn{
        font-size:13px;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title span{
        font-size:13px;
    }

    .section-title h2{
        font-size:29px;
    }

}