/* ==================== HOMEPAGE LAYOUT ==================== */

/* This is the main wrapper for all homepage content. */
.home-wrapper {
    margin: 0 auto;
    padding: 0 12vw; /* Add some padding on the sides for smaller screens. */
}

/* --- Top Ad Banners --- */
.Related-container {
    width: 100%;
    margin: 10px 0; /* Creates vertical space around ad blocks. */
    display: flex;
    flex-direction: column;
   
}
.Related-big-container { width: 100%; }
.Related-containers { display: flex;gap:15px; width: 100%; }
.Related-containers .relatedItem { flex: 1; }

/* --- Main Slider and Content Section --- */
/* This is the container for the `ozel_slider.html` component */
.home > .ozelhaber-items-sub-div {
    width: 100%;
}

/* This is the main 2-column layout for the sliders */
.slider-container {
    display: flex;
    gap: 20px; /* This creates the space between the left and right sliders */
    margin: 20px 0;
}


.rightSideSlider {
    width: 35%; /* Side slider takes up less space */
    min-width: 0;
}

.big-slider {
    position: relative;
    width: 100%;
}
.big-slider .slider {
    padding-bottom: 0 !important;
}
.big-slider .slider-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 0 !important;
}
.big-slider .slider-image-main {
    width: 100%;
    height: 100%;
    object-fit: fill;
    contain:size;
    display: block;
}

/* --- Other Homepage Sections --- */
.web-shows-Related { display: flex; gap: 20px; width: 100%; }
.web-shows-Related .relatedItem { flex: 1; }
.ana-sayfa-yazarlar { margin: 40px 0; }

/* The header for each news section (e.g., "Kıbrıs", "Polisiye") */
.section-header {
    display: flex;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px;
}


/* ==================== RESPONSIVE STYLES ==================== */

@media (max-width: 992px) {
    /* On tablets and smaller, stack the main sliders */
    .slider-container {
        flex-direction: column;
    }

    .leftSideSlider, .rightSideSlider {
        width: 100%;
    }
}
@media (max-width: 1000px) {
    /* On mobile, remove horizontal padding */
    .home-wrapper {
        padding: 0 5vw !important;
    }
}

@media (max-width: 768px) {
    /* On mobile, remove horizontal padding */
    /* .home-wrapper {
        padding: 0 5vw !important;
    } */

    /* Stack the top ads vertically */
    .Related-containers {
        flex-direction: column;
    }

    /* Hide desktop-only elements */
    .web-shows-Related,
    .ana-sayfa-yazarlar {
        display: none;
    }
    .static-Related {
  grid-template-columns: repeat(1, 1fr) !important;
}
.static-Related .relatedItem:last-child:nth-child(odd) .relatedImage{
    aspect-ratio: 6/1;
}
}