/* =====================================================================
   JIPCF: Journal of Islamic Pedagogy and Character Formation
   CSS RESPONSIF (override tema bawaan OJS 3.3) - palet emas, krem, cokelat, biru langit (sesuai cover)
   ---------------------------------------------------------------------
   Cara pakai:
   OJS > Settings > Website > Appearance > Advanced > Journal Style Sheet
   Upload file ini MENGGANTIKAN stylesheet lama. File ini hanya berisi
   override, jadi tidak perlu lagi menyalin seluruh CSS tema bawaan.

   Acuan struktur: Ingenium Journal of Science, Technology and Business
   (kartu halaman fluid, header/menu fleksibel, sidebar bergaya,
   layout artikel yang menyesuaikan lebar layar).

   Breakpoint mengikuti tema OJS: 480 / 768 / 992 / 1200 px.
   ===================================================================== */


/* =====================================================================
   1. VARIABEL WARNA & FONT (ubah di sini untuk ganti identitas visual)
   ===================================================================== */
:root {
    --primary-color: #4a2a0f;      /* cokelat tua (teks pada pita/judul) */
    --secondary-color: #a8650a;    /* amber (tombol) */
    --accent-color: #f0b429;       /* emas cerah */
    --mint-color: #fbefcf;         /* krem */
    --link-color: #8a4d06;
    --link-hover-color: #b34a1a;
    --text-color: #33281e;
    --border-color: #e7dcc2;
    --page-bg: #f4e9d0;
    --sky-color: #a9bccd;          /* biru langit (awan/daun pada cover) */

    --gradient-primary: linear-gradient(135deg, #6b3f12 0%, #2b1707 100%);
    --gradient-secondary: linear-gradient(135deg, #b87710 0%, #8a4d06 100%);
    --gradient-mint: linear-gradient(135deg, #fdf3d6 0%, #f1d58a 100%);
    --gradient-nav: linear-gradient(90deg, #4a2a0f 0%, #a8650a 100%);
    --gradient-cover: linear-gradient(135deg, #6b3f12 0%, #4a2a0f 60%, #2b1707 100%);

    --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
                 "Helvetica Neue", Arial, "Noto Naskh Arabic", "Traditional Arabic", sans-serif;
    --font-heading: var(--font-body);
}


/* =====================================================================
   2. DASAR
   ===================================================================== */
html {
    background: var(--page-bg);
}

body {
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-color);
    overflow-x: hidden;               /* jaring pengaman: tidak ada scroll samping */
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--link-hover-color);
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    overflow-wrap: break-word;
}

/* URL / DOI panjang tanpa spasi harus bisa terpotong, bukan melebar */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_footer_content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pkp_structure_main h1 { font-size: clamp(20px, 4.2vw, 26px); line-height: 1.3; margin: 0 0 1rem; }
.pkp_structure_main h2 { font-size: clamp(18px, 3.4vw, 21px); line-height: 1.35; margin: 1.6rem 0 .8rem; }
.pkp_structure_main h3 { font-size: 17px; line-height: 1.4; margin: 1.4rem 0 .6rem; }
.pkp_structure_main h4 { margin: 1.2rem 0 .5rem; }

.pkp_structure_main p,
.pkp_structure_main ul,
.pkp_structure_main ol {
    font-size: 16px;
    line-height: 1.75;
}
.pkp_structure_main p { margin: 0 0 1rem; text-align: justify; }
.pkp_structure_main p:last-child { margin-bottom: 0; }

/* Teks campuran Arab / Latin: arah paragraf mengikuti huruf pertama */
.obj_article_summary > .title,
.obj_article_details .page_title,
.obj_article_details .abstract p,
.obj_article_details .references p,
.csl-entry {
    unicode-bidi: plaintext;
}
.obj_article_details .page_title { text-align: start; }

/* Gambar, media, kode: tidak boleh melebihi lebar kolom */
.pkp_structure_main img { max-width: 100% !important; height: auto !important; }
iframe, video, embed, object { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: break-word; }
pre { overflow-x: auto; max-width: 100%; }

/* Tabel di halaman statis (About, info jurnal, dll.) */
.pkp_structure_main table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.pkp_structure_main table td,
.pkp_structure_main table th {
    padding: .45rem .6rem;
    vertical-align: top;
    overflow-wrap: anywhere;          /* isi sel panjang (URL, email) boleh terpotong */
}
/* Sel pertama = label ("Journal title", "Abbreviation"): jangan dipotong di tengah kata */
.pkp_structure_main table td:first-child,
.pkp_structure_main table th:first-child {
    overflow-wrap: normal;
    word-break: normal;
}
.pkp_structure_main table td p { margin: 0; text-align: left; }

/* Fokus keyboard tetap terlihat */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}


/* =====================================================================
   3. KARTU HALAMAN (fluid, selalu punya margin tepi)
   ===================================================================== */
.pkp_structure_page {
    width: calc(100% - 32px);
    max-width: 1160px;
    margin: 20px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(58, 34, 10, .25);
}

/* Hapus lebar tetap bawaan tema (728 / 952 / 1160px) */
.pkp_site_name_wrapper,
.pkp_navigation_primary_wrapper,
.has_site_logo .pkp_navigation_primary_wrapper,
.pkp_navigation_user,
.pkp_search_mobile,
.pkp_structure_content,
.pkp_structure_footer,
.has_site_logo .pkp_head_wrapper {
    width: 100%;
    max-width: none;
}
.has_site_logo .pkp_head_wrapper { padding-left: 0; padding-right: 0; }

.pkp_structure_head {
    background: var(--gradient-primary);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}


/* =====================================================================
   4. HEADER: logo / banner
   ===================================================================== */
.pkp_site_name,
.pkp_site_name a {
    color: #fff !important;
}
.pkp_site_name {
    margin: 0;
}
.pkp_site_name .is_img {
    display: block;
    margin: 0;
    padding: 0;
}
.pkp_site_name .is_img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 auto;
}
.pkp_site_name .is_text {
    display: block;
    padding: .8rem 1rem;
    line-height: 1.4;
    overflow-wrap: break-word;
}


/* =====================================================================
   5. NAVIGASI: tampilan umum
   ===================================================================== */
.pkp_site_nav_menu a { color: #fff; }

.pkp_navigation_user .task_count {
    background: rgba(255, 255, 255, .18);
}

/* Dropdown (gaya Ingenium: latar gelap, hover krem) */
.pkp_nav_list ul {
    max-width: 90vw;
}


/* =====================================================================
   6. NAVIGASI MOBILE / TABLET (< 992px): tombol hamburger
   ===================================================================== */
@media (max-width: 991px) {

    /* Bar atas berisi tombol hamburger, banner di bawahnya */
    .pkp_site_name_wrapper {
        height: auto;
        padding: 2.857rem 0 0;
        background: var(--gradient-primary);
    }
    .pkp_site_name {
        position: static;
        left: auto;
        right: auto;
        padding: 0;
        overflow: visible;
        white-space: normal;
        font-size: 1rem;
        background: transparent;
    }
    .pkp_site_nav_toggle {
        background: rgba(255, 255, 255, .06);
        border-radius: 8px 0 0 0;
    }

    /* Menu terbuka tepat di bawah bar hamburger */
    .pkp_site_nav_menu {
        top: 2.857rem;
        max-height: calc(100vh - 2.857rem);
        overflow-y: auto;
        padding: .5rem 1rem 1rem;
        background: var(--primary-color);
        box-shadow: 0 10px 18px rgba(0, 0, 0, .3);
    }
    .pkp_site_nav_menu a {
        display: block;
        padding: .7rem .25rem;        /* area sentuh min. ~44px */
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .pkp_site_nav_menu a:hover,
    .pkp_site_nav_menu a:focus {
        background: rgba(255, 255, 255, .1);
        text-decoration: none;
    }
    .pkp_site_nav_menu ul ul {
        padding-left: 1rem;
    }
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_user_wrapper {
        padding: 0;
    }
    .pkp_navigation_search_wrapper {
        border-top: 0;
        margin-top: .5rem;
        padding-top: 0;
    }
}


/* =====================================================================
   7. NAVIGASI DESKTOP (>= 992px)
   ===================================================================== */
@media (min-width: 992px) {

    /* Strip Login/Register di atas banner DISEMBUNYIKAN; banner naik ke paling atas.
       (Di HP, tautan Login/Register tetap ada di dalam menu hamburger.) */
    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper {
        padding-top: 0;
    }
    .pkp_site_name .is_img img {
        border-radius: 8px 8px 0 0;
    }

    .pkp_navigation_user_wrapper {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        padding: .2rem 1rem 0 0;
        text-align: right;
    }
    .pkp_navigation_user {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .25rem;
        padding-right: 0;
    }
    .pkp_navigation_user > li > a {
        padding: .3rem .85rem;
        border-radius: 4px;
        background: rgba(255, 255, 255, .12);
        font-size: 13px;
    }
    .pkp_navigation_user > li > a:hover {
        background: var(--accent-color);
        color: var(--primary-color);
    }
    .pkp_navigation_user > li:last-child > a {
        margin-right: 0;
    }

    /* Bilah menu utama */
    .pkp_site_nav_menu {
        width: 100%;
        background: var(--gradient-nav);
    }
    .pkp_navigation_primary_row {
        display: block;
        background: transparent;
    }
    .pkp_navigation_primary_wrapper,
    .has_site_logo .pkp_navigation_primary_wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 1rem;
        background: transparent;
    }
    .pkp_navigation_primary_wrapper::before,
    .pkp_navigation_primary_wrapper::after {
        display: none;
    }
    .pkp_navigation_primary {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
        max-width: none;
        text-align: left;
        margin: 0;
    }
    .pkp_navigation_primary > li:first-child a { margin-left: .5em; }
    .pkp_navigation_primary > li > a {
        font-weight: 600;
        color: #fff;
    }
    .pkp_navigation_primary > li > a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .1);
        border-color: var(--accent-color);
    }
    .pkp_navigation_search_wrapper {
        float: none;
        margin-left: auto;
    }
    .pkp_navigation_search_wrapper a:hover {
        border-color: var(--accent-color);
    }

    /* Dropdown */
    .pkp_nav_list ul {
        background: var(--primary-color);
        border-radius: 0 0 6px 6px;
    }
    .pkp_nav_list ul a {
        color: #fff;
        background: var(--primary-color);
    }
    .pkp_nav_list ul a:hover,
    .pkp_nav_list ul a:focus {
        background: var(--mint-color);
        border-color: var(--accent-color);
        color: var(--primary-color);
    }
}


