body { 
    font-family: "Roboto", Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.75; 
    color: #18231f; 
    background-color: #ffffff; 
} 
 
/* ========================= 
   HEADINGS 
========================= */ 
h3, h3, h4, h4 { 
    font-family: "Roboto", Arial, sans-serif; 
    color: #173f35; 
    font-weight: 490; 
    line-height: 1.2; 
} 
 
/* ========================= 
   PARAGRAF 
========================= */ 
p { 
    font-size: 13px; 
    line-height: 1.5; 
    color: #3d4b46; 
} 
 
/* ========================= 
   LINK 
========================= */ 
a { 
    color: #28705c; 
    text-decoration: none; 
    transition: 0.2s ease; 
} 
 
a:hover { 
    color: #173f35; 
    text-decoration: underline; 
} 


/* =========================================================
   HOMEPAGE HEADER ONLY - DARK GREEN
   Tidak mengubah header halaman detail artikel
========================================================= */

.pkp_page_index .pkp_structure_head {
    background: linear-gradient(
        125deg,
        #102f21 0%,
        #163d2b 48%,
        #285943 100%
    );

    position: relative;
    overflow: hidden;
}

/* Aksen garis gradien kimia pada header homepage */

.pkp_page_index .pkp_structure_head::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 43%,
            rgba(255, 255, 255, 0.075) 43.15%,
            transparent 43.4%
        ),
        linear-gradient(
            35deg,
            transparent 0%,
            transparent 65%,
            rgba(164, 205, 174, 0.11) 65.15%,
            transparent 65.4%
        ),
        linear-gradient(
            155deg,
            transparent 0%,
            transparent 82%,
            rgba(255, 255, 255, 0.055) 82.15%,
            transparent 82.4%
        );
}

/* Konten header tetap berada di atas aksen */

.pkp_page_index .pkp_head_wrapper {
    position: relative;
    z-index: 1;
}

/* Navigasi khusus homepage */

.pkp_page_index .pkp_navigation_primary_wrapper {
    background: linear-gradient(
        90deg,
        #163d2b,
        #1d4833,
        #285943
    );

    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* =====================================================
   NAVIGATION
===================================================== */

.navbar-default .navbar-nav > li > a,
.pkp_navigation_primary > li > a {
    color: #f1f8f5 !important;
    transition: all .25s ease;
}


.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;

    background: rgba(255,255,255,.08) !important;

    border-radius: 5px;
}


/* Active navigation */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.pkp_navigation_primary > li.current > a {
    color: #ffffff !important;

    background: rgba(255,255,255,.12) !important;

    border-radius: 5px;
}


/* =====================================================
   MAIN OJS CONTAINER
===================================================== */

.pkp_block, 
.pkp_structure_main { 
    font-family: "Roboto", Arial, sans-serif; 
} 


/* =====================================================
   SIDEBAR CARD
===================================================== */

.pkp_block { 
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5faf7 100%
    ); 

    border: 1px solid #d9e7e1; 
    border-radius: 8px; 
    padding: 12px; 
 
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s ease; 
} 


/* =====================================================
   PREMIUM HOVER LINE
===================================================== */

.pkp_block::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: -120%; 
    width: 120%; 
    height: 3px; 
 
    background: linear-gradient(
        90deg, 
        transparent,
        #205c4b,
        #3d8b70,
        transparent
    ); 
 
    transition: left 0.5s ease; 
} 
 
.pkp_block:hover::after { 
    left: 120%; 
} 


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

.pkp_block:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 9px 22px rgba(23,63,53,.12); 
} 


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

button, 
.pkp_button { 
    background: linear-gradient(
        135deg,
        #173f35 0%,
        #205c4b 60%,
        #28705c 100%
    ); 

    color: #fff; 
    border-radius: 5px; 
    font-family: "Roboto", Arial, sans-serif; 
 
    border: 1px solid #173f35; 
    cursor: pointer; 
    padding: 6px 12px; 
 
    transition: all 0.2s ease; 
} 
 
button:hover, 
.pkp_button:hover { 
    background: linear-gradient(
        135deg,
        #205c4b,
        #28705c
    ); 

    transform: translateY(-1px); 

    box-shadow: 0 5px 12px rgba(23,63,53,.20);
} 
 
button:active, 
.pkp_button:active { 
    transform: scale(0.98); 
} 


/* =====================================================
   FORM ELEMENTS
===================================================== */

