:root {
  --main: #a142b8;
  --main-dark: #5b1f6b;
  --main-deep: #351044;
  --main-soft: #d98ff0;
  --main-light: #f7d7ff;

  --bg-page: #a142b8;
  --bg-card: rgba(255,255,255,.12);
  --bg-glass: rgba(255,255,255,.16);

  --white: #ffffff;
  --dark: #1d1025;

  --text-hero: #ffffff;
  --text-faq: #fff7ad;
  --text-info: #9ffcff;
  --text-review: #ffe1f7;
  --text-comment: #d7ff9a;
  --text-footer: #ffffff;
  --text-nav: #ffd36e;
  --text-button: #ffffff;

  --accent-yellow: #ffe66d;
  --accent-cyan: #53f3ff;
  --accent-green: #9dff73;
  --accent-orange: #ffb45c;
  --accent-pink: #ff73c8;
  --accent-blue: #78a7ff;
  --accent-lime: #c7ff4d;

  --shadow-main: 0 18px 45px rgba(54, 9, 70, .42);
  --shadow-soft: 0 10px 28px rgba(255,255,255,.16);
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255,230,109,.18), transparent 30%),
    linear-gradient(180deg, #a142b8 0%, #7d2e91 55%, #4d185e 100%) !important;
  color: var(--white);
}

body {
  min-height: 100vh;
}

::selection {
  background: var(--accent-yellow);
  color: var(--main-deep);
}

/* =========================================================
   ANIMASI GLOBAL
   ========================================================= */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shineMove {
  0% {
    left: -130%;
  }
  100% {
    left: 230%;
  }
}

@keyframes softGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255,255,255,0), var(--shadow-main);
  }
  50% {
    box-shadow: 0 0 26px rgba(255,255,255,.36), var(--shadow-main);
  }
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes borderSpin {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes snowfall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
  }
}

/* =========================================================
   FIX PREVIEW / GLIDER
   ========================================================= */

.preview,
.m-product-preview__glider,
.glide,
.glide__track {
  overflow: hidden !important;
  max-width: 100% !important;
}

.glide__slides {
  display: flex !important;
  margin: 0 !important;
  contain: none !important;
}

.glide__slide img,
.m-product-preview__glider-img img,
.preview .jsProductMainImage {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

/* =========================================================
   TOP BUTTON BAR
   ========================================================= */

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  flex-direction: row;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  padding: 7px 12px;
  background: rgba(70, 20, 88, .78);
  backdrop-filter: blur(16px);
  border-bottom: 3px solid rgba(255,255,255,.42);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.login-daftar {
  position: relative;
  overflow: hidden;

  width: 90%;
  max-width: 360px;
  margin: 8px auto;
  padding: 12px 18px;

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

  color: var(--text-button);
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .4px;
  text-decoration: none;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.68);
  background:
    linear-gradient(135deg, #ff73c8, #a142b8, #5b1f6b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 26px rgba(255,115,200,.32);

  transition: .32s ease;
  animation: softGlow 3s infinite;
}

.login-daftar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  transform: skewX(-22deg);
  animation: shineMove 4s infinite;
}

.login-daftar:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.1);
}

/* =========================================================
   HEADER & NAV
   ========================================================= */

.vc-header__container {
  margin-top: 60px;
}

