@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#050b17;
  --bg2:#081426;
  --panel:#0b1930;
  --panel2:#0e203d;
  --card:#0b1a31;
  --line:rgba(148,180,220,.13);
  --primary:#4cc9ff;
  --primary2:#168cff;
  --text:#f5f9ff;
  --muted:#8ea3c2;
  --success:#22c55e;
  --danger:#ef4444;
  --shadow:0 24px 80px rgba(0,0,0,.28);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 8% -10%,rgba(76,201,255,.14),transparent 28%),
    radial-gradient(circle at 95% 18%,rgba(22,140,255,.12),transparent 25%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

/* =========================================
   NAVBAR
========================================= */

.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(5,11,23,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}

.nav-inner{
  max-width:1240px;
  min-height:78px;
  margin:auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:42px;
  height:42px;
  border-radius:13px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 8px 25px rgba(76,201,255,.18);
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand strong{
  display:block;
  font-size:15px;
  line-height:1.1;
  font-weight:800;
}

.brand span{
  display:block;
  color:#6f86a7;
  font-size:8px;
  letter-spacing:2px;
  margin-top:4px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-links a{
  color:#a9bad3;
  font-size:12px;
  font-weight:600;
  padding:10px 13px;
  border-radius:10px;
  transition:.2s;
}

.nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.nav-actions{
  display:flex;
  gap:9px;
}

.icon-btn{
  width:43px;
  height:43px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(10,28,52,.8);
  color:#fff;
  cursor:pointer;
  transition:.2s;
}

.icon-btn:hover{
  border-color:rgba(76,201,255,.45);
  transform:translateY(-1px);
}

.mobile-menu{
  position:fixed;
  top:88px;
  right:20px;
  z-index:999;
  width:260px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(11,25,48,.96);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  transform:translateY(-10px) scale(.96);
  opacity:0;
  visibility:hidden;
  transition:.2s;
}

.mobile-menu.show{
  transform:none;
  opacity:1;
  visibility:visible;
}

.mobile-menu a{
  display:block;
  padding:13px 14px;
  border-radius:11px;
  color:#b5c5dc;
  font-size:12px;
  font-weight:600;
}

.mobile-menu a:hover{
  background:#122743;
  color:#fff;
}

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

.hero{
  max-width:1240px;
  margin:auto;
  padding:78px 22px 55px;
}

.hero-content{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:60px;
  align-items:center;
}

.hero-badge,
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
}

.hero-badge{
  padding:9px 13px;
  border-radius:999px;
  background:rgba(76,201,255,.07);
  border:1px solid rgba(76,201,255,.18);
}

.hero h1{
  margin-top:18px;
  max-width:680px;
  font-size:clamp(42px,5.3vw,72px);
  line-height:1.04;
  letter-spacing:-2.5px;
  font-weight:800;
}

.hero h1 span{
  background:linear-gradient(90deg,#fff,var(--primary));
  -webkit-background-clip:text;
  color:transparent;
}

.hero p{
  max-width:600px;
  margin-top:20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
}

.hero-buttons{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:13px;
  font-size:12px;
  font-weight:800;
  transition:.2s;
}

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

.btn-primary{
  color:#03101c;
  background:linear-gradient(135deg,#67d5ff,var(--primary2));
  box-shadow:0 12px 30px rgba(22,140,255,.18);
}

.btn-outline{
  color:#bfeeff;
  border:1px solid rgba(76,201,255,.28);
  background:rgba(76,201,255,.04);
}

.hero-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:25px;
}

.hero-trust div{
  display:flex;
  align-items:center;
  gap:7px;
  color:#748aa9;
  font-size:10px;
}

.hero-trust i{
  color:var(--success);
}

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

.hero-visual{
  position:relative;
}

.hero-glow{
  position:absolute;
  width:330px;
  height:330px;
  right:8%;
  top:5%;
  background:rgba(76,201,255,.16);
  filter:blur(85px);
  border-radius:50%;
}

.dashboard-card{
  position:relative;
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:25px;
  background:linear-gradient(
    145deg,
    rgba(17,39,70,.92),
    rgba(7,17,34,.92)
  );
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.banner-slider{
  position:relative;
  overflow:hidden;
  border-radius:17px;
  aspect-ratio:16/8.2;
  background:#081426;
}

.slide{
  display:none;
  width:100%;
  height:100%;
  object-fit:cover;
}

.slide.active{
  display:block;
}

.slider-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:11px 0 4px;
}

.dot{
  width:7px;
  height:7px;
  border-radius:99px;
  background:#39516f;
  cursor:pointer;
  transition:.25s;
}

.dot.active{
  width:22px;
  background:var(--primary);
  box-shadow:0 0 14px rgba(76,201,255,.5);
}

.dashboard-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}

.dashboard-stats div{
  padding:12px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}

.dashboard-stats i{
  display:block;
  color:var(--primary);
  font-size:11px;
  margin-bottom:3px;
}

.dashboard-stats strong{
  display:block;
  font-size:17px;
}

.dashboard-stats span{
  font-size:9px;
  color:#7187a6;
}

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

.section{
  max-width:1240px;
  margin:auto;
  padding:68px 22px;
}

.section-heading{
  margin-bottom:25px;
}

.section-heading h2{
  font-size:32px;
  line-height:1.15;
  margin-top:7px;
  letter-spacing:-.8px;
}

.section-heading p{
  color:var(--muted);
  font-size:12px;
  margin-top:7px;
  max-width:600px;
}

.section-heading.center{
  text-align:center;
}

.section-heading.center p{
  margin-left:auto;
  margin-right:auto;
}

/* =========================================
   FEATURES
========================================= */

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

.feature-card{
  position:relative;
  padding:22px;
  min-height:190px;
  background:linear-gradient(
    145deg,
    rgba(13,31,57,.9),
    rgba(8,19,36,.9)
  );
  border:1px solid var(--line);
  border-radius:19px;
  transition:.25s;
}

.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(76,201,255,.25);
  box-shadow:0 18px 45px rgba(0,0,0,.2);
}

.feature-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:var(--primary);
  background:rgba(76,201,255,.08);
  border:1px solid rgba(76,201,255,.12);
  margin-bottom:17px;
}