input, 
select, 
textarea { 
    font-family: "Roboto", Arial, sans-serif; 
    font-size: 14px; 
 
    border: 1px solid #d4e0db; 
    border-radius: 5px; 
    padding: 6px 10px; 
 
    outline: none; 
    transition: 0.2s ease; 
} 
 
input:focus, 
select:focus, 
textarea:focus { 
    border-color: #28705c; 
    box-shadow: 0 0 0 2px rgba(40,112,92,.14); 
} 


/* =====================================================
   TABLES
===================================================== */

table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 14px; 
} 
 
th, td { 
    border: 1px solid #dce8e3; 
    padding: 8px; 
} 
 
th { 
    background: #f1f7f4; 
    color: #173f35; 
    text-align: left; 
} 


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

.pkp_block ul li { 
    list-style: none; 
    margin: 6px 0; 
} 


/* LINK ITEM DEFAULT */

.pkp_block ul li a { 
    display: block; 
    padding: 6px 10px; 
    border-radius: 7px; 
 
    color: #33443e; 
    text-decoration: none; 
 
    transition: all 0.25s ease; 
} 


/* =====================================================
   BASIC LINK STYLE RESET
===================================================== */

.pkp_block a { 
    transition: all 0.25s ease; 
} 


/* =====================================================
   MENU ITEM BASE STYLE
===================================================== */

.pkp_block a { 
    border-radius: 7px; 
} 


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

.pkp_block a:hover {  
    background: #e8f3ee;  
    transform: translateX(3px); 
 
    box-shadow: 0 5px 14px rgba(23,63,53,.12);  
 
    color: #205c4b; 
} 


/* =====================================================
   SECTION 1
===================================================== */

.pkp_block:nth-of-type(1) a:hover { 
    box-shadow: 0 5px 14px rgba(40,112,92,.18); 
} 


/* =====================================================
   SECTION 2
===================================================== */

.pkp_block:nth-of-type(2) a:hover { 
    box-shadow: 0 5px 14px rgba(32,92,75,.18); 
} 


/* =====================================================
   SECTION 3
===================================================== */

.pkp_block:nth-of-type(3) a:hover { 
    box-shadow: 0 5px 14px rgba(23,63,53,.16); 
} 


/* =====================================================
   ICON ALIGNMENT
===================================================== */

.pkp_block a img { 
    transition: transform 0.2s ease; 
} 
 
.pkp_block a:hover img { 
    transform: scale(1.08); 
} 


/* =====================================================
   DARK GREEN FOOTER
===================================================== */

.pkp_structure_footer,
.pkp_footer {
    background:
        linear-gradient(
            135deg,
            #102f29 0%,
            #173f35 42%,
            #205c4b 78%,
            #28705c 100%
        ) !important;

    color: #eaf4f0 !important;

    border-top: 1px solid rgba(255,255,255,.10);

    position: relative;
    overflow: hidden;
}


/* Footer technical diagonal pattern */

.pkp_structure_footer::before,
.pkp_footer::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025) 25%,
            transparent 25%
        ) 0 0/42px 42px,

        linear-gradient(
            315deg,
            rgba(255,255,255,.018) 25%,
            transparent 25%
        ) 0 0/42px 42px;

    pointer-events: none;
}


/* Footer circular decoration */

.pkp_structure_footer::after,
.pkp_footer::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -130px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(255,255,255,.018),
        0 0 0 70px rgba(255,255,255,.012);

    pointer-events: none;
}


/* Footer content above decoration */

.pkp_structure_footer *,
.pkp_footer * {
    position: relative;
    z-index: 2;
}


/* Footer headings */

.pkp_structure_footer h1,
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4,
.pkp_footer h1,
.pkp_footer h2,
.pkp_footer h3,
.pkp_footer h4 {
    color: #ffffff !important;
}


/* Footer text */

.pkp_structure_footer p,
.pkp_footer p {
    color: #dcebe6 !important;
}


/* Footer links */

.pkp_structure_footer a,
.pkp_footer a {
    color: #d8eee7 !important;
    text-decoration: none;
}


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


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) { 

    body { 
        font-size: 15px; 
    } 
 
    .pkp_block { 
        padding: 10px; 
    } 
 
    button, 
    .pkp_button { 
        width: 100%; 
    }

    .pkp_structure_head::before {
        width: 80%;
    }

}