/* =====================================================================
   8. LAYOUT KONTEN + SIDEBAR
   ===================================================================== */
.pkp_structure_content {
    padding-left: 0;
    padding-right: 0;
}

/* Garis pemisah bawaan (posisi px tetap) dimatikan, diganti border */
@media (min-width: 768px) {
    .pkp_structure_main::before,
    .pkp_structure_main::after {
        display: none !important;
        content: none !important;
    }
}

/* Mobile kecil: gutter tepi kecil agar teks lega */
@media (max-width: 479px) {
    .pkp_structure_content {
        padding-left: .286rem;
        padding-right: .286rem;
    }
}

/* Tablet & HP: sidebar di bawah konten, blok disusun grid otomatis */
@media (max-width: 991px) {
    .pkp_structure_sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
        align-items: start;
        padding: 0 1rem 1.5rem;
    }
}

/* Desktop: dua kolom fluid (konten + sidebar 300px) */
@media (min-width: 992px) {
    .pkp_structure_content {
        padding-top: 1.25rem;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    .pkp_structure_content::before,
    .pkp_structure_content::after {
        display: none;
    }
    .pkp_structure_main {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;                   /* kunci: cegah konten mendorong sidebar */
        border: 0 !important;           /* tanpa garis pemisah vertikal */
        padding-bottom: 3rem;
    }
    .pkp_structure_main:first-child:last-child {
        margin: 0;
        border: 0;
    }
    .pkp_structure_sidebar {
        float: none;
        flex: 0 0 300px;
        width: 300px;
        padding: 0 1.25rem 1.5rem;
    }
}


/* =====================================================================
   9. BLOK SIDEBAR
   ===================================================================== */
.pkp_structure_sidebar .pkp_block {
    padding: 0;
    margin: 0 0 16px;
    background: transparent;
    border: 0;                        /* tanpa bingkai di sekeliling blok */
    border-radius: 0;
    overflow: hidden;
    font-size: 14px;
}
.pkp_structure_sidebar .pkp_block .title:not(.pkp_screen_reader) {
    display: block;
    margin: 0 0 8px;
    padding: 8px 12px;
    background: var(--gradient-primary);
    border-bottom: 2px solid var(--accent-color);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
}
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .pkp_block > p,
.pkp_structure_sidebar .pkp_block > ul {
    padding: 4px 12px 10px;
}
.pkp_structure_sidebar .pkp_block .content ul li {
    padding: .3rem 0;
}
.pkp_structure_sidebar .pkp_block img {
    max-width: 100%;
    height: auto;
}

/* Blok kustom berisi menu (Journal Policies, People, Submission, dll.) */
.pkp_block.block_custom p.menu_item,
.pkp_block.block_custom p {
    margin: 0;
}
.pkp_block.block_custom p.menu_item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background .2s ease, padding .2s ease;
}
.pkp_block.block_custom p.menu_item a:hover {
    padding-left: 18px;
    background: var(--gradient-mint);
    color: var(--primary-color);
}
.pkp_block.block_custom p.menu_item a .fa {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--secondary-color);
}

/* Tombol "Make a Submission" */
.pkp_structure_sidebar .block_make_submission {
    border: 0;
    background: transparent;
    overflow: visible;
}
.pkp_structure_sidebar .block_make_submission a {
    display: block;
    border: 0;
    border-radius: 6px;
    background: var(--gradient-secondary);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    line-height: 2.8;
    text-align: center;
    text-transform: uppercase;
}
.pkp_structure_sidebar .block_make_submission a:hover {
    background: var(--gradient-mint);
    color: var(--primary-color);
}


/* =====================================================================
   10. BERANDA
   ===================================================================== */
/* Urutan beranda: Additional Content -> Pengumuman -> Current Issue
   (elemen lain, mis. gambar beranda, tetap di paling atas) */
