.sj{--sjs:var(--serif,"Fraunces","Playfair Display",Georgia,serif);--sjn:#0B2545;--sjt:#00A39A;--sjg:#FFC23C;font-family:inherit;color:#1d2b3f;margin:1.2rem 0 0}
.sj-r{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.sj-r.in{opacity:1;transform:none}
.sj-hero{border-top:3px solid var(--sjn);padding:1.4rem 0 1.2rem;display:grid;gap:.6rem;max-width:58rem}
.sj-kicker{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sjt);display:inline-flex;align-items:center;gap:.6rem}
.sj-kicker::before{content:"";width:28px;height:2px;background:var(--sjg)}
.sj-judul{font-family:var(--sjs);font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:var(--sjn);margin:0}
.sj-lead{font-size:1.12rem;line-height:1.65;color:#40506a;margin:0;max-width:46rem}
.sj-lead::first-letter{font-family:var(--sjs);float:left;font-size:3.3em;line-height:.85;padding:.08em .1em 0 0;color:var(--sjt);font-weight:700}
.sj-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-block:1px solid #dbe3ec;margin:1rem 0 1.6rem}
.sj-angka>div{padding:1.1rem 1rem;border-left:1px solid #dbe3ec;display:grid;gap:.15rem}
.sj-angka>div:first-child{border-left:0}
.sj-angka b{font-family:var(--sjs);font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--sjn);font-weight:700}
.sj-angka span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#6B7A90;font-weight:700}
.sj-sub{font-family:var(--sjs);font-size:1.45rem;font-weight:700;color:var(--sjn);margin:0 0 .4rem;display:flex;align-items:center;gap:.8rem}
.sj-sub::after{content:"";flex:1;height:1px;background:#dbe3ec}
.sj-bagan{background:linear-gradient(180deg,#f6fafc,#fff);border:1px solid #e3eaf1;border-radius:22px;padding:1.2rem 1rem .4rem;margin-bottom:1.8rem}
.sj .oc-card{cursor:pointer}
.sj-ikon{width:58%;height:58%;fill:none;stroke:#5c8fa0;stroke-width:1.6;stroke-linecap:round}
.oc-l0 .sj-ikon{stroke:#8a6514}
.sj-kutip{margin:2rem auto 2.2rem;max-width:48rem;text-align:center;position:relative;padding:1.6rem 1rem 0}
.sj-kutip::before{content:"\201C";font-family:var(--sjs);position:absolute;top:-1.4rem;left:50%;transform:translateX(-50%);font-size:5.5rem;line-height:1;color:var(--sjg)}
.sj-kutip blockquote{font-family:var(--sjs);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.35;color:var(--sjn);margin:0;border:0;padding:0;background:none}
.sj-kutip figcaption{margin-top:.8rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#6B7A90;font-weight:700}
.sj-profil-head{display:grid;gap:.7rem;margin-bottom:1.1rem}
.sj-filter{display:flex;flex-wrap:wrap;gap:.45rem}
.sj-filter button{border:1px solid #cfdbe6;background:#fff;color:#33445c;border-radius:999px;padding:.42rem .95rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s}
.sj-filter button:hover{border-color:var(--sjt);color:var(--sjt)}
.sj-filter button.on{background:var(--sjn);border-color:var(--sjn);color:#fff}
.sj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.3rem}
.sj-card{background:#fff;border:1px solid #e3eaf1;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(11,37,69,.06);transition:box-shadow .25s,transform .25s,opacity .7s}
.sj-card:hover{box-shadow:0 16px 40px rgba(11,37,69,.14)}
.sj-card[hidden]{display:none}
.sj-card.sj-sorot{box-shadow:0 0 0 3px var(--sjg),0 16px 40px rgba(11,37,69,.18)}
.sj-foto{position:relative;aspect-ratio:4/4.2;background:radial-gradient(circle at 50% 35%,#fff,#e5f3f2 55%,#c9e3e8);overflow:hidden}
.sj-foto img{width:100%!important;height:100%!important;object-fit:cover;object-position:center 15%;display:block;margin:0!important;border-radius:0!important;max-width:none}
.sj-ph{position:absolute;inset:0;display:grid;place-items:center}

.sj-txt{padding:1rem 1.1rem 1.2rem;display:grid;gap:.35rem;align-content:start}
.sj-unit{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sjt)}
.sj-jab{margin:0;font-size:.92rem;font-weight:700;line-height:1.35;color:#33445c}
.sj-nama{margin:0;font-family:var(--sjs);font-size:1.3rem;line-height:1.2;color:var(--sjn);font-weight:700}
.sj-meta{margin:.35rem 0 0;display:grid;gap:.2rem;font-size:.8rem;border-top:1px dashed #d6dee8;padding-top:.5rem}
.sj-meta div{display:flex;gap:.5rem}.sj-meta dt{color:#6B7A90;min-width:6.5rem;margin:0}.sj-meta dd{margin:0;font-weight:600;color:#2a3a52;font-variant-numeric:tabular-nums}
.sj-tugas{margin:.3rem 0 0;font-size:.86rem;line-height:1.55;color:#4A5B72}
.sj-utama{grid-column:1/-1;flex-direction:row;background:linear-gradient(135deg,#0B2545,#13466e);border:0;color:#fff}
.sj-utama .sj-foto{flex:0 0 min(320px,38%);aspect-ratio:auto;min-height:300px;background:radial-gradient(circle at 50% 35%,#FFF6DD,#F3DFA6 55%,#C99A2E)}
.sj-utama .sj-foto img{object-fit:contain;object-position:center bottom}
.sj-utama .sj-txt{padding:2rem 2.2rem;align-content:center}
.sj-utama .sj-unit{color:var(--sjg)}.sj-utama .sj-jab{color:#dbe9f5;font-size:1rem}
.sj-utama .sj-nama{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.sj-utama .sj-meta{border-color:rgba(255,255,255,.25)}.sj-utama .sj-meta dt{color:#a9c0d6}.sj-utama .sj-meta dd,.sj-utama .sj-tugas{color:#e6eef7}
@media (max-width:700px){
 .sj-angka{grid-template-columns:repeat(2,1fr)}.sj-angka>div:nth-child(odd){border-left:0}.sj-angka>div:nth-child(n+3){border-top:1px solid #dbe3ec}
 .sj-lead{font-size:1rem}
 .sj-bagan{padding:.9rem .6rem .2rem;border-radius:16px}
 .sj-grid{grid-template-columns:1fr 1fr;gap:.8rem}
 .sj-txt{padding:.75rem .8rem .9rem}.sj-nama{font-size:1.05rem}.sj-jab{font-size:.8rem}
 .sj-meta div{flex-direction:column;gap:0}.sj-meta dt{min-width:0}
 .sj-utama{flex-direction:column}.sj-utama .sj-foto{flex:none;min-height:260px}.sj-utama .sj-txt{padding:1.2rem}
}
@media (max-width:360px){.sj-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sj-r{opacity:1;transform:none;transition:none}}
@media print{
 .sj-r{opacity:1!important;transform:none!important}
 .sj-filter{display:none}.sj-card[hidden]{display:flex!important}
 .sj-bagan,.sj-card{box-shadow:none;break-inside:avoid}
 .sj-grid{grid-template-columns:repeat(3,1fr);gap:.6rem}
 .sj-utama{background:#fff!important;color:#000;border:1px solid #999}.sj-utama *{color:#000!important}
 .sj-kutip{break-inside:avoid}
}
.sj-tf .sj-foto{aspect-ratio:auto;height:120px}.sj-tf .sj-ikon{width:64px;height:64px}
.sj .oc-l1{width:176px}.sj .oc-l2,.sj .oc-l3{width:164px}
@media (max-width:700px){.sj-tf .sj-foto{height:90px}.sj .oc-l1,.sj .oc-l2,.sj .oc-l3{width:auto}}
@media (max-width:700px){.sj .oc-wrap{padding:.6rem 0 1rem}.sj .oc-tree{width:auto}.sj .oc-li,.sj .oc-card,.sj .oc-txt{min-width:0}.sj .oc-card{max-width:100%;box-sizing:border-box}.sj .oc-jab,.sj .oc-nama{overflow-wrap:anywhere}.sj-angka>div:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:700px){.sj .oc-tree,.sj .oc-ul{min-width:0!important;width:auto!important;max-width:100%}.sj .oc-wrap{overflow-x:hidden}.sj .oc-txt{flex:1 1 auto}.sj .oc-card{white-space:normal}}
/* 1.8.3 animasi */
.sj-hero .sj-kicker,.sj-hero .sj-lead{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.sj-hero .sj-lead{transition-delay:.55s}
.sj-w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;transition-delay:calc(.12s + var(--i)*.07s)}
.sj-hero.in .sj-kicker,.sj-hero.in .sj-lead,.sj-hero.in .sj-w{opacity:1;transform:none;filter:none}
.sj-angka b{font-variant-numeric:tabular-nums}
.sj .oc-li::before,.sj .oc-li::after{transform:scaleX(0);transition:transform .5s ease;transition-delay:calc(var(--lv,0)*.35s)}
.sj .oc-li::before{transform-origin:right}.sj .oc-li::after{transform-origin:left}
.sj .oc-li>.oc-ul::before{transform:scaleY(0);transform-origin:top;transition:transform .35s ease;transition-delay:calc(var(--lv,0)*.35s + .1s)}
.sj .oc-wrap.in .oc-li::before,.sj .oc-wrap.in .oc-li::after{transform:none}.sj .oc-wrap.in .oc-li>.oc-ul::before{transform:none}
.sj .oc-wrap.in .oc-card{animation-delay:calc(var(--d)*2.4 + .15s + var(--k,0)*.06s)}
.sj-card{transform-origin:50% 60%}
.sj-card.sj-r{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.sj-foto img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.sj-card.sj-r.in:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(11,37,69,.16)}.sj-card:hover .sj-foto img{transform:scale(1.06)}}
.sj-card.sj-keluar{opacity:0!important;transform:scale(.96)!important;transition-duration:.22s!important;transition-delay:0s!important}
.sj-card.sj-masuk{animation:sjMasuk .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--j,0)*.05s)}
@keyframes sjMasuk{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:700px){.sj-r,.sj-card.sj-r{transition-duration:.45s}.sj-w{filter:none}.sj .oc-li::before,.sj .oc-li::after{transform:scaleY(0);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.sj *,.sj *::before,.sj *::after{animation:none!important;transition:none!important}.sj-r,.sj-w,.sj-hero .sj-kicker,.sj-hero .sj-lead,.sj .oc-card{opacity:1!important;transform:none!important;filter:none!important}.sj .oc-li::before,.sj .oc-li::after,.sj .oc-li>.oc-ul::before{transform:none!important}}
@media print{.sj-w,.sj-hero .sj-kicker,.sj-hero .sj-lead,.sj .oc-card{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.sj .oc-li::before,.sj .oc-li::after,.sj .oc-li>.oc-ul::before{transform:none!important}}