/*==================================================================
    ZIGUINMA JOURNAL THEME
    PART 1 - FOUNDATION & BACKGROUND GRAFIS LUAR
==================================================================*/

/*==========================
    GOOGLE FONT
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700;800&display=swap');

/*==========================
    ROOT
==========================*/

:root{

    --primary:#7A1420;
    --primary-dark:#500D15;
    --primary-light:#FBEAEA;

    --secondary:#9C1F2E;

    /* Warna emas kini HANYA dipakai untuk elemen di dalam sidebar
       (mis. list item "Additional Menu"), tidak lagi dipakai di
       header, tombol read more, badge DOI/keywords, tabel, atau footer */
    --gold:#D4AF37;
    --gold-dark:#B8941F;
    --gold-light:#F1E0A6;

    --text:#374151;
    --muted:#6B7280;

    --border:#E5E7EB;

    /* Warna dasar latar belakang putih bersih agar senada dengan contoh gambar */
    --background:#FFFFFF; 

    --white:#FFFFFF;

    --radius:8px;

    /* Bayangan kontainer jurnal diperhalus agar menyatu sempurna dengan latar batik soft */
    --shadow:
        0 15px 35px rgba(0, 0, 0, 0.05),
        0 1px 5px rgba(0, 0, 0, 0.03);

}

/*==========================
    RESET
==========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/*==================================================================
    KRITIKAL: BACKGROUND LUAR BATIK LINE-ART ABU-ABU SANGAT LEMBUT
==================================================================*/

body{

    background-color:#F3EDED !important;

    /* Motif garis lengkung & lingkaran konsentris bernuansa batik, senada dengan
       ornamen di banner ZIGUINMA, dipakai berulang sangat lembut di seluruh
       area luar kontainer jurnal — kini bernuansa merah maroon senada header */
    background-image:
        radial-gradient(circle at 20px 20px, rgba(122,20,32,0.07) 0, rgba(122,20,32,0.07) 2px, transparent 2px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%237A1420' stroke-width='1' opacity='0.09'%3E%3Ccircle cx='40' cy='40' r='34'/%3E%3Ccircle cx='40' cy='40' r='23'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3Ccircle cx='190' cy='190' r='34'/%3E%3Ccircle cx='190' cy='190' r='23'/%3E%3Ccircle cx='190' cy='190' r='12'/%3E%3Cpath d='M-10 120 Q 55 60 110 120 T 230 120'/%3E%3Cpath d='M-10 150 Q 55 90 110 150 T 230 150'/%3E%3Crect x='95' y='5' width='16' height='16' transform='rotate(45 103 13)'/%3E%3Crect x='5' y='195' width='16' height='16' transform='rotate(45 13 203)'/%3E%3C/g%3E%3C/svg%3E") !important;

    background-repeat: repeat;

    background-size: 220px 220px;

    color:var(--text);

    font-family:'Inter',sans-serif;

    font-size:15px;

    line-height:1.8;

    overflow-x:hidden;

}

/* Lapisan overlay dibuat jauh lebih tipis dibanding sebelumnya agar motif batik
   di atas tetap terbaca lembut di area luar kontainer, sesuai referensi gambar */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    z-index: -1;
}

/*==========================
    TYPOGRAPHY
==========================*/

h1{

    font-size:34px;

    font-weight:700;

    color:var(--text);

}

h2{

    font-size:28px;

    font-weight:700;

    color:var(--text);

}

h3{

    font-size:22px;

    font-weight:600;

}

h4{

    font-size:18px;

    font-weight:600;

}

p{

    margin-bottom:16px;

    color:var(--text);

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:var(--secondary);

}

/*==========================
    CONTAINER BOX UTAMA
    (margin-top dihilangkan supaya bagian atas kontainer pas/flush,
    tidak menampakkan background batik di atas header)
==========================*/

.pkp_structure_page{

    width:96%;

    max-width:1680px;

    margin:0 auto 40px !important;

    background:#ffffff !important;

    border-radius:6px;

    border-top-left-radius:0 !important;

    border-top-right-radius:0 !important;

    overflow:hidden;

    box-shadow:var(--shadow) !important;

    border: 1px solid rgba(0, 0, 0, 0.07);

}

/*==========================
    CONTENT
==========================*/

.pkp_structure_content{

    padding-top:25px;

    padding-bottom:40px;

}

/*==========================
    MAIN CONTENT
==========================*/

