/* =========================
 Hepsi Medikal - Comments (Clean SCSS)
 Scope: #product-comments-list.hmc
 ========================= */
#product-comments-list.hmc {
  /* ---- Theme tokens ---- */
  --c-bg: #ffffff;
  --c-card: #ffffff;
  --c-border: #eceef1;
  --c-muted: #6b7280;
  --c-text: #111827;
  --c-primary: #0b6ea9;
  --c-star-base: #cbd5e1;
  /* boş yıldız */
  --c-star-fill: #f59e0b;
  /* dolu yıldız */
  --radius: 16px;
  --gap: 16px;
  color: var(--c-text);
  /* =====================
   RESET (önceki yamaları kapat)
   ===================== */ }
  #product-comments-list.hmc .comments-stars, #product-comments-list.hmc .comments-stars .stars-fill {
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important; }
  #product-comments-list.hmc .comments-stars::before, #product-comments-list.hmc .comments-stars .stars-fill::before {
    content: none !important;
    /* Eski “i {display:none !important;}” kurallarını geri al */ }
  #product-comments-list.hmc .comments-stars i {
    display: block !important;
    /* =====================
     TOPBAR
     ===================== */ }
  #product-comments-list.hmc .hmc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 8px; }
    #product-comments-list.hmc .hmc-topbar .hmc-title {
      font-size: 20px;
      font-weight: 700; }
    #product-comments-list.hmc .hmc-topbar .hmc-title-count {
      margin-left: 6px;
      color: var(--c-muted);
      font-weight: 600; }
    #product-comments-list.hmc .hmc-topbar .hmc-actions {
      display: flex;
      gap: 8px;
      align-items: center; }
    #product-comments-list.hmc .hmc-topbar .hmc-sort {
      min-width: 170px;
      height: 44px; }
    #product-comments-list.hmc .hmc-topbar .hmc-add-btn {
      height: 44px;
      padding: 0 14px;
      border-radius: var(--radius);
      /* =====================
       GRID LAYOUT
       ===================== */ }
  #product-comments-list.hmc .hmc-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--gap);
    /* =====================
     ASIDE (Özet)
     ===================== */ }
  #product-comments-list.hmc .hmc-aside {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px;
    align-self: start; }
    #product-comments-list.hmc .hmc-aside .hmc-score-value {
      font-size: 44px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.5px; }
    #product-comments-list.hmc .hmc-aside .hmc-score-label {
      font-size: 13px;
      color: var(--c-muted);
      margin-bottom: 6px;
      /* Histogram */ }
    #product-comments-list.hmc .hmc-aside .hmc-histo {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 10px 0 6px; }
    #product-comments-list.hmc .hmc-aside .hmc-histo-row {
      display: grid;
      grid-template-columns: 56px 1fr 42px;
      gap: 8px;
      align-items: center; }
    #product-comments-list.hmc .hmc-aside .hmc-histo-star {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: 600;
      color: #1f2937; }
    #product-comments-list.hmc .hmc-aside .hmc-histo-bar {
      height: 8px;
      background: #eef2f6;
      border-radius: 999px;
      overflow: hidden; }
    #product-comments-list.hmc .hmc-aside .hmc-histo-fill {
      display: block;
      height: 100%;
      background: #f5c002;
      /* Yıldız filtresi */ }
    #product-comments-list.hmc .hmc-aside .hmc-filter {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px; }
    #product-comments-list.hmc .hmc-aside .hmc-filter .btn {
      background: #fff;
      border: 1px solid var(--c-border);
      border-radius: 999px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 36px; }
    #product-comments-list.hmc .hmc-aside .hmc-chip {
      background: #f3f4f6;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--c-muted); }
    #product-comments-list.hmc .hmc-aside .hmc-filter .btn.active {
      outline: 2px solid rgba(11, 110, 169, 0.18);
      /* =====================
       SEARCH
       ===================== */ }
  #product-comments-list.hmc .hmc-search {
    margin-bottom: 8px; }
  #product-comments-list.hmc .hmc-search .form-control {
    height: 44px; }
  #product-comments-list.hmc .hmc-subtitle {
    margin-top: 8px;
    color: var(--c-muted);
    font-size: 14px;
    /* =====================
     LIST
     ===================== */ }
  #product-comments-list.hmc .hmc-item {
    display: flex;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04); }
  #product-comments-list.hmc .hmc-item + .hmc-item {
    margin-top: 12px; }
  #product-comments-list.hmc .hmc-item-left {
    display: flex;
    gap: 12px;
    padding: 16px;
    flex: 1; }
  #product-comments-list.hmc .comments-list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    font-weight: 700;
    color: #374151; }
  #product-comments-list.hmc .hmc-item-detail {
    width: 100%; }
  #product-comments-list.hmc .hmc-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; }
  #product-comments-list.hmc .hmc-name {
    font-weight: 700;
    margin-right: 8px;
    max-width: 40ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  #product-comments-list.hmc .hmc-rate {
    display: flex;
    align-items: center;
    gap: 8px; }
  #product-comments-list.hmc .hmc-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-muted); }
  #product-comments-list.hmc .hmc-badge {
    margin-left: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px; }
  #product-comments-list.hmc .hmc-item-body .hmc-comment {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #374151; }
  #product-comments-list.hmc .hmc-images {
    display: flex;
    gap: 8px;
    margin-top: 10px; }
  #product-comments-list.hmc .hmc-images a {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center; }
  #product-comments-list.hmc .hmc-images img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  #product-comments-list.hmc .hmc-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-left: 1px solid var(--c-border); }
    #product-comments-list.hmc .hmc-item-right .btn {
      padding: 6px 10px;
      border: 1px solid var(--c-border);
      background: #fff;
      border-radius: 10px;
      transition: transform 0.08s ease, box-shadow 0.12s ease; }
    #product-comments-list.hmc .hmc-item-right .btn:hover {
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
      transform: translateY(-1px);
      /* =====================
       PAGINATION
       ===================== */ }
  #product-comments-list.hmc .hmc-pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* ============================================================
     STARS (final) — absolute positioned, gap kontrollü, piksel kilitli
     Kullanım: .comments-stars içinde 5 adet <i> ve içinde .stars-fill içinde 5 adet <i> vardır.
     ============================================================ */ }
  #product-comments-list.hmc .comments-stars {
    --star: 16px;
    /* icon boyutu */
    --gap: 2px;
    /* yıldızlar arası boşluk */
    position: relative;
    width: calc(5*var(--star) + 4*var(--gap));
    height: var(--star);
    font-size: var(--star);
    /* themify icon boyutu */
    line-height: var(--star);
    color: var(--c-star-base);
    /* alt katman rengi */
    /* Taban (gri) ve üst (turuncu) yıldız kutuları */ }
  #product-comments-list.hmc .comments-stars > i, #product-comments-list.hmc .comments-stars .stars-fill > i {
    position: absolute;
    top: 0;
    width: var(--star);
    height: var(--star);
    line-height: var(--star);
    margin: 0;
    padding: 0;
    text-align: center;
    /* Üst dolgu: % genişlik ile kırpılır */ }
  #product-comments-list.hmc .comments-stars .stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--c-star-fill);
    will-change: width;
    transform: translateZ(0);
    /* subpixel antialias azaltır */
    /* 5 yıldızın konumları (gap dahil) */ }
  #product-comments-list.hmc .comments-stars > i:nth-of-type(1), #product-comments-list.hmc .comments-stars .stars-fill > i:nth-of-type(1) {
    left: calc(0*(var(--star) + var(--gap))); }
  #product-comments-list.hmc .comments-stars > i:nth-of-type(2), #product-comments-list.hmc .comments-stars .stars-fill > i:nth-of-type(2) {
    left: calc(1*(var(--star) + var(--gap))); }
  #product-comments-list.hmc .comments-stars > i:nth-of-type(3), #product-comments-list.hmc .comments-stars .stars-fill > i:nth-of-type(3) {
    left: calc(2*(var(--star) + var(--gap))); }
  #product-comments-list.hmc .comments-stars > i:nth-of-type(4), #product-comments-list.hmc .comments-stars .stars-fill > i:nth-of-type(4) {
    left: calc(3*(var(--star) + var(--gap))); }
  #product-comments-list.hmc .comments-stars > i:nth-of-type(5), #product-comments-list.hmc .comments-stars .stars-fill > i:nth-of-type(5) {
    left: calc(4*(var(--star) + var(--gap)));
    /* Boyut varyantları (tam px -> net görünüm) */ }
  #product-comments-list.hmc .hmc-aside .hmc-stars {
    --star: 20px;
    --gap: 2px;
    /* özet */ }
  #product-comments-list.hmc .hmc-item .comments-stars {
    --star: 16px;
    --gap: 2px;
    /* liste */ }
  #product-comments-list.hmc .hmc-filter .comments-stars {
    --star: 16px;
    --gap: 2px;
    /* pill */
    /* =====================
     RESPONSIVE
     ===================== */ }
  @media (max-width: 992px) {
    #product-comments-list.hmc .hmc-grid {
      grid-template-columns: 1fr; }
    #product-comments-list.hmc .hmc-item {
      flex-direction: column; }
    #product-comments-list.hmc .hmc-item-right {
      border-left: 0;
      border-top: 1px solid var(--c-border); } }

