/* Auto-generated CSS for CompanyId: cae157d9-6552-4534-8e22-dfd814254b9b at 2025-08-16T00:51:04.0893668Z */

/* --- Styles for Review / ReviewBottom --- */
/* ======================================================
   TTC - Değerlendirme Sayfalama Bileşeni
   ====================================================== */

.ttc-review-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 32px 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  gap: 8px;
  flex-wrap: wrap;
}

.ttc-review-pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background-color: #ffffff;
  color: #343a40;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ttc-review-pagination li:not(.disabled):not(.current):hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

.ttc-review-pagination li.current {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
  cursor: default;
  font-weight: 600;
}

.ttc-review-pagination li.disabled {
  background-color: #f8f9fa;
  color: #adb5bd;
  cursor: not-allowed;
  pointer-events: none;
}

.ttc-review-pagination li svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* --- Styles for Review / ReviewBox --- */
.ttc-comment-box {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
      max-width: 800px;
    margin: 16px auto;
}

.ttc-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ttc-comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #111111;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.ttc-comment-meta {
  display: flex;
  flex-direction: column;
}

.ttc-comment-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  margin: 0;
}

.ttc-comment-rating {
  font-size: 18px;
  color: #ffc107;
  line-height: 1;
  margin-top: 4px;
}

.ttc-comment-body {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.ttc-comment-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

.ttc-comment-footer {
  margin-top: 12px;
  text-align: right;
}

.ttc-comment-date {
  font-size: 13px;
  color: #757575;
}

/* --- Styles for Review / ReviewTop --- */
.ttc-review-summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.ttc-summary-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 200px;
  text-align: center;
}

.ttc-overview-average {
  font-size: 48px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

.ttc-overview-stars {
  font-size: 22px;
  color: #ffc107;
  margin-top: 8px;
}

.ttc-overview-total {
  font-size: 14px;
  color: #757575;
  margin-top: 8px;
}

.ttc-summary-breakdown {
  flex-grow: 1;
  width: 100%;
}

.ttc-rating-breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ttc-breakdown-label {
  font-size: 14px;
  color: #333;
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
}

.ttc-breakdown-label .ttc-star-icon {
  font-size: 16px;
  color: #ffc107;
  margin-left: 2px;
}

.ttc-progress-bar {
  flex-grow: 1;
  height: 10px;
  background-color: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
}

.ttc-progress-fill {
  height: 100%;
  background-color: #ffc107;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

.ttc-breakdown-count {
  font-size: 14px;
  color: #757575;
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ttc-review-summary {
    flex-direction: column;
    padding: 20px;
    gap: 24px;
  }
  .ttc-summary-overview {
    width: 100%;
  }
}

/* --- Styles for Review / ReviewRow --- */
/* ======================================================
   TTC - Ürün Değerlendirme Bileşeni (Yıldızlar)
   ====================================================== */

/* --- ÖZELLEŞTİRME ALANI --- */
/* Değişiklik yapmak için aşağıdaki değerleri düzenleyin */
.ttc-star-rating {
  --ttc-star-size: 20px;           /* Yıldızların boyutu */
  --ttc-gap-between: 8px;          /* Yıldızlar ve metin arasındaki boşluk */
  --ttc-text-color: #333;          /* Puan ve sayı metin rengi */
  --ttc-count-color: #757575;       /* Yorum sayısı metin rengi */
}
/* Not: Yıldız renkleri aşağıdaki SVG kodları içindeki 'fill' değerinden değiştirilir. */
/* ------------------------- */


/* Ana taşıyıcı */
.ttc-star-rating {
  display: flex;
  align-items: center;
  gap: var(--ttc-gap-between);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Yıldızların görselini oluşturan bölüm */
.ttc-stars-container {
  position: relative;
  display: inline-block;
  height: var(--ttc-star-size);
  width: calc(var(--ttc-star-size)*5); /* 5 yıldız genişliği */
}

/* Arkaplan ve önplan yıldız katmanları için ortak stiller */
.ttc-stars-background,
.ttc-stars-foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: repeat-x;
  background-size: var(--ttc-star-size);
}

/* Arka katman: Gri (boş) yıldızları gösterir */
/* Renk değiştirmek için SVG kodundaki fill='%23e0e0e0' değerini değiştirin. (%23 -> #) */
.ttc-stars-background {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3e%3cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3e%3c/svg%3e");
}

/* Ön katman: Renkli (dolu) yıldızları gösterir */
/* Renk değiştirmek için SVG kodundaki fill='%23ffc107' değerini değiştirin. (%23 -> #) */
.ttc-stars-foreground {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc107'%3e%3cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3e%3c/svg%3e");
  width: 0%; 
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

/* Puan ve yorum sayısını içeren metin bölümü */
.ttc-rating-text {
  display: flex;
  align-items: baseline;
  color: var(--ttc-text-color);
  font-size: 14px;
}

.ttc-rating-avg {
  font-weight: bold;
  margin-right: 4px;
}

.ttc-rating-count {
  font-size: 12px;
  color: var(--ttc-count-color);
}