/* ============================================================
   ABDI JOURNAL — CUSTOM STYLESHEET (DROPDOWN + FOOTER 2026)
   1. Background BODY tetap terlihat di tepi kotak OJS
   2. Navigasi utama satu baris pada desktop
   3. Banner tepat di bawah navigasi, tanpa jarak kosong
   4. Search dan profil berwarna putih di sisi kanan
   ============================================================ */

:root {
    --abdi-green: #075b26;
    --abdi-white: #ffffff;
    --abdi-page-gutter: 28px;
}

/* BACKGROUND HALAMAN (TIDAK DIHAPUS) */
body {
    background-image: url('https://drive.pastibisa.app/1720700113_668fccd169d61.jpg');
    background-repeat: repeat;
    background-size: 500px 500px;
    background-color: #075b26;
    margin: 0;
    padding: 24px var(--abdi-page-gutter) 0;
    box-sizing: border-box;
}

/* JARAK TEPI DIBUAT DI LUAR KOTAK OJS, BUKAN DI DALAM HEADER */
.pkp_structure_page {
    width: 100% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #fff;
    box-sizing: border-box;
    overflow: visible;
}

/* HILANGKAN TINGGI HEADER LAMA YANG MENIMBULKAN RUANG PUTIH */
.pkp_structure_head {
    background: var(--abdi-green) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
}

.pkp_head_wrapper {
    display: flow-root;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: transparent !important;
}

/* Nama jurnal tersembunyi karena sudah menjadi bagian banner gambar */
.pkp_site_name,
.pkp_site_name_wrapper {
    display: none !important;
}

/* NAVIGASI: BUKAN DUA BARIS PADA DESKTOP */
@media (min-width: 992px) {
    .pkp_site_nav_menu {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 12px;
        width: 100% !important;
        max-width: none !important;
        min-height: 64px;
        margin: 0 !important;
        padding: 0 22px !important;
        box-sizing: border-box;
        background: var(--abdi-green) !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 19px 10px !important;
        font-size: clamp(12px, 0.92vw, 16px) !important;
    }

    /* Tempat Search/profil yang bisa berada di wrapper berbeda antar tema OJS */
    .pkp_navigation_user_wrapper,
    .pkp_navigation_user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        float: none !important;
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_user > li {
        float: none !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_search_wrapper,
    .pkp_navigation_search {
        flex: 0 0 auto;
        margin-left: auto !important;
        white-space: nowrap;
    }
}

/* WARNA NAVIGASI + SEARCH + PROFIL */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    background-color: var(--abdi-green) !important;
}

.pkp_site_nav_menu a,
.pkp_site_nav_menu a:link,
.pkp_site_nav_menu a:visited,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_search a,
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper .pkp_search,
.pkp_navigation_search_wrapper .pkp_search button {
    color: var(--abdi-white) !important;
}

