/* =======================================================
   1. PENGATURAN HEADER & LOGO (SYNTAX NAVY-TEAL THEME)
   ======================================================= */


.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 { display: inline-block; margin: 0; padding: 0; }
.pkp_site_name .is_img img { max-height: 300px !important; margin: 0; }
.pkp_head_wrapper, .has_site_logo .pkp_head_wrapper { position: relative; padding-top: 10px; background: transparent; }
.pkp_site_name_wrapper { padding-left: 0; padding-right: 0; }


/* =======================================================
   2. TOP NAV BAR & STICKY MENU ATAS
   ======================================================= */
.pkp_navigation_user_wrapper {
    background-color: #009F8C; /* Teal Syntax */
    top: 0; right: 0; padding: 5px 15px; 
}
.pkp_navigation_user > li > a { color: #ffffff !important; font-weight: 600; font-size: 0.85rem; }
.pkp_navigation_user > li > a:hover { color: #F4B324 !important; } /* Highlight Kuning */

.pkp_navigation_primary_wrapper {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-bottom: 2px solid #009F8C;
}
.pkp_navigation_primary_row { padding-left: 2.143rem; padding-right: 2.143rem; }
#navigationPrimary > li > a {
    padding-bottom: 8px; padding-top: 8px; border-bottom: 3px solid transparent; transition: all 0.3s ease !important; font-weight: 600; color: #475569; 
}
@media (min-width: 992px) { #navigationPrimary a { color: #0D223B; } }
#navigationPrimary > li > a:hover {
    color: #009F8C !important; border-bottom-color: #009F8C; background-color: transparent;
}

/* =======================================================
   3. PENCARIAN
   ======================================================= */
.pkp_navigation_search_wrapper a { padding-bottom: 6px; border-bottom: 3px solid transparent; color: #ffffff; transition: all 0.3s ease; }
.pkp_navigation_search_wrapper a:hover { color: #F4B324; border-bottom-color: #F4B324; }

/* =======================================================
   4. TAMPILAN HALAMAN & ARTIKEL
   ======================================================= */
body { font-family: 'Montserrat', sans-serif; background-color: #f8fafc; } 
a { color: #009F8C; transition: color 0.2s ease; }
a:hover { color: #0D223B; text-decoration: none; }
.pkp_structure_page { margin-top: 0px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.pkp_block { padding: 20px; }
.pkp_page_index .current_issue h2 { display: inline-block; padding-bottom: 0.5em; border-bottom: 3px solid #009F8C; text-transform: uppercase; font-weight: 800; color: #0D223B; letter-spacing: 0.5px; }

.cmp_article_list > li {
    margin-bottom: 1.8rem; background-color: #ffffff; padding: 22px 25px; border-radius: 10px; border: 1px solid #e2e8f0; border-left: 5px solid transparent; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); transition: all 0.3s ease;
}
.cmp_article_list > li:hover {
    transform: translateY(-4px); border-left: 5px solid #009F8C; box-shadow: 0 10px 20px rgba(0, 159, 140, 0.1);
}

/* =======================================================
   5. QUICK MENU SIDEBAR 
   ======================================================= */
.custom-quick-menu { background-color: transparent; border: none; box-shadow: none; margin-bottom: 30px; }
.quick-menu-list { display: flex; flex-direction: column; gap: 10px; }
.quick-menu-item { 
    display: flex; align-items: center; justify-content: center; padding: 12px 20px; background-color: #009F8C; color: #ffffff !important; text-decoration: none; font-size: 0.95rem; font-weight: 600; border-radius: 6px; transition: all 0.3s ease; box-shadow: 0 3px 6px rgba(0, 159, 140, 0.2);
}
.quick-menu-item .qm-icon { display: none; }
.quick-menu-item:hover { 
    background-color: #0D223B; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(13, 34, 59, 0.3); 
}

/* =======================================================
   6. CUSTOM FOOTER FULL WIDTH
   ======================================================= */   
.pkp_structure_footer { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
.syntax-footer-wrapper {
    width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(135deg, #0D223B 0%, #091728 100%); color: #e2e8f0; font-family: 'Montserrat', sans-serif; padding: 60px 0 0 0; border-top: 5px solid #009F8C; overflow: hidden;
}
.syntax-footer-container { display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.syntax-footer-col { flex: 1; min-width: 250px; }
.syntax-footer-col h4 {
    color: #ffffff; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 25px; position: relative; padding-bottom: 12px;
}
.syntax-footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: #009F8C; border-radius: 2px; }
.syntax-footer-links { list-style: none; padding: 0; margin: 0; }
.syntax-footer-links li { margin-bottom: 15px; }
.syntax-footer-links a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; transition: all 0.3s ease; display: inline-flex; align-items: center; }
.syntax-footer-links a::before { content: '❯'; margin-right: 12px; font-size: 0.75rem; color: #009F8C; transition: transform 0.3s ease; }
.syntax-footer-links a:hover { color: #F4B324; transform: translateX(6px); }

/* =======================================================
   7. HALAMAN DETAIL ARTIKEL (ABSTRAK, PENULIS, PDF)
   ======================================================= */
.obj_article_details .authors {
    background: #ffffff; padding: 20px 25px; border-radius: 8px; border-left: 5px solid #009F8C; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.obj_article_details .authors .name { font-weight: 800; color: #0D223B; font-size: 1.2rem; margin-bottom: 5px; }
.obj_article_details .item.galleys .obj_galley_link {
    background-color: #009F8C !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 12px 25px !important; font-weight: 700 !important; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0, 159, 140, 0.3) !important; transition: all 0.3s ease !important;
}
.obj_article_details .item.galleys .obj_galley_link:hover {
    background-color: #0D223B !important; box-shadow: 0 6px 15px rgba(13, 34, 59, 0.4) !important; transform: translateY(-2px);
}

/* =======================================================
   8. INPUT FORM & KOTAK PENCARIAN
   ======================================================= */
input[type="text"]:focus, input[type="search"]:focus, textarea:focus {
    border-color: #009F8C !important; box-shadow: 0 0 0 3px rgba(0, 159, 140, 0.15) !important; outline: none !important;
}

/* =======================================================
   9. DESAIN SIDEBAR MODERN SYNTAX
   ======================================================= */
.syntax-sb-block {
    background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 22px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(13, 34, 59, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.syntax-sb-title {
    font-size: 0.95rem; font-weight: 700; color: #0D223B; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9; position: relative;
}
.syntax-sb-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 45px; height: 2px; background: #009F8C; }
.syntax-btn-template {
    display: block; background: linear-gradient(135deg, #009F8C 0%, #0D223B 100%); color: #ffffff !important; text-align: center; padding: 14px 10px; border-radius: 8px; font-weight: 700; text-decoration: none !important; transition: all 0.3s ease; margin-bottom: 8px;
}

/* =======================================================
   10. HALAMAN ABOUT THE JOURNAL
   ======================================================= */
.syntax-about-wrapper { font-family: 'Montserrat', sans-serif; color: #334155; }
.syntax-focus-section h3 {
    color: #0D223B; font-size: 1.4rem; font-weight: 800; border-bottom: 3px solid #009F8C; padding-bottom: 10px; margin-bottom: 20px; display: inline-block;
}
.focus-card {
    background-color: #ffffff; border: 1px solid #e2e8f0; border-left: 5px solid #009F8C; padding: 20px; border-radius: 8px; transition: all 0.3s ease;
}
.focus-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 159, 140, 0.1); border-left-color: #0D223B; }

/* =======================================================
   11. ADDITIONAL CONTENT (CALL FOR PAPER)
   ======================================================= */
.syntax-cfp-image::before {
    content: ''; position: absolute; top: 15px; left: -15px; width: 100%; height: 100%; border: 4px solid #009F8C; border-radius: 8px; z-index: -1; transition: all 0.3s ease;
}
.syntax-cfp-image:hover::before { top: 20px; left: -20px; border-color: #F4B324; }

/* =======================================================
   12. HALAMAN STATIS: FOCUS AND SCOPE
   ======================================================= */
.fs-intro-box { background-color: #f8fafc; border-left: 5px solid #009F8C; padding: 20px 25px; border-radius: 4px; margin-bottom: 35px; }
.fs-item:hover {
    background-color: #009F8C; color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 159, 140, 0.3); border-color: #009F8C;
}

/* =======================================================
   13. PROFIL EDITORIAL TEAM & REVIEWERS
   ======================================================= */
.team-card { border-top: 4px solid #009F8C; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 159, 140, 0.15); border-color: #009F8C; }
.team-name { color: #0D223B; }
.team-role { color: #009F8C; }

/* =======================================================
   14. PUBLICATION ETHICS
   ======================================================= */
.ethics-number {
    background: #009F8C; color: #ffffff; font-size: 1.25rem; font-weight: 800; min-width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 20px; box-shadow: 0 4px 10px rgba(0, 159, 140, 0.3);
}

/* =======================================================
   15. AUTHOR GUIDELINES
   ======================================================= */
.ag-bordered-box-title { color: #0D223B; border-bottom: 1px solid #cbd5e1; }

/* =======================================================
   16. PEER REVIEW PROCESS 
   ======================================================= */
.pr-card { border-left: 4px solid #009F8C; }
.pr-number { background: #0D223B; color: #ffffff; }

/* =======================================================
   17. OPEN ACCESS POLICY
   ======================================================= */
.oap-intro { border-left: 4px solid #009F8C; }
.oap-heading { color: #0D223B; border-bottom: 2px solid #cbd5e1; }

/* =======================================================
   18. PLAGIARISM CHECK 
   ======================================================= */
.pc-intro-box { border-left: 5px solid #009F8C; }
.pc-highlight-box { background: linear-gradient(135deg, #0D223B, #009F8C); }

/* =======================================================
   19. COPYRIGHT NOTICE
   ======================================================= */
.cn-intro-box { border-left: 4px solid #009F8C; }
.cn-heading { color: #0D223B; }

/* =======================================================
   20. ARTICLE PUBLICATION CHARGE (APC)
   ======================================================= */
.apc-intro-box { border-left: 4px solid #009F8C; }
.apc-banner { background: linear-gradient(135deg, #0D223B, #009F8C); }

/* =======================================================
   21. INDEXING PAGE
   ======================================================= */
.idx-intro-box { border-left: 4px solid #009F8C; }
.idx-btn { background-color: #0D223B; }
.idx-btn:hover { background-color: #009F8C; }

/* =======================================================
   22. CONTACT PAGE
   ======================================================= */
.ct-intro-box { border-left: 4px solid #009F8C; }
.ct-heading { color: #0D223B; }