/**
 * JOURNAL RIPTEK THEME CSS - FIXED VERSION 2.0
 * Custom styling for Journal Riptek - Jurnal Riset dan Inovasi Daerah Kota Semarang
 * Created: October 27, 2025
 * Updated: October 30, 2025 - v2.0 FIXED
 * 
 * CHANGELOG v2.0:
 * 1. Hero image digabung dengan header di bawah (seperti papan menempel)
 * 2. Teks "Jurnal Riptek" di hero digeser ke kanan
 * 3. About page: Added sidebar kiri dan hero image seperti home
 * 4. Description box: Changed to horizontal rectangle (tidak gepeng)
 * 5. Mobile description: Fixed to be square/rectangle (tidak gepeng)
 * 6. Login/Register: Logo dan header centered seperti home page
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:wght@700&family=Poppins:wght@700&display=swap');

/* =========================================
   GLOBAL RESETS & BASE STYLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    padding-top: 71px !important;          /* v10.6: Space for fixed header */
}

.container-fluid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
}

/* =========================================
   HEADER STYLING - WHITE BACKGROUND
   ========================================= */
#headerNavigationContainer {
    background: #ffffff !important;
    height: 71px;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.navbar-default {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Header Top Navigation (User Menu) */
#headerNavigationContainer > .container-fluid:first-child {
    position: absolute;
    top: 5px;
    right: 20px;
    background: transparent;
    padding: 0;
    height: auto;
    z-index: 1001;
}

#headerNavigationContainer > .container-fluid:first-child .row {
    margin: 0;
}

/* Main Header Container */
#headerNavigationContainer > .container-fluid:last-child {
    max-width: 1440px;
    margin: 0 auto;
    height: 71px;
    padding: 0 20px;
    position: relative;
}

#headerNavigationContainer .navbar-header {
    height: 71px;
    display: flex;
    align-items: center;
    float: none !important;                /* Remove float */
    width: auto;
    margin: 0;
    position: absolute;
    left: 20px !important;                 /* ALWAYS LEFT - 20px from edge */
    top: 0;
}

/* Logo Image */
#headerNavigationContainer .navbar-brand-logo {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

#headerNavigationContainer .navbar-brand-logo img {
    height: 45px;
    width: auto;
    margin-right: 0;
}

/* Text "Jurnal Riptek" beside logo */
#headerNavigationContainer .navbar-brand {
    color: #000000 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 0;
    padding-left: 15px;
    height: 71px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: 12px;
    text-transform: none;
    border-left: none !important;          /* HAPUS garis hijau */
    border: none !important;               /* HAPUS semua border */
}

/* HAPUS garis hijau dari semua elemen navbar-brand */
#headerNavigationContainer .navbar-brand *,
#headerNavigationContainer .navbar-brand::before,
#headerNavigationContainer .navbar-brand::after {
    border: none !important;
    border-left: none !important;
}

#headerNavigationContainer .site-name {
    display: flex;
    border: none !important;               /* HAPUS border dari site-name */
    border-left: none !important;
    align-items: center;
    height: 0;
    gap: 0;
}

/* v11.3: Ensure consistent header positioning for ALL pages */
.pkp_page_index #headerNavigationContainer .site-name,
.pkp_page_about #headerNavigationContainer .site-name,
.pkp_page_submissions #headerNavigationContainer .site-name,
.pkp_page_login #headerNavigationContainer .site-name,
.pkp_page_register #headerNavigationContainer .site-name {
    display: flex !important;
    align-items: center !important;
    height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer .navbar-brand:hover {
    color: #000000 !important;
    text-decoration: none;
}

/* v11.3: HIDE logo IMAGE di header untuk homepage, login, register, about, submissions (teks "Jurnal Riptek" tetap tampil) */
.pkp_page_index #headerNavigationContainer .navbar-brand-logo,
.pkp_page_login #headerNavigationContainer .navbar-brand-logo,
.pkp_page_register #headerNavigationContainer .navbar-brand-logo,
.pkp_page_user #headerNavigationContainer .navbar-brand-logo,
body.pkp_page_register #headerNavigationContainer .navbar-brand-logo,
body[class*="register"] #headerNavigationContainer .navbar-brand-logo,
.pkp_page_about #headerNavigationContainer .navbar-brand-logo,
.pkp_page_submissions #headerNavigationContainer .navbar-brand-logo {
    display: none !important;
}

/* v11.3: OPTIONAL - Uncomment untuk hide logo di halaman lain jika diperlukan */
/*
.pkp_page_issue #headerNavigationContainer .navbar-brand-logo,
.pkp_page_article #headerNavigationContainer .navbar-brand-logo,
.pkp_page_search #headerNavigationContainer .navbar-brand-logo,
.pkp_page_submissions #headerNavigationContainer .navbar-brand-logo {
    display: none !important;
}
*/

/* Navigation Menu Container - CENTERED */
#nav-menu {
    float: none !important;
    height: 71px;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    position: absolute;
    left: 44%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 10;
}

#nav-menu.collapse {
    display: flex !important;
    height: auto;
}

/* Navigation Links Styling */
#headerNavigationContainer .navbar-nav {
    margin: 0;
    display: flex !important;
    align-items: center;
    height: auto;
    list-style: none;
    padding: 0;
}

#headerNavigationContainer .navbar-nav > li {
    display: flex;
    align-items: center;
    height: auto;
    margin: 0;
}

#headerNavigationContainer .navbar-nav > li > a {
    color: #333333 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 12px 15px;
    height: auto;
    display: flex;
    align-items: center;
    transition: color 0.3s ease, background-color 0.3s ease;
    background-color: transparent;
}

#headerNavigationContainer .navbar-nav > li > a:hover,
#headerNavigationContainer .navbar-nav > li > a:focus {
    color: #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.05);
}

#headerNavigationContainer .navbar-nav > li.active > a,
#headerNavigationContainer .navbar-nav > li.current > a {
    color: #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1);
}

/* User Navigation (Login/Register) */
#navigationUser {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;           /* v10.25: Vertical align all items */
}

#navigationUser li {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 0;              /* v10.25: Remove bottom margin */
}

#navigationUser li a {
    color: #333333 !important;
    font-size: 14px;
    padding: 5px 10px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    background: transparent !important;  /* v10.25: Force transparent */
    line-height: 1.2;              /* v10.25: Consistent height */
}

#navigationUser li a:hover {
    color: #2ecc71 !important;
    text-decoration: none;
    background: rgba(46, 204, 113, 0.1) !important;  /* v10.25: Light green on hover only */
}

#navigationUser a[href*="login"]::before,
#navigationUser a[href*="register"]::before {
    content: "👤 ";
    margin-right: 5px;
}

/* Mobile Navigation */
.navbar-toggle {
    display: none;
}

/* ========== v10.4: PC MINI NAVBAR FIX - POSITION LEFT ========== */
/* Photo 2: PC mini (768-992px) - navbar-toggle KIRI not KANAN */
@media (min-width: 768px) and (max-width: 992px) {
    .navbar-toggle {
        display: block !important;
        position: absolute !important;
        left: 15px !important;             /* KIRI - not right */
        right: auto !important;
        top: 18px !important;
        transform: none !important;
        z-index: 1003 !important;
    }
    
    /* Logo shift right to avoid collision */
    #headerNavigationContainer .navbar-header {
        left: 70px !important;             /* Space for navbar-toggle */
        width: auto !important;            /* v10.5: NO STRETCHING */
        top: 5px !important;               /* Raise up logo */
    }
}

