*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
}

body {
  overflow-x: hidden;
  color: var(--game-text);

  background: 
    linear-gradient(180deg, rgba(5, 8, 17, 0.4) 0%, rgba(5, 8, 17, 0.75) 100%),
    radial-gradient(
      circle at 85% 30%,
      rgba(90, 180, 255, 0.28) 0%,
      rgba(90, 180, 255, 0.10) 25%,
      transparent 50%
    ),
    radial-gradient(
      circle at 45% 85%,
      rgba(150, 215, 255, 0.30) 0%,
      rgba(150, 215, 255, 0.10) 25%,
      transparent 50%
    ),
    url('solo leveling.jpg') no-repeat center top fixed;
  background-size: cover;

  background-size:
    180% 180%,
    160% 160%,
    170% 170%,
    300% 300%;

  background-position:
    0% 50%,
    100% 20%,
    20% 100%,
    0% 50%;

  background-attachment:fixed;

  animation:primaGradientMove 18s ease-in-out infinite;
}


/* =========================================
   ANIMASI BACKGROUND
   ========================================= */

@keyframes primaGradientMove{

  0%{
    background-position:
      0% 50%,
      100% 20%,
      20% 100%,
      0% 50%;
  }

  25%{
    background-position:
      50% 20%,
      50% 50%,
      80% 80%,
      50% 100%;
  }

  50%{
    background-position:
      100% 50%,
      0% 80%,
      50% 0%,
      100% 50%;
  }

  75%{
    background-position:
      50% 80%,
      80% 40%,
      10% 30%,
      50% 0%;
  }

  100%{
    background-position:
      0% 50%,
      100% 20%,
      20% 100%,
      0% 50%;
  }

}


/* =========================================
   TOPBAR
   ========================================= */

.topbar{
  background:#071b35;
  color:#d9e8ff;
  text-align:center;
  padding:8px;
  font-size:12px;
}


/* =========================================
   HEADER
   ========================================= */

.header{
  height:78px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #e9edf3;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0a2444;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:11px;
  background:linear-gradient(135deg,#1688ff,#0754d9);
  color:white;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:20px;
  box-shadow:0 8px 20px #1479ff30;
}

.brand-logo{
  width:65px;
  height:65px;
  object-fit:contain;
  display:block;
}


.brand strong{
  display:block;
  font-size:16px;
  letter-spacing:1px;
  line-height:1.1;
}

.brand small{
  display:block;
  font-size:8px;
  letter-spacing:1.6px;
  color:#718096;
  text-transform:uppercase;
}

.desktop-nav{
  display:flex;
  gap:27px;
}

.desktop-nav a,
.mobile-nav a{
  color:#4b5563;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
}

.desktop-nav a:hover,
.desktop-nav .active{
  color:#0867e8;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.icon-btn,
.menu-btn{
  border:0;
  background:transparent;
  font-size:25px;
  cursor:pointer;
  color:#334155;
}

.cart-btn{
  border:1px solid #dce4ee;
  background:#fff;
  padding:9px 13px;
  border-radius:11px;
  cursor:pointer;
  color:#1e293b;
  font-weight:600;
}

.cart-btn b{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:4px;
  border-radius:50%;
  font-size:10px;
  background:#0876ed;
  color:#fff;
}

.menu-btn{
  display:none;
}

.mobile-nav{
  display:none;
}


/* =========================================
   HERO
   ========================================= */

.hero{
  min-height:550px;
  padding:80px 8%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  background:linear-gradient(
    120deg,
    #071b35 0%,
    #0a2f58 56%,
    #0b4e8c 100%
  );
  color:#fff;
  position:relative;
}

.hero:after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border:1px solid #ffffff18;
  border-radius:50%;
  right:-180px;
  top:-170px;
}

.hero-content{
  max-width:690px;
  position:relative;
  z-index:2;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0875eb;
  font-weight:700;
  letter-spacing:1.4px;
  font-size:11px;
}

.hero .eyebrow{
  color:#7bc1ff;
}

.hero .eyebrow span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38bdf8;
}

.hero h1{
  font-size:clamp(36px,5vw,63px);
  line-height:1.12;
  margin:16px 0;
}

.hero h1 em{
  font-style:normal;
  color:#5eb4ff;
}

.hero p{
  max-width:590px;
  color:#c8d9eb;
  font-size:15px;
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:28px;
}

.btn{
  border:0;
  border-radius:10px;
  padding:12px 19px;
  font-family:inherit;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn.primary{
  background:#0877ee;
  color:#fff;
  box-shadow:0 9px 20px #0877ee30;
}

.btn.secondary{
  background:#ffffff12;
  color:#fff;
  border:1px solid #ffffff35;
}

.btn.light{
  background:#eaf4ff;
  color:#0867d9;
}

.trust-row{
  display:flex;
  gap:20px;
  margin-top:27px;
  color:#b8cbe0;
  font-size:11px;
}


/* =========================================
   HERO VISUAL
   ========================================= */

.hero-visual{
  width:390px;
  height:420px;
  position:relative;
  margin-right:5%;
}

.phone{
  width:245px;
  height:430px;
  background:#0d1320;
  border:8px solid #1b2838;
  border-radius:38px;
  position:absolute;
  right:45px;
  top:-5px;
  box-shadow:0 35px 80px #0008;
  transform:rotate(5deg);
}

.phone-notch{
  width:88px;
  height:20px;
  background:#0b1018;
  border-radius:0 0 14px 14px;
  margin:auto;
}

.phone-screen{
  background:#f4f8fd;
  border-radius:25px;
  height:100%;
  padding:26px 16px;
  color:#15233a;
}

.mini-top{
  display:flex;
  justify-content:space-between;
  font-weight:700;
  color:#0969d9;
}

.mini-label{
  font-size:10px;
  margin-top:35px;
  color:#758399;
}

.phone-screen h3{
  font-size:25px;
}

.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:20px;
}

.mini-grid div{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:12px;
  padding:11px;
  text-align:center;
  font-size:18px;
  box-shadow:0 5px 15px #0b1d3510;
}

.mini-grid span{
  display:block;
  font-size:8px;
  color:#64748b;
}

.mini-card{
  background:#e8f3ff;
  border-radius:13px;
  padding:12px;
  margin-top:14px;
}

.mini-card small,
.mini-card span{
  display:block;
  font-size:8px;
  color:#64748b;
}

.mini-card strong{
  font-size:12px;
  color:#059669;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
}

.orb-one{
  width:240px;
  height:240px;
  background:#1385ff28;
  right:0;
  top:60px;
}

.orb-two{
  width:120px;
  height:120px;
  background:#22c55e25;
  left:20px;
  bottom:20px;
}


/* =========================================
   QUICK SERVICES
   ========================================= */

.quick-services{
  background:#fff;
  margin:-34px 7% 0;
  position:relative;
  z-index:4;
  border-radius:16px;
  box-shadow:0 15px 45px #102a4d13;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:15px;
}

.quick-services div{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 18px;
  border-right:1px solid #edf0f5;
}

.quick-services div:last-child{
  border:0;
}

.quick-services span{
  font-size:24px;
}

.quick-services strong{
  font-size:12px;
  display:block;
}

.quick-services small{
  font-size:9px;
  color:#8a95a5;
  display:block;
}


/* =========================================
   SECTION
   ========================================= */

.section{
  padding:85px 8%;
  background:transparent;
}

.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:30px;
}

.section-heading h2{
  font-size:30px;
  color:#12233b;
  margin-top:5px;
}

.section-heading p{
  color:#7b8798;
  font-size:13px;
}

.search-box{
  width:230px;
  border:1px solid #dce4ee;
  background:#fff;
  border-radius:10px;
  padding:10px 13px;
  display:flex;
  gap:8px;
}

.search-box input{
  border:0;
  outline:0;
  width:100%;
  font-family:inherit;
  font-size:12px;
}

.category-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.cat{
  border:1px solid #dce4ee;
  background:#fff;
  border-radius:9px;
  padding:9px 15px;
  color:#5b6677;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
}

.cat.active,
.cat:hover{
  background:#0877ee;
  border-color:#0877ee;
  color:#fff;
}


/* =========================================
   PRODUCT
   ========================================= */

.product-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px;
}

.product-card{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:14px;
  padding:17px;
  transition:.2s;
  position:relative;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 35px #18314d12;
}

.product-icon{
  width:47px;
  height:47px;
  border-radius:13px;
  background:#eaf4ff;
  display:grid;
  place-items:center;
  font-size:23px;
  margin-bottom:15px;
}

.product-card h3{
  font-size:13px;
}

.product-card p{
  font-size:10px;
  color:#8a95a5;
  margin:4px 0 13px;
  min-height:30px;
}

.price{
  font-size:15px;
  font-weight:800;
  color:#075dcc;
}

.stock{
  font-size:9px;
  color:#15966a;
  display:block;
  margin:4px 0 13px;
}

.product-card button{
  width:100%;
  border:0;
  background:#edf6ff;
  color:#0765d7;
  padding:9px;
  border-radius:8px;
  font-family:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.product-card button:hover{
  background:#0877ee;
  color:white;
}

.empty-state{
  display:none;
  text-align:center;
  background:#fff;
  border-radius:12px;
  padding:40px;
  color:#8792a3;
}


/* =========================================
   PRICE SECTION
   ========================================= */

.price-section{
  background:transparent;
  padding:85px 8%;
}

.center{
  display:block;
  text-align:center;
}

.price-table-wrap{
  overflow:auto;
  border:1px solid #e8edf3;
  border-radius:14px;
  background:#fff;
}

.price-table-wrap table{
  width:100%;
  border-collapse:collapse;
  min-width:650px;
}

.price-table-wrap th,
.price-table-wrap td{
  text-align:left;
  padding:15px 18px;
  border-bottom:1px solid #edf0f4;
  font-size:12px;
}

.price-table-wrap th{
  background:#f7faff;
  color:#697586;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.status{
  color:#079768;
  font-size:10px;
  font-weight:700;
}

.table-btn{
  border:0;
  background:#0877ee;
  color:#fff;
  padding:7px 11px;
  border-radius:7px;
  font-family:inherit;
  font-size:10px;
  cursor:pointer;
}


/* =========================================
   TRANSACTION
   ========================================= */

.transaction-section{
  padding:65px 8%;
  background:transparent;
}

.transaction-card{
  background:#092445;
  border-radius:20px;
  padding:42px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  color:white;
}

.transaction-card h2{
  font-size:27px;
  margin:8px 0;
}

.transaction-card p{
  color:#b8c9dd;
  font-size:12px;
}

.transaction-card label{
  font-size:10px;
  color:#a9bdd3;
  display:block;
  margin-bottom:7px;
}

.input-action{
  display:flex;
  gap:8px;
}

.input-action input{
  flex:1;
  border:0;
  border-radius:9px;
  padding:12px 14px;
  font-family:inherit;
  outline:0;
}

.transaction-result{
  font-size:11px;
  margin-top:10px;
  color:#77e0b9;
}


/* =========================================
   BENEFIT
   ========================================= */

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.benefit-grid article{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:15px;
  padding:25px;
}

.benefit-grid article>div{
  font-size:25px;
  margin-bottom:15px;
}

.benefit-grid h3{
  font-size:15px;
}

.benefit-grid p{
  font-size:11px;
  color:#7c8797;
  margin-top:7px;
}


/* =========================================
   HELP
   ========================================= */

.help-section{
  padding:75px 8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  background:transparent;
}

.help-copy h2{
  font-size:32px;
  margin:8px 0;
}

.help-copy p{
  font-size:13px;
  color:#7b8798;
  max-width:500px;
}

.help-buttons{
  display:flex;
  gap:10px;
  margin-top:22px;
}

.faq-list details{
  border-bottom:1px solid #e5eaf0;
  padding:16px 0;
}

.faq-list summary{
  cursor:pointer;
  font-weight:600;
  font-size:12px;
}

.faq-list p{
  font-size:11px;
  color:#7b8798;
  padding-top:10px;
}


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

footer{
  background:#071b35;
  color:#b9c9dc;
  padding:50px 8% 20px;
}

.footer-main{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:30px;
  padding-bottom:40px;
}

.footer-brand p{
  font-size:11px;
  max-width:270px;
  margin-top:15px;
}

.footer-main h4{
  font-size:12px;
  color:#fff;
  margin-bottom:14px;
}

.footer-main>div:not(:first-child) a{
  display:block;
  text-decoration:none;
  color:#9eb0c6;
  font-size:10px;
  margin:7px 0;
}

.footer-main p{
  font-size:10px;
  margin:6px 0;
}

.footer-bottom{
  border-top:1px solid #ffffff12;
  padding-top:18px;
  text-align:center;
  font-size:9px;
  color:#778ba3;
}


/* =========================================
   OVERLAY
   ========================================= */

.overlay{
  position:fixed;
  inset:0;
  background:#06142699;
  opacity:0;
  visibility:hidden;
  z-index:80;
  transition:.2s;
}

.overlay.show{
  opacity:1;
  visibility:visible;
}


/* =========================================
   CART
   ========================================= */

.cart-drawer{
  position:fixed;
  right:-420px;
  top:0;
  width:400px;
  height:100vh;
  background:#fff;
  z-index:90;
  transition:.3s;
  padding:25px;
  display:flex;
  flex-direction:column;
}

.cart-drawer.open{
  right:0;
}

.drawer-head{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #e8edf3;
  padding-bottom:17px;
}

.drawer-head button,
.modal-close{
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer;
  color:#64748b;
}

.cart-items{
  flex:1;
  overflow:auto;
  padding:10px 0;
}

.cart-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid #edf0f4;
}