/* --- Comments: yatay taşmayı kesin kapat --- */
#product-comments-list.hmc {
  /* Kapsayıcı ve ana katmanlar daralabilsin, taşırmasın */
  overflow-x: hidden; }
  #product-comments-list.hmc .hmc-grid, #product-comments-list.hmc .hmc-main, #product-comments-list.hmc .comments-list, #product-comments-list.hmc .hmc-item, #product-comments-list.hmc .hmc-item-left, #product-comments-list.hmc .hmc-item-right, #product-comments-list.hmc .hmc-item-detail, #product-comments-list.hmc .hmc-topbar, #product-comments-list.hmc .hmc-actions, #product-comments-list.hmc .hmc-search form {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Arama satırında input esnesin, buton taşırmasın */ }
  #product-comments-list.hmc .hmc-search form {
    display: flex; }
  #product-comments-list.hmc .hmc-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    /* Oy verme satırı her genişlikte kırılabilsin */ }
  #product-comments-list.hmc .hmc-item-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; }
  #product-comments-list.hmc .hmc-item-right .d-md-none {
    flex: 1 0 100%;
    white-space: normal;
    /* Temadan gelebilecek nowrap'ları etkisizleştir */ }
  #product-comments-list.hmc .text-nowrap {
    white-space: normal !important;
    /* Uzun içerikleri mutlaka kır */ }
  #product-comments-list.hmc .hmc-name, #product-comments-list.hmc .hmc-comment, #product-comments-list.hmc .hmc-badge, #product-comments-list.hmc .comments-pagination a {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    /* Sayfalama da genişlemeye sebep olmasın */ }
  #product-comments-list.hmc .comments-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%; }

/* === Scrollable pagination (mobil + desktop) === */
#product-comments-list .hmc-pagination {
  display: block !important;
  /* flex'i ez */
  white-space: nowrap;
  /* tek satır */
  overflow-x: auto;
  /* yatay kaydır */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* iOS momentum */
  padding: 8px 2px 10px;
  margin: 0 -8px;
  /* kenardan kaydırmayı kolaylaştır */
  scrollbar-width: none;
  /* Firefox scrollbar gizle */ }

#product-comments-list .hmc-pagination::-webkit-scrollbar {
  display: none; }

#product-comments-list .hmc-pagination > a {
  display: inline-block !important;
  /* bloklarımız tek satırda */
  flex: none !important;
  margin-right: 8px;
  white-space: nowrap; }