.pkp_page_index{

    padding:30px;

}

/*==========================
    IMAGE
==========================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*==========================
    SELECTION
==========================*/

::selection{

    background:var(--primary);

    color:white;

}

/*==========================
    SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/*==================================================================
    PART 2 - HEADER & MENU UTAMA (RATA KIRI & PERBAIKAN ANIMASI GESER)
==================================================================*/

/*==========================
    REMOVE DEFAULT SPACING
==========================*/

.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name{

    margin:0 !important;

    padding:0 !important;

}

/*==========================
    HEADER BACKGROUND
==========================*/

.pkp_structure_head{

    background:var(--primary);

    position: relative !important;

    width:100% !important;

    display:block !important;

    float:none !important;

}

.pkp_navigation_user{

    padding:8px 20px;

    width:100% !important;

    box-sizing:border-box !important;

}

/*==========================
    JOURNAL BANNER
    Tinggi banner dipendekkan (ramping) agar header tidak terlalu
    besar/tinggi, tetap konsisten dengan lebar kontainer saat resize
==========================*/

.pkp_site_name{

    width:100% !important;

    text-align:center !important;

    display: block !important;

    float: none !important;

    line-height:0 !important;

}

.pkp_site_name a{

    display:block !important;

    line-height:0 !important;

}

.pkp_site_name img{

    width:100% !important;

    max-width:100% !important;

    height:auto !important;

    max-height:210px !important;

    object-fit:cover !important;

    object-position:center !important;

    display:block !important;

}

/*==========================
    USER MENU
    (garis bawah emas dihilangkan, diganti garis gelap tipis
    agar header tidak terlalu ramai)
==========================*/

.pkp_navigation_user_wrapper{

    background:var(--primary-dark);

    border:none;

    border-bottom:2px solid rgba(0,0,0,0.25);

    width:100% !important;

    display:block !important;

    float:none !important;

    clear:both !important;

}

.pkp_navigation_user{

    padding:8px 20px;

}

.pkp_navigation_user a{

    color:#fff !important;

    font-size:14px;

}

/*==========================
    PRIMARY MENU WRAPPER
    (garis bawah emas dihilangkan)
==========================*/

.pkp_navigation_primary_wrapper{

    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;

    border:none !important;

    border-bottom:1px solid rgba(0,0,0,0.2) !important;

    box-shadow:none !important;

    padding: 3px 0 !important;

    width: 100% !important;

    clear: both !important;

    display: block !important;

}

/*==========================
    MENU UTAMA RATA KIRI
==========================*/

.pkp_navigation_primary{

    display:flex !important;

    justify-content: flex-start !important; 

    align-items:center !important;

    float: none !important;

    padding: 0 0 0 25px !important; 

    margin: 0 !important;

}

/*==========================
    MENU ITEM
==========================*/

.pkp_navigation_primary > li{

    margin: 0 3px !important;

    display: inline-block !important;

    float: none !important;

}

/*==================================================================
    FIXED ANIMASI GESER KIRI KE KANAN PADA MENU UTAMA
==================================================================*/

.pkp_navigation_primary > li > a{

    color:#fff !important;

    font-size:14px !important;

    font-weight:600 !important;

    padding: 8px 16px !important; 

    border-radius: 3px !important;

    display: block !important;
    
    transition: background-color 0.2s ease !important;

}

.pkp_navigation_primary > li > a:hover{

    background: rgba(255, 255, 255, 0.16) !important;

}

.pkp_navigation_primary > li > a:active{

    background: rgba(255, 255, 255, 0.3) !important;

}

/*==========================
    ACTIVE MENU
    (indikator emas diganti putih transparan)
==========================*/

.pkp_navigation_primary > .current > a{

    background: rgba(255, 255, 255, 0.22) !important;

    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.6) !important;

}

/*==========================
    DROPDOWN
==========================*/

.pkp_navigation_primary ul{

    background:#ffffff;

    border:none;

    border-radius:8px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    overflow:hidden;

}

.pkp_navigation_primary ul li a{

    color:#374151 !important;

    padding:12px 18px !important;

    transition:.3s;

}

.pkp_navigation_primary ul li a:hover{

    background:var(--primary-light);

    color:var(--primary) !important;

}

/*==========================
    IKON
    (ikon di header/menu kini putih, bukan emas, biar header
    lebih bersih; ikon di sidebar tetap tidak diubah di sini)
==========================*/

