/* Basic styling for the pop-up */

.announcement-popup {

    display: none; /* Başlangıçta gizli */

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 80%;

    max-width: 900px;

    max-height: 90vh; /* Popup yüksekliğini sınırladık */

    background-color: rgba(0, 0, 0, 0.0); /* Yarı saydam arka plan */

    justify-content: center;

    align-items: center;

    z-index: 9999;

    animation: fadeIn 0.5s ease-out;

}



/* Fade-in animation */

@keyframes fadeIn {

    from {

        opacity: 0;

        visibility: hidden; /* İlk başta görünmez */

    }



    to {

        opacity: 1;

        visibility: visible; /* Sonunda görünür */

    }

}



/* Pop-up content styling */

.popup-content {

    background-color: #fff;

    padding: 20px;

    border-radius: 15px;

    text-align: center;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    position: relative;

    overflow: auto; /* İçeriğin taşmasını engeller ve scroll ekler */

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    max-height: 80vh; /* Popup içeriği yüksekliğini sınırla */

    opacity: 0;

    visibility: hidden;

    animation: fadeIn 0.5s ease-out forwards;

}



/* Title Styling */

.popup-title {

    font-size: 22px;

    font-weight: bold;

    color: #ab8a62; /* Eski renk */

    margin-bottom: 20px;

    text-align: center;

    visibility: visible;

}



/* Announcement title and description styling */

.announcement-cards-container h4 {

    color: #ab8a62; /* Başlık rengini popup-title ile aynı renk yapıyoruz */

    font-size: 18px; /* Başlık font boyutunu ayarladık */

    margin: 10px 0;

}



/* Announcement description styling */

.announcement-card p {

    color: #555;

    font-size: 14px; /* Detaylar için uygun font boyutu */

}



/* Close button styling */

.close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 30px;

    color: #333;

    cursor: pointer;

    transition: color 0.3s ease;

    font-weight: bold;

    z-index: 10; /* Çarpı butonunun üstte olmasını sağlamak */

}



    .close-btn:hover {

        color: #ab8a62; /* Buton hover rengi */

    }



/* Scrollable container for announcements */

.announcement-cards-container {

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    max-height: calc(100% - 60px); /* Kartlar için scroll ekler */

    margin-top: 20px;

    padding-right: 10px;

    overflow-x: hidden;

}



/* Card styling */

.announcement-card {

    background-color: #f9f9f9;

    padding: 20px;

    margin: 10px 0;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    transition: transform 0.2s ease;

    width: 100%; /* Card genişliği */

}



    .announcement-card:hover {

        transform: translateY(-5px);

    }



/* Image container to hold the image and badge */

.image-container {

    position: relative;

    width: 100%;

    max-height: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    margin-bottom: 15px;

    border-radius: 8px;

    background: #f4f4f4;

}





/* Image styling inside the card */

.announcement-card img {

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 60vh;

    object-fit: contain;

    border-radius: 8px;

    display: block;

}



/* Expiry Date Badge Styling */

.expire-badge {

    position: absolute;

    bottom: 10px;

    right: 10px; /* Sağ alt köşeye yerleştirildi */

    background-color: rgba(0, 0, 0, 0.5);

    color: white;

    padding: 5px 10px; /* Badge'e biraz daha büyük padding */

    font-size: 12px;

    font-weight: bold;

    border-radius: 20px;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

    line-height: 1.1;

}



/* Button container for the "Load More" button */

.btn-container {

    display: flex;

    justify-content: center;

    margin-top: 15px;

}



/* Adjustments for the button inside the announcement card */

.announcement-card .btn {

    display: inline-block;

    padding: 10px 20px;

    background-color: #ab8a62;

    color: white;

    text-decoration: none;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    font-size: 12px; /* Font boyutu küçültüldü */

    text-transform: uppercase;

    transition: background-color 0.3s ease, transform 0.2s ease;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);

}



    .announcement-card .btn:hover {

        background-color: #927055;

        transform: translateY(-2px);

    }