/* ==========================================================
    AL-USHUL: CUSTOM CSS OJS
   ========================================================== */

/* ----------------------------------------------------------
    1. VARIABEL WARNA
   ---------------------------------------------------------- */

:root {
    --alushul-dark-green: #185955;
    --alushul-nav-green: #4a583b;
    --alushul-light-bg: #f1f1f1;
    --alushul-border: #dddddd;
    --alushul-white: #ffffff;
    --alushul-black: #000000;
}

/* ----------------------------------------------------------
    2. RESET DASAR
   ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ----------------------------------------------------------
    3. HEADER DAN BANNER
   ---------------------------------------------------------- */

.pkp_structure_head {
    background-color: var(--alushul-white) !important;
    color: var(--alushul-black) !important;
    border-bottom:t 0 !important;
}

.pkp_head_wrapper {
    position: relative !important;
}

.pkp_site_name_wrapper {
    background-color: var(--alushul-white) !important;
}

.pkp_site_name {
    margin: 0 !important;
}

.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Cover Journal */

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    /* login and register button */
    margin-top: -12px !important; /* added by Jundy */
}

/* Ukuran navigasi user diatas header */

.pkp_navigation_user.pkp_navigation_user {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 16px;
}

/* ----------------------------------------------------------
    4. NAVIGASI UTAMA
   ---------------------------------------------------------- */

.pkp_navigation_primary_row {
    background-color: #1a823a !important;
}

/* Menu Navigasi Navbar */

.pkp_navigation_primary_wrapper {
    background-color: #1a823a !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
}

.pkp_navigation_primary > li > a {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    color: var(--alushul-white) !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--alushul-white) !important;
}

.pkp_navigation_primary>li>a {
    margin: .357rem .5em 0;
    padding: .357rem .5em calc(.714rem - 2px);
    border-bottom: 2px solid transparent;
    color: #ffffff;
    text-decoration: none;

}

/* Hover effect for primary navigation links */

.pkp_navigation_primary>li>a:hover {
    color: #fff;
    outline: 0;
    border-color: #ffffff
}

/* Focus effect for primary navigation links */

.pkp_navigation_primary>li>a:focus {
    color: #14514a;
    outline: 0;
    background: #14514a;
}

.pkp_navigation_search_wrapper a {
    color: var(--alushul-white) !important;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
    color: var(--alushul-white) !important;
}

/* Dropdown menu pada desktop */

.pkp_navigation_primary .dropdown-menu {
    background-color: var(--alushul-white) !important;
}

.pkp_navigation_primary .dropdown-menu a {
    color: var(--alushul-dark-green) !important;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
    color: var(--alushul-dark-green) !important;
    background-color: #eeeeee !important;
}

/* ----------------------------------------------------------
    5. KONTEN UTAMA DAN SIDEBAR
   ---------------------------------------------------------- */

.pkp_structure_content.has_sidebar {
    padding-top: 0 !important;
}

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

#customblock-ushul-jimuf-sidebar {
    padding: 0 !important;
}

#customblock-article-template {
    padding: 2px 5px 5px 5px !important;
}

#customblock-ushul-jimuf-sidebar *,
#customblock-article-template * {
    box-sizing: border-box;
}

/* #customblock-ushul-jimuf-sidebar img,
#customblock-article-template img,
.pkp_structure_sidebar img {
    max-width: 100% !important;
    height: auto !important;
} */

@media (min-width: 992px) {
    .pkp_block {
        padding:0.143rem
    }
}

/* ----------------------------------------------------------
    6. FOOTER
   ---------------------------------------------------------- */

.pkp_brand_footer {
    display: none !important;
}

.pkp_structure_footer {
    margin-top: -11px !important; /* changed by Jundy  */
}

.pkp_structure_footer_wrapper {
    background: none !important;
}

.pkp_footer_content {
    padding: 0 !important;
}

.pkp_footer_content img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================
    7. TAMPILAN DESKTOP
   ========================================================== */

