/* Menu profil pengguna di header (muncul setelah login). Dipakai bersama header-profile.js */

/* Saat sudah login: sembunyikan tombol Login (desktop & versi menu mobile) */
html.hp-in .sh-cta,
html.hp-in .sh-login-m,
html.hp-in .mpt-cta{display:none!important}

.hp{position:relative;flex-shrink:0;font-family:'Manrope','Inter','Segoe UI',system-ui,sans-serif;color:#0b2a4a}
.sh-bar>.hp{margin-left:-12px}
.mpt-in>.hp{margin-left:-12px}

.hp .hp-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 5px;margin:0;border:1px solid #d7e5f2;border-radius:10px;background:#fff;color:#0b2a4a;font:700 13px/1 'Manrope','Inter','Segoe UI',system-ui,sans-serif;cursor:pointer;box-shadow:none;transition:border-color .2s,color .2s}
.hp .hp-btn:hover,.hp.open .hp-btn{background:#fff;border-color:#0a84e6;color:#0a6fc2}
.hp .hp-btn:focus-visible,.hp .hp-item:focus-visible{outline:2px solid #0a84e6;outline-offset:2px}

.hp .hp-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#1596f0,#0868c4);color:#fff;font:800 13px/1 inherit;font-family:inherit;text-transform:uppercase}
.hp .hp-av img{width:100%;height:100%;object-fit:cover;display:block}
.hp .hp-nm{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp .hp-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hp.open .hp-chev{transform:rotate(180deg)}

.hp .hp-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:230px;max-width:min(280px,calc(100vw - 24px));padding:8px;background:#fff;border:1px solid #d7e5f2;border-radius:12px;box-shadow:0 18px 40px -16px rgba(11,42,74,.35);z-index:300}
.hp.open .hp-menu{display:block}
.hp .hp-who{padding:8px 10px 10px;border-bottom:1px solid #e3edf6;margin-bottom:6px}
.hp .hp-who b{display:block;font-size:13px;font-weight:800;color:#0b2a4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp .hp-who span{display:block;margin-top:2px;font-size:12px;font-weight:500;color:#587390;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp .hp-item{display:flex;align-items:center;width:100%;height:auto;min-height:40px;padding:9px 10px;margin:0;border:0;border-radius:8px;background:none;box-shadow:none;color:#35567a;font:650 14px/1.2 inherit;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.hp .hp-item:hover{background:#e4eff7;color:#0b2a4a}
.hp .hp-out{color:#c0392b}
.hp .hp-out:hover{background:#fdecea;color:#a93226}

@media(max-width:900px){.hp .hp-nm{display:none}.hp .hp-btn{padding:0 8px 0 5px;gap:6px}}
@media(max-width:790px){
  .sh-bar>.hp{margin-left:0;order:2}
  .sh-bar>.sh-menu{order:3}
}
@media(max-width:760px){
  .mpt-in>.hp{margin-left:0}
  .hp .hp-btn{height:38px}
}
@media(max-width:520px){.hp .hp-chev{display:none}.hp .hp-btn{padding:0 5px}}
@media(prefers-reduced-motion:reduce){.hp .hp-btn,.hp .hp-chev{transition:none}}
@media print{.hp{display:none}}

@media(prefers-color-scheme:dark){
  body.sh-dark .hp{color:#e8f1fa}
  body.sh-dark .hp .hp-btn,body.sh-dark .hp .hp-btn:hover,body.sh-dark .hp.open .hp-btn,body.sh-dark .hp .hp-menu{background:#10253a;border-color:#23405c;color:#e8f1fa}
  body.sh-dark .hp .hp-btn:hover,body.sh-dark .hp.open .hp-btn{border-color:#0a84e6}
  body.sh-dark .hp .hp-who{border-bottom-color:#23405c}
  body.sh-dark .hp .hp-who b{color:#e8f1fa}
  body.sh-dark .hp .hp-who span{color:#9fb7cf}
  body.sh-dark .hp .hp-item{color:#c4d6e8}
  body.sh-dark .hp .hp-item:hover{background:#1a3550;color:#fff}
  body.sh-dark .hp .hp-out{color:#ff8a7a}
  body.sh-dark .hp .hp-out:hover{background:#3a1f22;color:#ffb0a4}
}