/* ===========================
PROFILE PAGE
=========================== */

.profile-section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 20px;

    background:
    radial-gradient(circle at top left,#fef7df 0%,transparent 35%),
    radial-gradient(circle at bottom right,#f7e6aa 0%,transparent 30%),
    linear-gradient(135deg,#f8f8f8,#ececec);

    position:relative;

    overflow:hidden;

}

.profile-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(80px);

    top:-150px;

    left:-120px;

}

.profile-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(139,15,69,.06);

    filter:blur(80px);

    right:-120px;

    bottom:-120px;

}

/* ===========================
BACK BUTTON
=========================== */

.back-home{

    position:absolute;

    top:25px;

    left:25px;

    text-decoration:none;

    background:#fff;

    color:#222;

    padding:12px 22px;

    border-radius:50px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.back-home:hover{

    background:#D4AF37;

    color:#fff;

    transform:translateY(-2px);

}

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

.profile-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:470px;

    padding:48px 38px;

    border-radius:32px;

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

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

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

    box-shadow:

    0 35px 70px rgba(0,0,0,.12),

    inset 0 1px 0 rgba(255,255,255,.9),

    inset 0 -1px 0 rgba(255,255,255,.18);

    overflow:hidden;

    transition:.45s;

}

.profile-card:hover{

    transform:

    perspective(1200px)

    rotateX(2deg)

    rotateY(-2deg)

    translateY(-8px);

}

/* ===========================
AVATAR
=========================== */

.profile-avatar{

    width:120px;

    height:120px;

    margin:auto;

    margin-bottom:28px;

    border-radius:50%;

    background:

    linear-gradient(

    145deg,

    #F4D77D,

    #D4AF37,

    #B8860B

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:50px;

    color:white;

    border:5px solid rgba(255,255,255,.8);

    box-shadow:

    0 15px 35px rgba(212,175,55,.45),

    inset 0 3px 10px rgba(255,255,255,.4);

    transition:.4s;

}

.profile-avatar:hover{

    transform:

    scale(1.08)

    rotate(8deg);

}

/* ===========================
TEXT
=========================== */

.profile-card h2{

    font-size:30px;

    color:#222;

    margin-bottom:8px;

}

.profile-card p{

    color:#777;

    font-size:15px;

    margin-bottom:35px;

}

.profile-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    linear-gradient(

    110deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );

    transform:skewX(-20deg);

    transition:1s;

}

.profile-card:hover::before{

    left:170%;

}

/* ===========================
MENU
=========================== */

.profile-menu{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.profile-menu a{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(14px);

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

    color:#333;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

    box-shadow:

    0 8px 18px rgba(0,0,0,.05);

}

.profile-menu a::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );

    transition:.7s;

}

.profile-menu a:hover::before{

    left:120%;

}

.profile-menu a:hover{

    transform:

    translateY(-5px)

    scale(1.02);

}

.profile-menu a::after{

    content:"›";

    font-size:22px;

    color:#999;

}


.profile-menu a:hover::after{

    color:#fff;

}

/* ===========================
LOGOUT
=========================== */

#logoutBtn{

    position:relative;

    overflow:hidden;

    width:100%;

    margin-top:30px;

    padding:17px;

    border:none;

    border-radius:18px;

    background:

    linear-gradient(

    135deg,

    #7B1E1E,

    #A52A2A,

    #C13D3D

    );

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:

    0 12px 25px rgba(165,42,42,.28);

}

#logoutBtn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transition:.8s;

}

#logoutBtn:hover::before{

    left:120%;

}

#logoutBtn:hover{

    transform:

    translateY(-4px)

    scale(1.02);

}

.back-home{

    backdrop-filter:blur(20px);

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

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

    box-shadow:

    0 12px 30px rgba(0,0,0,.08);

}

.back-home:hover{

    transform:

    translateY(-3px)

    scale(1.05);

}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:768px){

.profile-card{

    padding:35px 22px;

}

.profile-avatar{

    width:90px;

    height:90px;

    font-size:40px;

}

.profile-card h2{

    font-size:24px;

}

.profile-menu a{

    padding:16px;

    font-size:15px;

}

.back-home{

    top:15px;

    left:15px;

    padding:10px 18px;

}

}

@media(max-width:480px){

.profile-section{

    padding:60px 15px;

}

.profile-card{

    border-radius:22px;

    padding:30px 18px;

}

.profile-menu{

    gap:12px;

}

.profile-menu a{

    font-size:14px;

}

#logoutBtn{

    font-size:15px;

}

}