.page_index_journal {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.page_index_journal .additional_content { order: 1; padding-bottom: 1rem; }
.page_index_journal .cmp_announcements  { order: 2; }
.page_index_journal .current_issue      { order: 3; margin-top: 1.5rem; }

.pkp_page_index .current_issue > h2 {
    margin: 0 0 .5rem;
    padding: 4px 12px;
    background: var(--gradient-primary);
    border-radius: 5px;
    color: #fff;
    text-align: center;
}
.pkp_page_index .current_issue .current_issue_title {
    margin: 12px 0;
    color: var(--primary-color);
}
.pkp_page_index .additional_content {
    border-top: 0;
    padding-top: 0;
}

/* Tombol "View All Issues" / "Read more" */
a.read_more,
.pkp_page_index .current_issue .read_more {
    margin-top: 6px;
    padding-left: 12px;
    border-radius: 5px;
    background: var(--gradient-secondary);
    color: #fff !important;
}
a.read_more:hover {
    background: var(--gradient-mint);
    color: var(--primary-color) !important;
}


/* =====================================================================
   11. DAFTAR ISI ISSUE & KARTU ARTIKEL
   ===================================================================== */
.cmp_article_list > li {
    margin-bottom: 14px;
}
.obj_article_summary {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.obj_article_summary > .title {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.obj_article_summary > .title a { color: var(--primary-color); }
.obj_article_summary > .title a:hover { color: var(--link-hover-color); }
.obj_article_summary .authors { overflow-wrap: break-word; }

/* Tombol PDF / galley boleh turun baris, tidak melebar keluar layar */
.obj_article_summary .galleys_links,
.obj_issue_toc .galleys_links,
.obj_article_details .galleys_links {
    flex-flow: row wrap;
    gap: .5rem;
}
.obj_article_summary .galleys_links li,
.obj_issue_toc .galleys_links li,
.obj_article_details .galleys_links li {
    margin-inline-end: 0;
}

.obj_galley_link {
    border: 0;
    background: var(--gradient-secondary);
    color: #fff;
}
.obj_galley_link:hover,
.obj_galley_link:focus {
    background: var(--gradient-mint);
    color: var(--primary-color);
}

/* Judul seksi pada daftar isi */
.obj_issue_toc .section {
    margin: 1.5rem 0;
    padding: 0;
}
.obj_issue_toc .section::before,
.obj_issue_toc .galleys::before {
    display: none;
}
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
    display: block;
    left: 0;
    margin: 0 0 .75rem;
    padding: .3rem 1rem;
    background: var(--gradient-primary);
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
}
@media (min-width: 768px) {
    .obj_issue_toc .galleys,
    .obj_issue_toc .section {
        margin: 1.5rem 0;
        padding: 0;
    }
}

.obj_issue_toc .cover img,
.obj_issue_summary .cover img {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.page_issue_archive .issues_archive > li {
    padding-top: 14px;
    padding-bottom: 14px;
}


/* =====================================================================
   12. HALAMAN DETAIL ARTIKEL (menggantikan lebar kolom tetap)
   ===================================================================== */
.obj_article_details .row {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    margin-top: 1rem;
}
.obj_article_details .row::before,
.obj_article_details .row::after {
    display: none;
}
.obj_article_details .main_entry,
.obj_article_details .entry_details {
    float: none;
    width: 100%;
    min-width: 0;
}
.obj_article_details .main_entry {
    border-right: 0;
}
.obj_article_details .item {
    overflow-wrap: break-word;
}
.obj_article_details .item .label,
.obj_article_details .main_entry .item .label {
    color: var(--primary-color);
}
.obj_article_details .authors .name { color: var(--primary-color); }
.obj_article_details .authors .userGroup { display: none; }
.obj_article_details .entry_details .item .label {
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
    margin-bottom: 6px;
}
.obj_article_details .citation_display .csl-entry,
.csl-entry {
    font-size: 15px;
    text-align: start;
}

/* HP: panel samping (cover, PDF, tanggal, kutipan) turun ke bawah */
@media (max-width: 767px) {
    .obj_article_details .entry_details {
        margin: 1.25rem 0 0;
        background: #fbf6ea;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }
}

/* Tablet & desktop: dua kolom fluid */
@media (min-width: 768px) {
    .obj_article_details .row {
        margin-left: 0;
        margin-right: 0;
        flex-wrap: nowrap;
    }
    .obj_article_details .main_entry {
        flex: 1 1 0;
        width: auto;
    }
    .obj_article_details .entry_details {
        flex: 0 0 270px;
        width: 270px;
        margin: 0;
        background: #fbf6ea;
        border-top: 0;
        border-left: 1px solid var(--border-color);
        border-radius: 0 6px 6px 0;
    }
}
@media (min-width: 992px) {
    .obj_article_details .entry_details { flex-basis: 300px; width: 300px; }
}


/* =====================================================================
   13. TOMBOL & FORMULIR
   ===================================================================== */
.pkp_button_primary,
.cmp_button,
.cmp_form .buttons button {
    background: var(--gradient-secondary);
    border-color: var(--secondary-color);
    color: #fff;
}
.pkp_button,
.cmp_button_wire {
    color: var(--link-color);
    border-color: var(--secondary-color);
}
.cmp_button_wire:hover,
.cmp_button_wire:focus {
    background: var(--secondary-color);
    color: #fff;
}
.pkp_button_primary:hover,
.pkp_button_primary:focus,
.cmp_button:hover,
.cmp_button:focus {
    background: var(--primary-color);
    color: #fff;
}
.page_search .submit button::after { background: var(--secondary-color); }

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea {
    max-width: 100%;
}
@media (max-width: 479px) {
    .page_login .login,
    .page_lost_password .lost_password {
        max-width: 100%;
    }
    .page_search .date_range [name*="Year"],
    .page_search .date_range [name*="Day"],
    .page_search .date_range [name*="Month"] {
        width: auto;
        max-width: 31%;
    }
}

.header_view { background: var(--primary-color); }
.header_view .return { color: var(--primary-color); }


/* =====================================================================
   14. FOOTER (full lebar, tanpa logo PKP)
   ===================================================================== */
.pkp_structure_footer_wrapper {
    background: var(--gradient-cover);
    border-radius: 0 0 8px 8px;
    color: #fff;
}
.pkp_structure_footer {
    width: 100%;
    max-width: none;
    padding: 0;
}
/* Hilangkan bingkai/jarak bawaan agar isi footer menempel penuh ke tepi kartu */
.pkp_footer_content {
    padding: 0;
    color: #fff;
    text-align: left;
    overflow-wrap: break-word;
}
.pkp_footer_content > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.75rem 1.5rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
    color: #fff;
}
.pkp_footer_content p,
.pkp_footer_content address,
.pkp_footer_content li,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4 {
    color: #fff;
    font-style: normal;
}
.pkp_footer_content a {
    color: #fff;
    text-decoration: underline;
}
.pkp_footer_content a:hover {
    color: var(--mint-color);
}
.pkp_footer_content iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    border: 0;
    border-radius: 6px;
}
/* Logo "Platform & workflow by OJS/PKP" disembunyikan */
.pkp_brand_footer {
    display: none !important;
}

/* Kolom footer buatan sendiri jadi satu kolom di layar kecil */
@media (max-width: 767px) {
    .pkp_footer_content [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .pkp_footer_content [style*="display: flex"],
    .pkp_footer_content [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    .pkp_footer_content > * {
        padding: 1.25rem 1rem !important;
        border-radius: 0 !important;
    }
}

/* Footer kolom-kolom (opsional, kompatibel dengan struktur footer Ingenium) */
.footer-contact .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 30px;
    justify-content: space-between;
}
.footer-contact .row::before,
.footer-contact .row::after {
    display: none;
}
.footer-contact .footer-col {
    flex: 1 1 220px;
    min-width: 0;
}
.footer-title {
    display: inline-block;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.footer-contact ul { margin: 0; padding: 0; list-style: none; }


/* =====================================================================
   15. PENYESUAIAN UKURAN LAYAR
   ===================================================================== */

/* Tablet: kartu halaman sedikit lebih lebar */
@media (max-width: 1024px) {
    .pkp_structure_page { width: calc(100% - 24px); }
}

/* HP & tablet kecil: kartu penuh layar, tanpa sudut membulat */
@media (max-width: 767px) {
    .pkp_structure_page {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .pkp_structure_head,
    .pkp_structure_footer_wrapper {
        border-radius: 0;
    }
    body { font-size: 14px; }
    .obj_article_summary { padding: 14px; }
}

/* HP: ukuran teks & perataan lebih nyaman dibaca */
@media (max-width: 576px) {
    .pkp_structure_main p,
    .pkp_structure_main ul,
    .pkp_structure_main ol {
        font-size: 15px;
    }
    .pkp_structure_main p { text-align: start; }   /* justify di layar sempit = spasi renggang */
    .pkp_structure_main table td,
    .pkp_structure_main table th {
        width: auto !important;
        padding: .35rem .45rem;
        font-size: 14px;
    }
    .obj_article_summary > .title { font-size: 15px; }
}

/* Hormati preferensi "kurangi animasi" */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/* =====================================================================
   16. MENU SIDEBAR BERIKON (People / Journal Policies / Submission)
   Kompatibel dengan HTML Ingenium: ul.*_list > li.*_item > a.*_item_link
   Ikon dipilih otomatis dari atribut title="..." pada link.
   Butuh FontAwesome (sudah dimuat tema OJS).
   ===================================================================== */
.submission_title, .journal_policies_title, .governing_body_title,
.visitor_title, .visitor_header_title, .eissn_title, .assosiate_title,
.tools_title, .scimago-journal-rank {
    display: block;
    margin: 0;
    padding: 8px 12px;
    background: var(--gradient-primary);
    border-bottom: 2px solid var(--accent-color);
    border-radius: 5px 5px 0 0;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
    list-style: none;
}
.governing_body_list, .submission_list, .journal_policies_list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.governing_body_item_link,
.submission_item_link,
.journal_policies_item_link {
    display: flex;
    align-items: flex-start;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1.5;
    transition: background .2s ease, padding .2s ease;
}
.governing_body_item_link::before,
.submission_item_link::before,
.journal_policies_item_link::before {
    flex-shrink: 0;
    width: 18px;
    margin-right: 10px;
    font-family: FontAwesome;
    text-align: center;
    color: var(--secondary-color);
}
.governing_body_item_link:hover,
.submission_item_link:hover,
.journal_policies_item_link:hover {
    padding-left: 18px;
    background: var(--gradient-primary);
    color: #fff;
}
.governing_body_item_link:hover::before,
.submission_item_link:hover::before,
.journal_policies_item_link:hover::before {
    color: #fff;
}
.governing_body_item_link[title*="Editorial Team"]::before { content: "\f0c0"; }
.governing_body_item_link[title*="Peer Reviewers"]::before { content: "\f233"; }
.governing_body_item_link[title*="Reviewers"]::before      { content: "\f233"; }
.governing_body_item_link[title*="Contact"]::before        { content: "\f0e0"; }

.submission_item_link[title*="Submit Now"]::before          { content: "\f0ee"; }
.submission_item_link[title*="Author Guidelines"]::before   { content: "\f02d"; }
.submission_item_link[title*="Reviewer Guidelines"]::before { content: "\f044"; }
.submission_item_link[title*="Template"]::before            { content: "\f1c1"; }
.submission_item_link[title*="Privacy Statement"]::before   { content: "\f023"; }
.submission_item_link[title*="AI"]::before                  { content: "\f1b2"; }

.journal_policies_item_link[title*="Aim and Scope"]::before            { content: "\f05b"; }
.journal_policies_item_link[title*="Peer Review"]::before              { content: "\f00c"; }
.journal_policies_item_link[title*="Publication Ethics"]::before       { content: "\f24e"; }
.journal_policies_item_link[title*="Misconduct"]::before               { content: "\f071"; }
.journal_policies_item_link[title*="Retraction"]::before               { content: "\f0e2"; }
.journal_policies_item_link[title*="Conflicts of Interest"]::before    { content: "\f0ec"; }
.journal_policies_item_link[title*="Complaints"]::before               { content: "\f0e6"; }
.journal_policies_item_link[title*="Plagiarism"]::before               { content: "\f1f8"; }
.journal_policies_item_link[title*="Copyright"]::before                { content: "\f1f9"; }
.journal_policies_item_link[title*="Publication Frequency"]::before    { content: "\f017"; }
.journal_policies_item_link[title*="Processing Charge"]::before        { content: "\f155"; }
.journal_policies_item_link[title*="Withdrawal"]::before               { content: "\f05e"; }
.journal_policies_item_link[title*="Open Access"]::before              { content: "\f09c"; }
.journal_policies_item_link[title*="Archiving"]::before                { content: "\f187"; }
.journal_policies_item_link[title*="Revenue"]::before                  { content: "\f0d6"; }
.journal_policies_item_link[title*="Generative AI"]::before            { content: "\f1b2"; }
.journal_policies_item_link[title*="Indexing"]::before                 { content: "\f022"; }
.journal_policies_item_link[title*="Abstracting"]::before              { content: "\f022"; }

/* Pembungkus kotak menu */
.submission, .governing_body, .journal_policies,
.png-scimago, .tools_grid, .png_visitor, .png_citedness,
.png_custom_block, .png-assosiate {
    margin-bottom: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}


/* =====================================================================
   17. BLOK KECIL: scimago, tools, visitor, asosiasi, sitasi
   ===================================================================== */
.png-scimago img,
.png_citedness img,
.png_custom_block img,
.png_statcounter img {
    display: block;
    max-width: 100%;
    margin: 6px auto;
    transition: transform .2s ease;
}
.png-scimago img:hover,
.png_citedness img:hover,
.png_custom_block img:hover { transform: scale(1.04); }
.png_visitor, .png_citedness { padding: 6px 10px; }
figure.visitor_card { margin: .75rem 0; }

.png-assosiate {
    display: flex;
    flex-wrap: wrap;                     /* boleh turun baris di layar sempit */
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
}
.png-assosiate img {
    flex: 0 1 100px;
    max-width: 100px;
    height: 80px;
    object-fit: contain;
}

.tools_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 8px;
    padding: 0;
    list-style: none;
}
.tools_item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.tools_item a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.tools_item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.tools_item:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
}


/* =====================================================================
   18. KEYWORD CLOUD
   ===================================================================== */
.pkp_block.block_Keywordcloud .title:not(.pkp_screen_reader) { margin-bottom: 0; }
.pkp_block.block_Keywordcloud .content {
    padding: 12px;
    min-height: 60px;
    background: #fff;
}
.pkp_block.block_Keywordcloud .content svg {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =====================================================================
   19. KARTU SUBMISSION / LOGIN / INDEXING (di halaman atau blok)
   Class .ijstb-* dipertahankan agar HTML dari Ingenium bisa dipakai;
   class .lw-* adalah nama yang sama untuk JIPCF.
   ===================================================================== */
.lw-submission, .ijstb-submission {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 20px auto;
}
.lw-actions, .ijstb-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.lw-btn, .ijstb-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: all .25s ease;
}
.lw-btn--primary, .ijstb-btn--primary {
    background: var(--gradient-secondary);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    color: #fff !important;
}
.lw-btn--primary:hover, .ijstb-btn--primary:hover {
    background: var(--gradient-mint);
    color: var(--primary-color) !important;
}
.lw-btn--outline, .ijstb-btn--outline {
    background: #fff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color) !important;
}
.lw-btn--outline:hover, .ijstb-btn--outline:hover {
    background: var(--gradient-primary);
    color: #fff !important;
}
.lw-card, .ijstb-card {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .06);
}
.lw-card__title, .ijstb-card__title {
    display: inline-block;
    margin: 0 0 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--accent-color);
    color: var(--primary-color);
    font-size: 17px;
}
.lw-card p, .ijstb-card p { margin: 0; }
.lw-login-list, .ijstb-login-list { margin: 0 0 10px; padding: 0; list-style: none; }
.lw-login-list li, .ijstb-login-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}
.lw-login-list li:last-child, .ijstb-login-list li:last-child { border-bottom: 0; }
.lw-link, .ijstb-link { color: var(--secondary-color); font-weight: 700; text-decoration: underline; }
.lw-note, .ijstb-note { margin-top: 8px; color: #666; font-size: 13px; }

.lw-indexing-grid, .ijstb-indexing-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.lw-indexing-grid a, .ijstb-indexing-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all .2s ease;
}
.lw-indexing-grid a:hover, .ijstb-indexing-grid a:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}
.lw-indexing-grid img, .ijstb-indexing-grid img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@media (max-width: 600px) {
    .lw-actions, .ijstb-actions { flex-direction: column; }
    .lw-card, .ijstb-card { padding: 14px; }
}