.cart-item-icon{
  width:40px;
  height:40px;
  background:#eaf4ff;
  border-radius:9px;
  display:grid;
  place-items:center;
}

.cart-item-info{
  flex:1;
}

.cart-item-info strong{
  display:block;
  font-size:11px;
}

.cart-item-info span{
  font-size:9px;
  color:#8a95a5;
}

.qty{
  display:flex;
  align-items:center;
  gap:7px;
}

.qty button{
  border:1px solid #dce4ee;
  background:#fff;
  border-radius:5px;
  width:23px;
  height:23px;
  cursor:pointer;
}

.qty span{
  font-size:10px;
}

.cart-footer{
  border-top:1px solid #e8edf3;
  padding-top:18px;
}

.cart-footer>div{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
}

.cart-footer span{
  font-size:11px;
  color:#7b8798;
}

.cart-footer strong{
  font-size:17px;
}

.full{
  width:100%;
}


/* =========================================
   MODAL
   ========================================= */

.modal{
  position:fixed;
  inset:0;
  background:#06142699;
  display:grid;
  place-items:center;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:.2s;
  padding:20px;
}

.modal.show{
  opacity:1;
  visibility:visible;
}

.modal-card{
  background:#fff;
  border-radius:17px;
  max-width:520px;
  width:100%;
  padding:30px;
  position:relative;
  box-shadow:0 25px 80px #0004;
}

.modal-close{
  position:absolute;
  right:14px;
  top:8px;
}

.modal-card h2{
  font-size:22px;
  margin-bottom:8px;
}

.modal-card p{
  font-size:12px;
  color:#758195;
}

.checkout-form{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.checkout-form label{
  font-size:10px;
  font-weight:600;
}

.checkout-form input,
.checkout-form select{
  width:100%;
  padding:11px;
  border:1px solid #dce4ee;
  border-radius:8px;
  font-family:inherit;
  font-size:11px;
  outline:0;
}

.checkout-summary{
  background:#f5f8fc;
  border-radius:9px;
  padding:12px;
  font-size:11px;
}

.checkout-summary strong{
  float:right;
}

.modal-card .btn{
  margin-top:5px;
}

.success{
  padding:25px;
  text-align:center;
}

.success-icon{
  font-size:45px;
  margin-bottom:8px;
}


/* =========================================
   PROGRESS BAR (SUDAH DIPERBAIKI)
   ========================================= */

.progress-container{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  width:100%;
  height:6px;
  background:rgba(255,255,255,.1);
}

.progress-bar{
  height:100%;
  background:#00d2ff;
  box-shadow:0 0 10px #00d2ff;
  width:0%;
  position:relative; /* Ditambahkan agar emoji menempel ke bar */
}

.emoji-car{
  position:absolute;
  top:-10px;       /* Mengatur ketinggian emoji */
  right:-12px;     /* Menaruh emoji tepat di ujung kanan progress bar */
  font-size:18px;
  pointer-events:none;
}


/* =========================================
   RESPONSIVE TABLET
   ========================================= */

@media(max-width:1000px){

  .desktop-nav{
    gap:13px;
  }

  .desktop-nav a{
    font-size:11px;
  }

  .product-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .hero{
    padding-left:6%;
    padding-right:6%;
  }

  .hero-visual{
    margin-right:0;
  }

  .quick-services{
    margin-left:4%;
    margin-right:4%;
  }

}


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

@media(max-width:760px){

  .desktop-nav,
  .header-actions .icon-btn{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .header{
    padding:0 5%;
  }

  .mobile-nav{
    position:sticky;
    top:78px;
    background:#fff;
    z-index:49;
    display:none;
    padding:12px 5%;
    border-bottom:1px solid #e8edf3;
    box-shadow:0 8px 20px #102a4d10;
  }

  .mobile-nav.show{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .hero{
    min-height:auto;
    padding:55px 7%;
    display:block;
  }

  .hero h1{
    font-size:39px;
  }

  .hero-visual{
    height:380px;
    margin:25px auto 0;
  }

  .phone{
    right:50%;
    transform:translateX(50%) rotate(3deg);
    height:370px;
    width:210px;
  }

  .quick-services{
    grid-template-columns:1fr 1fr;
    margin:-20px 5% 0;
  }

  .quick-services div{
    border-right:0;
    border-bottom:1px solid #edf0f5;
  }

  .quick-services div:last-child{
    grid-column:1/-1;
  }

  .section,
  .price-section,
  .help-section{
    padding:60px 6%;
  }

  .section-heading{
    display:block;
  }

  .search-box{
    width:100%;
    margin-top:18px;
  }

  .product-grid{
    grid-template-columns:1fr 1fr;
  }

  .transaction-card,
  .help-section{
    grid-template-columns:1fr;
    gap:30px;
  }

  .benefit-grid{
    grid-template-columns:1fr;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
  }

  .cart-drawer{
    width:min(400px,100%);
  }

  .trust-row{
    flex-wrap:wrap;
  }

}


/* =========================================
   RESPONSIVE HP KECIL
   ========================================= */

@media(max-width:440px){

  .product-grid{
    grid-template-columns:1fr;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .footer-main{
    grid-template-columns:1fr;
  }

  .input-action{
    display:block;
  }

  .input-action input{
    width:100%;
    margin-bottom:8px;
  }

  .input-action .btn{
    width:100%;
  }

}

/* =========================================
   FLOATING BACKGROUND CIRCLES
   DEKORASI LATAR BELAKANG
   ========================================= */

body{
    position:relative;
    overflow-x:hidden;
}


/* Layer dekorasi utama */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(255,255,255,.75) 0 45px,
            rgba(180,215,240,.25) 46px 75px,
            transparent 76px
        ),

        radial-gradient(
            circle at 86% 18%,
            rgba(255,255,255,.65) 0 55px,
            rgba(150,195,230,.25) 56px 90px,
            transparent 91px
        ),

        radial-gradient(
            circle at 72% 55%,
            rgba(255,255,255,.55) 0 70px,
            rgba(155,200,235,.20) 71px 115px,
            transparent 116px
        ),

        radial-gradient(
            circle at 25% 78%,
            rgba(255,255,255,.65) 0 50px,
            rgba(165,205,235,.22) 51px 85px,
            transparent 86px
        ),

        radial-gradient(
            circle at 92% 82%,
            rgba(255,255,255,.6) 0 42px,
            rgba(170,210,240,.22) 43px 75px,
            transparent 76px
        );

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;

    animation:
        floatingBackground 20s ease-in-out infinite alternate;
}


/* Lingkaran tambahan */
body::after{
    content:"";
    position:fixed;
    width:420px;
    height:420px;

    left:42%;
    top:35%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.40) 0%,
            rgba(180,215,240,.18) 45%,
            rgba(120,180,225,.08) 65%,
            transparent 72%
        );

    filter:blur(4px);

    z-index:-1;
    pointer-events:none;

    animation:
        bigFloatingCircle 24s ease-in-out infinite alternate;
}


/* =========================================
   ANIMASI LINGKARAN
   ========================================= */

@keyframes floatingBackground{

    0%{
        transform:translate3d(0,0,0);
    }

    25%{
        transform:translate3d(12px,-15px,0);
    }

    50%{
        transform:translate3d(-10px,12px,0);
    }

    75%{
        transform:translate3d(15px,8px,0);
    }

    100%{
        transform:translate3d(-8px,-12px,0);
    }
}


@keyframes bigFloatingCircle{

    0%{
        transform:translate3d(-40px,-20px) scale(.92);
        opacity:.55;
    }

    50%{
        transform:translate3d(35px,25px) scale(1.05);
        opacity:.75;
    }

    100%{
        transform:translate3d(-20px,40px) scale(.95);
        opacity:.55;
    }
}


/* =========================================
   DEKORASI TIDAK MENGGANGGU KONTEN
   ========================================= */

.header,
.hero,
.quick-services,
.section,
.price-section,
.transaction-section,
.help-section,
footer{
    position:relative;
}


/* =========================================
   OPTIMASI PERFORMANCE
   ========================================= */

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

    body::before,
    body::after{
        animation:none;
    }

}


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

@media(max-width:760px){

    body::before{
        background:
            radial-gradient(
                circle at 8% 25%,
                rgba(255,255,255,.65) 0 35px,
                rgba(180,215,240,.20) 36px 60px,
                transparent 61px
            ),

            radial-gradient(
                circle at 90% 35%,
                rgba(255,255,255,.60) 0 40px,
                rgba(150,195,230,.20) 41px 65px,
                transparent 66px
            ),

            radial-gradient(
                circle at 20% 80%,
                rgba(255,255,255,.60) 0 35px,
                rgba(165,205,235,.20) 36px 60px,
                transparent 61px
            );
    }


    body::after{
        width:280px;
        height:280px;
        left:35%;
        top:45%;
    }

}

/* 1. PERBAIKAN PADA MODAL CONTAINER */
.modal-card {
  max-height: 85vh;            /* Batas tinggi modal */
  overflow-y: auto;            /* Aktifkan scroll vertikal */
  overflow-x: hidden;          /* Mencegah elemen meluber ke samping */
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 500px;            /* Batas lebar modal agar tidak terlalu sempit */
  padding: 24px;
}

/* =========================================
   PAYMENT METHOD
========================================= */

.payment-options-midtrans {
  margin-top: 10px;
}

.payment-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #8794a5;
  margin-bottom: 10px;
}

.pay-accordion {
  border-bottom: 1px solid #edf1f5;
  overflow: hidden;
}

.pay-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}

.pay-card-summary::-webkit-details-marker {
  display: none;
}

.pay-card-summary:hover {
  background: #fafcff;
}

.pay-card-content {
  flex: 1;
}

.pay-card-content strong {
  display: block;
  color: #101828;
  font-size: 16px;
  margin-bottom: 10px;
}

.pay-logo-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* LOGO PEMBAYARAN */

.payment-logo {
  height: 28px;
  min-width: 48px;
  padding: 4px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}


/* GOPAY */

.gopay-logo {
  color: #00a86b;
  border-color: #b8ead6;
  background: #f0fff9;
}


/* QRIS */

.qris-logo {
  color: #111827;
  border-color: #d7dde6;
  background: #ffffff;
  font-weight: 900;
}


/* VISA */

.visa-logo {
  color: #1434cb;
  background: #f4f7ff;
  border-color: #cbd6ff;
  font-style: italic;
  font-size: 11px;
}


/* MASTERCARD */

.mastercard-logo {
  color: #e11d48;
  background: #fff5f7;
  border-color: #ffd1dc;
  font-size: 10px;
}


/* JCB */

.jcb-logo {
  color: #1d4ed8;
  background: #f3f7ff;
  border-color: #cbdcff;
}


/* BANK */

.bank-logo {
  color: #344054;
  background: #f8fafc;
  border-color: #dce3eb;
  font-size: 9px;
}


