/* ===== REVIEW CARD START ===== */
.review-card{
  background:var(--bs-body-bg,#fff);
  color:var(--bs-body-color,#111827);
  border:1px solid var(--bs-border-color,#e5e7eb);
  padding:20px;
  border-radius:16px;
  margin:25px 0;
  font-family:Inter,system-ui;
  max-width:1200px;
  transition:.25s;
}



/* HEADER */
.review-head{
  display:flex;
  align-items:center;
  gap:15px;
}

.review-head img{
  width:65px;
  border-radius:12px;
  border:1px solid var(--bs-border-color);
}

.review-title h3{margin:0;font-size:18px;}
.review-title span{font-size:12px;color:#64748b;}

/* RATING */
.review-rating{margin-left:auto;text-align:right;}
.review-rating strong{font-size:22px;}
.review-rating small{font-size:12px;color:#f59e0b;}

/* DESC */
.review-desc{font-size:14px;margin:12px 0;color:#64748b;}

/* BARS */
.review-row{margin-bottom:12px;}
.review-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
.review-bar{
  height:6px;
  background:rgba(0,0,0,0.08);
  border-radius:999px;
  overflow:hidden;
}
.review-bar div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--color),#4ade80);
}

/* 🔥 PROS CONS */
.review-proscons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:15px;
}

.pros, .cons{
  padding:12px;
  border-radius:12px;
  font-size:13px;
}

.pros{
  background:rgba(34,197,94,0.1);
  border:1px solid #22c55e;
}

.cons{
  background:rgba(239,68,68,0.1);
  border:1px solid #ef4444;
}

.pros h4{margin:0 0 8px;color:#16a34a;}
.cons h4{margin:0 0 8px;color:#dc2626;}

/* 🔁 ICON LIST */
.pros ul, .cons ul{
  margin:0;
  padding:0;
  list-style:none;
}

.pros li, .cons li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
}

.pros li::before{
  content:"✔";
  color:#16a34a;
  font-weight:bold;
}

.cons li::before{
  content:"✖";
  color:#dc2626;
  font-weight:bold;
}

/* META */
.review-meta{
  font-size:12px;
  margin-top:12px;
  color:#16a34a;
}

/* CTA */
.review-footer {
  text-align: right;
  margin-top: 15px;
}

.review-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e11d2e, #ff4d4f);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  transition: all 0.35s ease;
  box-shadow: 0 4px 12px rgba(225, 29, 46, 0.3);
  position: relative;
  overflow: hidden;
}

/* Hover effect */
.review-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(225, 29, 46, 0.5);
  color: #fff; /* 🔥 text tetap putih */
}

/* Active (klik) */
.review-btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 10px rgba(225, 29, 46, 0.3);
}

/* Shine animation */
.review-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition: all 0.6s ease;
}

.review-btn:hover::before {
  left: 100%;
}
/* DARK MODE */
@media(prefers-color-scheme:dark){
.review-card{background:#0f172a;color:#f1f5f9;border-color:#1e293b;}
.review-desc{color:#94a3b8;}
.review-bar{background:rgba(255,255,255,0.08);}
}

/* MOBILE */
@media(max-width:768px){
.review-head{flex-direction:column;align-items:flex-start;}
.review-rating{margin-left:0;}
.review-proscons{grid-template-columns:1fr;}
}
/* ===== REVIEW CARD END ===== */


/* ===== VIDEO RESPONSIVE START ===== */
.video-lazy {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
    margin-bottom:14px;
}
.video-thumb {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Play Button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.play-btn::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 22px;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent white;
}
.video-lazy:hover .play-btn {
  background: rgba(255,0,0,0.8);
  transform: translate(-50%, -50%) scale(1.1);
}
/* ===== VIDEO RESPONSIVE END ===== */


/* ===== HOOK PARAGRAPH START ===== */
.mi-hook {
  margin: 20px 0;
  padding: 18px 22px;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  position: relative;
  
  /* Light Mode */
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  color: #222;
  
  backdrop-filter: blur(6px);
}

.mi-hook strong {
  color: #ff4d6d;
}

/* Dark Mode Auto */
@media (prefers-color-scheme: dark) {
  .mi-hook {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ddd;
  }
}
/* ===== HOOK PARAGRAPH END ===== */


/* ===== AAAAAAA START ===== */
/* ===== AAAAAAA END ===== */


/* ===== AAAAAAA START ===== */
/* ===== AAAAAAA END ===== */


/* ===== AAAAAAA START ===== */
/* ===== AAAAAAA END ===== */