:root{
/* Palet mengikuti badge emas terlampir */
–gold-1:#fff3b0;
–gold-2:#ffd45a;
–gold-3:#f4b000;
–amber:#ff9d0a;
–orange:#e07a00;
–navy:#0c2340;
–ink:#1f2937;
–muted:#6b7280;
–bg:#f7f7f9;
–radius:18px;
–shadow: 0 12px 30px rgba(12,35,64,.08);
}

*{box-sizing:border-box}
body{
margin:0;
font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
color:var(–ink);
background:var(–bg);
line-height:1.65;
}

.bc-wrap{
max-width: 1050px;
margin: clamp(16px,4vw,48px) auto;
padding: clamp(14px,2vw,24px);
}

.bc-card{
background:#fff;
border-radius: var(–radius);
box-shadow: var(–shadow);
overflow:hidden;
border:1px solid rgba(12,35,64,.06);
}

/* Header bergaya medali emas */
.bc-head{
display:flex;
gap: 18px;
align-items:center;
padding: clamp(18px,3vw,28px);
background:
radial-gradient(120% 120% at 20% 0%, var(–gold-2) 0%, var(–gold-3) 55%, var(–orange) 100%);
color:#111;
position:relative;
isolation:isolate;
}
.bc-head::after{
/* cincin melingkar tipis */
content:””;
position:absolute; inset:0;
background:
radial-gradient(circle at 12% 28%, rgba(255,255,255,.44) 0 20%, transparent 22% 100%),
radial-gradient(circle at 85% 70%, rgba(255,255,255,.22) 0 25%, transparent 27% 100%);
mix-blend-mode: soft-light;
pointer-events:none;
}

.badge{
width:min(120px,22vw);
aspect-ratio:1/1;
flex:0 0 auto;
display:grid;
place-items:center;
border-radius:999px;
background:
conic-gradient(from .35turn, var(–gold-3), var(–gold-2), var(–gold-3));
border:6px solid var(–navy);
box-shadow: inset 0 0 0 8px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.15);
position:relative;
}
.badge .ring{
position:absolute; inset:10%;
border-radius:50%;
box-shadow:
inset 0 0 0 3px rgba(12,35,64,.35),
inset 0 0 0 14px rgba(255,255,255,.35);
}
.badge svg{
width:58%; height:58%;
fill: var(–navy);
filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

.bc-title{
margin:0;
font-size: clamp(22px,3.2vw,34px);
line-height:1.2;
font-weight:800;
color: var(–navy);
letter-spacing:.2px;
text-transform: none;
}
.bc-sub{
margin:.35rem 0 0;
color:#0c2340cc;
font-weight:600;
}

/* Isi */
.bc-body{
padding: clamp(18px,3vw,32px);
display:grid;
gap: 18px;
}

.bc-item{
display:grid;
grid-template-columns: 44px 1fr;
gap:14px;
align-items:flex-start;
padding: 14px 14px;
border:1px solid rgba(12,35,64,.08);
border-radius:12px;
background: linear-gradient(180deg,#fff, #fffefa);
}

.bc-icon{
width:44px; height:44px;
border-radius:12px;
display:grid; place-items:center;
background: radial-gradient(120% 100% at 30% 10%, var(–gold-1), var(–gold-2) 60%, var(–gold-3) 100%);
border:2px solid var(–navy);
box-shadow: inset 0 0 0 4px rgba(255,255,255,.5);
}
.bc-icon svg{ width:24px; height:24px; fill:var(–navy); }

.bc-item h4{
margin:.1rem 0 .25rem;
font-size: 1.02rem;
color: var(–navy);
}
.bc-item p{ margin:0; color:var(–ink); }

/* Bullet list di dalam paragraf */
.bc-item ul{
margin:.25rem 0 0 1rem;
padding:0;
}
.bc-item li{ margin:.25rem 0; }

/* Footer kecil */
.bc-foot{
padding: 12px 18px 22px;
display:flex; gap:10px; flex-wrap:wrap;
}
.chip{
font-size:.86rem; font-weight:600;
border-radius:999px;
padding:8px 12px;
border:1px solid var(–navy);
background:linear-gradient(180deg,var(–gold-1),var(–gold-2));
color:var(–navy);
}

/* Responsif */
@media (max-width:720px){
.bc-head{ align-items:flex-start }
}