/* =========================================================
   Jurnal Kebijakan Publik dan Pembangunan Daerah
   Base colors preserved:
   Primary   : #1e3a5f
   Accent    : #FF9200
   ========================================================= */

html,
body {
    background-image: url("https://bapperida.ngawikab.go.id/jurnal/index.php/wedyodiningrat/libraryFiles/downloadPublic/6");
}

.pkp_structure_content {
    background: #fff;
}

/* Tidak menampilkan logo PKP */
.pkp_brand_footer {
    display: none;
}

/* ========= Header ========= */
.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pkp_site_name > a {
    padding-top: 0;
    padding-bottom: 0;
}

.pkp_site_name .is_img img {
    max-height: 200px !important;
}

.pkp_site_name_wrapper {
    padding-left: 0;
    padding-right: 0;
}

.pkp_navigation_user_wrapper {
    top: 0;
    right: 0;
    padding-right: 30px;
}

.pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* ========= Article Detail ========= */
.page_title {
    color: #1e3a5f;
}

.name {
    color: #1e3a5f;
}

.obj_article_details .abstract {
    text-align: justify;
}

/* ========= Global Links ========= */
a {
    color: #1e3a5f;
}

a:hover,
a:focus {
    color: #FF9200;
}

/* ========= Buttons / Galley ========= */
.cmp_button_wire,
.obj_galley_link {
    background: #1e3a5f;
    border: 1px solid #1e3a5f;
    color: #fff;
}

/* ========= Article List ========= */
.obj_article_summary {
    border: 1px solid #d9dee5 !important;
    padding: 14px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.obj_article_summary:hover {
    border-color: #b8c4d1 !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.09) !important;
}

/* ========= OJS Blocks ========= */
.pkp_block .title {
    display: block;
    padding: 10px;
    text-align: left;
    background-color: #1e3a5f;
    color: white;
    font-weight: bold;
}

.pkp_block {
    padding: 0 2rem 1rem 2rem !important;
}

.pkp_block#customblock-e-issn {
    padding: 2rem !important;
}

/* =========================================================
   MAIN MENU SIDEBAR
   ========================================================= */

/* Blok utama */
#customblock-main-menu {
    margin: 0 !important;
    padding-top: 0 !important;
}

/* Judul MAIN MENU */
#customblock-main-menu > .title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    background: #1e3a5f !important;
    color: #fff !important;

    border: 0 !important;
    border-bottom: 3px solid #FF9200 !important;

    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Hilangkan jarak bawaan antara title dan content OJS */
#customblock-main-menu > .content {
    margin: 0 !important;
    padding: 0 !important;
}

/* Wrapper menu */
#customblock-main-menu .menu-sidebar {
    margin: 0 !important;
    padding: 0 !important;
    font: 12px Arial, Verdana, sans-serif !important;
}

/* Daftar menu sebagai satu blok utuh */
#customblock-main-menu .menu-sidebar > ul {
    list-style: none !important;

    width: 100% !important;
    box-sizing: border-box !important;

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

    border-left: 1px solid #1e3a5f !important;
    border-right: 1px solid #1e3a5f !important;
    border-bottom: 1px solid #1e3a5f !important;
}

/* Hilangkan semua gap antar-item */
#customblock-main-menu .menu-sidebar > ul > li {
    position: relative !important;

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

    list-style: none !important;
}

/* Item menu */
#customblock-main-menu .menu-sidebar > ul > li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 11px 10px !important;

    background: #F8F8F8 !important;
    color: #1e3a5f !important;

    border: 0 !important;
    border-top: 1px solid #1e3a5f !important;

    text-decoration: none !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    transition:
        background-color .3s ease,
        color .3s ease,
        padding-left .3s ease,
        box-shadow .3s ease !important;
}

/* Item pertama langsung menyatu dengan header */
#customblock-main-menu .menu-sidebar > ul > li:first-child > a {
    border-top: 0 !important;
}

/* Ikon */
#customblock-main-menu .menu-sidebar a .fa {
    color: inherit !important;
}