/* ========== v10.25: MOBILE UNIFIED POSITIONING - EDIT HERE FOR ALL PAGES ========== */
@media (max-width: 767px) {
    /* Body padding for fixed header at top 0 */
    body {
        padding-top: 71px !important;
    }
    
    /* Header container - top 0 */
    #headerNavigationContainer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 71px !important;
        z-index: 1000 !important;
        background: #ffffff !important;
    }
    
    /* ========== EDIT NAVBAR-TOGGLE POSITION (burger menu) ========== */
    .navbar-toggle {
        position: absolute !important;
        left: -15px !important;              /* HORIZONTAL: negative = more left */
        top: -45px !important;               /* VERTICAL: negative = more up */
        transform: none !important;
        z-index: 1005 !important;
        display: block !important;
        background: transparent !important;
        border: 2px solid #999 !important;
        padding: 8px 10px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
    }
    
    /* ========== EDIT LOGO + TEXT POSITION ========== */
    #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 65px !important;               /* HORIZONTAL: from left edge */
        top: 45px !important;                /* VERTICAL: from top (center ~17-20px for 71px header) */
        transform: none !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        z-index: 1002 !important;
        padding-left: 36px !important;       /* EXTRA SPACING: prevent logo cutoff */
    }
    
    /* ========== EDIT NAVIGATION USER (Register/Login icons in header) ========== */
    #navigationUser {
        position: absolute !important;
        right: 10px !important;              /* HORIZONTAL: from right edge */
        top: 0px !important;                /* user edit, fix */
    }
    
    #navigationUser li a {
        font-size: 12px !important;          /* ICON SIZE: text + icon size */
        padding: 3px 6px !important;         /* CLICK AREA: vertical horizontal */
    }
    
    /* Logo image - proper sizing for mobile */
    #headerNavigationContainer .navbar-brand-logo {
        display: flex !important;
        align-items: center !important;
        margin-right: 10px !important;     /* v10.23: More spacing between logo & text */
    }
    
    #headerNavigationContainer .navbar-brand-logo img {
        height: 42px !important;           /* v10.23: Slightly smaller for mobile */
        width: auto !important;
        display: block !important;
    }
    
    /* Text "Jurnal Riptek" - responsive sizing */
    #headerNavigationContainer .navbar-brand {
        font-size: 14px !important;        /* v10.23: Slightly smaller to fit better */
        white-space: nowrap !important;
        padding-left: 8px !important;
        display: block !important;
        line-height: 1.2 !important;
        max-width: 180px !important;       /* v10.23: Prevent overflow */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* v10.22: MOBILE MENU SIDEBAR - VERTICAL COLUMN */
    #nav-menu {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        transform: none !important;
        width: 280px !important;
        height: 100vh !important;
        background: #ffffff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transition: left 0.3s ease;
        z-index: 1001;
        padding-top: 80px;
        display: flex !important;          /* v10.22: Flex container */
        flex-direction: column !important; /* v10.22: VERTICAL column */
    }
    
    #nav-menu.in,
    #nav-menu.show {
        left: 0 !important;
    }
    
    /* v10.22: Menu items VERTICAL layout */
    #nav-menu .navbar-nav {
        display: flex !important;
        flex-direction: column !important; /* v10.22: STACK VERTICALLY */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #nav-menu .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    
    #nav-menu .navbar-nav > li > a {
        display: block !important;
        padding: 15px 25px !important;     /* v10.22: Vertical padding */
        width: 100% !important;
        text-align: left !important;
        color: #333 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        transition: background 0.2s !important;
    }
    
    #nav-menu .navbar-nav > li > a:hover {
        background: #f5f5f5 !important;
        color: #2ecc71 !important;
    }
    
    /* v10.23: Icon for login/register in mobile sidebar - consistent with desktop */
    #nav-menu a[href*="login"]::before,
    #nav-menu a[href*="register"]::before {
        content: "👤 ";
        margin-right: 8px;
    }
    
    /* Navbar collapse behavior */
    .navbar-collapse {
        display: block !important;
    }
}

/* v10.20: TABLET/PC KECIL ONLY (not mobile) - 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-toggle {
        display: block;
        position: fixed !important;
        left: 15px !important;
        right: auto !important;
        top: 15px !important;
        transform: none !important;
        background: transparent;
        border: 2px solid #999 !important;
        padding: 8px 10px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 1005 !important;
    }
    
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #999 !important;
        margin: 4px 0;
        transition: all 0.3s ease;
    }
    
    #headerNavigationContainer .navbar-header {
        position: fixed !important;
        left: 140px !important;
        top: 12px !important;
        z-index: 1002 !important;
    }
    
    /* v10.7: Mobile nav-menu becomes SIDEBAR */
    #nav-menu {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        transform: none !important;
        width: 280px !important;
        height: 100vh !important;
        background: #ffffff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transition: left 0.3s ease;
        z-index: 1001;
        padding-top: 80px;
    }
    
    #nav-menu.in,
    #nav-menu.show {
        left: 0 !important;
    }
    
    #headerNavigationContainer .navbar-nav {
        flex-direction: column;
        width: 75%;
        padding: 0;
        margin: 0;
    }
    
    #headerNavigationContainer .navbar-nav > li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        margin: 0;
        padding: 0;
    }
    
    #headerNavigationContainer .navbar-nav > li > a {
        width: 100%;
        padding: 15px 15px 15px 0;
        justify-content: flex-start;
        text-align: left;
        margin: 0;
        padding-left: 20px;
    }
}


.pull-md-right,
div[class*="search"] {
    display: none !important;
}

body {
    padding-top: 71px;
}

