/* Yan skyscraper - sadece 1920px+ geniş ekran; mobil/tablet normal layout */

:root {
    --banner-width: 400px;
    --banner-height: 1080px;
    --site-main-width: 1100px;
    --banner-gap: 10px;
    --site-layout-width: calc(var(--banner-width) * 2 + var(--site-main-width) + var(--banner-gap) * 2);
}

.site-layout {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.site-main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.side-banner-slot {
    display: none;
}

.side-banner-slot .side-banner {
    display: none;
}

/* ---- Mobil / tablet: banner yok, standart site ---- */
@media (max-width: 1919px) {
    html.has-side-banners {
        overflow-x: auto;
    }

    .site-layout--with-banners {
        display: block;
        max-width: 1400px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .site-layout--with-banners .site-main {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
    }

    .site-layout--with-banners .side-banner-slot,
    .site-layout--with-banners .side-banner {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ---- Geniş ekran: grid + sabit banner ---- */
@media (min-width: 1920px) {
    html.has-side-banners {
        overflow-x: hidden;
    }

    .site-layout--with-banners {
        display: grid;
        grid-template-columns: var(--banner-width) minmax(0, var(--site-main-width)) var(--banner-width);
        grid-template-areas: "banner-left main banner-right";
        align-items: start;
        column-gap: var(--banner-gap);
        width: 100%;
        max-width: var(--site-layout-width);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .site-layout--with-banners .side-banner-slot--left {
        grid-area: banner-left;
        display: block;
        width: var(--banner-width);
        min-width: var(--banner-width);
        max-width: var(--banner-width);
        min-height: var(--banner-height);
        pointer-events: none;
    }

    .site-layout--with-banners .site-main {
        grid-area: main;
        min-width: 0;
        width: 100%;
        max-width: var(--site-main-width);
        margin: 0;
    }

    .site-layout--with-banners .side-banner-slot--right {
        grid-area: banner-right;
        display: block;
        width: var(--banner-width);
        min-width: var(--banner-width);
        max-width: var(--banner-width);
        min-height: var(--banner-height);
        pointer-events: none;
    }

    .site-layout--with-banners .side-banner-slot .side-banner {
        display: block;
        position: fixed;
        top: 0;
        width: var(--banner-width);
        height: var(--banner-height);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        z-index: 900;
        pointer-events: auto;
    }

    .site-layout--with-banners .side-banner--left {
        left: max(0px, calc(50vw - var(--site-layout-width) / 2));
        right: auto;
    }

    .site-layout--with-banners .side-banner--right {
        left: auto;
        right: max(0px, calc(50vw - var(--site-layout-width) / 2));
    }

    .site-layout--with-banners .site-main .container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .site-layout--with-banners .site-main .header {
        width: 100%;
    }

    .site-layout--with-banners .site-main .footer {
        width: 100%;
    }

    .site-layout--with-banners .site-main .footer .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.side-banner__link,
.side-banner__image,
.side-banner__placeholder {
    display: block;
    width: var(--banner-width);
    height: var(--banner-height);
    overflow: hidden;
    box-sizing: border-box;
}

.side-banner__link img,
.side-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.side-banner__link:hover img {
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.25);
}

.side-banner__placeholder {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 50%, #252525 100%);
    border: 2px dashed #444;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #888;
    text-align: center;
    padding: 1rem;
}

.side-banner__placeholder-size {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FF6B35;
}

.side-banner__placeholder-text {
    font-size: 1rem;
    color: #ccc;
}

.side-banner__placeholder-side {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
}

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
}