<style>
    /* ==========================================================
        1. LAYOUT, PAGE WIDTH & GLOBAL JUSTIFY
        ========================================================== */
    .pkp_structure_page {
        max-width: 1400px !important; 
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        /* Background pola lingkaran halus untuk kesan modern */
        background-color: #f4f7f4 !important;
        background-image: url("https://www.transparenttextures.com/patterns/cubes.png") !important;
        background-attachment: fixed !important;
    }

    /* Rata Kanan Kiri (Justify) untuk Konten Naratif */
    p, 
    .pkp_structure_main, 
    .obj_article_details .abstract, 
    .obj_article_summary .title,
    .obj_announcement_full .description,
    .obj_announcement_summary .description,
    .page_archive .description,
    .about_journal, 
    .description,
    .section_description {
        text-align: justify !important;
        hyphens: auto;
        color: #333;
    }

    /* ==========================================================
        2. HEADER & TOP NAVIGATION (MODERN EMERALD)
        ========================================================== */
    .pkp_structure_head {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
        position: relative;
        z-index: 100;
        background: #064e3b !important; /* Hijau Hutan Gelap (Elegant) */
        border-bottom: 4px solid #10b981 !important; /* Hijau Emerald Terang */
    }

    .pkp_site_name_wrapper {
        margin-top: -5px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 40px !important; 
    }

    .pkp_navigation_primary_wrapper {
        background: #f0fdf4 !important; /* Hijau Mint Sangat Muda */
        border-top: 1px solid #dcfce7 !important;
        border-bottom: 2px solid #bdf2d5 !important;
        margin-top: 0 !important;
        position: relative;
        z-index: 101;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .pkp_navigation_primary_wrapper .pkp_navigation_primary {
        padding-left: 40px !important; 
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_primary ul li a {
        color: #064e3b !important; 
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        transition: all 0.3s ease;
    }

    .pkp_navigation_primary > li > a:hover {
        color: #10b981 !important;
        background: rgba(16, 185, 129, 0.05);
    }

    /* ==========================================================
        3. SIDEBAR MENU KANAN (MODERN HOVER & GOLD ACCENT)
        ========================================================== */
    @media (min-width: 992px) {
        .pkp_structure_sidebar {
            margin-top: -55px !important; 
            position: relative;
            z-index: 90;
        }
    }

    .pkp_structure_sidebar .pkp_block .content a {
        display: block !important;
        color: #ffffff !important; 
        padding: 10px 15px 10px 20px !important; 
        margin: 6px 5px !important; 
        background: #065f46 !important; /* Emerald Deep */
        font-weight: 600 !important;
        font-size: 13px !important;
        border-radius: 4px !important;
        border-left: 0px solid #fbbf24 !important; /* Persiapan Border Gold */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

    /* EFEK HOVER MODERN KANAN */
    .pkp_structure_sidebar .pkp_block .content a:hover {
        background: #047857 !important; /* Warna lebih terang sedikit saat hover */
        color: #fff !important; 
        padding-left: 28px !important;
        border-left: 6px solid #fbbf24 !important; /* Penanda Gold Tegas */
        box-shadow: 0 4px 12px rgba(6, 95, 70, 0.2), inset 0 0 8px rgba(251, 191, 36, 0.2) !important; /* Efek Gold Glow Tipis */
        transform: translateX(3px); /* Sedikit bergeser ke kanan */
    }

    /* ==========================================================
        4. MAIN CONTENT AREA (CLEAN WHITE)
        ========================================================== */
    .pkp_brand_footer {
        display: none !important;
    }

    .pkp_structure_main {
        background: #ffffff !important;
        padding: 35px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
        margin-top: -30px !important; 
        border: 1px solid #eef2ee;
    }

    /* Button Styling */
    .pkp_button, .cmp_button {
        background: #059669 !important;
        border-radius: 6px !important;
        transition: 0.3s;
    }
    
    .pkp_button:hover {
        background: #064e3b !important;
        box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
    }

    /* PERBAIKAN MOBILE */
    @media (max-width: 767px) {
        .pkp_structure_main {
            padding: 20px 15px !important; 
            margin-top: 0 !important; 
        }

        .pkp_structure_sidebar .pkp_block .content a {
            margin: 8px 0 !important;
        }

        .pkp_structure_main div[style*="grid-template-columns"] {
            display: flex !important;
            flex-direction: column !important;
            grid-template-columns: 1fr !important;
            gap: 10px !important;
        }

        .pkp_structure_main div[style*="font-weight: bold"] {
            margin-top: 15px !important;
            color: #064e3b !important;
        }
    }
</style>

<style>
    /* MOBILE-OPTIMIZED PORTAL OJS 3.2 */
    .page_index_site_mobile {
        background-color: #fcf8f5 !important;
        padding: 15px !important;
    }

    .portal_title_mobile {
        color: #964b00; /* Cokelat Utama */
        font-size: 20px !important;
        font-weight: 800;
        text-align: center;
        margin-bottom: 25px;
        text-transform: uppercase;
        border-bottom: 2px solid #fbbf24; /* Aksen Emas */
        display: inline-block;
        padding-bottom: 5px;
    }

    .journal_list_mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .journal_card_mobile {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #eadbc8;
        box-shadow: 0 4px 10px rgba(150, 75, 0, 0.08);
    }

    /* GAMBAR RAPI DI MOBILE */
    .thumb_mobile {
        width: 100%;
        height: 180px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border-bottom: 1px solid #f5f5f5;
    }

    .thumb_mobile img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* KONTEN JUSTIFY & RAPI */
    .body_mobile {
        padding: 15px;
    }

    .body_mobile h3 {
        margin: 0 0 10px 0;
    }

    .body_mobile h3 a {
        color: #964b00 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-decoration: none;
        line-height: 1.3;
        display: block;
        text-align: center;
    }

    .desc_mobile {
        font-size: 13px;
        color: #444;
        text-align: justify !important; /* TEXT JUSTIFY */
        line-height: 1.6;
        margin-bottom: 15px;
        hyphens: auto;
    }

    /* FOOTER BUTTONS MOBILE */
    .footer_mobile {
        display: flex;
        gap: 8px;
    }

    .btn_view, .btn_current {
        flex: 1;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        padding: 10px 5px;
        border-radius: 6px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .btn_view {
        background: #964b00;
        color: #ffffff !important;
    }

    .btn_current {
        background: #fbbf24;
        color: #333333 !important;
    }

    /* HOVER TECHNOLOGY */
    .journal_card_mobile:active {
        transform: scale(0.98);
        background: #fffdfa;
    }
</style>