/* ============================================================
   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: 100% FULL WIDTH (FILL)
   ============================================================ */
header.pkp_structure_head {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #00735C !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Melepaskan batasan lebar kontainer agar bisa mentok ke kanan */
header .pkp_head_wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important; 
}

.pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    height: 180px !important; /* Sesuaikan tinggi banner di sini */
    background-image: url("https://jurnal.fkip.unmul.ac.id/public/journals/47/pageHeaderLogoImage_en_US.png") !important;
    background-size: 100% 100% !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
}

/* Sembunyikan elemen gambar asli OJS */
.pkp_site_name_wrapper img {
    display: none !important;
}

/* ============================================================
   3. TOMBOL USER: MENTOK UJUNG KANAN & DROPDOWN DASHBOARD
   ============================================================ */
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important; /* KUNCI: Mentok ke ujung kanan layar */
    left: auto !important;
    width: auto !important;
    z-index: 10000 !important;
    padding-right: 10px !important; /* Jarak tipis agar tidak menempel kaca browser */
}

ul.pkp_navigation_user {
    display: flex !important;
    flex-direction: column !important; /* Dashboard akan muncul di bawahnya */
    align-items: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sembunyikan Dashboard secara default */
ul.pkp_navigation_user li:not(:first-child) {
    display: none !important;
    margin-top: 5px !important;
}

/* Tampilkan Dashboard saat tombol @JURNAL di-hover */
ul.pkp_navigation_user:hover li:not(:first-child) {
    display: block !important;
}

/* Gaya Tombol Utama & Sub-menu */
.pkp_navigation_user a {
    display: block !important;
    background: #00735C !important; /* Warna hitam pekat */
    color: #ffffff !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    text-align: center !important;
    min-width: 120px !important;
}

.pkp_navigation_user a:hover {
    background: #00735C !important;
}

/* ============================================================
   4. NAVIGASI HOME (SEJAJAR KONTEN 1180PX)
   ============================================================ */
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    background: #1a3a32 !important;
    border-bottom: 3px solid #27ae60 !important;
}

.pkp_navigation_primary_wrapper > .pkp_head_wrapper {
    max-width: 1180px !important; /* Mengikuti lebar artikel di bawah */
    margin: 0 auto !important;    /* Mengetengahkan menu */
    padding: 0 20px !important;
    position: relative !important;
}

ul.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 15px 12px !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;
}