.feature-card h3{
  font-size:15px;
}

.feature-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  margin-top:7px;
}

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

.product-section{
  padding-top:30px;
}

.product-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
}

.search-wrap{
  position:relative;
  margin:18px 0 13px;
}

.search-wrap i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#5f7696;
  font-size:13px;
}

.search{
  width:100%;
  height:52px;
  padding:0 17px 0 43px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  color:#fff;
  background:rgba(11,27,49,.8);
}

.search:focus{
  border-color:rgba(76,201,255,.45);
  box-shadow:0 0 0 3px rgba(76,201,255,.05);
}

.category-filter{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 18px;
}

.cat-btn{
  border:1px solid var(--line);
  padding:8px 13px;
  border-radius:999px;
  background:#0a1930;
  color:#8fa5c2;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.cat-btn:hover,
.cat-btn.active{
  color:#03101c;
  background:var(--primary);
  border-color:var(--primary);
}


/* =====================================================
   PRODUCTS
   INI BAGIAN YANG DIPERBAIKI
   SELALU 2 CARD SEJAJAR
===================================================== */

.products{
  display:grid !important;

  /* 2 CARD SEJAJAR */
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:15px !important;

  width:100% !important;
  max-width:100% !important;

  align-items:stretch !important;
  justify-items:stretch !important;

  margin:0 !important;
  padding:0 !important;
}


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

.products .product{
  position:relative;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  margin:0 !important;

  padding:10px;

  overflow:hidden;

  display:flex !important;
  flex-direction:column !important;

  border:1px solid var(--line);
  border-radius:20px;

  background:linear-gradient(
    145deg,
    #0d203d,
    #09172c
  );

  transition:.25s;
}

.products .product:hover{
  transform:translateY(-4px);
  border-color:rgba(76,201,255,.24);
  box-shadow:0 20px 55px rgba(0,0,0,.25);
}


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

.products .product-image{
  position:relative;

  width:100% !important;

  /*
    Jangan pakai height 205px di mobile.
    Aspect ratio membuat kedua card
    tetap sama ukurannya.
  */
  height:auto !important;

  aspect-ratio:16 / 10;

  min-height:0 !important;

  margin-bottom:13px;

  overflow:hidden;

  border-radius:15px;

  background:#071326;

  flex-shrink:0;
}

.products .product-image::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.25),
      transparent 45%
    );

  pointer-events:none;
}

