:root {
    --primary: #fddd00;
    --secondary: #009846;
    --accent: #e31e24;
    --white: #ffffff;
    --black: #000000;
    --dark-grey: #575757;
    --light-grey: #cbcbcb;
}

body {
    background-color: #f7f7f7;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #dedede 0, #dedede 1px, #f7f7f7 0, #f7f7f7 50%);
}

.pkp_site_nav_toggle{
    background-color: var(--primary) !important;
}

/* Mengubah warna teks judul jurnal pada header OJS 3.5 */
.pkp_head_wrapper .pkp_site_name a {
    color: var(--black) !important;
    text-decoration: none !important;
}

/* Mengatur warna saat judul disorot (hover) */
.pkp_head_wrapper .pkp_site_name a:hover {
    color: var(--black) !important;
    opacity: 0.8; /* Memberikan sedikit efek visual saat disentuh */
}

.pkp_structure_content {
    background-color: var(--white)
}

/* FONT */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Merriweather:ital,wght@0,400;0,700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    /* Font dasar */
}

.obj_article_details .abstract {
    font-family: 'Merriweather', serif;
    /* Font khusus abstrak agar lebih akademik */
}

/* Mengubah ukuran font dasar untuk seluruh halaman */
body {
    font-size: 16px;
    /* Ukuran standar OJS biasanya 14px, 16px lebih nyaman dibaca */
    line-height: 1.6;
    /* Memberikan spasi antar baris agar tidak rapat */
    font-family: 'Montserrat', sans-serif;
    /* Sesuai preferensi Anda sebelumnya */
}

/* Mengubah ukuran font pada teks utama artikel/abstrak */
.obj_article_details .main_entry .abstract,
.obj_article_details .main_entry .full_text {
    font-size: 1.1em;
    /* Sedikit lebih besar dari ukuran body */
}

/* Mengubah ukuran font pada Sidebar */
.pkp_structure_sidebar .block .content {
    font-size: 15px;
}

/* Memastikan teks menu navigasi tetap proporsional */
.pkp_navigation_primary>li>a {
    font-size: 1em !important;
    /* Menaikkan sedikit dari 0.9em */
}

/* Menghilangkan latar hitam dan memastikan teks putih saat diklik/aktif */
.pkp_navigation_primary>li>a:hover {
    font-weight: 600;
    outline: none;
    /* Menghilangkan garis outline biru bawaan browser */
}

.pkp_navigation_primary>li>a:focus,
.pkp_navigation_search_wrapper>a:focus {
    background-color: var(--primary);
    color: var(--black);
}

.page_index_journal h3,
.page h2 {
    background-color: var(--secondary) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 10px;
}

/* End of FONT */

/* Pengaturan Header dan Navigasi */
.pkp_structure_head {
    background-color: var(--white);
}

.pkp_site_nav_menu {
    background-color: var(--primary) !important;
    margin-top: 10px;
    padding: 0px 30px;
}

