/*
    Paket kartlari responsive gorunurluk kurallari.

    Bu kurallar onceden _PackageCards.cshtml icindeki inline script'te
    setTimeout(100) + $(window).resize ile yonetiliyordu:
        if ($(window).width() < 1200) { .channels gizle, .channelsMobile goster }
        else                          { .channels goster, .channelsMobile gizle }

    Ayni 1200px kirilim noktasi CSS'e tasindi. jQuery .show() calistiginda
    display:block uretiyordu; gorsel davranisi birebir korumak icin block kullanilir.

    Not: Bu dosya bilincli olarak duz CSS'tir ve SCSS/Web Compiler pipeline'ina dahil degildir.
    packageCards.bundle.min.css'ten SONRA yuklenmelidir.
*/

.channels {
    display: none;
}

.channelsMobile {
    display: block;
}

@media (min-width: 1200px) {
    .channels {
        display: block;
    }

    .channelsMobile {
        display: none;
    }
}


/*
    ============================================================
    Paket karti gorunum iyilestirmesi
    ============================================================
    ONEMLI: Bu bolum bilincli olarak MINIMAL tutulmustur.
    Onceki denemede .package-card uzerine display:flex ve
    .package-card-container .package-card uzerine flex/min-width/max-width
    verilmisti; bunlar mevcut bundle layout'unu ezip kart genisligini bozdu.
    Bu yuzden burada YERLESIM (display, flex, width) ozelliklerine dokunulmaz;
    yalnizca yuzeysel gorsel ozellikler uygulanir.
*/

.package-card {
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(24, 12, 38, .07);
    transition: box-shadow .2s ease, transform .2s ease;
}

/*
    Kart gorseli kartin ILK cocugu ve tam genislikte oldugu icin, kartin
    yuvarlatilmis ust kosclerini dikdortgen gorseliyle taşırıyordu.

    Burada bilincli olarak .package-card'a overflow:hidden VERILMEZ:
    "topSeller" rozeti (.card-image-badge) negatif konumludur
    (top:-19px; left:-10px) ve overflow:hidden onu kirpardi.

    Bunun yerine radius dogrudan gorsele uygulanir. Kartin radius'u ile ayni
    deger kullanilir; 1px'lik kenarlik payi icin hafif kucultulmustur.
*/
.package-card .card-image {
    border-radius: 15px 15px 0 0;
}

.package-card .card-image > img {
    display: block;
    border-radius: 15px 15px 0 0;
}

/* Rozet gorseli kartin kosesinden tasar; radius devralmamalidir. */
.package-card .card-image-badge > img {
    border-radius: 0;
}

/* Kart tiklanabilir oldugunda (card.js yonlendirme bagliyor) imlec geri bildirimi verilir. */
.package-card[data-routeparent]:not([data-routeparent=""]) {
    cursor: pointer;
}

.package-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(24, 12, 38, .13);
}

.package-card .select-package-btn {
    border-radius: 10px;
    cursor: pointer;
    transition: filter .2s ease;
}

.package-card .select-package-btn:hover {
    filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .package-card,
    .package-card .select-package-btn {
        transition: none;
    }

    .package-card:hover {
        transform: none;
    }
}


/*
    Swiper gorunumu modernizasyonu.
    Yalnizca gorsel katman; Swiper'in kendi konumlandirma stilleri ezilmez.
*/

/* Not: .swiper uzerinde `overflow: visible` KULLANILMAZ; Swiper aktif olmayan
   slaytlari kirpmak icin yatay overflow'a dayanir, aksi halde komsu slaytlar
   tasip yan yana gorunur. */

.channelsMobile .swiper-wrapper,
.package-card-desktop-swiper .swiper-wrapper {
    align-items: stretch;
}

/* Kartlar esit yukseklikte olsun; farkli uzunluktaki paket aciklamalari hizayi bozmasin. */
.channelsMobile .swiper-slide,
.package-card-desktop-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.channelsMobile .swiper-slide > *,
.package-card-desktop-swiper .swiper-slide > * {
    width: 100%;
}