/* +4 */

.more-count {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}


/* CHEVRON */

.chevron {
  font-size: 18px;
  color: #101828;
  transition: transform .25s ease;
}

.pay-accordion[open] .chevron {
  transform: rotate(90deg);
}


/* SUB OPTION */

.sub-options {
  padding: 0 4px 16px 4px;
}

.sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #e7edf4;
  border-radius: 10px;
  cursor: pointer;
  background: #fafcff;
  transition: .2s ease;
}

.sub-item:hover {
  border-color: #0877ee;
  background: #f5f9ff;
}

.sub-item input[type="radio"] {
  accent-color: #0877ee;
  width: 16px;
  height: 16px;
}

.sub-item span:last-child {
  font-size: 13px;
  font-weight: 500;
  color: #344054;
}


/* MOBILE */

@media (max-width: 600px) {

  .pay-card-summary {
    padding: 15px 2px;
  }

  .pay-card-content strong {
    font-size: 14px;
  }

  .payment-logo {
    height: 26px;
    min-width: 44px;
    padding: 3px 7px;
    font-size: 9px;
  }

  .pay-logo-group {
    gap: 5px;
  }

}

/* =========================================
   QRIS PAYMENT
   ========================================= */

.qris-payment {
  text-align: center;
  padding: 5px 0;
}

.qris-payment h2 {
  margin-bottom: 8px;
  color: #101828;
}

.qris-payment > p {
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.qris-merchant {
  background: #f5f9ff;
  border: 1px solid #dce8f5;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}

.qris-merchant strong {
  display: block;
  color: #0877ee;
  font-size: 15px;
  margin-bottom: 6px;
}

.qris-merchant span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.qris-merchant h3 {
  margin: 5px 0 0;
  font-size: 23px;
  color: #101828;
}

.qris-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  padding: 15px;
  margin: 0 auto 15px;
  max-width: 310px;
}

.qris-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  border-radius: 8px;
}

.qris-note {
  font-size: 12px !important;
  color: #667085 !important;
  margin-bottom: 18px !important;
}

.qris-payment .btn {
  margin-top: 8px;
}

/* Sembunyikan FAQ secara default */
.faq-container.hidden {
  display: none;
}

/* Tampilan Kotak FAQ saat aktif/muncul */
.faq-container {
  margin-top: 20px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease-in-out;
}

.faq-item {
  border-bottom: 1px solid #edf2f7;
  padding: 10px 0;
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  color: #2d3748;
}

.faq-item p {
  margin-top: 8px;
  color: #718096;
  font-size: 14px;
}

.faq-list.hidden {
  display: none !important;
}

/* Styling Modal FAQ Melayang */
.faq-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* Class untuk membuka Modal */
.faq-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.faq-modal-box {
  background: #ffffff;
  width: 90%;
  max-width: 500px;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.faq-modal-overlay.active .faq-modal-box {
  transform: translateY(0);
}

.faq-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.faq-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1e293b;
}

.faq-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
}

.faq-modal-body details {
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.faq-modal-body summary {
  font-weight: 600;
  cursor: pointer;
  color: #334155;
}

.faq-modal-body p {
  margin-top: 8px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* =========================================
   PRIMA UI UPGRADE — PROMO BANNER
   KODE TAMBAHAN
========================================= */

.prima-promo-banner {
  width: min(1180px, calc(100% - 40px));
  min-height: 260px;

  margin: 35px auto 55px;
  padding: 42px 48px;

  position: relative;
  overflow: hidden;

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

  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(0, 220, 255, 0.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 25% 50%,
      rgba(0, 255, 136, 0.10),
      transparent 35%
    ),
    rgba(8, 14, 12, 0.92);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 0 35px rgba(0, 255, 136, 0.025);

  isolation: isolate;
}


/* garis neon bagian atas */

.prima-promo-banner::before {
  content: "";

  position: absolute;

  top: 0;
  left: 8%;
  right: 8%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #00ff88,
    #00d9ff,
    transparent
  );

  opacity: 0.7;
}


/* garis neon bagian bawah */

.prima-promo-banner::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 20%;
  right: 20%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #00d9ff,
    #00ff88,
    transparent
  );

  opacity: 0.45;
}


/* =========================
   CONTENT
========================= */

.prima-promo-content {
  max-width: 650px;

  position: relative;
  z-index: 3;
}


.prima-promo-label {
  display: inline-flex;
  align-items: center;

  padding: 7px 12px;

  margin-bottom: 15px;

  border: 1px solid rgba(0, 255, 136, 0.22);
  border-radius: 999px;

  background: rgba(0, 255, 136, 0.06);

  color: #00ff88;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1px;
}


.prima-promo-content h2 {
  margin: 0;

  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.12;

  letter-spacing: -1px;
}


.prima-promo-content h2 span {
  display: block;

  color: #00ff88;

  text-shadow:
    0 0 18px rgba(0, 255, 136, 0.16);
}


.prima-promo-content p {
  max-width: 570px;

  margin: 15px 0 23px;

  color: #9aa6a1;

  font-size: 14px;
  line-height: 1.7;
}


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

.prima-promo-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 13px 19px;

  border: 0;
  border-radius: 12px;

  background: linear-gradient(
    135deg,
    #00ff88,
    #00d9a3
  );

  color: #031009;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 10px 28px rgba(0, 255, 136, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.prima-promo-button span {
  font-size: 18px;

  transition:
    transform 0.25s ease;
}


.prima-promo-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 35px rgba(0, 255, 136, 0.22);
}


.prima-promo-button:hover span {
  transform: translateX(4px);
}


/* =========================
   DECORATION
========================= */

.prima-promo-decoration {
  width: 300px;
  height: 210px;

  position: relative;

  flex-shrink: 0;
}


.prima-promo-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(35px);

  pointer-events: none;
}


.prima-promo-orb.orb-one {
  width: 130px;
  height: 130px;

  top: 30px;
  left: 65px;

  background: rgba(0, 255, 136, 0.14);
}


.prima-promo-orb.orb-two {
  width: 100px;
  height: 100px;

  top: 70px;
  right: 15px;

  background: rgba(0, 210, 255, 0.12);
}


/* =========================
   FLOATING ICON
========================= */

.prima-promo-icon {
  position: absolute;

  width: 62px;
  height: 62px;

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

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  background: rgba(10, 18, 15, 0.85);

  font-size: 26px;

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 255, 136, 0.05);

  backdrop-filter: blur(10px);
}


.prima-promo-icon.icon-one {
  top: 15px;
  left: 45px;

  animation:
    primaPromoFloat 4s ease-in-out infinite;
}


.prima-promo-icon.icon-two {
  top: 75px;
  left: 120px;

  animation:
    primaPromoFloat 4s ease-in-out infinite 0.8s;
}


.prima-promo-icon.icon-three {
  top: 125px;
  right: 35px;

  animation:
    primaPromoFloat 4s ease-in-out infinite 1.5s;
}


/* =========================
   FLOAT ANIMATION
========================= */

@keyframes primaPromoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {

  .prima-promo-banner {
    min-height: auto;

    padding: 35px 28px;

    flex-direction: column;
    align-items: flex-start;

    gap: 20px;
  }

  .prima-promo-decoration {
    width: 100%;
    height: 150px;
  }

  .prima-promo-icon.icon-one {
    left: 10%;
  }

  .prima-promo-icon.icon-two {
    left: 45%;
  }

  .prima-promo-icon.icon-three {
    right: 8%;
  }

}


@media (max-width: 520px) {

  .prima-promo-banner {
    width: calc(100% - 28px);

    margin: 25px auto 40px;

    padding: 28px 22px;

    border-radius: 20px;
  }

  .prima-promo-content h2 {
    font-size: 27px;
  }

  .prima-promo-content p {
    font-size: 13px;
  }

  .prima-promo-decoration {
    height: 125px;
  }

  .prima-promo-icon {
    width: 52px;
    height: 52px;

    border-radius: 15px;

    font-size: 22px;
  }

}

/* =========================================
   PRIMA UI — PROMO BANNER WHITE STYLE
   OVERRIDE TAMBAHAN
========================================= */

.prima-promo-banner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.08);
}

/* Garis atas */
.prima-promo-banner::before {
  background: linear-gradient(
    90deg,
    transparent,
    #00d9a3,
    #00cfff,
    transparent
  );
}

/* Garis bawah */
.prima-promo-banner::after {
  background: linear-gradient(
    90deg,
    transparent,
    #00cfff,
    #00d9a3,
    transparent
  );
}

/* Label promo */
.prima-promo-label {
  background: rgba(0, 217, 163, 0.08);
  border-color: rgba(0, 217, 163, 0.25);
  color: #00b889;
}

/* Judul utama */
.prima-promo-content h2 {
  color: #17211d;
}

/* Judul hijau */
.prima-promo-content h2 span {
  color: #00c992;

  text-shadow: none;
}

/* Deskripsi */
.prima-promo-content p {
  color: #66716c;
}

/* Tombol */
.prima-promo-button {
  background: linear-gradient(
    135deg,
    #00e69a,
    #00cfa5
  );

  color: #062019;

  box-shadow:
    0 10px 25px rgba(0, 201, 146, 0.16);
}

.prima-promo-button:hover {
  box-shadow:
    0 14px 32px rgba(0, 201, 146, 0.25);
}

/* Glow */
.prima-promo-orb.orb-one {
  background: rgba(0, 217, 163, 0.10);
}

.prima-promo-orb.orb-two {
  background: rgba(0, 207, 255, 0.10);
}

/* Icon */
.prima-promo-icon {
  background: #f7faf9;
  border-color: rgba(0, 0, 0, 0.06);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.08);
}

/* =========================================
   PRIMA UI UPGRADE #2
   QUICK SERVICES INTERACTIVE
========================================= */

.quick-service-item {
  cursor: pointer;
  position: relative;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


/* Hover */

.quick-service-item:hover {
  transform: translateY(-4px);

  background: rgba(0, 210, 255, 0.035);

  box-shadow:
    inset 0 -2px 0 #00d9a3;
}


/* Icon */

.quick-service-item span {
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


.quick-service-item:hover span {
  transform: scale(1.12);

  filter:
    drop-shadow(0 0 7px rgba(0, 210, 255, 0.45));
}


/* Judul */

.quick-service-item strong {
  transition:
    color 0.25s ease;
}


.quick-service-item:hover strong {
  color: #00bfa0;
}


/* Efek ketika diklik */

.quick-service-item:active {
  transform: translateY(-1px) scale(0.98);
}

/* =========================================
   PRIMA UI UPGRADE #3
   PREMIUM PRODUCT CARD
========================================= */

/* Card produk */
.product-grid > * {
  position: relative;
  overflow: hidden;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

/* Hover */
.product-grid > *:hover {
  transform: translateY(-7px);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 217, 163, 0.12);
}

/* Efek garis neon */
.product-grid > *::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    #00d9a3,
    #00cfff
  );

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}

.product-grid > *:hover::before {
  transform: scaleX(1);
}

/* Tombol di dalam card */
.product-grid > * button {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.product-grid > * button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0, 210, 170, 0.18);
}

/* Fokus keyboard */
.product-grid > *:focus-within {
  box-shadow:
    0 0 0 3px rgba(0, 217, 163, 0.12);
}

/* Mobile */
@media (max-width: 600px) {

  .product-grid > *:hover {
    transform: translateY(-3px);
  }

}

/* =========================================
   PRIMA UI UPGRADE #3B
   PRODUCT BADGE
========================================= */

.product-grid > * {
  position: relative;
}

/* Badge umum */
.product-grid > *::after {
  content: "POPULER";

  position: absolute;

  top: 12px;
  right: 12px;

  padding: 5px 9px;

  border-radius: 999px;

  background: rgba(0, 217, 163, 0.10);
  border: 1px solid rgba(0, 217, 163, 0.25);

  color: #00b889;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.7px;

  opacity: 0;
  transform: translateY(-5px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Badge muncul ketika card disentuh */
.product-grid > *:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   PREMIUM LOOK & FEEL UPGRADE (TANPA MENGUBAH WARNA UTAMA)
   ========================================================= */

/* 1. Glassmorphism pada Header & Topbar */
.header {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

/* 2. Kartu Produk Modern & Premium Elevation */
.product-grid > * {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px);
  border-radius: 20px !important;
  box-shadow: 
    0 10px 25px -5px rgba(0, 198, 255, 0.08),
    0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

.product-grid > *:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 
    0 20px 35px -10px rgba(0, 198, 255, 0.22),
    0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 217, 163, 0.4) !important;
}

/* 3. Tombol dengan Efek Glow & Radiance */
.btn.primary, 
.prima-promo-button,
.product-grid > * button {
  border-radius: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 217, 163, 0.3) !important;
}