body, html {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* ==========================================================================
   HERO SECTION - FIXED v2.0
   1. DIGABUNG DENGAN HEADER (menempel di bawah header seperti papan)
   2. Teks "Jurnal Riptek" DIGESER KE KANAN
   ========================================================================== */

/* Hide hero on pages except home, about, and submissions (author guidelines) */
.pkp_page_login .homepage-hero,
.pkp_page_user .homepage-hero,
.pkp_page_register .homepage-hero,
.pkp_page_issue .homepage-hero,
.pkp_page_article .homepage-hero {
    display: none !important;
}

/* v11.3: Show hero on home, about, AND submissions (author guidelines) pages */
.pkp_page_index .homepage-hero,
.pkp_page_about .homepage-hero,
.pkp_page_submissions .homepage-hero {
    display: flex !important;
}

/* v10.25: About page hero - add background image if .hero-image element doesn't exist */
.pkp_page_about .homepage-hero::after {
    content: '';
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 650px !important;
    height: 473px !important;
    background-image: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* HERO SECTION - DEFAULT (All devices) */
.homepage-hero {
    height: 544px;
    margin: -71px 0 0 0 !important;        /* NEGATIVE margin to attach below header */
    padding-top: 71px !important;          /* Add padding equal to header height */
    position: relative;
    background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%);
    overflow: visible;                      /* v11.2: Changed from hidden to visible untuk logo/ISSN di pojok */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding-left: 150px !important;        /* Default left padding */
    padding-right: 0 !important;
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;                              /* DEFAULT: Centered */
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* v11.0: Logo + BRIDA text di pojok kiri atas hero */
.homepage-hero .hero-logo-wrapper {
    position: absolute;
    top: 91px;                              /* v11.2: 71px padding + 20px offset = 91px from top */
    left: 180px;                            /* v11.3: Moved more to right for desktop */
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
}

.homepage-hero .hero-logo {
    width: 35px;
    height: 46px;
}

.homepage-hero .hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.homepage-hero .hero-brida-text {
    font-family: 'Inria Serif', serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 280px;
}

/* v11.0: ISSN di pojok kanan atas hero */
.homepage-hero .hero-issn {
    position: absolute;
    top: 91px;                              /* v11.2: 71px padding + 20px offset = 91px from top */
    right: 180px;                           /* v11.3: Moved more to left (balanced with logo) */
    z-index: 10;
    font-family: 'Inria Serif', serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.homepage-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    z-index: 1;
}

/* Default z-index for hero children */
.homepage-hero > .hero-content,
.homepage-hero > .hero-image {
    position: relative;
    z-index: 2;
}

/* Higher z-index for logo wrapper and ISSN to appear on top */
.homepage-hero .hero-logo-wrapper,
.homepage-hero .hero-issn {
    z-index: 10 !important;
}

/* v11.3: ABOUT PAGE - Automatically inherits all logo/BRIDA/ISSN styling from .homepage-hero rules above
   No additional styling needed - all positioning, fonts, colors are shared between homepage and about page */

/* v11.3: OPTIONAL - Uncomment untuk apply hero styling ke halaman lain jika diperlukan */
/*
.pkp_page_issue .homepage-hero,
.pkp_page_article .homepage-hero,
.pkp_page_search .homepage-hero {
    display: flex !important;
}

.pkp_page_issue .homepage-hero .hero-logo-wrapper,
.pkp_page_article .homepage-hero .hero-logo-wrapper,
.pkp_page_search .homepage-hero .hero-logo-wrapper {
    position: absolute;
    top: 91px;
    left: 180px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pkp_page_issue .homepage-hero .hero-issn,
.pkp_page_article .homepage-hero .hero-issn,
.pkp_page_search .homepage-hero .hero-issn {
    position: absolute;
    top: 91px;
    right: 180px;
    z-index: 10;
}
*/

/* HERO CONTENT - GESER KE KANAN */
.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    flex: 0 0 auto;
    max-width: 600px;
    padding-left: 0;
    padding-right: 40px;
    margin-left: 120px !important;         /* INCREASED margin untuk geser ke kanan */
}

.hero-content h1 {
    font-family: 'Inria Serif', serif;
    font-size: 70px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0%;
    margin: 0 0 20px 0;
    padding: 0;
    color: #ffffff !important;             /* PUTIH - bukan hijau */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    height: auto;
    word-wrap: break-word;
}

.hero-content .subtitle {
    font-family: 'Inria Serif', serif;
    font-size: 20px;
    font-weight: 600;
    max-width: 100%;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;             /* PUTIH - bukan hijau */
    color: #ffffff;
    text-align: left;
    display: none !important;              /* v11.0: HAPUS subtitle lama (BRIDA text) */
}

/* HERO IMAGE - DI KANAN TENGAH (TIDAK DI POJOK ATAS) */
.hero-image {
    position: absolute !important;
    right: 0 !important;                   /* Di kanan */
    top: 50% !important;                   /* Vertikal center */
    transform: translateY(-50%) !important; /* Center adjustment */
    z-index: 2;
    width: auto !important;
    max-width: 650px !important;
    height: auto !important;               /* Auto height */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-image img {
    width: auto;
    max-width: 650px;
    height: 100%;
    max-height: 473px;                     /* 544px - 71px */
    object-fit: contain;
    object-position: right center;         /* Stick to right */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   MAIN CONTENT LAYOUT - FIXED v2.0
   3. Description boxes: HORIZONTAL RECTANGLE (tidak gepeng)
   ========================================================================== */

.page_index_journal {
    background-color: #ffffff;
    margin: 0 auto;
    min-height: calc(100vh - 71px - 243px);
}

.content-wrapper {
    display: flex;                         /* FLEXBOX (not grid) */
    flex-direction: row;                   /* Horizontal layout */
    width: 100%;
    max-width: none !important;            /* v10.9: REMOVE max-width - let it expand */
    margin: 0 !important;                  /* v10.9: NO margin - full width */
    padding: 30px 40px !important;         /* v10.9: Thin side padding */
    gap: 40px !important;
    box-sizing: border-box;
    align-items: flex-start;               /* Align top */
}

/* v10.9: MAIN CONTENT - FULL WIDTH tanpa constraint Bootstrap */
.main-content-area {
    flex: 1 !important;                    /* GROW to fill available space */
    width: 100% !important;
    max-width: none !important;            /* v10.9: REMOVE max-width */
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* v10.7: NEW descriptions-wrapper - FULL WIDTH outside sidebar constraints */
.descriptions-wrapper {
    display: block !important;             /* BLOCK layout - no flex constraints */
    width: 100% !important;
    max-width: none !important;            /* v10.9: REMOVE constraint */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* SIDEBAR MENU - Fixed width, no grid */
.sidebar-menu {
    flex: 0 0 280px !important;            /* Fixed 280px width */
    width: 280px !important;
    min-width: 280px !important;
}

/* ===== v10.11: REMOVED DUPLICATE - See consolidated section at end of file ===== */

/* v10.14: DESCRIPTION CONTENT AREA - NO SHADOW */
.main-content-area {
    flex: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* ===== v10.14: REMOVED DUPLICATE - See consolidated section at end of file ===== */

.sidebar-menu-link:hover,
.sidebar-menu-item.active .sidebar-menu-link {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.sidebar-menu-link:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-sinta-badge {
    padding: 20px 0;
    text-align: center;
    margin-top: 0;
    /* border-top removed - separator line now before INDEX BY */
}

.sidebar-sinta-badge img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.sidebar-sinta-badge img:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   v11.3: SUBMISSIONS PAGE - Upload Button Layout
   ========================================================================== */

/* ==========================================================================
   v11.7: SUBMISSIONS PAGE - Using same structure as authorGuidelines
   ========================================================================== */

.submissions-info-section {
    margin-bottom: 40px;
}

.submissions-info-section .section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a1a;
    line-height: 1.3;
}

.submissions-info-section .section-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.submission-note-box {
    padding: 15px 30px;
    background: #f8f9fa;
    border-left: 4px solid #27ae60;
    border-radius: 6px;
    margin: 20px 0 30px 0;
}

.submission-note-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.upload-button-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
}

.btn-upload-article {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 50px;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.35);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-upload-article:hover {
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.45);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.btn-upload-article:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.upload-icon {
    font-size: 24px;
    font-weight: bold;
}

/* ==========================================================================
   AUTHOR GUIDELINES CONTENT STYLING (v11.4)
   ========================================================================== */

.author-guidelines-section {
    margin-bottom: 40px;
}

.author-guidelines-section .section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a1a1a;
    line-height: 1.3;
}

.author-guidelines-section .section-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

.author-guidelines-section .section-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   END: SUBMISSIONS PAGE STYLING
   ========================================================================== */

/* DUPLICATE REMOVED - CAUSING 2-2 LAYOUT ISSUE */

.info-section h3 {
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 0;
}

.info-section p,
.info-section ul {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 8px;
    width: 100% !important;                /* v10.8: Force full width */
    max-height: none !important;           /* v10.8: No height limit */
    overflow: visible !important;          /* v10.8: Show all content */
}

.info-section ul {
    padding-left: 20px;
}

/* v10.13: REMOVED DUPLICATE - See v10.13 consolidated section at end of file */

/* ========== v10.4: HARDWAY GRID ESCAPE - DESCRIPTIONS ========== */
/* Photo 1 & 4: Descriptions blocked by grid - AGGRESSIVE OVERRIDE */

/* v10.13: DUPLICATE REMOVED - .content-wrapper already defined at line ~736 */

/* Main content area - BREAK FREE FROM GRID */
.main-content-area,
.about-content-wrapper {
    flex: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* KILL ALL BOOTSTRAP GRID IN CONTENT AREA */
.main-content-area *[class*="col-"],
.main-content-area .row,
.about-content-wrapper *[class*="col-"],
.about-content-wrapper .row {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;


/* v10.13: REMOVED DUPLICATE - See v10.13 consolidated section at end of file */
    float: none !important;
    flex: none !important;
}

/* v10.9: FORCE descriptions to extend ke kanan (lepas dari Bootstrap constraint) */
@media (min-width: 993px) {
    .main-content-area {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 600px !important;       /* Ensure minimum width */
    }
    
    .journal-description,
    .info-section {
        width: 100% !important;
        max-width: none !important;        /* LEPAS constraint */
        min-width: 600px !important;       /* Ensure they extend */
    }
    
    .about-content-wrapper > *,
    body .about-content-wrapper section,
    body .about-content-wrapper div {
        width: 100% !important;
        max-width: none !important;        /* LEPAS constraint */
        min-width: 600px !important;       /* Ensure they extend */
    }
}

/* v10.12: REMOVED DUPLICATE - See v10.12 consolidated section at end of file */

/* About page content sections - NO BORDER PER USER REQUEST */
.about-content-wrapper > *,
body .about-content-wrapper section,
body .about-content-wrapper div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    flex: none !important;
    position: relative !important;
    margin: 0 0 30px 0 !important;
    padding: 25px 30px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-left: none !important;          /* NO BORDER for About page */
    min-height: 120px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* About page specific - kill grid in content */
.pkp_page_about .about-content-wrapper h2,
.pkp_page_about .about-content-wrapper h3,
.pkp_page_about .about-content-wrapper h4 {
    width: 100% !important;
    display: block !important;
    clear: both !important;
    color: #2ecc71 !important;
    margin-bottom: 15px !important;
}

.pkp_page_about .about-content-wrapper p,
.pkp_page_about .about-content-wrapper ul,
.pkp_page_about .about-content-wrapper ol {
    width: 100% !important;
    display: block !important;
    clear: both !important;
    line-height: 1.8 !important;
    color: #555 !important;
    min-width: 0 !important;
    gap: 20px !important;
    overflow: visible !important;
    position: relative !important;
}

/* v10.6: FORCE all Bootstrap grid elements to full width - AGGRESSIVE */
.main-content-area .row,
.main-content-area [class*="col-"],
.main-content-area .container,
.main-content-area .container-fluid,
.about-content-wrapper .row,
.about-content-wrapper [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    display: block !important;
    flex: 0 0 100% !important;
    position: static !important;
}

/* About page content wrapper - same rules */
.about-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}

/* ===== v10.12: REMOVED DUPLICATES - See consolidated section at end of file ===== */
/* Previously: .journal-description, .info-section, .about-content-wrapper sections */
/* All styling moved to v10.12 consolidated section for cleaner CSS */

.index-badge {
    display: inline-block;
    margin-top: 20px;
}

.index-badge img {
    max-width: 180px;
    height: auto;
}

/* ==========================================================================
   ABOUT PAGE - NO COLUMNS, FULL WIDTH HORIZONTAL
   ========================================================================== */

.page_about,
.pkp_page_about {
    background-color: #ffffff !important;
}

.pkp_page_about .page,
.page_about {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* About content wrapper - FULL WIDTH, NO COLUMNS */
.about-content-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 60px !important;
    display: block !important;             /* BLOCK - NO grid/flex */
}

/* About page sections - HORIZONTAL RECTANGLES */
.pkp_page_about #main-content section,
.page_about #main-content section,
.about-content-wrapper section {
    background: transparent !important;
    padding: 25px 30px !important;
    border-left: 4px solid #2ecc71;
    margin-bottom: 30px !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    overflow: visible !important;
}

/* About page titles - v10.7: SPECIFIC COLOR RULES */
/* "About the Journal" and other content headings - BLACK (EXCLUDE hero h1) */
.page_about .about-content-wrapper h1,
.pkp_page_about .about-content-wrapper h1,
.pkp_page_about #main-content h1:not(.hero-content h1) {
    color: #2c3e50 !important;             /* v10.6: BLACK - not green */
    font-size: 32px !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin-bottom: 30px !important;
    padding-left: 20px;
    border-left: 4px solid #2ecc71;
}

/* v10.6: About page hero h1 specific overrides (if needed beyond base) */
.pkp_page_about .hero-content h1,
.page_about .hero-content h1 {
    font-size: 70px !important;            /* Ensure LARGE like home */
    text-align: left !important;
    padding-left: 0 !important;
    border-left: none !important;
}

.page_about h2,
.pkp_page_about h2,
.about-content-wrapper h2 {
    color: #2ecc71 !important;             /* GREEN - keep heading green */
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

.page_about h3,
.pkp_page_about h3 {
    color: #2ecc71 !important;             /* GREEN - keep heading green */
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

/* v10.5: Remove green from body text, keep only headings green */
.pkp_page_about p,
.pkp_page_about li,
.pkp_page_about ul,
.pkp_page_about ol,
.about-content-wrapper p,
.about-content-wrapper li {
    color: #555 !important;                /* NORMAL black text, NOT green */
}

.page_about h4,
.pkp_page_about h4 {
    color: #27ae60 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* About page paragraphs and lists */
.pkp_page_about p,
.page_about p,
.about-content-wrapper p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.pkp_page_about ul,
.page_about ul {
    padding-left: 30px;
    margin-bottom: 20px;
}

.pkp_page_about li,
.page_about li {
    margin-bottom: 8px;
    color: #666;
}

/* ==========================================================================
   FOOTER STYLING
   ========================================================================== */

.footer {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 243px;
    margin: 0;
    background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%) !important;
    color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 40px 0;
}

footer.footer,
.pkp_structure_footer,
.footer {
    background-color: #27ae60 !important;
    background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%) !important;
}

.footer::before {
    content: '';
    position: absolute;
    top: -116px;
    left: 0;
    width: 100%;
    height: 359px;
    background-image: none;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}

.footer .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    padding: 0 46px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
}

.footer-info {
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.95;
    color: #ffffff;
}

.footer-info p {
    margin-bottom: 5px;
    color: #ffffff;
}

.footer-info a {
    color: #ffffff !important;            /* v10.8: Force white */
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.footer-info a:hover {
    opacity: 0.8;
    color: #ffffff !important;            /* v10.8: Force white on hover */
}

/* v10.8: ALL footer text white - no exceptions */
.footer *,
.pkp_structure_footer *,
footer.footer *,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.footer p, .footer span, .footer div, .footer a, .footer li {
    color: #ffffff !important;
}

.footer a:visited,
.footer a:active,
.footer a:focus {
    color: #ffffff !important;
}

/* ==========================================================================
   LOGIN & REGISTER PAGES - FIXED v2.0
   5. Logo dan header centered seperti home page
   ========================================================================== */

.pkp_page_login,
.pkp_page_user.pkp_op_register,
body.pkp_page_login,
body.pkp_page_user.pkp_op_register {
    padding-top: 71px !important;          /* HEADER HEIGHT */
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure header visible on login/register mobile */
@media (max-width: 767px) {
    .pkp_page_login #headerNavigationContainer,
    .pkp_page_user.pkp_op_register #headerNavigationContainer {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 71px !important;
        background: #ffffff !important;
        z-index: 1000 !important;
    }
}

.pkp_page_login .pkp_page_content,
.pkp_page_login .page,
.pkp_page_user.pkp_op_register .pkp_page_content,
.pkp_page_user.pkp_op_register .page,
.pkp_page_login main,
.pkp_page_user.pkp_op_register main {
    margin: 0 auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pkp_page_login form,
.pkp_page_user.pkp_op_register form {
    background: #ffffff !important;
    padding: 50px 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* v10.23: Hide breadcrumbs on login & register pages */
.pkp_page_login .cmp_breadcrumbs,
.pkp_page_user.pkp_op_register .cmp_breadcrumbs {
    display: none !important;
}

.pkp_page_login h1,
.pkp_page_user.pkp_op_register h1,
.pkp_page_login h2,
.pkp_page_user.pkp_op_register h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    margin-top: 0 !important;
}

.pkp_page_login .form-group,
.pkp_page_user.pkp_op_register .form-group,
.pkp_page_login fieldset,
.pkp_page_user.pkp_op_register fieldset {
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
}

.pkp_page_login label,
.pkp_page_user.pkp_op_register label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.pkp_page_login .form-control,
.pkp_page_user.pkp_op_register .form-control,
.pkp_page_login input[type="text"],
.pkp_page_login input[type="email"],
.pkp_page_login input[type="password"],
.pkp_page_user.pkp_op_register input[type="text"],
.pkp_page_user.pkp_op_register input[type="email"],
.pkp_page_user.pkp_op_register input[type="password"],
.pkp_page_user.pkp_op_register select {
    margin-bottom: 20px !important;
    height: 52px !important;
    padding: 14px 18px !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pkp_page_login .form-control:focus,
.pkp_page_user.pkp_op_register .form-control:focus,
.pkp_page_login input:focus,
.pkp_page_user.pkp_op_register input:focus,
.pkp_page_user.pkp_op_register select:focus {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.15) !important;
    outline: none !important;
}

.pkp_page_login .btn-primary,
.pkp_page_login button[type="submit"],
.pkp_page_login .submit,
.pkp_page_user.pkp_op_register .btn-primary,
.pkp_page_user.pkp_op_register button[type="submit"],
.pkp_page_user.pkp_op_register .submit {
    width: 100% !important;
    height: 54px !important;
    background: linear-gradient(135deg, #2ecc71 0%, #3498db 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 25px !important;
}

.pkp_page_login .btn-primary:hover,
.pkp_page_login button[type="submit"]:hover,
.pkp_page_login .submit:hover,
.pkp_page_user.pkp_op_register .btn-primary:hover,
.pkp_page_user.pkp_op_register button[type="submit"]:hover,
.pkp_page_user.pkp_op_register .submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(46, 204, 113, 0.35) !important;
}

/* v10.23: Register button on Login page - match padding with login button */
.pkp_page_login .register,
.pkp_page_login a.register,
.pkp_page_login .btn-default {
    display: inline-block !important;
    width: 100% !important;
    height: 54px !important;
    line-height: 38px !important;         /* v10.23: Adjusted for padding */
    text-align: center !important;
    background: #f0f0f0 !important;
    color: #555 !important;
    border-radius: 10px !important;
    margin-top: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.pkp_page_login .register:hover,
.pkp_page_login a.register:hover,
.pkp_page_login .btn-default:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

/* v10.23: Login link on Register page - match Register button style on Login page */
.pkp_page_user.pkp_op_register .page a[href*="login"],
.pkp_page_user.pkp_op_register .btn-default {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    background: #f0f0f0 !important;
    color: #555 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;
    height: 54px !important;
}

.pkp_page_user.pkp_op_register .page a[href*="login"]:hover,
.pkp_page_user.pkp_op_register .btn-default:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}



.pkp_page_login a,
.pkp_page_user.pkp_op_register a {
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.pkp_page_login a:hover,
.pkp_page_user.pkp_op_register a:hover {
    color: #2ecc71 !important;
    text-decoration: underline !important;
}

.pkp_page_login .checkbox label,
.pkp_page_user.pkp_op_register .checkbox label,
.pkp_page_login .optin label,
.pkp_page_user.pkp_op_register .optin label {
    font-weight: 400 !important;
    color: #666 !important;
    font-size: 14px !important;
}

/* v10.7 Photo 8: Hide reviewer role section on Register page */
.pkp_page_user.pkp_op_register fieldset:has(legend:contains("Would you be willing")),
.pkp_page_user.pkp_op_register .reviewerInfo,
.pkp_page_user.pkp_op_register .reviewer,
.pkp_page_user.pkp_op_register fieldset[id*="reviewer"],
.pkp_page_user.pkp_op_register #reviewerInfo,
.pkp_page_user.pkp_op_register label[for*="reviewer"],
.pkp_page_user.pkp_op_register input[name*="reviewer"],
.pkp_page_user.pkp_op_register textarea[name*="reviewer"] {
    display: none !important;
}

/* Target by text content - hide "Would you be willing" section */
.pkp_page_user.pkp_op_register h3:contains("Would you"),
.pkp_page_user.pkp_op_register h3 + .form-group:has(input[type="checkbox"]) {
    display: none !important;
}

/* Footer on login/register pages */
.pkp_page_login .footer,
.pkp_page_user.pkp_op_register .footer,
.pkp_page_login .pkp_structure_footer,
.pkp_page_user.pkp_op_register .pkp_structure_footer,
.pkp_page_login footer,
.pkp_page_user.pkp_op_register footer {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 80px !important;
    padding: 40px 0 !important;
}

.pkp_page_login .footer .container,
.pkp_page_user.pkp_op_register .footer .container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 100px !important;
}

/* ========== v10.4: Login & Register Complete Overhaul ========== */

/* LOGIN PAGE - PC NORMAL (≥993px) */
/* v11.5: Login page - USE SAME positioning as About/Index (left: 20px, top: 0) */
@media (min-width: 993px) {
    .pkp_page_login #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 20px !important;             /* MATCH homepage/about */
        top: 0px !important;               /* MATCH homepage/about */
        transform: none !important;
    }
}

/* LOGIN PAGE - PC MINI (768-992px) */
/* v11.5: Match About page positioning */
@media (min-width: 768px) and (max-width: 992px) {
    .pkp_page_login #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 20px !important;             /* MATCH homepage/about */
        top: 0px !important;               /* MATCH homepage/about */
        transform: none !important;
    }
    
    .pkp_page_login .navbar-toggle {
        position: fixed !important;
        left: 9px !important;              /* v10.6: 9px from left */
        top: 0px !important;               /* v10.6: top 0px */
        right: auto !important;
        transform: none !important;
        z-index: 1005 !important;          /* v10.6: Above nav-menu */
    }
}

/* LOGIN PAGE - MOBILE (≤767px) */
/* v10.19: Simplified - inherits base mobile styles, only override differences */
@media (max-width: 767px) {
    .pkp_page_login #headerNavigationContainer .navbar-header {
        left: 165px !important;
        top: 40px !important;               /* user, tdk usah diubah */
    }
    
    .pkp_page_login .navbar-toggle {
        left: 8px !important;              /* v10.19: Match base mobile */
    }
}

/* REGISTER PAGE - PC NORMAL (≥993px) */
/* v11.5: Match About/Login page positioning */
@media (min-width: 993px) {
    .pkp_page_user.pkp_op_register #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 20px !important;             /* MATCH homepage/about/login */
        top: 0px !important;               /* MATCH homepage/about/login */
        transform: none !important;
    }
    
    /* v10.25: Fix navigationUser - sama tinggi, pojok kanan atas & no dark background */
    .pkp_page_user.pkp_op_register #navigationUser {
        position: absolute !important;
        right: 15px !important;            /* Pojok kanan */
        top: 0 !important;              /* Sama tinggi dengan halaman lain */
    }
    
    .pkp_page_user.pkp_op_register #navigationUser li a {
        background: transparent !important;
        padding: 5px 10px !important;
        vertical-align: middle !important; /* Pastikan sejajar */
    }
    
    .pkp_page_user.pkp_op_register #navigationUser li a:hover {
        background: rgba(46, 204, 113, 0.1) !important;
    }

}

