/* =========================================================
   ULASAN PENGGUNA
   ========================================================= */

.review-section {
  padding: 4rem 0;
  background: #F7FAF9;
}

.review-header {
  text-align: center;
  margin-bottom: 2rem;
}

.review-header h2 {
  margin-top: .6rem;
  color: #268d5a;
}


/* =========================================================
   SLIDER
   ========================================================= */

.review-slider {
  display: flex;
  align-items: center;
  gap: 1rem;

  max-width: 1200px;
  margin: auto;
}

.review-window {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.review-track {
  display: flex;

  transition:
    transform .65s cubic-bezier(.22, 1, .36, 1);

  will-change: transform;
}


/* =========================================================
   REVIEW CARD
   ========================================================= */

.review-card {
  width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;

  padding: 1.5rem;

  background: #fff;

  border: 1px solid #E3ECE8;
  border-radius: 18px;

  box-shadow:
    0 5px 20px rgba(20, 60, 50, .05);

  /* Animasi */
  opacity: .55;

  transform:
    scale(.96)
    translateY(5px);

  filter: blur(.2px);

  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22, 1, .36, 1),
    filter .55s ease,
    box-shadow .4s ease;
}


/* Card aktif */

.review-card.review-active {
  opacity: 1;

  transform:
    scale(1)
    translateY(0);

  filter: blur(0);

  box-shadow:
    0 10px 30px rgba(20, 60, 50, .08);
}


/* Hover desktop */

.review-card.review-active:hover {
  transform:
    scale(1.01)
    translateY(-4px);

  box-shadow:
    0 15px 35px rgba(20, 60, 50, .10);
}


/* =========================================================
   INFORMASI PENGGUNA
   ========================================================= */

.review-user {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.review-avatar {
  width: 44px;
  height: 44px;

  flex: none;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #E5F2EC;
  color: #1F5E4B;

  transition:
    transform .4s ease;
}

.review-card.review-active
.review-avatar {
  transform: scale(1.05);
}

.review-avatar svg {
  width: 24px;
  height: 24px;
}

.review-user h3 {
  margin: 0;

  font-size: .95rem;

  color: #16324A;
}

.review-user span {
  display: block;

  font-size: .75rem;

  color: #8C9A9E;

  margin-top: .15rem;
}


/* =========================================================
   BINTANG
   ========================================================= */

.review-stars {
  margin-top: 1rem;

  color: #E6A528;

  letter-spacing: 2px;

  font-size: 1rem;

  transition:
    transform .45s ease;
}

.review-card.review-active
.review-stars {
  transform:
    translateY(-1px);
}


/* =========================================================
   ISI REVIEW
   ========================================================= */

.review-text {
  margin: .8rem 0 0;

  color: #52666B;

  font-size: .9rem;

  line-height: 1.7;
}


/* =========================================================
   TOMBOL PANAH
   ========================================================= */

.review-arrow {
  width: 40px;
  height: 40px;

  flex: none;

  border: 1px solid #DCE8E3;

  border-radius: 50%;

  background: #fff;

  color: #1F5E4B;

  font-size: 1.1rem;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.review-arrow:hover {
  background: #1F5E4B;

  color: #fff;

  border-color: #1F5E4B;

  transform: scale(1.08);

  box-shadow:
    0 6px 15px rgba(31, 94, 75, .15);
}

.review-arrow:active {
  transform: scale(.94);
}


/* =========================================================
   ANIMASI SAAT PINDAH
   ========================================================= */

.review-track.review-animating
.review-card {
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22, 1, .36, 1),
    filter .55s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .review-section {
    padding: 3rem 0;
  }


  .review-header {
    margin-bottom: 1.5rem;

    padding: 0 1rem;
  }


  .review-header h2 {
    font-size: 1.35rem;

    line-height: 1.3;
  }


  /* Slider */

  .review-slider {
    width: 100%;

    gap: .4rem;

    padding:
      0 .65rem;

    box-sizing: border-box;
  }


  .review-window {
    width: 100%;

    border-radius: 17px;
  }


  /* Card */

  .review-card {
    padding:
      1.15rem;

    border-radius: 16px;

    /* Jangan terlalu kecil di HP */
    min-height: 180px;

    transform:
      scale(.97)
      translateY(4px);
  }


  .review-card.review-active {
    transform:
      scale(1)
      translateY(0);
  }


  /* User */

  .review-user {
    gap: .65rem;
  }


  .review-avatar {
    width: 40px;
    height: 40px;
  }


  .review-avatar svg {
    width: 21px;
    height: 21px;
  }


  .review-user h3 {
    font-size: .86rem;
  }


  .review-user span {
    font-size: .68rem;
  }


  /* Stars */

  .review-stars {
    margin-top: .8rem;

    font-size: .9rem;

    letter-spacing: 1.5px;
  }


  /* Text */

  .review-text {
    margin-top: .65rem;

    font-size: .8rem;

    line-height: 1.65;
  }


  /* Arrow */

  .review-arrow {
    width: 34px;
    height: 34px;

    font-size: .85rem;
  }

}


/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media (max-width: 400px) {

  .review-slider {
    gap: .3rem;

    padding:
      0 .4rem;
  }


  .review-card {
    padding: 1rem;

    min-height: 175px;
  }


  .review-arrow {
    width: 31px;
    height: 31px;

    font-size: .78rem;
  }


  .review-user h3 {
    font-size: .82rem;
  }


  .review-text {
    font-size: .77rem;
  }

}


/* =========================================================
   AKSESIBILITAS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .review-track,
  .review-card,
  .review-avatar,
  .review-stars,
  .review-arrow {
    transition: none !important;
  }

}