/* ============================================================

   1. RESET GLOBAL: ANTI-SCROLL HORIZONTAL

   ============================================================ */

html, body {

    overflow-x: hidden !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}



* {

    box-sizing: border-box !important;

}



/* ============================================================

   2. HEADER & BANNER: STABILISASI AREA

   ============================================================ */

header.pkp_structure_head {

    width: 100% !important;

    background-color: #00735c!important; 

    position: relative !important;

}



header .pkp_head_wrapper {

    max-width: 1180px !important; 

    width: 100% !important;

    margin: 0 auto !important; 

    position: relative !important;

    padding: 0 !important;

}



.pkp_site_name_wrapper {

    display: block !important;

    width: 100% !important;

    height: 180px !important; 

    background-image: url("https://jurnal.fkip.unmul.ac.id/public/journals/47/pageHeaderLogoImage_en_US.png") !important;

    background-size: cover !important; 

    background-position: center !important;

}



.pkp_site_name_wrapper img {

    display: none !important;

}



/* ============================================================

   3. TOMBOL USER: CLEAN TEXT DENGAN DROPDOWN YANG JELAS

   ============================================================ */



/* Tetap menjaga posisi presisi di pojok kanan banner */

header .pkp_head_wrapper {

    position: relative !important;

    max-width: 1180px !important; 

    margin: 0 auto !important;

    display: block !important;

}



.pkp_navigation_user_wrapper {

    position: absolute !important;

    top: 20px !important; 

    right: 0 !important;

    left: auto !important;

    transform: none !important;

    z-index: 999 !important;

}



/* --- TOMBOL UTAMA (@JURNAL) --- */

.pkp_navigation_user > li > a {

    background: transparent !important; /* MENGHAPUS KOTAK HIJAU */

    color: #ffffff !important; /* Teks tetap putih agar terlihat di banner */

    border: none !important;

    font-size: 12px !important;

    font-weight: bold !important;

    text-transform: uppercase !important;

    box-shadow: none !important;

    padding: 8px 0 !important;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important; /* Bayangan teks agar terbaca jelas */

}



/* Warna teks saat kursor mendekat */

.pkp_navigation_user > li > a:hover {

    color: #F2CB05 !important; /* Berubah kuning saat hover */

}



/* --- ISI MENU DROPDOWN (Dashboard, Logout, dll) --- */

/* Kita tetap beri warna pada kotak dropdown agar teks di dalamnya terbaca */

.pkp_navigation_user ul {

    background:  #00735c !important; /* Hijau gelap Unmul untuk background list */

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

    padding: 5px 0 !important;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;

}



