/* ==========================================================================
   MUSTERI DEGERLENDIRMELERI SAYFASI (/musteri-degerlendirmeleri)
   Claude Design "Oyuneks Yorumlar" aktarimi (26.08.2026).
   Renk sistemi anasayfa-yeni.css / yorum bandi ile ayni: koyu tema site
   paletiyle birebir, acik tema body.light kapsaminda ayni degiskenlerle.
   ========================================================================== */
.mdSayfa {
    --mdYuzey: #20212B;
    --mdCizgi: #333444;
    --mdIcYuzey: #1C1D26;
    --mdIcCizgi: #2A2B38;
    --mdMetin: #C8C9D8;
    --mdSoluk: #ABACB5;
    --mdSilik: #8B8C99;
    --mdVurgu: #80F1B1;
    --mdVurguZemin: rgba(128, 241, 177, 0.10);
    --mdVurguCizgi: rgba(128, 241, 177, 0.30);
    --mdVurguCip: rgba(128, 241, 177, 0.12);
    --mdCipAktifZemin: #272834;
    --mdCipAktifCizgi: #4E4F5C;
    font-family: "Archivo", "Wix Madefor Display", sans-serif;
    color: var(--mdMetin);
}
body.light .mdSayfa {
    --mdYuzey: #FFFFFF;
    --mdCizgi: #E3E1D9;
    --mdIcYuzey: #F7F5EF;
    --mdIcCizgi: #E9E7DF;
    --mdMetin: #1F1E1D;
    --mdSoluk: #6B6A65;
    --mdSilik: #8B887F;
    --mdVurgu: #1B6B3C;
    --mdVurguZemin: rgba(27, 107, 60, 0.06);
    --mdVurguCizgi: rgba(27, 107, 60, 0.25);
    --mdVurguCip: rgba(27, 107, 60, 0.10);
    --mdCipAktifZemin: #EFEDE5;
    --mdCipAktifCizgi: #C9C6BB;
}

/* --------------------------------------------------------------------------
   Baslik
   -------------------------------------------------------------------------- */
.mdSayfa .mdBaslik { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.mdSayfa .mdBaslikH1 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; color: var(--mdMetin); margin: 0; }
.mdSayfa .mdBaslikAlt { font-size: 13.5px; color: var(--mdSoluk); margin: 0; }

/* --------------------------------------------------------------------------
   Genel ozet kutusu + iki puan karti
   -------------------------------------------------------------------------- */
.mdSayfa .mdOzetKutu { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); border-radius: 14px; margin-bottom: 24px; }
.mdSayfa .mdOzetUst { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mdSayfa .mdOzetBaslikKap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mdSayfa .mdOzetBaslik { font-size: 15px; font-weight: 700; color: var(--mdMetin); }
.mdSayfa .mdOzetAciklama { font-size: 12px; color: var(--mdSilik); }
.mdSayfa .mdOzetRozet { display: flex; align-items: center; gap: 9px; flex: none; padding: 7px 13px; border-radius: 999px; background: var(--mdVurguZemin); border: 1px solid var(--mdVurguCizgi); font-size: 11.5px; font-weight: 700; color: var(--mdVurgu); }
.mdSayfa .mdOzetRozet span { font-size: 11px; }
.mdSayfa .mdOzetIzgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mdSayfa .mdOzetKart { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--mdIcYuzey); border: 1px solid var(--mdIcCizgi); border-radius: 12px; cursor: pointer; transition: border-color .18s; text-decoration: none; }
.mdSayfa .mdOzetKart:hover { border-color: var(--mdVurguCizgi); }
.mdSayfa .mdOzetKart.aktif { border-color: var(--mdVurgu); }
.mdSayfa .mdOzetKartUst { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mdSayfa .mdOzetKartBaslikKap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mdSayfa .mdOzetKartBaslik { font-size: 13.5px; font-weight: 700; color: var(--mdMetin); }
.mdSayfa .mdOzetKartAlt { font-size: 11.5px; color: var(--mdSilik); }
.mdSayfa .mdOzetPuanKap { display: flex; align-items: flex-end; gap: 9px; flex: none; }
.mdSayfa .mdOzetPuan { font-size: 34px; font-weight: 800; line-height: .9; letter-spacing: -1.2px; color: var(--mdMetin); font-variant-numeric: tabular-nums; }
.mdSayfa .mdOzetPuanYan { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; }
.mdSayfa .mdOzetYildizlar { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--mdVurgu); }
.mdSayfa .mdOzetYildizlar .sonuk { color: var(--mdIcCizgi); }
.mdSayfa .mdOzetAdet { font-size: 11px; color: var(--mdSoluk); font-variant-numeric: tabular-nums; }
.mdSayfa .mdOzetCizgi { height: 1px; background: var(--mdIcCizgi); }
.mdSayfa .mdDagilim { display: flex; flex-direction: column; gap: 7px; }
.mdSayfa .mdDagilimSatir { display: flex; align-items: center; gap: 10px; }
.mdSayfa .mdDagilimYildiz { width: 30px; flex: none; display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--mdMetin); font-variant-numeric: tabular-nums; }
.mdSayfa .mdDagilimYildiz span { font-size: 9.5px; color: var(--mdSilik); }
.mdSayfa .mdDagilimBar { flex: 1; height: 6px; border-radius: 999px; background: var(--mdIcCizgi); overflow: hidden; }
.mdSayfa .mdDagilimDolu { height: 6px; border-radius: 999px; background: var(--mdVurgu); }
.mdSayfa .mdDagilimDolu.orta { background: var(--mdSoluk); }
.mdSayfa .mdDagilimDolu.dusuk { background: var(--mdSilik); }
.mdSayfa .mdDagilimAdet { width: 54px; flex: none; text-align: right; font-size: 11px; color: var(--mdSoluk); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Filtre cipleri + siralama
   -------------------------------------------------------------------------- */
.mdSayfa .mdFiltreKap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.mdSayfa .mdFiltreCipler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mdSayfa .mdCipDugme { height: 36px; padding: 0 15px; display: flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); font-size: 12.5px; font-weight: 700; color: var(--mdSoluk); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .18s, border-color .18s, color .18s; }
.mdSayfa .mdCipDugme:hover { color: var(--mdMetin); border-color: var(--mdCipAktifCizgi); }
.mdSayfa .mdCipDugme.aktif { background: var(--mdCipAktifZemin); border-color: var(--mdCipAktifCizgi); color: var(--mdMetin); }
.mdSayfa .mdFiltreAyrac { width: 1px; height: 22px; background: var(--mdCizgi); margin: 0 6px; }
/* Oyun filtresi (select2): kutu, cip hapiyla ayni olcu ve renklerde; acilir
   liste .mdOyunKap icine cizilir (dropdownParent) ki tema degiskenleri gecsin. */
.mdSayfa .mdOyunKap { position: relative; width: 220px; flex: none; }
.mdSayfa .mdOyunKap .select2-container--default .select2-selection--single { height: 36px; border-radius: 999px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); transition: border-color .18s; }
.mdSayfa .mdOyunKap .select2-container--default.select2-container--open .select2-selection--single,
.mdSayfa .mdOyunKap .select2-container--default .select2-selection--single:hover { border-color: var(--mdCipAktifCizgi); }
.mdSayfa .mdOyunKap .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 15px; padding-right: 32px; font-size: 12.5px; font-weight: 700; color: var(--mdMetin); }
.mdSayfa .mdOyunKap .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 8px; }
.mdSayfa .mdOyunKap .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--mdSoluk) transparent transparent transparent; }
.mdSayfa .mdOyunKap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--mdSoluk) transparent; }
.mdSayfa .mdOyunKap .select2-dropdown { background: var(--mdYuzey); border: 1px solid var(--mdCipAktifCizgi); border-radius: 10px; overflow: hidden; }
.mdSayfa .mdOyunKap .select2-search--dropdown { padding: 8px; }
.mdSayfa .mdOyunKap .select2-search--dropdown .select2-search__field { background: var(--mdIcYuzey); border: 1px solid var(--mdCizgi); border-radius: 8px; color: var(--mdMetin); font-size: 12.5px; padding: 6px 10px; outline: none; }
.mdSayfa .mdOyunKap .select2-results__option { font-size: 12.5px; font-weight: 600; color: var(--mdSoluk); padding: 8px 15px; }
.mdSayfa .mdOyunKap .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--mdCipAktifZemin); color: var(--mdMetin); }
.mdSayfa .mdOyunKap .select2-container--default .select2-results__option--selected { background: var(--mdVurguCip); color: var(--mdVurgu); }