.products .product-image img{
  width:100% !important;
  height:100% !important;

  display:block;

  object-fit:cover;

  transition:.4s;
}

.products .product:hover .product-image img{
  transform:scale(1.035);
}


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

.share-icon{
  position:absolute;
  right:10px;
  top:10px;
  z-index:3;

  width:38px;
  height:38px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;

  color:#fff;

  background:rgba(3,12,25,.62);

  backdrop-filter:blur(12px);

  cursor:pointer;
}


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

.product-top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:8px;

  margin:0 3px 10px;

  min-width:0;
}

.badge-game,
.badge-ready{
  padding:6px 9px;
  border-radius:8px;

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

  white-space:nowrap;
}

.badge-game{
  color:#83ddff;

  background:rgba(76,201,255,.08);

  border:1px solid rgba(76,201,255,.12);
}

.badge-ready{
  color:#62e695;

  background:rgba(34,197,94,.08);

  border:1px solid rgba(34,197,94,.12);
}


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

.product-title{
  padding:0 3px;

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

  line-height:1.4;

  min-height:40px;

  overflow-wrap:anywhere;
}

.product-desc{
  padding:0 3px;

  color:#8298b6;

  font-size:10px;

  line-height:1.7;

  min-height:50px;

  overflow-wrap:anywhere;
}

.price-label{
  padding:0 3px;

  margin-top:10px;

  color:#627996;

  font-size:8px;

  letter-spacing:1.5px;
}

.price{
  padding:0 3px;

  color:var(--primary);

  font-size:18px;

  font-weight:800;

  overflow-wrap:anywhere;
}


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

.products .product-buttons{
  display:flex !important;
  flex-direction:row !important;

  width:100% !important;

  gap:8px;

  margin-top:auto;

  padding-top:13px;
}

.products .buy-btn,
.products .detail-btn{
  flex:1 1 0 !important;

  width:50% !important;

  min-width:0 !important;

  min-height:42px;

  border-radius:11px;

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

  cursor:pointer;

  transition:.2s;

  white-space:nowrap;
}

.products .buy-btn{
  border:0;

  color:#03101c;

  background:
    linear-gradient(
      135deg,
      #64d4ff,
      var(--primary2)
    );
}

.products .detail-btn{
  border:1px solid rgba(76,201,255,.22);

  color:#bfeeff;

  background:rgba(76,201,255,.04);
}

.products .buy-btn:hover,
.products .detail-btn:hover{
  transform:translateY(-1px);
}


/* =========================================
   LOADING
========================================= */

.loading-card{
  height:365px;

  border-radius:20px;

  background:
    linear-gradient(
      90deg,
      #0b1930 25%,
      #112a4d 50%,
      #0b1930 75%
    );

  background-size:200% 100%;

  animation:skeleton 1.2s infinite;
}

@keyframes skeleton{
  to{
    background-position:-200% 0;
  }
}


/* =========================================
   PROCESS
========================================= */

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

.process-card{
  position:relative;

  padding:23px;

  border:1px solid var(--line);
  border-radius:18px;

  background:rgba(10,25,46,.65);
}

