/* ================================================================
   JATG THEME — Custom Stylesheet for OJS Bootstrap3 Theme
   Journal of Accounting, Transparency and Governance
   Upload via: Settings > Website > Appearance > Advanced > Journal Style Sheet
   Compatible: OJS Bootstrap3 Theme (all variants)
   ================================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

   /* ================================================================
      1. GLOBAL TOKENS & RESET
      ================================================================ */
   :root {
     --jatg-navy:       #ffd503;
     --jatg-blue-dark:  #7c740c;
     --jatg-blue:       #a59018;
     --jatg-blue-light: #E6F1FB;
     --jatg-text:       #1a1a1a;
     --jatg-text-2:     #4b5563;
     --jatg-text-3:     #9ca3af;
     --jatg-border:     #e5e7eb;
     --jatg-bg-alt:     #f9f8f6;
     --font-serif:      'Playfair Display', Georgia, serif;
     --font-sans:       'DM Sans', system-ui, sans-serif;
   }
   
   *, *::before, *::after { box-sizing: border-box; }
   
   body {
     font-family: var(--font-sans) !important;
     font-size: 14px !important;
     color: var(--jatg-text) !important;
     background: #fff !important;
     -webkit-font-smoothing: antialiased;
   }
   
   a { color: var(--jatg-blue); }
   a:hover { color: var(--jatg-blue-dark); text-decoration: none; }
   
   /* ================================================================
      2. TOPBAR — user nav (Register / Login)
         Bootstrap3 OJS selector: #navigationUser  /  .navbar-nav (user area)
      ================================================================ */
   #navigationUser,
   .pkp_navigation_user {
     background: var(--jatg-navy) !important;
     margin: 0 !important;
     padding: 4px 0 !important;
     border: none !important;
     border-radius: 0 !important;
   }
   
   #navigationUser .nav > li > a,
   .pkp_navigation_user .nav > li > a {
     font-family: var(--font-sans) !important;
     font-size: 11px !important;
     color: rgba(255,255,255,0.55) !important;
     padding: 4px 12px !important;
     border-right: 1px solid rgba(255,255,255,0.1) !important;
   }
   
   #navigationUser .nav > li > a:hover,
   .pkp_navigation_user .nav > li > a:hover {
     color: #fff !important;
     background: transparent !important;
   }
   
   /* ================================================================
      3. NAVBAR — main navigation
         Bootstrap3 selectors: .navbar, .navbar-default, .navbar-inverse
      ================================================================ */
   .navbar,
   .navbar-default,
   .navbar-inverse {
     background-color: var(--jatg-blue-dark) !important;
     border: none !important;
     border-radius: 0 !important;
     margin-bottom: 0 !important;
     min-height: 56px !important;
     box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
   }
   
   /* Journal title / brand */
   .navbar-brand,
   .navbar-default .navbar-brand,
   .navbar-inverse .navbar-brand {
     font-family: var(--font-serif) !important;
     font-size: 15px !important;
     font-weight: 700 !important;
     color: #fff !important;
     line-height: 1.3 !important;
     height: auto !important;
     padding: 12px 16px !important;
   }
   
   .navbar-brand:hover,
   .navbar-default .navbar-brand:hover,
   .navbar-inverse .navbar-brand:hover {
     color: #fff !important;
     background: transparent !important;
   }
   
   /* Nav links */
   .navbar-nav > li > a,
   .navbar-default .navbar-nav > li > a,
   .navbar-inverse .navbar-nav > li > a {
     font-family: var(--font-sans) !important;
     font-size: 12px !important;
     color: rgba(255,255,255,0.78) !important;
     padding: 18px 12px !important;
     border-radius: 4px !important;
     margin: 0 1px !important;
     transition: background 0.15s, color 0.15s !important;
   }
   
   .navbar-nav > li > a:hover,
   .navbar-default .navbar-nav > li > a:hover,
   .navbar-inverse .navbar-nav > li > a:hover,
   .navbar-nav > li.active > a,
   .navbar-default .navbar-nav > li.active > a,
   .navbar-inverse .navbar-nav > li.active > a {
     background: rgba(255,255,255,0.13) !important;
     color: #fff !important;
   }
   
   /* Mobile toggle */
   .navbar-toggle {
     border-color: rgba(255,255,255,0.3) !important;
     margin-top: 12px !important;
   }
   .navbar-toggle .icon-bar { background: rgba(255,255,255,0.8) !important; }
   .navbar-toggle:hover { background: rgba(255,255,255,0.1) !important; }
   
   /* Dropdown */
   .navbar-nav .open .dropdown-menu {
     background: var(--jatg-blue-dark) !important;
     border: 1px solid rgba(255,255,255,0.1) !important;
     border-radius: 6px !important;
   }
   .navbar-nav .open .dropdown-menu > li > a {
     font-size: 12px !important;
     color: rgba(255,255,255,0.75) !important;
     padding: 8px 16px !important;
   }
   .navbar-nav .open .dropdown-menu > li > a:hover {
     background: rgba(255,255,255,0.1) !important;
     color: #fff !important;
   }
   
   /* ================================================================
      4. JUMBOTRON / HERO (homepage banner)
         Bootstrap3: .jumbotron
      ================================================================ */
   .jumbotron {
     background: var(--jatg-blue-dark) !important;
     border-radius: 0 !important;
     margin-bottom: 0 !important;
     padding: 36px 0 !important;
     color: #fff !important;
   }
   
   .jumbotron h1,
   .jumbotron .h1 {
     font-family: var(--font-serif) !important;
     font-size: 28px !important;
     font-weight: 700 !important;
     color: #fff !important;
     line-height: 1.3 !important;
     margin-bottom: 12px !important;
   }
   
   .jumbotron p {
     font-size: 13px !important;
     color: rgba(255,255,255,0.65) !important;
     line-height: 1.7 !important;
   }
   
   .jumbotron .btn-primary {
     background: #fff !important;
     color: var(--jatg-blue-dark) !important;
     border: none !important;
     font-family: var(--font-sans) !important;
     font-size: 12px !important;
     font-weight: 500 !important;
     padding: 8px 18px !important;
     border-radius: 5px !important;
   }
   
   .jumbotron .btn-primary:hover {
     background: var(--jatg-blue-light) !important;
     color: var(--jatg-blue-dark) !important;
   }
   
   /* ================================================================
      5. PAGE HEADER (non-homepage title bar)
      ================================================================ */
   .page-header {
     font-family: var(--font-serif) !important;
     font-size: 22px !important;
     font-weight: 700 !important;
     color: var(--jatg-text) !important;
     border-bottom: 2px solid var(--jatg-blue) !important;
     padding-bottom: 12px !important;
     margin-bottom: 20px !important;
   }
   
   /* ================================================================
      6. ARTICLE SUMMARY CARDS
         OJS Bootstrap3: .article-summary, .media, .obj_article_summary
      ================================================================ */
   .article-summary,
   .obj_article_summary,
   .media.article-summary {
     border: 0.5px solid var(--jatg-border) !important;
     border-radius: 8px !important;
     padding: 16px !important;
     margin-bottom: 12px !important;
     background: #fff !important;
     transition: border-color 0.15s, box-shadow 0.15s !important;
   }
   
   .article-summary:hover,
   .obj_article_summary:hover {
     border-color: #b0c4de !important;
     box-shadow: 0 2px 8px rgba(12,68,124,0.06) !important;
   }
   
   /* Article title */
   .article-summary .title,
   .obj_article_summary .title,
   .article-summary h3,
   .article-summary h4 {
     font-family: var(--font-serif) !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     color: var(--jatg-text) !important;
     line-height: 1.45 !important;
     margin-bottom: 6px !important;
   }
   
   .article-summary .title a,
   .obj_article_summary .title a {
     color: var(--jatg-text) !important;
     text-decoration: none !important;
   }
   
   .article-summary .title a:hover,
   .obj_article_summary .title a:hover {
     color: var(--jatg-blue) !important;
   }
   
   /* Authors */
   .article-summary .authors,
   .obj_article_summary .authors {
     font-size: 12px !important;
     color: var(--jatg-text-2) !important;
     margin-bottom: 6px !important;
   }
   
   /* Section label */
   .article-summary .section,
   .obj_article_summary .section {
     display: inline-block !important;
     font-size: 10px !important;
     font-weight: 500 !important;
     padding: 2px 9px !important;
     border-radius: 3px !important;
     background: var(--jatg-blue-light) !important;
     color: var(--jatg-blue-dark) !important;
     margin-bottom: 8px !important;
   }
   
   /* DOI */
   .article-summary .doi,
   .obj_article_summary .doi {
     font-family: monospace !important;
     font-size: 11px !important;
     color: var(--jatg-blue) !important;
     margin-bottom: 6px !important;
   }
   
   /* Galley / PDF buttons */
   .article-summary .galleys_links a,
   .obj_article_summary .galleys_links a,
   .article-summary .btn,
   .obj_article_summary .btn {
     font-family: var(--font-sans) !important;
     font-size: 11px !important;
     padding: 4px 12px !important;
     border-radius: 4px !important;
     margin-right: 5px !important;
   }
   
   .article-summary .galleys_links a.pdf,
   .obj_article_summary .galleys_links a.pdf,
   .article-summary .btn-primary,
   .obj_article_summary .btn-primary {
     background: var(--jatg-blue) !important;
     border-color: var(--jatg-blue) !important;
     color: #fff !important;
   }
   
   .article-summary .galleys_links a.pdf:hover,
   .obj_article_summary .galleys_links a.pdf:hover {
     background: var(--jatg-blue-dark) !important;
     border-color: var(--jatg-blue-dark) !important;
   }
   
   /* ================================================================
      7. ISSUE TABLE OF CONTENTS
         OJS Bootstrap3: .issue-toc, .section, .obj_issue_summary
      ================================================================ */
   .issue-toc .section-header,
   .issue-toc h2 {
     font-family: var(--font-sans) !important;
     font-size: 11px !important;
     font-weight: 500 !important;
     text-transform: uppercase !important;
     letter-spacing: 0.9px !important;
     color: var(--jatg-blue) !important;
     padding: 8px 0 6px !important;
     border-bottom: 0.5px solid var(--jatg-border) !important;
     margin-bottom: 12px !important;
   }
   
   .obj_issue_summary {
     border: 0.5px solid var(--jatg-border) !important;
     border-radius: 8px !important;
     padding: 14px !important;
     margin-bottom: 10px !important;
   }
   
   .obj_issue_summary .title {
     font-family: var(--font-serif) !important;
     font-size: 15px !important;
     color: var(--jatg-text) !important;
   }
   
   .obj_issue_summary .title a {
     color: var(--jatg-text) !important;
   }
   
   .obj_issue_summary .title a:hover {
     color: var(--jatg-blue) !important;
   }
   
   /* ================================================================
      8. ARTICLE DETAIL PAGE
         OJS Bootstrap3: .article-details, .obj_article_details
      ================================================================ */
   .article-details h1,
   .obj_article_details h1,
   .article-details .page-header {
     font-family: var(--font-serif) !important;
     font-size: 24px !important;
     font-weight: 700 !important;
     color: var(--jatg-text) !important;
     line-height: 1.35 !important;
     border-bottom: none !important;
     margin-bottom: 14px !important;
   }
   
   .article-details .authors,
   .obj_article_details .authors {
     font-size: 13px !important;
     color: var(--jatg-text-2) !important;
     margin-bottom: 12px !important;
     line-height: 1.6 !important;
   }
   
   .article-details .doi,
   .obj_article_details .doi {
     font-family: monospace !important;
     font-size: 12px !important;
     color: var(--jatg-blue) !important;
     margin-bottom: 16px !important;
   }
   
   /* Abstract panel */
   .article-details .abstract,
   .obj_article_details .abstract {
     background: #f9f8f6 !important;
     border-left: 3px solid var(--jatg-blue) !important;
     border-radius: 0 6px 6px 0 !important;
     padding: 16px 18px !important;
     margin: 20px 0 !important;
   }
   
   .article-details .abstract h2,
   .article-details .abstract h3,
   .obj_article_details .abstract h2,
   .obj_article_details .abstract h3 {
     font-family: var(--font-sans) !important;
     font-size: 11px !important;
     font-weight: 500 !important;
     text-transform: uppercase !important;
     letter-spacing: 0.8px !important;
     color: var(--jatg-blue) !important;
     margin-bottom: 8px !important;
   }
   
   .article-details .abstract p,
   .obj_article_details .abstract p {
     font-size: 13.5px !important;
     color: var(--jatg-text-2) !important;
     line-height: 1.75 !important;
     margin: 0 !important;
   }
   
   /* ================================================================
      9. SIDEBAR PANELS
         Bootstrap3: .panel, .panel-default, .pkp_block
      ================================================================ */
   .panel,
   .panel-default,
   .pkp_block {
     background: #fff !important;
     border: 0.5px solid var(--jatg-border) !important;
     border-radius: 8px !important;
     box-shadow: none !important;
     margin-bottom: 16px !important;
   }
   
   .panel-heading,
   .panel-default > .panel-heading {
     background: #fff !important;
     border-bottom: 0.5px solid var(--jatg-border) !important;
     border-radius: 8px 8px 0 0 !important;
     padding: 10px 14px !important;
   }
   
   .panel-heading h3,
   .panel-heading .panel-title,
   .pkp_block .title {
     font-family: var(--font-sans) !important;
     font-size: 10px !important;
     font-weight: 500 !important;
     text-transform: uppercase !important;
     letter-spacing: 0.8px !important;
     color: var(--jatg-text-3) !important;
     margin: 0 !important;
   }
   
   .panel-body {
     padding: 12px 14px !important;
   }
   
   .panel-body ul {
     list-style: none !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   
   .panel-body ul li {
     padding: 5px 0 !important;
     border-bottom: 0.5px solid #f3f4f6 !important;
     font-size: 12px !important;
     color: var(--jatg-text-2) !important;
   }
   
   .panel-body ul li:last-child { border-bottom: none !important; }
   
   .panel-body ul li a {
     color: var(--jatg-text-2) !important;
   }
   
   .panel-body ul li a:hover {
     color: var(--jatg-blue) !important;
   }
   
   /* ================================================================
      10. BUTTONS — global overrides
      ================================================================ */
   .btn {
     font-family: var(--font-sans) !important;
     border-radius: 5px !important;
     font-size: 12px !important;
     font-weight: 500 !important;
     transition: background 0.15s, border-color 0.15s !important;
   }
   
   .btn-primary {
     background-color: var(--jatg-blue) !important;
     border-color: var(--jatg-blue) !important;
     color: #fff !important;
   }
   
   .btn-primary:hover,
   .btn-primary:focus {
     background-color: var(--jatg-blue-dark) !important;
     border-color: var(--jatg-blue-dark) !important;
   }
   
   .btn-default {
     background: #fff !important;
     border-color: var(--jatg-border) !important;
     color: var(--jatg-text-2) !important;
   }
   
   .btn-default:hover {
     border-color: var(--jatg-blue) !important;
     color: var(--jatg-blue) !important;
   }
   
   /* Make submission button in sidebar */
   .pkp_block a.btn,
   .panel-body a.btn {
     display: block !important;
     width: 100% !important;
     text-align: center !important;
     margin-bottom: 6px !important;
   }
   
   /* ================================================================
      11. FORMS
      ================================================================ */
   .form-control {
     font-family: var(--font-sans) !important;
     font-size: 13px !important;
     border: 1px solid var(--jatg-border) !important;
     border-radius: 5px !important;
     color: var(--jatg-text) !important;
     box-shadow: none !important;
     transition: border-color 0.15s !important;
   }
   
   .form-control:focus {
     border-color: var(--jatg-blue) !important;
     box-shadow: 0 0 0 3px rgba(24,95,165,0.1) !important;
   }
   
   /* ================================================================
      12. BREADCRUMBS
      ================================================================ */
   .breadcrumb {
     background: #f9f8f6 !important;
     border-radius: 0 !important;
     border-bottom: 0.5px solid var(--jatg-border) !important;
     font-size: 11px !important;
     padding: 8px 16px !important;
     margin-bottom: 0 !important;
   }
   
   .breadcrumb > li + li::before {
     color: var(--jatg-text-3) !important;
   }
   
   .breadcrumb > .active {
     color: var(--jatg-text-2) !important;
   }
   
   /* ================================================================
      13. PAGINATION
      ================================================================ */
   .pagination > li > a,
   .pagination > li > span {
     font-family: var(--font-sans) !important;
     font-size: 12px !important;
     color: var(--jatg-text-2) !important;
     border-color: var(--jatg-border) !important;
     padding: 5px 12px !important;
   }
   
   .pagination > li > a:hover {
     background: var(--jatg-blue-light) !important;
     border-color: var(--jatg-blue) !important;
     color: var(--jatg-blue) !important;
   }
   
   .pagination > .active > a,
   .pagination > .active > span {
     background: var(--jatg-blue) !important;
     border-color: var(--jatg-blue) !important;
     color: #fff !important;
   }
   
   /* ================================================================
      14. LABELS & BADGES
      ================================================================ */
   .label-primary { background-color: var(--jatg-blue) !important; }
   .label-default { background-color: var(--jatg-text-3) !important; }
   .badge { background-color: var(--jatg-blue) !important; }
   
   /* Section / keyword tags */
   .label,
   span.label {
     font-family: var(--font-sans) !important;
     font-size: 10px !important;
     font-weight: 500 !important;
     padding: 3px 8px !important;
     border-radius: 3px !important;
     letter-spacing: 0.2px !important;
   }
   
   /* ================================================================
      15. FOOTER
         Bootstrap3 OJS: #main-footer, .cmp_footer, footer
      ================================================================ */
   #main-footer,
   .cmp_footer,
   footer.footer,
   .pkp_structure_footer {
     background: #111 !important;
     color: rgba(255,255,255,0.45) !important;
     padding: 32px 0 24px !important;
     border-top: none !important;
     margin-top: 0 !important;
   }
   
   #main-footer a,
   .cmp_footer a,
   footer.footer a {
     color: rgba(255,255,255,0.4) !important;
     font-size: 11px !important;
     transition: color 0.15s !important;
   }
   
   #main-footer a:hover,
   .cmp_footer a:hover,
   footer.footer a:hover {
     color: rgba(255,255,255,0.85) !important;
     text-decoration: none !important;
   }
   
   #main-footer h4,
   #main-footer h3,
   .cmp_footer h4 {
     font-family: var(--font-sans) !important;
     font-size: 10px !important;
     font-weight: 500 !important;
     text-transform: uppercase !important;
     letter-spacing: 0.8px !important;
     color: rgba(255,255,255,0.65) !important;
     margin-bottom: 10px !important;
   }
   
   /* Journal name in footer */
   #main-footer .navbar-brand,
   .cmp_footer .navbar-brand {
     font-family: var(--font-serif) !important;
     font-size: 14px !important;
     color: #fff !important;
     padding: 0 !important;
     display: block !important;
     margin-bottom: 8px !important;
     height: auto !important;
   }
   
   /* ================================================================
      16. MAIN CONTAINER
      ================================================================ */
   #main-content,
   .pkp_structure_main {
     padding-top: 0 !important;
   }
   
   .container {
     padding-left: 20px !important;
     padding-right: 20px !important;
   }
   
   /* Sidebar background */
   #sidebar,
   .pkp_structure_sidebar {
     background: var(--jatg-bg-alt) !important;
     padding: 16px 12px !important;
     border-radius: 8px !important;
   }
   
   /* ================================================================
      17. ALERTS
      ================================================================ */
   .alert {
     border-radius: 6px !important;
     font-size: 13px !important;
     font-family: var(--font-sans) !important;
     border-left-width: 3px !important;
   }
   
   .alert-info {
     background: var(--jatg-blue-light) !important;
     border-color: var(--jatg-blue) !important;
     color: var(--jatg-blue-dark) !important;
   }
   
   /* ================================================================
      18. HEADINGS — general
      ================================================================ */
   h1, h2, h3 {
     font-family: var(--font-serif) !important;
     color: var(--jatg-text) !important;
   }
   
   h4, h5, h6 {
     font-family: var(--font-sans) !important;
     color: var(--jatg-text) !important;
   }
   
   /* ================================================================
      19. SECTION DIVIDERS
      ================================================================ */
   hr {
     border-top: 0.5px solid var(--jatg-border) !important;
     margin: 20px 0 !important;
   }
   
   /* ================================================================
      20. MOBILE RESPONSIVE FIXES
      ================================================================ */
   @media (max-width: 767px) {
     .navbar-nav .open .dropdown-menu > li > a {
       color: rgba(255,255,255,0.78) !important;
     }
   
     .navbar-collapse {
       background: var(--jatg-blue-dark) !important;
       border-top: 1px solid rgba(255,255,255,0.1) !important;
     }
   
     .article-summary,
     .obj_article_summary {
       padding: 12px !important;
     }
   
     .jumbotron h1 { font-size: 20px !important; }
   }
   
   /* ================================================================
      21. NAVBAR LAYOUT — logo banner full width di atas, menu di bawah
          Berdasarkan struktur HTML aktual OJS Bootstrap3:
          header.navbar > div.container-fluid > div.navbar-header (logo)
                                              > nav.navbar-collapse (menu)
      ================================================================ */
   
   /* Header wrapper: ubah jadi kolom vertikal */
   .navbar.navbar-default {
     padding: 0 !important;
   }
   
   /* container-fluid ke-2 (pembungkus logo + menu): kolom vertikal */
   .navbar-default > .container-fluid:nth-child(2) {
     display: flex !important;
     flex-direction: column !important;
     padding: 0 !important;
   }
   
   /* ── BARIS 1: navbar-header — logo banner full width ── */
   .navbar-header {
     width: 100% !important;
     padding: 0 !important;
     margin: 0 !important;
     float: none !important;
     background: #042C53 !important;
     display: block !important;
   }
   
   /* Logo image — full width stretch */
   .navbar-brand-logo,
   .navbar-brand.navbar-brand-logo {
     display: block !important;
     padding: 0 !important;
     margin: 0 !important;
     width: 100% !important;
     height: auto !important;
     float: none !important;
   }
   
   .navbar-brand-logo img,
   .navbar-brand.navbar-brand-logo img {
     width: 100% !important;
     max-width: 100% !important;
     height: auto !important;
     display: block !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   
   /* Judul teks (fallback jika tidak ada logo) */
   .navbar-brand:not(.navbar-brand-logo),
   .site-name .navbar-brand:not(.navbar-brand-logo) {
     font-family: 'Playfair Display', Georgia, serif !important;
     font-size: 18px !important;
     font-weight: 700 !important;
     color: #fff !important;
     padding: 14px 24px !important;
     height: auto !important;
     line-height: 1.3 !important;
     float: none !important;
     display: block !important;
   }
   
   /* Mobile toggle — pojok kanan di atas logo */
   .navbar-toggle {
     position: absolute !important;
     top: 8px !important;
     right: 12px !important;
     z-index: 10 !important;
     margin: 0 !important;
     border-color: rgba(255,255,255,0.35) !important;
   }
   
   /* ── BARIS 2: navbar-collapse — menu nav ── */
   .navbar-collapse,
   .navbar-default .navbar-collapse {
     width: 100% !important;
     background: #e3b603 !important;
     padding: 0 16px !important;
     border: none !important;
     border-top: 1px solid rgba(255,255,255,0.1) !important;
     float: none !important;
     box-shadow: none !important;
   }
   
   .navbar-nav {
     float: none !important;
     margin: 0 !important;
     display: flex !important;
     flex-wrap: wrap !important;
     gap: 2px !important;
     padding: 6px 0 !important;
   }
   
   .navbar-nav > li { float: none !important; }
   
   .navbar-nav > li > a,
   .navbar-default .navbar-nav > li > a {
     font-size: 12px !important;
     color: rgba(255,255,255,0.78) !important;
     padding: 7px 13px !important;
     border-radius: 4px !important;
     line-height: 1.4 !important;
   }
   
   .navbar-nav > li > a:hover,
   .navbar-default .navbar-nav > li > a:hover,
   .navbar-nav > li.active > a {
     background: rgba(255,255,255,0.13) !important;
     color: #fff !important;
   }
   
   /* Dropdown */
   .navbar-nav .open .dropdown-menu {
     position: absolute !important;
     background: #0C447C !important;
     border: 1px solid rgba(255,255,255,0.15) !important;
     border-radius: 6px !important;
     margin-top: 2px !important;
     min-width: 180px !important;
     z-index: 1000 !important;
   }
   
   .navbar-nav .open .dropdown-menu > li > a {
     font-size: 12px !important;
     color: rgba(255,255,255,0.78) !important;
     padding: 8px 16px !important;
     white-space: nowrap !important;
   }
   
   .navbar-nav .open .dropdown-menu > li > a:hover {
     background: rgba(255,255,255,0.12) !important;
     color: #fff !important;
   }
   
   /* Search sejajar di baris menu */
   .navbar-form {
     float: none !important;
     margin: 0 0 0 auto !important;
   }
   
   .navbar-collapse {
     display: flex !important;
     align-items: center !important;
   }
   
   /* Mobile */
   @media (max-width: 767px) {
     .navbar-header { position: relative !important; }
   
     .navbar-collapse {
       flex-direction: column !important;
       align-items: flex-start !important;
     }
   
     .navbar-nav {
       flex-direction: column !important;
       gap: 0 !important;
       width: 100% !important;
     }
   
     .navbar-nav .open .dropdown-menu {
       position: static !important;
       background: rgba(0,0,0,0.15) !important;
       border: none !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       padding-left: 12px !important;
     }
   }
   
   /* ================================================================
      22. SEARCH ICON — sembunyikan input, tombol jadi ikon kaca pembesar
          klik langsung ke halaman search OJS
      ================================================================ */
   
   /* Sembunyikan input field search sepenuhnya */
   .navbar-form .form-control,
   .navbar-form input[type="text"],
   .navbar-form input[type="search"] {
     display: none !important;
   }
   
   /* Posisikan form search sejajar di baris nav (baris 2) */
   .navbar-form {
     margin: 0 0 0 auto !important;
     padding: 0 !important;
     border: none !important;
     box-shadow: none !important;
     float: none !important;
     display: flex !important;
     align-items: center !important;
     height: 100% !important;
   }
   
   /* Tombol search → ikon kaca pembesar saja */
   .navbar-form button[type="submit"],
   .navbar-form .btn {
     background: transparent !important;
     border: none !important;
     color: rgba(255,255,255,0.65) !important;
     font-size: 0 !important;
     padding: 7px 10px !important;
     border-radius: 4px !important;
     line-height: 1 !important;
     transition: background 0.15s, color 0.15s !important;
     cursor: pointer !important;
   }
   
   /* Glyphicon kaca pembesar via ::before */
   .navbar-form button[type="submit"]::before,
   .navbar-form .btn::before {
     font-family: 'Glyphicons Halflings' !important;
     content: "\e003" !important;
     font-size: 14px !important;
     font-style: normal !important;
     font-weight: normal !important;
     line-height: 1 !important;
     color: rgba(255,255,255,0.65) !important;
   }
   
   .navbar-form button[type="submit"]:hover::before,
   .navbar-form .btn:hover::before {
     color: #fff !important;
   }
   
   .navbar-form button[type="submit"]:hover,
   .navbar-form .btn:hover {
     background: rgba(255,255,255,0.13) !important;
   }
   
   /* Pastikan .navbar-nav dan .navbar-form sejajar dalam satu baris */
   .navbar-collapse > .navbar-nav,
   .navbar-collapse > .navbar-form {
     display: inline-flex !important;
     vertical-align: middle !important;
     align-items: center !important;
   }
   
   .navbar-collapse {
     display: flex !important;
     flex-wrap: wrap !important;
     align-items: center !important;
     padding: 0 16px !important;
   }
   
   /* ================================================================
      23. TOGGLE NAVIGATION — perbagus tombol hamburger
      ================================================================ */
   
   /* Sembunyikan teks "Toggle navigation" */
   .navbar-toggle .sr-only {
     display: none !important;
   }
   
   .navbar-toggle {
     background: transparent !important;
     border: 1px solid rgba(255,255,255,0.3) !important;
     border-radius: 4px !important;
     padding: 7px 10px !important;
     margin: 0 !important;
   }
   
   .navbar-toggle:hover,
   .navbar-toggle:focus {
     background: rgba(255,255,255,0.12) !important;
     outline: none !important;
   }
   
   .navbar-toggle .icon-bar {
     background: rgba(255,255,255,0.85) !important;
     height: 2px !important;
     width: 20px !important;
     border-radius: 2px !important;
     display: block !important;
     margin: 4px 0 !important;
   }
   
   /* Mobile: search tetap sejajar di baris nav */
   @media (max-width: 767px) {
     .navbar-form {
       margin: 0 !important;
       padding: 4px 0 !important;
       width: auto !important;
     }
   
     .navbar-collapse {
       flex-direction: column !important;
       align-items: flex-start !important;
     }
   
     .navbar-form {
       align-self: flex-start !important;
     }
   }
   
   /* ================================================================
      25. USER NAV (Login/Register) — mengambang di atas gambar logo
          Selector: #navigationUser di dalam container-fluid pertama
      ================================================================ */
   
   /* Sembunyikan container-fluid pertama (row wrapper user nav) */
   .navbar-default > .container-fluid:first-child {
     position: absolute !important;
     top: 0 !important;
     right: 0 !important;
     z-index: 20 !important;
     background: transparent !important;
     padding: 0 !important;
     width: auto !important;
   }
   
   .navbar-default > .container-fluid:first-child .row {
     margin: 0 !important;
   }
   
   /* User nav list — transparan, mengambang pojok kanan atas */
   #navigationUser {
     background: transparent !important;
     margin: 0 !important;
     padding: 6px 12px !important;
     float: none !important;
   }
   
   #navigationUser > li > a,
   #navigationUser > li.dropdown > a {
     font-size: 11px !important;
     color: rgba(255,255,255,0.85) !important;
     padding: 4px 10px !important;
     background: rgba(0,0,0,0.25) !important;
     border-radius: 3px !important;
     transition: background 0.15s, color 0.15s !important;
     text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
   }
   
   #navigationUser > li > a:hover,
   #navigationUser > li.dropdown > a:hover {
     background: rgba(0,0,0,0.45) !important;
     color: #fff !important;
   }
   
   /* Badge notifikasi */
   #navigationUser .badge {
     background: #378ADD !important;
     font-size: 9px !important;
   }
   
   /* Dropdown menu user nav */
   #navigationUser .dropdown-menu {
     background: rgba(4, 44, 83, 0.95) !important;
     border: 1px solid rgba(255,255,255,0.15) !important;
     border-radius: 6px !important;
     margin-top: 4px !important;
     right: 0 !important;
     left: auto !important;
   }
   
   #navigationUser .dropdown-menu > li > a {
     font-size: 12px !important;
     color: rgba(255,255,255,0.78) !important;
     padding: 7px 16px !important;
   }
   
   #navigationUser .dropdown-menu > li > a:hover {
     background: rgba(255,255,255,0.1) !important;
     color: #fff !important;
   }
   
   /* Pastikan navbar-header posisinya relative agar absolute child bekerja */
   .navbar-default {
     position: relative !important;
   }
   
   /* Mobile: kembalikan ke posisi normal */
   @media (max-width: 767px) {
     .navbar-default > .container-fluid:first-child {
       position: relative !important;
       top: auto !important;
       right: auto !important;
       width: 100% !important;
       background: #042C53 !important;
     }
   
     #navigationUser {
       padding: 4px 12px !important;
     }
   
     #navigationUser > li > a,
     #navigationUser > li.dropdown > a {
       background: transparent !important;
       font-size: 11px !important;
     }
   }
   
   /* ================================================================
      26. AUTHOR GUIDELINES PAGE
          Target: konten halaman About > Submissions / Author Guidelines
          OJS Bootstrap3: .pkp_structure_main, .page-about, .page-submissions
      ================================================================ */
   
   /* ── Heading h2 — section separator dengan garis biru kiri ── */
   .pkp_structure_main h2,
   .page-about h2,
   .page-submissions h2 {
     font-family: var(--font-sans) !important;
     font-size: 14px !important;
     font-weight: 700 !important;
     color: var(--jatg-blue-dark) !important;
     border-left: 4px solid var(--jatg-blue) !important;
     border-bottom: none !important;
     padding: 2px 0 2px 10px !important;
     margin-top: 28px !important;
     margin-bottom: 10px !important;
   }
   
   /* ── Heading h3 — sub-section ── */
   .pkp_structure_main h3,
   .page-about h3,
   .page-submissions h3 {
     font-family: var(--font-sans) !important;
     font-size: 13px !important;
     font-weight: 700 !important;
     color: var(--jatg-text) !important;
     margin-top: 16px !important;
     margin-bottom: 6px !important;
   }
   
   /* ── Paragraf ── */
   .pkp_structure_main p {
     font-size: 13.5px !important;
     line-height: 1.8 !important;
     color: var(--jatg-text-2) !important;
     text-align: justify !important;
     margin-bottom: 10px !important;
   }
   
   /* ── List items ── */
   .pkp_structure_main ol,
   .pkp_structure_main ul {
     margin: 8px 0 14px 22px !important;
     padding-left: 0 !important;
   }
   
   .pkp_structure_main li {
     font-size: 13.5px !important;
     color: var(--jatg-text-2) !important;
     line-height: 1.75 !important;
     margin-bottom: 6px !important;
   }
   
   /* ── Tabel di dalam konten guidelines ── */
   .pkp_structure_main table {
     width: 100% !important;
     border-collapse: collapse !important;
     margin: 14px 0 !important;
     font-size: 12.5px !important;
   }
   
   .pkp_structure_main table th {
     background: var(--jatg-blue-dark) !important;
     color: #fff !important;
     padding: 8px 12px !important;
     text-align: left !important;
     font-family: var(--font-sans) !important;
     font-weight: 600 !important;
     font-size: 12px !important;
   }
   
   .pkp_structure_main table td {
     padding: 7px 12px !important;
     border-bottom: 1px solid var(--jatg-border) !important;
     vertical-align: top !important;
     color: var(--jatg-text-2) !important;
   }
   
   .pkp_structure_main table tr:nth-child(even) td {
     background: var(--jatg-bg-alt) !important;
   }
   
   .pkp_structure_main table tr:hover td {
     background: #EEF5FC !important;
   }
   
   /* ── Note / callout box — class .jatg-note ── */
   .jatg-note {
     background: var(--jatg-blue-light) !important;
     border-left: 4px solid var(--jatg-blue) !important;
     border-radius: 0 6px 6px 0 !important;
     padding: 10px 14px !important;
     margin: 14px 0 !important;
     font-size: 13px !important;
     line-height: 1.65 !important;
     color: var(--jatg-blue-dark) !important;
   }
   
   .jatg-note a {
     color: var(--jatg-blue) !important;
     text-decoration: underline !important;
   }
   
   /* ── Example / code block box — class .jatg-example ── */
   .jatg-example {
     background: var(--jatg-bg-alt) !important;
     border: 1px solid var(--jatg-border) !important;
     border-radius: 6px !important;
     padding: 12px 16px !important;
     margin: 10px 0 !important;
     font-size: 12.5px !important;
     line-height: 1.7 !important;
     color: var(--jatg-text-2) !important;
   }
   
   .jatg-example p { margin-bottom: 8px !important; text-align: left !important; }
   .jatg-example p:last-child { margin-bottom: 0 !important; }
   
   /* ── Inline code ── */
   .pkp_structure_main code {
     font-family: 'Courier New', monospace !important;
     background: #f3f4f6 !important;
     padding: 1px 5px !important;
     border-radius: 3px !important;
     font-size: 12px !important;
     color: var(--jatg-text) !important;
   }
   
   /* ── Badge kecil ── */
   .jatg-badge {
     display: inline-block !important;
     background: var(--jatg-blue) !important;
     color: #fff !important;
     font-size: 10px !important;
     padding: 2px 7px !important;
     border-radius: 3px !important;
     margin-left: 5px !important;
     vertical-align: middle !important;
     font-family: var(--font-sans) !important;
     font-weight: 500 !important;
   }
   
   /* ── Strong / bold di dalam konten ── */
   .pkp_structure_main strong {
     color: var(--jatg-text) !important;
     font-weight: 600 !important;
   }
   
   /* ── Em / italic ── */
   .pkp_structure_main em {
     color: var(--jatg-text-2) !important;
   }
   
   /* ── Ordered list alphabetic (type=a) ── */
   .pkp_structure_main ol[type="a"] {
     list-style-type: lower-alpha !important;
   }
   
   /* ── Responsive table: scroll horizontal di mobile ── */
   @media (max-width: 767px) {
     .pkp_structure_main table {
       display: block !important;
       overflow-x: auto !important;
       -webkit-overflow-scrolling: touch !important;
     }
   }