3D Ürün Flip Kartı

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2>Ürün İncele</h2>
      <i class="fas fa-shopping-bag" style="font-size:50px; margin-top:20px;"></i>
    </div>
    <div class="flip-card-back">
      <h2>Özellikler</h2>
      <p>Mükemmel Kalite</p>
      <p>Özenli Tasarım</p>
      <button style="margin-top:20px; padding: 10px 20px; background:#fff; color:#e34f26; border:none; border-radius:5px; cursor:pointer;">Satın Al</button>
    </div>
  </div>
</div>

.flip-card { background-color: transparent; width: 250px; height: 300px; perspective: 1000px; font-family: 'Inter', sans-serif; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.flip-card-front { background: linear-gradient(135deg, #6C5CE7, #8073ea); color: white; }
.flip-card-back { background: linear-gradient(135deg, #ff4757, #ff6b81); color: white; transform: rotateY(180deg); padding: 20px; box-sizing:border-box; }