@charset "utf-8";
/* CSS Document */

/* =======================================================
   INDEX HİZMET KARTLARI ALANI
======================================================= */

.indexhizmetkart-section{
    width:100%;

    /* ÜST BOŞLUK AZALTILDI */
  	padding:35px 70px 40px;

    background:#f7f7f7;
}

/* =======================================================
   HİZMET KARTLARI BAŞLIK ALANI
======================================================= */

.indexhizmetkart-title{
    width:100%;
    text-align:center;

    /* KARTLARA YAKINLAŞTIRILDI */
    margin-bottom:40px;
}

.indexhizmetkart-title span{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:#f47b00;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

/* SOL ÇİZGİ */
.indexhizmetkart-title span::before{

    content:"";

    width:55px;

    height:2px;

    background:#f47b00;

    display:block;
}

/* SAĞ ÇİZGİ */
.indexhizmetkart-title span::after{

    content:"";

    width:55px;

    height:2px;

    background:#f47b00;

    display:block;
}

.indexhizmetkart-title h2{
    font-size:44px;
    color:#1a1a1a;
    margin-bottom:15px;
    font-weight:800;
    line-height:1.3;
}

.indexhizmetkart-title p{
    color:#666;
    font-size:17px;
}

/* =======================================================
   HİZMET GRID SİSTEMİ
======================================================= */

.indexhizmetkart-grid{

    display:grid;

    /* MASAÜSTÜ 5 SÜTUN */
    grid-template-columns:repeat(5,1fr);

    gap:26px;
}

/* =======================================================
   HİZMET KARTI
======================================================= */

.indexhizmetkart-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    position:relative;

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

    transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.6s ease;

    opacity:0;

    transform:translateY(35px);
}

/* =======================================================
   JAVASCRIPT GÖRÜNME EFEKTİ
======================================================= */

.indexhizmetkart-card.indexhizmetkart-show{

    opacity:1;

    transform:translateY(0);
}

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

.indexhizmetkart-card.indexhizmetkart-show:hover{

    transform:translateY(-10px);

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

/* =======================================================
   KART NUMARASI
======================================================= */

.indexhizmetkart-number{

    position:absolute;

    top:15px;
    left:15px;

    width:42px;
    height:42px;

    background:#f47b00;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

    z-index:5;
}

/* =======================================================
   KART GÖRSELİ
======================================================= */

.indexhizmetkart-card img{

    width:100%;

    height:170px;

    object-fit:cover;

    display:block;

    transition:0.5s ease;
}

/* =======================================================
   GÖRSEL HOVER ZOOM
======================================================= */

.indexhizmetkart-card:hover img{

    transform:scale(1.08);
}

/* =======================================================
   KART İÇERİK ALANI
======================================================= */

.indexhizmetkart-content{

    padding:20px 22px 22px;
}

.indexhizmetkart-content h3{

    font-size:22px;

    margin-bottom:10px;

    color:#111;

    line-height:1.4;
}

.indexhizmetkart-content p{

    font-size:14px;

    line-height:1.6;

    color:#666;

    margin-bottom:22px;
}

/* =======================================================
   DETAY BUTONU
======================================================= */

.indexhizmetkart-content a{

    text-decoration:none;

    color:#f47b00;

    font-weight:700;

    font-size:15px;

    transition:0.3s ease;
}

/* =======================================================
   BUTON HOVER
======================================================= */

.indexhizmetkart-content a:hover{

    letter-spacing:1px;
}

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

@media(max-width:1200px){

    .indexhizmetkart-grid{

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

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

@media(max-width:900px){

    .indexhizmetkart-section{

        padding:60px 30px;
    }

    .indexhizmetkart-grid{

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

    .indexhizmetkart-title h2{

        font-size:36px;
    }
}

/* =======================================================
   MOBİL TELEFON
======================================================= */

@media(max-width:600px){

    .indexhizmetkart-section{

        padding:50px 20px;
    }

    .indexhizmetkart-grid{

        grid-template-columns:1fr;
    }

    .indexhizmetkart-title h2{

        font-size:30px;
    }

    .indexhizmetkart-title p{

        font-size:15px;
    }

    .indexhizmetkart-content{

        padding:22px;
    }

    .indexhizmetkart-content h3{

        font-size:21px;
    }
}