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

/* =======================================================
   INDEX MÜŞTERİ YORUMLARI ALANI
======================================================= */

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

/* =======================================================
   BAŞLIK ALANI
======================================================= */

.indexyorum-title{
    width:100%;
    text-align:center;
    margin-bottom:45px;
}

.indexyorum-title span{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:#f47b00;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

/* ÇİZGİLER */

.indexyorum-title span::before,
.indexyorum-title span::after{

    content:"";

    width:55px;

    height:2px;

    background:#f47b00;

    display:block;
}

.indexyorum-title h2{

    font-size:42px;

    color:#1a1a1a;

    font-weight:800;

    line-height:1.3;

    margin-bottom:15px;
}

.indexyorum-title p{

    font-size:17px;

    color:#666;
}

/* =======================================================
   YORUM KART GRID
======================================================= */

.indexyorum-wrapper{

    display:grid;

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

    gap:26px;
}

/* =======================================================
   YORUM KARTI
======================================================= */

.indexyorum-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

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

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

    position:relative;

    overflow:hidden;

    /* JAVASCRIPT BAŞLANGIÇ */
    opacity:0;

    transform:translateY(35px);
}

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

.indexyorum-card.indexyorum-show{

    opacity:1;

    transform:translateY(0);
}

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

.indexyorum-card:hover{

    transform:translateY(-8px);

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

/* =======================================================
   BÜYÜK TIRNAK EFEKTİ
======================================================= */

.indexyorum-card::before{

    content:"”";

    position:absolute;

    top:-25px;

    right:25px;

    font-size:120px;

    color:rgba(244,123,0,0.08);

    font-weight:800;

    line-height:1;
}

/* =======================================================
   YILDIZLAR
======================================================= */

.indexyorum-stars{

    color:#f47b00;

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:18px;
}

/* =======================================================
   YORUM YAZISI
======================================================= */

.indexyorum-card p{

    font-size:15px;

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

    position:relative;

    z-index:2;
}

/* =======================================================
   KULLANICI ALANI
======================================================= */

.indexyorum-user{

    display:flex;

    align-items:center;

    gap:14px;
}

/* AVATAR */

.indexyorum-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#f47b00;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:800;

    flex-shrink:0;
}

/* İSİM */

.indexyorum-user h4{

    font-size:17px;

    color:#111;

    margin-bottom:4px;
}

/* ALT BİLGİ */

.indexyorum-user span{

    font-size:14px;

    color:#777;
}

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

@media(max-width:1100px){

    .indexyorum-wrapper{

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

    .indexyorum-title h2{

        font-size:36px;
    }
}

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

@media(max-width:700px){

    .indexyorum-section{

        padding:55px 20px;
    }

    .indexyorum-wrapper{

        grid-template-columns:1fr;
    }

    .indexyorum-title h2{

        font-size:30px;
    }

    .indexyorum-title p{

        font-size:15px;
    }

    .indexyorum-card{

        padding:26px;
    }
}