/* ==========================================================
   JETIS V.4.0: BOXED BUTTON SIDEBAR & FIXED LAYOUT
   (RESPONSIVE FIXED BY GEMINI)
   ========================================================== */

/* 1. GLOBAL LAYOUT SETTINGS */
* { box-sizing: border-box; }

body {
    background-color: #eeeeee;
    font-family: 'Open Sans', sans-serif;
    margin: 0; padding: 0;
}

/* WADAH UTAMA (1200px) */
.pkp_structure_page {
    width: 100%;
    max-width: 1200px !important;
    margin: 30px auto !important;
    background-color: #ffffff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* ==========================================================
   2. HEADER & BANNER
   ========================================================== */

/* A. HEADER UTAMA */
header.pkp_structure_head {
    background-color: #1b5e20 !important;
    padding: 0 !important; 
    border: none !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10;
}

/* B. WRAPPER UTAMA */
header.pkp_structure_head .pkp_head_wrapper {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: static !important; /* Agar elemen didalamnya bisa diatur posisinya */
}

/* C. BANNER IMAGE */
.pkp_site_name_wrapper {
    background-image: url('https://journal.unesa.ac.id/public/journals/132/pageHeaderLogoImage_en_US.png');
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* DORONG KE BAWAH 45px (DESKTOP ONLY) */
    margin-top: 45px !important; 
    
    border-top: 4px solid #ffd700 !important; 

    /* Dimensi Desktop */
    height: 250px !important; 
    width: 100% !important;
    
    position: relative !important; 
    top: auto !important; 
    display: block !important;
}

/* Sembunyikan judul teks asli */
.pkp_site_name_wrapper h1, 
.pkp_site_name_wrapper .pkp_site_name { display: none !important; }

/* ==========================================================
   3. NAVIGATION USER (LOGIN/REGISTER/GRANTSM)
   ========================================================== */

#navigationUserWrapper, 
.pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important; 
    left: auto !important;
    
    height: 45px !important;
    min-width: 100px !important;
    background: transparent !important;
    z-index: 99999 !important;
    
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    
    padding-right: 5px !important; 
    margin: 0 !important;
}

/* LIST MENU (UL) */
#navigationUserWrapper ul, 
.pkp_navigation_user_wrapper ul {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ITEM MENU (LI) */
#navigationUserWrapper > ul > li, 
.pkp_navigation_user_wrapper > ul > li {
    display: inline-block !important;
    margin-left: 10px !important;
    white-space: nowrap !important;
    line-height: 45px !important;
    position: relative !important;
}

/* TEXT LINK STYLE */
#navigationUserWrapper a, 
.pkp_navigation_user_wrapper a {
    color: #e8f5e9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.3s ease-in-out !important;
}

#navigationUserWrapper a:hover, 
.pkp_navigation_user_wrapper a:hover {
    color: #ffd700 !important;
}

/* ==========================================================
   4. DROPDOWN MENU (USER NAV)
   ========================================================== */

/* RESET AWAL */
#navigationUserWrapper ul ul,
.pkp_navigation_user_wrapper ul ul {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: none !important; 
    transform: none !important;
}

/* TAMPILKAN SAAT HOVER/OPEN */
#navigationUserWrapper ul li:hover > ul,
#navigationUserWrapper ul li.open > ul,
#navigationUserWrapper ul li:focus-within > ul,
.pkp_navigation_user_wrapper ul li:hover > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 45px !important; 
    right: 0 !important;  
    left: auto !important;
    margin: 0 !important;
    background-color: #1b5e20 !important;
    border: 1px solid #ffd700 !important;
    border-top: none !important;
    width: 160px !important;
    padding: 0 !important;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
    border-radius: 0 0 5px 5px;
    z-index: 100000 !important;
}

/* ISI ITEM DROPDOWN */
#navigationUserWrapper ul ul li,
.pkp_navigation_user_wrapper ul ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    line-height: normal !important;
    background: transparent !important;
}

