.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}


.topbar-search{

    flex:1;

    max-width:550px;

    position:relative;

}


.topbar-search i{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--primary);

}


.topbar-search input{

    width:100%;

    height:60px;

    padding:0 25px 0 55px;

    border:none;

    outline:none;

    border-radius:20px;

    background:

    rgba(255,255,255,.03);

    border:

    1px solid rgba(255,255,255,.05);

    color:#fff;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:25px;

}


.topbar-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    color:#999;

}


.notification{

    cursor:pointer;

}


.notification-badge{

    position:absolute;

    top:-8px;

    right:-10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:11px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.separator{

    width:1px;

    height:40px;

    background:

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

}


.profile{

    display:flex;

    align-items:center;

    gap:15px;

}


.profile-avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        #00d9ff,

        #0099ff

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}


.profile-info h4{

    margin-bottom:3px;

}


.profile-info span{

    color:#777;

    font-size:14px;

}

/* ==========================================
   PROFIL MENÜ
========================================== */

.profile-menu{

    position:relative;

}


/* ==========================================
   DROPDOWN
========================================== */

.profile-dropdown{

    position:absolute;

    top:120%;

    right:0;

    width:260px;

    padding:10px;

    border-radius:20px;

    background:#0f1117;

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

    box-shadow:0 15px 40px rgba(0,0,0,.4);

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.25s;

    z-index:9999;

}


.profile-menu:hover .profile-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* ==========================================
   LINKS
========================================== */

.profile-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border-radius:12px;

    color:white;

    text-decoration:none;

    transition:.25s;

}


.profile-dropdown a:hover{

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

}


.profile-dropdown a i{

    width:18px;

    color:var(--primary);

}


/* ==========================================
   DIVIDER
========================================== */

.dropdown-divider{

    height:1px;

    margin:8px 0;

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

}


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

.logout-link i{

    color:#ff5c5c;

}