/* REGISTER PAGE - PC MINI (768-992px) */
/* v11.5: Match About/Login page positioning */
@media (min-width: 768px) and (max-width: 992px) {
    .pkp_page_user.pkp_op_register #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 20px !important;             /* MATCH homepage/about/login */
        top: 0px !important;               /* MATCH homepage/about/login */
        transform: none !important;
    }
    
    /* v10.25: Fix navigationUser - sama tinggi, pojok kanan atas */
    .pkp_page_user.pkp_op_register #navigationUser {
        position: absolute !important;
        right: 15px !important;
        top: 12px !important;
    }
    
    /* v10.25: Fix navigationUser - sama tinggi & no dark background */
    .pkp_page_user.pkp_op_register #navigationUser li a {
        background: transparent !important;
        padding: 5px 10px !important;
        vertical-align: middle !important;
    }
    
    .pkp_page_user.pkp_op_register #navigationUser li a:hover {
        background: rgba(46, 204, 113, 0.1) !important;
    }
    
    .pkp_page_user.pkp_op_register .navbar-toggle {
        position: fixed !important;
        left: 9px !important;              /* v10.6: 9px from left */
        top: 0px !important;               /* v10.6: top 0px */
        right: auto !important;
        transform: none !important;
        z-index: 1005 !important;          /* v10.6: Above nav-menu */
    }
}