header.vc-header.jsHead.sticky-header--no-sticky {
  color: var(--text-hero);
  background:
    radial-gradient(circle at top right, rgba(255,230,109,.28), transparent 36%),
    linear-gradient(135deg, #c85cdf, #a142b8, #4a185a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 16px 34px rgba(54,9,70,.32);
  border-bottom: 5px double rgba(255,255,255,.72);
}

section.m-tab-nav.m-explore-nav__container.wrapper {
  background: linear-gradient(90deg, #5b1f6b, #a142b8, #ff73c8);
  border-bottom: 4px solid rgba(255,230,109,.72);
}

.m-explore-nav {
  background: linear-gradient(90deg, #461558, #a142b8, #d65cf0);
}

.m-explore-nav__link,
.m-explore-nav__link .link__content {
  color: var(--text-nav) !important;
  font-weight: 900;
}

.m-explore-nav__link:hover {
  background-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

/* =========================================================
   LOGIN REGISTER GRID
   ========================================================= */

.n-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  font-weight: 900;
}

.n-columns-2 a {
  text-align: center;
  margin: 3px;
}

.login,
.register {
  padding: 12px;
  text-decoration: none;
  border-radius: 14px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.58);
  text-shadow: 1px 1px rgba(0,0,0,.3);
  transition: .32s ease;
}

.login,
.login-button {
  background: linear-gradient(135deg, #53f3ff, #a142b8, #3a1150);
  box-shadow: 0 9px 22px rgba(83,243,255,.26);
}

.register,
.register-button {
  background: linear-gradient(135deg, #ffe66d, #ff73c8, #a142b8);
  box-shadow: 0 9px 22px rgba(255,230,109,.28);
}

.login:hover,
.login-button:hover,
.register:hover,
.register-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
}

/* =========================================================
   BODY WRAPPER
   ========================================================= */

.overflow-hidden {
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(83,243,255,.18), transparent 34%),
    linear-gradient(180deg, #a142b8 0%, #702882 100%) !important;
}

/* =========================================================
   BUTTON CUSTOM
   ========================================================= */

.btn-x {
  position: relative;
  overflow: hidden;

  display: inline-block;
  min-width: 205px;
  margin: 6px;
  padding: 15px 30px;

  text-align: center;
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .4px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.56);
  background: linear-gradient(135deg, #ffb45c, #ff73c8, #a142b8);
  box-shadow: 0 14px 30px rgba(255,115,200,.34);
  cursor: pointer;
  transition: .35s ease;
}

.btn-x::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.36), transparent);
  transform: translateX(-130%);
  transition: .6s ease;
}

.btn-x:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 38px rgba(255,230,109,.36);
}

.btn-x:hover::before {
  transform: translateX(130%);
}

.right-rail:empty,
.sidebar:empty,
.product__aside:empty {
  display: none !important;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* =========================================================
   FAQ — TEKS KUNING
   ========================================================= */

.faq-container {
  max-width: 880px;
  margin: 42px auto;
  padding: 0 14px;
  font-family: Arial, sans-serif;
  animation: fadeInUp .8s ease;
}

.faq-title {
  text-align: center;
  font-size: 26px;
  font-weight: 950;
  margin-bottom: 28px;
  padding: 24px;

  color: var(--text-faq);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,230,109,.58);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, #6c237d, #a142b8, #351044);
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
}

.faq-item {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(255,230,109,.36);
  border-radius: 16px;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.faq-question {
  position: relative;
  background: linear-gradient(135deg, #ffe66d, #a142b8, #5b1f6b);
  color: #ffffff;
  padding: 17px 20px;
  cursor: pointer;
  font-weight: 900;
  transition: .3s ease;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--accent-yellow);
}

.faq-question:hover {
  filter: brightness(1.08);
  padding-left: 28px;
}

.faq-answer {
  display: none;
  padding: 18px 20px;
  background: rgba(255,255,255,.94);
  color: #351044;
  line-height: 1.75;
  border-top: 1px solid rgba(161,66,184,.22);
}

.faq-item.active .faq-answer {
  display: block;
}

/* =========================================================
   INFO BOX — TEKS CYAN
   ========================================================= */

#mw-info-box {
  font-family: 'Segoe UI', Arial, sans-serif;
  animation: fadeInUp .9s ease;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(83,243,255,.18), transparent 32%),
    linear-gradient(145deg, rgba(53,16,68,.92), rgba(91,31,107,.96)) !important;
  border: 1px solid rgba(83,243,255,.42);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

#mw-info-box,
#mw-info-box * {
  color: var(--text-info) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

#mw-info-box .grad-text {
  background: linear-gradient(90deg, #53f3ff, #ffe66d, #ff73c8) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  font-weight: 950 !important;
}