.btn.primary:hover, 
.prima-promo-button:hover,
.product-grid > * button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 217, 163, 0.45) !important;
}

/* 4. Quick Services Item (Sentuhan Interaktif) */
.quick-service-item {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease !important;
}

.quick-service-item:hover {
  transform: translateY(-5px) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 25px rgba(0, 198, 255, 0.15) !important;
}

/* 5. Filter Category Tabs Premium */
.category-tabs .cat {
  border-radius: 30px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.category-tabs .cat.active {
  box-shadow: 0 6px 20px rgba(0, 198, 255, 0.35) !important;
}

/* 6. Form & Input Field Modern */
.search-box input,
#transactionForm input {
  border-radius: 14px !important;
  border: 1px solid rgba(0, 198, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

.search-box input:focus,
#transactionForm input:focus {
  border-color: #00d9a3 !important;
  box-shadow: 0 0 0 4px rgba(0, 217, 163, 0.15) !important;
  outline: none;
}

/* 7. Modal & Drawer Keranjang Glassmorphism */
.modal-card,
.cart-drawer {
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================================
   KODE PEMULIHAN (RESTORE BACKGROUND AWAL)
   ========================================================= */
body {
  background-color: #f4f6f9 !important; /* Kembali ke warna terang bawaan */
  color: inherit !important;
}

body::before,
body::after {
  display: none !important; /* Menghapus efek aurora/grid yang merusak tampilan */
}

/* =========================================================
   NEXT-GEN ULTRA-PREMIUM EFFECTS (MAIN SITE)
   ========================================================= */

/* Latar Belakang Mesh Gradient Halus untuk Seluruh Halaman */
body {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(at 0% 0%, rgba(0, 198, 255, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0, 217, 163, 0.08) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Efek Cahaya Menyapu (Shimmer / Light Sweep) pada Kartu Produk */
.product-grid > *::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.75s ease-in-out;
  pointer-events: none;
}

.product-grid > *:hover::before {
  left: 140%;
}

/* Indikator Status Pulsa/Produk "Aktif" (Glow Pulse Green) */
.product-grid > * .status-badge,
.quick-service-item::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #00d9a3;
  border-radius: 50%;
  box-shadow: 0 0 10px #00d9a3, 0 0 20px #00d9a3;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 217, 163, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 217, 163, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 217, 163, 0); }
}

/* Scrollbar Custom Premium */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00c6ff, #00d9a3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00c6ff;
}

/* =========================================================
   EFEK NEON HOVER PADA PRODUK (TANPA UBAH TEMA WEBSITE)
   ========================================================= */

/* Efek saat kursor menunjuk produk di Halaman Utama */
.product-grid > *,
.quick-service-item {
  transition: all 0.3s ease !important;
}

.product-grid > *:hover,
.quick-service-item:hover {
  transform: translateY(-5px) !important;
  border-color: #00ff88 !important; /* Border Hijau Neon */
  box-shadow: 
    0 0 15px rgba(0, 255, 136, 0.4),
    0 8px 25px rgba(0, 255, 136, 0.2) !important; /* Glow Hijau Neon */
}

/* =========================================================
   HERO BANNER MLBB 3D ANIMATION
   ========================================================= */

.mlbb-hero-banner {
  padding: 20px;
  perspective: 1000px; /* Memberikan kedalaman efek 3D */
}

.mlbb-banner-card {
  position: relative;
  background: linear-gradient(135deg, #020617 0%, #1e1b4b 50%, #0369a1 100%);
  border-radius: 28px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  overflow: hidden;
  border: 2px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.6), 0 0 30px rgba(56, 189, 248, 0.2);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Efek Tilt 3D saat Kursor Menunjuk Banner */
.mlbb-banner-card:hover {
  transform: rotateX(2deg) rotateY(-2deg) scale(1.01);
}

/* Judul Glowing */
.mlbb-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  line-height: 1.1;
  margin: 10px 0;
}

.mlbb-title span {
  display: block;
  font-size: 1.2rem;
  color: #38bdf8;
  letter-spacing: 1px;
}

/* Character 3D Floating Effect */
.mlbb-character-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.mlbb-char-3d {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.7));
  animation: float3D 4s ease-in-out infinite alternate;
}

@keyframes float3D {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  100% {
    transform: translateY(-18px) rotate(2deg) scale(1.04);
  }
}

/* Diamond Melayang 3D */
.floating-diamond {
  position: absolute;
  font-size: 2rem;
  filter: drop-shadow(0 0 10px #38bdf8);
}

.d1 {
  top: 10%;
  left: 10%;
  animation: float3D 3s ease-in-out infinite alternate-reverse;
}

.d2 {
  bottom: 15%;
  right: 10%;
  animation: float3D 5s ease-in-out infinite alternate;
}

/* Fitur Badge Grid */
.mlbb-tags {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.mlbb-tags span {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #e0f2fe;
}

.mlbb-features {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.feat-box {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 0.85rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feat-box small {
  display: block;
  color: #64748b;
  font-size: 0.75rem;
}

/* Chest Box */
.mlbb-chest-box {
  grid-column: span 2;
  margin-top: 25px;
  background: linear-gradient(90deg, rgba(30, 27, 75, 0.8), rgba(56, 189, 248, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #ffffff;
}

.chest-icon {
  font-size: 2rem;
  animation: pulseGlow 2s infinite;
}

/* Mengatur wrapper agar mengisi penuh area kolom kanan */
.mlbb-character-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px; /* Menjaga tinggi gambar tetap proporsional */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px; /* Sudut melengkung menyesuaikan desain */
}

/* Membuat gambar memenuhi seluruh kotak secara penuh (Full Cover) */
.mlbb-char-3d {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important; /* Memastikan gambar memenuhi kotak tanpa distorsi */
  object-position: center !important;
  border-radius: 20px !important;
}
@keyframes float3D {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

/* =========================================================
   PERBAIKAN GAMBAR BANNER KEPOTONG
   ========================================================= */

.mlbb-banner-card {
  position: relative !important;
  width: 100% !important;
  height: auto !important; /* Membuat tinggi mengikuti skala asli gambar */
  aspect-ratio: 16 / 6 !important; /* Menjaga rasio banner tetap utuh */
  padding: 0 !important;
  display: block !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 2px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.6) !important;
}

.mlbb-full-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Menampilkan seluruh isi gambar tanpa terpotong */
  object-position: center !important;
  display: block !important;
  background-color: #020617; /* Warna latar belakang jika ada sisa ruang */
}

/* =========================================
   PRIMA GAME PAGE — PREMIUM CARD UPGRADE
   ========================================= */

.game-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 220, 255, 0.10);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(246,251,253,0.94)
    );
  box-shadow:
    0 10px 30px rgba(8, 35, 55, 0.07);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* efek cahaya cyan di dalam card */
.game-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -100px;
  right: -80px;

  background: radial-gradient(
    circle,
    rgba(0, 220, 255, 0.18),
    transparent 70%
  );

  pointer-events: none;
  transition: 0.4s ease;
}

/* garis cahaya bawah */
.game-card::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;

  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #00d9ff,
    #00f5c8,
    transparent
  );

  opacity: 0;
  transform: scaleX(0.4);

  transition: 0.35s ease;
}

/* =========================================
   HOVER
   ========================================= */

.game-card:hover {
  transform: translateY(-8px);

  border-color: rgba(0, 210, 255, 0.55);

  box-shadow:
    0 18px 45px rgba(0, 190, 255, 0.13),
    0 0 25px rgba(0, 220, 255, 0.08);
}

.game-card:hover::before {
  transform: scale(1.4);
  opacity: 1;
}

.game-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================
   JUDUL GAME
   ========================================= */

.game-card h3 {
  position: relative;
  z-index: 2;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.game-card:hover h3 {
  color: #00aeca;
  transform: translateX(3px);
}

/* =========================================
   DESKRIPSI
   ========================================= */

.game-card p {
  position: relative;
  z-index: 2;

  color: #7b8790;
  transition: color 0.25s ease;
}

.game-card:hover p {
  color: #53616b;
}

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

.game-card a,
.game-card button {
  position: relative;
  z-index: 3;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.game-card a:hover,
.game-card button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0, 210, 255, 0.25);
}

/* =========================================
   GAME CARD ACTIVE / FOCUS
   ========================================= */

.game-card:focus-within {
  border-color: #00d9ff;

  box-shadow:
    0 0 0 3px rgba(0, 217, 255, 0.10),
    0 15px 40px rgba(0, 200, 255, 0.12);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

  .game-card {
    border-radius: 18px;
  }

  .game-card:hover {
    transform: translateY(-5px);
  }

}

/* =========================================
   PRIMA GAME — HERO PREMIUM UPGRADE
   ========================================= */

.game-hero {
  position: relative;
  overflow: hidden;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 15% 40%,
      rgba(0, 220, 255, 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(0, 245, 200, 0.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fcfd 50%,
      #f1fbfc 100%
    );
}

/* Cahaya bergerak di belakang hero */
.game-hero::before {
  content: "";
  position: absolute;

  width: 420px;
  height: 420px;

  left: -180px;
  top: 10px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 217, 255, 0.12),
    transparent 68%
  );

  filter: blur(10px);

  animation: heroGlow 7s ease-in-out infinite alternate;

  pointer-events: none;
  z-index: -1;
}

.game-hero::after {
  content: "";
  position: absolute;

  width: 350px;
  height: 350px;

  right: -120px;
  bottom: -150px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 245, 200, 0.13),
    transparent 68%
  );

  filter: blur(8px);

  animation: heroGlowRight 8s ease-in-out infinite alternate;

  pointer-events: none;
  z-index: -1;
}

@keyframes heroGlow {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(90px, 20px) scale(1.25);
  }
}

@keyframes heroGlowRight {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-60px, -30px) scale(1.2);
  }
}


/* =========================================
   BADGE TOP UP GAME
   ========================================= */

.game-hero .badge,
.game-hero .hero-badge {
  position: relative;

  border: 1px solid rgba(0, 210, 255, 0.25);

  background: rgba(255, 255, 255, 0.75);

  box-shadow:
    0 6px 20px rgba(0, 180, 220, 0.08),
    inset 0 0 15px rgba(0, 220, 255, 0.04);

  backdrop-filter: blur(12px);

  transition: 0.3s ease;
}

.game-hero .badge:hover,
.game-hero .hero-badge:hover {
  border-color: rgba(0, 210, 255, 0.6);

  box-shadow:
    0 8px 25px rgba(0, 210, 255, 0.14),
    0 0 15px rgba(0, 210, 255, 0.08);
}


/* =========================================
   JUDUL HERO
   ========================================= */

.game-hero h1 {
  position: relative;

  letter-spacing: -1.5px;

  background: linear-gradient(
    90deg,
    #073f4c,
    #00aeca,
    #00d9ff
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow:
    0 8px 30px rgba(0, 190, 220, 0.08);

  animation: titleFloat 4s ease-in-out infinite;
}

@keyframes titleFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

}


/* =========================================
   DESKRIPSI HERO
   ========================================= */

.game-hero p {
  color: #71808a;

  max-width: 560px;

  line-height: 1.8;
}


/* =========================================
   GARIS CAHAYA
   ========================================= */

.game-hero h1::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -14px;

  width: 90px;
  height: 3px;

  border-radius: 10px;

  background: linear-gradient(
    90deg,
    #00d9ff,
    #00f5c8,
    transparent
  );

  box-shadow:
    0 0 12px rgba(0, 217, 255, 0.45);
}


/* =========================================
   HERO BUTTON
   ========================================= */

