.udn-w {
--udn-w-accent: #0b6b57;
display: grid;
gap: 12px;
margin: 0 0 1.5em;
font-size: 14px;
line-height: 1.45;
}
.udn-w *, .udn-w *::before, .udn-w *::after { box-sizing: border-box; }
.udn-w a { text-decoration: none; color: inherit; }
.udn-w-heading { margin: 0; font-weight: 700; font-size: 15px; }
.udn-w-item {
display: flex;
gap: 12px;
padding: 10px;
background: #fff;
border: 1px solid #e6ebe9;
border-radius: 12px;
transition: box-shadow .15s, transform .15s;
}
.udn-w-item:hover { box-shadow: 0 6px 18px rgba(16, 40, 32, .08); transform: translateY(-1px); }
.udn-w-img { flex: 0 0 auto; display: block; background: #e9efec center / cover no-repeat; border-radius: 9px; }
.udn-w-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.udn-w-title { font-weight: 600; color: #13201c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.udn-w-bar { display: block; height: 6px; background: #e8eeeb; border-radius: 99px; overflow: hidden; }
.udn-w-bar span { display: block; height: 100%; background: var(--udn-w-accent); border-radius: inherit; }
.udn-w-meta { font-size: 12px; color: #5c6b66; }
.udn-w-meta b { color: var(--udn-w-accent); } .udn-w-kartu .udn-w-item { flex-direction: column; padding: 0; overflow: hidden; }
.udn-w-kartu .udn-w-img { width: 100%; aspect-ratio: 2 / 1; border-radius: 0; }
.udn-w-kartu .udn-w-body { padding: 10px 12px 12px; } .udn-w-daftar .udn-w-img { width: 84px; height: 64px; } .udn-w-ajakan { margin: 2em 0; }
.udn-w-cta {
display: flex;
gap: 16px;
padding: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--udn-w-accent) 9%, #fff), #fff);
border: 1px solid color-mix(in srgb, var(--udn-w-accent) 22%, #fff);
border-radius: 16px;
}
.udn-w-cta .udn-w-img { width: 38%; max-width: 220px; min-height: 130px; border-radius: 12px; }
.udn-w-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--udn-w-accent); }
.udn-w-cta .udn-w-title { font-size: 16px; }
.udn-w-btn {
align-self: flex-start;
margin-top: 4px;
padding: 9px 18px;
border-radius: 10px;
background: var(--udn-w-accent);
color: #fff !important;
font-weight: 600;
font-size: 14px;
}
.udn-w-btn:hover { filter: brightness(1.08); }
@media (max-width: 520px) {
.udn-w-cta { flex-direction: column; }
.udn-w-cta .udn-w-img { width: 100%; max-width: none; aspect-ratio: 2 / 1; min-height: 0; }
}