.user-chip{
  display:flex; align-items:center; gap:10px;
  height:38px; padding:0 10px 0 6px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(35,0,70,.45), rgba(12,12,20,.45));
  color:#fff; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.user-chip .avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:13px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(180,90,255,.55), rgba(80,30,160,.55));
  border:1px solid rgba(255,255,255,.12);
}
.user-chip .u-meta{ display:flex; flex-direction:column; line-height:1.05 }
.user-chip .u-name{ font-size:12px; font-weight:700 }
.user-chip .u-sub{ font-size:11px; opacity:.75 }

/* ==== DRAWER ==== */
:root{
  --pd-glass: rgba(255,255,255,.06);
  --pd-hover: rgba(255,255,255,.10);
  --pd-bd:    rgba(255,255,255,.12);
  --pd-tint1: #7c2ae8;
  --pd-tint2: #9b4dff;
}

.profile-backdrop{
  position:fixed; inset:0; background:rgba(5,5,12,.45);
  backdrop-filter: blur(2px); z-index: 9997;
}

.profile-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(96vw, 380px);
  transform: translateX(100%); transition: transform .25s ease;
  z-index:9998; color:#fff; overflow:auto;
  border-left:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(22,18,40,.96), rgba(16,14,28,.96));
  box-shadow: -30px 0 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  scrollbar-gutter: stable;
}
.profile-drawer.open{ transform: translateX(0); }

/* scroll bar ufaktan */
.profile-drawer::-webkit-scrollbar{ width:10px }
.profile-drawer::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16); border-radius:8px; border:2px solid transparent; background-clip: padding-box;
}

/* ==== HEADER (sticky) ==== */
.pd-header{
  position: sticky; top:0; z-index: 2;
  padding: 14px 12px 10px;
  background: linear-gradient(180deg, rgba(22,18,40,.96), rgba(22,18,40,.75));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pd-cover{
  position:absolute; inset:0 0 auto 0; height:110px; z-index: -1;
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(166,76,255,.45), rgba(60,0,120,.25) 40%, rgba(0,0,0,0) 80%),
    linear-gradient(135deg, rgba(40,0,70,.5), rgba(20,20,35,.5));
  filter: blur(4px);
}
.pd-row{
  display:flex; align-items:center; gap:12px;
  padding: 12px; border-radius:16px;
  background: var(--pd-glass);
  border: 1px solid var(--pd-bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pd-avatar{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  font-weight:800; font-size:18px;
  border:1px solid var(--pd-bd);
  background: radial-gradient(120% 120% at 30% 20%, rgba(180,90,255,.45), rgba(90,40,180,.45));
}
.pd-id{ display:flex; flex-direction:column; line-height:1.1 }
.pd-name{ font-weight:800 }
.pd-mail{ font-size:12px; color:#cfd0ff }
.pd-close{
  margin-left:auto; width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer;
}
.pd-close:hover{ background: rgba(255,255,255,.14); }

/* ==== NAV LIST ==== */
.pd-nav{ padding: 10px 12px 16px; }

.pd-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:14px; color:#e9e9ff; text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  background: var(--pd-glass);
  margin-bottom:10px;
  transition: background .15s ease, transform .06s ease, border-color .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pd-item:hover{ background: var(--pd-hover); border-color: rgba(255,255,255,.12); }
.pd-item:active{ transform: translateY(1px); }

.pd-item .pd-ic{
  width:22px; text-align:center; opacity:.95; font-size:16px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

.pd-item.disabled{ opacity:.55; pointer-events:none; }

/* ==== LOGOUT (daha belirgin) ==== */
.pd-logout{ margin-top:14px; padding: 6px; border-radius:16px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); }
.pd-logout button{
  all:unset; display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 12px; border-radius:12px; cursor:pointer; color:#ffd6d6;
  border:1px solid rgba(255,115,115,.22);
  background: linear-gradient(135deg, rgba(210,48,120,.15), rgba(130,25,85,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pd-logout button:hover{
  background: linear-gradient(135deg, rgba(210,48,120,.22), rgba(130,25,85,.22));
  border-color: rgba(255,115,115,.35);
}

.pd-id .pd-balance{
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(124,42,232,.20), rgba(155,77,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 12px;
  color:#fff;
}
.pd-id .pd-balance .pb-label{
  opacity:.85; font-weight:700; letter-spacing:.2px;
}
.pd-id .pd-balance .pb-amount{
  font-weight:800; letter-spacing:.3px;
}
.pd-id .pd-balance .pb-topup{
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff; text-decoration:none; font-weight:700;
}
.pd-id .pd-balance .pb-topup:hover{
  background: rgba(255,255,255,.16);
}