.process-card>span{
  position:absolute;

  right:17px;
  top:15px;

  color:#294566;

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

.process-card i{
  color:var(--primary);
  font-size:18px;
  margin-bottom:20px;
}

.process-card h3{
  font-size:14px;
}

.process-card p{
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
  margin-top:6px;
}


/* =========================================
   CTA
========================================= */

.cta-section{
  padding-top:20px;
}

.cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:28px 30px;

  border:1px solid rgba(76,201,255,.17);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(76,201,255,.1),
      transparent 35%
    ),
    #091a31;
}

.cta-card h2{
  font-size:25px;
  margin-top:5px;
}

.cta-card p{
  color:var(--muted);
  font-size:11px;
  margin-top:5px;
}


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

footer{
  margin-top:40px;

  padding:48px 22px 22px;

  border-top:1px solid var(--line);

  background:#040a14;
}

.footer-grid{
  max-width:1240px;
  margin:auto;

  display:grid;

  grid-template-columns:2fr 1fr 1fr;

  gap:45px;
}

.footer-brand p{
  max-width:410px;

  color:#7186a3;

  font-size:11px;

  line-height:1.8;

  margin-top:14px;
}

.footer-grid h3{
  font-size:12px;
  margin-bottom:12px;
}

.footer-grid>div:not(.footer-brand) a{
  display:block;

  color:#7186a3;

  font-size:11px;

  margin:9px 0;
}

.footer-grid a:hover{
  color:var(--primary);
}

.footer-bottom{
  max-width:1240px;

  margin:35px auto 0;

  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.06);

  display:flex;

  justify-content:space-between;

  gap:15px;

  color:#4f6380;

  font-size:9px;
}

.footer-brand-logo .brand-logo{
  width:45px;
  height:45px;
}


/* =========================================
   LIGHT MODE
========================================= */

.light-mode{
  --bg:#f3f7fc;
  --bg2:#fff;
  --panel:#fff;
  --panel2:#eef5ff;
  --card:#fff;

  --line:rgba(18,43,73,.11);

  --text:#102039;
  --muted:#61718a;
}

.light-mode .navbar{
  background:rgba(255,255,255,.8);
}

.light-mode .nav-links a{
  color:#53647d;
}

.light-mode .nav-links a:hover{
  color:#102039;
  background:#edf4fc;
}

.light-mode .icon-btn,
.light-mode .mobile-menu,
.light-mode .cat-btn,
.light-mode .search,
.light-mode .feature-card,
.light-mode .product,
.light-mode .process-card,
.light-mode .dashboard-card{
  background:#fff;
  color:#102039;
}

.light-mode .mobile-menu a{
  color:#53647d;
}

.light-mode .product{
  background:
    linear-gradient(
      145deg,
      #fff,
      #f2f7fd
    );
}

.light-mode .search{
  color:#102039;
}

.light-mode .search::placeholder{
  color:#8190a5;
}

.light-mode footer{
  background:#eaf0f7;
}

.light-mode .hero h1 span{
  background:
    linear-gradient(
      90deg,
      #102039,
      #168cff
    );

  -webkit-background-clip:text;
}


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

@media(max-width:900px){

  .nav-links{
    display:none;
  }

  .hero{
    padding-top:55px;
  }

  .hero-content{
    grid-template-columns:1fr;
    gap:35px;
  }

  .hero h1{
    letter-spacing:-1.5px;
  }

  .features,
  .process-grid{
    grid-template-columns:1fr;
  }

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

  /*
    TETAP 2 CARD
    DI TABLET
  */
  .products{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:12px !important;
  }

  .products .product{
    width:100% !important;
  }

  .products .product-image{
    aspect-ratio:16 / 10 !important;
    height:auto !important;
  }
}


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

