/*
==========================================
Biolink Pro - Member Blog
==========================================
*/

.blp-blog-wrap{
    max-width:1180px;
    margin:40px auto;
    padding:20px;
}

/* ==========================================
Hero
========================================== */

.blp-blog-hero{

    background:
    linear-gradient(
        135deg,
        #1e3a8a,
        #2563eb
    );

    color:#fff;

    border-radius:24px;

    padding:60px 45px;

    margin-bottom:40px;

    position:relative;

    overflow:hidden;
}

.blp-blog-hero::after{

    content:"";

    position:absolute;

    right:-80px;
    top:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.blp-blog-hero h1{

    color:#fff;

    margin:0 0 15px;

    font-size:42px;

    font-weight:700;
}

.blp-blog-hero p{

    margin:0;

    font-size:18px;

    opacity:.95;

    max-width:700px;
}

.blp-blog-badge{

    display:inline-block;

    background:rgba(255,255,255,.18);

    padding:8px 16px;

    border-radius:30px;

    margin-bottom:18px;

    font-size:14px;

    font-weight:600;
}

.blp-blog-post{

    padding:25px 35px 35px;

}

/* ==========================================
Grid
========================================== */

.blp-blog-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

    align-items:stretch;

}

/* ==========================================
Card
========================================== */

.blp-blog-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #edf2f7;

    display:flex;

    flex-direction:column;

    box-shadow:

        0 8px 30px rgba(15,23,42,.05);

    transition:.3s;

}

.blp-blog-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 35px rgba(0,0,0,.08);

}

.blp-blog-card{

    display:flex;

    flex-direction:column;

    height:100%;

}

.blp-blog-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.blp-blog-button{

    margin-top:auto;

}

.blp-blog-thumb{

    display:block;

    overflow:hidden;

}

.blp-blog-thumb img{

    display:block;

    width:100%;

    height:auto;

    max-height:240px;

    object-fit:cover;

}

.blp-blog-thumb-large{

    margin:-20px -20px 25px;

}

.blp-blog-thumb-large img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.blp-blog-card:hover img{

    transform:scale(1.05);

}

.blp-blog-content{

    padding:22px;
}

.blp-blog-title{

    font-size:38px;

    line-height:1.25;

    margin:20px 0;

}

.blp-blog-title a{

    text-decoration:none;

    color:#0f172a;
}

.blp-blog-title a:hover{

    color:#2563eb;
}

.blp-blog-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.blp-blog-meta span{

    background:#f4f7fb;

    padding:8px 14px;

    border-radius:50px;

    font-size:13px;

}

.blp-blog-excerpt{

    color:#475569;

    line-height:1.8;

    font-size:15px;

    margin-bottom:20px;
}

.blp-blog-button{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:11px 22px;

    border-radius:10px;

    text-decoration:none;

    transition:.25s;
}

.blp-blog-button:hover{

    background:#1d4ed8;

    color:#fff;
}

.blp-blog-card{

    display:flex;

    flex-direction:column;

}

.blp-blog-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.blp-blog-button{

    margin-top:auto;

}

.blp-blog-card-title{

    font-size:22px;

    line-height:1.45;

    margin:14px 0;

    min-height:64px;

}

.blp-blog-excerpt{

    color:#475569;

    line-height:1.8;

    margin-bottom:20px;

    flex:1;

}



/* ==========================================
Single Modern
========================================== */

.blp-blog-hero-single{

    padding:40px 35px;

    margin-bottom:25px;

}

.blp-blog-hero-single h1{

    font-size:34px;

    margin:12px 0;

    line-height:1.3;

}

.blp-blog-hero-single p{

    font-size:15px;

    opacity:.9;

}

.blp-single-wrap{

    max-width:900px;

    margin:0 auto 45px;

}

.blp-single-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:

        0 10px 40px rgba(15,23,42,.06);

}

.blp-blog-breadcrumb{

    padding:20px 30px;

    font-size:14px;

    color:#64748b;

    border-bottom:1px solid #edf2f7;

}

.blp-blog-breadcrumb a{

    color:#2563eb;

    text-decoration:none;

}

.blp-blog-thumb-large{

    margin:0;

}

.blp-blog-thumb-large img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.blp-blog-post{

    padding:35px;

}

.blp-blog-title{

    font-size:38px;

    line-height:1.3;

    margin:0 0 20px;

    color:#111827;

}

.blp-blog-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.blp-blog-meta span{

    background:#f4f7fb;

    border-radius:40px;

    padding:8px 15px;

    font-size:13px;

    color:#475569;

}

.blp-blog-content-single{

    font-size:18px;

    line-height:1.95;

    color:#334155;

}

.blp-blog-content-single p{

    margin-bottom:24px;

}

