*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020205;color:#f5f5f8;font-family:Arial,Helvetica,sans-serif}.top{height:38px;border-bottom:1px solid #20202b;padding:0 4%;display:flex;justify-content:space-between;align-items:center;font-size:12px;background:#030306}.top b{color:#ff54da}.head{height:92px;padding:0 4%;display:flex;align-items:center;gap:26px;border-bottom:1px solid #181820}.logo{font-size:39px;font-weight:900;font-style:italic;color:#dfe2e7;text-shadow:0 0 12px #fff4;text-decoration:none;width:225px}.logo span{color:#ffc62e}.logo small{display:block;font-size:8px;letter-spacing:4px;color:#888;font-style:normal}.search{height:48px;display:flex;flex:1;max-width:680px;border:1px solid #ff3be4;border-radius:8px;box-shadow:0 0 20px #ff25e722;overflow:hidden}.search select,.search input{background:#08080d;border:0;color:#ccc;padding:0 16px;outline:0}.search select{border-right:1px solid #333;width:170px}.search input{flex:1}.search button{width:58px;background:#09090d;border:0;border-left:1px solid #ffc52c;color:#ffc52c;font-size:27px}.account,.wish,.cart-link{font-size:11px;color:#aaa}.account b,.wish b,.cart-link b{font-size:14px;color:#eee}.wish,.cart-link{position:relative;text-decoration:none}.wish sup,.cart-link sup{position:absolute;top:-13px;right:30px;background:#ffc52c;color:#111;border-radius:10px;padding:3px 6px;font-size:9px}.cart-link{color:#ffc52c;font-size:28px}.cart-link b{display:inline-block;vertical-align:middle;color:#eee;margin-left:8px}nav{height:48px;display:flex;align-items:center;gap:0;padding:0 4%;border-bottom:1px solid #181820;background:#040408}nav a,nav>b{padding:16px 18px;font-size:13px;color:#ddd;text-decoration:none;white-space:nowrap}nav>b{color:#ffd12d}nav .active{color:#ffd12d;border-bottom:2px solid #ffd12d}nav i{background:#ff3b91;border-radius:9px;padding:2px 6px;font-size:8px;font-style:normal}.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;max-width:1510px;margin:auto;padding:0 18px}.sidebar{border:1px solid #262636;background:linear-gradient(180deg,#090912,#030307);min-height:1000px}.sidebar h3{font-size:13px;color:#ffd02a;padding:18px;margin:0;border-bottom:1px solid #252536}.sidebar a{display:block;padding:12px 16px;border-bottom:1px solid #171720;color:#ddd;font-size:12px}.sidebar a:hover{background:#171022;color:#ff58dd}.sidebar button{margin:18px;width:calc(100% - 36px);padding:12px;border:1px solid #ff33dc;border-radius:8px;background:#09080f;color:#fff;font-weight:bold}.hero{position:relative;margin-top:0;overflow:hidden;border:1px solid #2c2040}.hero img{width:100%;height:505px;display:block;object-fit:cover;object-position:center top}.hero-overlay{position:absolute;inset:0;pointer-events:none}.hero-copy{position:absolute;left:6%;top:9%;text-shadow:0 0 16px #000}.hero-copy span{font-size:11px;letter-spacing:2px;color:#fff}.hero-copy h1{font-size:0;line-height:.9;margin:22px 0}.hero-copy h1 strong{font-size:62px;display:block;color:#f0f1f4;font-style:italic}.hero-copy h1 em{font-size:58px;color:#ffc72e;font-style:italic;font-weight:900}.hero-copy a{pointer-events:auto;display:inline-block;padding:13px 38px;border:2px solid #3ee7ff;border-radius:30px;color:#fff;background:#07101a;text-decoration:none;font-weight:900;box-shadow:0 0 20px #23dfff55}.benefits{margin-top:-1px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #35244e;background:#06060c}.benefits span{padding:12px 18px;border-right:1px solid #292036;color:#ff5be0;font-size:12px}.benefits small{display:block;color:#777;margin-left:28px;margin-top:3px}.cats{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;padding:18px 10px}.cat{text-align:center;font-size:11px;color:#ddd}.cat b{display:grid;place-items:center;width:60px;height:60px;margin:auto auto 8px;border-radius:50%;border:1px solid #d735f5;box-shadow:0 0 16px #c127ff44;color:#ff5ce3;font-size:24px}.cat:nth-child(2n) b{border-color:#28e6ff;box-shadow:0 0 16px #28e6ff44;color:#28e6ff}.cat.gold b{border-color:#ffc72c;color:#ffc72c;box-shadow:0 0 16px #ffc72c44}.flash{border:1px solid #3c2055;border-radius:12px;padding:10px;background:linear-gradient(180deg,#08060d,#030307)}.flash-head{display:flex;align-items:center;gap:20px;padding:5px 12px 13px}.flash-head h2{margin:0;color:#ffd02c;font-size:21px}.flash-head span{font-size:12px;color:#bbb}.flash-head strong{color:#e34cff;font-size:18px}.flash-head a{margin-left:auto;color:#ffd02c;font-size:12px}.products{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.product{border:1px solid #3a2052;border-radius:9px;background:#07070c;overflow:hidden;position:relative}.pic{height:155px;background:radial-gradient(circle at 50% 55%,#7d1ee955,transparent 48%),linear-gradient(145deg,#101017,#030307);position:relative;display:grid;place-items:center}.pic:after{content:'';width:45%;height:65%;border:1px solid #8a8992;border-radius:20px;transform:rotate(-8deg);box-shadow:0 0 25px #22dfff22}.p1:after{border-radius:5px;width:65%;height:40%}.p2:after{border-radius:30px;width:65%;height:30%}.p3:after{border-radius:50%;width:48%;height:60%}.p4:after{width:70%;height:30%}.p5:after{width:38%;height:60%;border-color:#ffc72c}.pic>b{position:absolute;top:8px;left:8px;color:#fff;background:#ff168d;border:1px solid #ff74c0;border-radius:12px;padding:4px 7px;font-size:10px}.pic span{position:absolute;top:9px;right:8px;color:#ffd02c;font-size:9px}.product h3{font-size:11px;line-height:1.35;margin:10px 9px 5px;min-height:30px}.price{font-size:13px;font-weight:900;color:#ffd02c;margin:0 9px}.price del{font-size:8px;color:#777;margin-left:3px}.rating{font-size:8px;color:#aaa;margin:8px 9px}.rating:first-letter{color:#ffd02c}.product>button{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border:1px solid #ff2fbd;border-radius:6px;background:#100711;color:#ff63db}.lower{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.lower article{min-height:130px;border:1px solid #2b2740;border-radius:12px;padding:20px;background:radial-gradient(circle at 80% 70%,#3a1b5c55,transparent 35%),#06070b}.lower h2{font-size:17px;margin:0}.lower p{font-size:10px;color:#888}.faq{padding:20px 0 70px}.faq h2{font-size:22px}.faq details{border:1px solid #292536;background:#07070c;padding:13px;margin:8px 0;border-radius:8px}.faq summary{cursor:pointer;font-weight:bold;font-size:12px}.faq p{color:#999;font-size:11px;line-height:1.7}.tools{position:fixed;right:14px;bottom:90px;z-index:20;display:flex;flex-direction:column;border:1px solid #ff32dc;border-radius:12px;background:#08070eec;box-shadow:0 0 25px #ff27d633;overflow:hidden}.tools button{width:62px;height:65px;border:0;border-bottom:1px solid #3a2945;background:transparent;color:#fff;font-size:20px}.tools small{display:block;font-size:8px;margin-top:5px}.tools button:nth-child(2){color:#ffd02c}.tools button:nth-child(3){color:#ff6bdd}@media(max-width:1050px){.layout{grid-template-columns:1fr}.sidebar{display:none}.products{grid-template-columns:repeat(3,1fr)}.cats{grid-template-columns:repeat(5,1fr)}.account,.wish{display:none}}@media(max-width:700px){.top{display:none}.head{height:65px;padding:0 10px;gap:8px}.logo{font-size:22px;width:auto}.logo small{display:none}.search{height:40px}.search select{display:none}.search button{width:42px}.cart-link b{display:none}.cart-link{font-size:21px}.head+.x{}nav{overflow:auto;padding:0 8px}nav a,nav>b{padding:15px 11px;font-size:10px}.hero img{height:360px}.hero-copy h1 strong{font-size:40px}.hero-copy h1 em{font-size:36px}.hero-copy{left:4%;top:8%}.benefits{grid-template-columns:repeat(2,1fr)}.benefits span{font-size:10px}.cats{display:flex;overflow:auto}.cat{min-width:76px}.cat b{width:48px;height:48px}.products{grid-template-columns:repeat(2,1fr)}.pic{height:130px}.lower{grid-template-columns:1fr}.tools{right:7px}.layout{padding:0 7px}}

/* =========================================================
   NEONX RESPONSIVE FIX — FINAL
   Mempertahankan desain asli desktop.
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

@media (max-width: 700px) {

  /* ===== HEADER ===== */
  .head {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .logo,
  .search,
  .wish,
  .cart-link {
    min-width: 0;
  }

  .logo {
    flex-shrink: 1;
  }

  .search {
    flex: 1 1 0;
    min-width: 0;
  }

  .search input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ===== NAVIGATION ===== */
  nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  /* ===== MAIN LAYOUT ===== */
  .layout,
  .tools,
  .lower,
  .flash,
  .faq,
  .benefits,
  .cats,
  .products {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ===== HERO =====
     Jangan paksa height. Biarkan rasio gambar asli. */
  .hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .hero img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    display: block;
  }

  /* ===== CATEGORY ===== */
  .cats {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .cats::-webkit-scrollbar {
    display: none;
  }

  /* ===== PRODUCT GRID ===== */
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product {
    min-width: 0;
  }

  .product img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* ===== LONG TEXT / PRICE ===== */
  .product h3,
  .price,
  .rating,
  .lower h2,
  .lower p {
    overflow-wrap: anywhere;
  }
}