@charset "utf-8";
/* CSS Document */
html {scroll-behavior: smooth;}
body {background-color: #FFF8E7}
header {position: relative;align-content: center; display: flex;background: #FFCD4A; width: 100%;margin-top: -8px;
margin-left: -8px;padding-right: 16px; padding-bottom: 130px;z-index: 1}
.pcornban{position: absolute;align-content: center; max-width: 100%;z-index: 2;}
.logo {position: absolute; z-index: 3; margin-top: 25px}
.atas {font-family: "Mochiy Pop P One", sans-serif; color: #FF7A00; text-shadow: 2px 2px 0 #7DD0FF,4px 4px 0 rgba(0, 0, 0, 0.15); text-align: center;margin-top: 20px}
.bawah {font-family: "Mochiy Pop P One", sans-serif;color:  #FFC219; text-shadow: 2px 2px 0 #7DD0FF,4px 4px 0 rgba(0, 0, 0, 0.15); text-align: center;line-height: 0.6}
.fullpop {width: 100%;}
.brown {background-color: #A25C0B; width: 100%;margin-top: -200px;
margin-left: -8px;padding-right: 16px;padding-bottom: 90px}
.desc {padding-top: 170px; margin-right: -10px; font-family: "Mochiy Pop P One", sans-serif;color: #FFCD4A; font-size: 26px; text-align: center}
.find {font-family: "Poppins", sans-serif; text-shadow: 2px 2px 0 #5A3A1E,4px 4px 0 rgba(0, 0, 0, 0.15);display: inline-block;background: #ff7a00;color: #fff;text-decoration: none;padding: 15px 30px;border-radius: 999px;font-size: 35px;box-shadow: 0 6px 0 rgba(0,0,0,0.2);margin-left: 100px}
.cert {background-color: #FFCD4A;width: 100%; margin-left: -9px;padding-left: 20px; padding-top: 10px;}
.happy {margin-left: -10px;margin-bottom: -20px}
.dua {background-color: #FFFFFF;padding-top: 20px}
.product {display: flex; align-items: center;gap:12px}
.best {float: left; width: 20%;}
.customer {font-family: "Poppins", sans-serif;font-weight: 600;font-size: 25px;color: #583326}
.box1 {background-color: #FFD75A;padding: 20px;border-radius: 28px;margin-top: 10px}
.popbox1 {width: 56%; float: left;margin-top: 20px; margin-left: -20px;margin-right: 60px;transform: rotate(-12deg) translateY(6px);
  transform-origin: center;filter: drop-shadow(12px 18px 18px rgba(0,0,0,0.25));}
.caramel {color: #583326;font-family: "Mochiy Pop P One", sans-serif; font-size: 20px}
.gram1 {color: #583326;font-family: "Poppins", sans-serif;font-weight: 500;font-size: 20px}
.harga1 {color: #583326;font-family: "Poppins", sans-serif;font-weight: 600;font-size: 20px}
.sweet {color: #583326;font-family: "Poppins", sans-serif;font-weight: 500;margin-bottom: -10px;font-size: 20px}
.buy  {font-family: "Poppins", sans-serif; text-shadow: 2px 2px 0 #5A3A1E,4px 4px 0 rgba(0, 0, 0, 0.15);display: inline-block;background: #ff7a00;color: #fff;text-decoration: none;padding: 5px 25px;border-radius: 999px;font-size: 25px;box-shadow: 0 6px 0 rgba(0,0,0,0.2);margin-left: 200px; margin-top: 10px}
.special {font-family: "Poppins", sans-serif;font-weight: 600;font-size: 25px;color: #583326; text-align: center}
.box2 {background-color: #3D621A;padding: 20px;border-radius: 28px;margin-top: 10px}
.durian {color: #FFFFFF;font-family: "Mochiy Pop P One", sans-serif; font-size: 20px}
.gram2 {font-family: "Poppins", sans-serif;font-weight: 500;font-size: 20px;color: #FFFFFF}
.harga2 {font-family: "Poppins", sans-serif;font-weight: 600;font-size: 20px;color: #FFFFFF}
.bold {font-family: "Poppins", sans-serif;font-weight: 500;margin-bottom: -10px;font-size: 20px;color: #FFFFFF}
.other {font-family: "Poppins", sans-serif;font-weight: 600;font-size: 25px;color: #583326; text-align: center}
.study {margin-left: -10px;margin-bottom: -20px}

.review-carousel{
  width: 520px;              /* change if you want */
  max-width: 92vw;
  height: 190px;             /* one slide height */
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 14px 24px rgba(0,0,0,0.25);
  background: #f7edd9;
}

/* the moving part */
.review-track{
  height: 100%;
  transition: transform 450ms ease;
}

/* each slide is an image that fills the carousel area */
.review-slide{
  width: 100%;
  height: 190px;             /* MUST match .review-carousel height */
  object-fit: cover;         /* use contain if you don't want cropping */
  display: block;
}

/* Optional: "back card" behind (like your mockup) */
.review-carousel::before{
  content:"";
  position:absolute;
  inset: 18px -18px -18px 18px;
  background:#ffffff;
  z-index:-1;
  box-shadow: 0 14px 24px rgba(0,0,0,0.18);
  border-radius: 10px;
}