/* LINK DALAM DROPDOWN */
#navigationUserWrapper ul ul li a,
.pkp_navigation_user_wrapper ul ul li a {
    display: block !important;
    padding: 12px 15px !important;
    color: #fff !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
    background-color: transparent !important;
}

#navigationUserWrapper ul ul li a:hover,
.pkp_navigation_user_wrapper ul ul li a:hover {
    background-color: #ffd700 !important; 
    color: #1b5e20 !important;
    padding-left: 20px !important;
}

/* ==========================================================
   5. TASK COUNT (BADGE ANGKA)
   ========================================================== */
#navigationUserWrapper ul li.profile > a {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    height: 45px !important; 
}

.task_count {
    position: static !important; 
    top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    padding: 0 !important;
    background-color: #ffd700 !important;
    color: #1b5e20 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* ==========================================================
   6. ANIMASI DROPDOWN UMUM
   ========================================================== */
.pkp_navigation_primary_row ul li ul,
#navigationUserWrapper ul li ul,
.pkp_navigation_user_wrapper ul li ul {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px) !important; 
    transition: all 0.3s ease !important;
}

.pkp_navigation_primary_row ul li:hover > ul,
.pkp_navigation_primary_row ul li:focus-within > ul,
#navigationUserWrapper ul li:hover > ul,
#navigationUserWrapper ul li.open > ul {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================
   7. NAVBAR UTAMA (PRIMARY)
   ========================================================== */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important;
    max-width: 100%;
    background: #1b5e20 !important;
}

/* MENU INDUK */
.pkp_navigation_primary_row ul {
    flex-grow: 1;
    justify-content: flex-start !important;
    width: auto !important;
}

.pkp_navigation_primary_row ul li {
    position: relative !important;
}

.pkp_navigation_primary_row ul li a {
    color: #e8f5e9 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.3s ease-in-out !important; 
}

.pkp_navigation_primary_row ul li:hover > a,
.pkp_navigation_primary_row ul li:focus-within > a,
.pkp_navigation_primary_row ul li.active > a {
    color: #ffd700 !important; 
}

/* DROPDOWN PRIMARY */
.pkp_navigation_primary_row ul li ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    z-index: 999999 !important;
    background-color: #ffffff !important; /* Putih agar bersih */
    border: 1px solid #ffd700 !important;
    border-top: none !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    border-radius: 0 0 5px 5px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