/* Hover sederhana */
#customblock-main-menu .menu-sidebar > ul > li > a:hover,
#customblock-main-menu .menu-sidebar > ul > li > a:focus {
    background: #e9edf2 !important;
    color: #1e3a5f !important;
    padding-left: 13px !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* =========================================================
   SUBMENU - jika nantinya digunakan
   ========================================================= */

#customblock-main-menu .menu-sidebar ul ul {
    position: absolute !important;
    z-index: 999 !important;

    top: 0 !important;
    left: 100% !important;

    min-width: 180px !important;

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

    visibility: hidden !important;
    opacity: 0 !important;

    background: #fff !important;

    transition:
        opacity .25s ease,
        visibility .25s ease !important;
}

#customblock-main-menu .menu-sidebar li:hover > ul,
#customblock-main-menu .menu-sidebar li:focus-within > ul {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========= Badan / Custom Sidebar ========= */
.badan {
    margin-top: -15px;
}

.badan a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid white;
    background: #F8F8F8;
    text-align: center;
    transition: 0.5s;
    color: black;
}

.badan a:hover,
.badan a:focus {
    color: #1e3a5f !important;
    background: #eef1f4 !important;
    font-weight: normal !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    position: relative;
}

/* ========= Most Read ========= */
.most_read_article {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #1e3a5f;
    background-color: #f8f8f8;
    transition: background-color 0.3s;
}

.most_read_article:hover {
    background-color: #e6e6e6;
}

.most_read_article_title a {
    color: #1e3a5f;
    text-decoration: none;
}

.most_read_article_title a:hover,
.most_read_article_title a:focus {
    color: #FF9200;
}

.most_read_article_journal {
    color: #1e3a5f;
    font-size: 0.9em;
}

.most_read_article_journal .fa-eye {
    margin-right: 5px;
}

h2 {
    color: #1e3a5f;
}

/* ========= Footer ========= */
.pkp_structure_footer_wrapper {
    background-color: #1e3a5f !important;
    border-bottom: 4px solid #FF9200 !important;
}

.pkp_structure_footer,
.pkp_footer_content {
    background-color: #1e3a5f !important;
    color: #FFFFFF !important;
}

.pkp_structure_footer p,
.pkp_structure_footer div,
.pkp_structure_footer span,
.pkp_structure_footer strong,
.pkp_structure_footer li {
    color: #FFFFFF !important;
}

.pkp_structure_footer h1,
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4,
.pkp_structure_footer h5,
.pkp_structure_footer h6 {
    color: #FFFFFF !important;
    margin-top: 0;
    margin-bottom: 10px;
}

.pkp_structure_footer a {
    color: #FFFFFF !important;
    text-decoration: none;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: #FF9200 !important;
    text-decoration: underline;
}

