/* Genel Bölüm Ayarları */
.musteri-yorumlari-bolumu {
    background-color: #0a0a0a; 
    padding: 80px 20px;
    position: relative;
}

.yorumlar-container { max-width: 1600px; margin: 0 auto; }

.yorumlar-baslik-alani { text-align: center; margin-bottom: 60px; }

.kucuk-baslik {
    color: var(--yellow); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 15px; margin-bottom: 15px; letter-spacing: 1px;
}

.kucuk-baslik .cizgi { width: 40px; height: 1px; background-color: var(--yellow); }

.ana-baslik { color: #fff; font-size: 48px; font-weight: 900; font-style: italic; line-height: 1.1; margin-bottom: 20px; }
.sari-yazi { color: var(--yellow); }
.aciklama-metni { color: #aaa; font-size: 16px; line-height: 1.6; }

/* --- MÜŞTERİ YORUMLARI GRID --- */
.yorumlar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 50px; }

.yorum-karti {
    background-color: #161616; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 15px;
    padding: 40px 30px; position: relative; overflow: hidden; display: flex; flex-direction: column;
    justify-content: space-between; transition: transform 0.3s ease, border-color 0.3s ease;
}

.yorum-karti:hover { transform: translateY(-5px); border-color: rgba(251, 167, 7, 0.3); }

.yorum-arka-plan {
    position: absolute; bottom: -10%; right: -10%; width: 80%; height: 60%;
    background-size: contain; background-position: bottom right; background-repeat: no-repeat; opacity: 0.15; z-index: 1;
    mask-image: linear-gradient(to bottom right, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, black 100%);
}

.dev-tirnak { position: absolute; top: 30px; right: 30px; font-size: 45px; color: var(--yellow); opacity: 0.8; z-index: 2; }
.kart-icerik-ust, .musteri-bilgi { position: relative; z-index: 3; }

.yildizlar { color: var(--yellow); font-size: 16px; margin-bottom: 25px; display: flex; gap: 4px; }
.yorum-metni { color: #ddd; font-size: 15px; line-height: 1.7; margin-bottom: 30px; font-weight: 400; }

.musteri-bilgi { display: flex; align-items: center; gap: 15px; margin-top: auto; }
.avatar-kutu { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.1); }
.avatar-kutu img { width: 100%; height: 100%; object-fit: cover; }
.musteri-isim { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.musteri-unvan { color: var(--yellow); font-size: 13px; font-weight: 500; }

/* --- YORUM FORMU ALANI (YENİ) --- */
.yorum-form-alani {
    background-color: #161616; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 15px;
    padding: 40px; margin-bottom: 50px; text-align: center;
}
.yorum-form-alani h3 { color: #fff; margin-bottom: 20px; font-size: 24px; }
.yorum-mesaj { background-color: rgba(251, 167, 7, 0.2); color: var(--yellow); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--yellow); }
.yorum-form { display: flex; flex-direction: column; gap: 15px; max-width: 600px; margin: 0 auto; }
.yorum-form input, .yorum-form textarea {
    width: 100%; padding: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background-color: #0a0a0a; color: #fff; font-family: inherit; font-size: 15px; outline: none;
}
.yorum-form input:focus, .yorum-form textarea:focus { border-color: var(--yellow); }
.btn-yorum {
    background-color: var(--yellow); color: #000; padding: 15px; border: none; border-radius: 8px;
    font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s;
}
.btn-yorum:hover { background-color: #fff; }

/* --- ALT İSTATİSTİK BARI --- */
.istatistik-kutusu { display: grid; grid-template-columns: repeat(4, 1fr); background-color: #161616; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 15px; }
.stat-item { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 35px 20px; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.stat-item:last-child { border-right: none; }
.stat-ikon { color: var(--yellow); font-size: 40px; }
.stat-icerik { display: flex; flex-direction: column; }
.stat-deger { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.1; margin-bottom: 5px; }
.stat-metin { color: #aaa; font-size: 14px; font-weight: 500; }

/* --- MOBİL VE TABLET TASARIMI --- */
@media (max-width: 1200px) { .yorumlar-grid { grid-template-columns: repeat(2, 1fr); } .ana-baslik { font-size: 40px; } }
@media (max-width: 992px) { .istatistik-kutusu { grid-template-columns: repeat(2, 1fr); } .stat-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); justify-content: flex-start; padding-left: 20%;} .stat-item:nth-child(2n) { border-right: none; } .stat-item:nth-last-child(-n+2) { border-bottom: none; } }
@media (max-width: 768px) {
    .musteri-yorumlari-bolumu { padding: 60px 15px; } .ana-baslik { font-size: 32px; }
    .yorumlar-grid { grid-template-columns: 1fr; gap: 20px; } .yorum-karti { padding: 30px 20px; }
    .dev-tirnak { font-size: 35px; top: 20px; right: 20px; } .yorum-metni { font-size: 14px; }
    .yorum-arka-plan { opacity: 0.1; width: 90%; }
    .stat-item { justify-content: flex-start; padding: 25px 15px; } .stat-ikon { font-size: 32px; } .stat-deger { font-size: 22px; } .stat-metin { font-size: 12px; }
    .yorum-form-alani { padding: 20px; }
}

/* Görüntülenen Yıldızların Rengi */
.yildizlar .aktif { color: var(--yellow); }
.yildizlar .pasif { color: #444; }

/* --- FORMA EKLENEN YILDIZ SEÇİMİ TASARIMI --- */
.yildiz-secim-alani {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.rating-css {
    display: flex;
    flex-direction: row-reverse; /* Sağdan sola dizer ki hover mantığı çalışsın */
    justify-content: center;
}

.rating-css input {
    display: none; /* Radio butonları gizliyoruz */
}

.rating-css label {
    font-size: 30px;
    color: #444;
    cursor: pointer;
    transition: 0.2s;
    padding: 0 5px;
}

/* Üzerine gelindiğinde veya seçildiğinde sarı yap */
.rating-css input:checked ~ label,
.rating-css label:hover,
.rating-css label:hover ~ label {
    color: var(--yellow);
}