/* REGISTER PAGE - MOBILE (≤767px) */
/* v10.26: Add override for navigationUser positioning - Icon Login naik biar sama dengan icon Register */
@media (max-width: 767px) {
    /* PENTING: Ini override khusus register page mobile, tidak mengubah top: 0 base config */
    .pkp_page_user.pkp_op_register #navigationUser {
        position: absolute !important;
        right: 1px !important;
        top: 0px !important;              /* v10.26: Naik 2px dari base config (24px) biar icon login sama tinggi dengan icon register */
        padding: 3px 6px !important;
        font-size: 12px !important;
    }
    
    .pkp_page_user.pkp_op_register #navigationUser li a {
        background: transparent !important;
        padding: 5px 8px !important;       /* Pastikan padding sama */
        line-height: 1.2 !important;       /* Tinggi konsisten */
        vertical-align: middle !important;
    }
    
    .pkp_page_user.pkp_op_register #navigationUser li a:hover {
        background: rgba(46, 204, 113, 0.1) !important;
    }
}

/* ========== v10.5: About Page Complete Fix ========== */

/* About PC normal - Logo position + navbar-toggle */
@media (min-width: 993px) {
    /* v11.4: REMOVED - Use default homepage positioning for consistency */
    /* .pkp_page_about #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 50px !important;
        top: 8px !important;
        transform: none !important;
    } */
    
    .pkp_page_about .navbar-toggle {
        top: 0px !important;               /* v10.5: At header top */
    }
}

/* About PC mini (768-992px) - navbar-toggle position */
/* v10.7 Photo 6: Navbar-toggle top: 0px */
@media (min-width: 768px) and (max-width: 992px) {
    /* v11.4: REMOVED - Use default homepage positioning for consistency */
    /* .pkp_page_about #headerNavigationContainer .navbar-header {
        position: absolute !important;
        left: 50px !important;
        top: 8px !important;
        transform: none !important;
    } */
    
    .pkp_page_about .navbar-toggle {
        position: fixed !important;
        left: 15px !important;             /* KIRI */
        top: 0px !important;               /* v10.7: Photo 6 - was -15px */
        right: auto !important;
        z-index: 1005 !important;          /* Above everything */
    }
}

