/* =========================================
   2. RELATED CAROUSEL (Sleek Cards & Nav)
   ========================================= */
.entry-content .bp-related-wrap, #page .bp-related-wrap { margin-top: 60px; padding: 40px 0; border-top: 1px solid #e2e8f0; }
.entry-content .bp-related-head, #page .bp-related-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.entry-content .bp-related-head h3, #page .bp-related-head h3 { margin: 0 !important; font-weight: 800; font-size: 24px; color: #0f172a; letter-spacing: -0.5px; }
.entry-content .bp-related-head a, #page .bp-related-head a { font-size: 14px; font-weight: 700; color: #253A7C; text-decoration: none; padding: 6px 16px; border-radius: 20px; background: #f1f5f9; transition: all 0.3s ease; }
.entry-content .bp-related-head a:hover, #page .bp-related-head a:hover { background: #253A7C; color: #ffffff; }

.bp-rel-container { padding-bottom: 10px !important; position: relative; }
.entry-content .bp-rel-card, #page .bp-rel-card { text-decoration: none; color: inherit; display: block; border-radius: 16px; border: 1px solid #f8fafc; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); height: 100%; }
.entry-content .bp-rel-thumb, #page .bp-rel-thumb { border-radius: 16px 16px 0 0; overflow: hidden; background: #e2e8f0; position: relative; }
.entry-content .bp-rel-thumb img, #page .bp-rel-thumb img { width: 100% !important; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; margin: 0; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.entry-content .bp-rel-card:hover .bp-rel-thumb img, #page .bp-rel-card:hover .bp-rel-thumb img { transform: scale(1.08); }

.entry-content .bp-rel-meta, #page .bp-rel-meta { padding: 20px; transition: all 0.3s ease; }
.entry-content .bp-rel-meta h4.bp-rel-title, #page .bp-rel-meta h4.bp-rel-title { font-size: 14px; line-height: 1.5; font-weight: 700; color: #1e293b !important; margin: 0 0 8px 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; }
.entry-content .bp-rel-card:hover .bp-rel-meta, #page .bp-rel-card:hover .bp-rel-meta { background: #253A7C !important; border-radius: 0 0 16px 16px; }
.entry-content .bp-rel-card:hover .bp-rel-meta h4.bp-rel-title, #page .bp-rel-card:hover .bp-rel-meta h4.bp-rel-title { color: #ffffff !important; }
.entry-content .bp-rel-meta small, #page .bp-rel-meta small { color: #64748b; font-size: 13px; font-weight: 500; transition: color 0.3s ease; }
.entry-content .bp-rel-card:hover .bp-rel-meta small, #page .bp-rel-card:hover .bp-rel-meta small { color: #ffffff; }

#bp-related-slider .swiper-button-prev.related-prev, #bp-related-slider .swiper-button-next.related-next { display: flex !important; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; color: #253A7C; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: all 0.2s ease; top: 35%; margin-top: 0; }
#bp-related-slider .swiper-button-prev.related-prev:after, #bp-related-slider .swiper-button-next.related-next:after { font-size: 14px; font-weight: bold; }
#bp-related-slider .swiper-button-prev.related-prev:hover, #bp-related-slider .swiper-button-next.related-next:hover { background: #253A7C; color: #fff; transform: scale(1.1); }

/* Responsif Mobile RELATED CAROUSEL */
@media (max-width: 768px) {
    .entry-content .bp-related-head h3, #page .bp-related-head h3 { font-size: 20px; }
    .entry-content .bp-related-head a, #page .bp-related-head a { padding: 5px 12px; font-size: 12px; }
    #bp-related-slider .swiper-button-prev.related-prev, #bp-related-slider .swiper-button-next.related-next { width: 30px; height: 30px; top: 35%; }
    #bp-related-slider .swiper-button-prev.related-prev:after, #bp-related-slider .swiper-button-next.related-next:after { font-size: 12px; }
}