/* ===========================================================
   BLP KATALOG
   Mengikuti tampilan Biolink
=========================================================== */

body{
    margin:0;
    background:#0f172a;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#fff;
    padding-bottom:90px;
}

/* ===========================================================
   CONTAINER
=========================================================== */

.blp-container{

    max-width:420px;

    margin:auto;

    padding:35px 18px;

    text-align:center;

}

/* ===========================================================
   MEMBER
=========================================================== */

.blp-avatar img{

    width:110px;

    height:110px;

    border-radius:50%;

    border:3px solid #38bdf8;

    object-fit:cover;

}

.blp-name{

    font-size:24px;

    font-weight:700;

    margin-top:15px;

}

.blp-username{

    color:#94a3b8;

    margin-top:5px;

    font-size:14px;

}

.blp-subtitle{

    margin-top:10px;

    color:#cbd5e1;

    font-size:14px;

}

/* ===========================================================
   SEARCH
=========================================================== */

.blp-search{

    margin:25px 0;

}

.blp-search input{

    width:100%;

    padding:13px 15px;

    border:none;

    border-radius:12px;

    background:#1e293b;

    color:#fff;

    font-size:15px;

    box-sizing:border-box;

}

.blp-search input::placeholder{

    color:#94a3b8;

}

/* ===========================================================
   KATEGORI
=========================================================== */

.blp-kategori{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px;

    margin-bottom:25px;

}

.blp-kategori a{

    text-decoration:none;

    color:#fff;

    background:#1e293b;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    transition:.25s;

}

.blp-kategori a:hover{

    background:#38bdf8;

}

.blp-kategori a.active{

    background:linear-gradient(135deg,#38bdf8,#6366f1);

}

/* ===========================================================
   GRID
=========================================================== */

.blp-grid{

    display:grid;

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

    gap:12px;

}

/* ===========================================================
   CARD
=========================================================== */

.blp-card{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    transition:.25s;

}

.blp-card:hover{

    transform:translateY(-3px);

}

.blp-card a{

    display:block;

    text-decoration:none;

    color:#111827;

}

.blp-card img{

    width:100%;

    height:150px;

    object-fit:contain;

    background:#fff;

    display:block;

    padding:10px;

    box-sizing:border-box;

}

.blp-card-body{

    padding:10px;

}

.blp-card-title{

    font-size:13px;

    font-weight:600;

    line-height:1.5;

    min-height:40px;

}

.blp-price{

    color:#16a34a;

    font-size:18px;

    font-weight:bold;

    margin-top:6px;

}

.blp-badge{

    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    background:#fef3c7;

    color:#92400e;

    border-radius:30px;

    font-size:11px;

}

.blp-btn{

    display:block;

    margin-top:10px;

    background:linear-gradient(135deg,#38bdf8,#6366f1);

    color:#fff;

    padding:10px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

}

.blp-btn:hover{

    opacity:.9;

}

/* ===========================================================
   EMPTY
=========================================================== */

.blp-empty{

    text-align:center;

    color:#cbd5e1;

    padding:40px 10px;

}

/* ===========================================================
   PAGINATION
=========================================================== */

.blp-pagination{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin:30px 0 20px;

    padding-bottom:25px;

}

.blp-pagination a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#1e293b;

    color:#fff;

    border-radius:8px;

    transition:.2s;

}

.blp-pagination a:hover{

    background:#334155;

}

.blp-pagination a.active{

    background:linear-gradient(135deg,#38bdf8,#6366f1);

}

/* ===========================================================
   STICKY MENU
=========================================================== */

.blp-bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:68px;

    background:#ffffff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 -3px 15px rgba(0,0,0,.12);

    z-index:99999;

}

.blp-bottom-nav a{

    flex:1;

    text-align:center;

    text-decoration:none;

    color:#666;

    font-size:12px;

}

.blp-bottom-nav span{

    display:block;

    font-size:22px;

    margin-bottom:3px;

}

.blp-bottom-nav a.active{

    color:#16a34a;

    font-weight:700;

}

/* ===========================================================
   MOBILE
=========================================================== */

@media(max-width:480px){

.blp-container{

padding:25px 15px;

}

.blp-card img{

height:130px;

}

.blp-name{

font-size:21px;

}

}