/* =====================================================================
   20. TIM EDITORIAL (halaman Editorial Team)
   ===================================================================== */
.editorial-team { max-width: 1000px; line-height: 1.6; }
.editorial-section-title {
    margin: 14px 0 6px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 1.2rem;
}
.editorial-member-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 6px 0;
}
.editorial-featured { padding-left: 10px; border-left: 3px solid var(--accent-color); }
.editorial-photo {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    object-fit: cover;
    background: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.editorial-member-info { flex: 1 1 0; min-width: 0; }
.editorial-member-name { margin: 0 !important; line-height: 1.4 !important; }
.editorial-member-name strong { color: #1a1a1a; font-size: 1.05rem; }
.editorial-member-affiliation { margin: 0 !important; font-size: 14px !important; }
.editorial-link-btn {
    display: inline-block;
    margin: 3px 3px 0 0;
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
.editorial-link-btn:hover {
    background: #f0f0f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.editorial-scopus  { color: #ff6600; }
.editorial-wos     { color: #2c3e50; }
.editorial-scholar { color: #4285f4; }
.editorial-orcid   { color: #6c8f1a; }
.editorial-sinta   { color: #212529; }

@media (max-width: 600px) {
    .editorial-member-card { flex-direction: column; align-items: center; text-align: center; }
    .editorial-featured { border-left: 0; padding-left: 0; }
    .editorial-photo { width: 120px; height: 150px; }
    .editorial-link-btn { padding: 4px 8px; }
}


/* =====================================================================
   21. IKON SOSIAL MEDIA DI FOOTER
   Pakai: <div class="social_media_list"><a class="sm-icon" ...>
   ===================================================================== */
.social_media_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.social_media_list .sm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .25s ease;
}
.social_media_list .sm-icon:hover {
    background: var(--gradient-secondary);
    border-color: var(--mint-color);
    transform: translateY(-3px);
}

.copyright-wrapper {
    padding: 14px 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    text-align: center;
}
.copyright-wrapper,
.copyright-wrapper * {
    color: #fff !important;
    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================================
   22. ARAB / RTL
   ===================================================================== */
:lang(ar), [dir="rtl"] {
    font-family: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Segoe UI", serif;
}
body[dir="rtl"] .pkp_structure_main p { text-align: justify; }
body[dir="rtl"] .obj_article_summary { border-left: 1px solid var(--border-color); border-right: 3px solid var(--accent-color); }
body[dir="rtl"] .pkp_block.block_custom p.menu_item a:hover,
body[dir="rtl"] .governing_body_item_link:hover,
body[dir="rtl"] .submission_item_link:hover,
body[dir="rtl"] .journal_policies_item_link:hover {
    padding-left: 12px;
    padding-right: 18px;
}
body[dir="rtl"] .governing_body_item_link::before,
body[dir="rtl"] .submission_item_link::before,
body[dir="rtl"] .journal_policies_item_link::before {
    margin-right: 0;
    margin-left: 10px;
}


/* =====================================================================
   23. CETAK
   ===================================================================== */
@media print {
    html, body { background: #fff; }
    .pkp_structure_head, .pkp_structure_sidebar, .pkp_structure_footer_wrapper,
    .pkp_site_nav_toggle, .cmp_skip_to_content, .galleys_links {
        display: none !important;
    }
    .pkp_structure_page { width: 100%; max-width: none; margin: 0; box-shadow: none; border-radius: 0; }
    .pkp_structure_content { display: block; }
    .pkp_structure_main { border: 0; padding: 0; }
    .pkp_structure_main a { color: #000; text-decoration: underline; }
    .obj_article_details .row { display: block; }
    .obj_article_details .entry_details { width: 100%; border: 0; background: none; }
}


/* =====================================================================
   24. BERANDA: KARTU INFO JURNAL + ANIMASI
   Dipakai oleh HTML "Additional Content" (HTML Additional Content jurnal)
   Animasi hanya memakai transform (translateY/scale) dan opacity,
   jadi tidak pernah menimbulkan scroll samping.
   Otomatis mati bila pengguna memilih "kurangi animasi" (bagian 15).
   ===================================================================== */

/* ---- keyframes ---- */
@keyframes lw-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lw-pop {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: none; }
}
@keyframes lw-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes lw-shine {
    0%        { left: -70%; }
    55%, 100% { left: 140%; }
}

/* ---- paragraf pengantar ---- */
.additional_content .lw-lead {
    max-width: 800px;
    margin: 0 auto 1rem;
    color: #444;
    line-height: 1.75;
    text-align: justify;
    animation: lw-fade-up .7s ease backwards;
}

/* ---- kartu info jurnal (cover + data) ---- */
.lw-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    max-width: 800px;
    margin: 20px auto;
    padding: 24px;
    background: linear-gradient(135deg, #fff6dc 0%, #e3ecf3 100%);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    animation: lw-fade-up .8s ease .1s backwards;
    transition: box-shadow .3s ease;
}
.lw-hero:hover { box-shadow: 0 8px 22px rgba(58, 34, 10, .2); }

.lw-hero__cover {
    flex: 0 0 auto;
    margin: 0 auto;
}
.lw-hero__cover img {
    display: block;
    width: 200px;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    animation: lw-float 4.5s ease-in-out infinite;
}

.lw-hero__text {
    flex: 1 1 260px;
    min-width: 0;                       /* kunci: tidak memaksa melebar di HP kecil */
    color: #444;
    font-size: 14px;
}
.lw-hero .lw-hero__title {
    margin: 0 0 8px;
    color: var(--primary-color);
    font-size: 19px;
    line-height: 1.35;
}
.lw-hero__text p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
.lw-hero__text p strong { color: var(--primary-color); }
.lw-hero__text img.lw-inline-logo {
    display: inline-block;
    width: auto;
    height: 12px !important;
    vertical-align: middle;
}

/* ---- tautan dengan garis bawah yang "tumbuh" saat disorot ---- */
.animated-link {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
    transition: background-size .3s ease, color .2s ease;
}
.animated-link:hover,
.animated-link:focus {
    background-size: 100% 2px;
}

/* ---- tombol: kilau bergerak ---- */
.lw-btn,
.lw-btn--gold {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.lw-btn--primary::after,
.lw-btn--gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: lw-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
.lw-btn:hover,
.lw-btn--gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
.lw-btn--gold {
    display: inline-block;
    margin-top: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #e3b73d 0%, #c4921a 100%);
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
    color: var(--primary-color) !important;
    font-size: 14px;
    font-weight: 700;
}
.lw-btn--gold:hover {
    background: var(--gradient-mint);
}

/* ---- kartu: muncul bertahap + terangkat saat disorot ---- */
.lw-submission > * {
    animation: lw-fade-up .7s ease backwards;
}
.lw-submission > *:nth-child(1) { animation-delay: .20s; }
.lw-submission > *:nth-child(2) { animation-delay: .30s; }
.lw-submission > *:nth-child(3) { animation-delay: .40s; }
.lw-submission > *:nth-child(4) { animation-delay: .50s; }
.lw-submission > *:nth-child(5) { animation-delay: .60s; }
.lw-submission > *:nth-child(6) { animation-delay: .70s; }

.lw-card {
    transition: transform .3s ease, box-shadow .3s ease, border-left-color .3s ease;
}
.lw-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(58, 34, 10, .15);
    border-left-color: var(--secondary-color);
}
.lw-card .lw-card__title {
    margin: 0 0 12px;
    font-size: 17px;
}

/* ---- logo indexing: muncul satu per satu, naik saat disorot ---- */
.lw-indexing-grid--center { justify-content: center; }
.lw-indexing-grid a {
    animation: lw-pop .5s ease backwards;
}
.lw-indexing-grid a:nth-child(1) { animation-delay: .5s; }
.lw-indexing-grid a:nth-child(2) { animation-delay: .6s; }
.lw-indexing-grid a:nth-child(3) { animation-delay: .7s; }
.lw-indexing-grid a:nth-child(4) { animation-delay: .8s; }
.lw-indexing-grid a:nth-child(5) { animation-delay: .9s; }
.lw-indexing-grid a:nth-child(6) { animation-delay: 1.0s; }
.lw-indexing-grid a:nth-child(7) { animation-delay: 1.1s; }
.lw-indexing-grid a:nth-child(8) { animation-delay: 1.2s; }
.lw-indexing-grid a:hover { transform: translateY(-5px) scale(1.04); }

/* ---- daftar artikel: bergeser halus (hanya perangkat dengan mouse) ---- */
.cmp_article_list > li { transition: transform .35s ease; }
@media (hover: hover) and (min-width: 768px) {
    .cmp_article_list > li:hover { transform: translateX(6px); }
}

/* ---- layar kecil ---- */
@media (max-width: 480px) {
    .lw-hero { padding: 16px; gap: 16px; }
    .lw-hero .lw-hero__title { font-size: 17px; }
    .additional_content .lw-lead { text-align: start; }
}

/* ---- rapikan jarak daftar login & catatan di dalam kartu ---- */
.lw-card .lw-login-list { margin: 0 0 10px; line-height: 1.6; }
.lw-card .lw-note       { margin-top: 8px; }


/* =====================================================================
   25. SIDEBAR TANPA GARIS / BINGKAI
   Menghapus bingkai luar blok, bingkai dalam (dari HTML blok kustom),
   dan garis tepi vertikal. Garis pemisah antar-item menu tetap ada.
   ===================================================================== */
.pkp_structure_sidebar,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .pkp_block::before,
.pkp_structure_sidebar .pkp_block::after,
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .pkp_block .content > div,
.pkp_structure_sidebar .pkp_block .content > div > div,
.pkp_structure_sidebar .pkp_block .content > section,
.pkp_structure_sidebar .pkp_block .content > figure,
.pkp_structure_sidebar .pkp_block .content > center,
.pkp_structure_sidebar .pkp_block > div {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.pkp_structure_sidebar .pkp_block .content > div,
.pkp_structure_sidebar .pkp_block .content > div > div {
    border-radius: 0 !important;
}


/* =====================================================================
   26. FOOTER RINGKAS (HTML footer jurnal)
   Desktop: 3 kolom (tentang | tautan | kontak + peta)
   Tablet : 2 kolom, bagian "tentang" selebar penuh
   HP     : 1 kolom
   ===================================================================== */
.lw-footer {
    font-size: 14px;
    line-height: 1.65;
    color: #fff;
}
.lw-footer a {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size .3s ease, color .2s ease;
}
.lw-footer a:hover,
.lw-footer a:focus {
    color: var(--mint-color);
    background-size: 100% 1px;
}
.lw-footer p,
.lw-footer address { margin: 0; font-style: normal; }
.lw-footer ul { margin: 0; padding: 0; list-style: none; }

.lw-footer__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.45fr;
    gap: 28px 40px;
    max-width: 1100px;
    margin: 0 auto;
}
.lw-footer__grid > div { min-width: 0; }

.lw-footer .lw-footer__name {
    margin: 0 0 8px;
    color: #fff;
    font-size: 17px;
    line-height: 1.35;
}
.lw-footer__desc { color: #f6e7c3; }
.lw-footer__issn { margin-top: 10px !important; }
.lw-footer__sep { margin: 0 6px; opacity: .6; }

.lw-footer .lw-footer__title {
    display: inline-block;
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--accent-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* tautan cepat dengan panah kecil yang bergeser */
.lw-footer__links li { margin: 0; padding: 3px 0; }
.lw-footer__links a {
    display: inline-block;
    padding-left: 14px;
    position: relative;
}
.lw-footer__links a::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 700;
    transition: transform .25s ease;
}
.lw-footer__links a:hover::before { transform: translateX(4px); }

/* peta */
.lw-footer__map {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.lw-footer__map iframe {
    display: block;
    width: 100% !important;
    height: 160px;
    border: 0;
}

/* hak cipta */
.lw-footer__bottom {
    max-width: 1100px;
    margin: 26px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: 13px;
    text-align: center;
}
.lw-footer__bottom p { margin: 0 0 6px; color: #f6e7c3; }
.lw-footer__bottom p:first-child { color: #fff; font-size: 14px; }
.lw-footer__bottom a { text-decoration: underline; background: none; }
.lw-footer__legal { margin-top: 10px !important; }

@media (max-width: 991px) {
    .lw-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lw-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .lw-footer__grid { grid-template-columns: 1fr; gap: 22px; }
    .lw-footer__bottom { text-align: left; }
    .lw-footer__map iframe { height: 190px; }
}


/* =====================================================================
   27. SIDEBAR KIRI/KANAN: KARTU RAPI + ANIMASI HOVER
   Bekerja dengan markup blok kustom yang ada sekarang (termasuk blok
   yang bersarang "pkp_block di dalam pkp_block"), tanpa ubah HTML.
   Untuk menghilangkan bayangan kartu: set --side-shadow: none;
   ===================================================================== */
:root {
    --side-shadow: 0 2px 10px rgba(58, 34, 10, .12);
    --side-shadow-hover: 0 10px 24px rgba(58, 34, 10, .2);
}

/* ---- 1. Satu kartu per blok (blok bersarang diratakan) ---- */
.pkp_structure_sidebar > .pkp_block:not(.block_make_submission) {
    margin: 0 0 18px;
    padding: 0 !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--side-shadow) !important;   /* !important: menang atas bagian 25 */
    overflow: hidden;
    animation: lw-fade-up .6s ease backwards;
    transition: transform .3s ease, box-shadow .3s ease;
}
.pkp_structure_sidebar > .pkp_block:not(.block_make_submission):hover {
    transform: translateY(-3px);
    box-shadow: var(--side-shadow-hover) !important;
}
.pkp_structure_sidebar > .pkp_block:nth-child(1) { animation-delay: .05s; }
.pkp_structure_sidebar > .pkp_block:nth-child(2) { animation-delay: .12s; }
.pkp_structure_sidebar > .pkp_block:nth-child(3) { animation-delay: .19s; }
.pkp_structure_sidebar > .pkp_block:nth-child(4) { animation-delay: .26s; }
.pkp_structure_sidebar > .pkp_block:nth-child(5) { animation-delay: .33s; }
.pkp_structure_sidebar > .pkp_block:nth-child(6) { animation-delay: .40s; }
.pkp_structure_sidebar > .pkp_block:nth-child(7) { animation-delay: .47s; }
.pkp_structure_sidebar > .pkp_block:nth-child(n+8) { animation-delay: .54s; }

/* blok di dalam blok: tidak boleh jadi kartu lagi */
.pkp_structure_sidebar .pkp_block .pkp_block {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
    animation: none;
    overflow: visible;
}
.pkp_structure_sidebar .pkp_block .content {
    padding: 0 0 10px;
}
.pkp_structure_sidebar .pkp_block .content .content {
    padding: 0;
}

/* ---- 2. Judul blok: pita cokelat penuh lebar, kilau saat kartu disorot ---- */
.pkp_structure_sidebar .pkp_block .content strong:has(> .title) {
    display: block;
}
.pkp_structure_sidebar .pkp_block .title:not(.pkp_screen_reader) {
    margin: 0 0 8px;
    padding: 11px 14px;
    background: linear-gradient(110deg, #2b1707 0%, #8a4d06 50%, #2b1707 100%);
    background-size: 220% 100%;
    background-position: 0 0;
    border-bottom: 3px solid var(--accent-color);
    transition: background-position .7s ease, letter-spacing .3s ease;
}
.pkp_structure_sidebar .pkp_block:hover > .content .title:not(.pkp_screen_reader),
.pkp_structure_sidebar .pkp_block:hover > .title:not(.pkp_screen_reader) {
    background-position: 100% 0;
    letter-spacing: .9px;
}

/* ---- 3. Item menu: pil lembut, isi krem meluncur, ikon bergoyang ---- */
.pkp_structure_sidebar .pkp_block .content ul:not(.tools_list) {
    margin: 0;
    padding: 0 8px;
    list-style: none;
}
.pkp_structure_sidebar .pkp_block p.menu_item {
    margin: 0 8px;
}
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a,
.pkp_structure_sidebar .pkp_block p.menu_item > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1.4;
    background: linear-gradient(135deg, #fdf3d6, #f3dca0) no-repeat 0 0 / 0% 100%;
    transition: background-size .35s ease, transform .3s ease, color .2s ease, box-shadow .3s ease;
}
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a:hover,
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a:focus,
.pkp_structure_sidebar .pkp_block p.menu_item > a:hover,
.pkp_structure_sidebar .pkp_block p.menu_item > a:focus {
    background-size: 100% 100%;
    transform: translateX(4px);
    color: #2b1707;
    box-shadow: inset 3px 0 0 var(--accent-color);
}
/* panah kecil muncul dari kiri */
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a::after,
.pkp_structure_sidebar .pkp_block p.menu_item > a::after {
    content: "\f105";
    position: absolute;                 /* melayang: tidak memakan ruang teks */
    top: 50%;
    right: 10px;
    font-family: FontAwesome;
    font-size: 16px;
    line-height: 1;
    color: var(--secondary-color);
    opacity: 0;
    transform: translate(-8px, -50%);
    transition: opacity .3s ease, transform .3s ease;
}
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a:hover::after,
.pkp_structure_sidebar .pkp_block li:not(.tools_item) > a:focus::after,
.pkp_structure_sidebar .pkp_block p.menu_item > a:hover::after,
.pkp_structure_sidebar .pkp_block p.menu_item > a:focus::after {
    opacity: 1;
    transform: translate(0, -50%);
}
/* ikon FontAwesome di depan teks */
.pkp_structure_sidebar .pkp_block li > a .fa,
.pkp_structure_sidebar .pkp_block p.menu_item > a .fa {
    flex: 0 0 20px;
    width: 20px;
    color: var(--secondary-color);
    font-size: 16px;
    font-style: normal;
    text-align: center;
    transition: transform .3s ease, color .2s ease;
}
.pkp_structure_sidebar .pkp_block li > a:hover .fa,
.pkp_structure_sidebar .pkp_block p.menu_item > a:hover .fa {
    transform: scale(1.25) rotate(-10deg);
    color: var(--primary-color);
}

/* ---- 4. Gambar (sertifikat, template, dsb.): rata tengah, melayang & zoom ---- */
.pkp_structure_sidebar .pkp_block a > img {
    display: block;
    margin: 12px auto;
    transition: transform .4s ease, filter .3s ease;
}
.pkp_structure_sidebar .pkp_block a:hover > img {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}
.pkp_structure_sidebar .pkp_block .content > ul:not(.tools_list) img,
.pkp_structure_sidebar #customblock-akreditas a > img,
.pkp_structure_sidebar #customblock-article-template a > img {
    animation: lw-float 4.5s ease-in-out infinite;
}

/* gambar yang langsung berada di <li> atau <content> (tanpa <a>) */
.pkp_structure_sidebar .pkp_block .content ul:not(.tools_list) li > img,
.pkp_structure_sidebar .pkp_block .content > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
}

/* ---- 5. Kotak logo (Tools, MoU, Member): ubin lembut yang melonjak ---- */
.pkp_structure_sidebar .tools_list {
    margin: 4px 10px 6px;
    gap: 10px;
}
.pkp_structure_sidebar .tools_item {
    background: #fbf6ea;
    border: 0;
    border-radius: 10px;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.pkp_structure_sidebar .tools_item:hover {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(58, 34, 10, .2);
}
.pkp_structure_sidebar .pkp_block .tools_item a > img {
    margin: 0;
    animation: none;
}
.pkp_structure_sidebar .tools_item:hover img {
    transform: scale(1.1);
}

/* ---- 6. Teks biasa & penghitung pengunjung ---- */
.pkp_structure_sidebar .pkp_block .content > p:not(.menu_item),
.pkp_structure_sidebar .pkp_block .content > div > p:not(.menu_item) {
    margin: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
}
.pkp_structure_sidebar .pkp_block iframe,
.pkp_structure_sidebar .pkp_block center img {
    max-width: 100%;
    height: auto;
}

/* ---- 7. Kata kunci (Keywords) ---- */
.pkp_structure_sidebar .block_Keywordcloud .content text.keyword {
    transition: opacity .2s ease;
}

/* ---- 8. Tombol Make a Submission: berdenyut halus ---- */
@keyframes lw-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, .55); }
    60%      { box-shadow: 0 0 0 10px rgba(240, 180, 41, 0); }
}
.pkp_structure_sidebar .block_make_submission a {
    margin-bottom: 18px;
    animation: lw-pulse 2.8s ease-out infinite;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.pkp_structure_sidebar .block_make_submission a:hover {
    transform: translateY(-3px);
    animation-play-state: paused;
}

/* ---- 9. Tablet: kartu tidak perlu jarak bawah ganda di dalam grid ---- */
@media (max-width: 991px) {
    .pkp_structure_sidebar > .pkp_block:not(.block_make_submission) { margin-bottom: 0; }
    .pkp_structure_sidebar .block_make_submission { grid-column: 1 / -1; }
    .pkp_structure_sidebar .block_make_submission a { margin-bottom: 0; }
}

/* ---- 10. Perangkat sentuh: tanpa efek hover yang "menempel" ---- */
@media (hover: none) {
    .pkp_structure_sidebar > .pkp_block:not(.block_make_submission):hover { transform: none; }
    .pkp_structure_sidebar .tools_item:hover { transform: none; }
}

/* =====================================================================
   21. KARTU TIM EDITORIAL (reviewer-grid / card / index-link)
   Tempel di AKHIR stylesheet jurnal. Ganti --rv-accent untuk ubah warna.
   ===================================================================== */
.editorial-team { max-width: none; }
.reviewer-grid {
    --rv-accent: var(--secondary-color, #a8650a);
    --rv-ink: var(--primary-color, #4a2a0f);
    --rv-sub: #4a5068;
    --rv-line: #e6e8f0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0 0 28px;
}
.reviewer-grid .card {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 250px;
    align-items: stretch;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 22px;
    box-shadow: 0 8px 26px rgba(30, 40, 60, .09);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.reviewer-grid .card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: var(--rv-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s;
}
.reviewer-grid .card:hover { border-color: var(--border-color, #e7dcc2); box-shadow: 0 12px 32px rgba(30, 40, 60, .14); }
.reviewer-grid .card:hover::before { transform: scaleX(1); }

.reviewer-grid .profile-img-container { display: flex; align-items: center; justify-content: center; padding: 22px 0 22px 22px; }
.reviewer-grid .profile-img,
.reviewer-grid .profile-initials { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.reviewer-grid .profile-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-mint, #fbefcf); color: var(--rv-ink);
    font-size: 30px; font-weight: 700;
}

.reviewer-grid .reviewer-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 24px 22px 24px 18px; min-width: 0; }
.reviewer-grid .reviewer-name { margin: 0; padding: 0; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--rv-ink); text-align: start; }
.reviewer-grid .reviewer-meta-row { margin: 0; }
.reviewer-grid .reviewer-instansi { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--rv-sub); text-align: start; }
.reviewer-grid .reviewer-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.reviewer-grid .field-tag { background: #f1f4f9; color: var(--rv-sub); font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.reviewer-grid .reviewer-country {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--mint-color, #fbefcf); color: var(--rv-ink);
    font-size: 14px; font-weight: 700; padding: 3px 16px 3px 3px; border-radius: 999px;
}
.reviewer-grid .reviewer-country img { width: 30px !important; height: 21px !important; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

.reviewer-grid .indices-container {
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
    margin: 22px 0; padding: 0 22px 0 24px;
    border-left: 1px solid var(--rv-line);
}
.reviewer-grid .index-link {
    display: flex; align-items: center; gap: 12px;
    padding: 5px 16px 5px 5px;
    background: #f8f9fc; border: 1px solid var(--rv-line); border-radius: 999px;
    color: var(--rv-sub); font-size: 15px; font-weight: 600; line-height: 1.2;
    text-decoration: none; transition: background .15s, transform .15s, border-color .15s;
}
.reviewer-grid .index-link:hover { background: #fff; border-color: var(--rv-accent); color: var(--rv-ink); transform: translateX(3px); text-decoration: none; }
.reviewer-grid .index-link:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; }
.reviewer-grid .index-link.disabled { opacity: .45; pointer-events: none; }
.reviewer-grid .index-icon {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; font-weight: 700;
}
.reviewer-grid .index-icon::before { display: block; }
.reviewer-grid .google .index-icon { background: linear-gradient(135deg, #4a7bd0, #4aa57a); }
.reviewer-grid .google .index-icon::before { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3 2 8.5l10 5.5 8-4.4V15h2V8.5z'/%3E%3Ccircle cx='12' cy='17' r='3.2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.reviewer-grid .orcid .index-icon { background: #a6ce39; }
.reviewer-grid .orcid .index-icon::before { content: "iD"; font-size: 14px; }
.reviewer-grid .scopus .index-icon { background: #2f5fa3; }
.reviewer-grid .scopus .index-icon::before { content: "SC"; }
.reviewer-grid .wos .index-icon { background: #5b3be0; }
.reviewer-grid .wos .index-icon::before { content: "W"; }
.reviewer-grid .sinta .index-icon { background: #ee8a2b; }
.reviewer-grid .sinta .index-icon::before { content: "S"; }
.reviewer-grid .email .index-icon { background: #c0392b; }
.reviewer-grid .email .index-icon::before { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 6h18v12H3z'/%3E%3Cpath fill='none' stroke='%23c0392b' stroke-width='1.6' d='m3.5 7 8.5 6.5L20.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Menyesuaikan lebar kolom konten (bukan lebar layar) */
@container (max-width: 680px) {
    .reviewer-grid .card { grid-template-columns: 88px minmax(0, 1fr); }
    .reviewer-grid .profile-img-container { padding: 18px 0 0 16px; align-items: flex-start; }
    .reviewer-grid .profile-img, .reviewer-grid .profile-initials { width: 64px; height: 64px; font-size: 22px; }
    .reviewer-grid .reviewer-body { padding: 18px 16px 12px 14px; }
    .reviewer-grid .reviewer-name { font-size: 18px; }
    .reviewer-grid .reviewer-instansi { font-size: 14px; }
    .reviewer-grid .indices-container { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--rv-line); margin: 0 16px; padding: 14px 0 16px; }
    .reviewer-grid .index-link { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .reviewer-grid .card, .reviewer-grid .card::before, .reviewer-grid .index-link { transition: none; }
}

/* =====================================================================
   28. PERBAIKAN HEADER & MENU (menimpa warna dasar tema OJS)
   Masalah: tema memakai "Base Colour" (biru keabuan) untuk bingkai di
   sekitar banner dan memilih teks menu yang gelap. Bagian ini memaksa
   bingkai hilang (banner penuh lebar) dan teks menu putih.
   Taruh paling akhir di stylesheet.
   ===================================================================== */
.pkp_structure_head {
    background: var(--gradient-primary) !important;
}

/* Desktop: banner penuh lebar tanpa bingkai biru keabuan */
@media (min-width: 992px) {
    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .has_site_logo .pkp_navigation_primary_wrapper {
        background: transparent !important;
    }
    .pkp_site_nav_menu {
        background: var(--gradient-nav) !important;
        border-top: 3px solid var(--accent-color);
    }
}

/* Teks menu utama selalu putih (kontras di atas cokelat/amber) */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper a:hover {
    color: #fff !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    border-color: var(--accent-color) !important;
}

/* HP & tablet: tautan di menu hamburger juga putih */
@media (max-width: 991px) {
    .pkp_site_nav_menu a {
        color: #fff !important;
    }
}