/* sidebar.css — satu fungsi: panel kiri (potret, wordmark, nav, tombol bahasa). */
.page{
  position:relative; z-index:1;
  display:flex;
  align-items:flex-start;
  min-height:100vh;
}

.side{
  width:360px; flex:0 0 360px;
  position:sticky;
  top:0;
  top:env(safe-area-inset-top,0px);
  height:100svh;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:0 0 28px;
}
.portrait{
  position:relative;
  width:100%;
  clip-path:polygon(0 0,100% 0,100% 84%,78% 100%,0 100%);
  background:var(--bg-raise);
}
.portrait img{
  width:100%; height:auto; display:block;
}
.wordmark{
  position:absolute; left:0; right:0; bottom:0;
  margin:0;
  padding:38px 22px 16px;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.15rem);
  letter-spacing:-0.01em;
  background:linear-gradient(to top, var(--bg) 32%, rgba(10,7,18,0.82) 68%, transparent 100%);
}
.role{
  margin:10px 22px 0;
  color:var(--ink-dim);
  font-size:0.82rem;
  letter-spacing:0.01em;
}
.side-nav{
  margin:26px 22px 0;
  display:flex; flex-direction:column; gap:9px;
}
.side-nav a{
  text-decoration:none;
  font-size:0.86rem;
  color:var(--ink-dim);
  transition:color .15s ease;
  width:fit-content;
}
.side-nav a:hover, .side-nav a:focus-visible{color:var(--violet-bright);}
.side-nav a::before{content:"$ "; color:var(--ink-faint);}
.side-nav a:hover::before, .side-nav a:focus-visible::before{color:var(--violet-bright);}

.side-foot{
  margin:0 22px;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; border-top:1px solid var(--line);
}
.side-foot .mark{color:var(--ink-faint); font-size:0.75rem;}
#langToggle{
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  background:none; border:none; cursor:pointer;
  color:var(--ink-faint);
  padding:4px 0;
  display:flex; align-items:center; gap:6px;
}
#langToggle span{transition:color .15s ease;}
#langToggle .active{color:var(--violet-bright); font-weight:600;}
#langToggle .sep{color:var(--ink-faint);}

@media (max-width:960px){
  .page{flex-direction:column;}
  .side{
    position:relative; height:auto; width:100%; flex:none;
    border-right:none; border-bottom:1px solid var(--line);
    padding-bottom:22px;
  }
  .portrait{clip-path:polygon(0 0,100% 0,100% 90%,88% 100%,0 100%);}
  .portrait img{max-height:56vh; width:100%; object-fit:cover; object-position:top center;}
  .side-nav{flex-direction:row; flex-wrap:wrap; gap:16px; margin-top:22px;}
}