/* ========= Journal Info ========= */
.journal-info-wrapper {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.cover-container {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.journal-cover {
    height: 100%;
    object-fit: contain;
    max-width: 210px;
    display: block;
}

.journal-info-table {
    flex: 1 1 auto;
    background-color: #f8fafc !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
    height: auto;
    border: 1px solid #e1e6eb !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.journal-info-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #d9d9d9;
    line-height: 1.45;
}

.journal-info-table tr:last-child td {
    border-bottom: 0;
}

.journal-info-table td:first-child {
    font-weight: bold;
    width: 25%;
    white-space: nowrap;
}

.journal-info-table a {
    color: #1e3a5f;
    font-weight: bold;
    text-decoration: none;
}

.journal-info-table a:hover,
.journal-info-table a:focus {
    color: #FF9200;
    text-decoration: underline;
}

.journal-info-table p {
    margin: 0 !important;
    padding: 0 !important;
}

.journal-info-table .editor-entry + .editor-entry {
    margin-top: 4px;
}

/* ========= Indexing ========= */
.indexing-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.indexing-card {
    flex: 1 1 180px;
    height: 85px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.indexing-card img {
    display: block;
    width: 160px;
    height: 55px;
    max-width: 100%;
    object-fit: contain;
}

.indexing-card:hover,
.indexing-card:focus {
    border-color: #FF9200;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

/* ========= Typography: Follow OJS Theme ========= */
#journalDescription,
#journalDescription *,
.journal-info-wrapper,
.journal-info-table,
.indexing-list,
.indexing-card,
.editorial-team-wrapper,
.editorial-team-wrapper * {
    font-family: inherit !important;
}

/* ========= Editorial Team / Reviewers ========= */
.editorial-team-wrapper {
    line-height: 1.55;
}

.editorial-team-wrapper h3 {
    color: #1e3a5f;
    border-bottom: 2px solid #FF9200;
    padding-bottom: 5px;
    margin-top: 24px;
    margin-bottom: 8px;
}

.editorial-team-wrapper h3:first-child {
    margin-top: 0;
}

.editorial-team-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.editorial-team-wrapper td {
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
    vertical-align: top;
    line-height: 1.5;
}

.editorial-team-wrapper strong {
    font-weight: 700;
}

.editorial-team-wrapper a {
    color: #1e3a5f;
    text-decoration: none;
    font-weight: 600;
}

.editorial-team-wrapper a:hover,
.editorial-team-wrapper a:focus {
    color: #FF9200;
    text-decoration: underline;
}

.editorial-team-wrapper .editor-id {
    font-size: 0.9em;
}

.editorial-team-wrapper ul {
    margin: 0 0 18px 20px;
    padding-left: 18px;
}

.editorial-team-wrapper li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ========= Page Headings ========= */
.pkp_structure_main .page h1 {
    color: #1e3a5f;
}


/* =========================================================
   Visual Refinements
   ========================================================= */

/* Current Issue / Issue page hierarchy */
.page_index_journal .current_issue > h2,
.page_index_journal .current_issue h2,
.page_issue > h1,
.page_issue .page_title {
    border-bottom: 2px solid #FF9200 !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
}

/* Consistent spacing between major homepage sections */
.page_index_journal .journal-description,
.page_index_journal .homepage_image,
.page_index_journal .current_issue,
.page_index_journal .additional_content {
    margin-bottom: 24px !important;
}

/* Main content heading hierarchy */
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: #1e3a5f !important;
}

.pkp_structure_main h3 {
    margin-top: 24px !important;
    margin-bottom: 10px !important;
}

/* Accessible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #FF9200 !important;
    outline-offset: 2px !important;
}

/* Slightly calmer custom-sidebar/tool presentation */
.badan a {
    box-shadow: none !important;
}

/* ========= Responsive ========= */
@media (max-width: 768px) {

    .journal-info-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .cover-container {
        width: 100%;
        justify-content: center;
    }

    .journal-cover {
        height: auto;
        width: 100%;
        max-width: 210px;
    }

    .journal-info-table td:first-child {
        width: 34%;
        white-space: normal;
    }

    .indexing-card {
        flex: 1 1 140px;
    }
}


/* =========================================================
   PDF Galley
   Tampilkan "PDF (Indonesian)" / "PDF (English)" sebagai PDF
   tanpa mengubah ukuran tombol
   ========================================================= */

a.obj_galley_link.pdf {
    position: relative;
    box-sizing: border-box;

    /* Teks asli tetap ada, tetapi tidak terlihat */
    color: transparent !important;

    /* Penting: cegah "PDF (Indonesian)" turun ke baris kedua */
    white-space: nowrap !important;
    overflow: hidden;

    /* Ukuran tombol seragam */
    width: 82px;

    /* Pertahankan tampilan tombol */
    background: #1e3a5f;
    border: 1px solid #1e3a5f;
}

/* Ikon PDF bawaan OJS */
a.obj_galley_link.pdf::before {
    color: #fff !important;
}

/* Label pengganti */
a.obj_galley_link.pdf::after {
    content: "PDF";
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);

    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Hover */
a.obj_galley_link.pdf:hover,
a.obj_galley_link.pdf:focus {
    background: #FF9200;
    border-color: #FF9200;
}

a.obj_galley_link.pdf:hover::before,
a.obj_galley_link.pdf:focus::before,
a.obj_galley_link.pdf:hover::after,
a.obj_galley_link.pdf:focus::after {
    color: #fff !important;
}

/* =========================================================
   Language Switcher - Minimal
   ========================================================= */

.block_language .content {
    text-align: center !important;
}

.block_language .content ul {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
    padding: 3px !important;

    list-style: none !important;

    background: #ffffff !important;
    border: 1px solid #d9dee5 !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
}

.block_language .content li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.block_language .content li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 34px !important;

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

    border: 1px solid transparent !important;
    border-radius: 4px !important;

    background: transparent !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease !important;
}

/* English */
.block_language .content li.locale_en a::before {
    content: "" !important;
    display: block !important;

    width: 28px !important;
    height: 18px !important;

    background-image: url("https://bapperida.ngawikab.go.id/jurnal/index.php/wedyodiningrat/libraryFiles/downloadPublic/4") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Bahasa Indonesia */
.block_language .content li.locale_id a::before {
    content: "" !important;
    display: block !important;

    width: 28px !important;
    height: 18px !important;

    background-image: url("https://bapperida.ngawikab.go.id/jurnal/index.php/wedyodiningrat/libraryFiles/downloadPublic/5") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Active language */
.block_language .content li.current a {
    background: #f1f4f7 !important;
    border-color: #c7d0da !important;
}

/* Hover inactive language */
.block_language .content li:not(.current) a:hover,
.block_language .content li:not(.current) a:focus {
    background: #f7f8fa !important;
    border-color: #e1e5ea !important;
}

/* =========================================================
   RESPONSIVE JOURNAL HEADER / LOGO
   JKPPD
   ========================================================= */


/* =========================================================
   DESKTOP
   OJS desktop breakpoint: 992px+
   ========================================================= */

@media (min-width: 992px) {

    .pkp_site_name_wrapper {
        height: auto !important;
        max-height: none !important;
    }

    .pkp_site_name {
        position: relative !important;

        left: auto !important;
        right: auto !important;

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

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

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

        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_name > a.is_img {
        display: block !important;

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

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

        line-height: 0 !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;

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

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

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

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


/* =========================================================
   TABLET + MOBILE
   OJS masih menggunakan mobile header di bawah 992px
   ========================================================= */

@media (max-width: 991px) {

    /*
     * JANGAN gunakan height:auto di sini.
     * .pkp_site_name masih position:absolute pada OJS mobile.
     *
     * Tinggi dibuat responsif mengikuti rasio banner 2500x350.
     */
    .pkp_site_name_wrapper {
        position: relative !important;

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

        height: clamp(48px, 14vw, 140px) !important;
        min-height: 48px !important;
        max-height: none !important;

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

        box-sizing: border-box !important;

        overflow: visible !important;
    }

    /*
     * Sisakan area sebelah kiri untuk tombol hamburger OJS.
     * 2.857rem mengikuti lebar nav toggle bawaan OJS.
     */
    .pkp_site_name {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        left: 2.857rem !important;
        right: 8px !important;

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

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

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

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;

        overflow: visible !important;
        white-space: normal !important;
    }

    .pkp_site_name > a.is_img {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

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

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

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

        box-sizing: border-box !important;

        line-height: 0 !important;

        overflow: visible !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;

        /*
         * width:auto + max-width:100% menjaga aspect ratio
         * tanpa membuat horizontal overflow.
         */
        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 100% !important;

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

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

        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
     * Pusatkan hamburger secara vertikal mengikuti
     * tinggi header yang sekarang responsif.
     */
    .pkp_site_nav_toggle {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}


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

@media (max-width: 480px) {

    .pkp_site_name {
        right: 5px !important;
        padding-left: 5px !important;
    }

    .pkp_site_name > a.is_img {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

/* =========================================================
   JKPPD HORIZONTAL TABLE OF CONTENTS
   ========================================================= */

.jkppd-toc {
    margin: 18px 0 28px 0 !important;
    padding: 14px 16px 16px 16px !important;

    background: #f8fafc !important;

    border: 1px solid #dce3ea !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
}


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

.jkppd-toc-title {
    margin: 0 0 11px 0 !important;
    padding: 0 !important;

    color: #1e3a5f !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


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

.jkppd-toc-buttons {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: stretch !important;

    gap: 8px !important;

    width: 100% !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.jkppd-toc-button {
    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    min-height: 38px !important;

    padding: 7px 11px !important;

    background: #ffffff !important;

    border: 1px solid #ccd5df !important;
    border-radius: 5px !important;

    color: #1e3a5f !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}


/* =========================================================
   NUMBER
   ========================================================= */

.jkppd-toc-number {
    display: inline-flex !important;

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

    flex: 0 0 auto !important;

    width: 21px !important;
    height: 21px !important;

    background: #eef2f6 !important;

    border-radius: 50% !important;

    color: #1e3a5f !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.jkppd-toc-button:hover,
.jkppd-toc-button:focus {
    background: #ffffff !important;

    border-color: #FF9200 !important;

    color: #1e3a5f !important;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.08) !important;

    transform:
        translateY(-1px) !important;

    text-decoration: none !important;
}

.jkppd-toc-button:hover
.jkppd-toc-number,
.jkppd-toc-button:focus
.jkppd-toc-number {
    background: #FF9200 !important;
    color: #ffffff !important;
}


/* =========================================================
   ACTIVE SECTION
   ========================================================= */

.jkppd-toc-button.active {
    background: #1e3a5f !important;

    border-color: #1e3a5f !important;

    color: #ffffff !important;

    box-shadow:
        0 2px 6px
        rgba(30, 58, 95, 0.18) !important;
}

.jkppd-toc-button.active
.jkppd-toc-number {
    background: #FF9200 !important;
    color: #ffffff !important;
}


/* =========================================================
   SCROLL TARGET
   ========================================================= */

.pkp_structure_main h3[id] {
    scroll-margin-top: 90px !important;
}


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

@media (max-width: 767px) {

    .jkppd-toc {
        margin:
            15px 0 24px 0 !important;

        padding:
            12px !important;
    }

    .jkppd-toc-title {
        font-size: 12px !important;
    }

    /*
     * Mobile tetap horizontal.
     * Jika tombol banyak, pengguna dapat geser.
     */
    .jkppd-toc-buttons {
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding-bottom: 5px !important;

        scrollbar-width: thin;
    }

    .jkppd-toc-button {
        flex: 0 0 auto !important;

        max-width: 220px !important;

        font-size: 11px !important;
    }
}

/* =========================================================
   JKPPD BACK TO TOP
   ========================================================= */

#jkppd-back-to-top {
    position: fixed !important;

    right: 22px !important;
    bottom: 22px !important;

    z-index: 9999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

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

    background: #1e3a5f !important;
    color: #ffffff !important;

    border: 1px solid #1e3a5f !important;
    border-radius: 50% !important;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.18) !important;

    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateY(10px) !important;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}


/* =========================================================
   VISIBLE
   ========================================================= */

#jkppd-back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0) !important;
}


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

#jkppd-back-to-top:hover,
#jkppd-back-to-top:focus {
    background: #FF9200 !important;
    border-color: #FF9200 !important;

    color: #ffffff !important;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.22) !important;

    transform:
        translateY(-2px) !important;

    outline: none !important;
}


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

#jkppd-back-to-top span {
    display: block !important;

    margin-top: -2px !important;

    color: inherit !important;

    line-height: 1 !important;
}


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

@media (max-width: 767px) {

    #jkppd-back-to-top {
        right: 15px !important;
        bottom: 15px !important;

        width: 38px !important;
        height: 38px !important;

        font-size: 20px !important;
    }
}