/* v10.15: About mobile - DIHAPUS DUPLIKASI - sudah ada di line 280-320 */
/* About descriptions - ESCAPE Bootstrap grid, make wide 1-kebawah */
.pkp_page_about .about-content-wrapper {
    display: flex !important;
    flex-direction: column !important;     /* VERTICAL STACKING */
    gap: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* About page - ALL content children escape grid */
.pkp_page_about .about-content-wrapper > * {
    width: 100% !important;                /* FULL WIDTH - kekanan */
    max-width: 900px !important;           /* v10.5: Max width for readability */
    margin: 0 !important;
    padding: 20px 30px !important;
    background: transparent !important;
    /*border-left: 4px solid #2ecc71 !important;*/
    min-height: 100px !important;          /* Not too thin */
    height: auto !important;               /* AUTO based on content */
    max-height: none !important;           /* NO LIMIT */
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;             /* No grow/shrink */
}

/* About page headings */
.pkp_page_about .about-content-wrapper h2,
.pkp_page_about .about-content-wrapper h3 {
    color: #2ecc71 !important;             /* Keep headings GREEN */
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

/* About page paragraphs */
.pkp_page_about .about-content-wrapper p,
.pkp_page_about .about-content-wrapper ul,
.pkp_page_about .about-content-wrapper ol {
    line-height: 1.8 !important;
    color: #555 !important;
    margin-bottom: 10px !important;
}

/* Override any Bootstrap grid interference */
.pkp_page_about .about-content-wrapper .row,
.pkp_page_about .about-content-wrapper [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ==========================================================================
   RESPONSIVE - DESKTOP LARGE (1200px+)
   Hero left: 75% ONLY for large desktop screens
   ========================================================================== */

@media (min-width: 1200px) {
    .homepage-hero {
        left: 75% !important;              /* SHIFT right ONLY on large desktop */
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE FIXES v2.0
   4. Mobile description: Square/Rectangle (tidak gepeng)
   ========================================================================== */

@media (max-width: 1440px) {
    .homepage-hero {
        padding: 60px 80px;
        padding-top: 91px;                 /* Adjust for header */
        left: 50% !important;              /* RESET to center for smaller screens */
    }

    .hero-content {
        margin-left: 60px;
    }

    .hero-content h1 {
        font-size: 60px;
    }

    .hero-content .subtitle {
        font-size: 18px;
    }
    
    .hero-image {
        max-width: 450px;
    }
    
    .content-wrapper {
        padding: 40px 80px;
    }
}

@media (max-width: 1200px) {
    /* Single column layout on tablet */
    .main-content-area {
        grid-template-columns: 1fr !important; /* Single column */
    }
    
    /* Info sections remain rectangular but stack vertically */
    .info-section {
        min-height: 150px !important;
    }
    
    .homepage-hero {
        height: auto;
        min-height: 450px;
        padding: 40px 40px;
        padding-top: 91px;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
    }
    
    .hero-content {
        max-width: 100%;
        text-align: center;
        padding: 0;
        margin-left: 0;
    }
    
    .hero-content h1 {
        font-size: 50px;
        max-width: 100%;
        margin: 0 auto 20px;
    }
    
    .hero-content .subtitle {
        font-size: 16px;
        max-width: 100%;
        text-align: center;
    }
    
    .hero-image {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: 450px;
        width: 80%;
        margin: 30px auto 0;
    }
    
    #headerNavigationContainer .navbar-brand {
        font-size: 22px;
    }
    
    .content-wrapper {
        flex-direction: column;
        padding: 40px 40px;
    }
    
    .sidebar-menu {
        width: 100%;
        margin-bottom: 30px;
    }
    
    /* Author Guidelines title responsive - tablet */
    .author-guidelines-section .section-title {
        font-size: 28px;
    }
    
    .author-guidelines-section .section-content p {
        font-size: 15px;
    }
}

/* v10.20: TABLET ONLY (768-992px) - not mobile */
@media (min-width: 768px) and (max-width: 992px) {
    body {
        padding-top: 71px;
    }
    
    /* TABLET: Change flex to column (stack sidebar + content) */
    .content-wrapper {
        flex-direction: column !important; /* Stack vertically */
        gap: 30px !important;
        padding: 40px 30px !important;
    }
    
    /* MOBILE: Main content area full width */
    .main-content-area {
        width: 100% !important;
    }
    
    /* Sidebar full width on mobile */
    .sidebar-menu {
        flex: 0 0 auto !important;         /* No fixed flex-basis */
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Sidebar buttons centered (not menjorok kanan) */
    .sidebar-menu-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center !important; /* CENTERED */
        gap: 15px;
        padding: 0 20px;                   /* Side padding */
    }
    
    .sidebar-menu-link {
        width: 280px !important;           /* Fixed width */
        max-width: calc(100% - 40px);      /* Responsive max width */
    }
    
    /* Description full width */
    .journal-description,
    .info-section {
        width: 100% !important;
        padding: 20px 25px !important;     /* Padding for content */
        min-height: 120px !important;      /* Shorter on mobile */
    }
    
    .homepage-hero {
        padding: 30px 30px;
        padding-top: 91px;
        min-height: 400px;
        gap: 30px;
        left: 50% !important;              /* Center on mobile */
    }
    
    /* v11.0: Hero logo/BRIDA/ISSN responsive - Tablet */
    .homepage-hero .hero-logo-wrapper,
    .pkp_page_about .homepage-hero .hero-logo-wrapper,
    .pkp_page_submissions .homepage-hero .hero-logo-wrapper {
        top: 106px;                         /* v11.2: 91px padding + 15px offset for tablet */
        left: 100px;                        /* v11.3: More to right for tablet (not edge) */
    }
    
    .homepage-hero .hero-logo,
    .pkp_page_about .homepage-hero .hero-logo,
    .pkp_page_submissions .homepage-hero .hero-logo {
        width: 30px;
        height: 39px;
    }
    
    .homepage-hero .hero-brida-text,
    .pkp_page_about .homepage-hero .hero-brida-text,
    .pkp_page_submissions .homepage-hero .hero-brida-text {
        font-size: 11px;
        max-width: 220px;
    }
    
    .homepage-hero .hero-issn,
    .pkp_page_about .homepage-hero .hero-issn,
    .pkp_page_submissions .homepage-hero .hero-issn {
        top: 106px;                         /* v11.2: Match logo wrapper position */
        right: 100px;                       /* v11.3: More to left for tablet (balanced) */
        font-size: 10px;
    }
    
    .hero-content h1 {
        font-size: 42px;
    }
    
    .hero-content .subtitle {
        font-size: 15px;
    }
    
    .hero-image {
        max-width: 400px;
        width: 75%;
        margin: 0 auto;
    }
    
    .content-wrapper {
        padding: 30px 30px;
    }
    
    /* NAVBAR HEADER - Keep left on tablet */
    #headerNavigationContainer .navbar-header {
        left: 100px !important;
    }
    
    /* v10.5: REMOVED conflicting horizontal sidebar rules - Use mobile-specific rules below */

    #headerNavigationContainer .navbar-brand {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    /* v10.20: CONSOLIDATED - removed duplicate header positioning */
    /* Header positioning now only in @media (max-width: 767px) section above */
    
    body {
        padding-top: 71px !important;      /* v10.20: Match header height at top 0 */
    }
    
    /* Navbar-toggle icon bars */
    .navbar-toggle .icon-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background-color: #999 !important;
        margin: 4px 0 !important;
    }
    
    #headerNavigationContainer .navbar-brand {
        font-size: 18px !important;
    }
    
    /* Sidebar - VISIBLE on mobile */
    .sidebar-menu {
        display: flex !important;          /* SHOW sidebar */
        position: relative !important;     /* v10.8: RELATIVE not fixed - always visible */
        top: auto !important;
        left: auto !important;             /* v10.8: AUTO - not -100% */
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        z-index: auto !important;
        overflow-y: visible !important;
        transition: none !important;
        box-shadow: none !important;
        flex-direction: column !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .sidebar-menu.sidebar-open {
        left: auto !important;             /* v10.8: No slide animation on mobile */
    }
    
    /* Sidebar menu list - VISIBLE */
    .sidebar-menu-list {
        display: flex !important;          /* SHOW list */
        flex-direction: column !important;
        gap: 15px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;    /* v10.5: FORCE VISIBLE */
        opacity: 1 !important;             /* v10.5: FORCE OPAQUE */
        height: auto !important;           /* v10.6: Auto height */
        min-height: 300px !important;      /* v10.6: Min height to ensure visibility */
    }
    
    /* v10.9: SUPER FORCE - sidebar-menu-list MUST BE VISIBLE */
    body .sidebar-menu .sidebar-menu-list,
    .pkp_page_index .sidebar-menu .sidebar-menu-list,
    .pkp_page_about .sidebar-menu .sidebar-menu-list,
    aside.sidebar-menu ul.sidebar-menu-list {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .sidebar-menu-item {
        display: block !important;         /* SHOW items */
        visibility: visible !important;    /* v10.5: FORCE VISIBLE */
        opacity: 1 !important;             /* v10.5: FORCE OPAQUE */
        width: 100% !important;            /* v10.6: Full width */
        height: auto !important;           /* v10.6: Auto height */
        min-height: 50px !important;       /* v10.6: Min height */
    }
    
    .sidebar-menu-link {
        display: block !important;         /* v10.6: BLOCK not FLEX for better compatibility */
        width: 100% !important;
        height: 50px !important;
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
        color: #ffffff !important;
        padding: 0 20px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-size: 15px !important;
        visibility: visible !important;    /* v10.5: FORCE VISIBLE */
        opacity: 1 !important;             /* v10.5: FORCE OPAQUE */
        font-weight: 600 !important;
        line-height: 50px !important;      /* v10.7: Vertical center */
        text-align: left !important;       /* v10.7: Left align */
    }
    
    /* v10.7: ULTRA FORCE - Ensure link text is visible */
    .sidebar-menu-link,
    .sidebar-menu-link *,
    .sidebar-menu-link::before,
    .sidebar-menu-link::after {
        color: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: inline !important;
    }
    
    .sidebar-sinta-badge {
        display: block !important;         /* SHOW SINTA badge */
        margin-top: 20px !important;
    }
    
    /* Sidebar backdrop for click-outside-to-close */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
    }
    
    /* v10.14: Sidebar mobile behavior - NO SHADOW */
    .sidebar-menu {
        position: fixed !important;
        top: 71px !important;
        left: -100% !important;            /* Hidden by default */
        width: 280px !important;
        height: calc(100vh - 71px) !important;
        background: #ffffff !important;
        z-index: 1001 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: none !important;       /* v10.14: NO SHADOW */
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .sidebar-menu.sidebar-open {
        left: 0 !important;                /* Slide in when open */
    }
    
    /* Prevent body scroll when sidebar is open */
    body.sidebar-menu-open {
        overflow: hidden;
    }
    
    /* ========== END MOBILE SIDEBAR FIX ========== */
    
    /* v10.5: MOBILE content-wrapper - STACK vertically for grid escape */
    .content-wrapper {
        flex-direction: column !important;  /* STACK vertically not horizontally */
        padding: 20px !important;           /* Reduce padding on mobile */
        gap: 20px !important;
    }
    
    /* v10.7: MOBILE descriptions-wrapper - FULL WIDTH */
    .descriptions-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px 20px 20px !important;  /* Match mobile padding */
        margin: 0 !important;
    }
    
    /* MOBILE: Keep flex column for horizontal rectangles */
    .main-content-area {
        flex-direction: column !important;  /* Single column */
        gap: 20px !important;
        width: 100% !important;             /* v10.5: Full width */
        max-width: 100% !important;         /* v10.5: No constraint */
    }
    
    /* Info sections remain horizontal rectangles (not tall gepeng) */
    .info-section {
        min-height: 120px !important;       /* Not too tall */
        width: 100% !important;             /* Full width horizontal */
        padding: 20px !important;
    }
    
    /* Author Guidelines title responsive - mobile */
    .author-guidelines-section .section-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    .author-guidelines-section .section-content p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 16px;
    }
    
    .homepage-hero {
        padding: 30px 20px;
        padding-top: 91px;
        min-height: 350px;
        gap: 20px;
        margin-left: -50vw !important;
    }
    
    /* v11.0: Hero logo/BRIDA/ISSN responsive - Mobile */
    .homepage-hero .hero-logo-wrapper,
    .pkp_page_about .homepage-hero .hero-logo-wrapper,
    .pkp_page_submissions .homepage-hero .hero-logo-wrapper {
        top: 106px;                         /* v11.2: 91px padding + 15px offset for mobile */
        left: 15px;
        gap: 8px;
    }
    
    .homepage-hero .hero-logo,
    .pkp_page_about .homepage-hero .hero-logo,
    .pkp_page_submissions .homepage-hero .hero-logo {
        width: 28px;
        height: 37px;
    }
    
    .homepage-hero .hero-brida-text,
    .pkp_page_about .homepage-hero .hero-brida-text,
    .pkp_page_submissions .homepage-hero .hero-brida-text {
        font-size: 9px;
        max-width: 180px;
    }
    
    .homepage-hero .hero-issn,
    .pkp_page_about .homepage-hero .hero-issn,
    .pkp_page_submissions .homepage-hero .hero-issn {
        top: 106px;                         /* v11.2: Match logo wrapper position */
        right: 15px;
        font-size: 9px;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-content .subtitle {
        font-size: 14px;
    }
    
    .hero-image {
        position: relative !important;      /* Remove absolute on mobile */
        max-width: 350px;
        width: 70%;
        height: auto !important;
        margin: 0 auto;
    }
    
    .content-wrapper {
        padding: 30px 20px;
        flex-direction: column !important;
    }
    
    /* Mobile main content - full width */
    .main-content-area {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Hero visible on mobile */
    .homepage-hero {
        display: flex !important;
    }
    
    .footer {
        height: auto;
        padding: 30px 15px;
    }
    
    .footer .container {
        padding: 0 20px;
    }
    
    /* NAVBAR HEADER - Proper left positioning for mobile */
    #headerNavigationContainer .navbar-header {
        left: 60px !important;              /* Visible on mobile */
        position: relative !important;
    }
    
    #headerNavigationContainer > .container-fluid:first-child {
        position: relative;
        top: auto;
        right: auto;
        text-align: right;
        padding: 5px 15px;
    }
}

@media (max-width: 576px) {
    /* MOBILE: Info sections - horizontal rectangles (tidak gepeng vertikal) */
    .info-section {
        min-height: 100px !important;       /* Shorter for very small screens */
        width: 100% !important;             /* Full width horizontal */
        padding: 18px !important;
    }
    
    .homepage-hero {
        padding: 20px 15px;
        padding-top: 91px;
        min-height: 300px;
        gap: 15px;
        flex-direction: column;             /* Stack content vertically */
    }
    
    .hero-content {
        margin-left: 0 !important;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 28px;
    }
    
    .hero-content .subtitle {
        font-size: 13px;
    }
    
    .hero-image {
        position: relative !important;      /* Not absolute on very small screens */
        max-width: 280px;
        width: 65%;
        height: auto !important;
        margin: 0 auto;
    }
    
    .content-wrapper {
        padding: 20px 15px;
    }
    
    .sidebar-menu-link {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
    }
    
    /* NAVBAR HEADER - Center logo for very small mobile */
    #headerNavigationContainer .navbar-header {
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: relative !important;
    }
    
    #headerNavigationContainer .navbar-brand {
        font-size: 16px;
    }
    
    .navbar-brand-logo img {
        max-height: 35px !important;
    }
    
    .footer-title {
        font-size: 16px;
    }
    
    .footer-info {
        font-size: 12px;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-green {
    color: #2ecc71;
}

.bg-green {
    background-color: #2ecc71;
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

/* Hide old carousel */
#carouselExample,
.carousel {
    display: none !important;
}

.homepage-image {
    display: none;
}

/* Hide articles on homepage */
.page_index_journal .current_issue,
.page_index_journal section.current_issue,
.page_index_journal .issue-toc,
.page_index_journal .articles,
.page_index_journal .obj_issue_toc {
    display: none !important;
}

.page_index_journal a[href*="issue/archive"],
.page_index_journal .read-more {
    display: none !important;
}

/* ==========================================================================
   MOBILE SIDEBAR BACKDROP
   ========================================================================== */

/* Backdrop overlay for mobile sidebar */
.nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;                         /* INCREASE: above sidebar */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;                  /* ENSURE backdrop is clickable */
}

.nav-backdrop.show {
    display: block;
    opacity: 1;
}

/* Prevent body scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* Ensure sidebar appears BELOW backdrop (so toggle button above both) */
#nav-menu {
    z-index: 999 !important;               /* BELOW backdrop */
}

