/* =========================================================
   OMP 3.5.0.5
   PREMIUM PUBLISHER THEME
   NAVY BLUE + GOLD
   ========================================================= */

:root{
    --navy:#062b55;
    --navy-dark:#041d3d;
    --navy-light:#0b4d89;
    --gold:#dfa91f;
    --gold-light:#f1c75b;
    --white:#ffffff;
    --bg:#f6f8fb;
    --text:#142642;
    --muted:#68809d;
    --border:#e4eaf1;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--text);
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.6;
}

a{
    text-decoration:none;
    transition:.25s ease;
}

img{
    max-width:100%;
    height:auto;
}


/* =========================================================
   FIX UTAMA: FULL WIDTH OMP
   ========================================================= */

.pkp_structure_page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    background:#fff !important;
}

.pkp_structure_content{
    display:block !important;

    width:100% !important;
    max-width:1480px !important;

    margin:0 auto !important;
    padding:32px 34px 60px !important;

    box-sizing:border-box !important;
}


/* INI YANG PALING PENTING */

.pkp_structure_main{
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    float:none !important;

    margin:0 !important;
    padding:0 !important;

    background:#fff !important;

    border:0 !important;
    box-shadow:none !important;

    box-sizing:border-box !important;
}


/* Hilangkan ruang sidebar */

.pkp_structure_sidebar{
    display:none !important;
}


/* Kadang default OMP memberi width sekitar 65% */

.pkp_structure_main:first-child:last-child{
    width:100% !important;
}

.pkp_structure_main:before,
.pkp_structure_main:after{
    display:none !important;
}


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

.pkp_structure_head{
    position:relative;

    background:
        linear-gradient(
            135deg,
            #032347 0%,
            #07447d 55%,
            #07528f 100%
        ) !important;

    border:none !important;

    box-shadow:
        0 3px 14px rgba(0,0,0,.14);
}

.pkp_structure_head:after{
    content:"";

    position:absolute;
    bottom:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #9f7515,
            #dfa91f,
            #f1c75b,
            #dfa91f,
            #9f7515
        );
}

.pkp_head_wrapper{
    width:100% !important;
    max-width:1480px !important;

    margin:0 auto !important;

    box-sizing:border-box;
}

.pkp_site_name{
    padding:16px 24px !important;
}

.pkp_site_name a,
.pkp_site_name .is_text{
    color:#fff !important;

    font-size:28px !important;
    font-weight:800 !important;

    letter-spacing:.3px;
}

