/* css/style.css */
:root{
  --purple:#8b5cf6;
  --accent:#2f8f4f;
  --muted:#6c757d;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:#f6f7f9;
  color:#222;
}

/* topbar */
.topbar{
  min-height:76px;
  background:#fff;
  padding:.8rem 1.25rem;
  display:flex;
  align-items:center;
  gap:16px;
  position:sticky;
  top:0;
  z-index:1020;
  border-bottom:1px solid rgba(0,0,0,0.04);
  flex-wrap: wrap;
}

.brand {
  flex-shrink: 0;
}

.searchbar{
  flex: 1;
  min-width: 200px;
  margin: 0 auto;
}

.searchbar .form-control{
  border-radius:30px;
  padding:.6rem 1rem;
  font-size: 14px;
}

.searchbar .input-group-text{
  border-radius:30px;
  border-right:0;
  background:#fff
}

/* Mobile responsive */
@media (max-width: 768px) {
  .topbar {
    gap: 10px;
    padding: 0.6rem 0.75rem;
    min-height: auto;
  }

  .brand {
    order: 1;
  }

  .searchbar {
    order: 3;
    width: 100%;
    margin-top: 10px;
    flex: none;
  }

  .searchbar .form-control {
    font-size: 12px;
    padding: 0.5rem 0.75rem;
  }

  .topbar > div:last-child {
    order: 2;
    gap: 8px;
    width: auto;
  }

  .brand small {
    display: none;
  }

  .text-end {
    display: none !important;
  }

  .btn-outline-danger {
    font-size: 10px;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 576px) {
  .topbar {
    gap: 8px;
    padding: 0.5rem;
  }

  .searchbar .form-control {
    font-size: 11px;
  }

  .searchbar .input-group-text {
    padding: 0.4rem 0.6rem;
  }
}

/* user avatar */
.avatar{
  width:40px;height:40px;background:#f1f3f5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#333;
}

/* hero */
.hero .hero-img{height:340px}
@media (max-width:768px){ .hero .hero-img img{height:220px;object-fit:cover} }

.hero-banner img {
  object-fit: cover;
  max-height: 400px;
}


/* categories */
.categories-row{max-width:880px;margin:0 auto}
.category-item{width:92px}
.cat-icon img{border-radius:8px;}

/* product card */
.card.product{
  border-radius:12px;overflow:hidden;border:0;box-shadow:0 6px 18px rgba(15,15,15,0.06);background:#fff;
}
.card.product img{width:100%;height:100%;object-fit:cover;display:block}
.card.product .card-body{padding:.6rem}

/* small utilities */
.badge-danger{background:#ff4d4f}
.text-muted{color:var(--muted)}

/* footer */
footer{background:transparent;padding:24px 0}

.hero {
    background: linear-gradient(135deg, #a375be, #d082a0, #e0f7ff);
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .hero-card {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.4);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
  }

  .hero-img img {
    border-radius: 20px;
    transition: 0.6s;
  }

  .hero-img img:hover {
    transform: scale(1.05);
  }

  .username-small {
    font-size: 10px; /* atau ukuran yang kamu mau */
    font-weight: normal; /* opsional */
}

.btn-success:hover {
  transform: scale(1.05);
  transition: 0.2s;
}
 .search-results-container {
      min-height: 400px;
      padding: 3rem 0;
    }

    .no-results {
      text-align: center;
      padding: 3rem;
    }

    .no-results i {
      font-size: 4rem;
      color: #dee2e6;
      margin-bottom: 1rem;
    }

    .product-card {
      transition: all 0.3s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }