/* =====================================================
   OJS FINAL THEME — ELEGANT TOSCA GREEN
   Banner normal | Header sticky | Ideal spacing
   Remove vertical line bug | Border ONLY Sidebar & Main
   Premium Sidebar Pseudo Icons | Enhanced Article List
   Compatible : OJS 3.3 / 3.4 / 3.5
   ===================================================== */

   /* =========================
      COLOR SYSTEM - ELEGANT TOSCA
   ========================= */
   :root {
     --primary: #00674b;
     --primary-dark: #004d38;
     --primary-light: #1a8a6a;
     --primary-soft: #4aad8a;
     --accent: #d4af37;
     --accent-light: #f0d060;
     --border: #c8e0d8;
     --text: #1f2937;
     --bg-soft: #f0f7f4;
   }
   
   /* =========================
      GLOBAL RESET
   ========================= */
   *,
   *::before,
   *::after {
     border: none !important;
   }
   
   body {
     margin: 0;
     font-family: "Helvetica Neue", Arial, sans-serif;
     background: var(--bg-soft);
     color: var(--text);
   }
   
   /* =====================================================
      HEADER OVERRIDE - GRADIENT #004519 ke #005b18
   ===================================================== */
   .pkp_structure_head,
   .pkp_structure_head.pkp_structure_head {
     background: linear-gradient(
       135deg,
       #004519 0%,
       #004e1a 30%,
       #005318 60%,
       #005b18 85%,
       #005b18 100%
     ) !important;
     border-bottom: 3px solid #C99A2E !important;
     position: relative !important;
     top: 0 !important;
     z-index: 999 !important;
     margin-bottom: 0 !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
     overflow: visible !important;
   }
   
   .pkp_structure_head::before {
     content: "" !important;
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     background: 
       radial-gradient(ellipse at 70% 30%, rgba(0, 134, 118, 0.10) 0%, transparent 60%) !important;
     pointer-events: none !important;
     z-index: 0 !important;
   }
   
   .pkp_structure_head::after {
     content: "" !important;
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     background-image: 
       radial-gradient(circle at 10% 40%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
       radial-gradient(circle at 25% 60%, rgba(0, 134, 118, 0.06) 1.5px, transparent 1.5px),
       radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
       radial-gradient(circle at 55% 70%, rgba(0, 134, 118, 0.05) 1.5px, transparent 1.5px),
       radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
       radial-gradient(circle at 85% 55%, rgba(0, 134, 118, 0.06) 1.5px, transparent 1.5px),
       radial-gradient(circle at 95% 40%, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
     background-repeat: no-repeat !important;
     background-size: 100% 100% !important;
     background-position: center !important;
     pointer-events: none !important;
     z-index: 0 !important;
   }
   
   .pkp_structure_head_wrapper,
   .pkp_head_wrapper,
   .pkp_site_name_wrapper,
   .pkp_site_name,
   .pkp_navigation_primary_wrapper {
     background: transparent !important;
     position: relative !important;
     z-index: 2 !important;
   }
   
   /* =====================================================
      LOGO / JUDUL - #FFFFFF
   ===================================================== */
   .pkp_site_name a {
     margin-left: 22px !important;
     color: #FFFFFF !important;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) !important;
     font-weight: 700 !important;
     letter-spacing: 0.3px !important;
   }
   
   /* =====================================================
      NAVIGATION BAR - #004519 ke #005b18
   ===================================================== */
   .pkp_navigation_primary {
     background: transparent !important;
   }
   
   .pkp_navigation_primary_wrapper {
     background: linear-gradient(
       135deg,
       #004519 0%,
       #004e1a 25%,
       #005318 50%,
       #005b18 75%,
       #005b18 100%
     ) !important;
     border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
     border-bottom: 2px solid rgba(201, 154, 46, 0.25) !important;
     padding: 0 !important;
     margin-top: 0 !important;
   }
   
   /* =====================================================
      MENU - #FFFFFF
   ===================================================== */
   .pkp_navigation_primary > li > a {
     padding: 12px 22px !important;
     margin-left: 0 !important;
     color: #FFFFFF !important;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
     font-weight: 500 !important;
     font-size: 14px !important;
     transition: all 0.3s ease !important;
     border-radius: 4px !important;
     position: relative !important;
   }
   
   .pkp_navigation_primary > li > a:hover {
     background: rgba(231, 185, 74, 0.15) !important;
     color: #E7B94A !important;
     transform: translateY(-1px) !important;
   }
   
   .pkp_navigation_primary > li > a.active,
   .pkp_navigation_primary > li > a:focus {
     background: rgba(231, 185, 74, 0.15) !important;
     color: #E7B94A !important;
     border-bottom: 2px solid rgba(231, 185, 74, 0.6) !important;
   }
   
   /* =====================================================
      SEARCH BOX - #005318
   ===================================================== */
   .pkp_search {
     background: #005318 !important;
     border-radius: 20px !important;
     border: 1px solid rgba(255, 255, 255, 0.12) !important;
     padding: 4px 10px !important;
   }
   
   .pkp_search input[type="text"] {
     background: transparent !important;
     color: #FFFFFF !important;
     border: none !important;
     padding: 6px 10px !important;
     font-size: 13px !important;
   }
   
   .pkp_search input[type="text"]::placeholder {
     color: rgba(255, 255, 255, 0.5) !important;
   }
   
   .pkp_search button {
     background: rgba(255, 255, 255, 0.15) !important;
     color: #FFFFFF !important;
     border: none !important;
     border-radius: 20px !important;
     padding: 4px 14px !important;
     transition: all 0.3s ease !important;
     font-size: 12px !important;
   }
   
   .pkp_search button:hover {
     background: #D6A63A !important;
     color: #003B2F !important;
   }
   
   /* =====================================================
      PAGE CONTAINER
   ===================================================== */
   .pkp_structure_page {
     max-width: 1200px;
     margin: auto;
     padding: 0 20px;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
     overflow-x: visible !important;
   }
   
   .pkp_structure_content {
     margin-top: 22px !important;
     padding-top: 0 !important;
     border: none !important;
   }
   
   /* =====================================================
      BANNER - MENYATU DENGAN MAIN CARD
   ===================================================== */
   .pkp_structure_main {
     background: #ffffff;
     padding: 0 28px 28px 28px !important;
     border-radius: 14px;
     border: 1px solid var(--border) !important;
     box-shadow: 0 6px 20px rgba(0,0,0,0.05);
     overflow: hidden;
     position: relative;
   }
   
   .homepage_image,
   .page_index_journal .homepage_image,
   .pkp_structure_main > img:first-child {
     position: static !important;
     width: calc(100% + 56px) !important;
     max-width: none !important;
     margin: 0 0 22px -28px !important;
     border-radius: 13px 13px 0 0 !important;
     display: block;
     object-fit: cover;
   }
   
   @media (max-width: 992px) {
     .pkp_structure_main {
       padding: 0 24px 24px 24px !important;
     }
     .homepage_image,
     .page_index_journal .homepage_image,
     .pkp_structure_main > img:first-child {
       width: calc(100% + 48px) !important;
       margin: 0 0 20px -24px !important;
     }
   }
   
   @media (max-width: 768px) {
     .pkp_structure_main {
       padding: 0 18px 18px 18px !important;
     }
     .homepage_image,
     .page_index_journal .homepage_image,
     .pkp_structure_main > img:first-child {
       width: calc(100% + 36px) !important;
       margin: 0 0 18px -18px !important;
       border-radius: 11px 11px 0 0 !important;
     }
   }
   
   /* =====================================================
      SIDEBAR
   ===================================================== */
   .pkp_structure_sidebar {
     padding-left: 22px;
   }
   
   @media (min-width: 992px) {
     .pkp_structure_sidebar {
       position: static !important;
       top: auto !important;
     }
   }
   
   @media (max-width: 992px) {
     .pkp_structure_sidebar {
       padding-left: 0;
       margin-top: 18px;
     }
   }
   
   /* =====================================================
      PREMIUM SIDEBAR BLOCK
   ===================================================== */
   .pkp_block {
     background: #ffffff;
     padding: 0 !important;
     margin-bottom: 24px;
     border-radius: 20px;
     border: 1px solid var(--border) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     animation: fadeInUp 0.5s ease forwards;
     opacity: 0;
   }
   
   .pkp_block:hover {
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
     transform: translateY(-2px);
   }
   
   .pkp_block .title {
     font-size: 16px;
     font-weight: 700;
     color: var(--primary) !important;
     background: #ffffff !important;
     padding: 14px 20px !important;
     margin: 0 !important;
     border-bottom: 2px solid var(--accent) !important;
     position: relative;
     overflow: hidden;
     display: block !important;
     width: 100% !important;
     box-sizing: border-box;
     border-radius: 0 !important;
   }
   
   .pkp_block .title::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
     transition: left 0.5s ease;
   }
   
   .pkp_block:hover .title::before {
     left: 100%;
   }
   
   .pkp_block .title::after {
     content: "\f0c9";
     font-family: 'FontAwesome', 'Font Awesome 6 Free';
     font-weight: 900;
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 14px;
     color: var(--accent);
     transition: transform 0.3s ease;
   }
   
   .pkp_block:hover .title::after {
     transform: translateY(-50%) rotate(90deg);
   }
   
   .pkp_block ul {
     list-style: none;
     padding: 8px 0 !important;
     margin: 0 !important;
   }
   
   .pkp_block ul li {
     margin-bottom: 0 !important;
     border-bottom: 1px solid #f0f0f0;
     transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
   }
   
   .pkp_block ul li:last-child {
     border-bottom: none;
   }
   
   .pkp_block ul li a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px !important;
     font-size: 14px;
     font-weight: 500;
     color: var(--text);
     text-decoration: none;
     background: transparent !important;
     transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     position: relative;
     z-index: 1;
   }
   
   .pkp_block ul li a::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
     transition: left 0.3s ease;
     z-index: -1;
   }
   
   .pkp_block ul li a:hover::before {
     left: 0;
   }
   
   .pkp_block ul li a:hover {
     color: #ffffff !important;
     transform: translateX(5px);
   }
   
   .pkp_block ul li a::after {
     font-family: 'FontAwesome', 'Font Awesome 6 Free';
     font-weight: 900;
     content: "\f054";
     margin-left: auto;
     font-size: 12px;
     color: var(--accent);
     transition: transform 0.2s ease;
   }
   
   .pkp_block ul li a:hover::after {
     color: #ffffff;
     transform: translateX(3px);
   }
   
   .pkp_block:nth-child(1) { animation-delay: 0.03s; }
   .pkp_block:nth-child(2) { animation-delay: 0.06s; }
   .pkp_block:nth-child(3) { animation-delay: 0.09s; }
   .pkp_block:nth-child(4) { animation-delay: 0.12s; }
   .pkp_block:nth-child(5) { animation-delay: 0.15s; }
   
   /* =====================================================
      CUSTOM MENU BLOCK
   ===================================================== */
   .custom-menu-block {
     background: #ffffff;
     border-radius: 20px;
     margin-bottom: 24px;
     border: 1px solid var(--border);
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     padding: 0 !important;
     animation: fadeInUp 0.5s ease forwards;
     opacity: 0;
   }
   
   .custom-menu-block:hover {
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
     transform: translateY(-2px);
   }
   
   .custom-menu-block .block-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--primary) !important;
     background: #ffffff !important;
     padding: 14px 20px !important;
     margin: 0 !important;
     position: relative;
     overflow: hidden;
     display: block !important;
     width: 100% !important;
     box-sizing: border-box;
     border-radius: 0 !important;
     border-bottom: 2px solid var(--accent) !important;
   }
   
   .custom-menu-block .block-title::before {
     content: '📋';
     margin-right: 10px;
     font-size: 16px;
     display: inline-block;
   }
   
   .custom-menu-block .block-title::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
     transition: left 0.5s ease;
   }
   
   .custom-menu-block:hover .block-title::after {
     left: 100%;
   }
   
   .custom-menu-block ul {
     list-style: none;
     padding: 8px 0;
     margin: 0;
   }
   
   .custom-menu-block ul li {
     border-bottom: 1px solid #f0f0f0;
     transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
   }
   
   .custom-menu-block ul li:last-child {
     border-bottom: none;
   }
   
   .custom-menu-block ul li a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     font-size: 13px;
     font-weight: 500;
     color: var(--text);
     text-decoration: none;
     transition: all 0.3s ease;
     position: relative;
     z-index: 1;
   }
   
   .custom-menu-block ul li a::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
     transition: left 0.3s ease;
     z-index: -1;
   }
   
   .custom-menu-block ul li a:hover::before {
     left: 0;
   }
   
   .custom-menu-block ul li a:hover {
     color: #ffffff !important;
     transform: translateX(5px);
   }
   
   .custom-menu-block ul li a::after {
     font-family: 'FontAwesome', 'Font Awesome 6 Free';
     font-weight: 900;
     content: "\f054";
     margin-left: auto;
     font-size: 12px;
     color: var(--accent);
     transition: transform 0.2s ease;
   }
   
   .custom-menu-block ul li a:hover::after {
     color: #ffffff;
     transform: translateX(3px);
   }
   
   .custom-menu-block:nth-child(1) { animation-delay: 0.03s; }
   .custom-menu-block:nth-child(2) { animation-delay: 0.06s; }
   .custom-menu-block:nth-child(3) { animation-delay: 0.09s; }
   .custom-menu-block:nth-child(4) { animation-delay: 0.12s; }
   .custom-menu-block:nth-child(5) { animation-delay: 0.15s; }
   
   /* =====================================================
      CUSTOM BLOCK - PARAGRAPH SPACING
   ===================================================== */
   .custom-menu-block p,
   .pkp_block p {
     padding: 14px 20px !important;
     margin: 0 !important;
     line-height: 1.7;
     font-size: 13px;
     color: var(--text);
     background: #ffffff;
     border-bottom: 1px solid #f0f0f0;
   }
   
   .custom-menu-block p:last-child,
   .pkp_block p:last-child {
     border-bottom: none;
   }
   
   .custom-menu-block p:not(:first-child),
   .pkp_block p:not(:first-child) {
     border-top: 1px solid #f0f0f0;
     border-bottom: none;
   }
   
   .block p,
   .custom-block p {
     padding: 14px 20px !important;
     margin: 0 !important;
     line-height: 1.7;
     font-size: 13px;
     color: var(--text);
     background: #ffffff;
   }
   
   /* =====================================================
      ABSTRACT - JUSTIFY
   ===================================================== */
   .abstract,
   .article-summary .abstract,
   .obj_article_summary .abstract,
   .article-details .abstract,
   .pkp_abstract {
     text-align: justify !important;
   }
   
   /* =====================================================
      ALIGN PAGE NUMBER WITH PDF BUTTON
   ===================================================== */
   .obj_article_summary .galleys {
     display: flex !important;
     align-items: center !important;
     gap: 12px !important;
     flex-wrap: wrap !important;
   }
   
   .obj_article_summary .galleys .obj_galley_link {
     display: inline-flex !important;
     align-items: center !important;
     gap: 10px !important;
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
     color: white !important;
     padding: 8px 20px !important;
     border-radius: 40px !important;
     font-size: 12px !important;
     font-weight: 600 !important;
     text-decoration: none !important;
     transition: all 0.3s ease !important;
     vertical-align: middle !important;
     height: 34px !important;
     box-sizing: border-box !important;
   }
   
   .obj_article_summary .galleys .obj_galley_link:hover {
     background: linear-gradient(135deg, var(--accent) 0%, #b8941a 100%) !important;
     transform: translateY(-3px) !important;
   }
   
   .obj_article_summary .meta .pages {
     display: inline-flex !important;
     align-items: center !important;
     gap: 8px !important;
     background: #f8fafc !important;
     padding: 6px 14px !important;
     border-radius: 40px !important;
     font-size: 12px !important;
     font-weight: 500 !important;
     color: #1e293b !important;
     border: 1px solid #e2e8f0 !important;
     transition: all 0.25s ease !important;
     vertical-align: middle !important;
     height: 34px !important;
     box-sizing: border-box !important;
   }
   
   .obj_article_summary .meta .pages::before {
     content: "📄" !important;
     font-size: 14px !important;
   }
   
   .obj_article_summary .meta {
     display: flex !important;
     flex-wrap: wrap !important;
     gap: 12px !important;
     margin: 16px 0 !important;
     align-items: center !important;
   }
   
   .obj_article_summary .galleys {
     margin-top: 0 !important;
     display: flex !important;
     align-items: center !important;
     gap: 12px !important;
     flex-wrap: wrap !important;
   }
   
   .obj_article_summary .meta .pages,
   .obj_article_summary .galleys .obj_galley_link {
     line-height: 1 !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
   }
   
   .article-details .pages {
     display: inline-flex !important;
     align-items: center !important;
     gap: 8px !important;
     background: #f8fafc !important;
     padding: 6px 14px !important;
     border-radius: 40px !important;
     font-size: 13px !important;
     font-weight: 500 !important;
     color: #1e293b !important;
     border: 1px solid #e2e8f0 !important;
     height: 34px !important;
     box-sizing: border-box !important;
   }
   
   .article-details .pages::before {
     content: "📄" !important;
     margin-right: 6px !important;
   }
   
   /* =====================================================
      ADDITIONAL CONTENT
   ===================================================== */
   .additional-content {
     display: block;
     padding: 16px;
     margin-top: 10px;
     background: #ffffff;
     border: 1px solid var(--border);
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
   }
   
   .additional-content .about {
     margin-bottom: 14px;
     font-size: 14px;
     line-height: 1.7;
     text-align: justify;
   }
   
   .additional-content .about .title {
     font-size: 16px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 8px;
   }
   
   .additional-content .info-row {
     display: flex;
     gap: 18px;
     align-items: flex-start;
   }
   
   .additional-content .cover {
     width: 140px;
     min-width: 140px;
   }
   
   .additional-content .cover img {
     width: 100%;
     height: auto;
     border-radius: 10px;
     object-fit: cover;
     box-shadow: 0 2px 6px rgba(0,0,0,0.08);
   }
   
   .additional-content .info {
     flex: 1;
   }
   
   .additional-content .info .title {
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 6px;
   }
   
   .additional-content .info .desc {
     text-align: justify;
     line-height: 1.6;
   }
   
   .additional-content .info ul {
     padding-left: 26px;
     margin-top: 8px;
   }
   
   .additional-content .info ul li {
     margin-bottom: 6px;
   }
   
   .additional-content .info ul li::marker {
     color: var(--primary);
   }
   
   @media (max-width: 768px) {
     .additional-content .info-row {
       flex-direction: column;
     }
     .additional-content .cover {
       width: 100%;
     }
   }
   
   /* =====================================================
      ENHANCED ARTICLE LIST
   ===================================================== */
   .obj_article_summary {
     background: #ffffff;
     border-radius: 20px !important;
     padding: 24px !important;
     margin-bottom: 24px !important;
     border: 1px solid var(--border) !important;
     transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     position: relative;
     overflow: hidden;
     animation: cardEntrance 0.5s ease forwards;
     opacity: 0;
   }
   
   .obj_article_summary::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   
   .obj_article_summary:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.2);
     border-color: var(--accent) !important;
   }
   
   .obj_article_summary:hover::after {
     opacity: 1;
   }
   
   .obj_article_summary .title {
     margin-bottom: 14px;
   }
   
   .obj_article_summary .title a {
     color: var(--primary);
     text-decoration: none;
     font-weight: 800;
     font-size: 19px;
     line-height: 1.4;
     transition: color 0.25s ease;
     display: inline-block;
   }
   
   .obj_article_summary .title a:hover {
     color: var(--accent);
   }
   
   .obj_article_summary .authors {
     color: #4b5563;
     font-size: 13px;
     font-weight: 500;
     margin-bottom: 12px;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }
   
   .obj_article_summary .authors span {
     background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
     padding: 4px 12px;
     border-radius: 30px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     color: var(--primary-dark);
     transition: all 0.25s ease;
   }
   
   .obj_article_summary .authors span::before {
     content: "✍️";
     font-size: 11px;
   }
   
   .obj_article_summary .authors span:hover {
     background: var(--primary);
     color: white;
     transform: translateY(-2px);
   }
   
   .obj_article_summary .meta {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 16px 0;
     align-items: center;
   }
   
   .obj_article_summary .meta .pages,
   .obj_article_summary .meta .published,
   .obj_article_summary .meta .doi {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #f8fafc;
     padding: 6px 14px;
     border-radius: 40px;
     font-size: 12px;
     font-weight: 500;
     color: #1e293b;
     border: 1px solid #e2e8f0;
     transition: all 0.25s ease;
     height: 34px;
     box-sizing: border-box;
   }
   
   .obj_article_summary .meta .pages::before { content: "📄"; }
   .obj_article_summary .meta .published::before { content: "📅"; }
   .obj_article_summary .meta .doi::before { content: "🆔"; }
   
   .obj_article_summary .galleys .obj_galley_link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     padding: 8px 20px;
     border-radius: 40px;
     font-size: 12px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     height: 34px;
     box-sizing: border-box;
   }
   
   .obj_article_summary .galleys .obj_galley_link:hover {
     background: linear-gradient(135deg, var(--accent) 0%, #b8941a 100%);
     transform: translateY(-3px);
   }
   
   .obj_article_summary .galleys {
     margin-top: 12px;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
   }
   
   .obj_article_summary:nth-child(1) { animation-delay: 0.05s; }
   .obj_article_summary:nth-child(2) { animation-delay: 0.1s; }
   .obj_article_summary:nth-child(3) { animation-delay: 0.15s; }
   .obj_article_summary:nth-child(4) { animation-delay: 0.2s; }
   .obj_article_summary:nth-child(5) { animation-delay: 0.25s; }
   .obj_article_summary:nth-child(6) { animation-delay: 0.3s; }
   
   /* =====================================================
      ARCHIVE PAGE
   ===================================================== */
   .page_archive {
     background: transparent;
   }
   
   .page_archive h1,
   #archiveHeading {
     font-size: 32px;
     font-weight: 800;
     color: var(--primary);
     margin-bottom: 40px;
     padding-bottom: 15px;
     border-bottom: 4px solid var(--accent);
     display: inline-block;
   }
   
   .page_archive h1::before,
   #archiveHeading::before {
     content: "📚 ";
   }
   
   .page_archive h2 {
     font-size: 24px;
     font-weight: 800;
     color: var(--primary-dark);
     margin: 45px 0 25px 0;
     padding-left: 18px;
     border-left: 5px solid var(--accent);
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .page_archive h2::before {
     content: "📅 ";
   }
   
   .obj_issue_summary,
   .issue-summary,
   .toc_issue {
     background: #ffffff;
     border-radius: 28px;
     margin-bottom: 32px;
     overflow: hidden;
     border: 1px solid var(--border);
     transition: all 0.35s ease;
     position: relative;
     display: block !important;
   }
   
   .obj_issue_summary:hover {
     transform: translateY(-6px);
     box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.2);
     border-color: var(--accent);
   }
   
   .obj_issue_summary::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   
   .obj_issue_summary:hover::before {
     opacity: 1;
   }
   
   .obj_issue_summary .title {
     display: block !important;
     width: 100%;
     margin: 0 0 22px 0 !important;
     padding: 0 0 18px 0 !important;
     border-bottom: 2px solid rgba(212, 175, 55, 0.25);
   }
   
   .obj_issue_summary .title a {
     font-size: 26px;
     font-weight: 800;
     color: var(--primary);
     text-decoration: none;
   }
   
   .obj_issue_summary .title a:hover {
     color: var(--accent);
   }
   
   .content-row {
     display: flex;
     gap: 35px;
     align-items: flex-start;
   }
   
   .obj_issue_summary .cover {
     flex-shrink: 0;
     width: 220px;
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     border-radius: 20px;
     padding: 20px;
     text-align: center;
   }
   
   .obj_issue_summary .cover img {
     width: 100%;
     max-width: 180px;
     height: auto;
     border-radius: 16px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }
   
   .obj_issue_summary .description {
     flex: 1;
     margin: 0 !important;
     padding: 0 10px 0 0 !important;
   }
   
   .obj_issue_summary .description p {
     font-size: 14px;
     line-height: 1.7;
     color: #4b5563;
     margin: 0 0 16px 0 !important;
     text-align: justify;
   }
   
   .obj_issue_summary .published,
   .obj_issue_summary .volume,
   .obj_issue_summary .number {
     display: inline-flex !important;
     align-items: center;
     gap: 8px;
     background: #f1f5f9;
     padding: 6px 18px;
     border-radius: 40px;
     font-size: 12px;
     font-weight: 500;
     color: #475569;
     margin-right: 12px;
     margin-bottom: 18px;
   }
   
   .obj_issue_summary .published::before { content: "📅"; }
   .obj_issue_summary .volume::before { content: "📊"; }
   .obj_issue_summary .number::before { content: "🔢"; }
   
   .obj_issue_summary .obj_galley_link {
     display: inline-flex !important;
     align-items: center;
     gap: 12px;
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white !important;
     padding: 10px 28px !important;
     border-radius: 50px !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     text-decoration: none !important;
     margin-top: 8px;
   }
   
   .obj_issue_summary .obj_galley_link:hover {
     background: linear-gradient(135deg, var(--accent) 0%, #b8941a 100%) !important;
     transform: translateY(-3px);
   }
   
   /* =====================================================
      PAGINATION
   ===================================================== */
   .pagination {
     margin-top: 40px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
   }
   
   .pagination a,
   .pagination .current {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 44px;
     height: 44px;
     padding: 0 16px;
     border-radius: 14px;
     background: white;
     border: 1px solid var(--border);
     color: var(--primary);
     text-decoration: none;
     font-weight: 600;
     transition: all 0.25s ease;
   }
   
   .pagination a:hover {
     background: var(--primary);
     color: white;
     transform: translateY(-2px);
   }
   
   .pagination .current {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
   }
   
   /* =====================================================
      FOOTER - STYLE MODERN UNTUK OJS
   ===================================================== */
   
   /* Reset dasar */
   ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   .pkp_structure_footer_wrapper {
     background: #ffffff !important;
     margin-top: 25px;
     padding: 0 !important;
     border-top: 1px solid var(--border) !important;
     width: 100% !important;
     max-width: 100% !important;
     overflow: hidden !important;
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
   }
   
   .pkp_footer {
     background: #ffffff !important;
     color: var(--text) !important;
     padding: 0 !important;
     font-size: 13px;
     line-height: 1.6;
   }
   
   .pkp_footer .pkp_structure_page {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     background: transparent;
     width: 100% !important;
     box-sizing: border-box;
   }
   
   /* =====================================================
      FOOTER CTA - 3 KOLOM (Find us, Call us, Mail us)
   ===================================================== */
   .footer-cta-wrapper {
     background: linear-gradient(
       135deg,
       #004519 0%,
       #004e1a 30%,
       #005318 60%,
       #005b18 85%,
       #005b18 100%
     ) !important;
     padding: 30px 20px;
     margin-top: 0;
     border-radius: 0;
     width: 100vw !important;
     max-width: 100vw !important;
     position: relative !important;
     left: 50% !important;
     right: 50% !important;
     margin-left: -50vw !important;
     margin-right: -50vw !important;
     box-sizing: border-box !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .footer-cta {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 30px;
     padding: 0 20px;
   }
   
   .single-cta {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 10px 0;
   }
   
   .single-cta i {
     color: #d4af37;
     font-size: 28px;
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     flex-shrink: 0;
   }
   
   .cta-text h4 {
     color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     margin: 0 0 4px 0;
   }
   
   .cta-text span {
     color: rgba(255, 255, 255, 0.75);
     font-size: 14px;
   }
   
   /* =====================================================
      FOOTER CONTENT - 3 KOLOM (Logo, Links, Subscribe)
   ===================================================== */
   .footer-content-wrapper {
     background: #ffffff;
     padding: 30px 0;
   }
   
   .footer-content {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr;
     gap: 40px;
     padding: 0 20px;
   }
   
   /* Kolom 1: Logo & About */
   .footer-widget-logo .footer-logo {
     margin-bottom: 15px;
     display: block;
   }
   
   .footer-widget-logo .footer-logo img {
     max-width: 200px;
     height: auto;
   }
   
   .footer-widget-logo .footer-text p {
     font-size: 13px;
     line-height: 1.8;
     color: #6b7280;
     margin-bottom: 15px;
     text-align: justify;
   }
   
   .footer-social-icon span {
     color: var(--primary);
     display: block;
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 12px;
   }
   
   .footer-social-icon a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     margin-right: 8px;
     color: #ffffff;
     font-size: 16px;
     transition: all 0.3s ease;
     text-decoration: none;
   }
   
   .footer-social-icon a:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   }
   
   .footer-social-icon .facebook-bg { background: #3B5998; }
   .footer-social-icon .twitter-bg { background: #55ACEE; }
   .footer-social-icon .google-bg { background: #DD4B39; }
   .footer-social-icon .instagram-bg { background: #E1306C; }
   .footer-social-icon .youtube-bg { background: #CD201F; }
   
   /* Kolom 2: Useful Links */
   .footer-widget-heading h3 {
     color: var(--primary);
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 25px 0;
     padding-bottom: 12px;
     position: relative;
     border-bottom: 2px solid var(--border);
   }
   
   .footer-widget-heading h3::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     height: 2px;
     width: 50px;
     background: var(--accent);
   }
   
   .footer-widget-links ul {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px 15px;
   }
   
   .footer-widget-links ul li {
     display: block;
     width: 100%;
     margin-bottom: 4px;
   }
   
   .footer-widget-links ul li a {
     color: #6b7280;
     font-size: 13px;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     padding: 2px 0;
   }
   
   .footer-widget-links ul li a:hover {
     color: var(--accent);
     padding-left: 5px;
   }
   
   /* Kolom 3: Subscribe */
   .footer-widget-subscribe .footer-text p {
     font-size: 13px;
     line-height: 1.8;
     color: #6b7280;
     margin-bottom: 15px;
   }
   
   .subscribe-form {
     position: relative;
     overflow: hidden;
     border-radius: 30px;
     border: 2px solid var(--border);
     transition: all 0.3s ease;
   }
   
   .subscribe-form:focus-within {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(0, 103, 75, 0.1);
   }
   
   .subscribe-form input {
     width: 100%;
     padding: 12px 55px 12px 20px;
     background: #f8fafc;
     border: none;
     color: var(--text);
     font-size: 13px;
     outline: none;
     box-sizing: border-box;
   }
   
   .subscribe-form input::placeholder {
     color: #9ca3af;
   }
   
   .subscribe-form button {
     position: absolute;
     right: 4px;
     top: 4px;
     bottom: 4px;
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     border: none;
     border-radius: 30px;
     padding: 0 18px;
     color: #ffffff;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .subscribe-form button i {
     font-size: 18px;
   }
   
   .subscribe-form button:hover {
     background: var(--accent);
     transform: scale(1.05);
   }
   
   /* =====================================================
      FOOTER BOTTOM - CREATIVE COMMONS & COPYRIGHT
   ===================================================== */
   .footer-bottom-wrapper {
     margin: 0 !important;
     padding: 0 !important;
     background: transparent !important;
     width: 100% !important;
     max-width: 100% !important;
     position: relative !important;
     left: 0 !important;
     right: 0 !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
   
   .creative-commons-wrapper {
     background: linear-gradient(
       135deg,
       #004519 0%,
       #004e1a 30%,
       #005318 60%,
       #005b18 85%,
       #005b18 100%
     ) !important;
     padding: 14px 20px;
     text-align: center;
     border-top: 2px solid rgba(201, 154, 46, 0.3) !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
     width: 100vw !important;
     max-width: 100vw !important;
     position: relative !important;
     left: 50% !important;
     right: 50% !important;
     margin-left: -50vw !important;
     margin-right: -50vw !important;
     box-sizing: border-box !important;
   }
   
   .creative-commons-wrapper p {
     margin: 0;
     color: rgba(255, 255, 255, 0.9);
     font-size: 13px;
     line-height: 1.8;
   }
   
   .creative-commons-wrapper a {
     color: #ffffff !important;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
   }
   
   .creative-commons-wrapper a:hover {
     color: #d4af37 !important;
     text-decoration: underline;
   }
   
   .creative-commons-wrapper .cc-icons {
     display: inline-block;
     margin: 0 8px;
     vertical-align: middle;
   }
   
   .creative-commons-wrapper .cc-icons img {
     height: 20px;
     width: auto;
     vertical-align: middle;
     filter: brightness(0) invert(1);
   }
   
   .copyright-area {
     background: linear-gradient(
       135deg,
       #003b1a 0%,
       #004519 30%,
       #004e1a 60%,
       #005318 85%,
       #005318 100%
     ) !important;
     padding: 14px 20px;
     border-bottom: 3px solid rgba(201, 154, 46, 0.3) !important;
     width: 100vw !important;
     max-width: 100vw !important;
     position: relative !important;
     left: 50% !important;
     right: 50% !important;
     margin-left: -50vw !important;
     margin-right: -50vw !important;
     box-sizing: border-box !important;
   }
   
   .copyright-content {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px 20px;
     padding: 0 20px;
   }
   
   .copyright-text p {
     margin: 0;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.8);
   }
   
   .copyright-text p a {
     color: #d4af37 !important;
     text-decoration: none;
     font-weight: 500;
     transition: all 0.3s ease;
   }
   
   .copyright-text p a:hover {
     color: #ffffff !important;
     text-decoration: underline;
   }
   
   .footer-menu ul {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 20px;
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   .footer-menu ul li {
     display: inline-block;
   }
   
   .footer-menu ul li a {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: all 0.3s ease;
   }
   
   .footer-menu ul li a:hover {
     color: #d4af37 !important;
   }
   
   .footer-menu ul li:not(:last-child)::after {
     content: "|";
     color: rgba(255, 255, 255, 0.2);
     margin-left: 20px;
   }
   
   /* =====================================================
      HILANGKAN SEMUA ELEMEN BRAND PKP
   ===================================================== */
   .pkp_brand,
   .pkp_brand_footer,
   .pkp_brand_image,
   .pkp_brand a,
   .pkp_brand img,
   .pkp_brand_icon,
   .pkp_footer .pkp_brand,
   .pkp_brand_footer_wrapper,
   [class*="pkp_brand"],
   [class*="brand"],
   div[class*="pkp_brand"],
   div[class*="brand"],
   .pkp_structure_footer_wrapper .pkp_brand,
   .pkp_structure_footer_wrapper [class*="brand"] {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
     height: 0 !important;
     width: 0 !important;
     overflow: hidden !important;
     position: absolute !important;
     z-index: -9999 !important;
     pointer-events: none !important;
   }
   
   /* =====================================================
      RESPONSIVE FOOTER
   ===================================================== */
   @media (max-width: 992px) {
     .footer-cta {
       grid-template-columns: 1fr 1fr;
       gap: 20px;
     }
     
     .footer-content {
       grid-template-columns: 1fr 1fr;
       gap: 30px;
     }
     
     .footer-widget-links ul {
       grid-template-columns: 1fr 1fr;
     }
   }
   
   @media (max-width: 768px) {
     .footer-cta {
       grid-template-columns: 1fr;
       gap: 15px;
       text-align: center;
     }
     
     .single-cta {
       justify-content: center;
     }
     
     .footer-content {
       grid-template-columns: 1fr;
       gap: 25px;
       text-align: center;
     }
     
     .footer-widget-heading h3::after {
       left: 50%;
       transform: translateX(-50%);
     }
     
     .footer-widget-links ul {
       grid-template-columns: 1fr 1fr;
     }
     
     .copyright-content {
       flex-direction: column;
       text-align: center;
     }
     
     .footer-menu ul {
       justify-content: center;
     }
     
     .footer-menu ul li:not(:last-child)::after {
       margin-left: 14px;
     }
     
     .footer-social-icon a {
       margin: 0 4px;
     }
   }
   
   @media (max-width: 480px) {
     .footer-widget-links ul {
       grid-template-columns: 1fr;
     }
     
     .footer-menu ul {
       flex-direction: column;
       gap: 4px;
     }
     
     .footer-menu ul li:not(:last-child)::after {
       content: "";
       display: none;
     }
     
     .single-cta {
       flex-direction: column;
       text-align: center;
     }
   }
   
   /* =====================================================
      ANIMATIONS
   ===================================================== */
   @keyframes cardEntrance {
     from { opacity: 0; transform: translateY(30px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* =====================================================
      DARK MODE SUPPORT
   ===================================================== */
   @media (prefers-color-scheme: dark) {
     body {
       background: #0a1a14;
     }
     
     .pkp_structure_main {
       background: #142a22;
       border-color: #1a4a3a !important;
     }
     
     .pkp_block,
     .custom-menu-block {
       background: #142a22;
       border-color: #1a4a3a !important;
     }
     
     .pkp_block ul li,
     .custom-menu-block ul li {
       border-bottom-color: #1a4a3a;
     }
     
     .pkp_block ul li a,
     .custom-menu-block ul li a {
       color: #cbd5e1;
     }
     
     .custom-menu-block p,
     .pkp_block p {
       color: #cbd5e1;
       background: #142a22;
       border-bottom-color: #1a4a3a;
     }
     
     .custom-menu-block p:not(:first-child),
     .pkp_block p:not(:first-child) {
       border-top-color: #1a4a3a;
     }
     
     .obj_article_summary {
       background: #142a22;
       border-color: #1a4a3a !important;
     }
     
     .obj_article_summary .authors span {
       background: #0a1a14;
       color: #94a3b8;
     }
     
     .obj_article_summary .meta .pages,
     .obj_article_summary .meta .published,
     .obj_article_summary .meta .doi {
       background: #0a1a14;
       border-color: #1a4a3a;
       color: #94a3b8;
     }
     
     .additional-content {
       background: #142a22;
       border-color: #1a4a3a;
     }
     
     .additional-content .about .title {
       color: var(--accent);
     }
     
     .additional-content .info .desc {
       color: #94a3b8;
     }
     
     .pagination a {
       background: #142a22;
       border-color: #1a4a3a;
       color: var(--accent);
     }
     
     .pagination a:hover {
       background: var(--primary);
       color: white;
     }
     
     /* Dark mode footer */
     .pkp_structure_footer_wrapper {
       background: #0a1a14 !important;
       border-top: 1px solid #1a4a3a !important;
     }
     
     .pkp_footer {
       background: #0a1a14 !important;
       color: #cbd5e1 !important;
     }
     
     .footer-content-wrapper {
       background: #0a1a14 !important;
     }
     
     .footer-widget-logo .footer-text p {
       color: #94a3b8;
     }
     
     .footer-widget-heading h3 {
       color: var(--accent);
       border-bottom-color: #1a4a3a;
     }
     
     .footer-widget-links ul li a {
       color: #94a3b8;
     }
     
     .footer-widget-links ul li a:hover {
       color: var(--accent);
     }
     
     .footer-widget-subscribe .footer-text p {
       color: #94a3b8;
     }
     
     .subscribe-form {
       border-color: #1a4a3a;
     }
     
     .subscribe-form input {
       background: #0d1f18;
       color: #cbd5e1;
     }
     
     .subscribe-form input::placeholder {
       color: #64748b;
     }
     
     .footer-social-icon span {
       color: var(--accent);
     }
     
     .creative-commons-wrapper {
       background: linear-gradient(
         135deg,
         #00331a 0%,
         #004519 30%,
         #004e1a 60%,
         #005318 85%,
         #005318 100%
       ) !important;
     }
     
     .copyright-area {
       background: linear-gradient(
         135deg,
         #002a15 0%,
         #00331a 30%,
         #003b1a 60%,
         #004519 85%,
         #004519 100%
       ) !important;
     }
     
     .copyright-text p {
       color: rgba(255, 255, 255, 0.7);
     }
     
     .footer-menu ul li a {
       color: rgba(255, 255, 255, 0.6);
     }
     
     .footer-menu ul li a:hover {
       color: var(--accent) !important;
     }
     
     .footer-menu ul li:not(:last-child)::after {
       color: rgba(255, 255, 255, 0.15);
     }
     
     /* Hilangkan brand PKP di dark mode */
     .pkp_brand,
     .pkp_brand_footer,
     .pkp_brand_image,
     .pkp_brand a,
     .pkp_brand img,
     .pkp_brand_icon,
     .pkp_footer .pkp_brand,
     .pkp_brand_footer_wrapper,
     [class*="pkp_brand"],
     [class*="brand"],
     div[class*="pkp_brand"],
     div[class*="brand"],
     .pkp_structure_footer_wrapper .pkp_brand,
     .pkp_structure_footer_wrapper [class*="brand"] {
       display: none !important;
       visibility: hidden !important;
       opacity: 0 !important;
       height: 0 !important;
       width: 0 !important;
       overflow: hidden !important;
       position: absolute !important;
       z-index: -9999 !important;
       pointer-events: none !important;
     }
   }
   
   /* =====================================================
      FIXES & UTILITIES
   ===================================================== */
   .pkp_structure_page::before,
   .pkp_structure_page::after,
   .pkp_structure_main::before,
   .pkp_structure_main::after,
   .page_archive::before,
   .page_archive::after {
     display: none !important;
   }
   
   body {
     background-image: none !important;
   }
   
   .obj_issue_summary .cover + *,
   .issue-summary .cover + *,
   .toc_issue .cover + * {
     margin-top: 0;
   }
   
   /* =====================================================
      STATISTICS SECTION STYLING
   ===================================================== */
   .stats-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-top: 15px;
     padding-top: 12px;
     border-top: 1px solid #f0f0f0;
   }
   
   .stat {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #f8fafc;
     padding: 5px 14px;
     border-radius: 30px;
     font-size: 12px;
     color: #4b5563;
     transition: all 0.2s ease;
   }
   
   .stat:hover {
     background: var(--primary, #00674b);
     color: white;
     transform: translateY(-2px);
   }
   
   .stat strong {
     font-weight: 700;
     color: var(--primary, #00674b);
     margin-left: 3px;
   }
   
   .stat:hover strong {
     color: white;
   }
   
   /* =====================================================
      MOBILE NAVIGATION MENU - #004519 ke #005b18
   ===================================================== */
   .pkp_navigation_primary .pkp_nav_list__toggle {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     background: rgba(255, 255, 255, 0.08) !important;
     border-radius: 6px !important;
     padding: 8px 12px !important;
     cursor: pointer !important;
     border: 1px solid rgba(255, 255, 255, 0.12) !important;
     transition: all 0.3s ease !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list__toggle:hover {
     background: rgba(255, 255, 255, 0.18) !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list__toggle .fa-bars {
     color: #FFFFFF !important;
     font-size: 18px !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list {
     background: linear-gradient(
       135deg,
       #004519 0%,
       #004e1a 25%,
       #005318 50%,
       #005b18 75%,
       #005b18 100%
     ) !important;
     border-radius: 8px !important;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
     border: 1px solid rgba(255, 255, 255, 0.08) !important;
     padding: 8px 0 !important;
     list-style: none !important;
     margin: 0 !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list li {
     list-style: none !important;
     margin: 0 !important;
     padding: 0 !important;
     position: relative !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list li a {
     display: block !important;
     padding: 10px 20px !important;
     color: #FFFFFF !important;
     text-decoration: none !important;
     transition: all 0.25s ease !important;
     font-size: 14px !important;
     font-weight: 400 !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list li a:hover {
     background: rgba(231, 185, 74, 0.15) !important;
     color: #E7B94A !important;
     padding-left: 26px !important;
   }
   
   .pkp_navigation_primary .pkp_nav_list ul {
     background: rgba(0, 0, 0, 0.15) !important;
     border-radius: 6px !important;
     margin-top: 4px !important;
     margin-left: 12px !important;
     padding: 4px 0 !important;
   }
   
   @media (max-width: 768px) {
     .pkp_navigation_primary_wrapper {
       position: relative !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list__toggle {
       display: inline-flex !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list {
       position: absolute !important;
       top: 100% !important;
       right: 0 !important;
       left: auto !important;
       width: 260px !important;
       max-height: 0 !important;
       overflow: hidden !important;
       opacity: 0 !important;
       visibility: hidden !important;
       transition: all 0.3s ease !important;
       z-index: 10000 !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list.show,
     .pkp_navigation_primary .pkp_nav_list.active,
     .pkp_navigation_primary .pkp_nav_list[aria-expanded="true"] {
       max-height: 450px !important;
       overflow-y: auto !important;
       opacity: 1 !important;
       visibility: visible !important;
       padding: 8px 0 !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list ul {
       position: static !important;
       width: 100% !important;
       margin-left: 0 !important;
       margin-top: 4px !important;
       display: none !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list .has-children.open > ul {
       display: block !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list li a {
       padding: 10px 18px !important;
       font-size: 14px !important;
     }
   }
   
   @media (min-width: 769px) and (max-width: 992px) {
     .pkp_navigation_primary .pkp_nav_list__toggle {
       display: inline-flex !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list {
       position: absolute !important;
       top: 100% !important;
       right: 0 !important;
       left: auto !important;
       width: 280px !important;
       max-height: 0 !important;
       overflow: hidden !important;
       opacity: 0 !important;
       visibility: hidden !important;
       transition: all 0.3s ease !important;
       z-index: 10000 !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list.show,
     .pkp_navigation_primary .pkp_nav_list.active,
     .pkp_navigation_primary .pkp_nav_list[aria-expanded="true"] {
       max-height: 450px !important;
       overflow-y: auto !important;
       opacity: 1 !important;
       visibility: visible !important;
     }
   }
   
   @media (min-width: 993px) {
     .pkp_navigation_primary .pkp_nav_list__toggle {
       display: none !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list {
       position: static !important;
       display: flex !important;
       flex-wrap: wrap !important;
       max-height: none !important;
       opacity: 1 !important;
       visibility: visible !important;
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
       width: auto !important;
       padding: 0 !important;
     }
     
     .pkp_navigation_primary .pkp_nav_list > li {
       display: inline-block !important;
     }
   }