/* Halaman Tim advokat. */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.person{position:relative;background:var(--surface);border:1px solid var(--line);padding:24px}
.person .ph{aspect-ratio:4/3;background:var(--line);margin-bottom:16px;display:grid;place-items:center;color:var(--muted);font-size:.85rem;overflow:hidden}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:1.2rem}
.person p{margin:4px 0 0;color:var(--muted)}
.person .izin{font-size:.88rem;color:var(--brass);font-weight:600}
/* Biodata. Panel ringkas "Pendidikan" (kaca buram, garis waktu emas) muncul di bawah kartu saat kartu disorot atau difokus lewat keyboard;
   panel tidak menutupi kartu. Tombol "Lihat selengkapnya" membuka jendela detail lengkap (dialog). */
.person{border-radius:14px;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .35s}
.person .ph{border-radius:10px}
.bio-bar{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.bio-btn{display:inline-flex;align-items:center;gap:8px;font:600 .92rem var(--font-isi);color:var(--brass);background:none;border:0;padding:0;cursor:pointer}
.bio-btn::after{content:"\2192";transition:transform .3s cubic-bezier(.22,1,.36,1)}
.bio-btn:hover::after,.person:hover .bio-btn::after{transform:translateX(5px)}
.bio-btn:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px}

.bio-pop{position:absolute;left:0;right:0;top:calc(100% + 14px);z-index:20;padding:20px 22px 18px;border-radius:16px;color:#e8edf6;font-size:.93rem;line-height:1.6;
  background:linear-gradient(155deg,rgba(24,58,108,.88),rgba(9,22,46,.92));-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(201,164,92,.4);box-shadow:0 24px 48px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset,0 1px 0 rgba(255,255,255,.12) inset;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:top center;pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s}
.bio-pop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* jembatan tak terlihat agar sorotan tidak putus di celah kartu dan panel */
.bio-pop::after{content:"";position:absolute;top:-7px;left:34px;width:12px;height:12px;transform:rotate(45deg);background:rgba(24,58,108,.95);border-left:1px solid rgba(201,164,92,.5);border-top:1px solid rgba(201,164,92,.5);border-top-left-radius:3px}
.pop-atas .bio-pop{top:auto;bottom:calc(100% + 14px);transform:translateY(10px) scale(.97);transform-origin:bottom center}
.pop-atas .bio-pop::before{top:auto;bottom:-16px}
.pop-atas .bio-pop::after{top:auto;bottom:-7px;transform:rotate(225deg)}
.bio-pop-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bio-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#0b1e3f;background:linear-gradient(135deg,#e6c887,#c9a45c);box-shadow:0 4px 12px rgba(201,164,92,.35)}
.bio-pop h4{margin:0;font:700 .78rem var(--font-judul);letter-spacing:.14em;text-transform:uppercase;color:#e6c887}
.bio-pop ul,.bio-dlg-isi ul{list-style:none;margin:0;padding:0 0 0 18px;position:relative;color:#d6deec}
.bio-pop ul::before,.bio-dlg-isi ul::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(#c9a45c,rgba(201,164,92,.15))}
.bio-pop li,.bio-dlg-isi li{position:relative;margin:0 0 10px}
.bio-pop li:last-child,.bio-dlg-isi li:last-child{margin-bottom:0}
.bio-pop li::before,.bio-dlg-isi li::before{content:"";position:absolute;left:-18px;top:.55em;width:10px;height:10px;border-radius:50%;background:#0b1e3f;border:2px solid #e6c887;box-sizing:border-box}
.bio-pop li{opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.person:has(.bio-btn:focus-visible) .bio-pop,.person.aktif .bio-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s}
.person:has(.bio-btn:focus-visible) .bio-pop li,.person.aktif .bio-pop li{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);transition-delay:calc(.12s + var(--i,0) * .07s)}
@media (hover:hover){
  .person:hover{transform:translateY(-4px);border-color:rgba(201,164,92,.6);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
  .person:hover .bio-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s}
  .person:hover .bio-pop li{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);transition-delay:calc(.12s + var(--i,0) * .07s)}
}
.person.aktif{border-color:rgba(201,164,92,.6)}

/* Jendela detail lengkap. */
.bio-dlg{width:min(680px,calc(100% - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid rgba(201,164,92,.45);border-radius:20px;background:linear-gradient(155deg,#132f5a,#0b1e3f 55%,#08142a);color:#e8edf6;overflow:hidden;margin:auto;box-shadow:0 40px 80px -20px rgba(0,0,0,.7)}
.bio-dlg[open]{display:flex;flex-direction:column;animation:bio-masuk .45s cubic-bezier(.22,1,.36,1)}
.bio-dlg::backdrop{background:rgba(4,9,20,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bio-dlg-x{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;font-size:1.4rem;line-height:1;color:#e8edf6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:50%;cursor:pointer;transition:background .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.bio-dlg-x:hover{background:rgba(201,164,92,.25);transform:rotate(90deg)}
.bio-dlg-head{display:flex;gap:20px;align-items:center;padding:28px 64px 22px 28px;background:linear-gradient(180deg,rgba(201,164,92,.12),transparent);border-bottom:1px solid rgba(201,164,92,.25)}
.bio-dlg-foto{flex:0 0 96px;width:96px;aspect-ratio:1;overflow:hidden;border-radius:18px;background:#2a3a56;box-shadow:0 0 0 2px rgba(201,164,92,.6),0 10px 24px -8px rgba(0,0,0,.6)}
.bio-dlg-foto img{width:100%;height:100%;object-fit:cover;display:block}
.bio-dlg-head h3{margin:0;font:700 1.35rem var(--font-judul);color:#fff}
.bio-dlg-head p{margin:4px 0 0;color:#aab6cc}
.bio-dlg-head .bio-dlg-izin{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:999px;background:rgba(201,164,92,.14);border:1px solid rgba(201,164,92,.4);color:#e6c887;font-size:.8rem;font-weight:600}
.bio-dlg-isi{padding:22px 28px 30px;overflow-y:auto;font-size:.95rem;line-height:1.75;color:#d6deec}
.bio-dlg-isi h4{margin:24px 0 12px;font:700 .78rem var(--font-judul);letter-spacing:.14em;text-transform:uppercase;color:#e6c887}
.bio-dlg-isi h4:first-child{margin-top:0}
.bio-dlg-isi p{margin:0 0 10px}
@keyframes bio-masuk{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:480px){.bio-dlg-head{flex-direction:column;align-items:flex-start;padding-right:56px}}
@media (prefers-reduced-motion:reduce){.bio-pop,.bio-pop li,.bio-btn::after,.person,.bio-dlg-x{transition:none!important}.bio-pop li{transform:none}.bio-dlg[open]{animation:none}}