.packages-wrap{
    max-width:1200px;
    margin:40px auto;
    padding:20px;
}

.packages-title{
    text-align:center;
    font-size:42px;
    font-weight:900;
    color:#fff;
    margin-bottom:15px;
}

.packages-sub{
    text-align:center;
    color:#9ca3af;
    font-size:16px;
    margin-bottom:45px;
}

.packages-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.package-card{
    position:relative;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    padding:35px;
    overflow:hidden;

    box-shadow:
    0 0 35px rgba(0,0,0,.35);

    transition:.30s;
}

.package-card:hover{
    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.45),
    0 0 35px rgba(16,185,129,.18);
}

.package-badge{
    position:absolute;
    top:18px;
    right:-35px;
    background:linear-gradient(135deg,#f59e0b,#facc15);
    color:#111827;
    font-weight:900;
    font-size:13px;
    padding:10px 45px;
    transform:rotate(35deg);
}

.package-name{
    font-size:30px;
    font-weight:900;
    color:#fff;
    margin-bottom:12px;
}

.package-price{
    font-size:48px;
    font-weight:900;
    color:#10b981;
    margin-bottom:5px;
}

.package-time{
    color:#9ca3af;
    font-size:15px;
    margin-bottom:30px;
}

.package-features{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:35px;
}

.package-feature{
    display:flex;
    align-items:center;
    gap:12px;
    color:#e5e7eb;
    font-size:15px;
    font-weight:600;
}

.package-feature i{
    width:26px;
    height:26px;
    border-radius:999px;
    background:rgba(16,185,129,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#10b981;
    font-style:normal;
    font-size:14px;
}

.buy-btn{
    width:100%;
    height:60px;
    border:none;
    border-radius:20px;
    cursor:pointer;

    background:linear-gradient(135deg,#10b981,#059669);

    color:#fff;
    font-size:17px;
    font-weight:900;

    box-shadow:
    0 15px 35px rgba(16,185,129,.35);

    transition:.25s;
}

.buy-btn:hover{
    transform:translateY(-2px);

    box-shadow:
    0 20px 40px rgba(16,185,129,.45);
}

/* POPUP */

.payment-popup{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(10px);

    display:none;
    align-items:center;
    justify-content:center;

    padding:25px;

    z-index:999999;
}

.payment-box{

    position:relative;

    width:100%;
    max-width:1100px;

    height:92vh;

    border-radius:32px;

    background:
    linear-gradient(
        180deg,
        rgba(17,24,39,.96),
        rgba(3,7,18,.98)
    );

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    box-shadow:
    0 25px 80px rgba(0,0,0,.65),
    0 0 60px rgba(16,185,129,.10);

    animation:popup .25s ease;
}

.payment-close{

    position:absolute;

    top:18px;
    right:18px;

    width:48px;
    height:48px;

    border:none;
    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:20px;
    font-weight:900;

    cursor:pointer;

    transition:.25s;

    z-index:10;
}

.payment-close:hover{

    transform:rotate(90deg);

    background:#ef4444;
}

.payment-title{

    font-size:36px;
    font-weight:900;

    color:#fff;

    padding:30px 35px 10px;
}

.payment-text{

    color:#9ca3af;

    line-height:1.7;

    padding:0 35px 25px;
}

.paytr-area{

    width:100%;

    height:calc(100% - 120px);

    background:#fff;

    overflow:hidden;

    border-top:
    1px solid rgba(255,255,255,.05);
}

#paytriframe{

    width:100%;
    height:100%;

    border:none;

    background:#fff;
}

@keyframes popup{

    from{
        opacity:0;
        transform:scale(.88);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

/* MOBİL */

@media(max-width:768px){

    .payment-popup{
        padding:10px;
    }

    .payment-box{
        height:96vh;
        border-radius:24px;
    }

    .payment-title{
        font-size:28px;
        padding:25px 25px 8px;
    }

    .payment-text{
        padding:0 25px 20px;
        font-size:14px;
    }
}

@media(max-width:900px){

    .packages-grid{
        grid-template-columns:1fr;
    }

    .packages-title{
        font-size:34px;
    }
}