.game-hero .btn,
.game-hero a.button {
  position: relative;
  overflow: hidden;

  border: none;

  background: linear-gradient(
    135deg,
    #00cfe8,
    #00e8b0
  );

  box-shadow:
    0 10px 25px rgba(0, 205, 220, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.game-hero .btn::before,
.game-hero a.button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );

  transform: skewX(-20deg);

  transition: 0.6s ease;
}

.game-hero .btn:hover,
.game-hero a.button:hover {
  transform: translateY(-4px);

  box-shadow:
    0 15px 35px rgba(0, 210, 230, 0.25),
    0 0 20px rgba(0, 220, 255, 0.12);
}

.game-hero .btn:hover::before,
.game-hero a.button:hover::before {
  left: 130%;
}


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

@media (max-width: 768px) {

  .game-hero h1 {
    letter-spacing: -0.8px;
  }

  .game-hero h1::after {
    width: 65px;
  }

}

/* =========================================
   PRIMA GAME — GAME SHOWCASE
   ========================================= */

.game-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  isolation: isolate;
}

/* Area visual game */
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;

  height: 125px;

  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(0, 230, 255, 0.45),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(4, 49, 63, 0.98),
      rgba(0, 174, 202, 0.82)
    );

  opacity: 0.95;

  transition:
    height 0.4s ease,
    filter 0.4s ease;
}

/* Cahaya tambahan */
.game-card::after {
  content: "";
  position: absolute;

  width: 180px;
  height: 180px;

  top: -90px;
  right: -50px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 255, 220, 0.32),
    transparent 68%
  );

  filter: blur(4px);

  transition:
    transform 0.5s ease,
    opacity 0.4s ease;

  pointer-events: none;
}

/* =========================================
   GAME-SPECIFIC SHOWCASE
   ========================================= */

/* Mobile Legends */
.game-card:nth-child(1)::before {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(0, 220, 255, 0.55),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #071d38,
      #0089b5
    );
}

/* Free Fire */
.game-card:nth-child(2)::before {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(255, 150, 0, 0.42),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #291004,
      #b94c00
    );
}

/* PUBG */
.game-card:nth-child(3)::before {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(255, 207, 70, 0.40),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #25200b,
      #a77712
    );
}

/* Valorant */
.game-card:nth-child(4)::before {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(255, 70, 80, 0.45),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #2b080d,
      #c72d3c
    );
}

/* Roblox */
.game-card:nth-child(5)::before {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(255, 255, 255, 0.35),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #161616,
      #454545
    );
}

/* Genshin */
.game-card:nth-child(6)::before {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(125, 220, 255, 0.48),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #102b42,
      #3b91b5
    );
}


/* =========================================
   ISI CARD DI ATAS VISUAL
   ========================================= */

.game-card > * {
  position: relative;
  z-index: 2;
}

/* Judul dan informasi turun ke bawah */
.game-card h3 {
  margin-top: auto;
}


/* =========================================
   HOVER SHOWCASE
   ========================================= */

.game-card:hover::before {
  height: 145px;

  filter: saturate(1.2) brightness(1.08);
}

.game-card:hover::after {
  transform: scale(1.35) translate(-15px, 15px);
  opacity: 0.9;
}


/* =========================================
   LABEL PREMIUM
   ========================================= */

.game-card:hover {
  transform: translateY(-9px) scale(1.015);
}


/* =========================================
   CYAN LIGHT SWEEP
   ========================================= */

.game-card {
  background-image:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,0.12) 50%,
      transparent 65%
    );

  background-size: 250% 100%;
  background-position: 150% 0;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-position 0.7s ease;
}

.game-card:hover {
  background-position: -50% 0;
}


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

@media (max-width: 768px) {

  .game-card {
    min-height: 250px;
  }

  .game-card::before {
    height: 110px;
  }

  .game-card:hover::before {
    height: 125px;
  }

}

/* =========================================
   GAME TOP UP MODAL — PREMIUM
   ========================================= */

.game-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

  padding: 20px;

  background: rgba(4, 12, 17, 0.65);

  backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.game-modal.active {
  opacity: 1;
  visibility: visible;
}

.game-modal-box {
  position: relative;

  width: min(520px, 100%);
  max-height: 90vh;

  overflow-y: auto;

  padding: 30px;

  border: 1px solid rgba(0, 229, 255, .20);
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5fbfc
    );

  box-shadow:
    0 30px 100px rgba(0, 0, 0, .25),
    0 0 45px rgba(0, 229, 255, .08);

  transform: translateY(25px) scale(.97);

  transition: transform .35s ease;
}

.game-modal.active .game-modal-box {
  transform: translateY(0) scale(1);
}


/* CLOSE */

.game-modal-close {
  position: absolute;

  top: 15px;
  right: 15px;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;

  background: #ffffff;

  color: #687680;

  font-size: 20px;

  cursor: pointer;

  transition: .25s ease;
}

.game-modal-close:hover {
  color: #00aabd;

  border-color: rgba(0,229,255,.35);

  box-shadow:
    0 0 15px rgba(0,229,255,.15);

  transform: rotate(90deg);
}


/* HEADER */

.game-modal-header {
  margin-bottom: 25px;
}

.game-modal-header small {
  display: block;

  margin-bottom: 7px;

  color: #00aabd;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.game-modal-header h2 {
  margin: 0;

  color: #101820;

  font-size: 27px;
  font-weight: 900;
}

.game-modal-header p {
  margin: 7px 0 0;

  color: #74818a;

  font-size: 13px;
}


/* GAME SELECTED */

.selected-game {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;
  padding: 15px;

  border: 1px solid rgba(0,229,255,.15);
  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(0,229,255,.07),
      rgba(182,255,0,.04)
    );
}

.selected-game-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border-radius: 14px;

  background: #071016;

  color: #00e5ff;

  font-size: 22px;

  box-shadow:
    0 0 20px rgba(0,229,255,.12);
}

.selected-game strong {
  display: block;

  color: #101820;

  font-size: 15px;
}

.selected-game span {
  color: #7b8790;

  font-size: 11px;
}


/* LABEL */

.game-form-group {
  margin-bottom: 18px;
}

.game-form-group label {
  display: block;

  margin-bottom: 8px;

  color: #26343d;

  font-size: 12px;
  font-weight: 800;
}


/* INPUT */

.game-input {
  width: 100%;

  height: 48px;

  padding: 0 15px;

  border: 1px solid rgba(20,40,50,.12);
  border-radius: 13px;

  outline: none;

  background: #f8fbfc;

  color: #17232a;

  font-size: 13px;

  transition: .25s ease;
}

.game-input:focus {
  border-color: #00d9ff;

  background: #ffffff;

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


/* NOMINAL */

.nominal-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-top: 8px;
}

.nominal-option {
  position: relative;

  cursor: pointer;
}

.nominal-option input {
  position: absolute;

  opacity: 0;
}

.nominal-option span {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 8px;

  border: 1px solid rgba(20,40,50,.12);
  border-radius: 12px;

  background: #ffffff;

  color: #34434c;

  font-size: 11px;
  font-weight: 800;

  text-align: center;

  transition: .25s ease;
}

.nominal-option:hover span {
  border-color: rgba(0,229,255,.45);

  color: #00aabd;

  transform: translateY(-2px);
}

.nominal-option input:checked + span {
  border-color: #00d9ff;

  background:
    linear-gradient(
      135deg,
      rgba(0,229,255,.10),
      rgba(182,255,0,.08)
    );

  color: #008ca0;

  box-shadow:
    0 5px 18px rgba(0,210,255,.10);
}


/* CONTINUE BUTTON */

.game-submit {
  width: 100%;

  min-height: 50px;

  margin-top: 8px;

  border: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #00d8ee,
      #00cfa8
    );

  color: white;

  font-size: 13px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 10px 25px rgba(0,200,220,.18);

  transition: .25s ease;
}

.game-submit:hover {
  transform: translateY(-3px);

  box-shadow:
    0 15px 32px rgba(0,200,220,.27),
    0 0 20px rgba(0,229,255,.12);
}


/* MOBILE */

@media (max-width: 600px) {

  .game-modal-box {
    padding: 24px 18px;

    border-radius: 22px;
  }

  .nominal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* =========================================================
   HERO BANNER 3D POP-OUT EFFECT (REVISED & CLEAN)
   ========================================================= */

.game-hero {
  position: relative !important;
  width: min(1180px, calc(100% - 40px));
  margin: 40px auto 30px;
  min-height: 320px;
  padding: 40px 50px;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* PENTING: overflow visible agar gambar bisa menembus keluar dari kotak */
  overflow: visible !important; 
  isolation: auto !important;

  border-radius: 24px;
  background: linear-gradient(135deg, #09131d 0%, #0d2136 50%, #051b2e 100%);
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(0, 229, 255, 0.15);
}

/* Sisi Kiri: Teks & Subtitle */
.game-hero-text {
  max-width: 550px;
  position: relative;
  z-index: 5;
  text-align: left;
}

.game-hero-text h1 {
  font-size: clamp(32px, 5vw, 54px) !important;
  line-height: 1.1 !important;
  margin: 15px 0 !important;
  text-align: left !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.game-hero-text h1 .highlight {
  color: #00e5ff;
  text-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
}

.game-hero-text p {
  color: #94a3b8 !important;
  font-size: 14px !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Sisi Kanan: Pembungkus Gambar Karakter */
.hero-character-box {
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 350px;
  height: 100%;
  pointer-events: none;
  z-index: 10; /* Berada di paling depan menembus border atas */
}

/* Gambar Karakter Anime menembus Atas Kotak */
.hero-character-box img.character-img {
  position: absolute;
  bottom: -5px;
  right: 0;
  height: 420px !important; /* Dibuat lebih tinggi dari banner (320px) agar "keluar" */
  width: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 25px rgba(0, 229, 255, 0.3));
  animation: float3DAnime 4s ease-in-out infinite alternate;
}

/* Animasi Melayang */
@keyframes float3DAnime {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-12px);
  }
}

/* Penyesuaian Responsif HP / Tablet */
@media (max-width: 850px) {
  .game-hero {
    flex-direction: column;
    padding: 30px 20px;
    margin-top: 20px;
    overflow: hidden !important; /* Pada HP ditutup agar layout tidak rusak */
  }

  .game-hero-text {
    max-width: 100%;
    text-align: center;
  }

  .game-hero-text h1,
  .game-hero-text p {
    text-align: center !important;
  }

  .hero-character-box {
    position: relative;
    right: auto;
    width: 100%;
    height: 220px;
    margin-top: 15px;
  }

  .hero-character-box img.character-img {
    position: relative;
    height: 240px !important;
    margin: 0 auto;
    display: block;
  }
}

html,
body,
button,
input,
textarea,
select {
    font-family: "Poppins", sans-serif;
}

body {
    font-family: "Poppins", sans-serif;
}

/* =========================================
   PRIMA — FLOATING NAVBAR
   ========================================= */

.header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: min(1180px, calc(100% - 32px));
  height: 68px;

  z-index: 1000;

  display: flex;
  align-items: center;

  padding: 0 18px;

  border: 1px solid rgba(0, 220, 255, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.08),
    0 0 0 rgba(0, 229, 255, 0);

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

/* Saat halaman discroll */
.header.scrolled {
  border-color: rgba(0, 220, 255, 0.25);

  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.12),
    0 0 25px rgba(0, 229, 255, 0.06);
}


/* =========================================
   NAVIGASI
   ========================================= */

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;

  margin-left: auto;
  margin-right: 15px;
}

.desktop-nav a {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 40px;

  padding: 0 13px;

  border-radius: 11px;

  color: #52616b;

  font-size: 12px;
  font-weight: 600;

  text-decoration: none;

  transition:
    color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.desktop-nav a:hover {
  color: #00a9bd;

  background: rgba(0, 220, 255, 0.07);

  transform: translateY(-2px);
}


/* ACTIVE */

.desktop-nav a.active {
  color: #009caf;

  background:
    linear-gradient(
      135deg,
      rgba(0, 229, 255, 0.11),
      rgba(0, 255, 200, 0.07)
    );
}

/* garis cyan kecil */

.desktop-nav a.active::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 4px;

  width: 18px;
  height: 2px;

  border-radius: 10px;

  background: #00d9ee;

  transform: translateX(-50%);

  box-shadow:
    0 0 8px rgba(0, 217, 238, 0.45);
}


