body { font-family: 'Poppins', sans-serif; margin:0; background:#0f172a; color:#fff; overflow-x:hidden; }
    header { padding:20px; text-align:center; font-size:24px; font-weight:600; }
    .tabs { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
    .tab-btn { padding:10px 20px; border-radius:20px; background:#1e293b; cursor:pointer; transition:0.3s; }
    .tab-btn.active { background:#22c55e; }

    .container {
      padding:20px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
      gap:20px;
    }

    .pagination {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
      margin-bottom:20px;
    }

    .page-btn {
      padding:6px 12px;
      background:#1e293b;
      border-radius:8px;
      cursor:pointer;
    }

    .page-info { opacity:0.8; }

    /* ANIMASI */
    .slide-out { animation: slideOut 0.2s forwards; }
    .slide-in { animation: slideIn 0.2s ease forwards; }

    @keyframes slideOut {
      from { transform: translateX(0); opacity:1; }
      to { transform: translateX(-50px); opacity:0; }
    }

    @keyframes slideIn {
      from { transform: translateX(50px); opacity:0; }
      to { transform: translateX(0); opacity:1; }
    }

    .card:hover { transform:translateY(-5px); }
    .title { font-weight:600; font-size:16px; margin-bottom:5px; }
    .price { color:#22c55e; margin-bottom:10px; }
    .desc { font-size:13px; opacity:0.8; height:40px; overflow:hidden; }
    .btn { display:block; text-align:center; margin-top:10px; padding:8px; background:#22c55e; border-radius:10px; color:#000; text-decoration:none; font-weight:600; }