.oc-wrap{overflow-x:auto;padding:1.5rem .5rem 2rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.oc-ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;position:relative}
.oc-tree{min-width:max-content;margin:0 auto}
.oc-li{position:relative;padding:28px 10px 0;display:flex;flex-direction:column;align-items:center}
.oc-tree>.oc-li{padding-top:0}
.oc-li::before,.oc-li::after{content:"";position:absolute;top:0;width:50%;height:28px;border-top:2px solid #9ED9D3}
.oc-li::before{right:50%}.oc-li::after{left:50%;border-left:2px solid #9ED9D3}
.oc-li:first-child::before,.oc-li:last-child::after{border:0}
.oc-li:last-child::before{border-right:2px solid #9ED9D3;border-radius:0 12px 0 0}
.oc-li:first-child::after{border-radius:12px 0 0 0}
.oc-li:only-child::before{display:none}.oc-li:only-child::after{border-top:0;border-radius:0}
.oc-tree>.oc-li::before,.oc-tree>.oc-li::after{display:none}
.oc-li>.oc-ul{padding-top:28px}
.oc-li>.oc-ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:2px solid #9ED9D3}
.oc-card{position:relative;width:200px;background:#fff;border-radius:18px;padding:1rem .9rem .95rem;text-align:center;box-shadow:0 6px 22px rgba(11,37,69,.09);border-top:4px solid var(--teal,#00A39A);transition:transform .25s,box-shadow .25s;opacity:0;transform:translateY(16px)}
.oc-wrap.in .oc-card{animation:ocIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
@keyframes ocIn{to{opacity:1;transform:none}}
.oc-card:hover,.oc-card:focus{transform:translateY(-4px)!important;box-shadow:0 14px 34px rgba(11,37,69,.18);outline:none}
.oc-l0{width:240px;background:linear-gradient(150deg,#0B2545,#13466e);color:#fff;border-top-color:#FFC23C}
.oc-l0 .oc-nama,.oc-l0 .oc-more{color:#dbe9f5}
.oc-l2,.oc-l3{width:180px;border-top-color:#7FD1C9}
.oc-foto{width:72px;height:72px;margin:-.2rem auto .6rem;border-radius:50%;overflow:hidden;background:#E5F6F4;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(0,163,154,.18)}
.oc-l0 .oc-foto{width:88px;height:88px;box-shadow:0 0 0 4px rgba(255,194,60,.55)}
.oc-foto{background:radial-gradient(circle at 50% 30%,#FFFFFF,#E5F6F4 55%,#C9E6EA)}
.oc-l0 .oc-foto{background:radial-gradient(circle at 50% 30%,#FFF6DD,#F3DFA6 55%,#C99A2E)}
.oc-foto img,.entry-content .oc-foto img{width:100%!important;height:100%!important;max-width:none;object-fit:cover!important;object-position:center 12%!important;display:block;border-radius:0!important;margin:0}
.oc-ini{font-weight:800;font-size:1.35rem;color:var(--teal-dd,#007C75)}
.oc-jab{display:block;font-size:.86rem;line-height:1.3}
.oc-nama{display:block;font-size:.82rem;color:#4A5B72;margin-top:.25rem}
.oc-more{display:grid;gap:.15rem;font-size:.74rem;color:#6B7A90;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .3s,margin .3s}
.oc-card:hover .oc-more,.oc-card:focus .oc-more{max-height:4rem;opacity:1;margin-top:.4rem}
@media (prefers-reduced-motion:reduce){.oc-card{opacity:1;transform:none}.oc-wrap.in .oc-card{animation:none}}
@media (max-width:700px){
 .oc-tree{min-width:0}
 .oc-ul{flex-direction:column;align-items:stretch}
 .oc-li{padding:12px 0 0 22px;align-items:stretch}
 .oc-tree>.oc-li{padding-left:0}
 .oc-li::before{display:none}
 .oc-li::after{left:8px;top:0;width:14px;height:44px;border-top:0;border-left:2px solid #9ED9D3;border-bottom:2px solid #9ED9D3;border-radius:0 0 0 10px}
 .oc-li:only-child::after{border-bottom:2px solid #9ED9D3;border-radius:0 0 0 10px}
 .oc-li>.oc-ul{padding-top:0}.oc-li>.oc-ul::before{display:none}
 .oc-card,.oc-l0,.oc-l2,.oc-l3{width:auto;display:flex;align-items:center;gap:.8rem;text-align:left;padding:.75rem .9rem}
 .oc-foto,.oc-l0 .oc-foto{width:54px;height:54px;margin:0;flex:none}
 .oc-more{max-height:none;opacity:1;margin-top:.3rem}
}
/* 1.5.1 fokus wajah untuk foto potret badan (mis. PNG transparan) */
.oc-foto{position:relative}
.oc-foto img,.entry-content .oc-foto img{position:absolute;left:50%;top:3%;width:150%!important;max-width:none!important;height:auto!important;transform:translateX(-50%);object-fit:contain!important}
/* 1.5.2 cegah terpotong: lebar pohon sesuai isi, dipusatkan aman */
.oc-tree{width:max-content;min-width:0}
.oc-ul{justify-content:safe center}
.oc-li>.oc-ul{justify-content:flex-start}
/* Mode baris bila tingkat kedua terlalu lebar */
.oc-wrap{overflow-x:hidden}
.oc-grid .oc-tree{margin:0}
.oc-grid .oc-tree>.oc-li>.oc-ul{flex-wrap:wrap;justify-content:center;row-gap:1.2rem;border-top:2px solid #9ED9D3;margin-top:28px;padding-top:0;border-radius:14px}
.oc-grid .oc-tree>.oc-li>.oc-ul::before{top:-30px}
.oc-grid .oc-tree>.oc-li>.oc-ul>.oc-li::after{width:0;left:50%;border-top:0;border-left:2px solid #9ED9D3;border-radius:0}
.oc-grid .oc-tree>.oc-li>.oc-ul>.oc-li::before{display:none}
.oc-grid .oc-tree>.oc-li>.oc-ul>.oc-li{padding-top:22px}
@media (max-width:700px){.oc-wrap{overflow-x:visible}}