.pkp_navigation_user ul li a {

    background: transparent !important;

    color: #ffffff !important;

    padding: 10px 20px !important;

    font-size: 11px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.pkp_navigation_user ul li a:hover {

    background:  #00735c !important; /* Sedikit terang saat dipilih */

    color: #F2CB05 !important;

}



/* Menghilangkan angka notifikasi */

.pkp_navigation_user .pkp_unread_count {

    display: none !important;

}

/* ============================================================

   4. NAVIGASI UTAMA: RUANG UNTUK USER MENU

   ============================================================ */

.pkp_navigation_primary_wrapper .pkp_head_wrapper {

    max-width: 1180px !important;

    margin: 0 auto !important;

    padding-right: 150px !important; /* Memberi ruang agar menu tidak menabrak @JURNAL */

    position: relative !important;

}



/* Memastikan Search tetap di ujung kanan navigasi */

li.pkp_navigation_search_wrapper {

    position: absolute !important;

    right: 20px !important;

    top: 0 !important;

}

/* ============================================================

   5. KONTEN UTAMA & SIDEBAR

   ============================================================ */

.pkp_structure_content {

    display: block !important;

    max-width: 1180px !important;

    margin: 0 auto !important;

    padding: 0 20px !important;

}



.pkp_structure_main {

    float: left !important;

    width: 73% !important;

    padding: 30px 0 !important;

}



.pkp_structure_sidebar.left {

    float: right !important;

    width: 24% !important;

    padding: 30px 0 !important;

}



/* Membersihkan Float */

.pkp_structure_content::after {

    content: "" !important;

    display: table !important;

    clear: both !important;

}



/* ============================================================

   6. CLEAN UP: HAPUS LOGO PKP & ELEMEN PENGGANGGU

   ============================================================ */

.pkp_brand_footer, 

[href*="publicknowledgeproject"], 

.pkp_structure_content::before {

    display: none !important;

}



/* ============================================================

   MEMAKSA SEMUA BLOK SIDEBAR (VISITORS, TOOLS, DLL) 

   AGAR MEMANJANG RATA KE KANAN

   ============================================================ */



/* 1. Menghilangkan batasan lebar pada SEMUA kontainer blok bawaan OJS */

.pkp_structure_sidebar .block {

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin-bottom: 25px !important;

    overflow: visible !important; /* Agar konten lebar tidak tersembunyi */

    box-sizing: border-box !important;

}



/* 2. Mengatur isi di dalam blok agar memenuhi lebar baris */

.pkp_structure_sidebar .block .content {

    width: 100% !important;

    display: block !important;

    box-sizing: border-box !important;

}



/* 3. Memastikan semua tabel (seperti Visitors) atau gambar (Tools) 

      bisa melebar secara fleksibel */

.pkp_structure_sidebar .block img, 

.pkp_structure_sidebar .block table {

    max-width: 100% !important;

    height: auto !important;

}



/* 4. Mencegah teks menu atau judul blok turun ke bawah (tetap satu baris) */

.vertical-menu a, 

.journal-template-block a,

.pkp_structure_sidebar .block .title {

    white-space: nowrap !important;

    width: 100% !important;

}



/* 5. Khusus untuk Sidebar Menu & Template agar tetap sinkron */

.vertical-menu, 

.journal-template-block {

    width: 100% !important;

    min-width: 280px !important; 

    box-sizing: border-box !important;

}

/* ============================================================

   PERBAIKAN LEBAR VISITORS: MEMANJANG RATA KANAN

   ============================================================ */



/* 1. Paksa blok Visitors memenuhi lebar sidebar 100% */

.visitors-block {

    width: 100% !important;

    min-width: 280px !important; /* Kunci agar panjangnya sama dengan Menu/Tools */

    display: block !important;

    box-sizing: border-box !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    clear: both !important;

    transition: all 0.3s ease !important;

    background-color: #1a3a32 !important; /* Warna hijau gelap sesuai kodingan Bapak */

}



/* 2. Memastikan Header Visitors (Judul) Memanjang Penuh */

.visitors-block div:first-child {

    width: 100% !important;

    display: flex !important;

    box-sizing: border-box !important;

    justify-content: center !important;

}



/* 3. Efek Hover (Garis Hijau Menyala di Kiri) */

.visitors-block:hover {

    background-color: #1d4239 !important; /* Sedikit lebih terang saat hover */

    box-shadow: -5px 0 0 #F2CB05, 0 4px 12px rgba(0,0,0,0.2) !important;

    cursor: pointer;

}



/* 4. Memastikan Gambar Statcounter & Teks Tetap di Tengah */

.visitors-block img, 

.visitors-block p, 

.visitors-block a {

    margin-left: auto !important;

    margin-right: auto !important;

    display: block !important;

    text-align: center !important;

    float: none !important;

}

/* ============================================================

   FIX TOTAL: PAKSA SEMUA GAMBAR TOOLS KE TENGAH

   ============================================================ */



/* Pastikan pembungkusnya lebar penuh */

.tools-wrapper {

    width: 100% !important;

    min-width: 280px !important;

    display: block !important;

}



/* Hilangkan float kiri dari link dan gambar */

.tools-wrapper a, 

.tools-wrapper img,

.tools-wrapper .tool-item {

    float: none !important;

    text-align: center !important;

    justify-content: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

}



/* Memastikan gambar tampil sebagai blok di tengah */

.tools-wrapper img {

    display: block !important;

    max-width: 140px !important;

}



/* Efek Hover Garis Hijau di Kiri */

.tools-wrapper:hover {

    background-color: #ffffff !important;

    box-shadow: -5px 0 0 #F2CB05, 0 4px 12px rgba(0,0,0,0.1) !important;

}



/* ============================================================

   FIX HOVER: JOURNAL TEMPLATE

   ============================================================ */



/* Dasar blok agar transisi halus */

.journal-template-block {

    transition: all 0.3s ease !important;

    cursor: pointer;

    display: block !important;

    width: 100% !important;

    min-width: 280px !important;

}



/* Efek saat kursor menyentuh blok */

.journal-template-block:hover {

    background-color: #f9f9f9 !important; /* Latar berubah jadi abu muda */

    box-shadow: -8px 0 0 #F2CB05, 0 4px 12px rgba(0,0,0,0.1) !important; /* Garis hijau menyala di kiri */

}



/* Memastikan teks di dalam berubah warna saat hover agar kontras */

.journal-template-block:hover p {

    color: #1a3a32 !important; /* Teks berubah jadi hijau gelap saat background jadi putih/abu */

}



/* Animasi kecil pada gambar template saat hover */

.journal-template-block:hover img {

    transform: scale(1.05);

    transition: transform 0.3s ease;

}



/* ============================================================

   PERBAIKAN HOVER SIDEBAR MENU (LATAR PUTIH)

   ============================================================ */



/* Targetkan link di dalam vertical-menu secara spesifik */

.vertical-menu div a {

    transition: all 0.3s ease !important;

}



/* Saat disentuh (Hover) */

.vertical-menu div a:hover {

    background-color: #00735C !important; /* Hijau gelap saat dihover */

    color: #ffffff !important; /* Tulisan berubah jadi putih agar terbaca */

    border-left: 8px solid #F2CB05!important; /* Garis hijau menyala di kiri */

    padding-left: 20px !important; /* Efek bergeser sedikit ke kanan */

}



/* Mengubah warna ikon menjadi putih saat hover agar tidak hilang */

.vertical-menu div a:hover img {

    filter: brightness(0) invert(1) !important;

    opacity: 1 !important;

}



/* Mengatur halaman arsip/isu agar gambar sampul dan teks deskripsi berdampingan */

.obj_issue_toc .heading {

    display: flex !important;

    flex-wrap: nowrap !important;

    gap: 25px !important;

    align-items: flex-start !important;

    margin-bottom: 30px !important;

}



/* Mengunci ukuran gambar sampul bawaan OJS */

.obj_issue_toc .heading .cover {

    flex-shrink: 0 !important;

    width: 140px !important;

    max-width: 140px !important;

    margin: 0 !important;

}



.obj_issue_toc .heading .cover img {

    width: 100% !important;

    height: auto !important;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;

}



/* Mengatur area deskripsi di sebelah kanan gambar */

.obj_issue_toc .heading .description {

    flex-grow: 1 !important;

    min-width: 0 !important;

    padding-top: 5px !important;

}

/* ==================================================================
   1. MEMAKSA STRUKTUR INDUK UTAMA MELEBAR 100% (HOME & CURRENT ISSUE)
   ================================================================== */
.page_issue main, .page_index_journal main,
.page_issue .pkp_structure_main, .page_index_journal .pkp_structure_main,
.page_issue [role="main"], .page_index_journal [role="main"],
#main-content {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* ==================================================================
   2. MEMAKSA AREA HEADING / IDENTITAS ISU MELEBAR 100%
   ================================================================== */
.page_issue .heading, .page_index_journal .heading,
.page_issue .obj_issue_toc .heading, .page_index_journal .obj_issue_toc .heading,
.page_issue [class*="toc"] [class*="heading"], .page_index_journal [class*="toc"] [class*="heading"] {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

/* ==================================================================
   3. MEMAKSA DESKRIPSI JEBOL DARI KOLOM DAN MEMENUHI LAYAR (JUSTIFY)
   ================================================================== */
.page_issue .description, .page_index_journal .description,
.page_issue [class*="description"], .page_index_journal [class*="description"],
.page_issue .description p, .page_index_journal .description p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    text-align: justify !important;
    box-sizing: border-box !important;
}

/* ==================================================================
   4. MEMAKSA METADATA (DOI & PUBLISHED) RUNTUH KE BAWAH PARAGRAF
   ================================================================== */
.page_issue .issue_details, .page_index_journal .issue_details,
.page_issue .status, .page_index_journal .status,
.page_issue [class*="meta"], .page_index_journal [class*="meta"],
.page_issue [class*="details"], .page_index_journal [class*="details"] {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: left !important;
    margin-top: 25px !important;
    padding-top: 15px !important;
    border-top: 1px solid #eeeeee !important; /* Memberi garis batas tipis yang rapi */
}

/* ==================================================================
   5. MENATA METADATA AGAR BERJEJER HORIZONTAL DI BAWAH TEKS
   ================================================================== */
.page_issue .issue_details > div, .page_index_journal .issue_details > div,
.page_issue .status > div, .page_index_journal .status > div,
.page_issue [class*="meta"] > div, .page_index_journal [class*="meta"] > div,
.page_issue [class*="details"] > div, .page_index_journal [class*="details"] > div {
    display: inline-block !important;
    margin-right: 40px !important;
    vertical-align: top !important;
    float: none !important;
}