/*
 * Yorumlar seridi. Duzen: sol ustte baslik + alt metin, altinda esit
 * genislikte kartlar, en altta ‹ · noktalar · › denetim satiri.
 *
 * @import ZORUNLU: ikas bir bolum icin ikas.config.json'da SADECE tek bir
 * CSS girisi kaydediyor (bu dosya). StarRating alt bileseninin CSS'i
 * buradan import edilmezse yildizlar canli sitede stilsiz cikar. Dogrulama:
 * derlenmis dist/t2dowgyg-pE5T1peS1G/styles.css icinde `kombos-star-rating`
 * gecmeli.
 */
/* Skipped (covered by shared chunk CSS): ../../sub-components/StarRating/styles.css */

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel {
  width: 100%;
}

/* RENKLI BANT: dikey dolgu TAM --mh-section-py, yarim ritim DEGIL.
 * Bolumun kendi zemin rengi var; bosluk bandin ICINDE, renk kenarinin
 * arkasinda kaliyor. Yarim degere dusurulurse icerik bant kenarina
 * yapisir. Bkz. global.css --mh-section-gap aciklamasi. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__container {
  padding: var(--mh-section-py) 1rem;

  /* Kart araligi TEK kaynak: hem kartlar arasi bosluk hem de kartin
   * flex-basis hesabi bunu okuyor, ikisi ayrisamaz. */
  --rc-gap: 1rem;
  --rc-cols: 1;
}

/* ===== Baslik satiri ===== */

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--mh-section-title-gap);
}

/* headline RICH_TEXT: editorde h2 + p birlikte girilebiliyor, ekran
 * goruntusundeki "baslik + alt metin" ikilisi tek prop'tan geliyor. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__intro h2 {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: var(--mh-primary);
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__intro p {
  margin: 0.5rem 0 0;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--mh-on-surface-variant);
}

/* "Tumunu Gor" desenindeki sessiz metin link — BannerProductRow ve
 * StoreShowcase ile ayni. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__cta {
  flex: 0 0 auto;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mh-primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__cta:hover {
  color: var(--mh-deep-navy);
}

/* ===== Kart seridi =====
 * Sayfalama JS'te scrollWidth/clientWidth ile olculuyor, bu yuzden serit
 * gercek bir kaydirma kabi olmak ZORUNDA (grid degil). Kaydirma cubugu
 * gizli; dokunmatikte parmakla, masaustunde oklarla ilerliyor. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__track {
  display: flex;
  gap: var(--rc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__track::-webkit-scrollbar {
  display: none;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card {
  flex: 0 0
    calc((100% - (var(--rc-cols) - 1) * var(--rc-gap)) / var(--rc-cols));
  box-sizing: border-box;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 15rem;
  padding: 1.5rem;
  border: 1px solid var(--mh-outline-subtle);
  border-radius: 12px;   /* TASARIM-DILI: buyuk kart */
  background-color: var(--mh-surface);
}

/* Veri istemci tarafinda geldigi icin ilk boyamada kart yok. Iskelet
 * kartlar bolumun yuksekligini bastan ayirir; yorumlar dusunce sayfa
 * asagi kaymaz. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card--skeleton {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--mh-outline-variant) 30%, transparent);
  background-color: transparent;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Kucuk urun gorseli — 2:3, KARE DEGIL. TASARIM-DILI: "Urun gorseli: 2:3
 * oran (musterinin gorselleri 1200x1800). Kare KULLANMA." Kucuk boyutta da
 * ayni oran korunuyor, aksi halde kadraj ortadan kirpiliyor.
 * Genislik 2.5rem -> yukseklik 3.75rem, iki satirlik baslikla ayni boy. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-thumb {
  flex: 0 0 auto;
  display: block;
  width: 2.5rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--mh-surface-variant);
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* flex: 1 + min-width: 0 — uzun urun adi yildizlari kartin disina itmesin,
 * satir kirpma (line-clamp) calissin. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--mh-primary);
  /* Uzun urun adlari kartlari farkli yuksekliklere itmesin. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Urun adi urun sayfasina gidiyor; link RENK DEGISTIRMIYOR, sadece
 * hover'da alt cizgi aliyor — baslik once baslik gibi okunsun. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-link {
  color: inherit;
  text-decoration: none;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Baslik altindaki kisa altin cizgi (ekran goruntusundeki detay). */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-rule {
  display: block;
  width: 2rem;
  height: 3px;
  border-radius: 999px;
  background-color: var(--mh-star-gold);
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-comment {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--mh-on-surface);
}

/* margin-top: auto — yorum uzunlugu ne olursa olsun isim kartin ALTINA
 * yaslanir, bir satirdaki tum kartlarda ayni hizada durur. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__card-author {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--mh-primary);
}

/* Yildizlar: TASARIM-DILI "dolu --mh-star-gold". StarRating alt bileseni
 * dolu yildizi --mh-on-surface ile ciziyor (temadaki diger kullanimlarini
 * bozmamak icin ORAYA dokunulmadi); renk burada, bolum kapsaminda
 * geciliyor. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel .kombos-star-rating__star--filled {
  color: var(--mh-star-gold);
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel .kombos-star-rating {
  flex: 0 0 auto;
}

/* ===== Denetim satiri: ok — noktalar — ok ===== */

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--mh-section-title-gap);
}

/* Oklar DAIRE: ekran goruntusunde yuvarlatilmis kare duruyor ama temadaki
 * tum serit oklari (ProductSlider, StoreShowcase, CategoryStrip) daire ve
 * TASARIM-DILI ok butonu icin %50 diyor. Site tarziyla tutarlilik
 * ekran goruntusune birebir sadakatin onune alindi. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--mh-outline-subtle);
  border-radius: 50%;
  background-color: transparent;
  color: var(--mh-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__arrow:hover {
  background-color: var(--mh-primary);
  color: var(--mh-on-primary);
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__dot {
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--mh-outline-variant);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

/* Aktif nokta genisleyip altin hap oluyor — ekran goruntusundeki desen. */
.cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__dot--active {
  width: 1.25rem;
  background-color: var(--mh-star-gold);
}

/* ===== Tablet ===== */
@media (min-width: 768px) {
  .cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__container {
    padding: var(--mh-section-py) 1.5rem;
    --rc-gap: 1.5rem;
    --rc-cols: 2;
  }

  .cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__intro h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ===== Masaustu ===== */
@media (min-width: 1024px) {
  .cc_t2dowgyg_pE5T1peS1G .mh-review-carousel__container {
    /* Sutun sayisi editordeki desktopColumns prop'undan geliyor;
     * --rc-desktop-cols'u bilesen inline yaziyor, yedegi 3. */
    --rc-cols: var(--rc-desktop-cols, 3);
  }
}