<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Product image" />
    <span class="product-badge">30% Off</span>
  </div>
  <div class="product-body">
    <h3 class="product-name">Product Name</h3>
    <div class="product-pricing">
      <span class="price-current">₺299</span>
      <span class="price-old">₺429</span>
    </div>
    <button class="btn btn-primary" style="width:100%">Sepete Ekle</button>
  </div>
</div>

<style>
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
.product-image { position: relative; aspect-ratio: 1; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.product-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.product-name { font-weight: 500; }
.product-pricing { display: flex; align-items: baseline; gap: 0.75rem; }
.price-current { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); }
.price-old { font-size: 0.875rem; color: var(--muted); text-decoration: line-through; }
</style>