.mdSayfa .mdSiralaKap { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.mdSayfa .mdSiralaEtiket { font-size: 11.5px; font-weight: 700; letter-spacing: .4px; color: var(--mdSilik); }
.mdSayfa .mdSiralaHap { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); border-radius: 999px; }
.mdSayfa .mdSiralaSecenek { height: 30px; padding: 0 14px; display: flex; align-items: center; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 600; color: var(--mdSoluk); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .18s, color .18s; }
.mdSayfa .mdSiralaSecenek.aktif { background: var(--mdCipAktifZemin); font-weight: 700; color: var(--mdMetin); }
.mdSayfa .mdSonucBilgi { font-size: 12px; color: var(--mdSilik); margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Yorum kartlari izgarasi
   -------------------------------------------------------------------------- */
.mdSayfa .mdIzgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mdSayfa .mdKart { display: flex; flex-direction: column; gap: 11px; padding: 15px 16px 14px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); border-radius: 12px; min-height: 232px; box-sizing: border-box; transition: border-color .18s; }
.mdSayfa .mdKart:hover { border-color: var(--mdVurguCizgi); }
.mdSayfa .mdKartUst { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mdSayfa .mdCip { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--mdVurguCip); font-size: 11px; font-weight: 800; color: var(--mdVurgu); }
.mdSayfa .mdCipYildiz { font-size: 10px; }
.mdSayfa .mdTur { flex: 1; min-width: 0; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--mdSilik); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdSayfa .mdTarih { font-size: 10px; color: var(--mdSoluk); font-variant-numeric: tabular-nums; }
.mdSayfa .mdMetinKap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }
.mdSayfa .mdMetin { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--mdMetin); text-wrap: pretty; word-break: break-word; }
.mdSayfa .mdKart.acik .mdMetin { -webkit-line-clamp: unset; overflow-y: auto; }
.mdSayfa .mdDevam { font-size: 11px; font-weight: 700; color: var(--mdVurgu); cursor: pointer; transition: color .18s; background: none; border: none; padding: 0; text-align: left; }
.mdSayfa .mdUrun { display: flex; align-items: center; gap: 10px; padding-top: 11px; border-top: 1px solid var(--mdIcCizgi); }
/* Linkli urun blogu: renkleri duz bloktan devralir, hover'da urun adi vurgulanir */
.mdSayfa a.mdUrunLink { text-decoration: none; color: inherit; }
.mdSayfa a.mdUrunLink:hover .mdUrunAd { color: var(--mdVurgu); }
.mdSayfa .mdUrunGorsel { width: 34px; height: 42px; flex: none; border-radius: 6px; object-fit: cover; display: block; }
.mdSayfa .mdUrunBilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mdSayfa .mdUrunAd { font-size: 11.5px; font-weight: 700; color: var(--mdMetin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdSayfa .mdUrunAlt { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 10px; color: var(--mdSoluk); }
.mdSayfa .mdUrunOyun { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdSayfa .mdUrunAyrac { width: 1px; height: 10px; background: var(--mdCizgi); flex: none; }
.mdSayfa .mdKisi { display: flex; align-items: center; gap: 6px; }
.mdSayfa .mdKisiTik { font-size: 9.5px; color: var(--mdVurgu); flex: none; }
.mdSayfa .mdKisiAd { flex: 1; min-width: 0; font-size: 10px; color: var(--mdSoluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   Bos durum + daha fazla yukle
   -------------------------------------------------------------------------- */
.mdSayfa .mdBos { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 54px 0 46px; background: var(--mdYuzey); border: 1px solid var(--mdCizgi); border-radius: 14px; text-align: center; }
.mdSayfa .mdBosIkon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mdCipAktifZemin); border: 1px solid var(--mdCizgi); font-size: 18px; color: var(--mdSilik); }
.mdSayfa .mdBosBaslik { font-size: 15px; font-weight: 700; color: var(--mdMetin); }
.mdSayfa .mdBosAlt { font-size: 12.5px; color: var(--mdSoluk); }
.mdSayfa .mdDahaKap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 24px; }
.mdSayfa .mdDahaDugme { padding: 13px 30px; background: var(--mdYuzey); border: 1px solid var(--mdCipAktifCizgi); border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--mdMetin); cursor: pointer; text-decoration: none; transition: background .18s, border-color .18s; }
.mdSayfa .mdDahaDugme:hover { background: var(--mdCipAktifZemin); border-color: var(--mdVurguCizgi); color: var(--mdMetin); }
.mdSayfa .mdDahaDugme:disabled { opacity: .6; cursor: default; }
.mdSayfa .mdDahaSayac { font-size: 11.5px; color: var(--mdSilik); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Duyarli kirilimlar
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) { .mdSayfa .mdIzgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1199px) { .mdSayfa .mdIzgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
    .mdSayfa .mdOzetIzgara { grid-template-columns: 1fr; }
    /* DIKKAT: temel kuraldaki flex-wrap:wrap, column yonle birlesince
       "column wrap" olur ve ogeler YENI KOLONLARA yayilip sayfayi yatay
       tasiriyordu (cip seridi 766px olculdu) — nowrap sart. */
    .mdSayfa .mdFiltreKap { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .mdSayfa .mdFiltreCipler { max-width: 100%; }
    .mdSayfa .mdOyunKap { width: 100%; }
    .mdSayfa .mdSiralaKap { justify-content: flex-end; margin-left: 0; max-width: 100%; }
}
@media (max-width: 767.98px) {
    .mdSayfa .mdBaslikH1 { font-size: 24px; }
    .mdSayfa .mdOzetKutu { padding: 16px; }
    /* Cipler tek satirda yatay kaydirilir; sarma dar ekranda cok yer yiyordu */
    .mdSayfa .mdFiltreCipler { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .mdSayfa .mdFiltreCipler::-webkit-scrollbar { display: none; }
    .mdSayfa .mdCipDugme { flex: none; }
}
@media (max-width: 575.98px) {
    .mdSayfa .mdIzgara { grid-template-columns: 1fr; }
    .mdSayfa .mdKart { min-height: 0; }
    .mdSayfa .mdOzetKart { padding: 14px; }
    .mdSayfa .mdOzetPuan { font-size: 28px; }
}