/* =========================================
   HEADER ACTION
   ========================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}


/* =========================================
   EFEK "MELETUS"
   ========================================= */

.nav-burst {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #00dff5;

  pointer-events: none;

  animation: navBurst .65s ease-out forwards;
}

.nav-burst::before,
.nav-burst::after {
  content: "";

  position: absolute;

  inset: -4px;

  border: 1px solid rgba(0, 220, 255, 0.7);

  border-radius: 50%;

  animation: navRing .65s ease-out forwards;
}

.nav-burst::after {
  animation-delay: .08s;
}


@keyframes navBurst {

  0% {
    opacity: 1;
    transform: scale(.5);
  }

  60% {
    opacity: .9;
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }

}


@keyframes navRing {

  0% {
    opacity: .9;
    transform: scale(.5);
  }

  100% {
    opacity: 0;
    transform: scale(4);
  }

}


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

@media (max-width: 900px) {

  .header {
    width: calc(100% - 24px);
    top: 12px;

    height: 62px;

    border-radius: 18px;
  }

  .desktop-nav {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

}

/* =========================================
   NAVBAR CLICK — CYAN EXPLOSION
   ========================================= */

.nav-click-flash {
  position: fixed;

  z-index: 99999;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  pointer-events: none;

  background: #00eaff;

  transform: translate(-50%, -50%) scale(0);

  box-shadow:
    0 0 8px #00eaff,
    0 0 20px #00eaff,
    0 0 45px rgba(0, 234, 255, .8);

  animation:
    navFlash .55s ease-out forwards;
}


.nav-click-flash::before,
.nav-click-flash::after {

  content: "";

  position: absolute;

  inset: -5px;

  border: 2px solid #00eaff;

  border-radius: 50%;

  animation:
    navExplosionRing .55s ease-out forwards;
}


.nav-click-flash::after {
  animation-delay: .08s;
}


/* =========================================
   PARTICLES
   ========================================= */

.nav-particle {

  position: fixed;

  z-index: 99999;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  pointer-events: none;

  background: #00eaff;

  box-shadow:
    0 0 8px #00eaff,
    0 0 15px rgba(0, 234, 255, .8);

  transform:
    translate(-50%, -50%);

  animation:
    navParticle .65s ease-out forwards;
}


/* =========================================
   ANIMATION
   ========================================= */

@keyframes navFlash {

  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(.2);
  }

  35% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.8);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0);
  }

}


@keyframes navExplosionRing {

  0% {
    opacity: .9;
    transform: scale(.2);
  }

  100% {
    opacity: 0;
    transform: scale(4);
  }

}


@keyframes navParticle {

  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      translate(0, 0)
      scale(1);
  }

  70% {
    opacity: .9;
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      scale(.1);
  }

}
/* =========================================
   PRIMA — LIQUID GLASS FLOATING NAVBAR
   ========================================= */

.header {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);

    width: min(1180px, calc(100% - 32px));
    min-height: 68px;

    z-index: 1000;

    display: flex;
    align-items: center;

    padding: 8px 14px;

    /* LIQUID GLASS */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0.38)
        );

    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.75);

    border-radius: 22px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(255, 255, 255, 0.8) inset,
        0 -1px 5px rgba(255, 255, 255, 0.5) inset;

    overflow: hidden;

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


/* =========================================
   CAHAYA LIQUID
   ========================================= */

.header::before {
    content: "";

    position: absolute;

    top: -80px;
    left: 15%;

    width: 45%;
    height: 160px;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 229, 255, 0.20),
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

    animation: liquidGlow 6s ease-in-out infinite;
}


.header::after {
    content: "";

    position: absolute;

    right: 8%;
    bottom: -90px;

    width: 35%;
    height: 150px;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 255, 190, 0.15),
            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;

    animation: liquidGlow2 7s ease-in-out infinite;
}


@keyframes liquidGlow {

    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(35px) scale(1.15);
    }

}


@keyframes liquidGlow2 {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-30px);
    }

}
/* =========================================
   LIQUID GLASS — ACTIVE NAV
   KOTAK TETAP ADA, GARIS DIHILANGKAN
   ========================================= */

.desktop-nav a.active {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.72),
            rgba(0, 229, 255, 0.10)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;

    border-radius: 13px;

    box-shadow:
        0 4px 15px rgba(0, 180, 210, 0.08),
        0 1px 5px rgba(255, 255, 255, 0.85) inset !important;

    color: #008fa3 !important;
}

/* HILANGKAN GARIS DI BAWAH BERANDA */

.desktop-nav a.active::after {
    display: none !important;
}
/* =========================================
   LIQUID GLASS ACTIVE NAV
   ========================================= */

.desktop-nav a {
    position: relative;
    transition:
        color .25s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .25s ease;
}

.desktop-nav a.active {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.72),
        rgba(0, 229, 255, 0.10)
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;

    border-radius: 13px;

    color: #008fa3 !important;

    box-shadow:
        0 4px 15px rgba(0, 180, 210, 0.08),
        0 1px 5px rgba(255, 255, 255, 0.85) inset !important;
}

/* Tidak ada garis bawah */
.desktop-nav a.active::after {
    display: none !important;
}

/* =========================================
   NAV INDICATOR - BERGERAK
========================================= */

.nav-menu {
    position: relative !important;
}

.nav-link {
    position: relative !important;
    z-index: 2 !important;

    background: transparent !important;

    transition:
        color .3s ease,
        transform .3s ease !important;
}

/* Hilangkan kotak aktif bawaan */
.nav-link.active {
    background: transparent !important;
    color: #005da5 !important;
}

.nav-menu::before {
    content: "";

    position: absolute;

    top: 5px;
    left: var(--indicator-left, 5px);

    width: var(--indicator-width, 70px);
    height: calc(100% - 10px);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.9),
            rgba(225,242,250,.65)
        );

    box-shadow:
        0 5px 15px rgba(0,80,140,.10),
        inset 0 1px 0 rgba(255,255,255,.95);

    z-index: 1;

    transition:
        left .35s cubic-bezier(.4,0,.2,1),
        width .35s cubic-bezier(.4,0,.2,1);
}

/* =========================================
   NAVBAR ULTIMATE CYBER-GLASS PREMIUM
   ========================================= */

.header {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1200px, calc(100% - 32px)) !important;
  height: 68px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  border-radius: 20px !important;

  /* Glassmorphism Transparan */
  background: rgba(7, 27, 53, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

  /* Border Glowing Cyan */
  border: 1px solid rgba(0, 229, 255, 0.4) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 229, 255, 0.2) !important;
  transition: all 0.35s ease !important;
}

/* BRAND LOGO */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.brand strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

.brand small {
  color: #00e5ff !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
}

/* MENU NAVIGASI DESKTOP */
.desktop-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 5px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.desktop-nav a {
  color: #c8d9eb !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.desktop-nav a:hover {
  color: #ffffff !important;
  background: rgba(0, 229, 255, 0.2) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.8) !important;
}

.desktop-nav a.active {
  color: #071b35 !important;
  background: linear-gradient(135deg, #00f0ff, #0099ff) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.6) !important;
  font-weight: 700 !important;
}

/* TOMBOL AKSI NAVBAR */
.cart-btn {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 153, 255, 0.3)) !important;
  border: 1px solid rgba(0, 229, 255, 0.5) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.cart-btn:hover {
  background: linear-gradient(135deg, #00f0ff, #0088ff) !important;
  color: #071b35 !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
}

.cart-btn b {
  background: #ff0055 !important;
  color: #ffffff !important;
}

.icon-btn {
  color: #00e5ff !important;
  font-size: 20px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

/* =========================================
   BANNER FULL WITH NEON BORDER
   ========================================= */

.mlbb-hero-banner {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.mlbb-banner-card {
  width: 100% !important;
  max-width: 100% !important;
  height: 420px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;

  border-top: 2px solid #00f0ff !important;
  border-bottom: 2px solid #00f0ff !important;
  border-left: none !important;
  border-right: none !important;

  box-shadow: 
    0 -5px 15px rgba(0, 240, 255, 0.6),
    0 5px 15px rgba(0, 240, 255, 0.6),
    inset 0 0 15px rgba(0, 240, 255, 0.3) !important;
}

.mlbb-full-bg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
}

/* =========================================================
   PRIMA — ULTRA PREMIUM NAVBAR
   NAVBAR ONLY
   ========================================================= */

.header {
  position: fixed !important;

  top: 16px !important;
  left: 50% !important;

  transform: translateX(-50%) !important;

  width: min(1240px, calc(100% - 32px)) !important;
  height: 70px !important;

  padding: 0 18px 0 22px !important;

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

  z-index: 1000 !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      135deg,
      rgba(5, 25, 48, .92),
      rgba(7, 34, 65, .82)
    ) !important;

  border:
    1px solid rgba(0, 229, 255, .28) !important;

  box-shadow:
    0 18px 50px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 35px rgba(0, 229, 255, .10) !important;

  backdrop-filter:
    blur(22px) saturate(170%) !important;

  -webkit-backdrop-filter:
    blur(22px) saturate(170%) !important;

  transition:
    width .35s ease,
    top .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    border-color .35s ease !important;
}


/* SCROLLED */

.header.nav-scrolled {
  top: 10px !important;

  width: min(1180px, calc(100% - 26px)) !important;

  background:
    rgba(4, 20, 39, .96) !important;

  border-color:
    rgba(0, 229, 255, .42) !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.38),
    0 0 35px rgba(0,229,255,.13) !important;
}


/* TOP LIGHT */

.header::before {
  content: "";

  position: absolute;

  left: 7%;
  right: 7%;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,229,255,.75),
      transparent
    );

  opacity: .8;

  pointer-events: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
  position: relative;

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

  gap: 10px !important;

  min-width: 190px;

  text-decoration: none !important;

  color: #fff !important;

  z-index: 2;
}


.brand-logo-wrap {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(0,229,255,.17),
      rgba(0,110,255,.14)
    );

  border:
    1px solid rgba(0,229,255,.30);

  box-shadow:
    0 0 18px rgba(0,229,255,.10),
    inset 0 0 15px rgba(255,255,255,.035);

  overflow: hidden;

  transition: .35s ease;
}


.brand:hover .brand-logo-wrap {
  transform: translateY(-1px) scale(1.04);

  border-color:
    rgba(0,229,255,.65);

  box-shadow:
    0 0 25px rgba(0,229,255,.22);
}


.brand-logo {
  width: 40px !important;
  height: 40px !important;

  object-fit: contain !important;

  display: block !important;
}


.brand-text {
  display: flex;

  flex-direction: column;

  line-height: 1;
}


.brand strong {
  color: #fff !important;

  font-size: 16px !important;

  font-weight: 800 !important;

  letter-spacing: 1.4px !important;

  text-shadow:
    0 0 12px rgba(0,229,255,.25) !important;
}


.brand small {
  margin-top: 5px;

  color: #57dff0 !important;

  font-size: 8px !important;

  font-weight: 600 !important;

  letter-spacing: 1.7px !important;

  text-transform: uppercase;
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.desktop-nav {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

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

  gap: 3px !important;

  padding: 5px !important;

  border-radius: 15px;

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid rgba(255,255,255,.075);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);
}


