/* ==========================================================================
   TUR YORUMLARI
   Puan ozeti (ortalama + dagilim) ve yorum listesi
   ========================================================================== */

/* -- Yildizlar --------------------------------------------------------------
   Isaretlemeyi components/ikon.php icindeki yildizlar() uretir:
   <span class="yildizlar"> icinde dolu yildizlar ve .bos sinifli bos yildizlar. */
.yildizlar { display: inline-flex; align-items: center; gap: 1px; color: var(--star); }
.yildizlar .bos { color: var(--line); }
.yld { display: inline-flex; align-items: center; }


/* -- Puan ozeti ------------------------------------------------------------- */
.yrm__ozt { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
            align-items: center; gap: var(--s6);
            padding: var(--s5); margin-bottom: var(--s5);
            background: var(--mist); border-radius: var(--r3); }

.yrm__puan { text-align: center; padding-right: var(--s5); border-right: 1px solid var(--line); }
.yrm__puan b { display: block; font-size: 2.5rem; font-weight: var(--fw-800);
               line-height: 1; letter-spacing: var(--ls-tt); color: var(--tx); }
.yrm__puan .yld { margin-top: var(--s2); }
.yrm__puan small { display: block; margin-top: 4px; font-size: var(--fs-3xs); color: var(--tx-mute); }

.yrm__dag { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yrm__cbk { display: grid; grid-template-columns: 38px minmax(0,1fr) 24px;
            align-items: center; gap: var(--s3); }
.yrm__cbk-e { display: inline-flex; align-items: center; gap: 3px;
              font-size: 10px; font-weight: var(--fw-600); color: var(--tx-mute); }
.yrm__cbk-e svg { color: var(--star); }
.yrm__cbk-c { height: 7px; background: var(--mist-2); border-radius: var(--rp); overflow: hidden; }
.yrm__cbk-c i { display: block; height: 100%; background: var(--star);
                border-radius: var(--rp); transition: width var(--t3); }
.yrm__cbk-n { font-size: 10px; color: var(--tx-faint); text-align: right;
              font-variant-numeric: tabular-nums; }

.yrm__eyl { text-align: center; padding-left: var(--s5); border-left: 1px solid var(--line); }
.yrm__eyl p { margin-bottom: var(--s3); font-size: var(--fs-3xs); color: var(--tx-mute); }

@media (max-width: 860px) {
  .yrm__ozt { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .yrm__puan { padding-right: 0; padding-bottom: var(--s4);
               border-right: 0; border-bottom: 1px solid var(--line); }
  .yrm__eyl { padding-left: 0; padding-top: var(--s4);
              border-left: 0; border-top: 1px solid var(--line); }
}


/* -- Yorum listesi ---------------------------------------------------------- */
.yrm__ls { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }

.yrm { padding: var(--s5); background: #FFFFFF;
       border: 1px solid var(--line); border-radius: var(--r3);
       transition: border-color var(--t2), box-shadow var(--t2); }
.yrm:hover { border-color: var(--brand-200); box-shadow: var(--sh1); }

/* Ilk uc yorum gorunur; gerisi butonla acilir */
.js .yrm--fazla { display: none; }
.js .yrm__ls.acik .yrm--fazla { display: block; animation: yrm-gir .3s var(--e); }
@keyframes yrm-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .yrm__ls.acik .yrm--fazla { animation: none; } }

.yrm__bas { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.yrm__av { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 40px; height: 40px; font-size: var(--fs-h4); font-weight: var(--fw-800);
           color: var(--brand-700); background: var(--brand-50); border-radius: var(--rp); }
.yrm__kim { flex: 1; min-width: 0; }
.yrm__kim b { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx); }
.yrm__kim small { display: block; margin-top: 1px; font-size: 10px; color: var(--tx-faint); }
.yrm__yld { flex: none; }

.yrm__mtn { font-size: var(--fs-2xs); line-height: 1.75; color: var(--tx-soft); }

/* Acente yaniti */
.yrm__ynt { margin-top: var(--s4); padding: var(--s4);
            background: var(--mist); border-left: 3px solid var(--brand); border-radius: var(--r1); }
.yrm__ynt-e { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px;
              font-size: 10px; font-weight: var(--fw-700); letter-spacing: var(--ls-cap);
              text-transform: uppercase; color: var(--brand-700); }
.yrm__ynt p { font-size: var(--fs-3xs); line-height: 1.7; color: var(--tx-mute); }

.yrm__daha { margin-top: var(--s4); text-align: center; }
.yrm__daha svg { transition: transform var(--t2); }
.yrm__ls.acik + .yrm__daha svg { transform: rotate(180deg); }

/* Sekme basligindaki yorum sayisi */
.skm__n { display: inline-flex; align-items: center; justify-content: center;
          min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
          font-size: 10px; font-style: normal; font-weight: var(--fw-800);
          color: var(--tx-mute); background: var(--mist-2); border-radius: var(--rp); }
.skm__b.on .skm__n { color: #FFFFFF; background: var(--brand); }


/* -- Bos durum -------------------------------------------------------------- */
.yrm__yok { display: flex; flex-direction: column; align-items: center; gap: var(--s3);
            padding: var(--s9) var(--s5); text-align: center;
            background: var(--mist); border-radius: var(--r3); }
.yrm__yok p { font-size: var(--fs-2xs); color: var(--tx-mute); max-width: 46ch; }
.yrm__yok b { color: var(--tx); }