/*!
 * @build  : HKV-CORE/r8.2026
 * @rev    : 5f3a9d2e
 * @layer  : ui,layout,component,animation
 * @note   : This file is auto-compiled. Manual edits will be overwritten.
 * DO NOT COPY — Protected by dynamic build system
 */
@charset "UTF-8";

/* ─── DESIGN TOKENS ────────────────────────────────── */
:root {
  --c-r:   #87CEFA;  --c-r2:  #48D1CC;  --c-r3:  #000080;
  --c-g:   gold;     --c-b:   #000;     --c-w:   #fff;
  --c-bg1: #300000;  --c-bg2: #1a0000;
  --sh-in: inset 0 0 5px 3px #87CEFA,
           inset 0 2px 0 0 #fff,
           inset 0 0 0 2px #87CEFA,
           3px 3px 3px 1px rgba(0,0,0,.2);
  --gr-rd: linear-gradient(180deg,#87CEFA 15%,#48D1CC 50%,#000080 85%);
  --gr-dk: linear-gradient(145deg,rgba(17,17,17,.85),rgba(0,0,0,.8));
  --tr-sm: .3s ease;
  --z-fx:  1000;
  --z-sn:  9999;
  --z-ft:  999;
  --br-sm: 10px;
  --br-md: 18px;
}

/* ─── BASE ──────────────────────────────────────────── */
html,body{overflow-x:hidden!important}
*{box-sizing:border-box}

/* ─── GLIDE SLIDER FIX ──────────────────────────────── */
.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}

/* ─── TOP NAV BUTTON BAR ────────────────────────────── */
.button{
  display:flex;justify-content:center;gap:30px;
  background:var(--c-b);align-items:center;
  flex-wrap:nowrap;flex-direction:row;
  border-bottom:5px double var(--c-g);
  position:fixed;width:100%;z-index:var(--z-fx)}
.login-daftar{
  padding:10px 16px;
  background:var(--gr-rd);
  box-shadow:var(--sh-in);
  color:var(--c-g);text-align:center;
  font-weight:bold;text-decoration:none;
  border-radius:4px;font-size:14px;
  width:90%;margin:10px auto}

/* ─── HEADER OVERRIDES ──────────────────────────────── */
.vc-header__container{margin-top:53px}
header.vc-header.jsHead.sticky-header--no-sticky{
  background:var(--gr-rd);box-shadow:var(--sh-in);
  border-bottom:5px dashed var(--c-g)}
section.m-tab-nav.m-explore-nav__container.wrapper{
  background:var(--c-bg1);border-bottom:5px dashed var(--c-g)}
.m-explore-nav{background-color:var(--c-bg1)}
.m-explore-nav__link:hover{background-color:var(--c-r)!important}

/* ─── NAV COLUMN GRID ───────────────────────────────── */
.n-columns-2{
  display:grid;grid-template-columns:repeat(2,1fr);font-weight:700}
.n-columns-2 a{text-align:center;margin:3px}
.login,.register{color:var(--c-w);padding:10px 10px}
.login,.login-button{
  text-shadow:2px 2px #0c0f12;border-radius:var(--br-sm);
  border:1px solid var(--c-b);
  background:linear-gradient(to bottom,rgb(0, 255, 250) 0,rgb(0, 78, 239) 0);
  color:var(--c-w)}
.register,.register-button{
  text-shadow:2px 2px var(--c-b);border-radius:var(--br-sm);
  background:linear-gradient(to bottom,rgb(0, 255, 250) 0,rgb(0, 78, 239) 0);
  border:1px solid var(--c-b)}

/* ─── OVERFLOW WRAPPER ──────────────────────────────── */
.overflow-hidden{overflow-x:hidden;background-color:#fff}

/* ─── CTA BUTTONS ───────────────────────────────────── */
.btn-x{
  display:inline-block;min-width:200px;
  text-align:center;padding:14px 28px;margin:5px;
  background:var(--c-r);color:var(--c-w);font-weight:700;
  border-radius:var(--br-sm);text-decoration:none;
  box-shadow:0 2px 6px rgba(0, 194, 183, 0.2);cursor:pointer}
.btn-x:hover{background:var(--c-g)}
.right-rail:empty,.sidebar:empty,.product__aside:empty{display:none!important}
.page-grid{display:grid;grid-template-columns:1fr;gap:24px}

/* ─── FAQ COMPONENT ─────────────────────────────────── */
.faq-container{max-width:800px;margin:40px auto;font-family:Arial,sans-serif}
.faq-title{
  text-align:center;font-size:26px;font-weight:bold;
  margin-bottom:30px;padding:20px;color:var(--c-g)}
.faq-item{border-bottom:1px solid #ddd;margin-bottom:10px}
.faq-question{
  background:#111;color:var(--c-w);padding:15px;
  cursor:pointer;font-weight:bold;transition:var(--tr-sm)}
.faq-question:hover{background:var(--c-r)}
.faq-answer{display:none;padding:15px;background:#f9f9f9;line-height:1.6}
.faq-item.active .faq-answer{display:block}

/* ─── ANIMATIONS ────────────────────────────────────── */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}}
@keyframes shine{100%{left:200%}}
@keyframes snowfall{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(360deg)}}

/* ─── INFO TABLE BOX ────────────────────────────────── */
#mw-info-box{font-family:'Segoe UI',Arial,sans-serif}
#mw-info-box,#mw-info-box *{
  color:#fff!important;opacity:1!important;
  filter:none!important;text-shadow:none!important}
#mw-info-box .grad-text{
  background:linear-gradient(90deg,#fff,#fff)!important;
  -webkit-background-clip:text!important;
  color:transparent!important;font-weight:800!important}