#mw-info-box .table-hover tr:hover {
  background: rgba(83,243,255,.15) !important;
  transition: .25s ease;
}

#mw-info-box td {
  border-color: rgba(83,243,255,.28) !important;
}

/* =========================================================
   LAYOUT 2 KOLOM
   ========================================================= */

.mw-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.mw-left,
.mw-right {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .mw-layout {
    flex-direction: column;
  }
}

/* =========================================================
   REVIEW BOX — TEKS PINK
   ========================================================= */

.mw-review-box {
  position: relative;
  overflow: hidden;

  height: 100%;
  padding: 22px;
  color: var(--text-review);
  font-family: 'Segoe UI', Arial, sans-serif;

  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,115,200,.35);
  background:
    radial-gradient(circle at top right, rgba(255,115,200,.24), transparent 38%),
    linear-gradient(145deg, rgba(53,16,68,.94), rgba(25,8,34,.98));
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 46px rgba(0,0,0,.3);
  animation: fadeInUp 1s ease;
}

.mw-review-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-24deg);
  animation: shineMove 5s infinite;
}

.mw-review-title {
  position: relative;
  z-index: 1;

  text-align: center;
  font-size: 22px;
  font-weight: 950;
  padding: 16px;
  margin-bottom: 20px;

  color: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #ff73c8, #a142b8, #5b1f6b);
}

.review-card {
  --card-accent: var(--accent-pink);

  position: relative;
  z-index: 1;

  display: flex;
  gap: 16px;
  align-items: flex-start;

  padding: 18px;
  margin-bottom: 18px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 6px solid var(--card-accent);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  transition: .35s ease;
}

.review-card:nth-child(2n) {
  --card-accent: var(--accent-yellow);
}

.review-card:nth-child(3n) {
  --card-accent: var(--accent-cyan);
}

.review-card:nth-child(4n) {
  --card-accent: var(--accent-green);
}

.review-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 34px rgba(255,115,200,.24);
}

.review-avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  flex: 0 0 56px !important;

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

  border-radius: 50% !important;
  background: linear-gradient(145deg, var(--card-accent), #351044) !important;
  color: #ffffff !important;

  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: .5px;

  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}

.review-name {
  font-size: 17px;
  font-weight: 950;
  background: linear-gradient(90deg, #ffffff, #ffe66d, #53f3ff);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.review-text {
  font-size: 14px;
  color: var(--text-review);
  line-height: 1.65;
}

.mw-footer {
  text-align: center;
  padding-top: 12px;
  margin-top: 6px;
  font-size: 13px;
  color: #ffe66d;
}

/* =========================================================
   COMMENT SECTION — TEKS HIJAU
   ========================================================= */

.comment-section {
  margin: 42px auto;
  padding: 24px;
  font-family: Arial, sans-serif;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;

  background:
    radial-gradient(circle at top left, rgba(157,255,115,.18), transparent 34%),
    linear-gradient(180deg, rgba(91,31,107,.82), rgba(53,16,68,.92));
  border-top: 5px solid rgba(157,255,115,.72);
  border-bottom: 5px solid rgba(255,115,200,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.PESONA69-comment-box {
  --card-accent: var(--accent-green);

  width: 45%;
  margin: 0 0 15px;
  padding: 19px 25px;

  color: var(--text-comment);
  font-weight: 850;
  line-height: 1.6;

  border-radius: 18px;
  border-left: 7px solid var(--card-accent);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(161,66,184,.96), rgba(35,10,48,.98));
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  transition: .32s ease;
}

.PESONA69-comment-box:nth-child(2n) {
  --card-accent: var(--accent-yellow);
  color: #fff3a8;
}

.PESONA69-comment-box:nth-child(3n) {
  --card-accent: var(--accent-cyan);
  color: #b9fbff;
}

.PESONA69-comment-box:nth-child(4n) {
  --card-accent: var(--accent-orange);
  color: #ffd4a3;
}

.PESONA69-comment-box:nth-child(5n) {
  --card-accent: var(--accent-pink);
  color: #ffd1ef;
}

.PESONA69-comment-box:hover {
  transform: translateX(6px) translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.3);
}

@media (max-width: 760px) {
  .PESONA69-comment-box {
    width: 100%;
  }
}

/* =========================================================
   PRODUCT / NOTE / PILL
   ========================================================= */

.m-design-product-info--product-quality-image img {
  width: inherit;
  height: inherit;
  border-radius: 16px 0 28px 0;
  border: 5px double var(--accent-yellow);
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
}

.m-design-product-info--product-quality {
  background: rgba(255,255,255,.14);
  border: 2px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  color: #ffffff;
}

.tp-text-note {
  background: rgba(255,255,255,.16);
  border: 2px solid var(--accent-orange);
  border-radius: var(--radius-md);
  color: #fff3a8;
}

.vc-pill {
  border: 2px solid var(--accent-pink);
  background: rgba(255,255,255,.12);
  color: #ffffff !important;
  transition: .3s ease;
}

.vc-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(255,115,200,.26);
}

