.credit-card.card-1 {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 40%, #2c5364 100%);
    position: relative;
}

/* Kartaga qo'shimcha estetik nur berish uchun */
.credit-card.card-1::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 242, 254, 0.3), transparent 60%);
    pointer-events: none;
}
        .credit-card.card-1::before {
            border-color: rgba(255, 255, 255, 0.2);
        }


.credit-card.card-2 {
    background: linear-gradient(135deg, #0f0c20 0%, #15102a 40%, #241942 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(157, 78, 221, 0.15);
}


.credit-card.card-2::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(157, 78, 221, 0.25) 0%, transparent 70%);
    pointer-events: none;
}


.credit-card.card-2::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 0, 127, 0.25) 0%, transparent 70%);
    pointer-events: none;
}




.credit-card.card-3 {
    background: linear-gradient(135deg, #141419 0%, #1c1b22 50%, #2b2933 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 110, 0, 0.12);
}

/* To'lqinsimon yorqin chiziq effekti */
.credit-card.card-3::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 110, 0, 0.25);
    border-radius: 50% 40% 60% 30% / 40% 50% 30% 60%;
    pointer-events: none;
}

/* Olovli gradient nur */
.credit-card.card-3::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -20px;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(255, 65, 54, 0.2) 0%, transparent 75%);
    pointer-events: none;
}



.credit-card.card-4 {
    background: linear-gradient(135deg, #040d0a 0%, #081a14 50%, #0d291f 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 255, 163, 0.1);
}

/* Diagonal chiziqli premium tekstura simulyatsiyasi */
.credit-card.card-4::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: linear-gradient(45deg, transparent 48%, rgba(0, 255, 163, 0.03) 50%, transparent 52%);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Markaziy yashil neon nur */
.credit-card.card-4::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 20%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(0, 255, 163, 0.18) 0%, transparent 70%);
    pointer-events: none;
}



.credit-card.card-5 {
    background: linear-gradient(135deg, #0f0e0a 0%, #191710 50%, #292414 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 193, 7, 0.1);
}

/* Oltin rangli premium burchak nuri */
.credit-card.card-5::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -30px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

/* Pastki chap burchakdagi yumshoq oltin jilo */
.credit-card.card-5::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -10px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-6 {
    background: linear-gradient(135deg, #051319 0%, #0a2230 50%, #0f3147 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 212, 255, 0.12);
}

/* Markaziy elektr-ko'k nur effekti */
.credit-card.card-6::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 20%;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.25) 0%, transparent 65%);
    pointer-events: none;
}

.credit-card.card-7 {
    background: linear-gradient(135deg, #140507 0%, #240a0e 50%, #381016 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 71, 87, 0.12);
}

/* O'ng tomondan tarqalayotgan qizil kiber-nur */
.credit-card.card-7::after {
    content: '';
    position: absolute;
    top: 10%;
    right: -50px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 71, 87, 0.25) 0%, transparent 70%);
    pointer-events: none;
}


.credit-card.card-8 {
    background: linear-gradient(135deg, #121315 0%, #1c1d22 60%, #25272c 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(212, 255, 0, 0.08);
}

/* Kislotali neon chiziqli halqa */
.credit-card.card-8::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(212, 255, 0, 0.2);
    border-radius: 43% 57% 30% 70% / 50% 40% 60% 50%;
    pointer-events: none;
}

/* Kuchli lyuminissent nur */
.credit-card.card-8::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -10px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(212, 255, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
}


.credit-card.card-9 {
    background: linear-gradient(135deg, #160211 0%, #25051e 50%, #3a0b30 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 0, 128, 0.1);
}

/* Diagonal gradient shisha nuri */
.credit-card.card-9::after {
    content: '';
    position: absolute;
    top: -50px;
    right: 20%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255, 0, 212, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-9 {
    background: linear-gradient(135deg, #160211 0%, #25051e 50%, #3a0b30 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 0, 128, 0.1);
}

/* Diagonal gradient shisha nuri */
.credit-card.card-9::after {
    content: '';
    position: absolute;
    top: -50px;
    right: 20%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255, 0, 212, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-10 {
    background: linear-gradient(135deg, #070f12 0%, #0d1b20 50%, #162c33 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 242, 254, 0.1);
}

/* Feruza rangli futuristik halqa */
.credit-card.card-10::before {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border: 3px dashed rgba(0, 242, 254, 0.2);
    border-radius: 50%;
    pointer-events: none;
}

/* Kuchli lyuminissent nur */
.credit-card.card-10::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 10%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-11 {
    background: linear-gradient(135deg, #101012 0%, #18181c 60%, #222228 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 30, 80, 0.08);
}

/* Diagonal chiziqli karbon effekt */
.credit-card.card-11::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.01) 25%, transparent 25%), 
                linear-gradient(-45deg, rgba(255,255,255,0.01) 25%, transparent 25%);
    background-size: 6px 6px;
    pointer-events: none;
}

/* Yoqut rangli kiber nur */
.credit-card.card-11::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -20px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255, 30, 80, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-12 {
    background: linear-gradient(135deg, #0b0514 0%, #140b24 50%, #22133a 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(218, 112, 214, 0.12);
}

/* Neon orxideya nuri oʻng tomonda */
.credit-card.card-12::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -40px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.18) 0%, transparent 75%);
    pointer-events: none;
}


.credit-card.card-13 {
    background: linear-gradient(135deg, #131316 0%, #1c1c22 60%, #292930 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(255, 140, 0, 0.1);
}

/* Toʻlqinsimon kiber-chiziqlar */
.credit-card.card-13::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(255, 140, 0, 0.15);
    border-radius: 35% 65% 60% 40% / 50% 35% 65% 50%;
    pointer-events: none;
}

/* Quyosh chaqnashi effekti */
.credit-card.card-13::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.credit-card.card-14 {
    background: linear-gradient(135deg, #0f0b08 0%, #19130e 50%, #261e16 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(46, 213, 115, 0.08);
}

/* Muzli yalpiz nur markazroqda */
.credit-card.card-14::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 15%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(46, 213, 115, 0.2) 0%, transparent 65%);
    pointer-events: none;
}

.credit-card.card-15 {
    background: linear-gradient(135deg, #05051a 0%, #0a0a2e 50%, #12124c 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(112, 0, 255, 0.12);
}

/* Abstrakt kiber-panellar */
.credit-card.card-15::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(112, 0, 255, 0.25);
    border-radius: 20px;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Ultrabinafsha kvant nuri */
.credit-card.card-15::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(112, 0, 255, 0.25) 0%, transparent 70%);
    pointer-events: none;
}