@media(max-width:600px){

  .nav-inner{
    min-height:68px;
    padding:0 14px;
  }

  .brand strong{
    font-size:13px;
  }

  .hero{
    padding:43px 14px 25px;
  }

  .section{
    padding:48px 14px;
  }

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

  .hero p{
    font-size:12px;
  }

  .hero-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .hero-trust{
    gap:10px;
  }

  .dashboard-card{
    padding:8px;
    border-radius:19px;
  }

  .dashboard-stats{
    gap:5px;
  }

  .dashboard-stats div{
    padding:9px 4px;
  }

  .dashboard-stats strong{
    font-size:14px;
  }


  /* =========================================
     MOBILE PRODUCT GRID
     2 CARD SEJAJAR
  ========================================= */

  .products{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:9px !important;

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* CARD */

  .products .product{
    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    margin:0 !important;

    padding:7px !important;

    border-radius:16px !important;

    display:flex !important;

    flex-direction:column !important;

    overflow:hidden !important;
  }


  /* IMAGE */

  .products .product-image{
    width:100% !important;

    height:auto !important;

    aspect-ratio:16 / 10 !important;

    min-height:0 !important;

    margin-bottom:9px !important;

    border-radius:12px !important;

    overflow:hidden !important;
  }

  .products .product-image img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
  }


  /* TOP */

  .products .product-top{
    margin:0 2px 7px !important;

    gap:4px !important;

    min-width:0 !important;
  }

  .products .badge-game,
  .products .badge-ready{
    font-size:7px !important;

    padding:5px 6px !important;

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
  }


  /* TITLE */

  .products .product-title{
    padding:0 2px !important;

    font-size:11px !important;

    line-height:1.35 !important;

    min-height:32px !important;

    overflow-wrap:anywhere !important;
  }


  /* DESCRIPTION */

  .products .product-desc{
    padding:0 2px !important;

    font-size:8px !important;

    line-height:1.5 !important;

    min-height:42px !important;

    overflow-wrap:anywhere !important;
  }


  /* PRICE */

  .products .price-label{
    padding:0 2px !important;

    margin-top:7px !important;

    font-size:7px !important;
  }

  .products .price{
    padding:0 2px !important;

    font-size:14px !important;

    line-height:1.4 !important;
  }


  /* BUTTON */

  .products .product-buttons{
    display:flex !important;

    flex-direction:row !important;

    width:100% !important;

    gap:5px !important;

    margin-top:auto !important;

    padding-top:10px !important;
  }

  .products .buy-btn,
  .products .detail-btn{
    width:50% !important;

    min-width:0 !important;

    flex:1 1 0 !important;

    min-height:37px !important;

    padding:0 4px !important;

    font-size:9px !important;

    border-radius:9px !important;

    white-space:nowrap !important;
  }


  .section-heading h2{
    font-size:26px;
  }

  .cta-card{
    display:block;
    padding:23px;
  }

  .cta-card .btn{
    width:100%;
    margin-top:17px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin-top:5px;
  }
}


/* =====================================================
   VERY SMALL PHONE
   Tetap 2 card
===================================================== */

@media(max-width:380px){

  .products{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:7px !important;
  }

  .products .product{
    padding:6px !important;
    border-radius:15px !important;
  }

  .products .product-image{
    aspect-ratio:16 / 10 !important;
    border-radius:11px !important;
  }

  .products .product-title{
    font-size:10px !important;
  }

  .products .product-desc{
    font-size:7px !important;
  }

  .products .price{
    font-size:13px !important;
  }

  .products .buy-btn,
  .products .detail-btn{
    min-height:35px !important;
    font-size:8px !important;
  }
}


/* =====================================================
   FINAL OVERRIDE
   Taruh paling bawah supaya CSS lain kalah
===================================================== */

#products,
.products{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-auto-flow:row !important;

  width:100% !important;
  max-width:100% !important;

  gap:10px !important;

  margin-left:0 !important;
  margin-right:0 !important;
}

#products > .product,
.products > .product{
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  margin:0 !important;
}