.pkp_site_name img{
    max-height:75px !important;
    width:auto !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.pkp_navigation_primary_wrapper{
    background:rgba(0,0,0,.16) !important;
    border-top:1px solid rgba(255,255,255,.11);
}

.pkp_navigation_primary{
    max-width:1480px !important;

    margin:0 auto !important;
}

.pkp_navigation_primary > li > a{
    color:#fff !important;

    padding:15px 20px !important;

    font-size:13px !important;
    font-weight:750 !important;

    text-transform:uppercase;

    border-bottom:3px solid transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus{
    color:var(--gold-light) !important;

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

    border-bottom-color:var(--gold) !important;
}

.pkp_navigation_user a{
    color:#fff !important;
}


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

.cmp_breadcrumbs{
    width:100%;

    margin:0 0 22px !important;
    padding:12px 18px !important;

    background:#edf4fb !important;

    border:none !important;
    border-radius:6px;

    box-sizing:border-box;
}

.cmp_breadcrumbs a{
    color:#335d88 !important;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

.page_catalog h1,
.pkp_page_title,
.page_title{
    margin:0 0 8px !important;

    color:var(--navy) !important;

    font-size:34px !important;
    font-weight:800 !important;

    line-height:1.25;
}

.page_catalog h1:after,
.pkp_page_title:after{
    content:"";

    display:block;

    width:55px;
    height:3px;

    margin-top:9px;

    background:var(--gold);

    border-radius:10px;
}


/* =========================================================
   CATALOG TOP
   ========================================================= */

.page_catalog{
    width:100% !important;
}

.page_catalog .cmp_monographs_list{
    width:100% !important;
}


/* jumlah buku */

.page_catalog .cmp_monographs_list + .cmp_pagination{
    margin-top:35px;
}


/* =========================================================
   GRID KATALOG - 4 COVER PER BARIS
   ========================================================= */

.page_catalog .cmp_monographs_list{

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:26px !important;

    width:100% !important;

    margin:25px 0 0 !important;
    padding:0 !important;

    list-style:none !important;

    box-sizing:border-box;
}


/* Reset item bawaan OMP */

.page_catalog .cmp_monographs_list > li{

    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    box-sizing:border-box !important;
}


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

.page_catalog .obj_monograph_summary{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;
    max-width:none !important;

    min-width:0 !important;

    height:100% !important;

    margin:0 !important;
    padding:16px !important;

    background:#fff !important;

    border:1px solid #e7ebf0 !important;

    border-radius:10px !important;

    box-shadow:
        0 6px 20px rgba(15,44,79,.07) !important;

    box-sizing:border-box !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.page_catalog .obj_monograph_summary:hover{

    transform:translateY(-6px);

    border-color:rgba(223,169,31,.7) !important;

    box-shadow:
        0 18px 38px rgba(15,44,79,.14) !important;
}


/* =========================================================
   COVER BUKU
   ========================================================= */

.page_catalog .obj_monograph_summary .cover{

    position:relative;

    display:block !important;

    float:none !important;

    width:100% !important;
    max-width:none !important;

    height:360px !important;

    margin:0 0 15px 0 !important;

    overflow:hidden;

    background:#f2f4f7;

    border-radius:5px;

    box-sizing:border-box;
}

.page_catalog .obj_monograph_summary .cover img{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:100% !important;

    margin:0 auto !important;

    object-fit:contain !important;

    background:#f4f5f6;

    transition:transform .35s ease;
}

.page_catalog .obj_monograph_summary:hover .cover img{
    transform:scale(1.025);
}


/* =========================================================
   JUDUL BUKU
   ========================================================= */

.page_catalog .obj_monograph_summary .title{

    display:block !important;

    float:none !important;

    width:100% !important;

    margin:0 0 6px !important;

    padding:0 !important;

    font-size:17px !important;
    font-weight:800 !important;

    line-height:1.35 !important;

    box-sizing:border-box;
}

.page_catalog .obj_monograph_summary .title a{

    display:block !important;

    color:#062b55 !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
}

.page_catalog .obj_monograph_summary .title a:hover{
    color:#b88614 !important;
}


/* =========================================================
   PENULIS
   ========================================================= */

.page_catalog .obj_monograph_summary .author,
.page_catalog .obj_monograph_summary .authors{

    display:block !important;

    float:none !important;

    width:100% !important;

    margin:0 0 7px !important;
    padding:0 !important;

    color:#6e8bb0 !important;

    font-size:13px !important;

    line-height:1.5 !important;

    word-break:normal !important;
}


/* =========================================================
   DATE / YEAR
   ========================================================= */

.page_catalog .obj_monograph_summary .date{

    display:block !important;

    width:100% !important;

    margin:0 0 12px !important;

    color:#405b7b !important;

    font-size:13px !important;
}


/* =========================================================
   TOMBOL LIHAT BUKU
   ========================================================= */

.page_catalog .obj_monograph_summary .title a:after{

    content:"📖  Lihat Buku  →";

    display:block;

    width:max-content;

    margin-top:14px;

    padding:9px 16px;

    background:
        linear-gradient(
            135deg,
            #d89c11,
            #efb934
        );

    color:#fff !important;

    border-radius:5px;

    font-size:12px !important;
    font-weight:800 !important;

    letter-spacing:.1px;

    box-shadow:
        0 4px 11px rgba(211,157,29,.22);

    transition:.25s ease;
}

.page_catalog .obj_monograph_summary .title a:hover:after{

    background:var(--navy);

    color:#fff !important;

    transform:translateX(3px);
}


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

.cmp_pagination{

    display:flex !important;

    justify-content:center;
    align-items:center;

    gap:7px;

    margin:35px auto 5px !important;
}

.cmp_pagination a,
.cmp_pagination .current{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:36px;
    height:36px;

    padding:0 9px;

    border:1px solid #dde5ee;
    border-radius:5px;

    background:#fff;

    color:#274d73;

    box-sizing:border-box;
}

.cmp_pagination .current{

    background:var(--navy) !important;

    color:#fff !important;

    border-color:var(--navy) !important;
}

.cmp_pagination a:hover{

    background:var(--gold);

    color:#fff;

    border-color:var(--gold);
}


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

input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea{

    padding:10px 12px !important;

    background:#fff;

    border:1px solid #d8e0e9 !important;

    border-radius:6px !important;

    box-sizing:border-box;
}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--gold) !important;

    outline:none;

    box-shadow:
        0 0 0 3px rgba(223,169,31,.12);
}


/* =========================================================
   HERO HOMEPAGE
   ========================================================= */

.omp-hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    width:100%;

    min-height:330px;

    margin:0 0 30px;

    padding:55px 60px;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(230,180,50,.28),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #041c39 0%,
            #05396c 58%,
            #075591 100%
        );

    border-radius:0;

    color:#fff;
}

