/* Program Kami for Elementor */
.pkw-program{
  --pkw-accent:#D2463A; --pkw-ink:#16302B; --pkw-muted:#4F6660; --pkw-line:#D5DFDB; --pkw-panel:#FFFFFF;
  --pkw-info:300px; --pkw-gap:28px; --pkw-pad:32px; --pkw-icon:64px;
  display:grid; grid-template-columns:var(--pkw-info) minmax(0,1fr);
  color:var(--pkw-ink); line-height:1.55; box-sizing:border-box; font-family:inherit;
}
.pkw-program *,.pkw-program *::before,.pkw-program *::after{box-sizing:border-box}
.pkw-program [hidden]{display:none!important}
.pkw-program.pkw-flip{grid-template-columns:minmax(0,1fr) var(--pkw-info)}

/* Garis (diatur dari tab Style > Layout) */
.pkw-border-top-yes .pkw-program{border-top:1px solid var(--pkw-line)}
.pkw-border-bottom-yes .pkw-program{border-bottom:1px solid var(--pkw-line)}
.pkw-divider-yes .pkw-info{border-right:1px solid var(--pkw-line)}
.pkw-divider-yes .pkw-flip .pkw-info{border-right:0;border-left:1px solid var(--pkw-line)}

/* Kolom teks */
.pkw-program .pkw-info{padding:var(--pkw-pad) var(--pkw-gap) var(--pkw-pad) 0;display:flex;flex-direction:column;gap:14px;min-width:0}
.pkw-program.pkw-flip .pkw-info{order:2;padding:var(--pkw-pad) 0 var(--pkw-pad) var(--pkw-gap)}
.pkw-program .pkw-icon{width:var(--pkw-icon);height:var(--pkw-icon);border-radius:50%;display:grid;place-items:center;
  background-color:var(--pkw-accent);color:#fff;font-size:calc(var(--pkw-icon) * .45);line-height:1;flex:none}
.pkw-program .pkw-icon i{line-height:1}
.pkw-program .pkw-icon svg{width:50%;height:50%;fill:currentColor}
.pkw-program .pkw-name{margin:0;font-size:1.6rem;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:var(--pkw-accent)}
.pkw-program .pkw-desc{margin:0;color:var(--pkw-muted);max-width:40ch}
.pkw-program .pkw-points{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95rem;color:var(--pkw-muted)}
.pkw-program .pkw-points li{margin:0;padding-left:18px;position:relative}
.pkw-program .pkw-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--pkw-accent)}

/* Carousel */
.pkw-program .pkw-carousel{padding:var(--pkw-pad) 0 calc(var(--pkw-pad) * .75) var(--pkw-gap);display:flex;flex-direction:column;gap:14px;min-width:0}
.pkw-program.pkw-flip .pkw-carousel{padding:var(--pkw-pad) var(--pkw-gap) calc(var(--pkw-pad) * .75) 0}
.pkw-program .pkw-viewport{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/9;background:var(--pkw-panel);touch-action:pan-y}
.pkw-program .pkw-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pkw-program .pkw-slide{flex:0 0 100%;height:100%;position:relative;margin:0;padding:0;overflow:hidden}
.pkw-program .pkw-slide img.pkw-img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none}
.pkw-program .pkw-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb,var(--pkw-accent) 35%,transparent) 0 18%, transparent 19%),
    radial-gradient(circle at 78% 70%, color-mix(in srgb,var(--pkw-accent) 22%,transparent) 0 24%, transparent 25%),
    color-mix(in srgb,var(--pkw-accent) 14%,var(--pkw-panel))}
.pkw-program .pkw-ph svg{width:22%;max-width:120px;opacity:.55;color:var(--pkw-accent)}
.pkw-program .pkw-slide figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 18px 14px;color:#fff;font-weight:500;font-size:.95rem;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}

/* Tombol (reset dari style tema) */
.pkw-program button.pkw-nav,.pkw-program button.pkw-dot{appearance:none;-webkit-appearance:none;margin:0;min-height:0;min-width:0;line-height:1;
  text-transform:none;letter-spacing:0;font-family:inherit;text-decoration:none}
.pkw-program button.pkw-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:#16302B;display:grid;place-items:center;font-size:1.4rem;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pkw-program button.pkw-nav:hover,.pkw-program button.pkw-nav:focus{background:#fff;color:#16302B}
.pkw-program button.pkw-prev{left:12px}
.pkw-program button.pkw-next{right:12px}
.pkw-program button.pkw-nav:focus-visible,.pkw-program button.pkw-dot:focus-visible{outline:3px solid var(--pkw-accent);outline-offset:2px}
.pkw-program .pkw-dots{display:flex;justify-content:center;gap:10px}
.pkw-program button.pkw-dot{width:12px;height:12px;padding:0;border-radius:999px;border:2px solid var(--pkw-accent);background:transparent;cursor:pointer;box-shadow:none;transition:width .3s,background-color .3s}
.pkw-program button.pkw-dot:hover{background:transparent}
.pkw-program button.pkw-dot[aria-current="true"]{background:var(--pkw-accent);width:28px}

/* Tablet (breakpoint default Elementor) */
@media (max-width:1024px){
  .pkw-program{--pkw-info:40%; --pkw-gap:18px; --pkw-pad:24px}
}

/* HP */
@media (max-width:767px){
  .pkw-program{--pkw-info:45%; --pkw-gap:12px; --pkw-pad:18px; --pkw-icon:40px}
  .pkw-program .pkw-info{gap:8px}
  .pkw-program .pkw-carousel{gap:10px}
  .pkw-program .pkw-name{font-size:1.15rem}
  .pkw-program .pkw-desc{font-size:.85rem;line-height:1.45}
  .pkw-program .pkw-points{font-size:.8rem;gap:4px}
  .pkw-program .pkw-points li{padding-left:13px}
  .pkw-program .pkw-points li::before{width:6px;height:6px}
  .pkw-program .pkw-slide figcaption{font-size:.78rem;padding:20px 10px 10px}
  .pkw-program button.pkw-nav{width:28px;height:28px;font-size:1.1rem}
  .pkw-program button.pkw-prev{left:6px}
  .pkw-program button.pkw-next{right:6px}
  .pkw-program button.pkw-dot{width:9px;height:9px}
  .pkw-program button.pkw-dot[aria-current="true"]{width:20px}

  /* Mode tumpuk (switch "Tumpuk di HP") */
  .pkw-stack-yes .pkw-program,.pkw-stack-yes .pkw-program.pkw-flip{grid-template-columns:minmax(0,1fr)}
  .pkw-stack-yes .pkw-program .pkw-info,.pkw-stack-yes .pkw-program.pkw-flip .pkw-info{order:0;border:0;padding:var(--pkw-pad) 0 0}
  .pkw-stack-yes .pkw-program .pkw-carousel,.pkw-stack-yes .pkw-program.pkw-flip .pkw-carousel{padding:14px 0 var(--pkw-pad)}
}

@media (prefers-reduced-motion:reduce){
  .pkw-program .pkw-track,.pkw-program button.pkw-dot{transition:none}
}