#products > .product .product-image,
.products > .product .product-image{
  width:100% !important;

  height:auto !important;

  aspect-ratio:16 / 10 !important;

  min-height:0 !important;
}

#products > .product .product-image img,
.products > .product .product-image img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
}

#products > .product .product-buttons,
.products > .product .product-buttons{
  display:flex !important;
  flex-direction:row !important;

  width:100% !important;

  margin-top:auto !important;
}

#products > .product .buy-btn,
#products > .product .detail-btn,
.products > .product .buy-btn,
.products > .product .detail-btn{
  width:50% !important;

  min-width:0 !important;

  flex:1 1 0 !important;
}


/* FINAL MOBILE FORCE */

@media(max-width:600px){

  #products,
  .products{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-auto-columns:auto !important;

    grid-auto-flow:row !important;

    gap:9px !important;

    width:100% !important;
  }

  #products > .product,
  .products > .product{
    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    margin:0 !important;
  }
}

/* =========================================================
   YAMZZ MARKET — FINAL PRODUCT CARD FIX
   2 CARD SEJAJAR + STYLE TETAP
   ========================================================= */

/* CONTAINER PRODUK */
.products,
#products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* CARD */
.products .product,
#products .product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 10px !important;

  overflow: hidden !important;

  border: 1px solid var(--line) !important;
  border-radius: 20px !important;

  background: linear-gradient(
    145deg,
    #0d203d,
    #09172c
  ) !important;

  box-shadow: none !important;

  transition: .25s ease !important;
}

.products .product:hover,
#products .product:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(76,201,255,.24) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.25) !important;
}

/* GAMBAR */
.products .product-image,
#products .product-image {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  aspect-ratio: 16 / 10 !important;

  min-height: 0 !important;

  margin: 0 0 13px 0 !important;

  overflow: hidden !important;

  border-radius: 15px !important;

  background: #071326 !important;
}

.products .product-image img,
#products .product-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  transition: .4s ease !important;
}

.products .product:hover .product-image img,
#products .product:hover .product-image img {
  transform: scale(1.035) !important;
}

/* OVERLAY GAMBAR */
.products .product-image::after,
#products .product-image::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.25),
    transparent 45%
  ) !important;
}

/* SHARE */
.products .share-icon,
#products .share-icon {
  position: absolute !important;

  right: 10px !important;
  top: 10px !important;

  z-index: 5 !important;

  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 11px !important;

  color: #fff !important;

  background: rgba(3,12,25,.62) !important;

  backdrop-filter: blur(12px) !important;

  cursor: pointer !important;
}

/* BAGIAN ATAS CARD */
.products .product-top,
#products .product-top {
  display: flex !important;

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

  gap: 8px !important;

  margin: 0 3px 10px !important;
}

/* BADGE GAME */
.products .badge-game,
#products .badge-game {
  padding: 6px 9px !important;

  border-radius: 8px !important;

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

  color: #83ddff !important;

  background: rgba(76,201,255,.08) !important;

  border: 1px solid rgba(76,201,255,.12) !important;
}

/* BADGE READY / SOLD */
.products .badge-ready,
#products .badge-ready {
  padding: 6px 9px !important;

  border-radius: 8px !important;

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

  color: #62e695 !important;

  background: rgba(34,197,94,.08) !important;

  border: 1px solid rgba(34,197,94,.12) !important;
}

/* JUDUL */
.products .product-title,
#products .product-title {
  padding: 0 3px !important;

  min-height: 40px !important;

  color: var(--text) !important;

  font-size: 14px !important;
  font-weight: 800 !important;

  line-height: 1.4 !important;
}

/* DESKRIPSI */
.products .product-desc,
#products .product-desc {
  padding: 0 3px !important;

  min-height: 50px !important;

  color: #8298b6 !important;

  font-size: 10px !important;

  line-height: 1.7 !important;
}

