/* PRKBI Hub — siklus: langit cerah, bulat, terpusat. */
.app-prkbi{--tone:#1E88B8;--tone-d:#156A92;--tone-bg:#E6F4FA;--leaf:#2BA58A;background:#F7FBFE}
.app-prkbi .btn-primary{background:linear-gradient(120deg,#1E88B8,#2BA58A);box-shadow:0 10px 24px -10px rgba(30,136,184,.7)}
.app-prkbi .btn-primary:hover{filter:brightness(.95)}
.app-prkbi .btn-line:hover{border-color:var(--tone);color:var(--tone)}

.pk-hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 0;background:linear-gradient(180deg,#DDF0FA 0%,#EEF8FC 55%,#F7FBFE 100%);text-align:center}
.pk-orbs i{position:absolute;border-radius:50%;filter:blur(2px)}
.pk-orbs i:nth-child(1){width:420px;height:420px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(43,165,138,.18),transparent 70%)}
.pk-orbs i:nth-child(2){width:520px;height:520px;right:-160px;top:-60px;background:radial-gradient(circle,rgba(30,136,184,.22),transparent 70%)}
.pk-orbs i:nth-child(3){width:260px;height:260px;left:45%;top:30%;background:radial-gradient(circle,rgba(255,255,255,.8),transparent 70%)}
.pk-hero-text{position:relative;max-width:880px}
.pk-hero .crumb{justify-content:center}
.pk-badge{display:inline-block;font-size:13px;font-weight:700;color:var(--tone-d);background:#fff;border:1px solid #BFE0EF;padding:7px 16px;border-radius:999px;margin-bottom:22px}
.pk-hero h1{font-size:clamp(34px,4.8vw,60px);line-height:1.08;margin:0 auto 18px;max-width:20ch;color:#0D3550}
.pk-lead{font-size:17.5px;color:var(--muted);max-width:60ch;margin:0 auto 26px}
.pk-hero .actions{justify-content:center}
.pk-hero-shot-wrap{position:relative;margin-top:clamp(36px,5vw,56px);max-width:1040px}
.pk-hero-shot{border-radius:22px 22px 0 0;overflow:hidden;background:#fff;border:1px solid #CBE4F0;border-bottom:0;box-shadow:0 -10px 60px -20px rgba(30,136,184,.45)}

.pk-sec{padding:clamp(64px,8vw,100px) 0}
.pk-sec-soft{background:linear-gradient(180deg,var(--tone-bg),#F2FAFD)}
.pk-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);margin-bottom:12px}
.pk-sec h2{font-size:clamp(28px,3.2vw,40px);color:#0D3550}
.pk-muted{color:var(--muted)}
.pk-head{max-width:760px;margin-bottom:36px}

.pk-cycle-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.pk-cycle{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin:0 auto;color:var(--tone)}
.pk-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pk-core{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#E2F2F9);border:1px solid #CBE4F0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;box-shadow:0 20px 40px -20px rgba(30,136,184,.5)}
.pk-core b{font-size:clamp(17px,2vw,22px);color:#0D3550}
.pk-core span{font-size:13px;color:var(--muted);line-height:1.35}
.pk-node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;border:1px solid #CBE4F0;font-size:14px;font-weight:700;color:#0D3550;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(13,53,80,.35)}
.pk-node em{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--tone),var(--leaf));color:#fff;font-size:12.5px}
.pk-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:4px}
.pk-steps li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #DCEDF5}
.pk-steps li>span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tone-bg);color:var(--tone-d);font-weight:800;font-size:14px;display:grid;place-items:center}
.pk-steps b{color:#0D3550}
.pk-steps p{margin:0;font-size:14.5px;color:var(--muted)}

.pk-roles{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pk-roles li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:22px;background:#fff;border:1px solid #CBE4F0}
.pk-av{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--tone),var(--leaf))}
.pk-roles h3{font-size:17px;margin-bottom:4px;color:#0D3550}
.pk-roles p{margin:0;font-size:14.5px;color:var(--muted)}
.pk-extras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pk-extras li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #CBE4F0;font-size:14px;font-weight:600;color:#0D3550}
.pk-extras svg{width:16px;height:16px;color:var(--leaf)}

.pk-car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.pk-car-head h2{margin:0}
.pk-car-btns{display:flex;gap:8px}
.pk-car-btns button{width:48px;height:48px;border-radius:50%;border:1px solid #CBE4F0;background:#fff;color:var(--tone-d);cursor:pointer;display:grid;place-items:center}
.pk-car-btns button:hover{background:var(--tone);color:#fff;border-color:var(--tone)}
.pk-car-btns svg{width:20px;height:20px}
.pk-track{list-style:none;margin:0;padding:4px 4px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:min(420px,82%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#BFE0EF transparent}
.pk-track li{scroll-snap-align:start;background:#fff;border:1px solid #CBE4F0;border-radius:22px;padding:10px 10px 18px}
.pk-cshot{border-radius:14px;overflow:hidden}
.pk-cshot .shot-link img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.pk-cmenu{display:inline-block;margin:14px 10px 4px;font-size:12px;font-weight:700;color:var(--leaf);text-transform:uppercase;letter-spacing:.08em}
.pk-track h3{font-size:18px;margin:0 10px 4px;color:#0D3550}
.pk-track p{font-size:14.5px;color:var(--muted);margin:0 10px}

@media (max-width:1000px){
  .pk-cycle-grid{grid-template-columns:1fr}
  .pk-roles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pk-roles{grid-template-columns:1fr}
  .pk-node{font-size:12px;padding:5px 10px 5px 5px}
  .pk-node em{width:22px;height:22px}
  .pk-core span{display:none}
}
@media (prefers-reduced-motion:reduce){.pk-ring{animation:none}}