/*
=====================================================
KUMPULAN RESEP
=====================================================
*/

.ibp-single-resep-page,
.ibp-archive-resep-page{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:40px 20px;

    box-sizing:border-box;

    background:#f5f7f9;

}


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

.ibp-single-resep-container,
.ibp-archive-resep-container{

    width:100%;

    max-width:1000px;

    margin:0 auto;

    box-sizing:border-box;

}


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

.ibp-single-resep-container{

    padding:35px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.06);

}


/*
=====================================================
BREADCRUMB
=====================================================
*/

.ibp-resep-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    padding-bottom:18px;

    border-bottom:1px solid #eeeeee;

    font-size:14px;

    line-height:1.5;

}


.ibp-resep-breadcrumb a{

    text-decoration:none;

}


.ibp-resep-breadcrumb span{

    word-break:break-word;

}


/*
=====================================================
SINGLE HEADER
=====================================================
*/

.ibp-single-resep-header{

    margin-bottom:30px;

}


.ibp-single-resep-category{

    display:inline-block;

    padding:6px 12px;

    margin-bottom:12px;

    border-radius:20px;

    background:#f1f5f9;

    font-size:13px;

    font-weight:600;

}


.ibp-single-resep-title{

    margin:0;

    font-size:36px;

    line-height:1.3;

}


.ibp-single-resep-description{

    margin-top:15px;

    font-size:17px;

    line-height:1.8;

}


.ibp-single-resep-description p{

    margin:0;

}


/*
=====================================================
FEATURED IMAGE
=====================================================
*/

.ibp-single-resep-featured{

    margin:25px 0 35px;

}


.ibp-single-resep-featured img{

    width:100%;

    max-height:500px;

    object-fit:cover;

    display:block;

    border-radius:14px;

}


/*
=====================================================
RESEP SECTION
=====================================================
*/

.ibp-resep-section{

    margin:25px 0;

    padding:25px;

    box-sizing:border-box;

    border:1px solid #e5e7eb;

    border-radius:12px;

    background:#f8fafc;

}


.ibp-resep-section h2{

    margin:0 0 18px;

    font-size:23px;

    line-height:1.4;

}


.ibp-resep-section ul,
.ibp-resep-section ol{

    margin:0;

}


.ibp-resep-section ul{

    padding-left:22px;

}


.ibp-resep-section ol{

    padding-left:25px;

}


.ibp-resep-section li{

    margin-bottom:10px;

    line-height:1.7;

}


.ibp-resep-section p{

    margin:0;

    line-height:1.8;

}


/*
=====================================================
TIPS
=====================================================
*/

.ibp-resep-tips{

    border-left:4px solid #2563eb;

}


/*
=====================================================
CATATAN
=====================================================
*/

.ibp-resep-catatan{

    border-left:4px solid #64748b;

}


/*
=====================================================
BOTTOM NAV
=====================================================
*/

.ibp-single-resep-bottom-nav{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid #eeeeee;

}


.ibp-single-resep-category-btn,
.ibp-back-resep-btn{

    display:inline-block;

    padding:11px 16px;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}

/*
=====================================================
NAVIGASI RESEP - JUDUL RESEP
=====================================================
*/

.ibp-single-resep-navigation{

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    gap:15px;

    margin:40px 0 25px;

    padding:18px;

    border-radius:12px;

    box-sizing:border-box;

    background:#f8fafc;

    border:1px solid #e5e7eb;

}


/*
=====================================================
PREV / NEXT
=====================================================
*/

.ibp-resep-nav-prev{

    text-align:left;

}


.ibp-resep-nav-next{

    text-align:right;

}


/*
=====================================================
TOMBOL
=====================================================
*/

.ibp-resep-nav-button{

    display:flex;

    flex-direction:column;

    gap:5px;

    padding:12px 16px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    box-sizing:border-box;

    transition:
        background .2s ease,
        transform .2s ease;

}


.ibp-resep-nav-button:hover{

    transform:translateY(-1px);

}


/*
=====================================================
LABEL
=====================================================
*/

.ibp-resep-nav-label{

    display:block;

    font-size:13px;

    font-weight:600;

}


/*
=====================================================
JUDUL RESEP
=====================================================
*/

.ibp-resep-nav-title{

    display:block;

    font-size:15px;

    line-height:1.4;

}


/*
=====================================================
POSISI
=====================================================
*/

