html,
      body {
        margin: 0;
        overflow: hidden;
        touch-action: none; /* supaya gesture ke canvas, bukan scroll */
      }

      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      /* Badge loading di tengah atas */
      .loading-badge {
        position: fixed;
        top: 45vh;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 999px;
        z-index: 30;
        display: none;
        align-items: center;
        gap: 6px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .loading-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #ff5252;
        border-top-color: transparent;
        animation: spin 0.7s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Hint kecil di atas bottom bar */
      .hint {
        position: fixed;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 11px;
        padding: 6px 10px;
        border-radius: 999px;
        z-index: 20;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        pointer-events: none;
        max-width: calc(100% - 40px);
        text-align: center;
      }

      /* BOTTOM BAR – seperti mockup kamu */
      .bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        padding: 30px 10px 18px 10px;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.9),
          rgba(0, 0, 0, 0.6),
          transparent
        );
        box-sizing: border-box;
      }

      .bottom-inner {
        max-width: 900px;
        margin: 0 auto;
      }

      .bottom-title {
        text-align: center;
        color: #b71c1c;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .models-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .nav-arrow {
        width: 34px;
        height: 72px;
        border-radius: 18px;
        border: none;
        background: #b71c1c;
        color: #fff;
        font-weight: 700;
        font-size: 25px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .nav-arrow:active {
        transform: scale(0.96);
      }

      .cards-wrapper {
        display: flex;
        flex: 1;
        gap: 10px;
        overflow-x: auto;
        padding: 4px 4px;
        scroll-behavior: smooth;
      }

      .cards-wrapper::-webkit-scrollbar {
        height: 0;
      }

      .model-card {
        min-width: 150px;
        max-width: 180px;
        background: #ffffff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      }

      .model-card.active {
        border-color: #f44336;
        box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.6);
        transform: translateY(-2px);
      }

      .model-card-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .model-card-thumb {
        height: 80px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .model-card-body {
        padding: 8px 10px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
      }

      .model-name {
        font-size: 12px;
        font-weight: 700;
        color: #222;
      }

      .model-tagline {
        font-size: 10px;
        color: #555;
      }

      .model-chip {
        margin-top: 4px;
        align-self: flex-start;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 999px;
        background: #b71c1c;
        color: #fff;
      }

      /* Responsif */
      @media (max-width: 480px) {
        .bottom-title {
          font-size: 11px;
        }

        .model-card {
          min-width: 140px;
        }
      }