.desktop-nav a {
  position: relative;

  display: flex;
  align-items: center;

  height: 40px;

  padding: 0 14px !important;

  border-radius: 11px;

  color: #aebfd3 !important;

  text-decoration: none !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  white-space: nowrap;

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


.desktop-nav a:hover {
  color: #fff !important;

  background:
    rgba(0,229,255,.09) !important;

  transform: translateY(-1px);
}


.desktop-nav a.active {
  color: #031525 !important;

  background:
    linear-gradient(
      135deg,
      #5ff7ff,
      #00c8ff 55%,
      #008cff
    ) !important;

  box-shadow:
    0 5px 18px rgba(0,190,255,.25),
    inset 0 1px 0 rgba(255,255,255,.55) !important;

  font-weight: 800 !important;
}


.desktop-nav a.active::after {
  content: "";

  position: absolute;

  left: 25%;
  right: 25%;

  bottom: 3px;

  height: 2px;

  border-radius: 99px;

  background: rgba(255,255,255,.8);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.header-actions {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin-left: auto;

  z-index: 2;
}


.icon-btn {
  width: 40px !important;
  height: 40px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  border-radius: 12px !important;

  background:
    rgba(255,255,255,.045) !important;

  color: #8feeff !important;

  cursor: pointer;

  transition: .3s ease !important;
}


.icon-btn:hover {
  color: #fff !important;

  background:
    rgba(0,229,255,.12) !important;

  border-color:
    rgba(0,229,255,.38) !important;

  box-shadow:
    0 0 18px rgba(0,229,255,.12);

  transform: translateY(-1px);
}


.search-icon {
  font-size: 22px;

  line-height: 1;

  transform: translateY(-1px);
}


/* CART */

.cart-btn {
  height: 40px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 7px !important;

  padding: 0 12px !important;

  border:
    1px solid rgba(0,229,255,.24) !important;

  border-radius: 12px !important;

  background:
    linear-gradient(
      135deg,
      rgba(0,229,255,.08),
      rgba(0,120,255,.12)
    ) !important;

  color: #eafcff !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  cursor: pointer;

  transition: .3s ease !important;
}


.cart-btn:hover {
  transform: translateY(-1px);

  border-color:
    rgba(0,229,255,.65) !important;

  background:
    linear-gradient(
      135deg,
      rgba(0,229,255,.18),
      rgba(0,120,255,.20)
    ) !important;

  box-shadow:
    0 0 22px rgba(0,229,255,.16);
}


.cart-icon {
  font-size: 15px;
}


.cart-btn b {
  min-width: 19px !important;
  height: 19px !important;

  display: grid !important;
  place-items: center !important;

  margin-left: 2px !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #ff4770,
      #ff0750
    ) !important;

  color: #fff !important;

  font-size: 9px !important;

  box-shadow:
    0 0 10px rgba(255,0,80,.28);
}


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

.menu-btn {
  position: relative;

  width: 40px !important;
  height: 40px !important;

  display: none;

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

  flex-direction: column;

  gap: 5px;

  border:
    1px solid rgba(0,229,255,.22) !important;

  border-radius: 12px !important;

  background:
    rgba(255,255,255,.045) !important;

  cursor: pointer;

  transition: .3s ease;
}


.menu-btn:hover {
  border-color:
    rgba(0,229,255,.55) !important;

  background:
    rgba(0,229,255,.10) !important;
}


.menu-line {
  width: 17px;
  height: 2px;

  border-radius: 99px;

  background: #baf7ff;

  transition: .3s ease;
}


.menu-btn.open .menu-line:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


.menu-btn.open .menu-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}


.menu-btn.open .menu-line:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   MOBILE NAV OVERLAY
   ========================================================= */

.mobile-nav-overlay {
  position: fixed;

  inset: 0;

  z-index: 998;

  background:
    rgba(1,7,15,.58);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.mobile-nav-overlay.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


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

.mobile-nav {
  position: fixed !important;

  top: 96px !important;

  left: 12px !important;
  right: 12px !important;

  width: auto !important;

  max-height:
    calc(100vh - 110px);

  overflow-y: auto;

  z-index: 999 !important;

  display: block !important;

  padding: 0 !important;

  border:
    1px solid rgba(0,229,255,.22) !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(5,24,47,.97),
      rgba(3,15,30,.97)
    ) !important;

  box-shadow:
    0 25px 70px rgba(0,0,0,.55),
    0 0 35px rgba(0,229,255,.10) !important;

  backdrop-filter:
    blur(25px) saturate(170%) !important;

  -webkit-backdrop-filter:
    blur(25px) saturate(170%) !important;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-12px)
    scale(.98);

  transform-origin: top center;

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}


.mobile-nav.show {
  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  transform:
    translateY(0)
    scale(1);
}


.mobile-nav-inner {
  padding: 18px;
}


/* MOBILE HEADER */

.mobile-nav-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


.mobile-nav-eyebrow {
  display: block;

  margin-bottom: 5px;

  color: #4fe9f7;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;
}


.mobile-nav-head strong {
  color: #fff;

  font-size: 13px;
}


.mobile-close {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 10px;

  background:
    rgba(255,255,255,.045);

  color: #fff;

  font-size: 23px;

  line-height: 1;

  cursor: pointer;

  transition: .25s ease;
}


.mobile-close:hover {
  background:
    rgba(255,40,90,.15);

  border-color:
    rgba(255,70,110,.4);

  color: #ff6b8c;
}


/* MOBILE LINKS */

.mobile-nav-links {
  display: grid;

  gap: 7px;

  padding: 15px 0;
}


.mobile-nav-links a {
  position: relative;

  display: grid;

  grid-template-columns:
    38px 1fr 20px;

  align-items: center;

  gap: 10px;

  min-height: 58px;

  padding: 9px 11px;

  border:
    1px solid transparent;

  border-radius: 14px;

  background:
    rgba(255,255,255,.025);

  color: #c8d9eb !important;

  text-decoration: none;

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


.mobile-nav-links a:hover {
  transform: translateX(3px);

  background:
    rgba(0,229,255,.075);

  border-color:
    rgba(0,229,255,.20);
}


.mobile-nav-links a.active {
  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.13),
      rgba(0,130,255,.07)
    );

  border-color:
    rgba(0,229,255,.25);
}


.mobile-nav-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    rgba(0,229,255,.075);

  color: #62edfa;

  font-size: 16px;

  border:
    1px solid rgba(0,229,255,.12);
}


.mobile-nav-links a span:nth-child(2) {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.mobile-nav-links a strong {
  color: #fff;

  font-size: 11px;

  font-weight: 700;
}


.mobile-nav-links a small {
  margin-top: 3px;

  color: #7188a1;

  font-size: 8px;
}


.mobile-nav-links a i {
  color: #4c718e;

  font-size: 20px;

  font-style: normal;

  transition: .25s ease;
}


.mobile-nav-links a:hover i,
.mobile-nav-links a.active i {
  color: #5defff;

  transform: translateX(3px);
}


/* MOBILE FOOTER */

.mobile-nav-footer {
  display: flex;

  align-items: center;

  gap: 8px;

  padding-top: 13px;

  border-top:
    1px solid rgba(255,255,255,.07);

  color: #7188a1;

  font-size: 8px;

  letter-spacing: .7px;
}


.status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #22d99a;

  box-shadow:
    0 0 10px rgba(34,217,154,.7);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .header {
    width:
      calc(100% - 24px) !important;
  }

  .desktop-nav {
    gap: 1px !important;
  }

  .desktop-nav a {
    padding:
      0 9px !important;

    font-size: 10px !important;
  }

  .brand {
    min-width: 165px;
  }

}


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

@media (max-width: 900px) {

  .header {
    top: 12px !important;

    height: 62px !important;

    padding:
      0 12px 0 14px !important;

    border-radius: 18px !important;
  }


  .header.nav-scrolled {
    top: 8px !important;

    width:
      calc(100% - 18px) !important;
  }


  .desktop-nav {
    display: none !important;
  }


  .brand {
    min-width: auto;

    gap: 8px !important;
  }


  .brand-logo-wrap {
    width: 38px;
    height: 38px;

    border-radius: 11px;
  }


  .brand-logo {
    width: 35px !important;
    height: 35px !important;
  }


  .brand strong {
    font-size: 14px !important;
  }


  .brand small {
    font-size: 7px !important;

    letter-spacing: 1.2px !important;
  }


  .menu-btn {
    display: flex !important;
  }


  .icon-btn {
    display: grid !important;
  }


  .cart-label {
    display: none;
  }


  .cart-btn {
    width: 40px;

    justify-content: center;

    padding: 0 !important;
  }


  .mobile-nav {
    top: 84px !important;
  }

}


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

@media (max-width: 520px) {

  .header {
    width:
      calc(100% - 16px) !important;

    padding:
      0 9px 0 11px !important;
  }


  .brand-text {
    display: none;
  }


  .brand-logo-wrap {
    width: 39px;
    height: 39px;
  }


  .header-actions {
    gap: 5px !important;
  }


  .mobile-nav {
    top: 80px !important;

    left: 8px !important;
    right: 8px !important;

    border-radius: 19px !important;
  }


  .mobile-nav-inner {
    padding: 14px;
  }


  .mobile-nav-links a {
    min-height: 55px;
  }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

  .icon-btn,
  .cart-btn,
  .menu-btn {
    width: 36px !important;
    height: 36px !important;
  }


  .brand-logo-wrap {
    width: 36px;
    height: 36px;
  }


  .brand-logo {
    width: 32px !important;
    height: 32px !important;
  }

}

/* =========================================================
   ULTRA PREMIUM UPGRADE
   FUTURISTIC BLUE • GLASS • CINEMATIC
   ========================================================= */

/* ---------- GLOBAL PREMIUM ---------- */

:root{
  --premium-blue:#1688ff;
  --premium-blue-2:#0066ff;
  --premium-cyan:#38bdf8;
  --premium-dark:#061426;
  --premium-glass:rgba(255,255,255,.72);
  --premium-border:rgba(255,255,255,.35);
  --premium-shadow:
    0 20px 60px rgba(5,25,55,.14),
    0 4px 15px rgba(5,25,55,.08);
}

body{
  color:#17243a;
  background-color:#071426;
}

/* ---------- SELECTION ---------- */

::selection{
  background:#1688ff;
  color:#fff;
}

/* ---------- HEADER ---------- */

.header{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 35px rgba(8,35,70,.08);
  transition:.35s ease;
}

.header:hover{
  box-shadow:0 12px 45px rgba(8,35,70,.13);
}

.brand{
  transition:.3s ease;
}

.brand:hover{
  transform:translateY(-1px);
}

.brand-mark{
  background:
    linear-gradient(135deg,#42b5ff 0%,#0877ee 45%,#0044b8 100%);
  box-shadow:
    0 10px 25px rgba(8,119,238,.28),
    inset 0 1px 1px rgba(255,255,255,.45);
  position:relative;
  overflow:hidden;
}

.brand-mark::after{
  content:"";
  position:absolute;
  inset:-80%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.5),
    transparent 65%
  );
  transform:rotate(25deg);
  animation:brandShine 4s infinite;
}

@keyframes brandShine{
  0%,65%{transform:translateX(-100%) rotate(25deg)}
  100%{transform:translateX(100%) rotate(25deg)}
}

.desktop-nav a{
  position:relative;
  transition:.25s ease;
}

.desktop-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:0;
  height:2px;
  border-radius:10px;
  background:linear-gradient(90deg,#1688ff,#38bdf8);
  transform:translateX(-50%);
  transition:.3s ease;
}

.desktop-nav a:hover::after,
.desktop-nav .active::after{
  width:70%;
}

.cart-btn{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border:1px solid rgba(8,103,232,.12);
  box-shadow:0 5px 18px rgba(8,50,100,.07);
  transition:.3s ease;
}

.cart-btn:hover{
  transform:translateY(-2px);
  border-color:#1688ff55;
  box-shadow:
    0 10px 25px rgba(8,103,232,.15),
    0 0 0 4px rgba(22,136,255,.06);
}

/* ---------- HERO ---------- */

.hero{
  min-height:620px;
  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(50,165,255,.25),
      transparent 35%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(0,90,255,.20),
      transparent 35%
    ),
    linear-gradient(
      125deg,
      #030b18 0%,
      #071b35 42%,
      #063f76 75%,
      #0874c9 100%
    );
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(3,10,22,.92) 0%,
      rgba(3,10,22,.65) 45%,
      transparent 100%
    );
  pointer-events:none;
}

.hero::after{
  width:650px;
  height:650px;
  border:1px solid rgba(126,205,255,.16);
  box-shadow:
    0 0 80px rgba(22,136,255,.12),
    inset 0 0 80px rgba(22,136,255,.06);
  animation:heroRing 12s linear infinite;
}

@keyframes heroRing{
  from{
    transform:rotate(0deg) scale(1);
  }
  50%{
    transform:rotate(180deg) scale(1.05);
  }
  to{
    transform:rotate(360deg) scale(1);
  }
}

.hero-content{
  animation:heroContentIn .9s ease both;
}

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

.hero h1{
  font-weight:850;
  letter-spacing:-1.8px;
  text-shadow:0 10px 40px rgba(0,0,0,.28);
}

.hero h1 em{
  background:linear-gradient(
    90deg,
    #fff,
    #65c5ff,
    #1688ff
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 5px 15px rgba(22,136,255,.25));
}