.pkp_navigation_user .fa,
.pkp_search .fa,
.pkp_navigation_primary .fa,
.pkp_head_wrapper i,
.pkp_navigation_user i{

    color:#ffffff !important;

}

/*==========================
    SEARCH BUTTON
    (border/warna emas diganti putih)
==========================*/

.pkp_head_wrapper .pkp_search{

    position: absolute !important;

    right: 25px !important;

    bottom: 5px !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 10;

}

.pkp_head_wrapper .pkp_search a{

    color:#ffffff !important;

    font-size: 14px !important;

    padding: 4px 12px !important;

    border-radius: 20px !important;

    background: transparent !important;

    border: 1px solid rgba(255,255,255,0.5) !important;

    display: inline-block !important;

    transition: all 0.2s ease;

}

.pkp_head_wrapper .pkp_search a:hover{

    background: rgba(255, 255, 255, 0.15) !important;

    color:#fff !important;

}

/*==========================
    REMOVE YELLOW LINE
==========================*/

body::before,
body::after{

    display:none !important;

}

/*==========================
    HIDE STRANGE FIXED OBJECT
==========================*/

div[style*="background: rgb(255"],
div[style*="background:#FFD"],
div[style*="#FFC107"],
div[style*="#FFD166"]{

    display:none !important;

}

/*==========================
    MOBILE
==========================*/

@media (max-width:768px){

.pkp_site_name img{

    width:100%;

    max-height:110px !important;

    object-fit:cover !important;

}

.pkp_navigation_primary{

    display:block !important;

    padding-left: 0 !important;

}

.pkp_navigation_primary > li > a{

    padding:14px 16px !important;

    border-radius: 0 !important;

}

.pkp_head_wrapper .pkp_search {

    position: static !important;

    margin: 10px auto !important;

    text-align: center;

    display: block;

}

}

/*=========================================================
    PART 3 - HOMEPAGE
=========================================================*/

.pkp_page_index{

    padding:35px;

}

.homepage_about{

    background:#ffffff;

    border:1px solid var(--border);

    border-left:6px solid var(--primary);

    border-radius:6px;

    padding:35px;

    margin-bottom:35px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

}

.homepage_about h2{

    color:var(--primary);

    margin-bottom:18px;

}

.homepage_about p{

    text-align:justify;

    line-height:1.9;

}

.cmp_announcements{

    margin-bottom:40px;

}

.obj_announcement_summary{

    background:#fff;

    border:1px solid var(--border);

    border-radius:6px;

    padding:28px;

    margin-bottom:25px;

    transition:.35s;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

}

.obj_announcement_summary:hover{

    transform:translateY(-3px);

}

.obj_announcement_summary .title{

    font-size:26px;

    margin-bottom:10px;

}

.obj_announcement_summary .title a{

    color:var(--primary);

}

.obj_announcement_summary .date{

    font-size:13px;

    color:#888;

    margin-bottom:15px;

}

.current_issue{

    display:flex;

    flex-wrap:wrap;

    gap:35px;

    background:#fff;

    border-radius:6px;

    border:1px solid var(--border);

    padding:35px;

    margin-bottom:40px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

}

.current_issue .cover{

    width:260px;

    flex-shrink:0;

}

.current_issue .cover img{

    width:100%;

    border-radius:8px;

    transition:.3s;

}

.current_issue .cover img:hover{

    transform:scale(1.02);

}

.current_issue .current_issue_title{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:15px;

}

.current_issue .description{

    flex:1;

}

.current_issue .description p{

    text-align:justify;

}

.current_issue .published{

    color:#666;

    margin-top:10px;

}

/*==========================
    READ MORE
    (emas dihapus, dipakai warna primary/maroon senada header)
==========================*/

.read_more{

    display:inline-block;

    margin-top:18px;

    background:var(--primary);

    color:#ffffff !important;

    padding:10px 20px;

    border-radius:6px;

    border:1px solid var(--primary-dark);

    font-weight:600;

    transition:.3s;

}

.read_more:hover{

    background:var(--primary-dark);

    color:#ffffff !important;

    border-color:var(--primary-dark);

}

.page_index_journal{

    margin-top:35px;

}

@media(max-width:768px){

.current_issue{

display:block;

}

.current_issue .cover{

width:220px;

margin:0 auto 25px;

}

}

/*=========================================================
    PART 4 - ARTICLE
=========================================================*/

