/* Görsel Odaklı Yeni Grid Sistemi */
.bonus-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px; 
}

/* Kart artık bir <a> etiketi olduğu için text-decoration sıfırlanır */
.bonus-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: flex; 
    flex-direction: column; 
    text-decoration: none; /* Link alt çizgisini kaldırır */
    color: inherit;
    cursor: pointer;
}
.bonus-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--accent-red); 
    box-shadow: 0 12px 24px rgba(255, 51, 51, 0.15); 
}

.image-container { width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; position: relative; }
.image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.bonus-card:hover .image-container img { transform: scale(1.08); }

.card-body { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.update-time { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; text-align: center; }

/* Buton artık <a> içinde bir div olduğu için stili uyarlandı */
.btn-redirect { 
    display: block; 
    width: 100%; 
    text-align: center; 
    background: linear-gradient(90deg, var(--accent-red), #cc0000); 
    color: #fff; 
    padding: 12px; 
    border-radius: 6px; 
    font-weight: 800; 
    font-size: 0.95rem; 
    text-transform: uppercase;
    transition: background 0.3s; 
}
.bonus-card:hover .btn-redirect { background: linear-gradient(90deg, #ff4d4d, var(--accent-red)); }

/* Mobil Optimizasyon (Burası Listelemeyi Şık Yapar) */
@media (max-width: 768px) {
    .header-flex { flex-direction: column; gap: 15px; }
    /* Mobilde 2'li yan yana şık görünüm */
    .bonus-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card-body { padding: 8px; }
    .btn-redirect { padding: 8px; font-size: 0.8rem; }
    .update-time { font-size: 0.7rem; margin-bottom: 6px; }
    .section-title { font-size: 1.4rem; }
}

@media (max-width: 380px) {
    /* Çok dar ekranlarda tek sütuna düşürür, görseller büyük görünür */
    .bonus-grid { grid-template-columns: 1fr; gap: 15px; }
    .btn-redirect { padding: 12px; font-size: 1rem; }
}