.omp-hero-content{

    position:relative;

    z-index:2;

    width:58%;
}

.omp-hero h1{

    margin:0 0 15px;

    color:#fff !important;

    font-size:45px !important;
    font-weight:850;

    line-height:1.15;
}

.omp-hero h1 span{
    color:var(--gold);
}

.omp-hero p{

    max-width:680px;

    margin:0 0 24px;

    color:rgba(255,255,255,.91);

    font-size:17px;
}

.omp-hero-button{

    display:inline-block;

    padding:12px 20px;

    background:
        linear-gradient(
            135deg,
            #d99e17,
            #edbb3e
        );

    color:#fff !important;

    border-radius:5px;

    font-weight:800;

    box-shadow:
        0 5px 14px rgba(0,0,0,.18);
}

.omp-hero-button:hover{

    background:#fff;

    color:var(--navy) !important;

    transform:translateY(-2px);
}


/* dekorasi hero */

.omp-hero:after{

    content:"";

    position:absolute;

    right:-60px;
    top:-100px;

    width:500px;
    height:500px;

    border-radius:50%;

    border:70px solid rgba(223,169,31,.15);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.omp-section-title{

    margin:20px 0 25px;
}

.omp-section-title h2{

    margin:0 0 5px;

    color:var(--navy);

    font-size:31px;
    font-weight:850;
}

.omp-section-title h2:after{

    content:"";

    display:block;

    width:50px;
    height:3px;

    margin-top:8px;

    background:var(--gold);
}

.omp-section-title p{

    margin:9px 0 0;

    color:#536b87;
}


/* =========================================================
   FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper{

    position:relative;

    margin-top:55px !important;

    background:
        linear-gradient(
            135deg,
            #031c3a,
            #06345f
        ) !important;

    color:rgba(255,255,255,.85) !important;
}

.pkp_structure_footer_wrapper:before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:var(--gold);
}

.pkp_structure_footer{

    max-width:1480px !important;

    margin:0 auto;

    padding:40px 35px !important;

    box-sizing:border-box;
}

.pkp_structure_footer a{
    color:#fff !important;
}

.pkp_structure_footer a:hover{
    color:var(--gold-light) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1200px){

    .pkp_structure_content{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .page_catalog .cmp_monographs_list{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }

    .page_catalog .obj_monograph_summary .cover{
        height:340px !important;
    }
}


/* =========================================================
   TABLET KECIL
   ========================================================= */

@media (max-width:850px){

    .page_catalog .cmp_monographs_list{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .omp-hero{
        padding:45px 35px;
    }

    .omp-hero-content{
        width:80%;
    }

    .omp-hero h1{
        font-size:36px !important;
    }
}


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

@media (max-width:600px){

    .pkp_structure_content{
        padding:18px 12px 35px !important;
    }

    .page_catalog .cmp_monographs_list{
        grid-template-columns:1fr !important;
        gap:22px !important;
    }

    .page_catalog .obj_monograph_summary{

        width:100% !important;
        max-width:380px !important;

        margin:0 auto !important;
    }

    .page_catalog .obj_monograph_summary .cover{
        height:420px !important;
    }

    .omp-hero{

        min-height:auto;

        padding:38px 24px;
    }

    .omp-hero-content{
        width:100%;
    }

    .omp-hero h1{
        font-size:30px !important;
    }

    .omp-hero p{
        font-size:15px;
    }

    .page_catalog h1{
        font-size:28px !important;
    }
}

/* =========================================================
   PREMIUM FOOTER OMP 3.5.0.5
   ========================================================= */

.pkp_structure_footer_wrapper {
    position: relative;

    margin-top: 55px !important;

    background:
        linear-gradient(
            125deg,
            #03172f 0%,
            #043263 50%,
            #064984 100%
        ) !important;

    color: #ffffff !important;

    border-top: 3px solid #d9a72e;

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


.pkp_structure_footer {

    width: 100% !important;

    max-width: 1480px !important;

    margin: 0 auto !important;

    padding:
        28px 30px 14px !important;

    box-sizing: border-box !important;
}


/* HILANGKAN STYLE DEFAULT */

.pkp_structure_footer .pkp_brand_footer {

    display: none !important;
}


/* =====================================
   MAIN FOOTER
   ===================================== */

.premium-footer {

    display: grid;

    grid-template-columns:
        1.5fr 1.3fr .9fr .45fr;

    gap: 35px;

    align-items: center;

    padding:
        8px 0 25px;

}


/* KOLOM */

.premium-footer .footer-col {

    min-width: 0;

}


/* =====================================
   LOGO
   ===================================== */

.footer-logo-wrap {

    margin-bottom: 12px;

}


.footer-logo-wrap img {

    display: block;

    width: auto;

    max-width: 220px;

    max-height: 75px;

}


.footer-brand p {

    max-width: 330px;

    margin: 0;

    color:
        rgba(255,255,255,.78);

    font-size: 13px;

    line-height: 1.65;

}


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

.premium-footer h3 {

    margin:
        0 0 12px;

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 700;

}


/* =====================================
   TEXT
   ===================================== */

.premium-footer p {

    margin:
        0 0 8px;

    color:
        rgba(255,255,255,.82);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =====================================
   VERTICAL DIVIDER
   ===================================== */

.premium-footer .footer-col:not(:first-child) {

    position: relative;

    padding-left: 30px;

}


.premium-footer .footer-col:not(:first-child):before {

    content: "";

    position: absolute;

    left: 0;

    top: 5%;

    width: 1px;

    height: 90%;

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

}


/* =====================================
   SOCIAL ICON
   ===================================== */

.footer-social {

    display: flex;

    gap: 9px;

    align-items: center;

}


.footer-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 33px;

    height: 33px;

    border-radius: 50%;

    background: #ffffff;

    color: #073667 !important;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none !important;

    transition: all .25s ease;

}


.footer-social a:hover {

    background: #d9a72e;

    color: #ffffff !important;

    transform: translateY(-2px);

}


/* =====================================
   QR
   ===================================== */

.footer-qr {

    text-align: right;

}


.footer-qr img {

    width: 72px;

    height: 72px;

    object-fit: contain;

    background: #ffffff;

    padding: 3px;

    border-radius: 4px;

}


/* =====================================
   BOTTOM FOOTER
   ===================================== */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        13px 0 0;

    border-top:
        1px solid rgba(255,255,255,.20);

    color:
        rgba(255,255,255,.72);

    font-size:
        12px;

}


/* LINKS */

.footer-links {

    display: flex;

    gap: 22px;

}


.footer-links a {

    position: relative;

    color:
        rgba(255,255,255,.82) !important;

    text-decoration: none;

}


.footer-links a:hover {

    color:
        #efc75d !important;

}


/* SEPARATOR */

.footer-links a:not(:last-child):after {

    content: "";

    position: absolute;

    right: -11px;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 12px;

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

}


/* =====================================
   TABLET
   ===================================== */

@media (max-width: 900px) {

    .premium-footer {

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

        gap: 28px;

    }


    .premium-footer .footer-col {

        padding-left: 0 !important;

    }


    .premium-footer .footer-col:before {

        display: none !important;

    }


    .footer-qr {

        text-align: left;

    }

}


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

@media (max-width: 600px) {

    .pkp_structure_footer {

        padding:
            25px 20px 15px !important;

    }


    .premium-footer {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .footer-logo-wrap img {

        max-width: 180px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    .footer-links {

        flex-wrap: wrap;

        gap: 15px;

    }


    .footer-links a:not(:last-child):after {

        display: none;

    }

}