.ibp-resep-nav-position{

    text-align:center;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}


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

@media(max-width:600px){

    .ibp-single-resep-navigation{

        grid-template-columns:1fr;

        gap:10px;

        text-align:center;

    }


    .ibp-resep-nav-prev,
    .ibp-resep-nav-next{

        text-align:center;

    }


    .ibp-resep-nav-position{

        order:-1;

        padding:5px 0;

    }


    .ibp-resep-nav-button{

        align-items:center;

    }


    .ibp-resep-nav-title{

        max-width:100%;

    }

}

/*
=====================================================
JUDUL ARTIKEL
=====================================================
*/

.ibp-single-resep-article-header{

    margin-bottom:25px;

    padding-bottom:25px;

    border-bottom:1px solid #eeeeee;

}


.ibp-single-resep-article-title{

    margin:0;

    font-size:34px;

    line-height:1.3;

}


.ibp-single-resep-article-count{

    margin:10px 0 0;

    font-size:14px;

    line-height:1.6;

}


/*
=====================================================
DAFTAR RESEP / DROPDOWN
=====================================================
*/

.ibp-single-resep-toc{

    margin:20px 0 30px;

    padding:16px;

    border-radius:12px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

}


/*
=====================================================
LABEL
=====================================================
*/

.ibp-single-resep-toc-header{

    margin-bottom:8px;

}


.ibp-single-resep-toc-label{

    display:block;

    margin:0;

    font-size:15px;

    font-weight:700;

    line-height:1.4;

}


/*
=====================================================
DROPDOWN
=====================================================
*/

.ibp-single-resep-select{

    display:block;

    width:100%;

    min-height:44px;

    padding:9px 40px 9px 12px;

    border:1px solid #d1d5db;

    border-radius:8px;

    background:#ffffff;

    font-size:15px;

    line-height:1.4;

    cursor:pointer;

    box-sizing:border-box;

    appearance:auto;

}


/*
=====================================================
FOCUS
=====================================================
*/

.ibp-single-resep-select:focus{

    outline:none;

    border-color:#9ca3af;

    box-shadow:0 0 0 2px rgba(0,0,0,.05);

}


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

@media(max-width:600px){

    .ibp-single-resep-toc{

        margin:16px 0 25px;

        padding:13px;

        border-radius:10px;

    }


    .ibp-single-resep-toc-label{

        font-size:14px;

    }


    .ibp-single-resep-select{

        min-height:42px;

        padding:8px 36px 8px 10px;

        font-size:14px;

    }

}


/*
=====================================================
JUDUL RESEP AKTIF
=====================================================
*/

.ibp-single-resep-title{

    margin:0;

    font-size:32px;

    line-height:1.3;

}


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

@media(max-width:600px){

    .ibp-single-resep-article-title{

        font-size:27px;

    }


    .ibp-single-resep-article-count{

        font-size:13px;

    }


    .ibp-single-resep-toc{

        padding:18px;

        margin-bottom:28px;

    }


    .ibp-single-resep-toc-header h2{

        font-size:20px;

    }


    .ibp-single-resep-toc-list li a{

        gap:9px;

        padding:12px 2px;

    }


    .ibp-toc-number{

        flex:0 0 28px;

        width:28px;

        height:28px;

        font-size:12px;

    }


    .ibp-toc-title{

        font-size:14px;

    }


    .ibp-single-resep-title{

        font-size:26px;

    }

}

/*
=====================================================
ARCHIVE HEADER
=====================================================
*/

.ibp-archive-resep-header{

    margin-bottom:30px;

    text-align:center;

}


.ibp-archive-resep-header h1{

    margin:0 0 10px;

    font-size:36px;

    line-height:1.3;

}


.ibp-archive-resep-header p{

    max-width:700px;

    margin:0 auto;

    line-height:1.8;

}


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

.ibp-archive-search{

    margin-bottom:30px;

}


.ibp-archive-search form{

    display:flex;

    gap:10px;

    width:100%;

}


.ibp-archive-search input{

    flex:1;

    min-width:0;

    padding:13px 15px;

    border:1px solid #d1d5db;

    border-radius:8px;

    box-sizing:border-box;

    font-size:15px;

}


.ibp-archive-search button{

    padding:13px 20px;

    border:0;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

}


/*
=====================================================
SECTION HEADING
=====================================================
*/

.ibp-section-heading{

    margin-bottom:18px;

}