/* Ensure navbar toggle button ABOVE everything */
.navbar-toggle {
    z-index: 1003 !important;              /* HIGHEST - always clickable */
    position: relative;
}

/* Make toggle button fixed when menu open (always visible) */
body.menu-open .navbar-toggle {
    position: fixed !important;            /* FIXED position */
    left: 20px !important;                 /* Fixed left position */
    top: 20px !important;                  /* Fixed top position */
    transform: none !important;            /* Remove transform */
    z-index: 1003 !important;              /* Above everything */
}

/* ========== v10.6: ULTRA NUCLEAR FIX - GRID ESCAPE FOR ALL PAGES ========== */
/* ULTRA AGGRESSIVE - Target EVERY element to break Bootstrap grid */
/* This MUST be at the END of CSS file to win cascade war */

/* Kill Bootstrap grid EVERYWHERE - target ALL descendants */
body .main-content-area *,
body .about-content-wrapper *,
.main-content-area *,
.about-content-wrapper * {
    box-sizing: border-box !important;
}

/* Kill ALL Bootstrap grid classes - ULTRA AGGRESSIVE */
body .main-content-area .row,
body .main-content-area [class*="col-"],
body .main-content-area .container,
body .main-content-area .container-fluid,
body .about-content-wrapper .row,
body .about-content-wrapper [class*="col-"],
body .about-content-wrapper .container,
body .about-content-wrapper .container-fluid,
.main-content-area .row,
.main-content-area [class*="col-"],
.main-content-area .container,
.main-content-area .container-fluid,
.about-content-wrapper .row,
.about-content-wrapper [class*="col-"],
.about-content-wrapper .container,
.about-content-wrapper .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    flex: none !important;
    position: static !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    flex: none !important;
    position: static !important;
    box-sizing: border-box !important;
}

/* FORCE descriptions as WIDE HORIZONTAL RECTANGLES stacked 1-kebawah - ALL PAGES */
body .main-content-area .journal-description,
body .main-content-area .info-section,
body .about-content-wrapper section,
body .about-content-wrapper div,
.main-content-area .journal-description,
.main-content-area .info-section,
.about-content-wrapper section,
.about-content-wrapper div {
    width: 100% !important;                /* FULL WIDTH - horizontal rectangle */
    max-width: 100% !important;            /* NO LIMIT */
    min-width: 0 !important;
    display: block !important;             /* BLOCK for stacking */
    clear: both !important;                /* FORCE new line (1-kebawah) */
    float: none !important;                /* NO FLOAT */
    flex: none !important;                 /* NO FLEX */
    position: relative !important;         /* STATIC/RELATIVE only */
    margin: 0 0 30px 0 !important;         /* Bottom margin for spacing */
    padding: 25px 30px !important;         /* Content padding */
    background: transparent !important;
    border-radius: 0 !important;
    min-height: 120px !important;          /* Horizontal rectangle height */
    height: auto !important;               /* AUTO based on content */
    max-height: none !important;           /* NO MAX HEIGHT */
    overflow: visible !important;          /* NEVER CLIP */
    box-sizing: border-box !important;
}

