/* =========================================================
   YORUMLAR SAYFASI
========================================================= */

.reviews-page{

    background:#090d18;

    color:#dce5f2;

    min-height:70vh;

    padding:
        70px
        20px
        90px;

}

.reviews-container{

    width:100%;

    max-width:1080px;

    margin:0 auto;

}


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

.reviews-header{

    max-width:760px;

    margin:
        0
        auto
        45px;

    text-align:center;

}

.reviews-eyebrow{

    color:#d8b35a;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.reviews-header h1{

    margin:
        0
        0
        14px;

    color:#fff;

    font-size:36px;

    line-height:1.2;

    font-weight:800;

}

.reviews-header p{

    max-width:680px;

    margin:0 auto;

    color:#8fa4c2;

    font-size:15px;

    line-height:1.7;

}


/* =========================================================
   FORM
========================================================= */

.review-form-box{

    max-width:760px;

    margin:
        0
        auto
        55px;

    padding:30px;

    background:#1d2a3e;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:18px;

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.20);

}

.review-form-box h2{

    margin:
        0
        0
        8px;

    color:#fff;

    font-size:24px;

    font-weight:800;

}

.review-form-description{

    margin:
        0
        0
        25px;

    color:#8fa4c2;

    font-size:14px;

    line-height:1.6;

}

.review-form-grid{

    display:grid;

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

    gap:16px;

}

.review-field{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.review-field.full{

    grid-column:
        1 / -1;

}

.review-field label{

    color:#dce5f2;

    font-size:13px;

    font-weight:700;

}

.review-field label small{

    color:#7187a4;

    font-weight:400;

}

.review-field input,
.review-field textarea{

    width:100%;

    box-sizing:border-box;

    padding:
        13px
        15px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:11px;

    background:#111b2b;

    color:#fff;

    font:
        inherit;

    outline:none;

    transition:
        border-color .2s ease,
        background .2s ease;

}

.review-field input::placeholder,
.review-field textarea::placeholder{

    color:#5f7189;

}

.review-field input:focus,
.review-field textarea:focus{

    border-color:
        rgba(216,179,90,.55);

    background:#0e1726;

}

.review-field textarea{

    min-height:140px;

    resize:vertical;

    line-height:1.6;

}

.review-submit{

    margin-top:18px;

    padding:
        13px
        24px;

    border:0;

    border-radius:11px;

    background:#d8b35a;

    color:#111;

    font-size:14px;

    font-weight:800;

    cursor:pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;

}

.review-submit:hover{

    transform:
        translateY(-2px);

    opacity:.92;

}


/* =========================================================
   MESAJLAR
========================================================= */

.review-message{

    margin-bottom:20px;

    padding:
        13px
        16px;

    border-radius:11px;

    font-size:14px;

    line-height:1.5;

}

.review-message.success{

    background:
        rgba(60,190,120,.10);

    border:
        1px solid
        rgba(60,190,120,.22);

    color:#8ee2b1;

}

.review-message.error{

    background:
        rgba(220,70,70,.10);

    border:
        1px solid
        rgba(220,70,70,.22);

    color:#ff9b9b;

}


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

.reviews-section-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;

}

.reviews-section-header h2{

    margin:0;

    color:#fff;

    font-size:25px;

    font-weight:800;

}

.reviews-count{

    color:#7187a4;

    font-size:13px;

}


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

.reviews-list{

    display:grid;

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

    gap:20px;

}


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

.review-card{

    min-width:0;

    padding:24px;

    background:#1d2a3e;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:17px;

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.18);

    transition:
        transform .2s ease,
        border-color .2s ease;

}

.review-card:hover{

    transform:
        translateY(-3px);

    border-color:
        rgba(216,179,90,.35);

}

.review-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:17px;

}

.review-author{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;

}

.review-avatar{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        rgba(216,179,90,.13);

    border:
        1px solid
        rgba(216,179,90,.20);

    color:#d8b35a;

    font-size:16px;

    font-weight:800;

}

.review-author-info{

    min-width:0;

}

.review-name{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#fff;

    font-size:14px;

    font-weight:800;

}

.review-date{

    margin-top:3px;

    color:#7187a4;

    font-size:12px;

}

.review-quote{

    flex-shrink:0;

    color:#d8b35a;

    font-size:30px;

    line-height:1;

    opacity:.75;

}

.review-body{

    margin:0;

    color:#9db0c8;

    font-size:14px;

    line-height:1.75;

    white-space:pre-line;

    overflow-wrap:anywhere;

}


/* =========================================================
   BOŞ
========================================================= */

.review-empty{

    grid-column:
        1 / -1;

    padding:
        45px
        20px;

    text-align:center;

    background:#111b2b;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:17px;

    color:#8195b1;

    line-height:1.6;

}


/* =========================================================
   SAYFALAMA
========================================================= */

.review-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:38px;

}

.review-pagination a,
.review-pagination span{

    min-width:40px;

    height:40px;

    padding:
        0
        10px;

    box-sizing:border-box;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    text-decoration:none;

    color:#9db0c8;

    background:#111b2b;

    border:
        1px solid
        rgba(255,255,255,.08);

    font-size:13px;

}

.review-pagination a:hover{

    color:#fff;

    border-color:
        rgba(216,179,90,.35);

}

.review-pagination .active{

    background:#d8b35a;

    border-color:#d8b35a;

    color:#111;

    font-weight:800;

}


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

@media(max-width:900px){

    .reviews-container{

        max-width:720px;

    }

    .reviews-list{

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

    }

}


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

@media(max-width:600px){

    .reviews-page{

        padding:
            50px
            14px
            60px;

    }

    .reviews-header{

        margin-bottom:32px;

    }

    .reviews-header h1{

        font-size:29px;

    }

    .reviews-header p{

        font-size:14px;

    }

    .review-form-box{

        padding:20px;

        margin-bottom:40px;

    }

    .review-form-box h2{

        font-size:21px;

    }

    .review-form-grid{

        grid-template-columns:1fr;

    }

    .review-field.full{

        grid-column:auto;

    }

    .review-submit{

        width:100%;

    }

    .reviews-section-header{

        align-items:flex-start;

        flex-direction:column;

        gap:6px;

    }

    .reviews-section-header h2{

        font-size:22px;

    }

    .reviews-list{

        grid-template-columns:1fr;

        gap:15px;

    }

    .review-card{

        padding:20px;

    }

    .review-body{

        font-size:13.5px;

    }

}