/* ==========================================================
   HOME OJS 3 - 3 KOLOM MODERN
   HEADER TIDAK DIUBAH
   ========================================================== */


/* =========================================================
   HEADER OJS 3 - JATL
   FULL KIRI-KANAN, TIDAK TERPOTONG & RESPONSIVE
   ========================================================= */

/* Container header */
.pkp_site_name {
    padding: 0 !important;
    margin: 0 !important;

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

    min-height: 0 !important;
    height: auto !important;

    display: block !important;
    position: relative !important;

    overflow: visible !important;

    clear: both !important;

    z-index: 1 !important;
}


/* Link pembungkus gambar */
.pkp_site_name > a {
    display: block !important;

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

    height: auto !important;

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

    line-height: 0 !important;
}


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

.pkp_site_name img {
    display: block !important;

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

    height: auto !important;
    max-height: none !important;

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

    border: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    vertical-align: top !important;
}


/* =========================================================
   CEGAH HEADER OJS MENUMPUK DENGAN GAMBAR
   ========================================================= */

.pkp_site_name + * {
    clear: both !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;

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

    .pkp_site_name img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }
}


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

@media (min-width: 576px) and (max-width: 991px) {

    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }

    .pkp_site_name img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
    }
}


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

@media (max-width: 575px) {

    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

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

        display: block !important;

        position: relative !important;

        clear: both !important;

        overflow: visible !important;
    }

    .pkp_site_name > a {
        display: block !important;

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

        height: auto !important;

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

        line-height: 0 !important;
    }

    .pkp_site_name img {
        display: block !important;

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

        height: auto !important;
        max-height: none !important;

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

        object-fit: contain !important;
        object-position: center center !important;

        vertical-align: top !important;
    }
}
/* AREA HOME */
@media (min-width: 1100px) {

    .page_index_journal .pkp_structure_content {
        display: grid !important;

        grid-template-columns:
            230px
            minmax(300px, 1fr)
            330px !important;

        gap: 25px !important;

        max-width: 1450px !important;

        margin: 0 auto !important;

        padding: 25px 25px !important;

        box-sizing: border-box !important;
    }


    /* ==========================================
       KOLOM KIRI
       MENU YANG SUDAH ADA TETAP
       ========================================== */

    .page_index_journal .pkp_structure_sidebar {
        grid-column: 1 !important;

        grid-row: 1 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ==========================================
       KOLOM TENGAH
       KONTEN / GAMBAR
       ========================================== */

    .page_index_journal .pkp_structure_main {
        grid-column: 2 !important;

        grid-row: 1 !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ==========================================
       GAMBAR HOME
       ========================================== */

    .page_index_journal .pkp_structure_main img {
        max-width: 100% !important;

        height: auto !important;
    }


    /* ==========================================
       GAMBAR UTAMA HOMEPAGE
       ========================================== */

    .page_index_journal .homepage_image img {
        width: 100% !important;

        max-width: 500px !important;

        height: auto !important;

        display: block !important;

        margin: 20px auto !important;

        border-radius: 12px !important;

        box-shadow:
            0 5px 20px rgba(0,0,0,.12) !important;
    }


    /* ==========================================
       KOLOM KANAN
       INFORMASI JATL
       ========================================== */

    .page_index_journal .homepage_about {
        grid-column: 3 !important;

        grid-row: 1 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }

}


/* ==========================================================
   KARTU INFORMASI JATL
   ========================================================== */

.jatl-home-info {
    background: F2F5F2 !important;

    border-radius: 12px !important;

    padding: 20px !important;

    margin: 0 !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.10) !important;

    border-top: 5px solid F2F5F2 !important;
}


/* Judul JATL */

.jatl-home-info h2 {
    margin: 0 0 8px 0 !important;

    color: F2F5F2 !important;

    font-size: 22px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;
}


/* Nama singkat */

.jatl-home-info .jatl-subtitle {
    color: F2F5F2 !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    margin-bottom: 18px !important;
}


/* Garis dekorasi */

.jatl-home-info .jatl-line {
    width: 70px !important;

    height: 4px !important;

    background: linear-gradient(
        90deg,
        #F0F5F0,
        #159447
    ) !important;

    border-radius: 5px !important;

    margin-bottom: 18px !important;
}


/* Link informasi */

.jatl-home-info a {
    display: block !important;

    padding: 11px 13px !important;

    margin-bottom: 7px !important;

    background: #f6faf7 !important;

    border-radius: 7px !important;

    color: #155c32 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    border-left: 3px solid #159447 !important;

    transition: all .2s ease !important;
}


.jatl-home-info a:hover {
    background: #159447 !important;

    color: #ffffff !important;

    padding-left: 18px !important;
}


/* ==========================================================
   MENU KIRI TETAP RAPI
   ========================================================== */

.page_index_journal .pkp_structure_sidebar .pkp_block {
    margin-bottom: 15px !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08) !important;
}


/* Judul menu kiri */

.page_index_journal .pkp_structure_sidebar .pkp_block .title {
    background: #168d34 !important;

    color: #ffffff !important;

    padding: 13px 15px !important;

    font-weight: 700 !important;
}


/* Isi menu kiri */

.page_index_journal .pkp_structure_sidebar .pkp_block a {
    color: #222222 !important;

    text-decoration: none !important;

    transition: .2s ease !important;
}


.page_index_journal .pkp_structure_sidebar .pkp_block a:hover {
    background: F2F5F2 !important;

    color: #ffffff !important;
}


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

@media (max-width: 1099px) {

    .page_index_journal .pkp_structure_content {
        padding: 20px !important;
    }

    .jatl-home-info {
        margin-top: 20px !important;
    }

}


/* ==========================================================
   HP
   ========================================================== */

@media (max-width: 700px) {

    .page_index_journal .pkp_structure_content {
        display: flex !important;

        flex-direction: column !important;

        padding: 15px !important;

        gap: 15px !important;
    }


    /* Menu tetap tampil */
    .page_index_journal .pkp_structure_sidebar {
        order: 1 !important;

        width: 100% !important;
    }


    /* Gambar */
    .page_index_journal .pkp_structure_main {
        order: 2 !important;

        width: 100% !important;
    }


    /* Informasi JATL */
    .page_index_journal .homepage_about {
        order: 3 !important;

        width: 100% !important;
    }


    .page_index_journal .homepage_image img {
        width: 100% !important;

        max-width: 450px !important;

        margin: 10px auto !important;
    }


    .jatl-home-info {
        padding: 17px !important;
    }


    .jatl-home-info h2 {
        font-size: 20px !important;
    }

}