from pathlib import Path
code = r'''
<style>
  /* ===== Google Font ===== */
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

  /* ===== CSS Variables ===== */
  :root {
    --c-primary:       #B4A7D6;
    --c-primary-light: #D4CEEB;
    --c-primary-dark:  #6B4FA8;
    --c-accent:        #9B89C7;
    --c-foreground:    #4A4458;
    --c-muted:         #7C7088;
    --c-border:        #E8E4F0;
    --c-card:          #ffffff;
    --c-bg:            #F9F8FB;
    --c-white:         #ffffff;
    --radius:          0.75rem;
    --shadow-sm:       0 1px 3px rgba(139, 127, 184, 0.12);
    --shadow-md:       0 4px 12px rgba(139, 127, 184, 0.20);

    /* Scrolled state palette */
    --c-scrolled-bg:   rgba(52, 17, 126, 0.75);
    --c-scrolled-text: #ffffff;
    --c-scrolled-hover:#c9b8ff;
  }

  body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* ===================================================================
     NAVBAR WRAPPER
  =================================================================== */
  .header-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--c-card);
    box-shadow: var(--shadow-sm);
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }

  .header-navbar.scrolled {
    background: var(--c-scrolled-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(52, 17, 126, 0.25);
  }

  /* ===================================================================
     INNER CONTAINER
  =================================================================== */
  .header-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: padding 0.35s ease;
  }

  @media (min-width: 1024px) {
    .header-navbar-inner { padding: 14px 32px; }
  }

  .header-navbar.scrolled .header-navbar-inner {
    padding-top: 1px;
    padding-bottom: 1px;
  }

/* ===================================================================
   LOGO (BRAND)
=================================================================== */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

/* Wrapper kontrol ukuran */
.header-logo-icon {
  position: relative;
  width: 210px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s ease, height 0.35s ease;
  overflow: visible;
}

@media (max-width: 768px) {
  .header-logo-icon {
    width: 160px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .header-logo-icon {
    width: 120px;
    height: 36px;
  }
}

/* Saat scrolled — ubah ukuran logo CANTRIK di sini */
.header-navbar.scrolled .header-logo-icon {
  width: 180px !important;
  height: 48px !important;
}

@media (max-width: 768px) {
  .header-navbar.scrolled .header-logo-icon {
    width: 140px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  .header-navbar.scrolled .header-logo-icon {
    width: 100px !important;
    height: 32px !important;
  }
}

/* Semua gambar logo pakai 100% + !important biar tidak di-override Bootstrap */
.header-logo-icon img {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
}

/* === DEFAULT LOGO === */
.header-logo-default {
  opacity: 1;
  filter: brightness(0) saturate(100%);
}
.header-navbar.scrolled .header-logo-default {
  opacity: 0 !important;
  pointer-events: none;
}

/* === SCROLLED LOGO "CANTRIK" — paksa ukuran di sini === */
.header-logo-scrolled {
  opacity: 0;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.header-navbar.scrolled .header-logo-scrolled {
  opacity: 1 !important;
  pointer-events: auto;
  
  /* Scaling utama — ubah nilai ini sesuai kebutuhan */
  transform: translate(-50%, -50%) scale(2.4) !important;   /* 1.5 = 50% lebih besar */
  
  /* Opsional: kalau scaling bikin terlalu "meledak" keluar wrapper, tambahkan ini */
  transform-origin: center center;
}

.header-navbar.scrolled .header-logo-scrolled {
  opacity: 1 !important;
  pointer-events: auto;
  
  width: 100% !important;          /* ← paksa isi lebar wrapper */
  height: 100% !important;         /* ← paksa isi tinggi wrapper */
  max-width: none !important;      /* matikan batasan Bootstrap */
  max-height: none !important;
  object-fit: contain !important;  /* atau coba 'fill' untuk test */
}

/* === DEFAULT LOGO (Buana Cantrik Akademia Foundation) === */
.header-logo-default {
  opacity: 1;
  filter: brightness(0) saturate(100%);
}
.header-navbar.scrolled .header-logo-default {
  opacity: 0;
  pointer-events: none;
}

/* === SCROLLED LOGO (CANTRIK) === */
.header-logo-scrolled {
  opacity: 0;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.header-navbar.scrolled .header-logo-scrolled {
  opacity: 1;
  pointer-events: auto;
}

  /* ===================================================================
     CENTER NAVIGATION (desktop)
  =================================================================== */
  .header-nav-center {
    display: none;
    align-items: center;
    gap: 4px;
    flex: 1;
  }

  @media (min-width: 768px) {
    .header-nav-center { display: flex; }
  }

  .header-nav-link {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-foreground);
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
  }

  @media (max-width: 767px) {
    .header-nav-link { font-size: 12px; padding: 4px 8px; }
  }

  .header-nav-link:hover {
    color: var(--c-primary-dark);
    background: var(--c-primary-light);
  }

  .header-navbar.scrolled .header-nav-link {
    color: var(--c-scrolled-text);
  }

  .header-navbar.scrolled .header-nav-link:hover {
    color: var(--c-scrolled-hover);
    background: rgba(255,255,255,0.12);
  }

  /* Mobile Menu Hamburger */
  .header-mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  @media (min-width: 768px) {
    .header-mobile-menu-btn { display: none; }
  }

  .header-navbar.scrolled .header-mobile-menu-btn {
    border-color: rgba(255,255,255,0.3);
    color: var(--c-white);
  }

  .header-mobile-menu-btn:active {
    background: var(--c-primary-light);
  }

  /* ===================================================================
     DROPDOWN (desktop)
  =================================================================== */
  .header-dropdown {
    position: relative;
    display: inline-block;
  }

  .header-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-foreground);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
  }

  .header-dropdown-btn:hover {
    color: var(--c-primary-dark);
    background: var(--c-primary-light);
  }

  .header-navbar.scrolled .header-dropdown-btn {
    color: var(--c-scrolled-text);
  }

  .header-navbar.scrolled .header-dropdown-btn:hover {
    color: var(--c-scrolled-hover);
    background: rgba(255,255,255,0.12);
  }

  .header-dropdown-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }

  .header-dropdown-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .header-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    min-width: 210px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 200;
  }

  .header-dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header-dropdown-item {
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--c-foreground);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid var(--c-border);
  }

  .header-dropdown-item:last-child { border-bottom: none; }

  .header-dropdown-item:hover {
    background: var(--c-bg);
    color: var(--c-primary-dark);
  }

  /* ===================================================================
     RIGHT ACTIONS
  =================================================================== */
  .header-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  /* Search */
  .header-search-box {
    position: relative;
    display: none;
  }

  @media (min-width: 900px) {
    .header-search-box { display: block; }
  }

  .header-search-box input {
    width: 160px;
    padding: 7px 12px;
    font-size: 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-foreground);
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease, width 0.3s ease;
  }

  @media (max-width: 1200px) {
    .header-search-box input { width: 140px; }
  }

  .header-search-box input:focus {
    outline: none;
    border-color: var(--c-primary);
    background: var(--c-white);
    width: 200px;
  }

  @media (max-width: 1200px) {
    .header-search-box input:focus { width: 180px; }
  }

  .header-navbar.scrolled .header-search-box input {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: var(--c-white);
  }

  .header-navbar.scrolled .header-search-box input::placeholder {
    color: rgba(255,255,255,0.6);
  }

  .header-navbar.scrolled .header-search-box input:focus {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
  }

  .header-navbar.scrolled .header-search-box input {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: var(--c-white);
  }

  .header-navbar.scrolled .header-search-box input::placeholder {
    color: rgba(255,255,255,0.6);
  }

  /* Auth buttons */
  .header-auth-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .header-auth-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--c-primary);
    border-radius: 50%;
    color: var(--c-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .header-auth-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
      border-width: 1.5px;
    }
  }

  .header-auth-icon:hover {
    background: var(--c-primary-light);
    color: var(--c-white);
  }

  .header-auth-icon:active {
    transform: scale(0.95);
  }

  .header-navbar.scrolled .header-auth-icon {
    border-color: var(--c-white);
    color: var(--c-white);
  }

  .header-navbar.scrolled .header-auth-icon:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
  }

  .header-auth-icon:hover {
    background: var(--c-primary);
    color: var(--c-white);
  }

  .header-navbar.scrolled .header-auth-icon {
    border-color: rgba(255,255,255,0.6);
    color: var(--c-white);
    background: rgba(255,255,255,0.5);
  }

  .header-navbar.scrolled .header-auth-icon:hover {
    background: rgba(255,255,255,0.2);
    border-color: var(--c-white);
  }

  /* ===================================================================
     MOBILE TOGGLE
  =================================================================== */
  .header-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--c-foreground);
    transition: color 0.25s ease;
    flex-shrink: 0;
  }

  .header-navbar.scrolled .header-mobile-toggle {
    color: var(--c-white);
  }

  .header-mobile-toggle svg {
    width: 22px;
    height: 22px;
  }

  @media (min-width: 768px) {
    .header-mobile-toggle { display: none; }
  }

  /* ===================================================================
     MOBILE DRAWER NAV
  =================================================================== */
  .header-nav-mobile {
    display: none; /* JS toggles this */
    flex-direction: column;
    background: var(--c-card);
    border-top: 1px solid var(--c-border);
    padding: 8px 0 16px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .header-nav-mobile.open {
    display: flex;
  }

  .header-navbar.scrolled .header-nav-mobile {
    background: rgba(42, 12, 105, 0.97);
    border-top-color: rgba(255,255,255,0.1);
  }

  .header-nav-mobile a,
  .header-nav-mobile button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--c-foreground);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .header-nav-mobile a:hover,
  .header-nav-mobile button:hover {
    background: var(--c-bg);
    color: var(--c-primary-dark);
  }

  .header-navbar.scrolled .header-nav-mobile a,
  .header-navbar.scrolled .header-nav-mobile button {
    color: rgba(255,255,255,0.85);
  }

  .header-navbar.scrolled .header-nav-mobile a:hover,
  .header-navbar.scrolled .header-nav-mobile button:hover {
    background: rgba(255,255,255,0.1);
    color: var(--c-white);
  }

  /* Submenu indent */
  .header-nav-mobile a.sub-link {
    padding-left: 36px;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: var(--c-muted);
  }

  .header-navbar.scrolled .header-nav-mobile a.sub-link {
    color: rgba(255,255,255,0.55);
  }

  .header-nav-mobile a.sub-link:hover {
    color: var(--c-primary-dark);
  }

  .header-navbar.scrolled .header-nav-mobile a.sub-link:hover {
    color: var(--c-white);
  }

  /* Divider between mobile groups */
  .mobile-nav-divider {
    height: 1px;
    background: var(--c-border);
    margin: 6px 20px;
  }

  .header-navbar.scrolled .mobile-nav-divider {
    background: rgba(255,255,255,0.12);
  }

  /* Mobile search */
  .mobile-search-form {
    padding: 8px 20px 4px;
  }

  .mobile-search-form input {
    width: 100%;
    padding: 9px 14px;
    font-size: 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    color: var(--c-foreground);
    font-family: inherit;
    box-sizing: border-box;
  }

  .mobile-search-form input:focus {
    outline: none;
    border-color: var(--c-primary);
  }

  .header-navbar.scrolled .mobile-search-form input {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: var(--c-white);
  }
</style>

<header class="header-navbar" id="headerNavbar">
  <div class="header-navbar-inner">

        <a href="https://cantrik.org" class="header-logo" aria-label="Cantrik Publisher — Home">

      <div class="header-logo-icon">
                <img
          src="https://cantrik.org/plugins/themes/bootstrap3/images/logo-buana_cantrik_akademia_foundation.png"
          alt="Buana Cantrik Akademia Foundation"
          class="header-logo-default"
        >
                <img
          src="https://cantrik.org/plugins/themes/bootstrap3/images/logo-cantrik.png"
          alt="Cantrik Publisher"
          class="header-logo-scrolled"
        >
      </div>
    </a>

        <nav class="header-nav-center" aria-label="Main navigation">

      <a href="https://cantrik.org/index/index" class="header-nav-link">Home</a>

            <div class="header-dropdown">
        <button
          type="button"
          class="header-dropdown-btn"
          id="btn-issues"
          onclick="toggleHeaderDropdown('issues')"
          aria-expanded="false"
          aria-haspopup="true"
        >
          Issues
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div class="header-dropdown-menu" id="issues-menu" role="menu">
          <a href="https://cantrik.org/index/issue/current" class="header-dropdown-item" role="menuitem">Current Issue</a>
          <a href="https://cantrik.org/index/issue/archive" class="header-dropdown-item" role="menuitem">Archive</a>
        </div>
      </div>

      <a href="https://cantrik.org/index/about" class="header-nav-link">About</a>

            <div class="header-dropdown">
        <button
          type="button"
          class="header-dropdown-btn"
          id="btn-publish"
          onclick="toggleHeaderDropdown('publish')"
          aria-expanded="false"
          aria-haspopup="true"
        >
          Publish
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div class="header-dropdown-menu" id="publish-menu" role="menu">
          <a href="https://cantrik.org/index/submission" class="header-dropdown-item" role="menuitem">Create Submission</a>
          <a href="https://cantrik.org/index/about/editorialPolicies" class="header-dropdown-item" role="menuitem">Article Processing Charge</a>
          <a href="https://cantrik.org/index/about/openAccess" class="header-dropdown-item" role="menuitem">Open Access Policy</a>
        </div>
      </div>

    </nav>

        <div class="header-nav-right">

            <div class="header-search-box">
        <form method="post" action="https://cantrik.org/index/search">
          <input type="text" name="keywords" placeholder="Search articles…" aria-label="Search articles" />
        </form>
      </div>

            <div class="header-auth-buttons">
        <button
          type="button"
          class="header-auth-icon"
          title="Login"
          onclick="window.location.href='https://cantrik.org/index/login'"
          aria-label="Login"
        >👤</button>
        <button
          type="button"
          class="header-auth-icon"
          title="Register"
          onclick="window.location.href='https://cantrik.org/index/user/register'"
          aria-label="Register"
        >➕</button>
      </div>

            <button
        type="button"
        class="header-mobile-toggle"
        id="mobileToggleBtn"
        onclick="toggleHeaderMobileMenu()"
        aria-label="Toggle navigation menu"
        aria-expanded="false"
        aria-controls="headerMobileNav"
      >
        <svg id="mobileIconOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="6"  x2="21" y2="6"/>
          <line x1="3" y1="12" x2="21" y2="12"/>
          <line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
        <svg id="mobileIconClose" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
          <line x1="18" y1="6"  x2="6"  y2="18"/>
          <line x1="6"  y1="6"  x2="18" y2="18"/>
        </svg>
      </button>

    </div>
  </div>
    <nav class="header-nav-mobile" id="headerMobileNav" aria-label="Mobile navigation">

        <div class="mobile-search-form">
      <form method="post" action="https://cantrik.org/index/search">
        <input type="text" name="keywords" placeholder="Search articles…" aria-label="Search articles" />
      </form>
    </div>

    <div class="mobile-nav-divider"></div>

    <a href="https://cantrik.org/index/index">Home</a>
    <a href="https://cantrik.org/index/issue/current">Current Issue</a>
    <a href="https://cantrik.org/index/issue/archive">Archive</a>
    <a href="https://cantrik.org/index/about">About</a>

    <div class="mobile-nav-divider"></div>

        <a href="https://cantrik.org/index/submission">Create Submission</a>
    <a href="https://cantrik.org/index/about/editorialPolicies" class="sub-link">Article Processing Charge</a>
    <a href="https://cantrik.org/index/about/openAccess" class="sub-link">Open Access Policy</a>

    <div class="mobile-nav-divider"></div>

    <a href="https://cantrik.org/index/login">Login</a>
    <a href="https://cantrik.org/index/user/register">Register</a>

  </nav>

</header>

<script>
(function() {
  'use strict';

  /* ─── Scroll Effect ─────────────────────────────────── */
  var navbar = document.getElementById('headerNavbar');

  window.addEventListener('scroll', function() {
    if (!navbar) return;
    if (window.pageYOffset > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  }, { passive: true });

  /* ─── Desktop Dropdown ──────────────────────────────── */
  function toggleHeaderDropdown(id) {
    var menu   = document.getElementById(id + '-menu');
    var btn    = document.getElementById('btn-' + id);
    if (!menu) return;

    var isOpen = menu.classList.toggle('visible');
    if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  }

  // Close when clicking outside
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.header-dropdown')) {
      document.querySelectorAll('.header-dropdown-menu').forEach(function(menu) {
        menu.classList.remove('visible');
      });
      document.querySelectorAll('.header-dropdown-btn').forEach(function(btn) {
        btn.setAttribute('aria-expanded', 'false');
      });
    }
  });

  // Expose for inline onclick
  window.toggleHeaderDropdown = toggleHeaderDropdown;

  /* ─── Mobile Menu ───────────────────────────────────── */
  function toggleHeaderMobileMenu() {
    var nav      = document.getElementById('headerMobileNav');
    var iconOpen = document.getElementById('mobileIconOpen');
    var iconClose= document.getElementById('mobileIconClose');
    var btn      = document.getElementById('mobileToggleBtn');
    if (!nav) return;

    var isOpen = nav.classList.toggle('open');
    iconOpen.style.display  = isOpen ? 'none'  : '';
    iconClose.style.display = isOpen ? ''      : 'none';
    if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  }

  window.toggleHeaderMobileMenu = toggleHeaderMobileMenu;

  // Close mobile menu on resize to desktop
  window.addEventListener('resize', function() {
    if (window.innerWidth >= 768) {
      var nav = document.getElementById('headerMobileNav');
      if (nav && nav.classList.contains('open')) {
        nav.classList.remove('open');
        var iconOpen  = document.getElementById('mobileIconOpen');
        var iconClose = document.getElementById('mobileIconClose');
        var btn       = document.getElementById('mobileToggleBtn');
        if (iconOpen)  iconOpen.style.display  = '';
        if (iconClose) iconClose.style.display = 'none';
        if (btn)       btn.setAttribute('aria-expanded', 'false');
      }
    }
  }, { passive: true });

})();
</script>
<div class="cl-search-page">
<style>
  /* ═══════════════════════════════════════════════════════════
     CANTRIK SEARCH PAGE — DESIGN SYSTEM
     ═══════════════════════════════════════════════════════════ */
     
    html,
    body {
      margin: 0;
      padding: 0;
    }
    
    body.cl-search-page-body {
      margin: 0 !important;
      padding: 0 !important;
    }
    
    body.cl-search-page-body .pkp_structure_page,
    body.cl-search-page-body .pkp_structure_content,
    body.cl-search-page-body .pkp_structure_main,
    body.cl-search-page-body .page,
    body.cl-search-page-body .page_search {
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    
    body.cl-search-page-body .cl-search-page,
    body.cl-search-page-body .cl-footer {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow-x: hidden;
    }
    
    body.cl-search-page-body .cl-search-hero {
      margin: 0;
      width: 190%;
    }     
     
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

  :root {
    --c-primary: #7B45F0;
    --c-primary-light: #A981FF;
    --c-primary-dark: #491AB1;
    --c-accent: #B796FE;
    --c-accent-hover: #7D6BAA;
    --c-foreground: #4A4458;
    --c-muted: #7C7088;
    --c-border: #E8E4F0;
    --c-card: #ffffff;
    --c-bg: #F9F8FB;
    --c-footer-bg: #34117E;
    --c-white: #ffffff;
    --radius: 0.75rem;
    --shadow-sm: 0 1px 3px rgba(139, 127, 184, 0.12);
    --shadow-md: 0 4px 12px rgba(139, 127, 184, 0.15);
    --shadow-lg: 0 18px 44px rgba(73, 26, 177, 0.16);
  }

  .page_search,
  .cl-search-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--c-foreground);
    background:
      radial-gradient(circle at 12% 8%, rgba(169,129,255,.16) 0, transparent 28%),
      radial-gradient(circle at 88% 12%, rgba(123,69,240,.12) 0, transparent 30%),
      linear-gradient(180deg, #F9F8FB 0%, #FFFFFF 42%, #F9F8FB 100%);
    min-height: 100vh;
  }

  .cl-search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }

  @media (min-width: 1024px) {
    .cl-search-container { padding: 0 32px; }
  }

  /* ═══════════════════════════════════════════════════════════
     SEARCH HERO
     ═══════════════════════════════════════════════════════════ */
  .cl-search-hero {
    position: relative;
    margin-top: 55px;
    overflow: hidden;
    background: linear-gradient(135deg, #A981FF 0%, #7B45F0 48%, #491AB1 100%);
    padding: 58px 0 62px;
  }

  .cl-search-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.13) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 28px 28px, 84px 84px, 84px 84px;
    opacity: .65;
    pointer-events: none;
  }

  .cl-search-hero::after {
    content: '';
    position: absolute;
    width: 560px;
    height: 560px;
    right: -180px;
    top: -220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.24) 0%, rgba(255,255,255,.04) 48%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
  }

  .cl-search-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
  }

  .cl-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }

  .cl-search-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.18);
  }

  .cl-search-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0 0 16px;
  }

  .cl-search-hero p {
    max-width: 680px;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
  }

  /* ═══════════════════════════════════════════════════════════
     SEARCH CARD
     ═══════════════════════════════════════════════════════════ */
  .cl-search-shell {
    position: relative;
    z-index: 2;
    margin-top: -36px;
    padding-bottom: 76px;
  }

  .cl-search-panel {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(232,228,240,.9);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    backdrop-filter: blur(12px);
  }

  .cl-search-mainbar {
    padding: 18px;
  }

  @media (min-width: 768px) {
    .cl-search-mainbar { padding: 24px; }
  }

  .cl-search-input-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 768px) {
    .cl-search-input-row {
      grid-template-columns: 1fr auto;
      align-items: stretch;
    }
  }

  .cl-search-input-wrap {
    position: relative;
  }

  .cl-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--c-primary);
    opacity: .72;
    pointer-events: none;
  }

  .cl-search-main-input {
    width: 100%;
    min-height: 58px;
    padding: 16px 18px 16px 52px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    color: var(--c-foreground);
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.8);
    transition: border-color .22s ease, box-shadow .22s ease;
  }

  .cl-search-main-input::placeholder {
    color: #9B8FAA;
    font-weight: 400;
  }

  .cl-search-main-input:focus {
    border-color: rgba(123,69,240,.65);
    box-shadow:
      0 0 0 4px rgba(123,69,240,.11),
      0 12px 28px rgba(73,26,177,.08);
  }

  .cl-search-submit {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 48%, var(--c-primary-dark) 100%);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(123,69,240,.28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }

  .cl-search-submit:hover,
  .cl-search-submit:focus {
    transform: translateY(-1px);
    filter: saturate(1.06);
    box-shadow: 0 16px 34px rgba(123,69,240,.34);
  }

  .cl-search-submit svg {
    width: 18px;
    height: 18px;
  }

  .cl-search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
  }

  .cl-search-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-primary-dark);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }

  .cl-search-filter-toggle:hover {
    border-color: rgba(123,69,240,.35);
    background: rgba(123,69,240,.06);
  }

  .cl-search-filter-toggle svg {
    width: 15px;
    height: 15px;
  }

  .cl-search-helper {
    color: var(--c-muted);
    font-size: 13px;
  }

  .cl-search-helper strong {
    color: var(--c-primary-dark);
  }

  /* ═══════════════════════════════════════════════════════════
     ADVANCED FILTERS
     ═══════════════════════════════════════════════════════════ */
  .cl-search-advanced {
    border: 0;
    margin: 0;
    padding: 0 24px 24px;
    display: none;
  }

  .cl-search-advanced.is-open {
    display: block;
  }

  .cl-search-advanced-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--c-border);
    background:
      linear-gradient(180deg, rgba(249,248,251,.96), rgba(255,255,255,.98));
  }

  @media (min-width: 860px) {
    .cl-search-advanced-inner {
      grid-template-columns: 1fr 1fr 1fr;
      align-items: end;
    }
  }

  .cl-search-advanced legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cl-filter-group {
    min-width: 0;
  }

  .cl-filter-label {
    display: block;
    margin-bottom: 8px;
    color: var(--c-foreground);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .cl-filter-hint {
    display: block;
    margin-top: 6px;
    color: var(--c-muted);
    font-size: 12px;
  }

  .cl-search-advanced input[type="text"],
  .cl-search-advanced select {
    height: 42px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    color: var(--c-foreground);
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .cl-search-advanced input[type="text"] {
    width: 100%;
    padding: 9px 12px;
  }

  .cl-search-advanced select {
    padding: 8px 10px;
    margin: 0 6px 6px 0;
  }

  .cl-search-advanced input[type="text"]:focus,
  .cl-search-advanced select:focus {
    border-color: rgba(123,69,240,.6);
    box-shadow: 0 0 0 3px rgba(123,69,240,.1);
  }

  .cl-search-advanced .form-inline,
  .cl-search-advanced .form-group,
  .cl-search-advanced .row,
  .cl-search-advanced [class*="col-"] {
    margin: 0;
    padding: 0;
  }

  .cl-search-hooks {
    margin-top: 14px;
  }

  /* ═══════════════════════════════════════════════════════════
     ACTIVE FILTER CHIPS
     ═══════════════════════════════════════════════════════════ */
  .cl-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 22px;
  }

  .cl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(123,69,240,.08);
    border: 1px solid rgba(123,69,240,.16);
    color: var(--c-primary-dark);
    font-size: 12px;
    font-weight: 700;
  }

  .cl-filter-chip span {
    color: var(--c-muted);
    font-weight: 600;
  }

  /* ═══════════════════════════════════════════════════════════
     RESULTS
     ═══════════════════════════════════════════════════════════ */
  .cl-results-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }

  @media (min-width: 1024px) {
    .cl-results-layout {
      grid-template-columns: minmax(0, 1fr) 300px;
      align-items: start;
    }
  }

  .cl-results-card,
  .cl-search-aside-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
  }

  .cl-results-card {
    overflow: hidden;
  }

  .cl-results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--c-border);
    background:
      linear-gradient(180deg, rgba(255,255,255,1), rgba(249,248,251,.72));
  }

  .cl-results-title-group h2 {
    margin: 0 0 4px;
    color: var(--c-primary);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .cl-results-title-group p {
    margin: 0;
    color: var(--c-muted);
    font-size: 13px;
  }

  .cl-results-anchor {
    scroll-margin-top: 110px;
  }

  .cl-results-list {
    padding: 0 24px 6px;
  }

  /* OJS article_summary.tpl compatibility */
  .cl-results-list .obj_article_summary {
    position: relative;
    margin: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--c-border);
  }

  .cl-results-list .obj_article_summary:last-child {
    border-bottom: 0;
  }

  .cl-results-list .obj_article_summary .title,
  .cl-results-list .obj_article_summary .title a {
    color: var(--c-foreground);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
  }

  .cl-results-list .obj_article_summary .title a:hover {
    color: var(--c-primary);
  }

  .cl-results-list .obj_article_summary .authors,
  .cl-results-list .obj_article_summary .meta,
  .cl-results-list .obj_article_summary .pages,
  .cl-results-list .obj_article_summary .published,
  .cl-results-list .obj_article_summary .subtitle {
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.65;
  }

  .cl-results-list .obj_article_summary .authors {
    margin-top: 8px;
  }

  .cl-results-list .obj_article_summary .meta {
    margin-top: 10px;
  }

  .cl-results-list .obj_article_summary .galleys_links,
  .cl-results-list .obj_article_summary .btn {
    margin-top: 10px;
  }

  .cl-results-list .obj_article_summary .btn,
  .cl-results-list .obj_article_summary .galley-link {
    border-radius: 999px;
    border: 1px solid rgba(123,69,240,.22);
    background: rgba(123,69,240,.07);
    color: var(--c-primary-dark);
    font-size: 12px;
    font-weight: 800;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }

  .cl-results-list .obj_article_summary .btn:hover,
  .cl-results-list .obj_article_summary .galley-link:hover {
    border-color: rgba(123,69,240,.42);
    background: rgba(123,69,240,.12);
    color: var(--c-primary);
  }

  .cl-no-results {
    padding: 28px 24px 34px;
  }

  .cl-no-results-box {
    display: grid;
    gap: 12px;
    place-items: center;
    text-align: center;
    padding: 36px 22px;
    border: 1px dashed rgba(123,69,240,.28);
    border-radius: 18px;
    background: rgba(123,69,240,.04);
  }

  .cl-no-results-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--c-primary);
    background: rgba(123,69,240,.1);
  }

  .cl-no-results-icon svg {
    width: 24px;
    height: 24px;
  }

  .cl-no-results-box h3 {
    margin: 0;
    color: var(--c-foreground);
    font-size: 18px;
    font-weight: 800;
  }

  .cl-no-results-box p {
    max-width: 520px;
    margin: 0;
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.7;
  }

  /* Pagination */
  .cl-search-pagination {
    padding: 22px 24px 24px;
    border-top: 1px solid var(--c-border);
    background: rgba(249,248,251,.66);
  }

  .cl-search-pagination .cmp_pagination {
    margin: 0;
    color: var(--c-muted);
    font-size: 13px;
  }

  .cl-search-pagination a {
    color: var(--c-primary);
    font-weight: 700;
  }

  /* Aside */
  .cl-search-aside {
    display: none;
  }

  @media (min-width: 1024px) {
    .cl-search-aside {
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: sticky;
      top: 96px;
    }
  }

  .cl-search-aside-card {
    padding: 22px;
  }

  .cl-search-aside-card h3 {
    margin: 0 0 12px;
    color: var(--c-foreground);
    font-size: 16px;
    font-weight: 800;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
  }

  .cl-search-tips {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cl-search-tips li {
    color: var(--c-muted);
    font-size: 13px;
    line-height: 1.65;
  }

  .cl-search-tips strong {
    color: var(--c-primary-dark);
  }

  .cl-discipline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cl-discipline-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 700;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }

  .cl-discipline-list a:hover {
    color: var(--c-primary);
    border-color: rgba(123,69,240,.28);
    background: rgba(123,69,240,.06);
  }

  /* Native/OJS fallback cleanup */
  .cl-search-page .page-header {
    display: none;
  }

  .cl-search-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .cl-search-page fieldset {
    min-width: 0;
  }

  .cl-search-page button,
  .cl-search-page input,
  .cl-search-page select {
    font-family: inherit;
  }

  @media (max-width: 767px) {
    .cl-search-hero {
      padding: 42px 0 54px;
    }

    .cl-search-shell {
      margin-top: -28px;
      padding-bottom: 52px;
    }

    .cl-search-panel,
    .cl-results-card,
    .cl-search-aside-card {
      border-radius: 18px;
    }

    .cl-search-submit {
      width: 100%;
    }

    .cl-search-advanced {
      padding: 0 18px 20px;
    }

    .cl-search-advanced-inner {
      padding: 18px;
    }

    .cl-results-header,
    .cl-results-list,
    .cl-no-results,
    .cl-search-pagination {
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cl-search-main-input,
    .cl-search-submit,
    .cl-search-filter-toggle,
    .cl-discipline-list a,
    .cl-results-list .obj_article_summary .title a {
      transition: none !important;
    }
  }
</style>

<div id="main-content" class="page page_search cl-search-page">

    <section class="cl-search-hero" aria-labelledby="clSearchTitle">
    <div class="cl-search-container">
      <div class="cl-search-hero-inner">
        <div class="cl-search-eyebrow">
          <span class="cl-search-eyebrow-dot"></span>
          <span>Cantrik Discovery</span>
        </div>
        <h1 id="clSearchTitle">Search</h1>
        <p>
          Temukan artikel, penulis, dan publikasi ilmiah lintas jurnal Cantrik Publisher
          melalui sistem pencarian yang lebih terarah, bersih, dan mudah digunakan.
        </p>
      </div>
    </div>
  </section>

  <div class="cl-search-container cl-search-shell">

        <form method="post" id="search-form" class="search-form cl-search-form" action="https://cantrik.org/index/search/search" role="search">
      <input type="hidden" name="csrfToken" value="1184b600e7638fcbf814312d385064ea">

      <section class="cl-search-panel" aria-label="Search">
        <div class="cl-search-mainbar">
          <label class="sr-only" for="query">
            Search articles for
          </label>

          <div class="cl-search-input-row">
            <div class="cl-search-input-wrap">
              <svg class="cl-search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <circle cx="11" cy="11" r="7" stroke-width="2"/>
                <path d="M20 20l-3.8-3.8" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <input
                type="search"
                id="query"
                name="query"
                value="education"
                class="query form-control cl-search-main-input"
                placeholder="Search articles, authors, keywords..."
                autocomplete="off"
              >
            </div>

            <button type="submit" class="cl-search-submit">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path d="M5 12h14" stroke-width="2.3" stroke-linecap="round"/>
                <path d="M13 6l6 6-6 6" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>Search</span>
            </button>
          </div>

          <div class="cl-search-tools">
            <button
              class="cl-search-filter-toggle"
              type="button"
              id="clSearchFilterToggle"
              aria-expanded="false"
              aria-controls="clSearchAdvanced"
            >
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path d="M4 6h16M7 12h10M10 18h4" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <span>Advanced filters</span>
            </button>

            <div class="cl-search-helper">
              Gunakan kata kunci spesifik untuk hasil yang lebih relevan.
            </div>
          </div>
        </div>

        <fieldset id="clSearchAdvanced" class="search-advanced cl-search-advanced ">
          <legend>Advanced filters</legend>

          <div class="cl-search-advanced-inner">
            <div class="cl-filter-group">
              <label class="cl-filter-label" for="dateFromYear">
                Published After
              </label>
              <div class="form-inline">
                <div class="form-group">
                  <select name="dateFromYear">
<option value=""></option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<select name="dateFromMonth">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dateFromDay">
<option value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
                </div>
              </div>
              <span class="cl-filter-hint">Batasi hasil yang terbit setelah tanggal tertentu.</span>
            </div>

            <div class="cl-filter-group">
              <label class="cl-filter-label" for="dateToYear">
                Published Before
              </label>
              <div class="form-inline">
                <div class="form-group">
                  <select name="dateToYear">
<option value=""></option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<select name="dateToMonth">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dateToDay">
<option value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
                </div>
              </div>
              <span class="cl-filter-hint">Batasi hasil yang terbit sebelum tanggal tertentu.</span>
            </div>

            <div class="cl-filter-group">
              <label class="cl-filter-label" for="authors">
                By Author
              </label>
              <input
                class="form-control"
                type="text"
                id="authors"
                name="authors"
                value=""
                placeholder="Author name"
              >
              <span class="cl-filter-hint">Cari berdasarkan nama penulis.</span>
            </div>
          </div>

          <div class="cl-search-hooks">
            
          </div>
        </fieldset>

                  <div class="cl-active-filters" aria-label="Active search filters">
                          <div class="cl-filter-chip">
                <span>Keyword</span>
                education
              </div>
                                  </div>
              </section>

      

      <div class="cl-results-layout">
        <main class="cl-results-card cl-results-anchor" id="results" aria-labelledby="clResultsTitle">
          <div class="cl-results-header">
            <div class="cl-results-title-group">
              <h2 id="clResultsTitle">Search Results</h2>
              <p>
                                  Menampilkan hasil pencarian untuk kata kunci “education”.
                              </p>
            </div>
          </div>

                                <div class="cl-results-list">
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/decol/article/view/5">
				Unfinished decolonization of Islamic education in Indonesia: The case of Muhammadiyah
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Dwi Prasetyanti (Author)
						</div>
									</div>
			
										<p class="pages">
					79-90
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/11">
				Volcanic eruption disaster management education for children in Dusun Babadan, Polengan, Magelang
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Nawang Eza Anggraeni (Author)
						</div>
									</div>
			
										<p class="pages">
					11-24
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/2">
				Strengthening social capacity, health, and village governance through the Asset-Based Community Development Approach
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Muhammad Usamah, Sadani, Iman Siyatur Rasyidah, Fahmi Hilmawan, Sayyidah Malthuvah, Yundzira Maulidania Bachtiar, Lailatul Fajriyah , Naufal Rafif Afifi, Wida Yaska Andika Yusuf, Rita Fitriani (Author)
						</div>
									</div>
			
										<p class="pages">
					25-38
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/18">
				Youth Empowerment in Gowok Hamlet through Mural Art Mentoring to Enhance Children’s Learning Motivation at TPQ
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Vicky Alifan Pratama (Author)
						</div>
									</div>
			
						
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/4">
				Guidance on learning historical values in the film Battle of Surabaya for children in Dusun Gowok
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Vindi Raningrum (Author)
						</div>
									</div>
			
										<p class="pages">
					1-10
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/26">
				Mentoring and Training in Independent Learning for Children in Dusun Babadan, Polengan, Magelang
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Fatika Dea Amalia (Author)
						</div>
									</div>
			
										<p class="pages">
					1-12
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/decol/article/view/38">
				Decolonizing the digital page: Algorithmic hegemony and the erasure of local perspectives in postcolonial literature
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Fitriya Dessi Wulandari (Author)
						</div>
									</div>
			
										<p class="pages">
					37-56
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/36">
				Presenting a Tri Hita Karana-based empowerment approach for managing sustainable tourism villages
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							A Zahid (Author)
						</div>
									</div>
			
										<p class="pages">
					57-72
				</p>
			
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/6">
				Learning the History of Indonesian Heroes through Coloring Training with Children in Dusun Gowok
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Rida Riskinanti (Author)
						</div>
									</div>
			
						
		
			</div>

	
</div><!-- .article-summary -->
                              	
<div class="article-summary media">
	
	<div class="media-body">
		<h3 class="media-heading">
            <a href="https://cantrik.org/mangun/article/view/17">
				Development of Hijuno Card Media to Improve TPQ Children’s Ability to Memorize Hijaiyah Letters in Dusun Gowok
							</a>
		</h3>

		
							<div class="meta">
											<div class="authors">
							Nur Isnaeni Mardliyah (Author)
						</div>
									</div>
			
						
		
			</div>

	
</div><!-- .article-summary -->
                          </div>

            <div class="cl-search-pagination">
              <div class="cmp_pagination">
                1 - 10 of 10 items
                
              </div>
            </div>
                  </main>

        <aside class="cl-search-aside" aria-label="Search guidance">
          <div class="cl-search-aside-card">
            <h3>Search Tips</h3>
            <ul class="cl-search-tips">
              <li><strong>Keyword:</strong> gunakan istilah utama dari topik penelitian.</li>
              <li><strong>Author:</strong> isi nama penulis pada filter lanjutan untuk hasil yang lebih spesifik.</li>
              <li><strong>Date:</strong> gunakan rentang tanggal untuk membatasi publikasi berdasarkan tahun terbit.</li>
            </ul>
          </div>

          <div class="cl-search-aside-card">
            <h3>Browse Discipline</h3>
            <div class="cl-discipline-list">
              <a href="https://cantrik.org/index/search/search?query=education">🎓 Education</a>
              <a href="https://cantrik.org/index/search/search?query=psychology">🧠 Psychology</a>
              <a href="https://cantrik.org/index/search/search?query=social">🌏 Social Science</a>
              <a href="https://cantrik.org/index/search/search?query=technology">⚙️ Technology</a>
              <a href="https://cantrik.org/index/search/search?query=arts%20culture">🎨 Arts &amp; Culture</a>
              <a href="https://cantrik.org/index/search/search?query=decolonial">🌿 Decolonial</a>
            </div>
          </div>
        </aside>
      </div>
    </form>
  </div>
</div>

<script>
(function () {
  'use strict';

  function initCantrikSearchPage() {
    var toggle = document.getElementById('clSearchFilterToggle');
    var advanced = document.getElementById('clSearchAdvanced');

    if (!toggle || !advanced) return;

    toggle.addEventListener('click', function () {
      var isOpen = advanced.classList.toggle('is-open');
      toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCantrikSearchPage);
  } else {
    initCantrikSearchPage();
  }
})();
</script>
</div>

<style>
  /* ═════════════════════════════════════════════════════
     CANTRIK JOURNAL FOOTER — CUSTOM PAGES NAVIGATION
     ═════════════════════════════════════════════════════ */

  .jrn-footer,
  .jrn-footer *,
  .jrn-footer *::before,
  .jrn-footer *::after {
    box-sizing: border-box;
  }

  .jrn-footer {
    --jf-bg: #34117E;
    --jf-bg-deep: #24105f;
    --jf-bg-bottom: #25163e;
    --jf-card: rgba(255,255,255,0.055);
    --jf-card-border: rgba(255,255,255,0.11);
    --jf-text: #C9C1DF;
    --jf-muted: #9B93B5;
    --jf-soft: #B0A8CC;
    --jf-title: #ffffff;
    --jf-accent: #B4A7D6;
    --jf-accent-2: #D4CEEB;

    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 8% 0%, rgba(180,167,214,0.18), transparent 30%),
      radial-gradient(circle at 88% 18%, rgba(123,69,240,0.20), transparent 34%),
      linear-gradient(145deg, var(--jf-bg) 0%, var(--jf-bg-deep) 100%);
    color: var(--jf-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
  }

  .jrn-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .45;
    pointer-events: none;
  }

  .jrn-footer a {
    color: inherit;
    text-decoration: none;
  }

  .jrn-footer-top,
  .jrn-footer-bottom {
    position: relative;
    z-index: 1;
  }

  /* Top band */
  .jrn-footer-top {
    padding: 54px 0 44px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .jrn-footer-grid {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  @media (min-width: 680px) {
    .jrn-footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 38px;
    }
  }

  @media (min-width: 1100px) {
    .jrn-footer-grid {
      grid-template-columns: 1.45fr .95fr 1.05fr .95fr 1.15fr;
      gap: 0 34px;
      align-items: start;
    }
  }

  /* Column title */
  .jrn-footer-col-title {
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--jf-accent-2);
    border-bottom: 1px solid rgba(255,255,255,0.11);
  }

  .jrn-footer-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--jf-accent-2), transparent);
  }

  /* Brand column */
  .jrn-footer-brand {
    max-width: 340px;
  }

  .jrn-footer-brand-name {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.28;
    font-weight: 800;
    color: var(--jf-title);
    letter-spacing: -0.01em;
  }

  .jrn-footer-brand-issn {
    min-height: 16px;
    margin-bottom: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.50);
    letter-spacing: .25px;
  }

  .jrn-footer-brand-desc {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 16px;
    color: rgba(255,255,255,0.60);
    font-size: 13px;
    line-height: 1.68;
    text-align: left;
  }

  .jrn-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .jrn-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(212,206,235,0.26);
    border-radius: 999px;
    background: rgba(255,255,255,0.065);
    color: rgba(255,255,255,0.76);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .48px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .jrn-footer-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--jf-accent-2);
    box-shadow: 0 0 10px rgba(212,206,235,.55);
  }

  /* Link lists */
  .jrn-footer-links,
  .jrn-footer-ext-links,
  .jrn-footer-policy-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .jrn-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .jrn-footer-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: var(--jf-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.42;
    transition:
      color .18s ease,
      transform .18s ease;
  }

  .jrn-footer-links a::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-top: 1.5px solid rgba(212,206,235,0.62);
    border-right: 1.5px solid rgba(212,206,235,0.62);
    transform: rotate(45deg);
    transition:
      border-color .18s ease,
      transform .18s ease;
  }

  .jrn-footer-links a:hover {
    color: #ffffff;
    transform: translateX(2px);
  }

  .jrn-footer-links a:hover::before {
    border-color: #ffffff;
    transform: rotate(45deg) translate(1px, -1px);
  }

  .jrn-footer-links .jrn-footer-link-muted a {
    color: rgba(255,255,255,0.48);
  }

  .jrn-footer-links .jrn-footer-link-muted a:hover {
    color: rgba(255,255,255,0.86);
  }

  /* Publisher card */
  .jrn-footer-publisher {
    padding: 16px;
    border: 1px solid var(--jf-card-border);
    border-radius: 18px;
    background: var(--jf-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .jrn-footer-publisher-logo {
    width: 210px;
    max-width: 100%;
    margin-bottom: 10px;
  }

  .jrn-footer-publisher-logo img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .jrn-footer-publisher p {
    margin: 0;
    color: rgba(255,255,255,0.58);
    font-size: 12px;
    line-height: 1.62;
  }

  .jrn-footer-publisher a {
    color: var(--jf-accent-2);
    font-weight: 600;
    transition: color .18s ease;
  }

  .jrn-footer-publisher a:hover {
    color: #ffffff;
  }

  .jrn-footer-publisher-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.10);
    margin: 15px 0;
  }

  .jrn-footer-ext-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .jrn-footer-ext-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jf-soft);
    font-size: 13px;
    transition: color .18s ease, transform .18s ease;
  }

  .jrn-footer-ext-links a:hover {
    color: #ffffff;
    transform: translateX(2px);
  }

  .jrn-footer-ext-links a::before {
    content: '↗';
    color: rgba(212,206,235,0.64);
    font-size: 12px;
  }

  /* Bottom bar */
  .jrn-footer-bottom {
    padding: 18px 0;
    background: rgba(19,7,47,0.48);
  }

  .jrn-footer-bottom-inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
    text-align: center;
  }

  @media (min-width: 980px) {
    .jrn-footer-bottom-inner {
      grid-template-columns: 1fr auto 1fr;
      text-align: left;
    }

    .jrn-footer-powered {
      justify-self: end;
    }
  }

  .jrn-footer-copyright {
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    line-height: 1.48;
  }

  .jrn-footer-copyright strong {
    color: rgba(255,255,255,0.72);
  }

  .jrn-footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
  }

  .jrn-footer-policy-links a {
    color: rgba(255,255,255,0.44);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .18s ease;
  }

  .jrn-footer-policy-links a:hover {
    color: rgba(255,255,255,0.84);
  }

  .jrn-footer-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.38);
    font-size: 12px;
  }

  .jrn-footer-powered a {
    color: rgba(255,255,255,0.60);
    font-weight: 600;
    transition: color .18s ease;
  }

  .jrn-footer-powered a:hover {
    color: #ffffff;
  }

  .jrn-footer-powered-dot {
    opacity: .35;
  }

  @media (max-width: 679px) {
    .jrn-footer-top {
      padding: 42px 0 34px;
    }

    .jrn-footer-grid,
    .jrn-footer-bottom-inner {
      width: min(100% - 36px, 1240px);
    }

    .jrn-footer-brand {
      max-width: none;
    }
  }
</style>

<footer class="jrn-footer" role="contentinfo">

    <div class="jrn-footer-top">
    <div class="jrn-footer-grid">

            <div class="jrn-footer-brand">
        <div class="jrn-footer-brand-name">
          Journal        </div>

        <div class="jrn-footer-brand-issn">
                            </div>

        
        <div class="jrn-footer-badges" aria-label="Journal publishing model">
          <span class="jrn-footer-badge">Open Access</span>
          <span class="jrn-footer-badge">Peer Reviewed</span>
        </div>
      </div>

            <nav aria-label="Journal profile links">
        <h3 class="jrn-footer-col-title">Journal Profile</h3>
        <ul class="jrn-footer-links">
          <li>
            <a href="https://cantrik.org/index/aims-and-scope">Aims &amp; Scope</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/mission-and-vision-statements">Mission &amp; Vision</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/reviewers">Reviewers</a>
          </li>
        </ul>
      </nav>

            <nav aria-label="Journal policies and ethics links">
        <h3 class="jrn-footer-col-title">Policies &amp; Ethics</h3>
        <ul class="jrn-footer-links">
          <li>
            <a href="https://cantrik.org/index/publication-ethics">Publication Ethics</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/peer-review-policy">Peer Review Policy</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/peer-review-process">Peer Review Process</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/screening-for-plagiarism-policy">Screening for Plagiarism</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/open-access-policy">Open Access Policy</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/copyright-notice">Copyright Notice</a>
          </li>
        </ul>
      </nav>

            <nav aria-label="Author resources links">
        <h3 class="jrn-footer-col-title">For Authors</h3>
        <ul class="jrn-footer-links">
        <li>
            <a href="https://cantrik.org/index/submission-process">Submission Process</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/author-guidelines">Author Guidelines</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/manuscript-template">Manuscript Template</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/call-for-papers">Call for Papers</a>
          </li>
          <li>
            <a href="https://cantrik.org/index/author-fee">Author Fee</a>
          </li>
          <li class="jrn-footer-link-muted">
            <a href="https://cantrik.org/index/about/submissions">Online Submission</a>
          </li>
        </ul>
      </nav>

            <div>
        <h3 class="jrn-footer-col-title">Publisher</h3>
        <div class="jrn-footer-publisher">
          <div class="jrn-footer-publisher-logo">
            <img src="https://cantrik.org/plugins/themes/bootstrap3/images/logo-buana_cantrik_akademia_foundation.png" alt="Buana Cantrik Akademia Foundation">
          </div>

          <p>
            Buana Cantrik Akademia Foundation<br>
            Jl. Yudistiro No.42, Gentan, Sinduharjo, Kec. Ngaglik, Kabupaten Sleman, Daerah Istimewa Yogyakarta 55581<br>
            <a href="mailto:info@cantrik.org">info@cantrik.org</a>
          </p>

          <hr class="jrn-footer-publisher-divider">

          <ul class="jrn-footer-ext-links" aria-label="Publisher links">
            <li>
              <a href="https://cantrik.org/index/about/contact">Editorial Contact</a>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>

    <div class="jrn-footer-bottom">
    <div class="jrn-footer-bottom-inner">

      <div class="jrn-footer-copyright">
        <strong>&copy; 2026</strong>
                All rights reserved.
      </div>

      <nav class="jrn-footer-policy-links" aria-label="Footer policy links">
        <a href="https://cantrik.org/index/publication-ethics">Ethics</a>
        <a href="https://cantrik.org/index/screening-for-plagiarism-policy">Plagiarism</a>
        <a href="https://cantrik.org/index/open-access-policy">Open Access</a>
        <a href="https://cantrik.org/index/copyright-notice">Copyright</a>
      </nav>

      <div class="jrn-footer-powered">
        Powered by
        <a href="https://ojs.pkp.sfu.ca/" target="_blank" rel="noopener">OJS</a>
        <span class="jrn-footer-powered-dot">·</span>
        <a href="https://cantrik.org" target="_blank" rel="noopener">Cantrik</a>
      </div>

    </div>
  </div>

</footer>