﻿/* =========================
   HOME TOP PROMO
========================= */
.fullBannerPurple {
   /* width: 100vw;*/
    margin-left: calc(-50vw + 50%);
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: radial-gradient(circle at 15% 50%, rgba(255,208,0,0.14), transparent 28%), radial-gradient(circle at 85% 50%, rgba(137,77,255,0.22), transparent 34%), linear-gradient(90deg, #281126 0%, #3d005f 32%, #2e1070 68%, #21255f 100%);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.22);
}

.fullBannerInner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bannerText {
    display: inline-flex;
    align-items: center;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: #fff;
}

.bannerText1 {
    font-size: 24px;
    font-weight: 600;
}

.bannerText2 {
    font-size: 24px;
    font-weight: 800;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 2px;
    line-height: 1;
}

    .badge picture {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .badge img {
        display: block;
        width: auto;
        height: 34px;
        max-width: none;
        object-fit: contain;
        background: rgba(255,255,255,0.96);
        border-radius: 10px;
        padding: 3px 6px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.35);
    }

/* =========================
   QUICK NAV
========================= */
/*.homeQuickNavWrap {
    margin: 16px 0 22px;
}
*/
/*.homeQuickNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.homeQuickBtn {
    min-width: 220px;
    height: 54px;
    padding: 0 24px 0 34px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #fff;
    background: linear-gradient(180deg, #171717 0%, #0e0e0e 100%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 20px rgba(0,0,0,0.22);
    transition: .18s ease;
}*/

    .homeQuickBtn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,208,0,0.10) 0%, rgba(255,208,0,0.03) 35%, rgba(255,208,0,0.00) 100%);
    }

    .homeQuickBtn::after {
        content: "";
        position: absolute;
        left: 18px;
        top: 50%;
        width: 6px;
        height: 22px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: linear-gradient(180deg, #ffd000 0%, #ffb800 100%);
        box-shadow: 0 0 10px rgba(255,208,0,0.30);
    }

    .homeQuickBtn:hover {
        transform: translateY(-2px);
        color: #ffd000;
        border-color: rgba(255,208,0,0.40);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 26px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,208,0,0.14);
    }

/* =========================
   POPULAR PACKAGES
========================= */
.popularPackages {
    margin: 24px 0 40px;
}

.popularPackagesHead {
    margin-bottom: 18px;
}

    .popularPackagesHead h2 {
        font-size: 28px;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.4px;
        margin: 0;
    }

.popularPackagesGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.popularPkgCard {
    min-height:500px;
    position: relative;
    background: #050505;
    border: 1px solid #c8a800;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

/*.pkgTopArea {
    position: relative;
    min-height: 220px;
    background: radial-gradient(circle at 20% 20%, rgba(255,208,0,0.10), transparent 28%), radial-gradient(circle at 80% 20%, rgba(0,170,120,0.08), transparent 28%), linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}*/

.pkgTopArea::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%; /* fade yüksekliği (ayar yapabilirsin) */

    background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.95) 100% );
    z-index: 1;
    pointer-events: none;
}

.popularPkgTitle,
.popularPkgSub,
.popularPkgPriceRow,
.popularPkgActions {
    position: relative;
    z-index: 2;
}

.pkgVisual {
    /* position: absolute;
   inset: 48px 18px 18px 18px;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
   
}

    .pkgVisual img
    { 
      /*  
        background: #ffffff;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0.21) 5%, rgba(0, 0, 0, 1) 95%);*/
     
       /* width:365px;*/

       width:100%;
       max-width: 100%;
         }

.pkgBadge {
    position: absolute;
    top: 0;
    z-index: 3;
    height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.24);
}

.pkgBadgeLeft {
    left: 0;
    background: #042f1869;
    /*linear-gradient(180deg, #13c267 0%, #0a9f50 100%);*/
    color: #fff;
    border-radius: 0 0 8px 0;
}

.pkgBadgeRight {
    right: 0;
    color: #fff;
    border-radius: 0 0 0 8px;
}

.pkgTypeTv {
    background: #31105096 /*linear-gradient(180deg, #ff3d3d 0%, #d61f1f 100%);*/
}

.pkgTypeInternet {
    background: #db5e00;/*linear-gradient(180deg, #ff7a00 0%, #db5e00 100%);*/
}