.ibp-section-heading h2{

    margin:0;

    font-size:24px;

}


.ibp-section-heading p{

    margin:6px 0 0;

    font-size:14px;

}


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

.ibp-archive-kategori{

    margin-bottom:35px;

    padding:25px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#ffffff;

}


.ibp-archive-kategori-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.ibp-archive-category-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:9px 14px;

    border:1px solid #e5e7eb;

    border-radius:20px;

    text-decoration:none;

    font-size:14px;

    background:#ffffff;

}


.ibp-archive-category-link span{

    font-size:12px;

}


.ibp-archive-category-link.active{

    font-weight:600;

}


/*
=====================================================
DAFTAR RESEP
=====================================================
*/

.ibp-archive-resep-list{

    margin-top:10px;

}


/*
=====================================================
SIMPLE LIST
=====================================================
*/

.ibp-simple-resep-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/*
=====================================================
ITEM
=====================================================
*/

.ibp-simple-resep-item{

    width:100%;

    overflow:hidden;

    border:1px solid #e5e7eb;

    border-radius:12px;

    background:#ffffff;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.ibp-simple-resep-item:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);

}


/*
=====================================================
LINK
=====================================================
*/

.ibp-simple-resep-link{

    display:grid;

    grid-template-columns:
        120px 1fr auto;

    align-items:center;

    gap:20px;

    padding:15px;

    text-decoration:none;

    box-sizing:border-box;

}


/*
=====================================================
IMAGE
=====================================================
*/

.ibp-simple-resep-image{

    width:120px;

    height:90px;

    overflow:hidden;

    border-radius:10px;

}


.ibp-simple-resep-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*
=====================================================
INFO
=====================================================
*/

.ibp-simple-resep-info{

    min-width:0;

}


.ibp-simple-resep-info h3{

    margin:0 0 7px;

    font-size:19px;

    line-height:1.4;

}


.ibp-simple-resep-category{

    display:inline-block;

    margin-bottom:7px;

    font-size:12px;

    font-weight:600;

}


.ibp-simple-resep-info p{

    margin:0;

    font-size:14px;

    line-height:1.6;

}


/*
=====================================================
ARROW
=====================================================
*/

.ibp-simple-resep-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:35px;

    font-size:24px;

}


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

.ibp-simple-resep-empty{

    padding:50px 20px;

    text-align:center;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#ffffff;

}


.ibp-simple-resep-empty h3{

    margin-top:0;

}


.ibp-simple-back-btn{

    display:inline-block;

    margin-top:15px;

    padding:11px 16px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

}


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

.ibp-archive-pagination{

    margin-top:35px;

    text-align:center;

}


.ibp-archive-pagination ul{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:6px;

    margin:0;

    padding:0;

    list-style:none;

}


.ibp-archive-pagination a,
.ibp-archive-pagination span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:38px;

    min-height:38px;

    padding:0 10px;

    border:1px solid #e5e7eb;

    border-radius:7px;

    text-decoration:none;

    box-sizing:border-box;

}


/*
=====================================================
RESPONSIVE
=====================================================
*/

@media(max-width:700px){

    .ibp-single-resep-page,
    .ibp-archive-resep-page{

        padding:20px 12px;

    }


    .ibp-single-resep-container{

        padding:22px 18px;

        border-radius:14px;

    }


    .ibp-single-resep-title{

        font-size:28px;

    }


    .ibp-archive-resep-header h1{

        font-size:29px;

    }


    .ibp-single-resep-description{

        font-size:15px;

    }


    .ibp-archive-search form{

        flex-direction:column;

    }


    .ibp-archive-search button{

        width:100%;

    }


    .ibp-simple-resep-link{

        grid-template-columns:
            85px 1fr auto;

        gap:12px;

        padding:12px;

    }


    .ibp-simple-resep-image{

        width:85px;

        height:75px;

    }


    .ibp-simple-resep-info h3{

        font-size:16px;

    }


    .ibp-simple-resep-info p{

        font-size:13px;

    }


    .ibp-simple-resep-arrow{

        min-width:20px;

        font-size:20px;

    }


    .ibp-resep-section{

        padding:20px;

    }


    .ibp-single-resep-bottom-nav{

        flex-direction:column;

    }


    .ibp-single-resep-category-btn,
    .ibp-back-resep-btn{

        width:100%;

        text-align:center;

        box-sizing:border-box;

    }

}