/* =====================================================================
   JOURNAL THEME — MODERN INTERNATIONAL EDITION
   Redesign untuk Jurnal Pengabdian kepada Masyarakat (OJS)
   -----------------------------------------------------------------
   Struktur class OJS dipertahankan 100% — hanya styling yang diganti.
   Semua warna & tipografi diatur lewat CSS variables di :root agar
   mudah disesuaikan tanpa menelusuri ratusan baris kode.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* --- Palet warna --- */
    --jr-navy:        #004a47;   /* primer — header, judul, tombol utama */
    --jr-navy-dark:    #00907d;   /* hover/aktif dari navy */
    --jr-teal:         #99b720;   /* sekunder — aksen interaktif, link */
    --jr-teal-dark:    #0A5E66;
    --jr-blue:         #033d99;   /* aksen — highlight, badge, DOI */
    --jr-gold-light:   #F3E4C2;

    --jr-ink:          #1E2530;   /* teks utama */
    --jr-ink-soft:     #5B6472;   /* teks sekunder / meta */
    --jr-border:       #E3E7EC;
    --jr-surface:      #F6F7F9;   /* latar halaman */
    --jr-white:        #FFFFFF;

    /* --- Tipografi --- */
    --jr-font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --jr-font-body:    'Inter', 'Segoe UI', sans-serif;
    --jr-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    /* --- Skala & efek --- */
    --jr-radius:       10px;
    --jr-radius-sm:    6px;
    --jr-shadow-sm:    0 2px 6px rgba(11, 46, 78, 0.06);
    --jr-shadow-md:    0 10px 24px rgba(11, 46, 78, 0.12);
    --jr-transition:   0.2s ease;
}

/* =====================================================================
   1. FOUNDATION — body, tipografi dasar, link
   ===================================================================== */

body {
    margin: 0;
    padding: 0;
    background-color: var(--jr-surface);
    background-image: none;               /* hapus tekstur kain lama */
    font-family: var(--jr-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--jr-ink);
    text-align: left;                      /* justify menyulitkan pembacaan layar */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.page_index_journal .current_issue h2,
.obj_issue_summary h2 {
    font-family: var(--jr-font-heading);
    font-weight: 600;
    color: var(--jr-navy);
    letter-spacing: -0.01em;
}

a { color: var(--jr-teal); text-decoration: none; transition: color var(--jr-transition); }
a:hover { color: var(--jr-gold); }

/* Bingkai halus di sekeliling seluruh halaman, menggantikan efek shadow lama */
.pkp_structure_page {
    position: relative;
    background: transparent;
}
.pkp_structure_page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    height: 100%;
    background: var(--jr-white);
    box-shadow: var(--jr-shadow-md);
    z-index: -1;
    border-radius: 2px;
}
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content {
    background: var(--jr-white);
}
.pkp_structure_page { margin-top: 0 !important; margin-bottom: 0 !important; }

/* =====================================================================
   2. HEADER
   ===================================================================== */

