/* ==========================================================================
   "Müşteri Görüşleri" + statistics
   ========================================================================== */

.testimonials { padding: 40px 20px 0; background: #f7f7f7; }

.testimonials__title { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: 0; color: #1e1e20; }
.testimonials__title span { display: block; }
.testimonials__intro p { margin-top: 12px; max-width: 420px; font-size: 15px; line-height: 1.6; color: #2c2c2e; }

.testimonials__quote { position: relative; margin-top: 26px; padding-left: 44px; }
.testimonials__mark { position: absolute; left: 0; top: 2px; width: 30px; height: 30px; color: #d9701a; }
.testimonials__quote blockquote p { font-size: 15px; font-style: italic; line-height: 1.65; color: #26262a; }
.testimonials__quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: 14px; }
.testimonials__quote figcaption strong { font-weight: 700; }
.testimonials__quote figcaption span { color: #55555a; }
.testimonials__dots { display: flex; gap: 6px; margin-top: 16px; }
.testimonials__dots i { width: 7px; height: 7px; border-radius: 50%; background: #b9b9bb; }
.testimonials__dots i.is-active { background: #e0701a; }

.testimonials__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 30px -20px 0;
  padding: 26px 8px;
  text-align: center;
  background: linear-gradient(135deg, #dcdcdc 0%, #cfcfcf 100%);
}
.testimonials__stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; }
.testimonials__stats li + li { border-left: 1px solid rgba(0, 0, 0, .15); }
.testimonials__stats .icon { font-size: 34px; color: #d9601a; stroke-width: 1.5; }
.testimonials__stats strong { font-size: 20px; font-weight: 700; line-height: 1.2; }
.testimonials__stats span { font-size: 12px; line-height: 1.3; color: #2b2b2d; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 992px) {
  .testimonials { position: relative; margin-top: 2.4rem; height: 13.8rem; padding: 0; background: #f7f7f7; overflow: hidden; }

  .testimonials__intro { position: absolute; left: 5.7rem; top: 1.25rem; width: 14rem; }
  .testimonials__title { font-size: 1.7rem; line-height: 1.8rem; letter-spacing: 0; }
  .testimonials__intro p { margin-top: 1.7rem; max-width: 14rem; font-size: 1.05rem; line-height: 1.42rem; letter-spacing: 0; }

  .testimonials__quote { position: absolute; left: 21.2rem; top: 2.2rem; width: 41rem; margin: 0; padding: 0 0 0 4.8rem; }
  .testimonials__mark { left: 0; top: .2rem; width: 2.9rem; height: 2.9rem; }
  .testimonials__quote blockquote p { font-size: 1.1rem; line-height: 1.52rem; letter-spacing: 0; }
  .testimonials__quote figcaption { gap: 0 1.2rem; margin-top: 1.7rem; font-size: 1.06rem; line-height: 1.5rem; }
  .testimonials__quote figcaption span::before { content: '/'; margin-right: 1.2rem; color: #888; }
  .testimonials__dots { position: absolute; left: 53.6rem; top: 11.6rem; margin: 0; gap: .6rem; }
  .testimonials__dots i { width: .7rem; height: .7rem; }

  .testimonials__stats {
    position: absolute;
    left: 63rem;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 3.2rem 2rem 0 5.4rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    background:
      radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 45%),
      linear-gradient(135deg, #dadada 0%, #cdcdcd 100%);
    clip-path: polygon(3rem 0, 100% 0, 100% 100%, 0 100%);
  }
  .testimonials__stats li { gap: .35rem; padding: 0; }
  .testimonials__stats .icon { font-size: 3.4rem; margin-bottom: .6rem; }
  .testimonials__stats strong { font-size: 2.1rem; line-height: 2.6rem; letter-spacing: 0; }
  .testimonials__stats span { font-size: 1rem; line-height: 1.3rem; }
  .testimonials__stats li + li { border-left: 1px solid rgba(0, 0, 0, .18); height: 8.4rem; }

  /* orange corner accent at the bottom-right */
  .testimonials::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5.4rem;
    height: 2.4rem;
    background: linear-gradient(135deg, transparent 50%, #c4511c 50%, #e87a2a 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
}