:root {
      /* SHOPEE PREMIUM THEME */
      --shopee-orange: #f53d2d;
      /* Trused Shopee primary red/orange */
      --shopee-orange-deep: #d73227;
      /* Darker orange for hover states */
      --shopee-orange-light: #ff6a4a;
      /* Lighter gradient stop */
      --shopee-yellow: #fecb1b;
      --shopee-bg: #f8f8f8;

      /* GRADIENTS */
      --shopee-gradient: linear-gradient(135deg, var(--shopee-orange-light), var(--shopee-orange));
      --glass-bg: rgba(255, 255, 255, 0.75);
      --glass-border: rgba(255, 255, 255, 0.4);
      --glass-shadow: 0 8px 32px rgba(238, 77, 45, 0.08);

      /* OTHERS */
      --text-main: #333333;
      --text-muted: #7e7e7e;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', 'Poppins', sans-serif;
      /* Prioritize modern Inter */
      background: var(--shopee-bg);
      color: var(--text-main);
      overflow-x: hidden;
    }


    /* Cover Fullscreen */
    #cover {
      position: fixed;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 50;
      transition: opacity .8s ease, transform .8s ease;
    }

    #cover.hidden {
      opacity: 0;
      transform: scale(1.1);
      pointer-events: none;
    }

    /* Navbar Shopee */
    #navbar {
      background: var(--shopee-orange);
      color: white;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    #navbar input {
      border-radius: 9999px;
      padding: 0.4rem 1rem;
      width: 100%;
      outline: none;
      font-size: 0.85rem;
    }

    /* Tombol Shopee */
    .btn-shopee {
      background: var(--shopee-orange);
      color: white;
      border-radius: 9999px;
      padding: .6rem 1.5rem;
      font-weight: 600;
      transition: all .3s;
    }

    .btn-shopee:hover {
      background: #d93e20;
    }

    /* Card */
    .card-shopee {
      border-radius: 14px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(238, 77, 45, 0.05);
      transition: all 0.3s ease;
      position: relative;
    }

    .card-shopee:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(238, 77, 45, 0.12);
    }

    /* Product Tag / Discount Badge */
    .shopee-badge {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--shopee-yellow);
      color: var(--shopee-orange);
      font-size: 0.65rem;
      font-weight: 800;
      padding: 0.2rem 0.5rem;
      border-bottom-right-radius: 8px;
      z-index: 10;
      text-transform: uppercase;
    }

    /* Bottom Nav */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      padding: 0.5rem 0;
      font-size: 0.75rem;
      color: #555;
      z-index: 20;
    }

    .bottom-nav div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bottom-nav svg {
      width: 22px;
      height: 22px;
      margin-bottom: 2px;
    }

    /* Tombol Musik Futuristik */
    #musicControl {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      /* Glassmorphism / Futuristic Look */
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 15px rgba(245, 61, 45, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.2);

      color: var(--shopee-orange);
      /* Ubah ikon jadi orange biar kontras dengan blur */
      cursor: pointer;
      z-index: 40;
      animation: floatUpDown 3s ease-in-out infinite;
      transition: all 0.3s ease;
    }

    #musicControl:hover {
      background: rgba(255, 255, 255, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.5);
      transform: scale(1.05);
    }

    @keyframes floatUpDown {

      0%,
      100% {
        transform: translateY(0);
        box-shadow: 0 4px 15px rgba(245, 61, 45, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.2);
      }

      50% {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(245, 61, 45, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.3);
      }
    }

    #musicControl svg {
      width: 24px;
      height: 24px;
    }