/* =========================================================
   PREMIUM FOOTER
   ========================================================= */

.premium-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

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

  padding: 10px 5px;
  overflow: hidden;

  font-family: 'Segoe UI', Roboto, sans-serif;
  border-radius: 20px 20px 0 0;
  border-top: 2px solid rgba(255,230,109,.72);
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(145deg, rgba(91,31,107,.96), rgba(53,16,68,.98));
  box-shadow: 0 -10px 28px rgba(0,0,0,.34);
}

.premium-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}

.premium-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-25deg);
  animation: shineMove 4.5s infinite;
}

.footer-item {
  position: relative;
  z-index: 2;

  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 950;
  transition: .3s ease;
}

.footer-item:nth-child(2n) {
  color: var(--accent-yellow);
}

.footer-item:nth-child(3n) {
  color: var(--accent-green);
}

.footer-item img {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.36));
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
}

.footer-item.main-btn {
  background: linear-gradient(135deg, #ff73c8, #a142b8, #ffe66d);
  color: #ffffff;
  padding: 10px 5px;
  border-radius: 16px;
  margin-top: -22px;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 10px 25px rgba(255,115,200,.45);
  animation: floating 3s infinite;
}

.footer-item.main-btn img {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
}

.footer-item:hover img {
  transform: scale(1.22) translateY(-4px);
}

.footer-item:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,.45);
}

.footer-item.main-btn:hover {
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(255,230,109,.48);
}

/* =========================================================
   PARTICLE / SNOW EFFECT
   ========================================================= */

#fullscreen-snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -50px;
  left: var(--x);

  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);

  fill: #ffffff;
  filter:
    drop-shadow(0 0 5px rgba(255,230,109,.8))
    drop-shadow(0 0 12px rgba(255,115,200,.45));

  will-change: transform;
  animation-name: snowfall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--speed);
  animation-delay: var(--delay);
}

.content {
  position: relative;
  z-index: 100;

  color: #ffffff;
  text-align: center;
  padding-top: 20vh;
  text-shadow: 0 3px 12px rgba(53,16,68,.8);
}

/* =========================================================
   AKSESIBILITAS & RESPONSIVE
   ========================================================= */

a:focus-visible,
button:focus-visible,
.btn-x:focus-visible,
.login-daftar:focus-visible,
.footer-item:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .button {
    gap: 8px;
    padding: 6px 8px;
  }

  .login-daftar {
    font-size: 13px;
    padding: 10px 14px;
  }

  .n-columns-2 {
    gap: 6px;
  }

  .faq-title {
    font-size: 22px;
    padding: 19px 14px;
  }

  .mw-review-box {
    padding: 16px;
  }

  .review-card {
    padding: 15px;
  }

  .btn-x {
    min-width: 160px;
    width: 100%;
  }

  .footer-item {
    font-size: 10px;
  }

  .footer-item img {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}