.pkp_structure_head{
    background:#fff;
    padding:0px 0;
    border:none;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.pkp_site_name{
    margin:0 !important;
    padding:0 !important;
}

.pkp_site_name>a{
    display:block;
    margin:0;
    padding:0;
}

.pkp_site_name img{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto;
}

.pkp_site_name_wrapper{
    width:100%;
    max-width:100%;
    padding:0 !important;
    margin:0 !important;
}

/* =====================================================================
   3. NAVIGASI UTAMA
   ===================================================================== */

.pkp_navigation_primary_row{

    height:40px;

    background:linear-gradient(90deg,
    var(--jr-navy),
    #00907d);

    box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
    padding: 0 !important; margin: 0 !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    margin: 0 !important;
    padding: 0 16px !important;
    line-height: 46px !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    font-family: var(--jr-font-body) !important;
    color: #ffffff !important;
    text-transform: none !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    transition: background var(--jr-transition);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
    background: var(--jr-teal) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
    background: var(--jr-navy-dark) !important;
    border-radius: 0 !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
    border-bottom: solid 1px rgba(255,255,255,.12) !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child {
    border-bottom: none !important;
}

.pkp_navigation_search_wrapper { transition: background var(--jr-transition); }
.pkp_navigation_search_wrapper:hover {
    background: var(--jr-teal) !important;
    border-radius: 4px !important;
}
.pkp_search.pkp_search_desktop {
    font-family: var(--jr-font-body) !important;
    text-transform: none !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
}

/* =====================================================================
   4. BLOK SIDEBAR / WIDGET
   ===================================================================== */

.pkp_block { padding: 16px; }

.sidebar-block {
    background: var(--jr-navy);
    color: #ffffff;
    padding: 14px 16px;
    border-radius: var(--jr-radius-sm);
}

#customblock-Tools .content > .content div { width: 100% !important; margin: auto; }
#customblock-Tools .content > .content div a img { width: 100% !important; border-radius: var(--jr-radius-sm); }
#customblock-Visitor_statistics .content > .content .supercounter,
#customblock-Visitor_statistics .content > .content .statcounter { text-align: center; }

/* Tombol "Make a Submission" — disederhanakan, satu warna solid + aksen emas saat hover */
a.block_make_submission_link {
    width: 100%;
    padding: 14px;
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: var(--jr-radius-sm);
    background: var(--jr-navy);
    border: 0;
    transition: background var(--jr-transition), transform var(--jr-transition);
    box-shadow: var(--jr-shadow-sm);
    margin: 0;
}
.block_make_submission a:hover,
.block_make_submission a:focus {
    color: #fff !important;
    background: var(--jr-teal);
    transform: translateY(-1px);
    box-shadow: var(--jr-shadow-md);
}

.center { margin: auto; padding: 10px; width: 95%; }

/* =====================================================================
   5. DAFTAR ARTIKEL — kartu dengan "spine" aksen (elemen signature)
   ===================================================================== */

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

.pkp_structure_main .obj_article_summary {
    background: var(--jr-white) !important;
    background-image: none !important;
    border: 1px solid var(--jr-border);
    border-left: 4px solid var(--jr-teal);
    border-radius: var(--jr-radius-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: transform var(--jr-transition), box-shadow var(--jr-transition), border-color var(--jr-transition);
}
.pkp_structure_main .obj_article_summary:hover {
    transform: translateY(-2px);
    box-shadow: var(--jr-shadow-md);
    border-left-color: var(--jr-gold);
}

.pkp_structure_main .obj_article_summary .title { margin-bottom: 4px; }
.pkp_structure_main .obj_article_summary .title a {
    display: inline-block;
    font-family: var(--jr-font-heading);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--jr-navy) !important;
    text-decoration: none;
    transform: none !important;
}

.pkp_structure_main .obj_article_summary .authors {
    margin-top: 4px;
    font-family: var(--jr-font-body);
    font-size: 13.5px;
    color: var(--jr-ink-soft) !important;
}

/* Tombol PDF / galley */
.pkp_structure_main .obj_article_summary .galleys_links a,
.obj_issue_toc .galleys a,
.obj_article_summary .galley_links a {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    background: var(--jr-navy) !important;
    border: none;
    border-radius: 20px;
    color: #ffffff !important;
    font-family: var(--jr-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--jr-transition);
}
.pkp_structure_main .obj_article_summary .galleys_links a:hover,
.obj_issue_toc .galleys a:hover,
.obj_article_summary .galley_links a:hover {
    background: var(--jr-teal) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--jr-shadow-sm);
}

/* Badge nomor halaman — gaya "metadata ilmiah" pakai monospace */
.pkp_structure_main .obj_article_summary .pages {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--jr-gold-light) !important;
    border: 1px solid var(--jr-gold);
    border-radius: var(--jr-radius-sm);
    padding: 3px 9px;
    font-family: var(--jr-font-mono);
    font-size: 12px;
    color: #7A5A16 !important;
}

.cmp_announcements .obj_announcement_summary.full_width { width: 100% !important; }
.cmp_announcements .obj_announcement_summary .summary p {
    line-height: 1.5; margin-top: 0 !important; margin-bottom: 1em !important;
}

/* =====================================================================
   6. HALAMAN INDEX JURNAL — kerapatan antar-section
   ===================================================================== */

.page_index_journal section { margin: 0 0 24px 0 !important; padding: 0 !important; }
.page_index_journal .about_journal,
.page_index_journal .journal-description { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.page_index_journal .current_issue { margin-top: 8px !important; padding-top: 0 !important; }
.page_index_journal .current_issue h2 {
    margin: 0 0 12px 0 !important;
    padding: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    border-bottom: 2px solid var(--jr-gold);
    display: inline-block;
}
.page_index_journal .cmp_grid,
.page_index_journal .issue_summary { margin: 0 !important; padding: 0 !important; }
.page_index_journal .current_issue .media { margin-top: 0 !important; }
.page_index_journal p { margin-bottom: 10px !important; line-height: 1.65; }

/* Front Cover / Full Issue */
.obj_issue_toc { margin-top: 0 !important; padding-top: 0 !important; }
.obj_issue_toc .galleys {
    margin: 0 !important; padding: 0 !important;
    display: flex; gap: 8px; flex-wrap: wrap;
    border: none !important;
}
.obj_issue_toc .galleys::before,
.obj_issue_toc .galleys::after { display: none !important; }
.obj_issue_toc .galleys h2,
.obj_issue_toc .galleys h3 { display: none !important; }
.page_index .obj_issue_toc .galleys a { font-size: 0 !important; }
.page_index .obj_issue_toc .galleys a::after { font-size: 13px !important; }

.obj_issue_toc .current_issue,
.obj_issue_summary { margin-top: 8px !important; padding-top: 0 !important; }
.obj_issue_summary .series,
.obj_issue_summary h2 { margin: 0 !important; padding: 0 !important; }
.obj_issue_summary .published {
    margin: 8px 0 !important;
    font-family: var(--jr-font-mono);
    font-size: 13px;
    color: var(--jr-ink-soft);
}
.obj_issue_toc section { margin-bottom: 8px !important; }

/* =====================================================================
   7. TIM EDITORIAL
   ===================================================================== */

.editorial-list { position: relative; }
.editorial-list li { margin-bottom: 1.25rem; }
.editorial-list .img-profile {
    position: absolute;
    width: 95px;
    height: 105px;
    border: 1px solid var(--jr-border);
    border-radius: var(--jr-radius-sm);
    padding: .5rem;
    background: var(--jr-white);
}
.editorial-list .img-profile .imgthumb {
    width: 75px; height: 85px;
    overflow: hidden;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 4px;
}
.editorial-list .img-profile img { width: 100%; height: 100%; }

.team-content { margin-left: 112px; min-height: 130px; }
.team-content, .team-content html, .team-content body {
    font-family: var(--jr-font-body);
    font-size: 14px;
    color: var(--jr-ink);
}
.team-content .ico-label { font-size: small; width: 14px; height: 14px; margin-right: .5rem; }

.team-aff ul li { margin-bottom: 0; }
.team-aff ul li .tm_label {
    font-family: var(--jr-font-mono);
    font-size: 12.5px;
    display: inline-block;
    width: 80px;
    color: var(--jr-ink-soft);
}
.team-aff ul li .ico-label {
    font-size: 13px;
    width: 13px; height: 13px;
    margin-right: .5rem;
}

/* =====================================================================
   8. INDEKS & LEMBAGA MITRA (indexing-section / indexed-by)
   ===================================================================== */

.indexing-section { padding: 28px 10px; }

.indexing-grid,
.indexed-by {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.index-item,
.indexed-by a {
    background: var(--jr-white);
    border: 1px solid var(--jr-border) !important;
    border-radius: var(--jr-radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    text-align: center;
    transition: transform var(--jr-transition), box-shadow var(--jr-transition), border-color var(--jr-transition);
}
.index-item img,
.indexed-by img {
    max-width: 100%;
    max-height: 42px;
    height: auto;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}
.index-item:hover,
.indexed-by a:hover {
    transform: translateY(-3px);
    box-shadow: var(--jr-shadow-md);
    border-color: var(--jr-gold) !important;
}

/* =====================================================================
   9. FOOTER (Modern)
   ===================================================================== */

:root {
    --jr-radius: 12px;
    --jr-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pkp_structure_footer_wrapper {
    border-bottom: transparent;
    background: transparent !important;
    padding: 0 12px 12px;
}

.pkp_structure_footer .pkp_footer_content {
    position: relative;
    background: linear-gradient(135deg, var(--jr-navy) 0%, var(--jr-navy-dark) 100%);
    color: #ffffff;
    padding: 12px 16px !important;
    border-radius: var(--jr-radius) var(--jr-radius) 0 0;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) inset,
                0 10px 24px -10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* thin glowing accent line along the top edge */
.pkp_structure_footer .pkp_footer_content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jr-gold-light) 50%,
        transparent 100%);
    opacity: 0.9;
}

.pkp_structure_footer .pkp_footer_content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.pkp_structure_footer .pkp_footer_content a {
    color: var(--jr-gold-light);
    text-decoration: none;
    position: relative;
    transition: color var(--jr-transition);
}

.pkp_structure_footer .pkp_footer_content a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--jr-transition);
}