.blp-blog-content-single h2{

    margin-top:45px;

    margin-bottom:20px;

    font-size:30px;

}

.blp-blog-content-single h3{

    margin-top:35px;

    margin-bottom:18px;

    font-size:24px;

}

.blp-blog-content-single img{

    display:block;

    width:100%;

    height:auto;

    border-radius:18px;

    margin:25px auto;

}

.blp-blog-content-single ul,

.blp-blog-content-single ol{

    margin:20px 0 20px 30px;

}

.blp-blog-content-single blockquote{

    margin:25px 0;

    padding:18px 24px;

    border-left:5px solid #2563eb;

    background:#f8fafc;

    border-radius:12px;

}

.blp-share{

    margin-top:40px;

    padding:25px;

    background:#f8fafc;

    border-radius:18px;

}

.blp-share-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;

}

.blp-share-links{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.blp-share-links a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:44px;

    padding:0 20px;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    transition:.25s;

}

.blp-share-links a:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

.blp-post-nav{

    margin-top:35px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.blp-post-nav-card{

    display:block;

    padding:18px;

    border-radius:18px;

    text-decoration:none;

    background:#fff;

    border:1px solid #e5e7eb;

    transition:.25s;

}

.blp-post-nav-card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 10px 25px rgba(0,0,0,.08);

}

.blp-post-nav-card small{

    display:block;

    color:#64748b;

    margin-bottom:8px;

}

.blp-post-nav-card strong{

    color:#111827;

    line-height:1.5;

}

.blp-post-next{

    text-align:right;

}

.blp-related{

    margin:55px auto;

    max-width:1180px;

}

.blp-section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.blp-section-title h2{

    margin:0;

    font-size:30px;

}

.blp-section-title a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

.blp-blog-card-title{

    margin:15px 0;

    font-size:22px;

    line-height:1.5;

}

.blp-blog-card-title a{

    color:#111827;

    text-decoration:none;

}

.blp-blog-card-title a:hover{

    color:#2563eb;

}

/* ==========================================
Pagination
========================================== */

.blp-pagination{

    margin:45px 0;

    text-align:center;
}

.blp-pagination .page-numbers{

    display:inline-block;

    margin:4px;

    padding:10px 15px;

    border-radius:10px;

    background:#f3f4f6;

    color:#111827;

    text-decoration:none;
}

.blp-pagination .current{

    background:#2563eb;

    color:#fff;
}

/* ==========================================
Author Box
========================================== */

.blp-author{

    margin-top:50px;

    padding:25px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
}

.blp-author h3{

    margin-top:0;
}

.blp-author a{

    color:#2563eb;

    text-decoration:none;
}

/* ==========================================
Breadcrumb
========================================== */

.blp-breadcrumb{

    margin-bottom:25px;

    font-size:14px;

    color:#64748b;
}

.blp-breadcrumb a{

    color:#2563eb;

    text-decoration:none;
}

.blp-share{

    margin-top:40px;

    padding:25px;

    border-radius:18px;

    background:#f8fafc;

}

.blp-share-links{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:15px;

}

.blp-share-links a{

    padding:10px 18px;

    background:#2563eb;

    color:#fff;

    border-radius:10px;

    text-decoration:none;

}

/* ==========================================
Tablet
========================================== */

@media (max-width:1024px){

    .blp-blog-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:24px;

    }

}

/* ==========================================
Mobile
========================================== */

@media (max-width:768px){

    .blp-blog-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

}
/* ==========================================
Responsive
========================================== */

@media(max-width:768px){

    .blp-blog-wrap{

        padding:15px;

    }

    .blp-blog-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .blp-blog-hero{

        padding:35px 25px;

    }

    .blp-blog-hero h1{

        font-size:30px;

    }

    .blp-single-title{

        font-size:30px;

    }

    .blp-single-content{

        font-size:17px;

    }
    
    .blp-single-wrap{

    padding:0 12px;

}

.blp-blog-post{

    padding:22px;

}

.blp-blog-title{

    font-size:28px;

}

.blp-blog-content-single{

    font-size:17px;

}

.blp-post-nav{

    grid-template-columns:1fr;

}

.blp-section-title{

    display:block;

}

.blp-section-title a{

    display:inline-block;

    margin-top:10px;

}

}

/* ==========================================
Kategori Blog
========================================== */

.blp-blog-categories{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:35px;

}

.blp-blog-category{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    color:#334155;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.blp-blog-category:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

    transform:translateY(-2px);

}

.blp-blog-category span{

    background:#eef2ff;

    color:#2563eb;

    padding:2px 8px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.blp-blog-category:hover span{

    background:rgba(255,255,255,.25);

    color:#fff;

}

.blp-blog-category.active{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}

.blp-blog-category.active span{

    background:rgba(255,255,255,.25);

    color:#fff;

}