/* =========================
   TikTok DP VIP DESIGN
========================= */


.tiktok-dp-box{

    max-width:700px;
    margin:60px auto;
    padding:40px;

    background:
    linear-gradient(145deg,#ffffff,#e8e8e8);

    border-radius:35px;

    box-shadow:
    20px 20px 50px rgba(0,0,0,.18),
    -15px -15px 40px rgba(255,255,255,.9);

    font-family:Arial,sans-serif;

    text-align:center;

}



/* Heading */

.tiktok-dp-box h2{

    font-size:36px;

    font-weight:900;

    color:#111;

    margin-bottom:30px;

}





/* Input */


#tiktok_username{

    width:100%;

    padding:18px 22px;

    border:none;

    outline:none;

    border-radius:18px;

    font-size:17px;


    background:#f5f5f5;


    box-shadow:

    inset 6px 6px 12px rgba(0,0,0,.12),

    inset -6px -6px 12px white;

}





/* Main Button */


#get_dp{


    width:100%;

    margin-top:20px;

    padding:18px;


    border:none;

    border-radius:18px;


    background:

    linear-gradient(135deg,#000,#333);


    color:white;


    font-size:18px;

    font-weight:bold;


    cursor:pointer;


    box-shadow:

    0 12px 25px rgba(0,0,0,.35);


    transition:.3s;


}



#get_dp:hover{


    transform:translateY(-5px);

    box-shadow:

    0 20px 35px rgba(0,0,0,.45);


}







/* =========================
   PROFILE CARD
========================= */


.profile-card{


    margin-top:40px;


    display:flex;

    align-items:center;


    gap:35px;


    padding:35px;


    border-radius:35px;


    background:

    linear-gradient(145deg,#ffffff,#dddddd);


    box-shadow:

    18px 18px 40px rgba(0,0,0,.2),

    -12px -12px 35px white;


}





/* Image */


.profile-image{


    width:190px;

    height:190px;


    object-fit:cover;


    border-radius:50%;


    border:10px solid white;


    box-shadow:

    0 20px 40px rgba(0,0,0,.35);


    transition:.4s;


}



.profile-image:hover{


    transform:

    scale(1.08)

    rotate(5deg);


}







/* Profile Info */


.profile-info h3{


    font-size:28px;

    font-weight:900;

    margin:0;

    color:#111;


}



.username{


    margin:15px 0 25px;


    font-size:20px;

    font-weight:bold;


    color:#555;


}








/* =========================
   VIP DOWNLOAD BUTTONS
========================= */


.download-options{


    display:flex;

    flex-direction:column;

    gap:18px;


}




.download-btn{


    position:relative;


    padding:17px 35px;


    border-radius:20px;


    color:white !important;


    text-decoration:none;


    font-size:17px;


    font-weight:900;


    display:flex;

    align-items:center;

    justify-content:center;


    gap:10px;


    overflow:hidden;


    box-shadow:

    0 12px 25px rgba(0,0,0,.30),

    inset 0 2px 8px rgba(255,255,255,.35);


    transition:.35s;


}





/* Shine */


.download-btn::before{


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:80%;

    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.7),

    transparent

    );


    transform:skewX(-25deg);


    transition:.7s;


}




.download-btn:hover::before{


    left:130%;


}




.download-btn:hover{


    transform:

    translateY(-7px)

    scale(1.04);


    box-shadow:

    0 20px 40px rgba(0,0,0,.45);


}






/* Normal */


.normal{


    background:

    linear-gradient(

    135deg,

    #111,

    #555

    );


}



.normal::after{

    content:"⬇️";

}





/* HD */


.hd{


    background:

    linear-gradient(

    135deg,

    #005bea,

    #00c6fb

    );


}



.hd::after{

    content:"⚡";

}






/* 4K */


.fourk{


    background:

    linear-gradient(

    135deg,

    #ff004c,

    #ff9900

    );


}



.fourk::after{

    content:"🔥";

}







/* Mobile */


@media(max-width:650px){


.profile-card{


    flex-direction:column;

    text-align:center;


}



.profile-image{


    width:160px;

    height:160px;


}


}