#bp-penulis-widget { box-sizing: border-box; border-radius: 15px; overflow: hidden; background: rgb(37, 58, 124) !important; color: rgb(255, 255, 255) !important; padding: 8px !important; }
#bp-penulis-widget ul, #bp-penulis-widget li { margin: 0px 0px 8px; padding: 8px; list-style: none !important;}
#bp-penulis-widget li::before, #bp-penulis-widget li::after { content: none !important; }
.bp-penulis-tab a { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 0px 0px 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(255, 255, 255, 0.2); margin: 0px 0px 10px 10px; display: inline-block; color: rgb(255, 255, 255) !important; }
.bp-penulis-tab a.active { color: rgb(255, 255, 255); }
.bp-penulis-tab a:hover { opacity: 0.7; }
.bp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: 0.001s;
    border-radius: 10px;

}
.bp-item:hover { background: rgba(104, 121, 177, 0.2); border-bottom-color: transparent; }
.bp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin: 3px;
}
.bp-item:hover .bp-avatar { border-color: rgb(255, 213, 79); }
.bp-text {
    flex: 1 1 0%;
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 0px;

}
.bp-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 0px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; color: rgb(255, 255, 255); cursor: pointer; }
.bp-title:hover { color: rgb(255, 213, 79); }
.bp-title a { color: rgb(255, 255, 255); text-decoration: none; margin: 0px 5px 5px 0px; font-family: var(--wp--preset--font-family--body) !important; }
.bp-title a:hover { color: rgb(255, 213, 79); }
.bp-meta { display: flex; flex-direction: column; }
.bp-name { font-weight: 600; font-size: 11px; color: rgb(255, 213, 79) !important;}
.bp-name:hover { opacity: 0.8; }
.bp-bio { font-size: 11px; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--wp--preset--color--theme-palette-8) !important; }
@keyframes fadeIn { 
  100% { opacity: 1; }
}
.skeleton .bp-avatar, .sk-line { animation: 1.5s infinite pulse; background: rgba(255, 255, 255, 0.1) !important; }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
@media (max-width: 480px) {
  #bp-penulis-widget { padding: 8px !important; }
  .bp-avatar { width: 45px; height: 45px; }
  .bp-title { font-size: 14px !important; }
}