.obj_article_summary{

    background:#fff;

    border:1px solid var(--border);

    border-radius:6px;

    padding:25px;

    margin-bottom:28px;

    transition:.3s;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

}

.obj_article_summary:hover{

    border-left:5px solid var(--primary);

}

.obj_article_summary .title{

    font-size:22px;

    line-height:1.5;

    margin-bottom:12px;

}

.obj_article_summary .title a{

    color:var(--text);

}

.obj_article_summary .title a:hover{

    color:var(--primary);

}

.obj_article_summary .authors{

    color:#6B7280;

    font-style:italic;

    margin-bottom:8px;

}

.obj_article_summary .meta{

    color:#9CA3AF;

    font-size:13px;

    margin-bottom:15px;

}

.obj_article_summary .summary{

    text-align:justify;

    line-height:1.9;

}

/*==========================
    DOI & KEYWORDS
    (border/background emas diganti nuansa merah muda-primary)
==========================*/

.item.doi{

    display:inline-block;

    background:var(--primary-light);

    color:var(--primary);

    padding:8px 15px;

    border-radius:30px;

    border:1px solid var(--primary-light);

    margin-top:10px;

}

.item.keywords{

    margin-top:15px;

}

.item.keywords span{

    display:inline-block;

    background:var(--primary-light);

    color:var(--primary);

    padding:5px 12px;

    border-radius:20px;

    margin:4px;

    font-size:12px;

    font-weight:600;

}

.obj_galley_link{

    display:inline-block;

    background:var(--primary);

    color:#fff !important;

    padding:10px 18px;

    border-radius:6px;

    border:1px solid var(--primary-dark);

    font-weight:600;

    transition:.3s;

}

.obj_galley_link:hover{

    background:var(--primary-dark);

    border-color:var(--primary);

}

.cmp_pagination{

    margin:35px 0;

    text-align:center;

}

.cmp_pagination a{

    display:inline-block;

    border:1px solid var(--border);

    padding:10px 15px;

    margin:3px;

    border-radius:6px;

}

.cmp_pagination a:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary-dark);

}

/*==========================
    SIDEBAR BLOCK CONTAINER
    (border emas DIPERTAHANKAN di sini karena termasuk elemen sidebar)
==========================*/

.pkp_block{

    background:#fff;

    border-radius:6px;

    border:1px solid var(--gold);

    margin-bottom:25px;

    overflow:hidden;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

}

.pkp_block .title{

    background:linear-gradient(90deg,var(--primary),var(--secondary)) !important;

    color:#fff !important;

    padding:14px 18px;

    font-size:13px;

    text-transform:uppercase;

    font-weight:700;

}

.pkp_block .title,
.pkp_block .title a,
.pkp_block h2,
.pkp_block h3,
.pkp_block h4{

    color:#fff !important;

}

.pkp_block .content{

    padding:15px;

}

.pkp_block ul{

    list-style:none;

}

.pkp_block li{

    border-bottom:1px solid #EEF2F7;

}

.pkp_block li:last-child{

    border-bottom:none;

}

.pkp_block li a{

    display:block;

    padding:11px;

    color:#374151;

    transition:.3s;

}

.pkp_block input{

    width:100%;

    border:1px solid #D1D5DB;

    border-radius:6px;

    padding:10px;

}

.pkp_block button{

    width:100%;

    margin-top:10px;

}

@media(max-width:768px){

.obj_article_summary{

padding:20px;

}

}

/*=========================================================
    PART 5 - FOOTER & OTHER SETTINGS
=========================================================*/

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:8px;

    overflow:hidden;

}

table th{

    background:var(--primary);

    color:#fff;

    padding:12px;

    border-bottom:2px solid var(--primary-dark);

}

table td{

    padding:12px;

    border-bottom:1px solid #ECECEC;

}

/*==========================
    FOOTER
    (gradasi emas dihapus, diganti warna maroon gelap senada header
    supaya tidak terlalu ramai; teks disesuaikan jadi putih)
==========================*/

.pkp_structure_footer_wrapper{

    margin-top:40px;

    background: var(--primary-dark);

    border-top: 3px solid var(--primary);

}

.pkp_structure_footer{

    max-width:1680px;

    margin:auto;

    padding:45px;

}

.pkp_structure_footer, .pkp_structure_footer p, .pkp_structure_footer a, .pkp_structure_footer li, .pkp_structure_footer span{

    color:#ffffff !important;

    font-size:14px;

}

