/* =========================================================
   REVISI HEADER JELS: banner dibuat full-width dan pas di OJS
   Rekomendasi gambar header: PNG/JPG rasio lebar, minimal 1600x450 px

   CSS OJS Dinamedia Style - FIXED v2
   Untuk OJS 3.x: Website Settings > Appearance > Advanced > Journal style sheet
   Perbaikan: menghilangkan layout patah/terpotong, sidebar nyasar, dan membuat halaman jurnal rapi seperti portal Dinamedia.
   ========================================================= */

/* RESET LAYOUT DASAR */
html, body {
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    color: #111;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    line-height: 1.55;
}

a { color: #0072bc; text-decoration: none; }
a:hover { color: #005f99; text-decoration: underline; }

/* BINGKAI UTAMA SEPERTI CONTOH DINAMEDIA */
.pkp_structure_page {
    max-width: 1200px !important;
    width: 1200px !important;
    margin: 24px auto !important;
    background: #fff !important;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 16px rgba(0,0,0,.10);
    overflow: hidden;
}

/* HEADER */
.pkp_structure_head,
.pkp_site_name_wrapper {
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

.pkp_site_name {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    min-height: 260px !important;
    overflow: hidden !important;
}

.pkp_site_name > a,
.pkp_site_name .is_text {
    color: #0a4f7a !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 30px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

/* HEADER BANNER IMAGE: dibuat penuh, tidak kecil di pojok */
.pkp_site_name .is_img,
.pkp_site_name .is_img a {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* LOGIN/USER MENU KANAN ATAS */
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 18px !important;
    right: 26px !important;
    z-index: 20 !important;
}

.pkp_navigation_user,
.pkp_navigation_user ul {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a {
    color: #000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* NAVIGASI UTAMA */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    background: #fff !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
}

.pkp_navigation_primary {
    margin: 0 !important;
    padding-left: 12px !important;
}

.pkp_navigation_primary > li > a {
    color: #0b6fa4 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    padding: 16px 28px !important;
}

.pkp_navigation_search_wrapper a {
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
}

/* KUNCI PERBAIKAN: KONTEN TIDAK BOLEH PECAH KE KANAN */
.pkp_structure_content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 48px 70px !important;
    box-sizing: border-box !important;
    background: #fff !important;
}

.pkp_structure_main {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Sidebar OJS sering membuat halaman seperti screenshot: tombol submission nyasar di kanan.
   Aktifkan ini agar tampilan bersih seperti contoh. */
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right,
#navigationUser,
.sidebar {
    float: none !important;
}

.pkp_structure_sidebar {
    display: none !important;
}

/* JUDUL & ISI HALAMAN JURNAL */
.page,
.page_about,
.page_index_journal {
    width: 100% !important;
    max-width: 100% !important;
}

.page h1,
.page_index_journal h1 {
    display: none !important;
}

.page h2,
.page h3,
.page h4,
.obj_issue_toc .heading,
.current_issue_title {
    color: #111 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: bold !important;
}

.page h2,
.page h3 {
    font-size: 18px !important;
    margin: 0 0 22px !important;
}

.page p,
.page_about p,
.page_index_journal p,
.pkp_structure_main p {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: #111 !important;
    margin: 0 0 18px !important;
    max-width: 790px !important;
}

/* TOMBOL BIRU */
.cmp_button,
.pkp_button,
.pkp_button_primary,
.block_make_submission a,
.obj_galley_link,
.read_more,
.current_issue .read_more,
.issue-toc .published a {
    display: inline-block !important;
    background: #008bd2 !important;
    border: 1px solid #008bd2 !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 6px 9px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.cmp_button:hover,
.pkp_button:hover,
.pkp_button_primary:hover,
.block_make_submission a:hover,
.obj_galley_link:hover,
.read_more:hover {
    background: #006fa8 !important;
    border-color: #006fa8 !important;
    text-decoration: none !important;
}

/* DAFTAR JURNAL UNTUK HALAMAN PORTAL / INDEX */
.journals,
.cmp_journal_list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.journals > ul,
.cmp_journal_list > ul { display: contents !important; }

.journals li,
.cmp_journal_list li,
.cmp_journal_list .journal {
    list-style: none !important;
    background: #fff !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 3px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    padding: 14px 12px 22px !important;
    min-height: 318px !important;
    overflow: hidden !important;
}

.journals img,
.cmp_journal_list img,
.cmp_journal_list .journal img {
    display: block !important;
    width: 76px !important;
    max-width: 76px !important;
    height: 112px !important;
    object-fit: cover !important;
    margin: 0 auto 20px !important;
    border-radius: 3px !important;
}

.journals h3,
.cmp_journal_list h3,
.cmp_journal_list .title,
.cmp_journal_list .journal_title {
    margin: 0 0 12px !important;
    color: #0072bc !important;
    font-family: "Courier New", Courier, monospace !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.25 !important;
}

.cmp_journal_list .description,
.cmp_journal_list .body,
.cmp_journal_list .details,
.journals .description {
    max-height: 112px !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
    padding: 8px 3px !important;
    margin-bottom: 12px !important;
    color: #000 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.cmp_journal_list .links a,
.cmp_journal_list .actions a,
.journals .links a {
    display: inline-block !important;
    background: #008bd2 !important;
    color: #fff !important;
    padding: 6px 8px !important;
    margin: 0 2px 4px 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* FOOTER */
.pkp_structure_footer_wrapper {
    background: #1f2b38 !important;
    border-top: 0 !important;
}

.pkp_footer_content {
    padding: 22px 24px !important;
    color: #fff !important;
    font-size: 12px !important;
}

/* RESPONSIVE */
@media (max-width: 920px) {
    .pkp_structure_page {
        width: 94% !important;
        max-width: 94% !important;
        margin: 16px auto !important;
    }
    .pkp_site_name { min-height: 220px !important; }
    .pkp_site_name .is_img,
    .pkp_site_name .is_img a,
    .pkp_site_name .is_img img { height: 220px !important; }
    .journals,
    .cmp_journal_list { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
    .pkp_structure_page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
    .pkp_structure_content { padding: 22px 16px 50px !important; }
    .pkp_site_name { padding: 0 !important; text-align: center !important; min-height: 170px !important; }
    .pkp_site_name .is_img,
    .pkp_site_name .is_img a,
    .pkp_site_name .is_img img { height: 170px !important; }
    .pkp_site_name > a,
    .pkp_site_name .is_text { font-size: 24px !important; }
    .pkp_navigation_user_wrapper { position: static !important; text-align: center !important; padding: 8px 0 !important; }
    .journals,
    .cmp_journal_list { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
    .journals,
    .cmp_journal_list { grid-template-columns: 1fr !important; }
}