body {           
    font-family: Arial, sans-serif;           
    font-size: 15px;           
    line-height: 1.75;           
    color: #263746;           
    background-color: #ffffff;           
}           
           
/* =========================           
   HEADINGS (ACADEMIC STYLE)           
========================= */           
h1, h2, h3, h4 {           
    font-family: Arial, sans-serif;           
    color: #172A3A;           
    font-weight: 510;           
    line-height: 1.3;           
    letter-spacing: 0.2px;           
}           
           
/* =========================           
   PARAGRAF           
========================= */           
p {           
    font-size: 13px;           
    line-height: 1.8;           
    color: #34495A;           
}           
           
/* =========================           
   LINK (BLACK NAVY ACADEMIC)           
========================= */           
a {           
    color: #3A506B;           
    text-decoration: none;           
    transition: 0.2s ease;           
}           
           
a:hover {           
    color: #172A3A;           
    text-decoration: underline;           
}           
        
/* =========================        
   LINK ACTIVE / CLICKED        
========================= */        
a:active {        
    color: #ffffff;        
    background: #0B1722;        
}        
           
/* =========================           
   MAIN OJS CONTAINER           
========================= */           
.pkp_block,           
.pkp_structure_main {           
    font-family: Arial, sans-serif;           
}           
           
/* =========================           
   SIDEBAR CARD (ACADEMIC CLEAN STYLE)           
========================= */           
.pkp_block {           
    background: #ffffff;           
    border: 1px solid #CBD5DF;           
    border-radius: 8px;           
    padding: 12px;           
           
    position: relative;           
    overflow: hidden;           
    transition: all 0.25s ease;           
}           
           
/* =========================           
   PREMIUM HOVER LINE           
========================= */           
.pkp_block::after {           
    content: "";           
    position: absolute;           
    bottom: 0;           
    left: -120%;           
    width: 120%;           
    height: 2px;           
           
    background: linear-gradient(           
        90deg,           
        transparent,           
        #3A506B,           
        transparent           
    );           
           
    transition: left 0.6s ease;           
}           
           
.pkp_block:hover::after {           
    left: 120%;           
}           
           
/* subtle academic hover */           
.pkp_block:hover {           
    transform: translateY(-2px);           
    box-shadow: 0 7px 20px rgba(23, 42, 58, 0.15);           
    border-color: #AEBCC9;           
}           
           
/* =========================           
   BUTTON UX (BLACK NAVY PRIMARY)           
========================= */           
button,           
.pkp_button {           
    background: #172A3A;           
    color: #ffffff;           
    border-radius: 5px;           
           
    font-family: Arial, sans-serif;           
           
    border: none;           
    cursor: pointer;           
    padding: 6px 12px;           
           
    transition: all 0.2s ease;           
}           
           
button:hover,           
.pkp_button:hover {           
    background: #243B53;           
    color: #ffffff;           
    transform: translateY(-1px);           
    box-shadow: 0 4px 12px rgba(23, 42, 58, 0.25);           
}           
           
button:active,           
.pkp_button:active {           
    background: #0B1722;           
    color: #ffffff;           
    transform: scale(0.98);           
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.20);           
}           
        
button:focus,        
.pkp_button:focus {        
    outline: 2px solid #71869A;        
    outline-offset: 2px;        
}        
           
/* =========================           
   FORM ELEMENTS (ACADEMIC CLEAN INPUT)           
========================= */           
input,           
select,           
textarea {           
    font-family: Arial, sans-serif;           
    font-size: 14px;           
           
    border: 1px solid #C5D0DA;           
    border-radius: 5px;           
    padding: 6px 10px;           
           
    outline: none;           
    transition: 0.2s ease;           
}           
           
input:focus,           
select:focus,           
textarea:focus {           
    border-color: #172A3A;           
    box-shadow: 0 0 0 2px rgba(23, 42, 58, 0.16);           
}           
           
/* =========================           
   TABLES (ACADEMIC DOCUMENT STYLE)           
========================= */           
table {           
    width: 100%;           
    border-collapse: collapse;           
    font-size: 14px;           
}           
           