.pkgTypeMix {
    background: linear-gradient(180deg, #7a3cff 0%, #5820c9 100%);
}

.popularPkgBody {
    position: absolute;
    width: 366px;
    height: 270px;
    bottom: 0px;
    background: linear-gradient(180deg, rgb(1 1 1 / 4%) 15%, rgba(0, 0, 0, 1) 70%);
    /*  background: #ffffff;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0.21) 5%, rgba(0, 0, 0, 1) 95%);*/
    padding: 22px 18px 20px;
}

.popularPkgTitle {
    position: absolute;
    bottom: 200px;
    color: #f2f2f2;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
   
    min-height: 30px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}

.popularPkgSub {
    position: absolute;
    bottom: 125px;
    color: rgba(255,255,255,0.74);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 20px;
    padding-right:9px;
    min-height: 68px;
}

.popularPkgPriceRow {
    width:330px;
    position:absolute;
    bottom:70px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.popularPkgPriceTitle {
    padding:7px;
    color: rgba(255,255,255,0.58);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.popularPkgPrice {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.popularPkgActions {
    width:330px;
    position:absolute;
    bottom:15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btnApply,
.btnDetail {
    padding:10px;
    min-height: 58px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    transition: .18s ease;
}

.btnApply {
    background: #ffd000;
    color: #111;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}

    .btnApply:hover {
        background: #ffdb33;
        transform: translateY(-1px);
    }

.btnDetail {
    color: #f4f4f4;
    background: linear-gradient(180deg, #1a1a1a 0%, #101010 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

    .btnDetail:hover {
        border-color: rgba(255,208,0,0.30);
        color: #fff;
    }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1199px) {
    .popularPackagesGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .fullBannerInner {
        min-height: 64px;
        padding: 12px 16px;
        gap: 14px;
    }

    .bannerText1,
    .bannerText2 {
        font-size: 20px;
    }

    .badge img {
        height: 30px;
    }

    .popularPackagesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .homeQuickNav {
        gap: 10px;
    }

    .homeQuickBtn {
        width: calc(50% - 5px);
        min-width: 0;
        height: 48px;
        padding: 0 14px 0 28px;
        border-radius: 14px;
        font-size: 16px;
    }

        .homeQuickBtn::after {
            left: 12px;
            width: 5px;
            height: 18px;
        }

    .popularPackagesHead h2 {
        font-size: 24px;
    }

    .pkgTopArea {
        min-height: 180px;
    }
}

@media (max-width: 640px) {
    .fullBannerInner {
        min-height: auto;
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .bannerText1,
    .bannerText2 {
        font-size: 16px;
        line-height: 1.22;
    }

    .badge img {
        height: 25px;
        padding: 2px 5px;
        border-radius: 8px;
    }

    .popularPackagesGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .popularPkgTitle {
       
        min-height: auto;
        font-size: 18px;
    }

    .popularPkgSub {
        min-height: auto;
    }

    .popularPkgPrice {
        font-size: 18px;
    }

    .btnApply,
    .btnDetail {
        min-height: 52px;
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    .fullBannerInner {
        gap: 8px;
        padding: 10px 12px;
    }

    .bannerText1,
    .bannerText2 {
        font-size: 15px;
    }

    .badge img {
        height: 23px;
    }
}

.homeTopPromo {
    position: relative;
    z-index: 20;
}

.promoBanner {
    transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease;
    overflow: hidden;
}

.homeQuickNavWrap {
    transition: all .25s ease;
}

.homeQuickNav {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    transition: all .25s ease;
}

.homeQuickBtn {
    min-height: 56px;
    padding: 0 22px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-decoration: none;
    transition: all .25s ease, transform .2s ease;
    white-space: nowrap;
}

    .homeQuickBtn:active {
        transform: scale(.98);
    }

@media (max-width: 768px) {

    .homeTopPromo.sticky {
        position: fixed;
        top: 70px; /* header yüksekliğine göre düzelt */
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 8px 10px;
        background: rgb(52 19 91 / 78%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(0,0,0,.24);
        transform: translateY(0);
        transition: transform .25s ease, opacity .25s ease;
    }

/*    .homeTopPromo.sticky-hidden {
        transform: translateY(-140%);
        opacity: 0;
        pointer-events: none;
    }*/

    .homeTopPromo.sticky .promoBanner {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .homeTopPromo.sticky .homeQuickNavWrap {
        margin: 0;
    }

    .homeTopPromo.sticky .homeQuickNav {
        gap: 8px;
    }

    .homeTopPromo.sticky .homeQuickBtn {
        min-height: 42px;
        padding: 0 14px;
        border-radius: 14px;
        font-size: 14px;
        line-height: 1;
        box-shadow: 0 4px 12px rgba(0,0,0,.22);
    }

    .homeTopPromo.sticky.sticky-compact .homeQuickBtn {
        min-height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }
}