@import url("/assets/v8-home-polish-v5.css?v=5.0");
/* UndanganKuuu Homepage Polish V4 — open sections + friendly typography + OLED aurora restore */

/* Fitur + Cara Kerja: open composition seperti Showcase, tanpa outer panel besar. */
.ukp-features,
.ukp-flow-section.ukp-how{
  position:relative;
  margin:0 0 96px!important;
  padding:54px 0 58px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}
.ukp-features::before,
.ukp-flow-section.ukp-how::before{display:none!important;content:none!important}

/* Friendly / non-formal type treatment. */
.ukp-features,
.ukp-flow-section.ukp-how,
.ukp-features button,
.ukp-flow-section.ukp-how button{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
.ukp-features-head,
.ukp-flow-section.ukp-how .ukp-flow-head{margin-bottom:42px!important}
.ukp-features-kicker,
.ukp-flow-section.ukp-how .ukp-flow-kicker{
  font-weight:760!important;
  letter-spacing:.15em!important;
}
.ukp-features-head h2,
.ukp-flow-section.ukp-how .ukp-flow-head h2{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Inter,system-ui,sans-serif!important;
  font-weight:760!important;
  letter-spacing:-.038em!important;
}
.ukp-flow-section.ukp-how .ukp-flow-head p{
  font-size:10.5px!important;
  line-height:1.7!important;
}
.ukp-feature h3,
.ukp-step h3{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Inter,system-ui,sans-serif!important;
  font-weight:690!important;
  letter-spacing:-.018em!important;
}
.ukp-feature p,
.ukp-step p{font-weight:450!important;line-height:1.62!important}

/* Feature items mengambang langsung di section, icon tanpa kotak panel. */
.ukp-features-grid{gap:38px 22px!important}
.ukp-feature{padding:8px 6px!important}
.ukp-feature-icon{
  width:48px!important;
  height:48px!important;
  margin-bottom:14px!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ukp-feature-icon svg{width:30px!important;height:30px!important;stroke-width:1.6!important}
.ukp-feature:hover .ukp-feature-icon{
  transform:translateY(-5px) scale(1.055)!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--ukp-accent) 22%,transparent));
}

/* Cara Kerja: flat editorial flow, bukan tiga kartu dalam panel. */
.ukp-steps-grid{
  gap:0!important;
  border-top:1px solid var(--ukp-line);
  border-bottom:1px solid var(--ukp-line);
}
.ukp-step{
  min-height:185px!important;
  padding:30px 34px 30px 28px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ukp-step+ .ukp-step{border-left:1px solid var(--ukp-line)!important}
.ukp-step:hover{transform:translateY(-3px)!important;border-color:var(--ukp-line)!important;box-shadow:none!important}
.ukp-step-num{
  width:auto!important;
  height:auto!important;
  display:inline-block!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ukp-accent)!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
}
.ukp-step h3{margin:20px 0 9px!important;font-size:17px!important}
.ukp-step-arrow{right:-11px!important;width:18px!important;height:18px!important;opacity:.32!important}

/* OLED: keep new content fully transparent so original HD/WebGL aurora remains the owner. */
html[data-v8-home-theme="oled"] .ukp-features,
html[data-v8-home-theme="oled"] .ukp-flow-section.ukp-how,
html[data-v8-home-theme="oled"] .ukp-step,
html[data-v8-home-theme="oled"] .ukp-feature{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-v8-home-theme="oled"] .oled-aurora-fusion{
  isolation:isolate!important;
  overflow:hidden!important;
  background:#000!important;
}
html[data-v8-home-theme="oled"] .oled-webgl-atmosphere,
html[data-v8-home-theme="oled"] #oledAuroraV5{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
}
html[data-v8-home-theme="oled"] #oledAuroraCanvas,
html[data-v8-home-theme="oled"] #oledAuroraCanvasV5{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
html[data-v8-home-theme="oled"] .oled-v5-fallback,
html[data-v8-home-theme="oled"] .oled-webgl-bloom,
html[data-v8-home-theme="oled"] .oled-v5-bloom{
  visibility:visible!important;
  opacity:1!important;
}
html[data-v8-home-theme="oled"] .oled-webgl-grain{opacity:.026!important}
html[data-v8-home-theme="oled"] .oled-v5-grain{opacity:.035!important}
html[data-v8-home-theme="oled"] .oled-webgl-vignette,
html[data-v8-home-theme="oled"] .oled-v5-vignette{visibility:visible!important}
/* old readability veil was dimming the HD curtain too much after polish sections were inserted */
html[data-v8-home-theme="oled"] .oled-aurora-fusion::after{
  background:linear-gradient(180deg,rgba(0,0,0,.015),rgba(0,0,0,.045))!important;
  opacity:.62!important;
}
html[data-v8-home-theme="oled"] .oled-showcase-zone,
html[data-v8-home-theme="oled"] .oled-showcase-zone .e4b,
html[data-v8-home-theme="oled"] .showcase-block,
html[data-v8-home-theme="oled"] .motion-block{
  background:transparent!important;
}
html[data-v8-home-theme="oled"] .oled-showcase-zone .e4b,
html[data-v8-home-theme="oled"] .oled-aurora-fusion .e3b{position:relative!important;z-index:6!important}

@media(max-width:1000px){
  .ukp-step+ .ukp-step{border-left:0!important;border-top:1px solid var(--ukp-line)!important}
  .ukp-steps-grid{border-top:1px solid var(--ukp-line);border-bottom:1px solid var(--ukp-line)!important}
}
@media(max-width:700px){
  .ukp-features,.ukp-flow-section.ukp-how{margin-bottom:62px!important;padding:38px 0 42px!important}
  .ukp-features-head,.ukp-flow-section.ukp-how .ukp-flow-head{margin-bottom:30px!important}
  .ukp-features-grid{gap:27px 8px!important}
  .ukp-feature-icon{width:43px!important;height:43px!important}
  .ukp-feature-icon svg{width:27px!important;height:27px!important}
  .ukp-step{padding:24px 8px!important;min-height:0!important}
  .ukp-step-arrow{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .ukp-feature:hover .ukp-feature-icon,.ukp-step:hover{transform:none!important;filter:none!important}
}