/* LABEL HARGA */
.products .price-label,
#products .price-label {
  padding: 0 3px !important;

  margin-top: 10px !important;

  color: #627996 !important;

  font-size: 8px !important;

  letter-spacing: 1.5px !important;
}

/* HARGA */
.products .price,
#products .price {
  padding: 0 3px !important;

  color: var(--primary) !important;

  font-size: 18px !important;

  font-weight: 800 !important;
}

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

.products .product-buttons,
#products .product-buttons {
  display: flex !important;

  flex-direction: row !important;

  width: 100% !important;

  gap: 8px !important;

  margin-top: auto !important;
  padding-top: 13px !important;
}

/* SEMUA BUTTON PRODUK */
.products .buy-btn,
.products .detail-btn,
#products .buy-btn,
#products .detail-btn {
  position: relative !important;

  display: inline-flex !important;

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

  flex: 1 1 0 !important;

  width: 50% !important;
  min-width: 0 !important;

  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 10px !important;

  border-radius: 11px !important;

  font-family: 'Poppins', sans-serif !important;

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

  line-height: normal !important;

  cursor: pointer !important;

  box-sizing: border-box !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition: .2s ease !important;
}

/* BELI */
.products .buy-btn,
#products .buy-btn {
  border: 0 !important;

  color: #03101c !important;

  background: linear-gradient(
    135deg,
    #64d4ff,
    var(--primary2)
  ) !important;

  box-shadow: none !important;
}

.products .buy-btn:hover,
#products .buy-btn:hover {
  transform: translateY(-1px) !important;

  background: linear-gradient(
    135deg,
    #70d9ff,
    #168cff
  ) !important;
}

/* DETAIL */
.products .detail-btn,
#products .detail-btn {
  border: 1px solid rgba(76,201,255,.22) !important;

  color: #bfeeff !important;

  background: rgba(76,201,255,.04) !important;
}

.products .detail-btn:hover,
#products .detail-btn:hover {
  transform: translateY(-1px) !important;

  border-color: rgba(76,201,255,.45) !important;

  background: rgba(76,201,255,.08) !important;
}

/* =========================================================
   MOBILE — TETAP 2 KOLOM
   ========================================================= */

@media (max-width: 600px) {

  .products,
  #products {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
  }

  .products .product,
  #products .product {
    padding: 7px !important;

    border-radius: 16px !important;
  }

  .products .product-image,
  #products .product-image {
    aspect-ratio: 16 / 10 !important;

    margin-bottom: 9px !important;

    border-radius: 12px !important;
  }

  .products .product-title,
  #products .product-title {
    min-height: 32px !important;

    font-size: 11px !important;
  }

  .products .product-desc,
  #products .product-desc {
    min-height: 42px !important;

    font-size: 8px !important;
  }

  .products .price,
  #products .price {
    font-size: 14px !important;
  }

  .products .badge-game,
  .products .badge-ready,
  #products .badge-game,
  #products .badge-ready {
    padding: 5px 6px !important;

    font-size: 7px !important;
  }

  .products .product-buttons,
  #products .product-buttons {
    display: flex !important;

    flex-direction: row !important;

    gap: 6px !important;

    width: 100% !important;
  }

  .products .buy-btn,
  .products .detail-btn,
  #products .buy-btn,
  #products .detail-btn {
    width: 50% !important;

    min-width: 0 !important;

    min-height: 37px !important;

    padding: 0 5px !important;

    border-radius: 9px !important;

    font-size: 9px !important;

    font-weight: 800 !important;
  }
}

/* HP SANGAT KECIL */
@media (max-width: 380px) {

  .products,
  #products {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;
  }

  .products .product,
  #products .product {
    padding: 6px !important;
  }

  .products .product-buttons,
  #products .product-buttons {
    gap: 5px !important;
  }

  .products .buy-btn,
  .products .detail-btn,
  #products .buy-btn,
  #products .detail-btn {
    min-height: 35px !important;

    font-size: 8px !important;
  }
  }