.pkp_navigation_primary_row ul li ul li {
    display: block !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.pkp_navigation_primary_row ul li ul li a {
    color: #333 !important; /* Text Hitam */
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    display: block !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease-in-out !important;
}

.pkp_navigation_primary_row ul li ul li a:hover {
    background-color: #e8f5e9 !important; 
    color: #1b5e20 !important;
    padding-left: 25px !important; 
}

/* SEARCH BAR */
.pkp_search {
    margin-right: 15px;
    position: relative;
    display: flex;
    align-items: center;
}
.pkp_search input[type="text"] {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 15px;
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.pkp_search input[type="text"]::placeholder {
    color: #e0e0e0;
}

/* ==========================================================
   8. LAYOUT KONTEN & SIDEBAR
   ========================================================== */
.pkp_structure_content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 30px !important;
    width: 100% !important;
}

.pkp_structure_main {
    width: 72% !important;
    margin-right: 0 !important;
    padding-right: 25px !important;
    border-right: 1px solid #eee;
}

.pkp_structure_sidebar {
    width: 25% !important;
    padding-left: 0 !important;
    float: none !important;
}

/* STYLING SIDEBAR BLOCKS */
.pkp_block {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    margin-bottom: 30px !important;
    padding: 5px !important;
}

.pkp_block .title, h4.menu-header {
    background: #1b5e20 !important;
    color: #fff !important;
    padding: 12px 15px !important;
    margin: -5px -5px 15px -5px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 4px 10px rgba(27, 94, 32, 0.3) !important;
    border: none !important;
    display: block !important;
    width: calc(100% + 10px) !important;
}

.pkp_block .content ul, ul.menu-list {
    margin: 0 !important; 
    padding: 0 5px !important; 
    list-style: none !important; 
}

.pkp_block .content ul li, ul.menu-list li {
    margin-bottom: 8px !important;
    border-bottom: none !important;
}

/* LINKS SIDEBAR */
.pkp_block .content ul li a, ul.menu-list li a {
    display: block !important;
    background-color: #f1f8e9 !important;
    border: 1px solid #c8e6c9 !important;
    color: #2e7d32 !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-align: left;
}

ul.menu-list li a {
    background-color: #ffffff !important;
    border-left: 6px solid #1b5e20 !important;
}

.pkp_block .content ul li a:hover, ul.menu-list li a:hover {
    background-color: #1b5e20 !important;
    color: #ffffff !important;
    border-color: #1b5e20 !important;
    transform: translateX(5px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

ul.menu-list li a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain;
    border-radius: 4px;
    margin: 0 auto;
}

/* ==========================================================
   9. FOOTER
   ========================================================== */
.pkp_structure_footer_wrapper {
    background-color: #263238 !important;
    padding: 0 !important;
    border-top: 5px solid #1b5e20 !important;
    color: #eceff1;
    font-size: 14px;
    margin-top: 30px;
}
.pkp_brand_footer { display: none !important; }

.jetis-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 20px 20px;
}
.jetis-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
    text-align: left;
}
.footer-col { flex: 1 1 300px; }
.footer-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1b5e20;
    display: inline-block;
    letter-spacing: 1px;
}
.footer-col p { color: #b0bec5; line-height: 1.6; margin-bottom: 15px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px; }
.footer-col ul li a { color: #b0bec5 !important; text-decoration: none; transition: all 0.3s ease; display: block; }
.footer-col ul li a:hover { color: #ffd700 !important; padding-left: 5px; }
.footer-copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #78909c;
}
/* ==========================================================
   10. MOBILE RESPONSIVE FIXES (FINAL REVISION)
   ========================================================== */

@media (max-width: 991px) {

    /* A. RESET CONTAINER UTAMA */
    /* Hapus batas lebar 1200px agar memenuhi layar HP */
    .pkp_structure_page {
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow-x: hidden !important; /* Mencegah geser samping */
    }

    /* B. HEADER & BANNER */
    /* Reset Header */
    header.pkp_structure_head {
        padding: 0 !important;
        height: auto !important;
    }

    /* Banner Image di HP */
    .pkp_site_name_wrapper {
        margin-top: 0 !important; /* Hapus jarak desktop 45px */
        /* Gunakan Padding Hack agar banner responsif & tidak gepeng */
        /* Rasio 3:1 (sesuaikan jika gambar terpotong) */
        height: 0 !important;
        padding-bottom: 40% !important; 
        
        background-size: cover !important; /* Cover agar penuh, contain jika ingin utuh tapi ada sisa putih */
        background-position: center center !important;
        width: 100% !important;
        border-top: none !important; /* Hapus border kuning desktop */
    }

    /* C. USER NAV (LOGIN/REGISTER) - BARIS PALING ATAS */
    #navigationUserWrapper, 
    .pkp_navigation_user_wrapper {
        position: relative !important; /* Tidak lagi absolute */
        width: 100% !important;
        background-color: #263238 !important; /* Abu Gelap/Hitam agar kontras */
        padding: 8px 0 !important;
        height: auto !important;
        display: block !important;
        text-align: center !important;
    }

    /* Ratakan menu user ke tengah */
    #navigationUserWrapper ul, 
    .pkp_navigation_user_wrapper ul {
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    #navigationUserWrapper ul li, 
    .pkp_navigation_user_wrapper ul li {
        margin: 0 8px !important;
        line-height: normal !important;
    }
    
    /* Font Login/Reg lebih kecil di HP */
    #navigationUserWrapper a, 
    .pkp_navigation_user_wrapper a {
        font-size: 11px !important; 
    }

    /* D. PRIMARY NAV (MENU UTAMA) - SUSUN BAWAH */
    .pkp_navigation_primary_wrapper {
        flex-direction: column !important; /* Susun vertikal */
        padding: 0 !important;
        background-color: #1b5e20 !important;
    }

    /* Container List Menu */
    .pkp_navigation_primary_row ul {
        flex-direction: column !important; /* Item menu turun ke bawah */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important; /* Matikan flex agar tombol penuh */
    }

    /* Item Menu Utama (Tombol Besar) */
    .pkp_navigation_primary_row ul li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Garis pemisah */
        text-align: center;
    }

    /* Link Style */
    .pkp_navigation_primary_row ul li a {
        display: block !important;
        padding: 15px 0 !important;
        font-size: 14px !important;
    }

    /* Hover effect di HP (saat disentuh) */
    .pkp_navigation_primary_row ul li a:active {
        background-color: #ffd700 !important;
        color: #1b5e20 !important;
    }

    /* E. SEARCH BAR */
    .pkp_search {
        margin: 15px auto !important;
        width: 90% !important;
        display: block !important;
    }
    .pkp_search input[type="text"] {
        width: 100% !important;
        height: 40px !important; /* Lebih mudah ditekan */
        text-align: center;
    }

    /* F. SUBMENU / DROPDOWN DI HP */
    /* Tampilkan statis di bawah induknya (tanpa hover) atau sembunyikan jika terlalu panjang */
    .pkp_navigation_primary_row ul li ul {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background-color: #144a18 !important; /* Hijau lebih gelap untuk sub menu */
        border-radius: 0 !important;
        display: none; /* Default sembunyi, muncul saat di-tap (tergantung tema JS) */
    }
    
    /* G. KONTEN & SIDEBAR STACKING */
    .pkp_structure_content {
        display: block !important; /* Block flow biasa */
        padding: 15px !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 40px !important;
    }

    .pkp_structure_sidebar {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
    }

    /* H. FOOTER DI HP */
    .jetis-footer-row {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .footer-col {
        text-align: center !important;
    }
    .footer-title {
        border-bottom: none !important;
        text-decoration: underline;
    }

    /* ==========================================================
       F. SUBMENU / DROPDOWN DI HP (WARNA KONSISTEN)
       ========================================================== */
    
    /* Wadah Sub-menu */
    .pkp_navigation_primary_row ul li ul,
    #navigationUserWrapper ul li ul {
        position: relative !important; /* Tampil mengalir ke bawah (bukan melayang) */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none; /* Default sembunyi, akan muncul oleh JS tema saat diklik */
        
        /* WARNA KONSISTEN */
        background-color: #0d3810 !important; /* Hijau Gelap (Dark Forest) */
        border: none !important;
        box-shadow: inset 0 5px 10px rgba(0,0,0,0.2) !important; /* Bayangan dalam */
        border-radius: 0 !important;
        padding: 5px 0 !important;
        transform: none !important;
    }

    /* Agar Submenu Muncul saat Induknya disentuh/aktif (Fallback CSS) */
    .pkp_navigation_primary_row ul li:hover > ul,
    .pkp_navigation_primary_row ul li:focus-within > ul,
    .pkp_navigation_primary_row ul li.open > ul {
        display: block !important;
    }

    /* Item Sub-menu */
    .pkp_navigation_primary_row ul li ul li,
    #navigationUserWrapper ul li ul li {
        border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Garis tipis samar */
        text-align: left !important; /* Teks rata kiri agar rapi */
    }

    /* Link Sub-menu */
    .pkp_navigation_primary_row ul li ul li a,
    #navigationUserWrapper ul li ul li a {
        color: #e0e0e0 !important; /* Putih agak redup */
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 12px 20px 12px 30px !important; /* Padding kiri 30px (Indentasi) */
        background-color: transparent !important;
        text-transform: capitalize !important; /* Huruf besar awal saja */
    }

    /* Efek Sentuh/Hover pada Sub-menu */
    .pkp_navigation_primary_row ul li ul li a:hover,
    .pkp_navigation_primary_row ul li ul li a:active,
    #navigationUserWrapper ul li ul li a:hover {
        color: #ffd700 !important; /* KUNING EMAS (Konsisten) */
        background-color: rgba(255,255,255,0.05) !important;
        padding-left: 35px !important; /* Efek geser sedikit */
    }
}