body {
    background-color: #f0f0f0;
    margin: 0;
}

.container {
    margin-top: 60px; /* Üst boşluk */
    display: flex; /* Flexbox kullanarak kartları yatay hizala */
    justify-content: center; /* Kartları merkeze hizala */
    gap: 20px; /* Kartlar arasında boşluk */
    flex-wrap: wrap; /* Mobilde alt alta yerleştirmek için */
}

.card {
    width: 500px; /* Kart genişliğini artırdım */
    height: 500px; /* Kart yüksekliğini artırdım */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 2px solid #ccc;
    transition: transform 0.2s;
    position: relative; /* Relative konumlandırma */
    margin: 0 15px; /* Kartlar arasında yatay boşluk ekle */
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Görselin kartı kaplamasını sağla */
}

.card:hover {
    transform: scale(1.05);
}

.report-button {
    position: absolute; /* Absolut konumlandırma */
    bottom: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    color: red;
    font-size: 24px;
    cursor: pointer;
}

.ad {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px; /* Üstten boşluk ekle */
}

.ad-bottom {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    width: 100%; /* Genişliği %100 yap */
    max-width: 900px; /* Maksimum genişlik */
}

/* Mobil cihazlar için medya sorguları */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Mobilde kartların alt alta görünmesi için */
        align-items: center;
    }

    .card {
        width: 90%; /* Kart genişliğini mobilde daha uygun hale getirmek için */
        height: auto; /* Kart yüksekliğini otomatik yap */
        margin-bottom: 20px; /* Kartlar arasında boşluk */
    }

    .ad,
    .ad-bottom {
        width: 100%;
        margin: 0; /* Üst ve alt boşluk kaldır */
    }

    .d-md-flex {
        display: none !important; /* Mobilde reklamları gizle */
    }
}

.instagram-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: transparent;
    border: none;
    color: #E1306C;
    font-size: 24px;
    cursor: pointer;
}