#mw-info-box .table-hover tr:hover{
  background:rgba(255,255,255,.06)!important;transition:.25s ease}
#mw-info-box td{border-color:rgba(255,255,255,.14)!important}

/* ─── 2-COL LAYOUT ──────────────────────────────────── */
.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 ────────────────────────────────────── */
.mw-review-box{
  background:linear-gradient(145deg,rgba(25,25,25,.85),rgba(0,0,0,.85));
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--br-md);padding:20px;color:#e5e5e5;
  animation:fadeIn 1s ease;height:100%;font-family:'Segoe UI',Arial,sans-serif}
.mw-review-title{
  text-align:center;font-size:22px;font-weight:800;padding:14px;
  background:linear-gradient(135deg,#025adc,#0064cf);
  border-radius:12px;margin-bottom:20px;color:#d6d6d6;
  border:1px solid rgba(255,255,255,.1)}
.review-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px;margin-bottom:18px;
  display:flex;gap:16px;align-items:flex-start;
  transition:.35s ease;box-shadow:0 5px 15px rgba(0,0,0,.3)}
.review-card:hover{
  transform:scale(1.02);box-shadow:0 10px 25px rgba(0, 74, 255, 0.35)}
.review-avatar{
  width:56px!important;height:56px!important;
  min-width:56px!important;flex:0 0 56px!important;
  border-radius:50%!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  background:linear-gradient(145deg,#87CEFA,#005680)!important;
  color:var(--c-w)!important;font-size:20px!important;
  font-weight:900!important;line-height:1!important;
  text-transform:uppercase;letter-spacing:.5px}
.review-name{
  font-size:17px;font-weight:800;
  background:linear-gradient(90deg,#c9c8c1,#bebebe);
  -webkit-background-clip:text;color:transparent;margin-bottom:6px}
.review-text{font-size:14px;color:#eaeaea;line-height:1.5}
.mw-footer{
  text-align:center;padding-top:12px;margin-top:6px;
  font-size:13px;color:#ccc}

/* ─── COMMENT / TESTIMONIAL SECTION ────────────────── */
.comment-section{
  margin:40px auto;font-family:Arial,sans-serif;
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;background-color:var(--c-b);
  padding:20px;border-bottom:5px solid var(--c-r);
  border-top:5px solid var(--c-r)}
.m-design-product-info--product-quality-image img{
  width:inherit;height:inherit;
  border-radius:10px 0 20px 0;border:5px double var(--c-r)}
.m-design-product-info--product-quality{
  background:#f9f1fe;border:2px solid var(--c-r)}
.tp-text-note{background:#f9f1fe;border:2px solid var(--c-r)}
.vc-pill{border:2px solid var(--c-r)}
.soju88-comment-box{
  background:linear-gradient(90deg,#111,#1c1c1c);
  color:var(--c-w);padding:18px 25px;margin-bottom:15px;
  border-radius:8px;border-left:5px solid var(--c-r);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition:var(--tr-sm);width:45%;margin:10px}
.soju88-comment-box:hover{
  transform:translateX(5px);border-left:5px solid #808000}
.soju88-comment-box{font-weight:bold;color:#808000;margin-bottom:6px}

/* ─── FIXED PREMIUM FOOTER ──────────────────────────── */
.premium-footer{
  position:fixed;bottom:0;left:0;right:0;
  z-index:var(--z-ft);
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 5px;
  background:linear-gradient(145deg,var(--c-bg2) 0%,var(--c-b) 100%);
  border-top:2px solid var(--c-r);
  box-shadow:0 -5px 20px rgba(0, 172, 255, 0.4);
  border-radius:15px 15px 0 0;
  font-family:'Segoe UI',Roboto,sans-serif;overflow:hidden}
.premium-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,.15) 0%,transparent 100%);
  pointer-events:none}
.premium-footer::after{
  content:"";position:absolute;top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-25deg);animation:shine 4s infinite}
.footer-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;text-decoration:none;color:var(--c-w);
  font-size:11px;font-weight:bold;transition:all .3s ease;
  position:relative;z-index:2}
.footer-item img{
  width:28px;height:28px;margin-bottom:4px;
  filter:drop-shadow(0 0 5px var(--c-r));
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}
.footer-item.main-btn{
  background:linear-gradient(180deg,#87CEFA 0%,#000080 100%);
  padding:10px 5px;border-radius:12px;margin-top:-20px;
  box-shadow:0 4px 15px rgba(0, 237, 255, 0.6);
  border:1px solid rgba(255,255,255,.3)}
.footer-item:hover img{transform:scale(1.2) translateY(-3px)}
.footer-item:hover{color:var(--c-r);text-shadow:0 0 8px rgba(0, 147, 255, 0.8)}
.footer-item.main-btn:hover{
  color:var(--c-w);transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0, 255, 216, 0.8)}
@media(max-width:480px){
  .footer-item{font-size:10px}
  .footer-item img{width:22px;height:22px}}

/* ─── SNOW ANIMATION ─────────────────────────────────── */
#fullscreen-snow{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:var(--z-sn);overflow:hidden}
.snowflake{
  position:absolute;top:-50px;fill:var(--c-w);
  will-change:transform;animation-name:snowfall;
  animation-timing-function:linear;animation-iteration-count:infinite;
  left:var(--x);width:var(--size);height:var(--size);
  opacity:var(--opacity);animation-duration:var(--speed);
  animation-delay:var(--delay)}
.content{position:relative;z-index:100;color:var(--c-w);
  text-align:center;padding-top:20vh}