.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_user > li > a:hover {
    color: #e7f6e9 !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* BANNER: penuh selebar kotak OJS, tanpa bidang putih kosong.
   Rasio 3.52:1 berdasarkan banner pada screenshot pengguna.
   Ubah --abdi-banner-ratio jika dimensi gambar asli berbeda. */
.pkp_head_wrapper::after {
    content: "";
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    aspect-ratio: 3.52 / 1;
    margin: 0 !important;
    padding: 0 !important;
    background: url("https://drive.pastibisa.app/16_Han9qkCtTApnfZHYWvsdjolxtm09emte19XM3X8Z.png") center center / 100% 100% no-repeat;
}

/* Hapus jarak tambahan dari elemen setelah navigasi */
.pkp_structure_head .pkp_head_wrapper > .pkp_site_nav_menu,
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_primary_row {
    margin-bottom: 0 !important;
}

/* MOBILE: pakai perilaku menu OJS agar hamburger/dropdown tetap bekerja */
@media (max-width: 991px) {
    :root { --abdi-page-gutter: 10px; }
    body { padding-top: 10px; }
    .pkp_site_nav_menu { background: var(--abdi-green) !important; }
    .pkp_head_wrapper::after { aspect-ratio: 4.8 / 1; }
}

/* ============================================================
   CSS LAMA ABDI — TETAP DIPERTAHANKAN
   ============================================================ */
.hover {
    width: 100%;
    border-collapse: collapse;
}
.hover th {
    height: 30px;
    background: #FFF8DC;
    color: #191970;
}
.hover td {
    height: 30px;
    padding-top: 3px;
    vertical-align: middle;
    border-bottom: 1px solid #ffffff;
    text-align: center;
}
.hover td a {
    width: 100%;
    display: block;
}
.hover tr {
    background: #FFF8DC;
    color: black;
}
.hover tr:hover { background-color: #FFF8DC; }
.hover tr a { color: black; }
.hover a:hover { color: navy; }

.obj_article_summary { background-color: white; }
.obj_article_summary:hover {
    background-color: #98FB98;
    border: none;
}

.pkp_brand_footer { display: none; }

/* Rata kanan-kiri: Abstract, How to Cite, References */
.obj_article_details .item.abstract .value,
.obj_article_details .item.abstract .value p,
.obj_article_details .item.citation .value,
.obj_article_details .item.citation .csl-entry,
#citationOutput,
#citationOutput .csl-entry,
.obj_article_details .item.references .value,
.obj_article_details .item.references .value p {
    text-align: justify;
}
.obj_article_details .item.references .value,
#citationOutput { overflow-wrap: anywhere; }

.obj_article_details .item.abstract,
.obj_article_details .item.abstract p,
.obj_article_details .item.abstract div,
.obj_article_details .item.abstract span {
    text-align: justify !important;
}
.obj_article_details .item.abstract > h2.label {
    text-align: left !important;
}


/* ============================================================
   REVISI 13 NOV 2026 — DROPDOWN MENGIKUTI TEKS PANJANG
   ============================================================ */
@media (min-width: 992px) {
    /* Biarkan menu turun ke luar header tanpa memotong dropdown */
    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_nav_menu,
    .pkp_navigation_primary,
    .pkp_navigation_primary > li {
        overflow: visible !important;
    }

    .pkp_structure_head { position: relative; z-index: 20; }
    .pkp_navigation_primary > li { position: relative; }

    /* Dropdown menyesuaikan tulisan; tidak memakai lebar tetap 250px */
    .pkp_navigation_primary > li > ul,
    .pkp_navigation_primary > li > .dropdown-menu,
    .pkp_navigation_primary .dropdown-menu {
        width: max-content !important;
        min-width: 100% !important;
        max-width: min(440px, calc(100vw - 60px)) !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        padding: 0 !important;
        background: #075b26 !important;
        box-shadow: 0 8px 22px rgba(0, 40, 17, .2);
    }

    .pkp_navigation_primary > li > ul > li,
    .pkp_navigation_primary .dropdown-menu > li {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pkp_navigation_primary > li > ul > li > a,
    .pkp_navigation_primary .dropdown-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 13px 16px !important;
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .pkp_navigation_primary > li > ul > li > a:hover,
    .pkp_navigation_primary > li > ul > li > a:focus {
        background: #0b7130 !important;
    }
}


/* ============================================================
   ABDI JOURNAL — FOOTER MODERN + PERBAIKAN RUANG KOSONG
   Versi 14 November 2026
   Catatan: .abdi-modern-footer hanya mengatur HTML dengan class tersebut.
   ============================================================ */

/* Kotak putih OJS tetap terpusat; motif body tetap terlihat di luarnya. */
@media (min-width: 992px) {
    .pkp_structure_page {
        width: 100% !important;
        max-width: 1360px !important;
    }
}

/* Hilangkan ruang putih internal antara navigasi dan banner */
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_nav_menu { margin-bottom: 0 !important; }
.pkp_head_wrapper::after { margin-top: 0 !important; }

/* Footer mengikuti lebar kotak OJS, tidak menambah padding kanan-kiri besar */
.pkp_structure_footer {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #053b1b;
    border: 0;
    box-sizing: border-box;
}
.pkp_footer_content {
    width: 100%;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}
.pkp_structure_footer .pkp_brand_footer { display: none !important; }

/* Fallback styling untuk footer OJS lama jika HTML modern belum dipasang */
.pkp_footer_content:not(:has(.abdi-modern-footer)) {
    padding: 20px 24px !important;
    background: #f4f7f4;
    color: #193b28;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.pkp_footer_content:not(:has(.abdi-modern-footer)) img {
    max-width: 180px;
    height: auto;
}
.pkp_footer_content:not(:has(.abdi-modern-footer)) p { margin: 0 0 6px; }

/* Styling footer modern yang diminta */
.abdi-modern-footer {
    background: linear-gradient(135deg, #053b1b 0%, #075b26 100%);
    color: #e2f0e5;
    padding: 24px 24px;
    border-top: 4px solid #0b7130;
    border-radius: 0 0 8px 8px;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}
.abdi-modern-footer, .abdi-modern-footer * { box-sizing: border-box; }
.abdi-modern-footer .footer-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}
.abdi-modern-footer .footer-qr-col {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}
.abdi-modern-footer .qr-card {
    display: block;
    background: #fff;
    padding: 9px;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.abdi-modern-footer .qr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
}
.abdi-modern-footer .qr-card img {
    width: 130px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
.abdi-modern-footer .qr-label {
    display: block;
    margin-top: 6px;
    color: #075b26;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.abdi-modern-footer .footer-info-col { flex: 1 1 350px; min-width: 0; }
.abdi-modern-footer .footer-journal-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.abdi-modern-footer .footer-meta {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
}
.abdi-modern-footer .footer-meta p { margin: 2px 0; color: #d1ebd6; }
.abdi-modern-footer .footer-license-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(0,0,0,.15);
    padding: 8px 11px;
    border-radius: 6px;
    font-size: 12.5px;
    color: #fff;
    margin-bottom: 10px;
}
.abdi-modern-footer .footer-license-box img {
    max-width: 90px;
    height: auto;
    opacity: .9;
    transition: opacity .2s;
}
.abdi-modern-footer .footer-license-box img:hover { opacity: 1; }
.abdi-modern-footer .footer-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}
.abdi-modern-footer .stats-link { color: #79f2a4 !important; font-weight: 600; }
.abdi-modern-footer a:not(.qr-card) {
    color: #fff;
    text-decoration: none;
    transition: color .2s ease;
    overflow-wrap: anywhere;
}
.abdi-modern-footer a:not(.qr-card):hover,
.abdi-modern-footer a:not(.qr-card):focus {
    color: #79f2a4 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tidak mengganggu responsivitas menu bawaan OJS */
@media (max-width: 991px) {
    .pkp_structure_page { width: 100% !important; }
    .pkp_head_wrapper::after { aspect-ratio: 3.52 / 1; }
}
@media (max-width: 768px) {
    .abdi-modern-footer { padding: 22px 15px; }
    .abdi-modern-footer .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .abdi-modern-footer .footer-info-col { flex: 1 1 auto; width: 100%; }
    .abdi-modern-footer .footer-license-box,
    .abdi-modern-footer .footer-stats { justify-content: center; }
    .abdi-modern-footer .footer-journal-title { border-bottom: none; }
    .pkp_footer_content:not(:has(.abdi-modern-footer)) { padding: 16px !important; }
}

/* ============================================================
   ABDI JOURNAL - REVISI LEBAR 1150 PX & BANNER FULL WIDTH
   Gambar tetap proporsional, kotak gambar mengikuti rasio 3.52:1.
   ============================================================ */
:root {
    --abdi-max-site-width: 1150px;
    --abdi-banner-ratio: 3.52 / 1;
}

/* Seluruh kotak OJS maksimal 1150px, motif body tetap di luar */
.pkp_structure_page {
    width: min(100%, var(--abdi-max-site-width)) !important;
    max-width: var(--abdi-max-site-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Navigasi melekat langsung pada banner */
.pkp_structure_head,
.pkp_head_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
}
.pkp_head_wrapper {
    display: flow-root !important;
    width: 100% !important;
    max-width: none !important;
    background-color: #075b26 !important;
}
.pkp_site_nav_menu {
    margin: 0 !important;
    border: 0 !important;
}
.pkp_site_name,
.pkp_site_name_wrapper {
    display: none !important;
}

/* Banner mengikuti lebar kotak OJS, tidak mengecil di tengah.
   Rasio 3.52:1 sesuai perbandingan visual gambar sebelumnya.
   Jika rasio PNG asli berbeda, sesuaikan variabel --abdi-banner-ratio. */
.pkp_head_wrapper::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--abdi-banner-ratio) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: #ffffff !important;
    background-image: url("https://drive.pastibisa.app/16_Han9qkCtTApnfZHYWvsdjolxtm09emte19XM3X8Z.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% auto !important;
}
.pkp_structure_content { margin-top: 0 !important; }

@media (min-width: 992px) {
    .pkp_site_nav_menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 58px !important;
        padding: 0 12px !important;
        gap: 4px !important;
    }
    .pkp_navigation_primary > li > a {
        font-size: 12px !important;
        padding: 16px 8px !important;
    }
    .pkp_navigation_search_wrapper,
    .pkp_navigation_user_wrapper { flex-shrink: 0 !important; }
}

@media (max-width: 991px) {
    .pkp_structure_page { width: 100% !important; }
    .pkp_head_wrapper::after {
        aspect-ratio: var(--abdi-banner-ratio) !important;
        background-size: 100% auto !important;
    }
}
@media (max-width: 560px) {
    body { padding-left: 8px !important; padding-right: 8px !important; }
}


/* ============================================================
   FINAL FIX — HAPUS CELAH PUTIH NAVIGASI KE BANNER
   Koreksi 24px pada posisi elemen banner.
   Tidak mengubah rasio banner, lebar OJS, atau footer.
   ============================================================ */
@media (min-width: 992px) {
    .pkp_structure_head .pkp_site_nav_menu {
        position: relative !important;
        z-index: 3 !important;
        margin-bottom: 0 !important;
    }

    .pkp_structure_head .pkp_head_wrapper::after {
        margin-top: -24px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Cegah jarak tambahan dari wrapper header OJS */
.pkp_structure_head,
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_nav_menu {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   ABDI TOOLS — FIXED ARROWS + 4 DOT INDICATORS (CSS ONLY)
   HTML sidebar wajib menggunakan radio & label versi baru.
   ============================================================ */
.abdi-tools-carousel,
.abdi-tools-carousel * { box-sizing: border-box; }
.abdi-tools-carousel {
    width: 100%; max-width: 100%; min-width: 0;
    background: #fff; font-family: inherit;
}
.abdi-tools-carousel .abdi-tools-heading {
    background: #00600b !important;
    color: #fff !important;
    text-align: center;
    font-size: 20px; font-weight: 700;
    padding: 9px 12px !important;
    line-height: 1.3;
    margin: 0 0 8px !important;
}
/* Radio input disembunyikan visual, tetapi tetap dapat difokuskan */
.abdi-tools-carousel .abdi-tools-radio {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; clip-path: inset(50%);
}
.abdi-tools-carousel .abdi-tools-stage {
    position: relative; width: 100%; height: 156px;
    background: #fff;
}
/* Logo bergantian, navigasi panah selalu di koordinat yang sama */
.abdi-tools-carousel .abdi-tools-slide {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    padding: 12px 45px;
}
.abdi-tools-carousel .abdi-tools-slide img {
    display: block; max-width: 100% !important;
    width: auto !important; height: auto !important;
    max-height: 112px !important;
    object-fit: contain;
    margin: auto !important;
}
.abdi-tools-carousel .abdi-tools-arrow {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: #176235;
    color: #fff !important;
    font: bold 25px/1 Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease;
}
.abdi-tools-carousel .abdi-tools-prev { left: 5px; }
.abdi-tools-carousel .abdi-tools-next { right: 5px; }
.abdi-tools-carousel .abdi-tools-arrow:hover,
.abdi-tools-carousel .abdi-tools-arrow:focus-visible {
    background: #0a853b;
}
/* Hanya slide aktif serta panah miliknya yang ditampilkan */
.abdi-tools-carousel #abdi-tool-select-1:checked ~ .abdi-tools-stage .abdi-tools-slide-1,
.abdi-tools-carousel #abdi-tool-select-2:checked ~ .abdi-tools-stage .abdi-tools-slide-2,
.abdi-tools-carousel #abdi-tool-select-3:checked ~ .abdi-tools-stage .abdi-tools-slide-3,
.abdi-tools-carousel #abdi-tool-select-4:checked ~ .abdi-tools-stage .abdi-tools-slide-4 {
    display: flex;
}
.abdi-tools-carousel .abdi-tools-dots {
    display: flex; justify-content: center; align-items: center;
    gap: 9px; padding: 4px 0 12px;
}
.abdi-tools-carousel .abdi-tools-dot {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; background: #bdc9c0;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.abdi-tools-carousel #abdi-tool-select-1:checked ~ .abdi-tools-dots label[for="abdi-tool-select-1"],
.abdi-tools-carousel #abdi-tool-select-2:checked ~ .abdi-tools-dots label[for="abdi-tool-select-2"],
.abdi-tools-carousel #abdi-tool-select-3:checked ~ .abdi-tools-dots label[for="abdi-tool-select-3"],
.abdi-tools-carousel #abdi-tool-select-4:checked ~ .abdi-tools-dots label[for="abdi-tool-select-4"] {
    background: #00600b;
    transform: scale(1.3);
}
.abdi-tools-carousel:focus-within .abdi-tools-radio:focus-visible ~ .abdi-tools-stage {
    outline: 2px solid #0a853b;
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .abdi-tools-carousel .abdi-tools-stage { height: 135px; }
    .abdi-tools-carousel .abdi-tools-slide img { max-height: 95px !important; }
}