/* ===== Sol-alt hesap popout'u — Discord account popover birebir =====
   Referans: Discord 2026 account panel + Sybrax/Discord-User-Card ölçüleri */
.acct-popout{
  position:fixed;width:300px;
  background:var(--popout-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  z-index:200;display:none;overflow:visible; /* alt menü kırpılmasın */
  transform-origin:bottom left;
}
.acct-popout.open{display:block;animation:apPopIn .16s cubic-bezier(.2,.7,.3,1);}
@keyframes apPopIn{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:none;}}

/* ---- Banner + avatar (Discord popout: banner 120px, avatar 80px, -binen) ---- */
.ap-card{position:relative;}
.ap-banner{
  height:120px;background:var(--accent);
  position:relative;overflow:hidden;
  border-radius:var(--radius-md) var(--radius-md) 0 0; /* üst köşeler popout ile uyumlu */
}
.ap-banner img{width:100%;height:100%;object-fit:cover;display:none;}
.ap-avatar{
  position:absolute;top:86px;left:var(--space-16);
  width:80px;height:80px;border-radius:50%;
  border:6px solid var(--popout-bg);
  background:#444;display:flex;align-items:center;justify-content:center;
  font-size:32px;color:#fff;overflow:visible;box-sizing:content-box;z-index:10;
}
.ap-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.ap-avatar-status{
  position:absolute;bottom:1px;right:1px;width:16px;height:16px;border-radius:50%;
  border:4px solid var(--popout-bg);box-sizing:content-box;z-index:11;
}

/* ---- Gövde ---- */
.ap-body{padding:var(--space-16) var(--space-16) var(--space-8);}

/* isim 20px/600 + rol rozeti, kullanıcı adı muted */
.ap-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25;}
.ap-name{font-weight:600;font-size:20px;color:var(--head);word-break:break-word;}
.ap-badge-slot .badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 5px;border-radius:var(--radius-xs);letter-spacing:.02em;}
.ap-sub{font-size:14px;line-height:18px;color:var(--muted);margin-top:1px;font-weight:500;}
.ap-status-text{font-size:14px;color:var(--text);margin-top:var(--space-8);line-height:1.4;white-space:pre-wrap;word-break:break-word;}

/* ayraç (Discord divider --border-subtle) */
.ap-divider{height:1px;background:var(--border);margin:var(--space-12) calc(var(--space-16)*-1) var(--space-8);}

/* ---- Menü ---- */
.ap-menu{display:flex;flex-direction:column;gap:2px;}
.ap-menu-div{height:1px;background:var(--border);margin:6px 0;}
.ap-item{
  display:flex;align-items:center;gap:var(--space-12);width:100%;
  background:none;border:none;color:var(--text);
  font-size:14px;font-weight:500;
  padding:var(--space-8);border-radius:var(--radius-xs);cursor:pointer;text-align:left;position:relative;
  transition:background .12s,color .12s;
}
.ap-item .ap-label{flex:1;}
.ap-item:hover{background:var(--hover);color:var(--head);}
.ap-item .ap-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .12s;}
.ap-item:hover .ap-ico{color:var(--text);}
.ap-arrow{display:flex;align-items:center;color:var(--muted);flex-shrink:0;}

/* durum noktaları */
.ap-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.ap-dot.online,.ap-avatar-status.online{background:var(--online);}
.ap-dot.away,.ap-avatar-status.away{background:var(--idle);}
.ap-dot.dnd,.ap-avatar-status.dnd{background:var(--dnd);}
.ap-dot.invisible,.ap-avatar-status.invisible{background:var(--offline);}

/* durum alt menüsü (sağa açılır) */
.ap-status{cursor:pointer;}
.ap-submenu{
  position:absolute;left:calc(100% + 8px);top:-6px;
  background:var(--popout-bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.6);
  padding:6px;display:none;min-width:220px;z-index:20;
}
.ap-status:hover .ap-submenu{display:block;}
.ap-sub-btn{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  background:none;border:none;color:var(--text);
  font-size:14px;font-weight:500;padding:8px 10px;border-radius:4px;cursor:pointer;text-align:left;
  transition:background .12s;
}
.ap-sub-btn:hover{background:var(--hover);}
.ap-sub-btn .ap-dot{margin-top:3px;}
.ap-sub-btn small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:1px;}

/* çıkış (kırmızı) */
.ap-danger,.ap-danger .ap-ico{color:var(--danger);}
.ap-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);}
.ap-danger:hover .ap-ico{color:var(--danger);}

/* Durum alt-menüsü tıklamayla da açılır (hover'a ek) */
.ap-submenu.open{display:block;}

@media(max-width:640px){
  /* "Ben" ayar menüsü — tam genişlik bottom-sheet (inline left/top'u ez) */
  .acct-popout{
    width:100% !important; max-width:100% !important;
    left:0 !important; right:0 !important;
    bottom:0 !important; top:auto !important;
    max-height:90vh; overflow-y:auto;
    border-radius:18px 18px 0 0 !important;
    transform-origin:bottom center;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 40px rgba(0,0,0,.6);
    z-index:10001 !important;
  }
  .ap-submenu{position:static;left:auto;margin-top:4px;min-width:0;box-shadow:none;background:rgba(0,0,0,.2);}
  .ap-item{padding:13px 14px;}
  .ap-label{font-size:15px;}
}