.pkp_structure_footer .pkp_footer_content a:hover {
    color: #ffffff;
}

.pkp_structure_footer .pkp_footer_content a:hover::after {
    width: 100%;
}

/* brand strip beneath the main footer content */
.pkp_structure_footer .pkp_brand_footer {
    background: var(--jr-navy-dark);
    height: auto !important;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 var(--jr-radius) var(--jr-radius);
}

.pkp_structure_footer .pkp_brand_footer img {
    width: 28px !important;
    height: auto;
    opacity: 0.9;
    transition: transform var(--jr-transition), opacity var(--jr-transition);
}

.pkp_structure_footer .pkp_brand_footer img:hover {
    transform: scale(1.08);
    opacity: 1;
}

@media (max-width: 640px) {
    .pkp_structure_footer .pkp_footer_content {
        padding: 12px 16px !important;
        text-align: center;
    }
}

/* =====================================================================
   10. RESPONSIVE — MOBILE
   ===================================================================== */

@media screen and (max-width: 768px) {
    .pkp_structure_page,
    .pkp_structure_content,
    .pkp_structure_main {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }
    .pkp_structure_content { display: block !important; }
    .pkp_structure_main { float: none !important; width: 100% !important; }
    .pkp_structure_sidebar { float: none !important; width: 100% !important; margin-top: 24px !important; }
    .pkp_structure_page { overflow-x: hidden !important; }

    .cmp_article_list { width: 100% !important; }
    .cmp_article_list > li { width: 100% !important; margin-bottom: 10px !important; }
    .obj_article_summary { width: 100% !important; box-sizing: border-box; }

    img { max-width: 100% !important; height: auto !important; }

    .team-content { margin-left: 0; margin-top: 116px; }
    .editorial-list .img-profile { position: static; margin-bottom: 10px; }
}

.custom-menu-btn{
    display:block;
    background:#00A18C;
    color:#FFFFFF !important;
    padding:12px;
    margin:4px 0;
    border-radius:6px;
    text-decoration:none !important;
    font-weight:bold;
    text-align:center;
    transition:all .3s ease;
    border:1px solid #00A18C;
}

.custom-menu-btn:hover{
    background:#00907d;
    color:#99B720 !important;
    border-color:#99B720;
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(0,0,0,.18);
}
/* ==========================
   USER MENU (Register/Login)
   ========================== */

.pkp_navigation_user_wrapper a,
.pkp_navigation_user_wrapper a:link,
.pkp_navigation_user_wrapper a:visited{
    color:#004f4d !important;
    font-weight:700 !important;
}

.pkp_navigation_user_wrapper a:hover{
    color:#00A18C !important;
}

/* ikon panah */
.pkp_navigation_user_wrapper .task_count,
.pkp_navigation_user_wrapper .dropdown-toggle{
    color:#004f4d !important;
}