th, td {           
    border: 1px solid #CBD5DF;           
    padding: 8px;           
}           
           
th {           
    background: #F1F4F7;           
    color: #172A3A;           
    text-align: left;           
    font-weight: 600;           
}           
           
/* =========================           
   RESPONSIVE           
========================= */           
@media (max-width: 768px) {           
    body {           
        font-size: 15px;           
    }           
           
    .pkp_block {           
        padding: 10px;           
    }           
           
    button,           
    .pkp_button {           
        width: 100%;           
    }           
}           
           
/* =========================           
   SIDEBAR MENU ITEM STYLE           
========================= */           
.pkp_block ul li {           
    list-style: none;           
    margin: 5px 0;           
}           
           
.pkp_block ul li a {           
    display: block;           
    padding: 7px 10px;           
    border-radius: 6px;           
           
    color: #34495A;           
    text-decoration: none;           
           
    transition: all 0.25s ease;           
}           
           
/* =========================           
   GLOBAL HOVER (BLACK NAVY ACADEMIC)           
========================= */           
.pkp_block a {           
    transition: all 0.25s ease;           
    border-radius: 6px;           
}           
           
.pkp_block a:hover {           
    background: #E8EEF3;           
    transform: translateX(2px);           
           
    box-shadow: 0 4px 12px rgba(23, 42, 58, 0.16);           
           
    color: #172A3A;           
    text-decoration: none;           
}           
        
/* =========================        
   SIDEBAR MENU ACTIVE / CLICK        
========================= */        
.pkp_block a:active {        
    background: #0B1722;        
    color: #ffffff !important;        
    transform: translateX(2px);        
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);        
    text-decoration: none;        
}        
        
/* =========================        
   SIDEBAR MENU KEYBOARD FOCUS        
========================= */        
.pkp_block a:focus-visible {        
    background: #DCE5ED;        
    color: #172A3A;        
    outline: 2px solid #3A506B;        
    outline-offset: 1px;        
    text-decoration: none;        
}        
        
/* =========================        
   ACTIVE OJS MENU / CURRENT PAGE        
========================= */        
.pkp_block a.active,        
.pkp_block li.active > a,        
.pkp_block .current > a,        
.pkp_block .active > a {        
    background: #172A3A;        
    color: #ffffff !important;        
    box-shadow: 0 4px 10px rgba(23, 42, 58, 0.20);        
}        
        
.pkp_block a.active:hover,        
.pkp_block li.active > a:hover,        
.pkp_block .current > a:hover,        
.pkp_block .active > a:hover {        
    background: #0B1722;        
    color: #ffffff !important;        
}        
           
/* =========================           
   SECTION VARIANTS           
========================= */           
.pkp_block:nth-of-type(1) a:hover {           
    box-shadow: 0 4px 12px rgba(23, 42, 58, 0.16);           
}           
           
.pkp_block:nth-of-type(2) a:hover {           
    box-shadow: 0 4px 12px rgba(58, 80, 107, 0.15);           
}           
           
.pkp_block:nth-of-type(3) a:hover {           
    box-shadow: 0 4px 12px rgba(36, 59, 83, 0.16);           
}           
           
/* =========================           
   ICON STYLE (ACADEMIC CLEAN)           
========================= */           
.pkp_block a img {           
    transition: transform 0.2s ease, opacity 0.2s ease;           
}           
           
.pkp_block a:hover img {           
    transform: scale(1.08);           
    opacity: 0.90;           
}           
        
.pkp_block a:active img {        
    transform: scale(0.96);        
    opacity: 1;        
}        
           
/* =========================           
   STATISTICS / COUNTER           
========================= */           
*[class*="stat"] {           
    box-shadow: 0 6px 18px rgba(23, 42, 58, 0.13) !important;           
    border-radius: 10px;           
    transition: all 0.25s ease;           
}           
           
*[class*="stat"]:hover {           
    transform: translateY(-2px);           
    box-shadow: 0 10px 25px rgba(23, 42, 58, 0.20) !important;           
}           
        
*[class*="stat"]:active {        
    transform: translateY(0);        
    box-shadow: 0 3px 10px rgba(23, 42, 58, 0.23) !important;        
}