/*
 * File: benefits-cards-20261101.css
 * Updated: 2026-11-01
 * Summary: Approved illustrated assistance panel and SKFINITY / OBS / coaching cards.
 * [CHANGELOG | 2026-11-01]: Scope decorative, clipped imagery and responsive copy to #kelebihan.
 */
#kelebihan .benefits-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;align-items:center;margin-bottom:32px}
#kelebihan .benefits-intro-copy{min-width:0}
#kelebihan .benefits-intro-copy .section-title{margin-bottom:26px}
#kelebihan .benefits-intro-copy .lead{max-width:760px}
#kelebihan .benefits-intro-note{color:var(--muted);font-size:16px;line-height:1.7;margin:20px 0 0}
#kelebihan .agency-support,#kelebihan .benefit-illustrated{position:relative;isolation:isolate;overflow:hidden;background:#08121e;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 54px rgba(0,0,0,.2)}
#kelebihan .agency-support{min-width:0;border:1px solid rgba(65,201,255,.65);border-radius:24px;padding:28px;box-shadow:inset 0 2px 0 var(--cyan),0 22px 54px rgba(0,0,0,.2)}
#kelebihan .benefit-illustrated{display:flex;padding:28px;min-width:0;min-height:360px;border-color:rgba(65,201,255,.48)}
#kelebihan .benefit-art{position:absolute;z-index:0;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
#kelebihan .agency-support:after,#kelebihan .benefit-illustrated:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,12,22,.96),rgba(5,12,22,.79) 44%,rgba(5,12,22,.6) 70%,rgba(5,12,22,.14)),linear-gradient(180deg,rgba(5,12,22,.18),rgba(5,12,22,.14) 60%,rgba(5,12,22,.38))}
#kelebihan .agency-support:after{background:linear-gradient(90deg,rgba(5,16,27,.96),rgba(5,16,27,.83) 48%,rgba(5,16,27,.65) 76%,rgba(5,16,27,.2)),linear-gradient(180deg,rgba(5,12,22,.06),rgba(5,12,22,.3))}
#kelebihan .agency-support-content,#kelebihan .benefit-content{position:relative;z-index:2;min-width:0;width:100%;text-shadow:0 2px 16px rgba(0,0,0,.8)}
#kelebihan .benefit-content{display:flex;flex-direction:column;align-items:flex-start}
#kelebihan .support-eyebrow{margin:0 0 24px;color:var(--ice);font-size:11px;font-weight:900;letter-spacing:.1em}
#kelebihan .support-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
#kelebihan .support-item+.support-item{border-top:1px solid rgba(255,255,255,.2);margin-top:24px;padding-top:24px}
#kelebihan .support-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(65,201,255,.45);border-radius:14px;background:rgba(65,201,255,.12);color:var(--ice)}
#kelebihan .support-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kelebihan .support-item h3{margin:0 0 12px;color:var(--ice);font-size:24px;line-height:1.2;letter-spacing:-.025em}
#kelebihan .support-item p{margin:0;color:#cbd3df;font-size:14px;line-height:1.75}
#kelebihan .support-item strong{color:var(--white)}
#kelebihan .support-item-tiktok .support-icon{color:#ffba85;background:rgba(255,122,24,.12);border-color:rgba(255,122,24,.45)}
#kelebihan .support-item-tiktok h3{color:#ffba85}
#kelebihan .support-schedule{display:inline-block;margin-top:14px;border-radius:7px;padding:6px 9px;color:var(--ice);background:rgba(65,201,255,.14);font-size:11px;font-weight:900}
#kelebihan .benefit-illustrated .num{font-size:11px;letter-spacing:.02em}
#kelebihan .benefit-illustrated h3{margin:24px 0 16px;color:var(--white);font-size:23px;line-height:1.25;letter-spacing:-.025em;overflow-wrap:break-word}
#kelebihan .benefit-illustrated p{max-width:92%;margin:0 0 22px;color:#d0d7e2;font-size:15px;line-height:1.7}
#kelebihan .benefit-illustrated strong{color:var(--white)}
#kelebihan .benefit-badge{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:9px 12px;border:1px solid rgba(65,201,255,.55);border-radius:12px;color:var(--ice);background:rgba(5,28,40,.86);font-size:11px;font-weight:900}
#kelebihan .benefit-badge svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){#kelebihan .benefits-intro{gap:24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}#kelebihan .agency-support,#kelebihan .benefit-illustrated{padding:24px}#kelebihan .support-item{gap:12px}#kelebihan .support-item h3{font-size:21px}#kelebihan .benefit-illustrated h3{font-size:21px}#kelebihan .benefit-illustrated p{max-width:100%}}
@media(max-width:900px){#kelebihan .benefits-intro{grid-template-columns:minmax(0,1fr);gap:28px}#kelebihan .grid3{grid-template-columns:minmax(0,1fr)}#kelebihan .benefit-illustrated{min-height:300px}#kelebihan .benefit-illustrated p{max-width:80%}}
@media(max-width:560px){#kelebihan .agency-support,#kelebihan .benefit-illustrated{padding:24px 22px}#kelebihan .benefits-intro-note{font-size:14px}#kelebihan .support-item{grid-template-columns:36px minmax(0,1fr);gap:12px}#kelebihan .support-icon{width:36px;height:36px;border-radius:11px}#kelebihan .support-icon svg{width:21px;height:21px}#kelebihan .support-item h3{font-size:21px}#kelebihan .support-item p{font-size:13px}#kelebihan .benefit-illustrated{min-height:340px}#kelebihan .benefit-illustrated h3{font-size:23px}#kelebihan .benefit-illustrated p{max-width:100%;font-size:14px}#kelebihan .benefit-illustrated:after{background:linear-gradient(90deg,rgba(5,12,22,.96),rgba(5,12,22,.83) 52%,rgba(5,12,22,.63)),linear-gradient(180deg,transparent,rgba(5,12,22,.22))}}

/* [CHANGELOG | 2026-11-01]: Preserve the current production overview and support copy; share only the approved imagery treatment. */
#kelebihan .agency-support .agency-priority-item{position:relative}
#kelebihan .agency-support .agency-priority-label{color:var(--ice)}
#kelebihan .benefit-illustrated .benefit-content{height:100%}
#kelebihan .benefit-illustrated{align-items:stretch}