/* About page hero - VISIBLE on all screen sizes */
body .pkp_page_about .homepage-hero {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .pkp_page_about .hero-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;       /* v10.25: Absolute like home page */
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    max-width: 650px !important;
}

body .pkp_page_about .hero-image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 650px !important;
    height: auto !important;
    max-height: 473px !important;
    object-fit: contain !important;
    object-position: right center !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    /* v10.9: ULTRA SPECIFIC for about hero h1 */
    html body.pkp_page_about .homepage-hero .hero-content h1,
    html body.pkp_page_about .hero-content h1,
    body.pkp_page_about .homepage-hero h1,
    body .pkp_page_about .hero-content h1 {
        font-size: 28px !important;        /* Match homepage font size */
        line-height: 1.2 !important;
    }
    
    /* Ensure sidebar visible on ALL pages mobile */
    body .sidebar-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body .sidebar-menu-list,
    body .sidebar-menu-item,
    body .sidebar-menu-link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========== END v10.5 NUCLEAR FIX ========== */

/* ========== v10.11: CONSOLIDATED CLEAN CSS - NO DUPLICATES ========== */
/* This section consolidates ALL previous fixes and removes duplicates */

/* ===== SIDEBAR STYLING - ALL DEVICES ===== */
.sidebar-menu {
    width: 280px;
    min-width: 280px;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column;
    gap: 15px;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-menu-item {
    margin: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-menu-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-menu-link:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    transform: translateY(-2px);
}

/* ===== DESCRIPTION & INFO SECTIONS - ALL DEVICES ===== */
/* ===== DESCRIPTION & INFO SECTIONS - ALL DEVICES ===== */
.journal-description,
.info-section {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 0 30px 0 !important;
    padding: 25px 30px !important;
    background: transparent !important;       /* v10.13: TRANSPARENT - no card */
    border-radius: 0 !important;
    border: none !important;                  /* v10.13: NO border except left */
   /* border-left: 4px solid #2ecc71 !important; /* GREEN bar only */
    box-shadow: none !important;              /* v10.13: NO shadow */
    min-height: 120px !important;
    height: auto !important;
    overflow: visible !important;
    clear: both !important;
    float: none !important;
}

/* v10.13: About page - ONE green border encompasses all content */
.pkp_page_about .about-content-wrapper {
   /* border-left: 4px solid #2ecc71 !important; /* v10.13: ONE border for ALL */
    padding-left: 20px !important;
}

.pkp_page_about .journal-description,
.pkp_page_about .info-section,
.pkp_page_about .about-content-wrapper > *,
.pkp_page_about .about-content-wrapper section,
.pkp_page_about .about-content-wrapper div {
    background: transparent !important;
    border: none !important;                   /* v10.13: NO individual borders */
    border-left: none !important;              /* v10.13: Remove individual green bars */
    box-shadow: none !important;
    padding: 15px 0 !important;
    border-radius: 0 !important;
}

/* ===== MOBILE RESPONSIVE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Body padding adjustment */
    body {
        padding-top: 71px !important;
    }
    
    /* v10.16: SIDEBAR MOBILE - MUNCUL UNTUK SEMUA PAGE */
    html body aside.sidebar-menu,
    html body .sidebar-menu,
    html .sidebar-menu,
    aside.sidebar-menu,
    .sidebar-menu,
    body aside.sidebar-menu,
    body .sidebar-menu {
        display: flex !important;          /* v10.16: SHOW sidebar */
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
        padding: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        z-index: 1 !important;
        box-shadow: none !important;
    }
    
    /* v10.16: SIDEBAR MENU LIST - Show in page */
    html body ul.sidebar-menu-list,
    html body .sidebar-menu-list,
    html .sidebar-menu-list,
    ul.sidebar-menu-list,
    .sidebar-menu-list,
    body ul.sidebar-menu-list,
    body .sidebar-menu-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    html body li.sidebar-menu-item,
    html body .sidebar-menu-item,
    html .sidebar-menu-item,
    li.sidebar-menu-item,
    .sidebar-menu-item,
    body li.sidebar-menu-item,
    body .sidebar-menu-item {
        display: block !important;
        width: calc(50% - 10px) !important;
        min-width: 130px !important;
        max-width: 200px !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none !important;
        margin: 0 !important;
    }
    
    html body a.sidebar-menu-link,
    html body .sidebar-menu-link,
    html .sidebar-menu-link,
    a.sidebar-menu-link,
    .sidebar-menu-link,
    body a.sidebar-menu-link,
    body .sidebar-menu-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 50px !important;
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        padding: 10px !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }
    
    html body .sidebar-menu-link:hover,
    html .sidebar-menu-link:hover,
    .sidebar-menu-link:hover {
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
        transform: translateY(-2px) !important;
    }
    
    /* v10.13: Content wrapper mobile - MUST be scrollable */
    html body .content-wrapper,
    body .content-wrapper,
    .content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;        /* v10.13: SCROLLABLE */
        position: relative !important;
    }
    
    /* v10.13: Main content area mobile - MUST be visible and scrollable */
    html body .main-content-area,
    body .main-content-area,
    .main-content-area {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Description sections on mobile */
    .journal-description,
    .info-section {
        width: 100% !important;
        padding: 20px 25px !important;
        margin: 0 0 20px 0 !important;
        background: transparent !important;  /* v10.13: NO card */
        border: none !important;
     /*   border-left: 4px solid #2ecc71 !important; */
        box-shadow: none !important;
    }
    
    /* v10.13: About mobile - ONE border wrapper */
    .pkp_page_about .about-content-wrapper {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .pkp_page_about .journal-description,
    .pkp_page_about .info-section {
        background: transparent !important;
        border: none !important;
        border-left: none !important;       /* v10.13: No individual borders */
        box-shadow: none !important;
        padding: 15px 0 !important;
    }
}

/* ===== PC NORMAL (min-width: 993px) - FORCE WIDE LAYOUT ===== */
@media (min-width: 993px) {
    .main-content-area {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 600px !important;
    }
    
    .journal-description,
    .info-section {
        width: 100% !important;
        max-width: none !important;
        min-width: 600px !important;
    }
}

/* ===== END v10.11 CONSOLIDATED CLEAN CSS ===== */

/* =========================================
   ANNOUNCEMENT PAGE STYLING
   ========================================= */

/* Announcement list item */
.announcement-summary {
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

.announcement-summary:last-child {
    border-bottom: none;
}

/* Announcement title - GREEN color */
.announcement-summary h2.media-heading a {
    color: #2ecc71 !important;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.announcement-summary h2.media-heading a:hover {
    color: #27ae60 !important;
    text-decoration: none;
}

/* Announcement date */
.announcement-summary .date {
    color: #666;
    font-size: 0.9rem;
    margin: 8px 0 12px 0;
}

/* Announcement description */
.announcement-summary p {
    color: #333;
    line-height: 1.6;
}

/* Announcements section title */
.announcements-section h2.section-title {
    color: #2ecc71;
 /*   border-left: 4px solid #2ecc71; */
    padding-left: 15px;
    margin-bottom: 20px;
}

/* ===== FORCE CONSISTENT SIDEBAR FOR ABOUT PAGES ===== */
/* Ensure sidebar-menu in about pages has same styling as home/announcement */
body.pkp_page_about .sidebar-menu,
.pkp_page_about .sidebar-menu {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
}

body.pkp_page_about .sidebar-menu-list,
.pkp_page_about .sidebar-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.pkp_page_about .sidebar-menu-item,
.pkp_page_about .sidebar-menu-item {
    display: block !important;
    width: 100% !important;
}

body.pkp_page_about .sidebar-menu-link,
.pkp_page_about .sidebar-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    color: #ffffff !important;
    padding: 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

body.pkp_page_about .sidebar-menu-link:hover,
body.pkp_page_about .sidebar-menu-item.active .sidebar-menu-link,
.pkp_page_about .sidebar-menu-link:hover,
.pkp_page_about .sidebar-menu-item.active .sidebar-menu-link {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

body.pkp_page_about .content-wrapper,
.pkp_page_about .content-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px !important;
    padding: 30px 40px !important;
    width: 100% !important;
    max-width: none !important;
}

body.pkp_page_about .main-content-area,
.pkp_page_about .main-content-area {
    flex: 1 !important;
    width: 100% !important;
}