/*
    Az sayida paket kalinca kartlarin sola yaslanmasi.

    Swiper `slidesPerView: 3` iken .swiper-wrapper'i her zaman tam genislikte tutar.
    Geriye 1-2 slayt kalirsa (odeme tipi filtresi digerlerini eledikten sonra ya da
    bolumde zaten az paket varsa) slaytlar satirin SOLUNDA asili kalir.

    `centeredSlides` burada KULLANILAMAZ: slayt sayisi yeterliyken aktif slaydi
    surekli ortaya sabitleyip normal kaydirma/hizalama davranisini bozar.

    Kanca neden CSS degil JS: "tasma var mi" bilgisi CSS'te yakalanamaz.
    assets/modules/packages/swiper.js, slayt sayisi aktif slidesPerView'a sigiyorsa
    konteynere `.packages-swiper-centered` sinifini ekler. Sonuc:
      - 1 paket  -> tek kart yatayda ortalanir,
      - 2 paket  -> iki kart blok halinde ortalanir (aradaki bosluk korunur),
      - 3+ paket -> tasma basladigi an sinif dusrer, kaydirma davranisi hic degismez.

    Kart genisligine/yapisina dokunulmaz; Swiper'in slaytlara yazdigi inline width
    degerleri oldugu gibi korunur, yalnizca grubun yataydaki konumu degisir.
*/
.swiper.packages-swiper-centered .swiper-wrapper {
    justify-content: center;
}

/*
    Populer paketler bolumu (_PopularPackages -> _SwiperPackageCard, IsShowChannel=true)
    SWIPER RENDER ETMEZ; kartlari duz `.package-card-container` icinde basar.
    Bu yuzden yukaridaki swiper kurali orayi hic kapsamaz ve az paketliyken kartlar
    sola yaslaniyordu.

    Konteyner zaten flex + wrap (packageCardNoneSlider.bundle.min.css) oldugu icin
    `justify-content: center` kart sayisi azken grubu ortalar, kartlar satiri
    doldurdugunda ise gorunumu degistirmez. Kart genisligine dokunulmaz.
*/
.package-card-container {
    justify-content: center;
}

/*
    Masaustu (>1200px) `.channels` gorunumu de SWIPER DEGILDIR; kartlar
    `.channels-wrapper-cards` icinde duz liste olarak basilir.

    packageCards.bundle.min.css icinde bu seci ci iki kez tanimlanmisti ve sonraki
    `display: grid; grid-template-columns: 1fr 1fr 1fr` kurali flex tanimini eziyordu.
    Sabit uc kolonlu grid'de tek paket birinci kolona oturdugu icin kart sola yasli
    goruluyordu. O kopya kaldirildi; burada da grubun ortalanmasi garanti altina alinir.

    Konteyner flex + wrap oldugundan `justify-content: center` yalnizca satirda bos
    yer VARKEN etkilidir; kartlar satiri doldurdugunda mevcut gorunum degismez.
    Kart genisligine/yapisina dokunulmaz.
*/
.channels-wrapper-cards {
    justify-content: center;
}

/* Modern, ince pagination gostergesi. Pagination akisa alinir (Swiper varsayilani
   absolute'tur) ki kartlarin uzerine binmesin. */
.channelsMobile .swiper-pagination,
.package-card-desktop-swiper .swiper-pagination {
    position: static;
    margin-top: 1rem;
}

.channelsMobile .swiper-pagination-bullet,
.package-card-desktop-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #c9c9c9;
    opacity: 1;
    transition: background-color .25s ease;
}

.channelsMobile .swiper-pagination-bullet-active,
.package-card-desktop-swiper .swiper-pagination-bullet-active {
    background: #95347f;
}

/* Hareket azaltma tercihini olan kullanicilar icin gecisler kapatilir. */
@media (prefers-reduced-motion: reduce) {
    .channelsMobile .swiper-pagination-bullet,
    .package-card-desktop-swiper .swiper-pagination-bullet {
        transition: none;
    }
}