/* Karyera page (client 2026-10-10): animated team network, role cards, stats, apply CTA */
.kr-top h1{font-size:clamp(44px,6.4vw,84px)!important;font-weight:500!important}
.kr-cta{display:flex;flex-wrap:wrap;gap:14px}
.kr-note{color:var(--mist);font-size:15px}.kr-note a{color:var(--silver-hi)}
.kr-net{aspect-ratio:1;max-width:540px}
.kr-net>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kr-net .orb{fill:none;stroke:rgba(227,231,235,.16);stroke-width:1;stroke-dasharray:2 9;transform-origin:240px 240px;animation:krSpin 70s linear infinite}
.kr-net .orb.b{stroke-dasharray:1 12;animation-duration:50s;animation-direction:reverse}
.kr-net .ln,.kr-net .pg{fill:none;stroke:url(#krg);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.kr-net .pg{stroke-width:1;opacity:.4}
.kr-net.on .ln{animation:krDraw 1.4s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:calc(.3s + var(--i)*.18s)}
.kr-net.on .pg{animation:krDraw 2.4s cubic-bezier(.6,.1,.2,1) 1.3s forwards}
.kr-net .dot{fill:#eef1f4}
.kr-net .halo{fill:none;stroke:#e3e7eb;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:krPulse 3.2s ease-out infinite;animation-delay:calc(var(--i)*.5s)}
.kr-net .pt{fill:#fff;opacity:0;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.kr-core{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid rgba(227,231,235,.55);background:radial-gradient(circle at 50% 40%,#23272c,#121417);box-shadow:0 0 0 0 rgba(227,231,235,.25);animation:krCore 4s ease-in-out infinite}
.kr-core svg{width:62%;height:62%;color:var(--silver-hi)}
.kr-net .tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,calc(-100% - 14px));opacity:0;white-space:nowrap}
.kr-net .tag span{display:block;padding:8px 14px;border:1px solid var(--stone);background:rgba(20,22,25,.88);color:var(--silver-hi);font-size:14px;font-weight:500;animation:krFloat 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.kr-net .tag.you span{border:1px dashed var(--silver);background:linear-gradient(110deg,#1c1f23 30%,#2e343a 50%,#1c1f23 70%);background-size:250% 100%;animation:krFloat 6s ease-in-out infinite,krSheen 3.5s linear infinite}
.kr-net.on .tag{animation:krTag .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1s + var(--i)*.18s)}
.kr-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stone);border:1px solid var(--stone)}
.kr-roles .td-card{color:inherit;text-decoration:none}
.kr-roles .td-card:last-child{grid-column:span 2}
.kr-roles .td-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);transform:translateX(-110%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.kr-roles .td-card:hover::after{transform:translateX(110%)}
.kr-roles .ico{width:46px;height:46px;fill:none;stroke:var(--silver-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.kr-roles .ico *{stroke-dasharray:1;stroke-dashoffset:1}
.kr-roles .td-card.on .ico *{animation:krDraw 1.6s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:calc(.2s + var(--d)*.12s)}
.kr-roles .td-card.rv{transition-delay:calc(var(--d)*.08s)}
.kr-go{display:inline-flex;gap:8px;align-items:center;margin-top:6px;font-size:14.5px;font-weight:600;color:var(--silver-hi)}
.kr-go .arr{transition:transform .4s}.kr-roles .td-card:hover .kr-go .arr{transform:translateX(6px)}
.kr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.kr-stats>div{display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--stone);position:relative}
.kr-stats>div::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--silver-hi),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.6,.1,.2,1) .3s}
.kr-stats>div.on::before{transform:scaleX(1)}
.kr-stats>div.rv{transition-delay:calc(var(--d)*.12s)}
.kr-stats b{font-size:clamp(44px,5.6vw,72px);font-weight:600;line-height:1;background:linear-gradient(110deg,#9aa1a9 0%,#f5f7f9 40%,#c9cfd5 60%,#9aa1a9 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:krSheen 7s linear infinite}
.kr-stats span{color:var(--mist)}
@media (min-width:1001px){#karyera-proses .td-steps{grid-template-columns:repeat(3,1fr)}}
.kr-mail{font-size:clamp(24px,3.6vw,44px);font-weight:600;line-height:1.15;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(110deg,#9aa1a9 0%,#f5f7f9 40%,#c9cfd5 60%,#9aa1a9 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:krSheen 6s linear infinite}
@keyframes krSpin{to{transform:rotate(360deg)}}
@keyframes krDraw{to{stroke-dashoffset:0}}
@keyframes krPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}
@keyframes krCore{0%,100%{box-shadow:0 0 0 0 rgba(227,231,235,.18)}50%{box-shadow:0 0 0 14px rgba(227,231,235,0)}}
@keyframes krFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes krSheen{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes krTag{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@media (max-width:1000px){.kr-roles{grid-template-columns:1fr 1fr}.kr-net{max-width:460px}}
@media (max-width:620px){.kr-roles,.kr-stats{grid-template-columns:1fr}.kr-roles .td-card:last-child{grid-column:auto}.kr-net .tag span{font-size:12px;padding:6px 10px}}