.pkp_structure_footer a:hover{

    color:rgba(255,255,255,0.7) !important;

}

/*==================================================================
    SINKRONISASI COUMLN & INTEGRASI SISI ADITIONAL MENU 
==================================================================*/

@media (min-width: 992px) {
    .pkp_structure_content .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .pkp_structure_main.col-md-8 {
        width: 74% !important;   
        float: none !important;
        padding-right: 10px !important;
        flex: 0 0 74% !important;
    }
    
    .pkp_structure_sidebar.col-md-4 {
        width: 26% !important;   
        float: none !important;
        padding-left: 10px !important;  
        flex: 0 0 26% !important;
    }
}

.pkp_page_index, 
.obj_article_summary, 
.homepage_about, 
.cmp_announcements {
    width: 100% !important;
    padding: 30px !important;
}

.pkp_block .content,
.pkp_block ul,
.pkp_block li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.pkp_block {
    background: #ffffff !important;
}

.pkp_block .content {
    display: block !important;
    padding: 15px 12px !important;
    background: #ffffff !important;
}

.pkp_block ul {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_block li {
    width: 100% !important;
    display: block !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.pkp_block li:last-child {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/*==================================================================
    FIXED: EFEK GESER SLIDE KIRI KE KANAN DI ADDITIONAL MENU BUTTONS
    (background gold DIPERTAHANKAN karena ini bagian sidebar)
==================================================================*/

.pkp_block li a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: var(--gold) !important;
    color: var(--text) !important;

    padding: 13px 18px !important;
    border-left: none !important;

    border-radius: 0 !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .3px;
    text-transform: uppercase !important;
    box-shadow: none;

    transition: background-color 0.2s ease !important;
}

.pkp_block li a:hover {
    background: var(--gold-dark) !important;
    color: #ffffff !important;
}

.pkp_block li a:active {
    background: var(--gold-dark) !important;
    color: #ffffff !important;
}

/*==================================================================
    FIX TAMBAHAN: ITEM MENU NONAKTIF ("PEER REVIEWERS") MASIH TERBACA
    WARNA LAMA KARENA DIRENDER OJS DENGAN CLASS/TAG YANG TIDAK
    TERTANGKAP SELECTOR SEBELUMNYA. JARING SELECTOR DIPERLUAS + !important.
==================================================================*/

.pkp_block h1,
.pkp_block h2,
.pkp_block h3,
.pkp_block h4,
.pkp_block h5,
.pkp_block .widget_title,
.pkp_block .block_title,
.pkp_block .css_menu_title,
.pkp_structure_sidebar h1,
.pkp_structure_sidebar h2,
.pkp_structure_sidebar h3,
.pkp_structure_sidebar h4,
.pkp_structure_sidebar h5,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5 {
    color: var(--text) !important;
    background: none !important;
}

/* Item menu yang tidak aktif/tidak berupa link (mis. "Peer Reviewers"
   sebelum ada reviewer terdaftar) kini disamakan persis dengan tampilan
   item sidebar lain: background emas, teks gelap */
.pkp_block li:not(:has(a)),
.pkp_block li > span {
    display: block !important;
    width: 100% !important;
    background: var(--gold) !important;
    color: var(--text) !important;
    padding: 13px 18px !important;
    border-left: none !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .3px;
    text-transform: uppercase !important;
}

/*==================================================================
    JUDUL BLOCK SIDEBAR ("ADDITIONAL MENU" dll) DIHAPUS TOTAL
    Sebelumnya judul block ditampilkan sebagai bar terpisah di atas
    tiap kotak sidebar. Sekarang bar judul disembunyikan sepenuhnya
    supaya kotak sidebar langsung berisi daftar menu tanpa label,
    dan tampilan kotak jadi lebih menyatu/rapi di bagian atas.
    CATATAN: OJS merender semua judul block (Additional Menu, Journal
    Help, Make a Submission, dll) dengan class yang sama, jadi aturan
    ini menyembunyikan SEMUA judul block sidebar secara seragam. Kalau
    ternyata ada judul tertentu yang ingin tetap ditampilkan, beri tahu
    saya nama block-nya supaya bisa saya kecualikan.
==================================================================*/

.pkp_block .title{
    display: none !important;
}

.pkp_block .content{
    padding-top: 15px !important;
}