.hero p{
  line-height:1.8;
}

/* ---------- BUTTON PREMIUM ---------- */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,.3) 50%,
    transparent 75%
  );
  transform:translateX(-120%);
  transition:.65s ease;
  z-index:-1;
}

.btn:hover::before{
  transform:translateX(120%);
}

.btn.primary{
  background:
    linear-gradient(
      135deg,
      #3aaaff,
      #0877ee 55%,
      #0054cf
    );
  box-shadow:
    0 12px 28px rgba(8,119,238,.28),
    inset 0 1px 1px rgba(255,255,255,.4);
}

.btn.primary:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:
    0 18px 40px rgba(8,119,238,.35),
    0 0 25px rgba(22,136,255,.18);
}

.btn.secondary{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.28);
}

.btn.secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);
}

/* ---------- PHONE ---------- */

.phone{
  border-color:#172b43;
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    0 0 60px rgba(22,136,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.08);
  animation:phoneFloat 5s ease-in-out infinite;
}

@keyframes phoneFloat{
  0%,100%{
    transform:rotate(5deg) translateY(0);
  }
  50%{
    transform:rotate(3deg) translateY(-12px);
  }
}

.phone-screen{
  box-shadow:inset 0 0 30px rgba(20,90,170,.08);
}

/* ---------- FLOATING ORBS ---------- */

.orb-one{
  background:
    radial-gradient(
      circle,
      rgba(48,170,255,.35),
      rgba(19,133,255,.08) 55%,
      transparent 70%
    );
  filter:blur(3px);
  animation:orbFloat 7s ease-in-out infinite;
}

.orb-two{
  background:
    radial-gradient(
      circle,
      rgba(34,197,94,.28),
      transparent 70%
    );
  animation:orbFloat 9s ease-in-out infinite reverse;
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-15px,-22px)}
}

/* ---------- QUICK SERVICES ---------- */

.quick-services{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 25px 70px rgba(7,35,70,.16),
    0 3px 10px rgba(7,35,70,.06);
  padding:12px;
}

.quick-services div{
  border-right-color:rgba(10,70,130,.08);
  border-radius:11px;
  transition:.3s ease;
}

.quick-services div:hover{
  background:linear-gradient(
    135deg,
    rgba(22,136,255,.08),
    rgba(56,189,248,.03)
  );
  transform:translateY(-2px);
}

.quick-services span{
  filter:drop-shadow(0 5px 8px rgba(8,119,238,.18));
}

/* ---------- SECTIONS ---------- */

.section,
.price-section,
.transaction-section,
.help-section{
  position:relative;
}

.section-heading h2,
.help-copy h2{
  font-weight:800;
  letter-spacing:-.8px;
}

.section-heading h2{
  position:relative;
}

.section-heading h2::after{
  content:"";
  display:block;
  width:45px;
  height:3px;
  margin-top:10px;
  border-radius:20px;
  background:linear-gradient(90deg,#1688ff,#38bdf8);
}

/* ---------- SEARCH ---------- */

.search-box{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(15px);
  border-color:rgba(10,80,150,.12);
  box-shadow:0 8px 25px rgba(7,35,70,.06);
  transition:.3s ease;
}

.search-box:focus-within{
  border-color:#1688ff66;
  box-shadow:
    0 10px 30px rgba(22,136,255,.12),
    0 0 0 4px rgba(22,136,255,.06);
  transform:translateY(-1px);
}

/* ---------- CATEGORY ---------- */

.cat{
  transition:.3s ease;
  box-shadow:0 3px 10px rgba(7,35,70,.035);
}

.cat:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(8,119,238,.13);
}

.cat.active{
  background:
    linear-gradient(
      135deg,
      #1688ff,
      #0754d9
    );
  box-shadow:
    0 8px 22px rgba(8,119,238,.23);
}

/* ---------- PRODUCT CARDS ---------- */

.product-grid{
  gap:20px;
}

.product-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(247,251,255,.88)
    );
  border:1px solid rgba(8,70,130,.09);
  border-radius:18px;
  box-shadow:
    0 8px 25px rgba(7,35,70,.055),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(56,189,248,.10),
      transparent 35%
    );
  pointer-events:none;
}

.product-card:hover{
  transform:translateY(-8px);
  border-color:rgba(22,136,255,.25);
  box-shadow:
    0 22px 50px rgba(7,45,90,.13),
    0 0 0 1px rgba(22,136,255,.04);
}

.product-icon{
  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #dcefff
    );
  border:1px solid rgba(22,136,255,.08);
  box-shadow:
    0 8px 20px rgba(22,136,255,.09),
    inset 0 1px 1px rgba(255,255,255,.8);
  transition:.35s ease;
}

.product-card:hover .product-icon{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:
    0 12px 25px rgba(22,136,255,.15);
}

.price{
  background:linear-gradient(90deg,#075dcc,#1688ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.product-card button{
  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #e2f1ff
    );
  transition:.3s ease;
}

.product-card button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 9px 22px rgba(8,119,238,.22);
}

/* ---------- PRICE TABLE ---------- */

.price-table-wrap{
  border:1px solid rgba(8,70,130,.09);
  box-shadow:
    0 20px 55px rgba(7,35,70,.08);
  overflow:hidden;
}

.price-table-wrap th{
  background:
    linear-gradient(
      135deg,
      #f4f9ff,
      #eaf4ff
    );
}

.price-table-wrap tr{
  transition:.2s ease;
}

.price-table-wrap tbody tr:hover{
  background:rgba(22,136,255,.035);
}

.table-btn{
  background:
    linear-gradient(
      135deg,
      #1688ff,
      #0754d9
    );
  box-shadow:0 6px 15px rgba(8,119,238,.18);
  transition:.25s ease;
}

.table-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(8,119,238,.28);
}

/* ---------- TRANSACTION ---------- */

.transaction-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(56,189,248,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(22,136,255,.15),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #041224,
      #092445 55%,
      #063d70
    );
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 30px 70px rgba(2,20,45,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.transaction-card::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-150px;
  bottom:-170px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 70px rgba(22,136,255,.08);
}

.input-action input{
  background:rgba(255,255,255,.97);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.06);
}

.input-action .btn{
  flex-shrink:0;
}

/* ---------- BENEFITS ---------- */

.benefit-grid article{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(247,251,255,.82)
    );
  border:1px solid rgba(8,70,130,.08);
  box-shadow:0 12px 35px rgba(7,35,70,.055);
  transition:.35s ease;
  position:relative;
  overflow:hidden;
}

.benefit-grid article::before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  top:-55px;
  border-radius:50%;
  background:rgba(22,136,255,.06);
}

.benefit-grid article:hover{
  transform:translateY(-7px);
  border-color:rgba(22,136,255,.18);
  box-shadow:
    0 22px 45px rgba(7,35,70,.11);
}

.benefit-grid article>div{
  filter:drop-shadow(0 6px 10px rgba(22,136,255,.12));
}

/* ---------- FAQ ---------- */

.faq-list details{
  border-bottom:1px solid rgba(8,70,130,.09);
  transition:.25s ease;
}

.faq-list details[open]{
  padding-left:12px;
  border-left:3px solid #1688ff;
  background:linear-gradient(
    90deg,
    rgba(22,136,255,.05),
    transparent
  );
}

.faq-list summary{
  transition:.25s ease;
}

.faq-list summary:hover{
  color:#0877ee;
}

/* ---------- FOOTER ---------- */

footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(22,136,255,.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #020b18,
      #071b35
    );
  border-top:1px solid rgba(255,255,255,.06);
}

footer::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  right:-250px;
  bottom:-280px;
  border:1px solid rgba(56,189,248,.08);
  border-radius:50%;
}

.footer-main>div:not(:first-child) a{
  transition:.25s ease;
}

.footer-main>div:not(:first-child) a:hover{
  color:#fff;
  transform:translateX(4px);
}

/* ---------- OVERLAY ---------- */

.overlay{
  background:
    radial-gradient(
      circle at center,
      rgba(8,119,238,.08),
      rgba(2,10,22,.78)
    );
  backdrop-filter:blur(5px);
}

/* ---------- CART DRAWER ---------- */

.cart-drawer{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(246,250,255,.98)
    );
  box-shadow:
    -25px 0 70px rgba(2,20,45,.20);
  border-left:1px solid rgba(22,136,255,.08);
}

.cart-drawer.open{
  box-shadow:
    -25px 0 90px rgba(2,20,45,.25),
    -5px 0 30px rgba(22,136,255,.05);
}

.drawer-head{
  border-bottom-color:rgba(8,70,130,.09);
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
  width:9px;
}

::-webkit-scrollbar-track{
  background:#eef4fa;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      #38bdf8,
      #0877ee
    );
  border-radius:20px;
  border:2px solid #eef4fa;
}

::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      #1688ff,
      #0054cf
    );
}

/* ---------- MOBILE ---------- */

@media(max-width:760px){

  .header{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
  }

  .hero{
    min-height:650px;
    padding:70px 6% 55px;
  }

  .hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(3,10,22,.82),
        rgba(3,10,22,.5)
      );
  }

  .hero h1{
    letter-spacing:-1px;
  }

  .hero-visual{
    transform:scale(.82);
    margin-top:-15px;
  }

  .quick-services{
    margin:-25px 4% 0;
    border-radius:15px;
  }

  .product-card:hover{
    transform:translateY(-4px);
  }

  .transaction-card{
    padding:28px 22px;
  }
}

@media(max-width:440px){

  .hero{
    padding-left:5%;
    padding-right:5%;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .quick-services{
    padding:8px;
  }

  .product-card{
    border-radius:15px;
  }

  .transaction-card{
    border-radius:16px;
  }

  .btn{
    min-height:43px;
  }
}

/* ---------- REDUCE MOTION ---------- */

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

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

}

/* =========================================================
   ✨ ULTRA PREMIUM — SMOOTH UI ENHANCEMENT
   Tempel PALING BAWAH style.css
========================================================= */

/* ---------- GLOBAL SCROLL ---------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ---------- BUTTON & LINK ---------- */

button,
.btn,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn {
    transition:
        transform 0.25s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
}

button:active,
.btn:active {
    transform: translateY(0) scale(0.97);
}

a {
    transition:
        color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* ---------- CARD / BOX ---------- */

.card,
.game-card,
.product-card,
.feature-card,
.service-card,
.glass-card {
    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.card:hover,
.game-card:hover,
.product-card:hover,
.feature-card:hover,
.service-card:hover,
.glass-card:hover {
    transform: translateY(-5px);
}


/* ---------- IMAGE ---------- */

img {
    transition:
        transform 0.5s cubic-bezier(.2,.8,.2,1),
        opacity 0.3s ease;
}

.card img,
.game-card img,
.product-card img {
    overflow: hidden;
}

.card:hover img,
.game-card:hover img,
.product-card:hover img {
    transform: scale(1.035);
}


/* ---------- INPUT ---------- */

input,
textarea,
select {
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        transform 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    transform: translateY(-1px);
}


/* ---------- NAVBAR ---------- */

nav,
.navbar,
header {
    transition:
        background-color 0.35s ease,
        backdrop-filter 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* ---------- MODAL / POPUP ---------- */

.modal,
.popup,
.dropdown,
.menu {
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(.2,.8,.2,1),
        visibility 0.25s ease;
}


/* ---------- ICON ---------- */

.icon,
i,
svg {
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        opacity 0.25s ease;
}

button:hover i,
button:hover svg,
a:hover i,
a:hover svg {
    transform: scale(1.08);
}


/* ---------- IMAGE LOADING ---------- */

img {
    opacity: 1;
}

img[loading="lazy"] {
    content-visibility: auto;
}


/* ---------- TEXT SELECTION ---------- */

::selection {
    background: rgba(99, 102, 241, 0.25);
    color: inherit;
}


/* ---------- PREMIUM SCROLLBAR ---------- */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(120, 120, 120, 0.4);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.7);
}


/* ---------- MOBILE TOUCH ---------- */

@media (hover: none) {
    button:hover,
    .btn:hover,
    .card:hover,
    .game-card:hover,
    .product-card:hover,
    .feature-card:hover,
    .service-card:hover {
        transform: none;
    }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}