@media (min-width: 992px) {

    /* Banner desktop */

    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper {
        padding-top: 0 !important;
    }

    .pkp_site_name_wrapper {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 12px !important;
    }

    .pkp_site_name {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_nav_toggle {
        display: none !important;
    }

    /* Menu horizontal desktop */

    .pkp_site_nav_menu {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    /* Navigasi utama */
    
    .pkp_navigation_primary {
        display: inline-block !important;
        max-width: 80% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: 15px !important;
    }

    .pkp_navigation_primary > li {
        display: inline-block !important;
    }

    .pkp_navigation_search_wrapper {
        float: right !important;
        margin: 0 !important;
        padding: 0 10px 0 0 !important;
        border-top: 0 !important;
    }

    /* Warna menu profil pada desktop */

    .pkp_navigation_user .profile > a {
        color: #ffffff !important;
        background-color: #1a823ab5 !important;
    }

    .pkp_navigation_user .profile > a:hover,
    .pkp_navigation_user .profile > a:focus {
        color: #ffffff !important;
        font-size: 15px !important;
        background-color: #56734d !important;
    }

    /* Warna menu list profil pada desktop */

    .pkp_nav_list ul {
        position: absolute;
        top: 100%;
        left: -9999px;
        z-index: 1000;
        width: 15em;
        margin: 0;
        padding: 0;
        background: #14514a;
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0,0,0,0.3)
    }

    /* Posisi konten dan sidebar desktop */

    .pkp_structure_content.has_sidebar {
        display: flex !important;
        align-items: flex-start !important;
        /* width: 100% !important; */ /* changed by Jundy */
        background-color: var(--alushul-light-bg) !important;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_main {
        order: 1;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        /* margin: 0 !important; */ /* changed by Jundy */
        padding: 10px 0 0 20px !important;
        /* border-right: 1px solid var(--alushul-border) !important; */ /* changed by Jundy */
        margin-top: -10px !important; /* added by Jundy */
        margin-bottom: 0 !important; /* added by Jundy */
        margin-left: -2px !important; /* added by Jundy */
        margin-right: -5px !important; /* added by Jundy */
    }

    .pkp_structure_content.has_sidebar .pkp_structure_sidebar.left {
        order: 2;
        flex: 0 0 275px !important;
        width: 275px !important;
        margin: 0 !important;
        padding: 0 0 0 20px !important;
    }

    .pkp_structure_sidebar.left .pkp_block {
        width: 100% !important;
        max-width: 255px !important;
    }
}

/* ==========================================================
    8. TAMPILAN MOBILE DAN TABLET
    Berlaku sampai lebar layar 991px
   ========================================================== */

@media (max-width: 991px) {

    /* Banner tampil penuh dan proporsional */

    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper {
        padding: 0 !important;
    }

    .pkp_site_name_wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name {
        order: 1;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* Tombol hamburger berada di bawah banner */

    .pkp_site_nav_toggle {
        order: 2;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: #1a823a !important;
        color: var(--alushul-white) !important;
        cursor: pointer !important;
        box-shadow: none !important;
        z-index: 10001 !important;
    }

    /* Ikon hamburger */

    .pkp_site_nav_toggle::before {
        display: inline-block !important;
        content: "≡" !important;
        color: var(--alushul-white) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* Teks tombol yang terlihat */

    .pkp_site_nav_toggle::after {
        display: inline-block !important;
        content: "Menu" !important;
        color: var(--alushul-white) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* Pertahankan teks bawaan untuk screen reader */

    .pkp_site_nav_toggle > span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Menu ditutup secara default */

    .pkp_site_nav_menu {
        display: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--alushul-nav-green) !important;
        z-index: 10000 !important;
    }

    /* Menu terbuka setelah tombol hamburger ditekan */

    .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        display: block !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--alushul-nav-green) !important;
    }

    .pkp_navigation_primary {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: var(--alushul-white) !important;
        text-decoration: none !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--alushul-white) !important;
    }

    /* Jarak konten dalam menu hamburger tampilan mobile */

    .pkp_site_nav_menu ul ul {
        line-height: 2.5;
        padding-left: 2rem;
    }

    /* Dropdown menu mobile */

    .pkp_navigation_primary .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
    }

    .pkp_navigation_primary .dropdown-menu a {
        display: block !important;
        width: 100% !important;
        padding: 10px 28px !important;
        color: var(--alushul-white) !important;
    }

    .pkp_navigation_primary .dropdown-menu a:hover,
    .pkp_navigation_primary .dropdown-menu a:focus {
        color: var(--alushul-white) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Search dan user menu mobile */

    .pkp_navigation_search_wrapper {
        margin: 0 !important;
        padding: 12px 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .pkp_navigation_search_wrapper a {
        color: var(--alushul-white) !important;
    }

    .pkp_navigation_user_wrapper {
        margin: 0 !important;
        padding: 0 16px 14px 16px !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_user li {
        margin-left: 0 !important;
        padding-left: 0 !important;
        list-style: none !important;
    }

    .pkp_navigation_user a,
    .pkp_navigation_user .profile > a {
        color: var(--alushul-white) !important;
    }

    /* Konten dan sidebar tersusun vertikal */

    .pkp_structure_content.has_sidebar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--alushul-white) !important;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_main {
        order: 1;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        border-right: 0 !important;
    }

    .pkp_structure_content.has_sidebar .pkp_structure_sidebar.left {
        order: 2;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 14px 14px 14px !important;
    }

    .pkp_structure_sidebar.left .pkp_block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

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

/* ==========================================================
    9. PENYESUAIAN KHUSUS UNTUK LAYAR PONSEL
   ========================================================== */

@media (max-width: 767px) {

    /* Hindari jarak antar-kata terlalu renggang */

    body.pkp_page_index .pkp_structure_main p {
        text-align: left !important;
    }

    .pkp_structure_main p {
        line-height: 1.65 !important;
    }

    /* Footer tetap proporsional */

    .pkp_footer_content {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* ==========================================================
    10. HOMEPAGE LAYOUT
   ========================================================== */

.pkp_navigation_user>li:last-child>a {
    margin-top: 5px;
    margin-right: 4px;
    background-color: #1a823ab5 !important;
}

/* Pastikan float-wrap bekerja dengan benar */
.pkp_page_index .homepage_about {
    overflow: hidden;
}

/* Gambar cover float ke kiri, tabel otomatis mengisi sisi kanan */
.pkp_page_index .homepage_image {
    float: left !important;
    margin: 0 16px 10px 0 !important;
}

/* Ukuran gambar disesuaikan */
.pkp_page_index .homepage_image img {
    display: block !important;
    width: 256px !important;
    height: 365px !important;
    /* object-fit: cover !important; */
}

/* Tabel menggunakan lebar otomatis agar menyesuaikan ruang yang tersedia */
.page_index_journal table {
    width: auto !important;
    max-width: 100% !important;
    line-height: 1.8 !important;
}

.pkp_page_index .homepage_about h2 {
    margin-top: -0.714rem;
    margin-bottom: -18px;
}

.pkp_structure_main p,.pkp_structure_main ul {
    margin-top: 8px;
    line-height: 1.9;
    text-align: justify;
}


/* ==========================================================
    11. RESPONSIVE FIX - HOMEPAGE (REVISED)
   ========================================================== */

/* Fix global: height auto */
.pkp_page_index .homepage_image img {
    height: auto !important;
}

/* Fix global: cegah label tabel wrap */
.page_index_journal table td:first-child {
    white-space: nowrap !important;
    vertical-align: top !important;
}
.page_index_journal table td:nth-child(2) {
    white-space: nowrap !important;
    padding: 0 6px !important;
    vertical-align: top !important;
}
.page_index_journal table td:last-child {
    vertical-align: top !important;
    word-break: break-word !important;
}

/* ---- TABLET (768–991px) ---- */
@media (min-width: 768px) and (max-width: 991px) {
    .pkp_page_index .homepage_about {
        gap: 0px 0px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        overflow: visible !important;
    }
    .pkp_page_index .homepage_image {
        margin: 0 !important;
        float: none !important;
        width: 150px !important;
        flex: 0 0 150px !important;
    }
    .pkp_page_index .homepage_image img {
        width: 150px !important;
    }
    .pkp_page_index .homepage_about > table {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .pkp_page_index .homepage_about > p {
        /* flex: 0 0 100% !important;
        width: 100% !important; */
        text-align: justify !important;
    }
}

/* ---- SMALL TABLET / LARGE PHONE (480–767px) ---- */
@media (min-width: 480px) and (max-width: 767px) {
    .pkp_page_index .homepage_about {
        gap: 0px 0px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        overflow: visible !important;
    }
    .pkp_page_index .homepage_image {
        float: none !important;
        flex: 0 0 110px !important;
        width: 110px !important;
        margin: 0 !important;
    }
    .pkp_page_index .homepage_image img {
        width: 110px !important;
    }
    .pkp_page_index .homepage_about > table {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .pkp_page_index .homepage_about > p {
        /* flex: 0 0 100% !important;
        width: 100% !important; */
        text-align: justify !important;
    }
}

/* ---- MOBILE KECIL (<480px) ---- */
@media (max-width: 479px) {
    .pkp_page_index .homepage_image {
        float: none !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin: 0 0 14px 0 !important;
    }
    .pkp_page_index .homepage_image img {
        margin-left: 0;
        width: 150px !important;
    }
    .page_index_journal table {
        width: 100% !important;
    }
    .pkp_page_index .homepage_about > p {
        /* flex: 0 0 100% !important;
        width: 100% !important; */
        text-align: justify !important;
    }
}

/* ==========================================================
    12. PLUGIN FIX - FLAG COUNTER
   ========================================================== */

.counter img {
    height: 218px;
    margin-top: 1px;
    padding-left: 4px;
    max-width: 246px !important;
}