/* =========================================================
   ANTALYA TURLARI — OTELLER REFERANSLI ORTAK KART GRID
   Referans: Oteller kart alanı
   Desktop: 4 eşit kolon
   Tablet: 2 kolon
   Mobil: 1 kolon
   ========================================================= */

:root{
    --ks27-card-grid-max:1480px;
    --ks27-card-grid-side:64px;
    --ks27-card-grid-gap:22px;
}

/* =========================================================
   DESKTOP
   Tüm içerik alanları Oteller ile AYNI toplam genişlikte
   ========================================================= */
@media (min-width:1100px){

    /* Turlar + Rotalar */
    .ks27-listing__content > .ks27-listing__container{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* VIP Transfer — yalnızca filo alanı */
    .ks27-vipx__fleet > .ks27-vipx__shell{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* Oteller — referans */
    .ks27-hotels__section > .ks27-hotels__container{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* Blog */
    .ks27-blog-page .ks27-blog-shell{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* Video */
    .atv-video-content-section > .ks27-blog-shell{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* Galeri */
    .atg-content-section > .ks27-blog-shell{
        width:min(var(--ks27-card-grid-max),calc(100% - var(--ks27-card-grid-side))) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    /* ---- 4 eşit kolon ---- */
    .ks27-listing__grid,
    .ks27-vipx__fleet-grid,
    .ks27-hotels__hotel-grid,
    .ks27-hotels__region-grid,
    .ks27-blog-grid,
    .atv-video-grid,
    .atg-grid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:var(--ks27-card-grid-gap) !important;
        align-items:stretch !important;
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /* Kart her zaman kendi kolonunun tamamını doldurur */
    .ks27-listing__grid > *,
    .ks27-vipx__fleet-grid > *,
    .ks27-hotels__hotel-grid > *,
    .ks27-hotels__region-grid > *,
    .ks27-blog-grid > *,
    .atv-video-grid > *,
    .atg-grid > *{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        justify-self:stretch !important;
    }

    /* Eski width/flex değerlerini kesin kaldır */
    .ks27-vipx__fleet-card,
    .ks27-blog-card,
    .atv-video-card,
    .atg-card,
    .ks27-tour-card,
    .ks27-hotels__hotel-card,
    .ks27-hotels__region-card{
        width:100% !important;
        max-width:none !important;
    }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:768px) and (max-width:1099px){

    .ks27-listing__content > .ks27-listing__container,
    .ks27-vipx__fleet > .ks27-vipx__shell,
    .ks27-hotels__section > .ks27-hotels__container,
    .ks27-blog-page .ks27-blog-shell,
    .atv-video-content-section > .ks27-blog-shell,
    .atg-content-section > .ks27-blog-shell{
        width:calc(100% - 40px) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    .ks27-listing__grid,
    .ks27-vipx__fleet-grid,
    .ks27-hotels__hotel-grid,
    .ks27-hotels__region-grid,
    .ks27-blog-grid,
    .atv-video-grid,
    .atg-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
        width:100% !important;
    }
}

/* =========================================================
   MOBİL
   ========================================================= */
@media (max-width:767px){

    .ks27-listing__content > .ks27-listing__container,
    .ks27-vipx__fleet > .ks27-vipx__shell,
    .ks27-hotels__section > .ks27-hotels__container,
    .ks27-blog-page .ks27-blog-shell,
    .atv-video-content-section > .ks27-blog-shell,
    .atg-content-section > .ks27-blog-shell{
        width:calc(100% - 28px) !important;
        max-width:none !important;
        margin-inline:auto !important;
    }

    .ks27-listing__grid,
    .ks27-vipx__fleet-grid,
    .ks27-hotels__hotel-grid,
    .ks27-hotels__region-grid,
    .ks27-blog-grid,
    .atv-video-grid,
    .atg-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
        width:100% !important;
    }

    .ks27-listing__grid > *,
    .ks27-vipx__fleet-grid > *,
    .ks27-hotels__hotel-grid > *,
    .ks27-hotels__region-grid > *,
    .ks27-blog-grid > *,
    .atv-video-grid > *,
    .atg-grid > *{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
    }
}

/* =========================================================
   BLOG GRID HARD RESPONSIVE FIX
   Referans genişlik: Oteller
   Sadece Blog sayfasını etkiler.
   ========================================================= */

.ks27-blog-page--grid-safe{
    overflow-x:hidden !important;
}

.ks27-blog-page--grid-safe .ks27-blog-shell{
    box-sizing:border-box !important;
    width:min(1480px,calc(100% - 64px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.ks27-blog-page--grid-safe .ks27-blog-section-head{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

.ks27-blog-page--grid-safe .ks27-blog-grid{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
    position:relative !important;
}

.ks27-blog-page--grid-safe .ks27-blog-grid > *{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
}

.ks27-blog-page--grid-safe .ks27-blog-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
}

@media (min-width:768px) and (max-width:1099px){
    .ks27-blog-page--grid-safe .ks27-blog-shell{
        width:calc(100% - 40px) !important;
    }

    .ks27-blog-page--grid-safe .ks27-blog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}

@media (max-width:767px){
    .ks27-blog-page--grid-safe .ks27-blog-shell{
        width:calc(100% - 28px) !important;
    }

    .ks27-blog-page--grid-safe .ks27-blog-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .ks27-blog-page--grid-safe .ks27-blog-section-head{
        display:block !important;
    }

    .ks27-blog-page--grid-safe .ks27-blog-section-head .ks27sh__meta{
        margin-top:8px !important;
        white-space:normal !important;
    }
}

/* =========================================================
   BLOG ABSOLUTE FINAL ALIGN FIX
   Oteller referans genişliği: 1280px
   Parent CSS ne olursa olsun grid ortalanır.
   ========================================================= */

@media (min-width:1100px){

    /* Başlık ile kartlar aynı yatay eksende */
    .ks27-blog-section-head{
        box-sizing:border-box !important;
        width:min(1280px,calc(100% - 48px)) !important;
        max-width:1280px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }

    /* Eski full-bleed / 100vw / negatif margin yapılarını kesin iptal et */
    .ks27-blog-grid{
        box-sizing:border-box !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:22px !important;

        width:min(1280px,calc(100% - 48px)) !important;
        max-width:1280px !important;

        margin-left:auto !important;
        margin-right:auto !important;
        padding:0 !important;

        position:relative !important;
        left:auto !important;
        right:auto !important;
        inset:auto !important;
        transform:none !important;
    }

    .ks27-blog-grid > *,
    .ks27-blog-grid .ks27-blog-card{
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }
}

@media (min-width:768px) and (max-width:1099px){
    .ks27-blog-section-head,
    .ks27-blog-grid{
        width:calc(100% - 40px) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }

    .ks27-blog-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }
}

@media (max-width:767px){
    .ks27-blog-section-head,
    .ks27-blog-grid{
        width:calc(100% - 28px) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }

    .ks27-blog-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
}