.pkp_navigation_primary>li>a {
    color: var(--black) !important;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Tombol Aksi (Submit, Login, Register) */
.pkp_navigation_user_wrapper .pkp_navigation_user>li>a {
    background: var(--secondary);
    color: var(--white);
    padding: 5px 15px !important;
    margin: 10px 5px 10px 0px;
}

/* Sidebar Custom Block */
.pkp_structure_sidebar .block {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.pkp_structure_sidebar .block .title {
    background-color: var(--secondary);
    color: var(--white);
    padding: 10px;
    font-size: 1.1em;
    text-transform: capitalize;
}

/* Tipografi Artikel */
.obj_article_summary .title a {
    color: var(--secondary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.obj_article_summary .title a:hover {
    color: var(--secondary);
}

/* Footer */
/* 1. Pengaturan untuk Tampilan Desktop (Bersebelahan) */
.pkp_structure_footer {
    display: flex;
    flex-direction: row;
    /* Bersebelahan secara horizontal */
    justify-content: space-between;
    /* Memberi jarak antar elemen */
    align-items: center;
    /* Sejajar secara vertikal di tengah */
    gap: 20px;
}

.pkp_footer_content {
    flex: 2;
    /* Mengambil ruang lebih besar untuk teks lisensi/info */
}

.pkp_brand_footer {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Logo mepet ke kanan pada desktop */
}

/* 2. Pengaturan untuk Tampilan Mobile (Bertumpuk) */
@media (max-width: 767px) {
    .pkp_structure_footer {
        flex-direction: column;
        /* Mengubah arah menjadi vertikal/tumpuk */
        text-align: center;
        /* Menengahkan teks di footer content */
    }

    .pkp_footer_content {
        order: 1;
        /* Memastikan konten berada di atas */
        width: 100%;
    }

    .pkp_brand_footer {
        order: 2;
        /* Memastikan brand (logo) berada di bawah */
        width: 100%;
        justify-content: center;
        /* Menengahkan gambar/logo secara horizontal */
        margin-top: 20px;
    }

    .pkp_brand_footer img {
        margin: 0 auto;
        /* Memastikan gambar benar-benar di tengah */
    }

    .pkp_footer_content {
        order: 1;
        /* Konten teks di atas */
        text-align: center;
        /* Teks rata tengah sesuai permintaan */
        width: 100%;
    }
}

/* Hyperlink Color */

/* Menargetkan tautan spesifik pada daftar artikel agar konsisten */
.obj_article_summary .title a,
.obj_article_details .title {
    color: var(--accent) !important;
}

/* Mengubah warna link pada sidebar (blok kustom) */
.pkp_structure_sidebar .block a,
.pkp_structure_main a {
    color: var(--accent) !important;
}

/* Mengubah warna breadcrumb (navigasi jejak halaman) */
.pkp_structure_breadcrumb ol li a {
    color: var(--accent) !important;
}

/* SIDE BAR */
/* Menargetkan semua link di dalam sidebar bagian kiri */
.pkp_structure_sidebar .left a,
.pkp_structure_sidebar a {
    color: var(--accent) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Mengatur warna saat hover agar tetap konsisten */
.pkp_structure_sidebar .left a:hover,
.pkp_structure_sidebar a:hover {
    color: var(--accent) !important;
    /* Berubah ke merah aksen saat disentuh */
    text-decoration: underline;
}

/* Memastikan warna link di dalam list/daftar sidebar juga berubah */
.pkp_structure_sidebar .left ul li a {
    color: var(--accent) !important;
}

/* DROP DOWN */
/* Mengubah gaya dasar link di dalam dropdown menu */
.dropdown-menu>li>a {
    color: var(--black);
    /* Warna awal teks sebelum hover */
    border-left: 3px solid transparent;
    /* Garis transparan agar tidak goyang saat muncul */
    transition: all 0.3s ease;
    padding-left: 15px;
    /* Memberi ruang untuk garis di kiri */
}

/* Mengubah warna teks dan garis kiri saat HOVER */
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    color: var(--accent) !important;
    /* Teks jadi merah aksen */
    background-color: #f8f9fa;
    /* Latar belakang tipis agar teks menonjol */
    border-left: 4px solid var(--accent) !important;
    /* Garis merah muncul di kiri */
    padding-left: 15px;
    text-decoration: none;
}

/* Jika OJS menggunakan class khusus 'active' pada dropdown */
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover {
    color: var(--accent) !important;
    border-left: 4px solid var(--accent) !important;
}

/* devider */
.my-divider {
    height: 1px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    /* Menghapus persentase ganda agar warna memudar satu sama lain */
    background: linear-gradient(to right,
            #009846,
            #fddd00,
            #e31e24);
    border: none;
}

.btn-submission {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 12px 24px !important;
    background-color: var(--accent) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    /* Menggunakan Inter agar senada dengan body */
    font-weight: 600;
    /* Sedikit lebih tebal untuk kesan tombol aksi */
    font-size: 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 10px;
    margin-bottom: 15px;
    /* Memberi jarak dengan konten di bawahnya */
    width: 100%;
    /* Opsional: Agar tombol memenuhi lebar sidebar */
    box-sizing: border-box;
}

/* Menggabungkan semua state interaktif */
.btn-submission:hover,
.btn-submission:focus,
.btn-submission:active {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    /* Efek angkat sedikit saat hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.arrow {
    font-size: 1.2rem;
    color: inherit;
    /* Otomatis mengikuti warna teks induknya */
    line-height: 1;
    transition: transform 0.3s ease;
}

.btn-submission:hover .arrow {
    transform: translateX(5px);
    /* Panah bergeser sedikit ke kanan saat hover */
}

.btn-download {
    border:1px solid #3a80bc ;
    transition: transform 0.1s ease, opacity 0.1s ease;
    cursor: pointer;
}

.btn-download:active {
    transform: scale(0.95);
    opacity: 0.8;
}