/* =====================================================
   OJS 3.3 PREMIUM SIMPLE MOBILE FRIENDLY
   ===================================================== */

:root{
    --primary:#6c5f4b;
    --secondary:#f0eede;
    --white:#ffffff;
    --text:#333333;
    --border:#e0dccc;
}

/* BODY */
body{
    font-family:'Segoe UI',sans-serif;
    background:#f8f8f8;
    color:var(--text);
    line-height:1.7;
}

/* HEADER */
.pkp_structure_head{
    background:linear-gradient(135deg,#f0eede,#ffffff);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* Logo/Header OJS Responsive */
.pkp_site_name .is_img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-height: 1180px;
    object-fit: contain;
}

/* Tablet */
@media (max-width: 768px) {
    .pkp_site_name .is_img img {
        max-height: 120px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .pkp_site_name .is_img img {
        max-height: 80px;
        width: auto;
    }
}

.pkp_site_name a{
    color:var(--primary)!important;
    font-size:32px;
    font-weight:700;
    text-decoration:none;
}

.pkp_navigation_primary_wrapper{
    background:#fff;
}

/* Judul */
.info-title {
    background: #0f4c81;
    color: #fff;
    padding: 12px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* Container */
.info-content {
    border: 1px solid #dcdcdc;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* Menu */
.info-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-menu li {
    border-bottom: 1px solid #dcdcdc;
}

.info-menu li:last-child {
    border-bottom: none;
}

.info-menu li a {
    display: block;
    padding: 12px 15px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Efek Hover */
.info-menu li a:hover {
    background: #0f4c81;
    color: #ffffff;
    padding-left: 25px;
}

/* Efek aktif */
.info-menu li a:active {
    background: #08345b;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .info-title {
        font-size: 18px;
    }

    .info-menu li a {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* MENU */
.pkp_navigation_primary > li > a{
    color:var(--text)!important;
    font-weight:600;
    padding:15px 18px;
    transition:.3s;
}

.pkp_navigation_primary > li > a:hover{
    color:var(--primary)!important;
}

/* HERO JOURNAL */
.page_index_journal .homepage_image img{
    width:100%;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,.1);
}

/* CONTENT */
.obj_article_summary{
    background:#fff;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    border:1px solid var(--border);
    transition:.3s;
}

.obj_article_summary:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.obj_article_summary .title a{
    color:var(--primary);
    font-size:20px;
    font-weight:700;
}

/* SIDEBAR */
.pkp_block{
    background:#fff;
    border-radius:12px;
    padding:15px;
    margin-bottom:20px;
    border:1px solid var(--border);
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.pkp_block .title{
    color:var(--primary);
    font-weight:700;
    border-bottom:2px solid #f0eede;
    padding-bottom:10px;
    margin-bottom:10px;
}

/* BUTTON */
.btn,
button,
input[type="submit"]{
    background:var(--primary)!important;
    color:#fff!important;
    border:none!important;
    border-radius:8px!important;
    padding:10px 20px!important;
    transition:.3s;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
    opacity:.9;
    transform:translateY(-2px);
}

/* ANNOUNCEMENT */
.obj_announcement_summary{
    background:#fff;
    padding:20px;
    border-radius:12px;
    border:1px solid var(--border);
    margin-bottom:20px;
}

/* ISSUE COVER */
.obj_issue_summary{
    background:#fff;
    padding:20px;
    border-radius:12px;
    border:1px solid var(--border);
}

/* ARTICLE PAGE */
.article-details{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

/* FOOTER */
.pkp_structure_footer_wrapper{
    background:#fff;
    border-top:1px solid var(--border);
    padding:30px 0;
    margin-top:40px;
}

.pkp_structure_footer{
    color:#666;
}

/* SEARCH BOX */
.pkp_search{
    border-radius:50px;
    overflow:hidden;
}

.pkp_search input{
    border:none;
    background:#fff;
}

/* LOGIN FORM */
.page_login .login{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

/* TABLE */
table{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
}

/* LINKS */
a{
    color:var(--primary);
}

a:hover{
    text-decoration:none;
}

/* BADGE */
.badge{
    background:#f0eede;
    color:var(--primary);
}

/* MOBILE */
@media screen and (max-width:768px){

    .pkp_site_name a{
        font-size:24px;
        text-align:center;
        display:block;
    }

    .pkp_navigation_primary{
        display:block;
        width:100%;
    }

    .pkp_navigation_primary li{
        width:100%;
        border-bottom:1px solid #eee;
    }

    .pkp_navigation_primary li a{
        display:block;
        padding:12px 15px;
    }

    .obj_article_summary{
        padding:15px;
    }

    .obj_article_summary .title a{
        font-size:18px;
    }

    .pkp_block{
        margin-top:20px;
    }

    .homepage_image img{
        border-radius:10px;
    }
}

/* EXTRA MODERN EFFECT */
.obj_article_summary,
.pkp_block,
.obj_issue_summary,
.obj_announcement_summary{
    transition:all .3s ease;
}

.obj_article_summary:hover,
.pkp_block:hover{
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

/* SCROLLBAR */
::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#f0eede;
}

::-webkit-scrollbar-thumb{
    background:#6c5f4b;
    border-radius:20px;
}