/* ========================================================================
   J-HyTEL stylesheet
   v2.1.1 Feb 14 2024
   (c) 2024 Agariadne Dwinggo Samala <mail@agariadne@ft.unp.ac.id>
         
  
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <https://www.gnu.org/licenses/>.

   ------------------------------------------------------------------------
     
   Table of contents 

   1.......Typography
   2.......Global
   2.1.....Body
   2.2.....Header
   2.3.....Navbar
   2.4.....Footer
   3.......Styling
   3.1.....Buttons
   3.2.....Forms
   3.3.....Paragraphs
   3.4.....Tooltips
   3.5.....Page headers
   4.......Page-specific
   4.1.....Homepage
   4.1.1...Homepage issue
   4.1.2...Homepage table of contents
   4.1.3...Introduction
   4.1.4...Homepage announcements
   4.2.....Issue table of contents
   4.3.....Individual articles
   4.4.....All custom pages
   4.5.....Contact page
   4.6.....Submissions page
   4.7.....FAQ page
   4.8.....Search page
   4.9.....Editorial team
   4.10....Announcements
   4.11....Archives

   ======================================================================== */

  
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400&family=Lora:ital@0;1&display=swap');

/* 0. Slider */
/*
 * Professional article summary cards for OJS 3.3.0-13
 * Pair this stylesheet with the custom article_summary.tpl.
 */

/* =========================================================
   ARTICLE AUTHOR TOOLTIP — OJS 3.3

   - Warna dan hover nama author mengikuti CSS jurnal.
   - Tooltip mengikuti nama yang sedang di-hover pada desktop.
   - Tooltip responsif pada layar kecil.
   - Tidak menggunakan scrollbar.
   - Ikon menggunakan SVG/CSS internal tanpa server eksternal.
   ========================================================= */

/* ---------- Author list ---------- */

.article-author-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.article-author-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  min-width: 0;
}

.article-author-item {
  position: relative;
  display: inline-block;
}

/* Tidak mengatur color atau hover agar mengikuti tema jurnal. */
.article-author-name {
  font-weight: 700;
  font-size: 18px;
}

.article-author-item sup {
  margin-left: 2px;
  font-size: 0.7em;
}

.article-author-separator {
  margin-right: 2px;
}

/* ---------- Biography tooltip ---------- */

.article-author-tooltip {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;

  display: block;
  visibility: hidden;
  width: min(440px, calc(100vw - 32px));
  max-width: min(440px, calc(100vw - 32px));
  height: auto;
  max-height: none;
  padding: 18px 20px;
  overflow: visible;

  color: #fff;
  background: linear-gradient(145deg, #59174d 0%, #35122f 100%);
  border: 1px solid #a85fba;
  border-top: 3px solid #e311ff;
  border-radius: 12px;
  box-shadow:
    0 18px 40px rgba(53, 18, 47, 0.3),
    0 4px 12px rgba(53, 18, 47, 0.18);

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.52;
  text-align: left;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
}

/* Segitiga penunjuk ke nama author. */
.article-author-tooltip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #59174d;
  border-top: 1px solid #a85fba;
  border-left: 1px solid #a85fba;
  transform: translateX(-50%) rotate(45deg);
}

.article-author-item:hover .article-author-tooltip,
.article-author-item:focus-within .article-author-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Author pertama: tooltip tidak keluar dari sisi kiri. */
.article-author-item:first-child .article-author-tooltip {
  left: 0;
  transform: translate(0, -4px);
}

.article-author-item:first-child:hover .article-author-tooltip,
.article-author-item:first-child:focus-within .article-author-tooltip {
  transform: translate(0, 0);
}

.article-author-item:first-child .article-author-tooltip::before {
  left: 22px;
  transform: rotate(45deg);
}

/* Author terakhir: tooltip tidak keluar dari sisi kanan. */
.article-author-item:last-child .article-author-tooltip {
  right: 0;
  left: auto;
  transform: translate(0, -4px);
}

.article-author-item:last-child:hover .article-author-tooltip,
.article-author-item:last-child:focus-within .article-author-tooltip {
  transform: translate(0, 0);
}

.article-author-item:last-child .article-author-tooltip::before {
  right: 22px;
  left: auto;
  transform: rotate(45deg);
}

/* ---------- Tooltip content ---------- */

.article-author-tooltip-name,
.article-author-tooltip-affiliation,
.article-author-tooltip-bio,
.article-author-tooltip-empty,
.article-author-tooltip-hint {
  display: block;
}

.article-author-tooltip-name {
  margin-bottom: 5px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.article-author-tooltip-affiliation {
  margin-bottom: 8px;
  color: #ead9ef;
  font-size: 13.5px;
  line-height: 1.42;
}

.article-author-tooltip-country {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 13px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.author-country-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-author-tooltip-bio,
.article-author-tooltip-bio p,
.article-author-tooltip-empty {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.52;
}

.article-author-tooltip-bio p + p {
  margin-top: 7px;
}

.article-author-tooltip-empty {
  font-style: italic;
  opacity: 0.8;
}

.article-author-tooltip-bio a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-author-tooltip-hint {
  margin-top: 13px;
  padding-top: 10px;
  color: #dec6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
}

/* Tooltip tidak tertutup oleh artikel berikutnya. */
.article-summary:hover,
.article-summary:focus-within,
.obj_article_summary:hover,
.obj_article_summary:focus-within {
  position: relative;
  z-index: 100;
}

/* ---------- Lightweight internal icons ---------- */

.summary-inline-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  vertical-align: middle;
  fill: none;
  stroke: #610c3a;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.summary-author-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.summary-doi-badge,
.summary-pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 22px;
  margin-right: 5px;
  padding: 0 5px;
  vertical-align: middle;
  color: #fff;
  background: #610c3a;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Article summary card ---------- */

.article-summary {
  position: relative;
  margin: 0;
  padding: 22px 0 24px;
  border-bottom: 1px solid #b9a9b2;
  overflow: visible;
}

.article-summary-header {
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.article-summary .article-summary-title {
  margin: 0 0 8px;
  line-height: 1.35;
}

.article-summary .article-summary-date {
  margin-bottom: 8px;
  color: #725d69;
  font-size: 0.86rem;
}

.article-summary-body {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(220px, 1fr) minmax(140px, auto);
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.article-summary-cover-link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  overflow: hidden;
  border-radius: 8px;
  outline-offset: 4px;
}

.article-summary-cover-preview {
  position: relative;
  width: 100%;
  max-width: 220px;
}

.article-summary-cover-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 44 / 27;
  object-fit: cover;
  background: #f4f1f3;
  border: 1px solid #82717a;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(53, 18, 47, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.article-summary-cover-link:hover .article-summary-cover-image,
.article-summary-cover-link:focus .article-summary-cover-image {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(53, 18, 47, 0.16);
}

.article-summary-preview-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: #fff;
  background: rgba(53, 18, 47, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.article-summary-preview-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-summary-cover-preview:hover .article-summary-preview-label,
.article-summary-cover-preview:focus-within .article-summary-preview-label {
  opacity: 1;
  transform: translateY(0);
}

.article-summary-preview-window {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: calc(100% + 14px);
  display: grid;
  visibility: hidden;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  width: min(570px, calc(100vw - 48px));
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg, #59174d 0%, #35122f 100%);
  border: 1px solid #a85fba;
  border-top: 3px solid #e311ff;
  border-radius: 13px;
  box-shadow: 0 20px 45px rgba(53, 18, 47, 0.34), 0 5px 14px rgba(53, 18, 47, 0.2);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% - 4px));
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.article-summary-preview-window::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  background: #59174d;
  border-bottom: 1px solid #a85fba;
  border-left: 1px solid #a85fba;
  transform: translateY(-50%) rotate(45deg);
}

.article-summary-cover-preview:hover .article-summary-preview-window,
.article-summary-cover-preview:focus-within .article-summary-preview-window {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.article-summary-preview-image {
  display: block;
  width: 190px;
  height: 118px;
  object-fit: cover;
  align-self: start;
  background: #f4f1f3;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.article-summary-preview-content,
.article-summary-preview-title,
.article-summary-preview-heading,
.article-summary-preview-abstract,
.article-summary-preview-empty,
.article-summary-preview-hint {
  display: block;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
}

.article-summary-preview-content {
  min-width: 0;
}

.article-summary-preview-title {
  margin-bottom: 9px;
  color: #fff;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.3;
}

.article-summary-preview-heading {
  margin-bottom: 4px;
  color: #f4c9ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.article-summary-preview-abstract,
.article-summary-preview-empty {
  color: #fff;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.43;
}

.article-summary-preview-empty {
  font-style: italic;
  opacity: 0.8;
}

.article-summary-preview-hint {
  margin-top: 10px;
  padding-top: 8px;
  color: #dec6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
}

.article-summary-metrics {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #342b30;
  font-size: 1.1rem;
  line-height: 1.35;
}

.article-summary-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.article-summary-metric > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-summary-metric .summary-inline-icon {
  flex: 0 0 22px;
  margin: 0;
}

.summary-metric-icon {
  display: inline-flex;
  flex: 0 0 25px;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: #fff;
  background: #610c3a;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.summary-metric-icon--id {
  background: #1f9d68;
}

.summary-metric-icon--doi {
  color: #4b3212;
  background: #f4b323;
}

.article-summary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 130px;
  text-align: right;
}

.article-summary-open-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  color: #54320a;
  background: #ffc447;
  border-radius: 4px;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1;
}

.article-summary-open-access-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-summary-galleys {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.article-summary-galleys .btn,
.article-summary-galleys .galley-link {
  margin: 0;
}

.jh-announcement-date{
    font-size: 1.1rem;
}
.article-summary-actions .article-summary-pages {
  width: auto;
  color: #45383f;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

/* ---------- Responsive layout ---------- */

@media (max-width: 900px) {
  .article-summary-body {
    grid-template-columns: minmax(145px, 190px) minmax(200px, 1fr);
  }

  .article-summary-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .article-summary-preview-window {
    top: calc(100% + 12px);
    left: 0;
    grid-template-columns: 150px minmax(0, 1fr);
    width: min(520px, calc(100vw - 40px));
    transform: translateY(-4px);
  }

  .article-summary-cover-preview:hover .article-summary-preview-window,
  .article-summary-cover-preview:focus-within .article-summary-preview-window {
    transform: translateY(0);
  }

  .article-summary-preview-window::before {
    top: -7px;
    left: 28px;
    border-top: 1px solid #a85fba;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
  }

  .article-summary-preview-image {
    width: 150px;
    height: 96px;
  }
}

@media (max-width: 600px) {
  .article-summary {
    padding: 18px 0 20px;
  }

  .article-summary-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-summary-cover-link {
    max-width: 100%;
  }

  .article-summary-cover-preview {
    max-width: 100%;
  }

  .article-summary-cover-image {
    max-height: 190px;
  }

  .article-summary-preview-window {
    display: none;
  }

  .article-summary-actions {
    grid-column: auto;
    justify-content: flex-start;
    text-align: left;
  }

  /*
   * Pada layar kecil tooltip mengikuti area baris author agar
   * tidak terpotong pada sisi kanan atau kiri layar.
   */
  .article-author-list,
  .article-author-item {
    position: static;
  }

  .article-author-tooltip,
  .article-author-item:first-child .article-author-tooltip,
  .article-author-item:last-child .article-author-tooltip {
    top: calc(100% + 7px);
    right: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 15px 16px;
    transform: translateY(-4px);
  }

  .article-author-item:hover .article-author-tooltip,
  .article-author-item:focus-within .article-author-tooltip,
  .article-author-item:first-child:hover .article-author-tooltip,
  .article-author-item:first-child:focus-within .article-author-tooltip,
  .article-author-item:last-child:hover .article-author-tooltip,
  .article-author-item:last-child:focus-within .article-author-tooltip {
    transform: translateY(0);
  }

  .article-author-tooltip::before,
  .article-author-item:first-child .article-author-tooltip::before,
  .article-author-item:last-child .article-author-tooltip::before {
    right: auto;
    left: 48px;
    transform: rotate(45deg);
  }

  .article-author-tooltip-name {
    font-size: 16px;
  }

  .article-author-tooltip-affiliation,
  .article-author-tooltip-country {
    font-size: 12.5px;
  }

  .article-author-tooltip-bio,
  .article-author-tooltip-bio p,
  .article-author-tooltip-empty {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-author-tooltip,
  .article-summary-preview-label,
  .article-summary-preview-window {
    transition: none;
  }
}

.slider-container {
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 300%;
}
.slider-item {
  flex: 1;
  position: relative;
}
.slider-item img {
  width: auto;
  height: auto;
  border-radius: 10px;
}
.slider-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px;
  font-size: 16px;
}
.slider-caption h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.slider-caption p {
  margin: 5px 0 0;
}
.navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
.navigation button {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
}
.indicators {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}
.indicators span {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.indicators span.active {
  background: #007BFF;
}


/* 1. Typography */
.circlestat {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
  }
  
  .circlestat .label {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    color: black;
  }
  
  .citescore {
    background-color: #003366;
    color: white;
  }
  
  .impactfactor {
    background-color: #ffcc00;
    color: white;
  }
  
/* Slider Item Layout */
.slider-item {
    display: flex; /* Atur elemen dalam satu baris */
    align-items: center; /* Rata vertikal */
    justify-content: space-between; /* Jarak maksimal antara elemen */
    padding: 10px 20px; /* Spasi dalam untuk konten */
  }
  
  /* Untuk Teks Tanggal dan Event */
  .date-event {
    display: flex;
    flex-direction: column; /* Tanggal dan event dalam kolom */
    align-items: flex-start; /* Rata kiri */
    gap: 10px; /* Jarak antara tanggal dan event */
  }
  
  .year {
    font-weight: bold;
    color: #007BFF;
  }
  
  .event {
    color: #333;
    margin: 0; /* Hilangkan margin default */
  }
  
  /* Untuk Ikon Wikipedia */
  .icon-link {
    margin-left: 20px; /* Tambahkan jarak dari teks ke ikon */
  }
  
  .icon-link img {
    width: 25px;
    height: 25px;
    cursor: pointer; /* Menunjukkan bahwa ini dapat diklik */
    transition: transform 0.3s ease; /* Efek animasi saat hover */
  }
  
  /* Efek hover pada ikon */
  .icon-link:hover img {
    transform: scale(1.2); /* Sedikit perbesar saat hover */
  }
  
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 300%; /* Total lebar adalah 100% x jumlah slide */
  }
  
  .slider-item {
    flex: 0 0 100%; /* Setiap slide mengambil 100% dari lebar kontainer */
    text-align: left;
  }
  
  .slider-container {
    overflow: hidden;
    position: relative;
  }

  
.scrolling-timeline {
    max-width: 1200px;
    height: 40px; /* Adjust to fit single-line height */
    overflow: hidden;
    justify-content: center; /* Center horizontally */
    white-space: nowrap; /* Prevent line breaks */
    position: relative;
    background-color: #ebb6ff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'NexusSansTF-Regular';
    place-self: center;
    
  }
  
  .timeline-wrapper {
    display: flex;
    flex-direction: column;
    animation: scrollTimeline 9s linear infinite;
  }
  
  .timeline-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; /* Space between year and event */
    height: 30px; /* Same as container height */
    padding: 0 10px;
    text-align: center; /* Menyelaraskan teks */
  }
  
  .year {
    font-weight: bold;
    color: #007BFF;
    min-width: 60px; /* To align years consistently */
  }
  
  .event {
    color: #555;
  }

@font-face {
    font-family: "NexusSansTF-Regular";
    src: url("https://db.onlinewebfonts.com/t/96af4c04b443456579a594b5c7a4701d.eot");
}

@font-face {
    font-family: 'Ysabeau Office';
    font-style: italic;
    font-weight: 1 1000;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/ysabeauoffice/v4/LDIpapaZKhM9RuQIp8FmdYrPPPLMg7AR9hGL.woff2") format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}

@font-face {
    font-family: "NexusSansTF-Regular";
    src: url("https://edutech-journals.org/NexusSansTF-Regular%20Regular.otf");
}

@font-face {
    font-family: "BerkeleyOld-Black";
    src: url("https://edutech-journals.org/BerkeleyOldstyleITCbyBT-Black.otf");
}

@font-face {
    font-family: "Cardo";
    src: url("https://edutech-journals.org/Cardo-Regular.ttf");
}

@font-face {
    font-family: "Perpetua";
    src: url("https://edutech-journals.org/perpetua.ttf");
}

.authors-string .author-string-href span {
    font-size: 18px;  /* Ukuran font nama penulis */
    font-family: 'Cardo';
    font-variant: unicase;
}

/* Mengatur gaya umum untuk informasi penulis */
.article-details-authors {
    margin-top: 20px;
    padding: 15px;
}

/* Menyusun info penulis dalam kolom */
.author-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Menata elemen penulis secara vertikal */
.author-item {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;  /* Garis bawah untuk pemisah antar penulis */
}

.author-item:last-child {
    border-bottom: none;  /* Menghilangkan border bawah pada penulis terakhir */
}

/* Nama penulis, membuat lebih besar dan menonjol */
.author-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: left;  /* Pastikan nama penulis rata kiri */
}

/* Gaya untuk afiliasi */
.author-affiliation {
    font-size: 16px;
    color: #555;
    text-align: left;  /* Pastikan afiliasi rata kiri */
}

/* Menghilangkan padding atau margin ekstra jika ada */
.author-affiliation {
    margin: 0;
    padding: 0;
}

/* Memastikan tidak ada spasi di sekitar koma */
.author-affiliation {
    white-space: nowrap; /* Menghindari pemotongan kata */
}


/* Gaya untuk negara penulis (huruf besar dan tebal) */
.author-country {
    font-weight: bold;
    text-transform: uppercase;
    color: #2c3e50;  /* Warna lebih gelap agar lebih jelas */
    text-align: left;  /* Pastikan negara rata kiri */
}

/* Menata ORCID */
.author-orcid, .author-email {
    font-size: 14px;
    color: #0077cc;  /* Memberikan warna biru untuk link */
    display: flex;
    align-items: center;
    text-align: left;  /* Pastikan ORCID dan email rata kiri */
}

.author-orcid i, .author-email i {
    margin-right: 5px;  /* Memberikan ruang antara ikon dan teks */
}

/* Menambahkan efek hover pada link */
.author-orcid:hover, .author-email:hover {
    text-decoration: underline;
}

/* Responsif untuk ukuran layar kecil */
@media (max-width: 768px) {
    .article-details-authors {
        padding: 10px;
    }

    .author-item {
        padding: 8px 0;
    }

    .author-name {
        font-size: 16px;
    }

    .author-affiliation, .author-country {
        font-size: 14px;
    }

    .author-orcid, .author-email {
        font-size: 12px;
    }
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #610C3A;
    font-family: 'NexusSansTF-Regular';
    font-weight: 300;
}

h1 {
    font-size: 1.75rem;
	font-family: NexusSansTF-Regular;
}

a {
    color: #4f6acf;
    text-decoration: none;
    text-decoration-color: #D1B8C5;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    transition: all ease-in-out 0.2s;
}

a:hover {
    color: #610C3A;
    text-decoration-color: #D1B8C5;
    text-decoration-thickness: 3px;
}

::selection { /* Style selections */
    background: #610C3A;
    color: #FCFCFC;
}

.page-content p, .page-content li {
    font-size: 1.02rem !important;
    /* font-weight: 300; */
}

.jh-editor-note footer {
    font-family: 'Perpetua';
    font-size: 1.1rem;
    text-transform: lowercase;
}

/* 2. Global */

.event-banner {
    background-color: #F5F3F4;
    padding: 20px 0;
    text-align: center;
    position: relative;
    width: 100%;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.banner-image {
    max-width: 100px;
    height: auto;
}

.banner-text {
    font-family: EB Garamond, Garamond, 'NexusSansTF-Regular', sans-serif;
    font-size: 18px;
    color: #000;
}


.homepage-announcement:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.homepage-announcement a:hover {
    background-color: #b026f0; /* Change color on hover */
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .homepage-announcement {
        max-width: 100%;
        flex: 1 1 100%;
        padding: 10px; /* Adjust padding for mobile */
        height: auto; /* Allow flexible height on mobile */
        min-height: 240px; /* Set minimum height to ensure button visibility */
    }
    .homepage-announcement a {
        margin-top: 10px;
        font-size: 0.9em; /* Adjust font size for mobile */
    }
    .homepage-announcement:hover {
        animation: shimmer 1.5s infinite;
    }
    
}

.cover-image {
    border: 1px solid black;
    transition: transform 0.3s ease, border-color 0.3s ease;
    width: 220px;
    height: 135px;
}

/* Hover effect: slight zoom and border color change */
.cover-image:hover {
    transform: scale(1.05); /* Slightly enlarge the image */
    border-color: #800000; /* Change border color on hover */
}
/* 2.1 Body */

body {
    font-family: 'Perpetua', Lora;
    color: #161413;
    background-color: #FCFCFC;
}

/* 2.2 Header */

.main-header {
    border-bottom: 1px solid #C5B3BC;
    background: #F5F3F4;
}

.navbar-logo {
    max-width: 80%;
    padding-top: 2.5rem;
}

.navbar-logo a {
    border-bottom: 0px solid #D1B8C5;
    transition: all ease-in-out 0.15s;
}

.navbar-logo a:hover {
    border-bottom: 10px solid #D1B8C5;
}

.navbar-logo img {
    width: 100%;
}




/* Cover*/

.cvr {
    display: absolute;              /* Use flexbox to align items in a row */
    align-items: center;        /* Center the items vertically */
    border: 2px solid black;    /* Border around the container */
    padding: 5px;               /* Space between the border and the image */      /* Include padding and border in the element's total width and height */
}

.cvr img {
    width: 200px;               /* Set fixed width for the image */
    height: auto;               /* Maintain aspect ratio */
    object-fit: cover;          /* Cover the space while maintaining aspect ratio */
    margin: 0; 
    position: absolute;                 /* Remove any margin */
}

/* 2.3 Navbar */

#userNav .nav-link, .language-toggle .dropdown-toggle {
    color: #A18A96;
    text-decoration: none;
}

#userNav .nav-link:hover, .language-toggle .dropdown-toggle:hover, #userNav .nav-link:focus, .language-toggle .dropdown-toggle:focus {
    outline: 0;
    border-color: transparent;
    color: #8E6A7D;
}

#userNav .dropdown-menu, .language-toggle .dropdown-menu {
    border-radius: 20px 5px 20px 20px;
}

#primaryNav .nav-link {
    
    letter-spacing: 0.25px;
    font-size: 1rem;
    text-decoration: none;
}

#primaryNav .nav-link:hover, #primaryNav .nav-link:focus {
    background: #c47cde;
    color: #ffffff;
    border-color: transparent;
    font-weight: 300;
    letter-spacing: 0.25px;
    font-size: 1rem;
}

.badge-light {
    background: #D1B8C5cc;
    color: #161413aa;
}

.dropdown-item {
    transition: all ease-in-out 0.2s;
    text-decoration: none;
}

.dropdown-item:hover, .dropdown-item:focus {
    border-color: transparent;
    color: #D1B8C5 !important;
}

#primaryNav .dropdown-menu.show {
    border-radius: 0px 0px 20px 20px;
    border-top: 1px solid #C5B3BC;
}

#primaryNav .dropdown-item {
    color: #FCFCFC;
    transition: all ease-in-out 0.2s;
    font-weight: 300;
    letter-spacing: 0.25px;
    text-decoration: none;
}

#primaryNav .dropdown-item:hover, #primaryNav .dropdown-item:focus {
    background: transparent;
    color: #D1B8C5;
    border-color: transparent;
}

.dropdown-toggle::after {
    display: unset;
    margin-left: 0;
    vertical-align: baseline;
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f103";
    color: #C5B3BC;
    padding-left: 3px;
}

/* 2.4 Footer */

/* Use prefooter block to aesthetically place sidebar content in footer; disable when not in use */

/*#CUSTOMblock-prefooter {
    flex-basis: auto;
    width: 100%;
    padding: 0;
}

@media (max-width: 767px) {
  #CUSTOMblock-prefooter {
    padding: 15px 15px 0 15px;
    margin-bottom: 0;
  }
}*/

.site-footer-sidebar {
    /* margin-bottom: 0; */
    padding-bottom: 0;
    /* border-bottom: 0; */
}

.site-footer {
    background: #2d46a5;
    color: #D1B8C5;
    padding-bottom: 0;
    font-family: 'Perpetua';
}

.site-footer h3 {
    font-size: 1rem;
    color: #D1B8C5;
}

.site-footer p {
    font-size: 1.0rem;
}

.site-footer a {
    color: #FCFCFC;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
}

.site-footer a:hover {
    color: #D1B8C5;
    text-decoration: none;
}

.site-footer .row .align-self-center { /* modify the align-self-center class in the footer because it's hard-coded in the template */
    -ms-flex-item-align: flex-start !important;
    align-self: flex-start !important;
}


.col-md.col-md-2.align-self-center.text-right { /* Remove PKP logo for placement elsewhere */
    display: none;
}

@media (min-width: 768px) {
.col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 22;
    max-width: 20.5%;
}
}

.row {

}

@media (min-width: 991px) {
  .publisher-logos {
    float: left;
    text-align: left;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 50.063em) {
    .iflogo1 .iflogo1__if-number {
        bottom: 28pt;
        font-size: 14pt;
    }
}
.iflogo1 .iflogo1__if-number {
    position: relative;
    text-align: center;
    font-family: Suisse Intl!important; 
    font-weight: 400; 
    color: #222; 
    text-decoration: none;
}

.publisher-logos {
  text-align: center;
  margin-bottom: 1rem;
}

/* 3. Styling */

/* 3.1 Buttons */

.label.openaccess {
    background-color: #fcb520;
    cursor: pointer;
color: white;
}

.btn {
    border-radius: 0px;
    border: 1px solid #A18A96;
    color: #8E6A7D;
    text-transform: uppercase;
    font-weight: 300;
}

.btn-primary { /* Main (violet) buttons */
    border-radius: 0px 0px 0px 0px;
    border-color: #48092B !important;
    color: #FCFCFC;
    font-family: 'NexusSansTF-Regular';
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: #161413 !important;
    border-color: #161413 !important;
    color: #FCFCFC;
}

.btn-primary:focus {
  box-shadow: 0 0 0 .2rem #D1B8C5 !important;
}

.modal-content .btn-primary { /* Buttons in modals with violet backgrounds */
    background: transparent;
    border-radius: 10px !important;
    border-color: #FCFCFC44;
    color: #FCFCFCaa;
    text-transform: uppercase;
    transition: all ease-in-out 0.2s;
}

.modal-content .btn-primary:hover, .modal-content .btn-primary:active {
    background: transparent;
    border-color: #FCFCFC77;
    color: #FCFCFC;
}

/* 3.2 Forms */

.form-control {
    background-color: #FCFCFC;
}

.form-control:hover {
    border-color: #D1B8C5;
}

.form-control:focus {
    color: #495057;
    background-color: #FFF;
    border-color: #FFF;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #D1B8C5;
}

@media (max-width: 575px) { /* Lists with images on the side */
    .list-img {
        text-align: center !important;
    }

    .list-img > img {
        width: 150px !important;
        margin-bottom: 2rem;
    }
}

/* 3.3 Paragraphs */

.paragraph {
    font-weight: 300;
    font-size: 1.1rem;
    text-align: justify;
}

/* 3.4 Tooltips */

.hint {
    position: relative;
    display: inline-block;
    color: #610C3A;
}

.hint .hint-text {
    visibility: hidden;
    width: 200px;
    background-color: #610C3A;
    color: #FCFCFC;
    border-radius: 10px;
    padding: 10px 10px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.3s;
}

.hint .hint-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #610C3A transparent transparent transparent;
}

.hint:hover .hint-text {
    visibility: visible;
    opacity: 1;
}

/* 3.5 Page headers */

.page-header {
    margin-top: 5rem;
    margin-bottom: 1rem;
}

.page-header h1 {
    font-size: 2.15rem;
    text-transform: uppercase;
}

/* 4. Page-specific */

/* 4.1 Homepage */

/* 4.1.1 Homepage issue */

.homepage-image-behind-issue::after {
    background: rgba(0,0,0,0.2);
}

.homepage-issue-current { /* 'CURRENT ISSUE' text */
    margin-top: 0 !important;
  	font-family: 'NexusSansTF-Regular', Fira Sans, sans-serif;
  	font-size: 2rem;
  	font-weight: 300;
  	text-transform: uppercase;
    
}

.homepage-issue-identifier {
  	display: none;
}

.homepage-issue-published { /* Date issue was published */
    margin-top: 1.5rem !important;
}

.homepage-issue-description-wrapper { /* Issue description box */
    display: flex;
    align-content: center;
    background: #F5F3F4;
    height: 297px;
    padding: 2.2rem 3rem;
    border: 1px solid #C5B3BC;
    border-radius: 0px 45px 0px 0px;
    line-height: 25px;
}

.homepage-issue-description .h2 {
    font-family: 'NexusSansTF-Regular';
    /*font-style: italic;*/
    color: #2e0f42;
    font-size: 1.3rem !important;
    margin-bottom: 1rem;
}
.glow {
    width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
    transition: box-shadow 0.5s ease;
}

/* Kelas kedua: Efek Border */
.border-effect {
    border: 5px solid rgba(255, 255, 255, 0.7);
    padding: 5px;
    transition: border 0.5s ease;
}

.glow:hover {
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 1);
    transform: scale(1.05); /* Slightly enlarge the image */
    border-color: #1900fe; /* Change border color on hover */
}

.border-effect:hover {
    border: 5px solid rgba(0, 255, 255, 1); /* Mengubah warna border saat hover */
}



.quote-container {
            text-align: center;
            background-color: #ffffff;
            border: 2px solid #ccc;
            border-radius: 15px;
            width: 100%;
            position: relative;
            text-align: center;
        }
.quote-container:before,
.quote-container:after {
            content: "“";
            font-size: 4rem;
            position: absolute;
            top: 10px;
            color: #6c757d;
        }
.quote-container:before {
            left: 10px;
        }
.quote-container:after {
            right: 10px;
        }
.quote-text {
            font-size: 1.5rem;
            color: #333;
            font-style: italic;
            line-height: 1.6;
        }
.quote-author {
            margin-top: 20px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #555;
        }

.homepage-issue-description p {
    color: #161413;
    font-weight: 300;
    font-size: 1.05rem;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

.homepage-issue-description:after {
    display: none;
}

.homepage-issue-description-more {
    display: none !important;
    margin-top: 10px;
}

@media (max-width: 1199px) {
    .homepage-issue-current {
        color: #161413;
    }

    .homepage-issue-published {
        color: #8E6A7D;
        text-transform: uppercase;
    }

    .homepage-issue-description-wrapper { /* Issue description box */
        box-shadow: none;
    }
}

@media (max-width: 991px) {
    .homepage-issue-description-wrapper { /* Issue description box */
        height: 100%;
        padding: 1rem 0rem;
        border: 0;
        background: #FCFCFC;
    }

    .homepage-issue-description {
        padding-bottom: 0;
    }
}

@media (min-width: 769px) {
    .homepage-issue-cover { /* Cover image */
        width: 210px;
        height: 303px;
    }
}

@media (max-width: 768px) {
    .homepage-issue-cover {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

/* 4.1.2 Homepage table of contents */

.issue-toc-section-title {
    font-size: 1.65rem;
    color: #610C3A;
    margin: 1rem 0;
}

.article-summary-authors, .article-summary-pages {
    font-size: 0.9rem;
    font-family: 'NexusSansTF-Regular', Lora;
    color: #8E6A7D;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.33;
}

@media (min-width: 992px) {
	.article-summary-pages {
		width: 56px;
	}
}

.article-summary-title {
  	font-family: 'Perpetua', 'NexusSansTF-Regular', Lora;
  	font-style: inherit;
}

.article-summary-title a {
    color: #000000;
	/*background:#c47cde;*/
    /*border-bottom: 0px solid #D1B8C5;*/
    text-decoration-color: #FCFCFC;
    text-decoration-thickness: 0px;
    /*transition: all ease-in-out 0.2s;*/
    line-height: 1.34;
    font-size: 1.1em;
    font-weight: bold;
}

.article-summary-title a:hover {
    /*border-bottom: 3px solid #D1B8C5;*/
    text-decoration: none;
    text-decoration-thickness: 3px;
    text-decoration-color: #D1B8C5;
	background:#e311ff;
	color: #ffffff;
    transition: background-color 0.5s ease; 
}

.article-summary-doi { /* Do not show article DOIs in the table of contents */
    display: none;
}

/* 4.1.3 Introduction */

.asean-terms {
    list-style: none;
}

.asean-terms li::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f101"; 
    color: #C5B3BC;
    font-size: 1rem;
    display: inline-block; 
    width: 1.75rem;
    margin-left: -1.75rem;
}

/* 4.1.4 Homepage announcement */

.homepage-announcement {
    flex: 0 0 100%;
    max-width: 100%;
}

.homepage-issue-header{
    margin-bottom: 0em;
}
.homepage-announcement-title {
    font-size: 1.15rem;
    margin-top: 0em;
    margin-top: 0em;
}

.homepage-announcement a {
    font-size: 1.05rem;
    font-weight: 300;
}

/* 4.2 Issue table of contents */

.page-issue-date {
    color: #8E6A7D !important;;
    text-transform: uppercase;
    font-weight: 300;
}

.page-issue-description-wrapper {
    display: flex;
    align-items: center;
    background: #F5F3F4;
    border: 1px solid #C5B3BC;
    min-height: 297px;
    padding: 2.8rem 3rem;
    border-radius: 45px 0px 0px 0px;
}

.page-issue-description-wrapper p {
    font-size: 1.05rem;
    text-align: justify;
    margin-bottom: 0;
}

.page-issue-description-wrapper .h2 {
    font-family: 'Perpetua';
   /* font-style: italic;*/
    color: #161413;
    font-size: 1.3rem !important;
    margin-bottom: 1rem;
    text-align: left;
}

.article-details-issue-identifier a {
    color: #610C3A;
    font-size: 1.15rem;
    font-family: 'Perpetua';
    font-variant: none;
}

.article-details-issue-section {
    color: #8E6A7D;
}

.article-details-published {
    color: #8E6A7D;
}

.authors-string {
    font-size: 1.25rem;
}

.authors-string a {
    border-bottom: 0px solid #D1B8C5;
}

.issue-toc-section + .issue-toc-section {
    border-top: 1px solid #C5B3BC !important;
}


/* 4.3 Individual articles */


.article-details-issue-identifier, .article-details-heading, .article-details .item > .label {
    color: #8E6A7D !important;
    font-weight: 300;
    font-family: 'Perpetua';
}

.article-details-issue-identifier a {
    border-bottom: 0px solid #D1B8C5;
    transition: all ease-in-out 0.2s;
}

.article-details-issue-identifier a:hover, .article-details-issue-identifier a:focus {
    color: #610C3A;
    text-decoration: none;
    border-bottom: 3px solid #D1B8C5;
}

.article-details-doi a {
    color: #1065f6;
    text-decoration: none;
    text-decoration-color: #D1B8C5;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    transition: all ease-in-out 0.2s;
    font-family: 'Cardo';
    font-variant: unicase;
    font-size: medium;
}

.article-details-doi a:hover {
    color: #610C3A;
    text-decoration-color: #D1B8C5;
    text-decoration-thickness: 3px;
}

.author-symbol {
    color: #8E6A7D !important;
}

.modal-header {
    font-family: 'Cardo';
    font-variant: unicase;
}

.article-details-bio-toggle {
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.article-details-bio-toggle:hover {
    background-color: #dddddd;
    color: #000000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal {
    font-family: 'Cardo';
    font-variant: unicase;
}

.author-string-href {
    font-size: 1.3rem;
    text-decoration: none;
    font-weight: 400;
}

.article-details-author-affiliation {
    color: #8E6A7D !important;
    font-size: 1.1rem !important; 
    font-weight: 300;
    font-family: 'Cardo';
    font-variant: unicase;
    line-height: 1.5;
}

.article-details-fulltitle {
    font-family: 'Perpetua', 'NexusSansTF-Regular', Lora;
    font-style: inherit;
    color: #161413;
    line-height: 1.2;
    text-transform: unset !important;
}

.article-details-issue-section {
    color: #8E6A7D !important;
    text-transform: uppercase;
    font-weight: 300;
}

.article-details-published {
    color: #8E6A7D !important;
    font-weight: 300;
    text-transform: uppercase;
}

.article-details-main {
    padding: 3rem 6rem;
    background: #F5F3F4;
    border: 1px solid #C5B3BC;
    border-radius: 45px 0px 0px 0px;
}

.article-details-abstract p {
    font-family: 'Perpetua', Lora;
    text-align: justify;
    line-height: 1.5em;
}

.article-details-references p {
    font-family: 'Perpetua', Lora;
    text-align: justify;
}

.article-details-sidebar ul {
    font-size: 1.05rem;
    font-weight: 300;
    list-style: none;
}

.article-details-sidebar ul li::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f101"; 
    color: #C5B3BC;
    font-size: 1rem;
    display: inline-block; 
    width: 1.25rem;
    margin-left: -2.5rem;
}

.article-details-keywords-value {
    font-size: 1.05rem;
    font-weight: 300;
}

.article-details-references-value {
    font-family: 'NexusSansTF-Regular', Lora;
}

.article-details-license p {
    font-size: 1rem;
    font-weight: 300;
    margin-top: 1rem;
    margin-bottom: 0;
}

.article-details-license img {
    margin-left: 43%;
}

.article-details-author-orcid a {
    font-family: 'Cardo';
}

.btn.btn {
    font-family: 'Perpetua';
}


/* 4.4 All custom pages */

.custom-page .page-header h1 {
    font-size: 2rem;
    margin-top: 2.5rem
    margin-bottom: 0;
}

.page-content {
    border-top-color: #C5B3BC;
    font-size: 18px;
	line-height: 25px;
    font-family: 'Perpetua';
}

/* 4.5 Contact page */

.contact-name {
    font-size: 16px;
}

.contact-affiliation {
    font-size: 16px;  
}

.contact-email {
    font-size: 16px;
}

/* 4.6 Submissions page */

.submissions-checklist {
    font-size: 1.05rem;
    font-weight: 300;
}

.submissions-checklist ul {
    margin-top: 1rem;
    list-style: none;
}
.block_make_submission_link {
font-family: 'Perpetua';
}

.submissions-checklist ul li::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f101"; 
    color: #C5B3BC;
    font-size: 1rem;
    display: inline-block; 
    width: 1.525rem;
    margin-left: -1.8rem;
}

/* 4.7 FAQ page */

.faq-return a {
    color: #8E6A7D;
    transition: all ease-in-out 0.2s;
}

.faq-return a:hover {
    color: #610C3A;
    text-decoration: none;
}

/* 4.8 Search page */

.alert-info {
    background: #F5F3F4;
    color: #8E6A7D;
    border-color: #C5B3BC;
}

.search-filters {
    background: #F5F3F4;
    border: 1px solid #C5B3BC;
    border-radius: 45px 0 0 0;
}

.search-filters > h2 {
    color: #8E6A7D;
}

.search-filters label {
    color: #8E6A7D;
}

.form-control {
    color: #610C3A;
}

/* 4.9 Editorial team */

.editorial-member .col-lg-10 {
    display: grid;
}

.editorial-member img {
    border-radius: 60px 60px 60px 60px;
    border: 1px solid #C5B3BC;
}

.editorial-member a {
    font-family: 'Cardo';
    transition: all ease-in-out 0.2s;
    font-variant: unicase;
}

.editorial-member a:hover {
    color: #161413;
}

.editorial-member h3 {
    margin: 0;
    font-size: 1.25rem;
    align-self: center;
}

.editorial-member h4 {
    margin: 0;
    line-height: 1.2; 
    color: #8E6A7D; 
    font-weight: 400;
    font-size: 1.05rem;
    align-self: self-end;
}

.editorial-member h5 {
    margin: 0;
    line-height: 1.2;
    color: #8E6A7D;
    font-weight: 300;
    font-size: 0.9rem;
    font-family: Cardo;
    align-self: self-end;
    font-variant: unicase;
    
}

.block_make_submission .block_make_submission_link{
font-family: NexusSansTF-Regular;
}

.editorial-member p {
    margin: 0;
    align-self: center;
}

/* 4.10 Announcements */

.announcement-summary-date, .announcement-date, .homepage-announcement-date {
    font-family: 'Perpetua','Fira Sans', sans-serif !important;
    font-size: 1rem !important;
    color: #8E6A7D !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
}

/* 4.11 Archives */

.page-archives-header {
    margin-bottom: 4rem !important;
}

.page-archives .issue-summary {
    background: #fcfcfc;
}

.page-archives .issue-summary-cover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.page-archives .issue-summary .card-body {
    background: transparent;
}

.issue-summary-cover {
    max-width: 200px;
    height: auto;
    transition: transform 0.5s ease; /* Smooth transition for rotation */
}

.page-archives .issue-summary-series a {
color: #ffffff;
background: #ed4eeb;
font-family: 'Perpetua';
    font-size: 1.11rem;
    text-decoration: none;
}

.page-archives .issue-summary-series a:hover {
    color: #610C3A;
}

.page-archives .issue-summary-date {
    color: #8E6A7D !important;
    font-size: 0.9rem;
    font-weight: 300;
    text-transform: uppercase;
}

.page-archives .issue-summary-title {
    color: #8E6A7D !important;
    font-size: 0.9rem;
    font-weight: 300;
    font-family: 'Cardo';
    font-variant: unicase;
}


/* Pagination */

.page-item {
    font-size: 1rem;
    font-weight: 300;
}

.page-item a {
    text-decoration: none;
}

.page-link {
    color: #8E6A7D !important;
    transition: all ease-in-out 0.2s;
}

.page-link:hover, .page-link:focus {
    color: #610c3a !important;
    background: #fcfcfc !important;
    box-shadow: none;
}

.page-item:first-child .page-link {
    border: 0;
}

.page-item:first-child .page-link span {
    display: none;
}

.page-item:first-child .page-link:before {
    margin-left: 0;
    vertical-align: text-bottom;
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f100";
    color: #C5B3BC;
    padding-right: 3px;
    transition: all ease-in-out 0.2s;
}

.page-item:first-child:hover .page-link:before {
    color: #610c3a;
}

.page-item:last-child .page-link {
    border: 0;
}

.page-item:last-child .page-link span {
    display: none;
}

.page-item:last-child .page-link:after {
    margin-left: 0;
    vertical-align: text-bottom;
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: "\f101";
    color: #C5B3BC;
    padding-left: 3px;
    transition: all ease-in-out 0.2s;
}

.page-item:last-child:hover .page-link:after {
    color: #610c3a;
}

.page-item.active .page-link {
    border: 0;
    color: #8E6A7D !important;
}

.page-item.disabled .page-link {
    color: #C5B3BC !important;
}

#primaryNav .dropdown-item {
    color: #a8a8a8;
    transition: all ease-in-out 0.2s;
    font-weight: 300;
    letter-spacing: 0.25px;
    text-decoration: none;
}

.homepage-image-behind-issue+.container-homepage-issue .homepage-issue-published {
	
}

.homepage-image-behind-issue+.container-homepage-issue .homepage-issue-current {
	
}

.article-details-published {
	visibility: hidden;
}

.page-issue-date {
	
}
.article-details-issue-identifier a {
	font-family: 'Perpetua';
}

.issue-toc-section-title {
	font-family: 'Cardo';
    font-variant: unicase;
}

.pkp_block .title {
    font-family: 'Cardo';
    font-variant: unicase;
}

.pkp_block {
    flex: 0 0 auto;
    width: 100%;
}

.PlumX-Summary .pps-col.plx-plum {
    border-top: 9px solid #6e1a62 !important;
}
.PlumX-Summary .pps-col {
    float: left !important;
    width: 100% !important;
    padding: 12px !important;
}
.PlumX-Summary * {
    text-align: center !important;
}

@media (min-width: 992px) {
    #primaryNav .nav-link {
        padding: 0rem;
    }
}

.submissions-checklist {
    text-align: justify;
}

.page-content p, .page-content li {
    text-align: justify;
}

.article-summary {
    margin: 0rem 0 0rem;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
    font-weight: normal;
}

.card-img-top {
    
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: brightness(90%)

}

.card-img-top:hover {
    border-radius: 0;
    transform: scale(1.10);
    filter: brightness(100%) contrast(1.2)
}

details {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f5f5f5;
  }
  summary {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
    outline: none;
  }
  summary:hover {
    color: #0056b3;
  }

  /* =========================================================
   VIEW ALL ISSUES BUTTON
   ========================================================= */

.container-homepage-issue > .text-center {
    position: relative;
    z-index: 2;
    padding: 28px 0 12px;
}

.container-homepage-issue > .text-center > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 22px;

    color: #ffffff;
    background: linear-gradient(135deg, #70144d 0%, #481035 100%);
    border: 1px solid #70144d;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(72, 16, 53, 0.20);

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

/* Ikon arsip */
.container-homepage-issue > .text-center > .btn::before {
    content: "\f187";
    font-family: "Font Awesome 5 Free";
    font-size: 0.9rem;
    font-weight: 900;
}

/* Ikon panah */
.container-homepage-issue > .text-center > .btn::after {
    content: "\2192";
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

/* Efek hover dan keyboard focus */
.container-homepage-issue > .text-center > .btn:hover,
.container-homepage-issue > .text-center > .btn:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #8b1a62 0%, #591540 100%);
    border-color: #e311ff;
    box-shadow: 0 12px 24px rgba(72, 16, 53, 0.28);
    outline: none;
    text-decoration: none;
    transform: translateY(-2px);
}

.container-homepage-issue > .text-center > .btn:hover::after,
.container-homepage-issue > .text-center > .btn:focus::after {
    transform: translateX(3px);
}

.container-homepage-issue > .text-center > .btn:focus-visible {
    box-shadow:
        0 0 0 3px rgba(227, 17, 255, 0.22),
        0 12px 24px rgba(72, 16, 53, 0.28);
}

/* Tampilan ponsel */
@media (max-width: 600px) {
    .container-homepage-issue > .text-center {
        padding-top: 22px;
    }

    .container-homepage-issue > .text-center > .btn {
        width: min(100%, 280px);
        min-height: 44px;
        padding: 28px 18px;
        font-size: 0.82rem;
    }
}

/* =========================================================
   ARTICLE COVER AND ABSTRACT HOVER PREVIEW
   ========================================================= */

.article-cover-hover {
    position: relative;
    display: block;
    width: 220px;
    max-width: 100%;
    outline: none;
}

/* Gambar pada daftar artikel */
.article-cover-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 44 / 27;
    object-fit: cover;

    background: #f4f1f3;
    border: 1px solid #82717a;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(53, 18, 47, 0.12);

    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.article-cover-hover:hover .article-cover-thumbnail,
.article-cover-hover:focus .article-cover-thumbnail,
.article-cover-hover:focus-within .article-cover-thumbnail {
    filter: brightness(1.04);
    box-shadow: 0 10px 24px rgba(53, 18, 47, 0.22);
    transform: translateY(-3px);
}

/* Label Preview Abstract */
.article-cover-preview-label {
    position: absolute;
    right: 8px;
    bottom: 8px;

    display: inline-flex;
    align-items: center;
    padding: 5px 9px;

    color: #ffffff;
    background: rgba(53, 18, 47, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.article-cover-hover:hover .article-cover-preview-label,
.article-cover-hover:focus .article-cover-preview-label,
.article-cover-hover:focus-within .article-cover-preview-label {
    opacity: 1;
    transform: translateY(0);
}

/* Jendela abstract */
.article-cover-popup {
    position: absolute;
    z-index: 10000;
    top: 50%;
    left: calc(100% + 15px);

    display: grid;
    visibility: hidden;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;

    width: min(570px, calc(100vw - 48px));
    padding: 18px;

    color: #ffffff;
    background: linear-gradient(
        145deg,
        #59174d 0%,
        #35122f 100%
    );

    border: 1px solid #a85fba;
    border-top: 3px solid #e311ff;
    border-radius: 13px;

    box-shadow:
        0 20px 45px rgba(53, 18, 47, 0.34),
        0 5px 14px rgba(53, 18, 47, 0.20);

    text-align: left;

    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-50% - 5px));

    transition:
        visibility 0.16s ease,
        opacity 0.16s ease,
        transform 0.16s ease;
}

/* Segitiga penunjuk ke gambar */
.article-cover-popup::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -7px;

    width: 12px;
    height: 12px;

    background: #59174d;
    border-bottom: 1px solid #a85fba;
    border-left: 1px solid #a85fba;

    transform: translateY(-50%) rotate(45deg);
}

/* Menampilkan jendela */
.article-cover-hover:hover .article-cover-popup,
.article-cover-hover:focus .article-cover-popup,
.article-cover-hover:focus-within .article-cover-popup {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}

/* Gambar besar dalam jendela */
.article-cover-popup-image {
    display: block;
    width: 190px;
    height: 118px;
    object-fit: cover;
    align-self: start;

    background: #f4f1f3;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.article-cover-popup-content,
.article-cover-popup-title,
.article-cover-popup-heading,
.article-cover-popup-abstract,
.article-cover-popup-empty,
.article-cover-popup-hint {
    display: block;
}

.article-cover-popup-title {
    margin-bottom: 9px;
    color: #ffffff;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.article-cover-popup-heading {
    margin-bottom: 5px;
    color: #f4c9ff;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.article-cover-popup-abstract,
.article-cover-popup-empty {
    color: #ffffff;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.article-cover-popup-empty {
    font-style: italic;
    opacity: 0.8;
}

.article-cover-popup-hint {
    margin-top: 10px;
    padding-top: 8px;

    color: #dec6e4;
    border-top: 1px solid rgba(255, 255, 255, 0.20);

    font-family: Arial, sans-serif;
    font-size: 11px;
}

/* Mencegah popup tertutup artikel lainnya */
.article-summary:hover,
.article-summary:focus-within {
    position: relative;
    z-index: 100;
}

/* Tampilan tablet */
@media (max-width: 900px) {
    .article-cover-popup {
        top: calc(100% + 12px);
        left: 0;

        grid-template-columns: 150px minmax(0, 1fr);
        width: min(520px, calc(100vw - 40px));

        transform: translateY(-4px);
    }

    .article-cover-hover:hover .article-cover-popup,
    .article-cover-hover:focus .article-cover-popup,
    .article-cover-hover:focus-within .article-cover-popup {
        transform: translateY(0);
    }

    .article-cover-popup::before {
        top: -7px;
        left: 28px;

        border-top: 1px solid #a85fba;
        border-right: 0;
        border-bottom: 0;

        transform: rotate(45deg);
    }

    .article-cover-popup-image {
        width: 150px;
        height: 96px;
    }
}

/* Tampilan ponsel */
@media (max-width: 600px) {
    .article-cover-hover {
        width: 100%;
    }

    .article-cover-popup {
        grid-template-columns: 1fr;
        width: min(100%, calc(100vw - 32px));
    }

    .article-cover-popup-image {
        width: 100%;
        height: auto;
        max-height: 180px;
    }
}

/* Mengurangi animasi jika diminta perangkat */
@media (prefers-reduced-motion: reduce) {
    .article-cover-thumbnail,
    .article-cover-preview-label,
    .article-cover-popup {
        transition: none;
    }
}

.article-author-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-author-flag {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.article-author-tooltip-orcid {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 13px;
    padding: 5px 9px;

    color: #ffffff;
    background: rgba(166, 206, 57, 0.14);
    border: 1px solid rgba(166, 206, 57, 0.45);
    border-radius: 999px;

    font-size: 13px;
    line-height: 1.2;
}

.author-orcid-icon {
    display: inline-flex;
    flex: 0 0 19px;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;

    color: #ffffff;
    background: #a6ce39;
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.author-orcid-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.article-author-tooltip-orcid a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.article-author-tooltip-orcid a:hover,
.article-author-tooltip-orcid a:focus {
    color: #dff5a5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Abstract-only cover preview */
.article-summary-preview-window--abstract-only {
    grid-template-columns: minmax(0, 1fr);
    width: min(460px, calc(100vw - 48px));
    padding: 20px 22px;
}

.article-summary-preview-window--abstract-only
.article-summary-preview-heading {
    margin-bottom: 8px;
    color: #f4c9ff;
    font-size: 12px;
    letter-spacing: 0.1em;
}

.article-summary-preview-window--abstract-only
.article-summary-preview-abstract {
    color: #ffffff;
    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.55;
    text-align: justify;
}

@media (max-width: 900px) {
    .article-summary-preview-window--abstract-only {
        grid-template-columns: minmax(0, 1fr);
        width: min(440px, calc(100vw - 40px));
    }
}

@media (max-width: 600px) {
    .article-summary-preview-window--abstract-only {
        width: min(100%, calc(100vw - 32px));
        padding: 17px 18px;
    }

    .article-summary-preview-window--abstract-only
    .article-summary-preview-abstract {
        font-size: 14px;
        text-align: left;
    }
}

/* =========================================================
   PROFESSIONAL CURRENT ISSUE
   ========================================================= */

.jhytel-current-header {
    margin-bottom: 24px;
    text-align: center;
}

.jhytel-current-label {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 12px;

    color: #ffffff;
    background: rgba(53, 18, 47, 0.88);
    border-radius: 999px;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.jhytel-current-title {
    margin: 0;
    color: #ffffff;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.2;
}

.jhytel-current-published {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.9);

    font-family: "Perpetua", Georgia, serif;
    font-size: 15px;
}

/* Kartu utama */
.jhytel-issue-feature {
    position: relative;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 34px;
    align-items: center;

    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 30px;

    background:
        radial-gradient(
            circle at top right,
            rgba(227, 17, 255, 0.08),
            transparent 34%
        ),
        #ffffff;

    border: 1px solid rgba(97, 12, 58, 0.18);
    border-top: 4px solid #e311ff;
    border-radius: 20px;

    box-shadow:
        0 24px 55px rgba(53, 18, 47, 0.18),
        0 6px 18px rgba(53, 18, 47, 0.10);
}

/* Cover */
.jhytel-issue-cover-column {
    position: relative;
}

.jhytel-issue-cover-link {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;

    background: #f3eff2;
    border-radius: 12px;

    box-shadow:
        0 16px 32px rgba(53, 18, 47, 0.24),
        0 4px 10px rgba(53, 18, 47, 0.12);

    outline-offset: 5px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.jhytel-issue-cover {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.jhytel-issue-cover-link:hover,
.jhytel-issue-cover-link:focus {
    box-shadow:
        0 22px 42px rgba(53, 18, 47, 0.3),
        0 6px 14px rgba(53, 18, 47, 0.14);

    transform: translateY(-4px);
}

.jhytel-issue-cover-link:hover .jhytel-issue-cover,
.jhytel-issue-cover-link:focus .jhytel-issue-cover {
    filter: brightness(0.76);
    transform: scale(1.035);
}

.jhytel-cover-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.jhytel-cover-overlay svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jhytel-issue-cover-link:hover .jhytel-cover-overlay,
.jhytel-issue-cover-link:focus .jhytel-cover-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Isi kartu */
.jhytel-issue-content {
    min-width: 0;
}

.jhytel-issue-title {
    margin: 0 0 12px;

    color: #2f1727;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2.3vw, 29px);
    font-weight: 700;
    line-height: 1.25;
}

.jhytel-issue-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}

.jhytel-meta-item,
.jhytel-open-access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 5px 10px;

    border-radius: 999px;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.jhytel-meta-item {
    color: #624c58;
    background: #f4f0f2;
    border: 1px solid #ded2d8;
}

.jhytel-open-access {
    color: #563609;
    background: #ffc44d;
    border: 1px solid #eeb03c;
}

.jhytel-meta-item svg,
.jhytel-open-access svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jhytel-issue-description {
    margin-bottom: 20px;

    color: #40343a;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.62;
    text-align: justify;
}

/* Tombol */
.jhytel-issue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jhytel-issue-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 43px;
    padding: 10px 16px;

    border-radius: 8px;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1;
    text-decoration: none;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.jhytel-issue-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jhytel-issue-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #70144d, #481035);
    border: 1px solid #70144d;
    box-shadow: 0 7px 15px rgba(72, 16, 53, 0.18);
}

.jhytel-issue-button-primary:hover,
.jhytel-issue-button-primary:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #8b1a62, #591540);
    border-color: #e311ff;
    box-shadow: 0 10px 20px rgba(72, 16, 53, 0.26);
    text-decoration: none;
    transform: translateY(-2px);
}

.jhytel-issue-button-secondary {
    color: #610c3a;
    background: #ffffff;
    border: 1px solid rgba(97, 12, 58, 0.32);
}

.jhytel-issue-button-secondary:hover,
.jhytel-issue-button-secondary:focus {
    color: #ffffff;
    background: #610c3a;
    border-color: #610c3a;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Full issue galley */
.jhytel-issue-galleys {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e1d7dc;
}

.jhytel-galleys-title {
    margin-bottom: 9px;
    color: #610c3a;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jhytel-galleys-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tablet */
@media (max-width: 991px) {
    .jhytel-current-title,
    .jhytel-current-published {
        color: #2f1727;
    }

    .jhytel-issue-feature {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }
}

/* Ponsel */
@media (max-width: 680px) {
    .jhytel-current-header {
        margin-bottom: 18px;
    }

    .jhytel-issue-feature {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 18px;
        border-radius: 15px;
    }

    .jhytel-issue-cover-column {
        width: min(230px, 75%);
        margin: 0 auto;
    }

    .jhytel-issue-title {
        text-align: center;
    }

    .jhytel-issue-meta,
    .jhytel-issue-actions {
        justify-content: center;
    }

    .jhytel-issue-description {
        font-size: 15px;
        text-align: left;
    }

    .jhytel-issue-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jhytel-issue-cover-link,
    .jhytel-issue-cover,
    .jhytel-cover-overlay,
    .jhytel-issue-button {
        transition: none;
    }
}

/* =========================================================
   CURRENT ISSUE CONTAINER AND BUTTONS ONLY
   Posisi cover dan layout kolom tidak diubah
   ========================================================= */

/* Kartu informasi di sebelah kanan cover */
.homepage-issue-description-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    height: auto !important;
    min-height: 297px;
    padding: 22px 34px !important;
    overflow: visible;

    background:
        radial-gradient(
            circle at top right,
            rgba(227, 17, 255, 0.065),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf7f9 100%
        );

    border: 1px solid #e3d8df;
    border-left: 4px solid #610c3a;
    border-top: 3px solid #e311ff;
    border-radius: 0 22px 22px 0;

    box-shadow:
        0 15px 34px rgba(53, 18, 47, 0.14),
        0 4px 12px rgba(53, 18, 47, 0.07);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.homepage-issue-description-wrapper:hover {
    border-left-color: #e311ff;

    box-shadow:
        0 19px 40px rgba(53, 18, 47, 0.19),
        0 5px 14px rgba(53, 18, 47, 0.09);

    transform: translateY(-2px);
}

/* Dekorasi lembut di kanan atas */
.homepage-issue-description-wrapper::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 22px;

    width: 65px;
    height: 65px;

    background: rgba(227, 17, 255, 0.07);
    border-radius: 50%;
    filter: blur(16px);
    pointer-events: none;
}

/* Judul issue */
.homepage-issue-description .h2 {
    position: relative;
    margin: 0 0 13px;

    color: #35122f;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-weight: 300;
    line-height: 1.27;
}

/* Garis aksen di bawah judul */
.homepage-issue-description .h2::after {
    content: "";
    display: block;

    width: 48px;
    height: 3px;
    margin-top: 9px;

    background: linear-gradient(
        90deg,
        #e311ff,
        #610c3a
    );

    border-radius: 999px;
}

/* Deskripsi */
.homepage-issue-description-text {
    position: relative;
    z-index: 1;

    color: #443944;

    font-family: "Perpetua", Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    text-align: justify;
}

.homepage-issue-description-text > a {
    color: #610c3a;

    font-family: "Perpetua", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.homepage-issue-description-text > a:hover,
.homepage-issue-description-text > a:focus {
    color: #e311ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================================
   CURRENT ISSUE BUTTONS
   Proporsional dan setema dengan panel J-HyTEL
   ========================================================= */

/* Kelompok tombol */
.jhytel-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 18px;
}

/* Dasar semua tombol */
.jhytel-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    font-family: "NexusSansTF-Regular", Arial, sans-serif;
    line-height: 1;
    text-decoration: none;

    border-radius: 11px;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/* =========================================================
   TOMBOL UTAMA: EXPLORE CURRENT ISSUE
   ========================================================= */

.jhytel-hero-button-primary {
    gap: 10px;
    padding: 8px 15px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.16),
            transparent 46%
        ),
        linear-gradient(
            135deg,
            #851758 0%,
            #610c3a 48%,
            #35122f 100%
        );

    border: 1px solid rgba(97, 12, 58, 0.7);
    border-radius: 11px;

    box-shadow:
        0 8px 18px rgba(53, 18, 47, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* Lingkaran ikon */
.jhytel-hero-button-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #610c3a;
    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.14);

    transition:
        color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.jhytel-hero-button-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Teks tombol utama */
.jhytel-hero-button-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;

    text-align: left;
}

.jhytel-hero-button-text small {
    color: rgba(255, 255, 255, 0.74);
    font-family: 'Perpetua';
    font-weight: 300;
    letter-spacing: 0.075em;
    line-height: 1;
}

.jhytel-hero-button-text strong {
    color: #ffffff;
    font-weight: 300;
    line-height: 1.15;
    white-space: nowrap;
    font-family: 'Perpetua';
}

/* Panah tombol utama */
.jhytel-hero-button-arrow {
    margin-left: 3px;

    color: rgba(255, 255, 255, 0.9);

    font-family: 'Perpetua', sans-serif;
    font-size: 18px;
    line-height: 1;

    transition: transform 0.18s ease;
}

/* Hover tombol utama */
.jhytel-hero-button-primary:hover,
.jhytel-hero-button-primary:focus {
    color: #ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.2),
            transparent 46%
        ),
        linear-gradient(
            135deg,
            #a01d6b 0%,
            #75134c 50%,
            #451334 100%
        );

    border-color: #e311ff;

    box-shadow:
        0 12px 25px rgba(53, 18, 47, 0.3),
        0 0 0 3px rgba(227, 17, 255, 0.08);

    text-decoration: none;
    transform: translateY(-3px);
}

.jhytel-hero-button-primary:hover
.jhytel-hero-button-icon,
.jhytel-hero-button-primary:focus
.jhytel-hero-button-icon {
    color: #851758;
    background: #ffffff;
    transform: scale(1.05);
}

.jhytel-hero-button-primary:hover
.jhytel-hero-button-arrow,
.jhytel-hero-button-primary:focus
.jhytel-hero-button-arrow {
    transform: translateX(4px);
}

/* =========================================================
   TOMBOL SEKUNDER: DISCOVER OUR SCOPE
   ========================================================= */

.jhytel-hero-button-secondary {
    gap: 8px;
    padding: 10px 16px;

    color: #610c3a;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #faf7f9
        );

    border: 1px solid rgba(97, 12, 58, 0.28);
    border-radius: 11px;

    box-shadow:
        0 6px 14px rgba(53, 18, 47, 0.09);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Panah tombol sekunder */
.jhytel-hero-button-secondary span:last-child {
    color: #851758;
    font-family: Arial, sans-serif;
    font-size: 15px;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

/* Hover tombol sekunder */
.jhytel-hero-button-secondary:hover,
.jhytel-hero-button-secondary:focus {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #75164e,
            #481035
        );

    border-color: #610c3a;

    box-shadow:
        0 10px 20px rgba(53, 18, 47, 0.2);

    text-decoration: none;
    transform: translateY(-3px);
}

.jhytel-hero-button-secondary:hover span:last-child,
.jhytel-hero-button-secondary:focus span:last-child {
    color: #ffffff;
    transform: translate(2px, -2px);
}

/* Fokus keyboard */
.jhytel-hero-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(227, 17, 255, 0.17),
        0 10px 22px rgba(53, 18, 47, 0.22);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
    .jhytel-hero-actions {
        gap: 8px;
    }

    .jhytel-hero-button {
        min-height: 46px;
    }

    .jhytel-hero-button-primary {
        padding: 7px 13px;
    }

    .jhytel-hero-button-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .jhytel-hero-button-text strong {
        font-size: 12px;
    }
}

@media (max-width: 520px) {
    .jhytel-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .jhytel-hero-button {
        width: 100%;
    }

    .jhytel-hero-button-primary {
        justify-content: flex-start;
    }

    .jhytel-hero-button-arrow {
        margin-left: auto;
    }

    .jhytel-hero-button-secondary {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jhytel-hero-button,
    .jhytel-hero-button-icon,
    .jhytel-hero-button-arrow,
    .jhytel-hero-button-secondary span:last-child {
        transition: none;
    }
}

/* Mencegah tombol Current Issue terpotong */
.homepage-issue-description {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding-bottom: 4px;

    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.homepage-issue-description-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.jhytel-hero-actions {
    position: relative;
    z-index: 2;

    width: 100%;
    height: auto;
    min-height: 52px;
    margin: 18px 0 0;
    padding: 0 0 3px;

    overflow: visible;
}

/* =========================================================
   ALIGN CURRENT ISSUE WITH PANELS BELOW
   ========================================================= */

@media (min-width: 721px) {
    /*
     * Panel bawah menggunakan lebar bagian dalam container OJS,
     * bukan menghitung ulang lebar dengan calc().
     */
    .container-homepage-issue .jh-panel-section {
        width: 100%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    /*
     * Lebar kolom Open Access disesuaikan dengan area cover,
     * sehingga kotak pesan editor sejajar dengan container
     * informasi Current Issue di atasnya.
     */
    .container-homepage-issue .jh-access-row {
        grid-template-columns: 243px minmax(0, 1fr);
        gap: 12px;
    }
}
/* =====================================================
   MINIMAL ABOUT JOURNAL
   ===================================================== */

.jhytel-about-minimal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	margin: 22px 0;
	padding: 20px 24px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 38%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-about-heading {
	max-width: 650px;
}

.jhytel-about-label,
.jhytel-about-modal-kicker {
	display: block;
	margin-bottom: 5px;

	color: #851758;
	font-family: "NexusSansTF-Regular", Arial, sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.jhytel-about-heading h2 {
	margin: 0 0 5px;

	color: #35122f;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
}

.jhytel-about-heading p {
	margin: 0;

	color: #655a62;
	font-size: 14px;
	line-height: 1.55;
}


/* Tombol About */

.jhytel-about-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;

	min-height: 54px;
	padding: 8px 15px;

	color: #ffffff;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 255, 255, 0.16),
			transparent 45%
		),
		linear-gradient(135deg, #851758, #35122f);

	border: 1px solid #610c3a;
	border-radius: 11px;

	box-shadow: 0 8px 18px rgba(53, 18, 47, 0.2);
	cursor: pointer;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

.jhytel-about-button:hover,
.jhytel-about-button:focus {
	color: #ffffff;
	background: linear-gradient(135deg, #9b1b67, #4b1539);
	box-shadow: 0 11px 23px rgba(53, 18, 47, 0.28);
	transform: translateY(-2px);
	outline: none;
}

.jhytel-about-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	color: #610c3a;
	background: #ffffff;
	border-radius: 50%;
}

.jhytel-about-button-icon svg {
	width: 19px;
	height: 19px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jhytel-about-button-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.jhytel-about-button-text small {
	color: rgba(255, 255, 255, 0.72);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.jhytel-about-button-text strong {
	color: #ffffff;
	font-size: 13px;
	line-height: 1.25;
}

.jhytel-about-button-arrow {
	margin-left: 5px;
	color: #ffffff;
	font-size: 18px;
}


/* =====================================================
   MODAL / JENDELA ABOUT
   ===================================================== */

body.jhytel-modal-open {
	overflow: hidden;
}

.jhytel-about-modal {
	position: fixed;
	z-index: 99999;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.jhytel-about-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.jhytel-about-modal-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(24, 10, 22, 0.72);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.jhytel-about-modal-dialog {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 860px;
	max-height: calc(100vh - 48px);

	background: #ffffff;
	border: 1px solid rgba(227, 17, 255, 0.35);
	border-top: 4px solid #e311ff;
	border-radius: 18px;

	box-shadow: 0 24px 70px rgba(24, 10, 22, 0.34);
	overflow: hidden;

	transform: translateY(18px) scale(0.98);
	transition: transform 0.22s ease;
}

.jhytel-about-modal.is-open .jhytel-about-modal-dialog {
	transform: translateY(0) scale(1);
}

.jhytel-about-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;

	padding: 20px 24px 16px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.1),
			transparent 48%
		),
		#ffffff;

	border-bottom: 1px solid #eadfe7;
}

.jhytel-about-modal-header h2 {
	margin: 0;

	color: #35122f;
	font-size: 25px;
	line-height: 1.2;
}

.jhytel-about-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;
	padding: 0;

	color: #610c3a;
	background: #f7eff4;
	border: 1px solid #e3d3dd;
	border-radius: 50%;

	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}

.jhytel-about-modal-close:hover,
.jhytel-about-modal-close:focus {
	color: #ffffff;
	background: #610c3a;
	border-color: #610c3a;
	outline: none;
}

.jhytel-about-modal-body {
	max-height: calc(100vh - 210px);
	padding: 20px 24px;
	overflow-y: auto;
}

.jhytel-about-information {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px 24px;
}

.jhytel-about-row {
	display: grid;
	grid-template-columns: 125px minmax(0, 1fr);
	gap: 12px;

	padding: 9px 0;
	border-bottom: 1px solid #eee7ec;
}

.jhytel-about-key {
	color: #74676f;
	font-family: "NexusSansTF-Regular", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
}

.jhytel-about-value {
	min-width: 0;

	color: #2f252c;
	font-size: 13px;
	line-height: 1.45;
}

.jhytel-about-value strong {
	color: #610c3a;
}

.jhytel-about-value a {
	color: #851758;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-about-value a:hover {
	color: #610c3a;
	text-decoration: underline;
}

.jhytel-about-value small {
	display: block;
	margin-top: 2px;

	color: #81757d;
	font-size: 11px;
}

.jhytel-about-affiliation {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 5px;
}

.jhytel-about-affiliation img {
	width: 16px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(53, 18, 47, 0.15);
}

.jhytel-about-collaboration {
	margin: 0;
	padding-left: 17px;
}

.jhytel-about-subjects {
	margin-top: 18px;
	padding-top: 15px;
	border-top: 1px solid #e8dde4;
}

.jhytel-about-subjects > strong {
	display: block;
	margin-bottom: 9px;

	color: #35122f;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.jhytel-about-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.jhytel-about-tags span {
	padding: 6px 10px;

	color: #610c3a;
	background: #f8edf5;
	border: 1px solid #ead7e5;
	border-radius: 999px;

	font-size: 11px;
	font-weight: 700;
}

.jhytel-about-tags span:nth-child(2) {
	color: #2f6440;
	background: #edf8f0;
	border-color: #d4ead9;
}

.jhytel-about-tags span:nth-child(3) {
	color: #58338a;
	background: #f2edfb;
	border-color: #dfd4f1;
}

.jhytel-about-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;

	padding: 14px 24px;

	background: #fbf8fa;
	border-top: 1px solid #e8dde4;
}

.jhytel-about-more {
	color: #610c3a;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-about-more:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-about-done {
	min-height: 38px;
	padding: 7px 18px;

	color: #ffffff;
	background: #610c3a;
	border: 1px solid #610c3a;
	border-radius: 8px;

	font-weight: 700;
	cursor: pointer;
}

.jhytel-about-done:hover,
.jhytel-about-done:focus {
	background: #851758;
	border-color: #851758;
	outline: none;
}


/* Tablet */

@media (max-width: 800px) {
	.jhytel-about-information {
		grid-template-columns: 1fr;
	}
}


/* Ponsel */

@media (max-width: 600px) {
	.jhytel-about-minimal {
		flex-direction: column;
		align-items: stretch;
		padding: 18px;
	}

	.jhytel-about-button {
		width: 100%;
		justify-content: flex-start;
	}

	.jhytel-about-button-arrow {
		margin-left: auto;
	}

	.jhytel-about-modal {
		align-items: flex-end;
		padding: 10px;
	}

	.jhytel-about-modal-dialog {
		max-height: calc(100vh - 20px);
		border-radius: 15px;
	}

	.jhytel-about-modal-header,
	.jhytel-about-modal-body,
	.jhytel-about-modal-footer {
		padding-right: 16px;
		padding-left: 16px;
	}

	.jhytel-about-modal-body {
		max-height: calc(100vh - 190px);
	}

	.jhytel-about-row {
		grid-template-columns: 105px minmax(0, 1fr);
	}

	.jhytel-about-modal-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.jhytel-about-done {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jhytel-about-modal,
	.jhytel-about-modal-dialog,
	.jhytel-about-button {
		transition: none;
	}
}

/* =====================================================
   COMPACT GEOGRAPHICAL DIVERSITY
   ===================================================== */

.jhytel-geo-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 22px;

	margin: 20px 0;
	padding: 17px 20px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 42%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-geo-summary {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}

.jhytel-geo-icon {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border-radius: 50%;

	box-shadow: 0 6px 14px rgba(53, 18, 47, 0.2);
}

.jhytel-geo-icon svg {
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jhytel-geo-heading > span,
.jhytel-geo-window-header > div > span {
	display: block;
	margin-bottom: 2px;

	color: #851758;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.jhytel-geo-heading h3 {
	margin: 0 0 3px;

	color: #35122f;
	font-size: 17px;
	line-height: 1.25;
}

.jhytel-geo-heading p {
	margin: 0;

	color: #756970;
	font-size: 12px;
	line-height: 1.4;
}

.jhytel-geo-statistics {
	display: flex;
	align-items: center;
	gap: 8px;
}

.jhytel-geo-stat {
	min-width: 70px;
	padding: 7px 10px;

	background: #faf6f9;
	border: 1px solid #eadde6;
	border-radius: 9px;
	text-align: center;
}

.jhytel-geo-stat strong {
	display: block;

	color: #610c3a;
	font-size: 19px;
	line-height: 1;
}

.jhytel-geo-stat span {
	display: block;
	margin-top: 3px;

	color: #786b73;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.jhytel-geo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 43px;
	padding: 8px 14px;

	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border: 1px solid #610c3a;
	border-radius: 9px;

	font-size: 14px;
	font-weight: 700;
	text-decoration: none;

	box-shadow: 0 7px 16px rgba(53, 18, 47, 0.18);
	white-space: nowrap;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.jhytel-geo-button:hover,
.jhytel-geo-button:focus {
	color: #ffffff;
	box-shadow: 0 10px 20px rgba(53, 18, 47, 0.27);
	text-decoration: none;
	transform: translateY(-2px);
}


/* Modal */

.jhytel-geo-modal {
	position: fixed;
	z-index: 99999;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		visibility 0.2s ease,
		opacity 0.2s ease;
}

.jhytel-geo-modal:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.jhytel-geo-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(24, 9, 22, 0.78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.jhytel-geo-window {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 920px;

	background: #ffffff;
	border: 1px solid rgba(227, 17, 255, 0.38);
	border-top: 4px solid #e311ff;
	border-radius: 17px;

	box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
	overflow: hidden;

	transform: translateY(15px) scale(0.98);
	transition: transform 0.2s ease;
}

.jhytel-geo-modal:target .jhytel-geo-window {
	transform: translateY(0) scale(1);
}

.jhytel-geo-window-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;

	padding: 14px 18px 12px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.1),
			transparent 48%
		),
		#ffffff;

	border-bottom: 1px solid #eadfe7;
}

.jhytel-geo-window-header h2 {
	margin: 0 0 2px;

	color: #35122f;
	font-size: 21px;
	line-height: 1.2;
}

.jhytel-geo-window-header p {
	margin: 0;
	color: #756970;
	font-size: 11px;
}

.jhytel-geo-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	color: #610c3a;
	background: #f7eff4;
	border: 1px solid #e3d3dd;
	border-radius: 50%;

	font-size: 24px;
	line-height: 1;
	text-decoration: none;
}

.jhytel-geo-close:hover {
	color: #ffffff;
	background: #610c3a;
	text-decoration: none;
}


/* Responsive iframe without adding homepage height */

.homepage-additional-content {
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.jhytel-geo-map {
	position: relative;
    height: 437px;
	
	background: #fafafa;
	overflow: hidden;
}

.jhytel-geo-map iframe {
	position: absolute;
	top: 0;
	left: 50%;

	width: 939px !important;
	height: 580px !important;

	border: 0;

	transform: translateX(-50%) scale(0.74);
	transform-origin: top center;
}


/* Country chips */

.jhytel-geo-countries {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 7px;

	padding: 10px 18px;

	background: #ffffff;
	border-top: 1px solid #eee7ec;
}

.jhytel-geo-countries span {
	display: inline-flex;
	align-items: center;
	gap: 5px;

	padding: 4px 7px;

	color: #4b3c45;
	background: #f8f3f7;
	border: 1px solid #eadde6;
	border-radius: 999px;

	font-size: 10px;
	line-height: 1;
}

.jhytel-geo-countries img {
	width: 16px !important;
	height: 12px !important;

	object-fit: cover;
	border-radius: 1px;

	box-shadow: 0 0 0 1px rgba(53, 18, 47, 0.16);
}

.jhytel-geo-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	padding: 10px 18px;

	background: #fbf8fa;
	border-top: 1px solid #e8dde4;
}

.jhytel-geo-footer > span {
	color: #786b73;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.jhytel-geo-footer a {
	padding: 7px 17px;

	color: #ffffff;
	background: #610c3a;
	border-radius: 7px;

	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}


/* Responsive */

@media (max-width: 800px) {
	.jhytel-geo-card {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.jhytel-geo-statistics {
		display: none;
	}
}

@media (max-width: 600px) {
	.jhytel-geo-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.jhytel-geo-button {
		width: 100%;
		box-sizing: border-box;
	}

	.jhytel-geo-modal {
		align-items: flex-start;
		padding: 8px;
		overflow-y: auto;
	}

	.jhytel-geo-window {
		margin: 0 auto;
		border-radius: 14px;
	}

	.jhytel-geo-map {
		height: 310px;
	}

	.jhytel-geo-countries {
		max-height: 100px;
		overflow-y: auto;
	}
}
/* =====================================================
   COMPACT JOURNAL IMPACT
   ===================================================== */

.jhytel-impact-card {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) auto auto;
	align-items: center;
	gap: 24px;

	margin: 20px 0;
	padding: 18px 20px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 40%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-impact-intro {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}

.jhytel-impact-icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border-radius: 50%;

	box-shadow: 0 7px 15px rgba(53, 18, 47, 0.2);
}

.jhytel-impact-icon svg {
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jhytel-impact-intro h2 {
	margin: 0 0 4px;

	color: #35122f;
	font-size: 18px;
	line-height: 1.25;
}

.jhytel-impact-intro p {
	max-width: 440px;
	margin: 0;

	color: #756970;
	font-size: 12px;
	line-height: 1.45;
}


/* Statistics */

.jhytel-impact-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(58px, 1fr));
	gap: 7px;
}

.jhytel-impact-metric {
	min-width: 66px;
	padding: 7px 8px;

	background: #faf6f9;
	border: 1px solid #eadde6;
	border-radius: 9px;
	text-align: center;
}

.jhytel-impact-metric strong {
	display: block;

	color: #610c3a;
	font-size: 18px;
	line-height: 1;
}

.jhytel-impact-metric span {
	display: block;
	margin-top: 4px;

	color: #786b73;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}


/* Buttons */

.jhytel-impact-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jhytel-impact-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	min-height: 37px;
	padding: 7px 12px;

	border-radius: 8px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.jhytel-impact-button-primary {
	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border: 1px solid #610c3a;

	box-shadow: 0 6px 14px rgba(53, 18, 47, 0.18);
}

.jhytel-impact-button-primary:hover,
.jhytel-impact-button-primary:focus {
	color: #ffffff;
	box-shadow: 0 9px 19px rgba(53, 18, 47, 0.27);
	text-decoration: none;
	transform: translateY(-2px);
}

.jhytel-impact-button-secondary {
	color: #610c3a;
	background: #ffffff;
	border: 1px solid #d9c5d2;
}

.jhytel-impact-button-secondary:hover,
.jhytel-impact-button-secondary:focus {
	color: #ffffff;
	background: #610c3a;
	border-color: #610c3a;
	text-decoration: none;
}


/* =====================================================
   IMPACT MODAL
   ===================================================== */

.jhytel-impact-modal {
	position: fixed;
	z-index: 99999;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		visibility 0.2s ease,
		opacity 0.2s ease;
}

.jhytel-impact-modal:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.jhytel-impact-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(24, 9, 22, 0.78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.jhytel-impact-window {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 850px;

	background: #ffffff;
	border: 1px solid rgba(227, 17, 255, 0.36);
	border-top: 4px solid #e311ff;
	border-radius: 17px;

	box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
	overflow: hidden;

	transform: translateY(15px) scale(0.98);
	transition: transform 0.2s ease;
}

.jhytel-impact-modal:target .jhytel-impact-window {
	transform: translateY(0) scale(1);
}

.jhytel-impact-window-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;

	padding: 15px 19px 12px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.1),
			transparent 48%
		),
		#ffffff;

	border-bottom: 1px solid #eadfe7;
}

.jhytel-impact-window-header h2 {
	margin: 0 0 3px;

	color: #35122f;
	font-size: 21px;
	line-height: 1.2;
}

.jhytel-impact-window-header p {
	margin: 0;
	color: #756970;
	font-size: 11px;
}

.jhytel-impact-close {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	color: #610c3a;
	background: #f7eff4;
	border: 1px solid #e3d3dd;
	border-radius: 50%;

	font-size: 24px;
	line-height: 1;
	text-decoration: none;
}

.jhytel-impact-close:hover {
	color: #ffffff;
	background: #610c3a;
	text-decoration: none;
}


/* Modal content */

.jhytel-impact-window-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;

	padding: 14px 18px;
}

.jhytel-impact-source {
	padding: 13px;

	background: #fcfafb;
	border: 1px solid #e9dfe5;
	border-radius: 14px;
}

.jhytel-impact-source-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;

	margin-bottom: 11px;
}

.jhytel-impact-source-header span {
	display: block;

	color: #8b7d85;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.jhytel-impact-source-header h3 {
	margin: 2px 0 0;

	color: #35122f;
	font-size: 16px;
}

.jhytel-impact-source-header a,
.jhytel-impact-status {
	color: #851758 !important;
	font-size: 14px !important;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-impact-source-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.jhytel-impact-source:first-child .jhytel-impact-source-metrics {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jhytel-impact-source-metrics > div {
	padding: 8px 5px;

	background: #ffffff;
	border: 1px solid #eee5eb;
	border-radius: 7px;
	text-align: center;
}

.jhytel-impact-source-metrics strong {
	display: block;

	color: #610c3a;
	font-size: 17px;
	line-height: 1;
}

.jhytel-impact-source-metrics span {
	display: block;
	margin-top: 4px;

	color: #7e7179;
	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}


/* Quartiles */

.jhytel-impact-quartiles {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.jhytel-impact-quartile {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 9px 11px;

	background: #ffffff;
	border: 1px solid #e9dfe5;
	border-radius: 9px;
}

.jhytel-quartile-badge {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	color: #ffffff;
	border-radius: 8px;

	font-size: 14px;
	font-weight: 800;
}

.jhytel-quartile-badge.q1 {
	background: #2b7a4b;
}

.jhytel-quartile-badge.q2 {
	background: #b87816;
}

.jhytel-quartile-badge.q3 {
	background: #851758;
}

.jhytel-impact-quartile strong {
	display: block;
	color: #35122f;
	font-size: 14px;
}

.jhytel-impact-quartile small {
	display: block;
	margin-top: 2px;

	color: #83767e;
	font-size: 14px;
	line-height: 1.25;
}


/* Note */

.jhytel-impact-note {
	grid-column: 1 / -1;

	padding: 9px 12px;

	background: linear-gradient(90deg, #faf3f8, #ffffff);
	border-left: 3px solid #851758;
	border-radius: 0 8px 8px 0;
}

.jhytel-impact-note strong {
	color: #610c3a;
	font-size: 10px;
	text-transform: uppercase;
}

.jhytel-impact-note p {
	margin: 3px 0 0;

	color: #6e6269;
	font-size: 10px;
	line-height: 1.4;
}


/* Footer */

.jhytel-impact-window-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	padding: 10px 18px;

	background: #fbf8fa;
	border-top: 1px solid #e8dde4;
}

.jhytel-impact-window-footer > div {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.jhytel-impact-window-footer > div a {
	color: #851758;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-impact-done {
	padding: 7px 17px;

	color: #ffffff;
	background: #610c3a;
	border-radius: 7px;

	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-impact-done:hover {
	color: #ffffff;
	background: #851758;
	text-decoration: none;
}


/* Responsive */

@media (max-width: 900px) {
	.jhytel-impact-card {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.jhytel-impact-actions {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.jhytel-impact-button {
		flex: 1;
	}
}

@media (max-width: 650px) {
	.jhytel-impact-card {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.jhytel-impact-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jhytel-impact-actions {
		flex-direction: column;
	}

	.jhytel-impact-modal {
		align-items: flex-start;
		padding: 8px;
		overflow-y: auto;
	}

	.jhytel-impact-window {
		margin: 0 auto;
		border-radius: 14px;
	}

	.jhytel-impact-window-content {
		grid-template-columns: 1fr;
	}

	.jhytel-impact-quartiles {
		grid-column: auto;
		grid-template-columns: 1fr;
	}

	.jhytel-impact-note {
		grid-column: auto;
	}

	.jhytel-impact-source-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jhytel-impact-source:first-child .jhytel-impact-source-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =====================================================
   CLICKABLE QUARTILE ACCORDION
   ===================================================== */

.jhytel-quartile-accordion {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 8px;
}

.jhytel-quartile-details {
	min-width: 0;

	background: #ffffff;
	border: 1px solid #e9dfe5;
	border-radius: 9px;

	overflow: hidden;

	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.jhytel-quartile-details:hover {
	border-color: #d6bdcd;
	box-shadow: 0 5px 13px rgba(53, 18, 47, 0.08);
}

.jhytel-quartile-details[open] {
	grid-column: 1 / -1;

	border-color: #cdaabd;
	box-shadow: 0 8px 18px rgba(53, 18, 47, 0.1);
}


/* Summary button */

.jhytel-quartile-details summary {
	display: flex;
	align-items: center;
	gap: 10px;

	min-height: 52px;
	padding: 8px 10px;

	cursor: pointer;
	list-style: none;
	user-select: none;
}

.jhytel-quartile-details summary::-webkit-details-marker {
	display: none;
}

.jhytel-quartile-details summary::marker {
	display: none;
	content: "";
}

.jhytel-quartile-details summary:focus {
	outline: 2px solid rgba(227, 17, 255, 0.4);
	outline-offset: -2px;
}

.jhytel-quartile-summary-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.jhytel-quartile-summary-text strong {
	color: #35122f;
	font-size: 14px;
	line-height: 1.25;
}

.jhytel-quartile-summary-text small {
	margin-top: 2px;

	color: #83767e;
	font-size: 14px;
	line-height: 1.25;
}

.jhytel-quartile-arrow {
	flex: 0 0 auto;

	color: #851758;
	font-size: 14px;
	font-weight: 700;

	transition: transform 0.18s ease;
}

.jhytel-quartile-details[open] .jhytel-quartile-arrow {
	transform: rotate(180deg);
}


/* Expanded content */

.jhytel-quartile-content {
	padding: 0 11px 11px;
	border-top: 1px solid #eee5eb;
}

.jhytel-quartile-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 22px;

	margin: 10px 0 0;
	padding-left: 25px;

	counter-reset: quartile-journal;
}

.jhytel-quartile-list li {
	position: relative;
	min-width: 0;
	padding: 6px 75px 6px 0;

	color: #756970;
	border-bottom: 1px dashed #eee4ea;

	font-size: 12px;
	line-height: 1.35;
}

.jhytel-quartile-list li::marker {
	color: #851758;
	font-weight: 700;
}

.jhytel-quartile-list li a {
	display: block;

	color: #4d253e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.jhytel-quartile-list li a:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-quartile-list li > span {
	position: absolute;
	top: 6px;
	right: 0;

	padding: 2px 5px;

	color: #ffffff;
	background: #610c3a;
	border-radius: 4px;

	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.jhytel-quartile-list li > small {
	display: block;
	margin-top: 2px;

	color: #958890;
	font-size: 12px;
}


/* Badge colors */

.jhytel-quartile-badge {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	color: #ffffff;
	border-radius: 8px;

	font-size: 14px;
	font-weight: 800;
}

.jhytel-quartile-badge.q1 {
	background: linear-gradient(135deg, #31885a, #185335);
}

.jhytel-quartile-badge.q2 {
	background: linear-gradient(135deg, #d28a1c, #965706);
}

.jhytel-quartile-badge.q3 {
	background: linear-gradient(135deg, #9b286e, #610c3a);
}


/* Mobile */

@media (max-width: 650px) {
	.jhytel-quartile-accordion {
		grid-template-columns: 1fr;
	}

	.jhytel-quartile-details[open] {
		grid-column: auto;
	}

	.jhytel-quartile-list {
		grid-template-columns: 1fr;
	}

	.jhytel-quartile-list li {
		padding-right: 70px;
	}
}


/* =====================================================
   J-HyTEL FOOTER HUB
   ===================================================== */

.jhytel-footerhub {
	display: grid;
	grid-template-columns:
		minmax(0, 1.2fr)
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(0, 0.9fr);
	gap: 10px;

	margin: 20px 0;
	padding: 12px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 40%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.09);
}

.jhytel-footerhub-card {
	display: flex;
	align-items: center;
	gap: 11px;

	min-width: 0;
	min-height: 92px;
	padding: 12px;

	background: #fcfafb;
	border: 1px solid #e9dfe5;
	border-radius: 11px;

	box-sizing: border-box;
	text-decoration: none;

	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.jhytel-footerhub-card-link:hover,
.jhytel-footerhub-card-link:focus {
	border-color: #cdaabd;
	box-shadow: 0 8px 17px rgba(53, 18, 47, 0.13);
	text-decoration: none;
	transform: translateY(-2px);
}

.jhytel-footerhub-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}


/* Text */

.jhytel-footerhub-label {
	display: block;

	color: #851758;
	font-family: "NexusSansTF-Regular", Arial, sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.075em;
	line-height: 1.25;
	text-transform: uppercase;
}

.jhytel-footerhub-title {
	display: block;
	margin-top: 4px;

	color: #35122f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

a.jhytel-footerhub-title:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-footerhub-description {
	display: block;
	margin-top: 4px;

	color: #7c6f77;
	font-size: 10px;
	line-height: 1.4;
	text-decoration: none;
}

a.jhytel-footerhub-description:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-footerhub-arrow {
	flex: 0 0 auto;

	color: #851758;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}


/* =====================================================
   BASIC ROUND ICON
   ===================================================== */

.jhytel-footerhub-icon {
	display: inline-flex !important;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;

	width: 44px !important;
	height: 44px !important;

	color: #ffffff !important;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 255, 255, 0.2),
			transparent 45%
		),
		linear-gradient(135deg, #851758, #35122f);

	border: 2px solid rgba(227, 17, 255, 0.45);
	border-radius: 50%;

	box-shadow:
		0 6px 14px rgba(53, 18, 47, 0.21),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.jhytel-footerhub-icon > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: #ffffff !important;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
}


/* Music */

.jhytel-footerhub-music-icon > span {
	font-size: 25px;
}


/* Visitor eye */

.jhytel-footerhub-visitor-icon > span {
	width: 24px;
	height: 15px;

	color: #ffffff !important;
	background: transparent;

	border: 2px solid #ffffff;
	border-radius: 50% / 65%;

	font-family: Arial, sans-serif;
	font-size: 8px;
	line-height: 1;
}


/* =====================================================
   SDG ICON
   ===================================================== */

.jhytel-footerhub-sdg {
	display: inline-flex !important;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;

	width: 46px !important;
	height: 46px !important;

	/* Fallback */
	background: #851758;

	background:
		conic-gradient(
			#e5243b 0deg 21deg,
			#dda63a 21deg 42deg,
			#4c9f38 42deg 63deg,
			#c5192d 63deg 84deg,
			#ff3a21 84deg 105deg,
			#26bde2 105deg 126deg,
			#fcc30b 126deg 147deg,
			#a21942 147deg 168deg,
			#fd6925 168deg 189deg,
			#dd1367 189deg 210deg,
			#fd9d24 210deg 231deg,
			#bf8b2e 231deg 252deg,
			#3f7e44 252deg 273deg,
			#0a97d9 273deg 294deg,
			#56c02b 294deg 315deg,
			#00689d 315deg 336deg,
			#19486a 336deg 360deg
		);

	border: 2px solid #ffffff;
	border-radius: 50%;

	box-shadow:
		0 6px 14px rgba(53, 18, 47, 0.2),
		0 0 0 1px rgba(53, 18, 47, 0.13);
}

.jhytel-footerhub-sdg > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: 29px !important;
	height: 29px !important;

	color: #610c3a !important;
	background: #ffffff !important;
	border-radius: 50%;

	font-family: Arial, sans-serif;
	font-size: 8px !important;
	font-weight: 800;
	line-height: 1;
}


/* Audio */

.jhytel-footerhub-audio {
	display: block;

	width: 100%;
	max-width: 210px;
	height: 32px;
	margin-top: 6px;
}


/* Visitor button */

.jhytel-footerhub-visitor-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;

	margin-top: 6px;

	color: #851758;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.jhytel-footerhub-visitor-button:hover,
.jhytel-footerhub-visitor-button:focus {
	color: #610c3a;
	text-decoration: underline;
}


/* =====================================================
   VISITOR MODAL
   ===================================================== */

.jhytel-footerhub-modal {
	position: fixed;
	z-index: 99999;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		visibility 0.2s ease,
		opacity 0.2s ease;
}

.jhytel-footerhub-modal:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.jhytel-footerhub-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(24, 9, 22, 0.78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.jhytel-footerhub-window {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 880px;

	background: #ffffff;
	border: 1px solid rgba(227, 17, 255, 0.38);
	border-top: 4px solid #e311ff;
	border-radius: 17px;

	box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
	overflow: hidden;

	transform: translateY(15px) scale(0.98);
	transition: transform 0.2s ease;
}

.jhytel-footerhub-modal:target
.jhytel-footerhub-window {
	transform: translateY(0) scale(1);
}


/* Modal header */

.jhytel-footerhub-window-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;

	padding: 16px 19px 13px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.1),
			transparent 48%
		),
		#ffffff;

	border-bottom: 1px solid #eadfe7;
}

.jhytel-footerhub-window-header h2 {
	margin: 4px 0;

	color: #35122f;
	font-size: 22px;
	line-height: 1.2;
}

.jhytel-footerhub-window-header p {
	margin: 0;

	color: #756970;
	font-size: 12px;
	line-height: 1.4;
}

.jhytel-footerhub-close {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	color: #610c3a;
	background: #f7eff4;
	border: 1px solid #e3d3dd;
	border-radius: 50%;

	font-size: 25px;
	line-height: 1;
	text-decoration: none;
}

.jhytel-footerhub-close:hover {
	color: #ffffff;
	background: #610c3a;
	text-decoration: none;
}


/* Modal content */

.jhytel-footerhub-window-content {
	display: grid;
	grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
	gap: 13px;

	padding: 15px 18px;
}

.jhytel-footerhub-counter-card {
	min-width: 0;
	padding: 13px;

	background: #fcfafb;
	border: 1px solid #e9dfe5;
	border-radius: 11px;
}

.jhytel-footerhub-counter-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;

	margin-bottom: 10px;
}

.jhytel-footerhub-counter-header span {
	display: block;

	color: #851758;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jhytel-footerhub-counter-header strong {
	display: block;
	margin-top: 3px;

	color: #35122f;
	font-size: 13px;
}

.jhytel-footerhub-counter-header > a {
	color: #851758;
	font-size: 9px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.jhytel-footerhub-statcounter {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 95px;

	background: #ffffff;
	border: 1px solid #eee5eb;
	border-radius: 8px;
}

.jhytel-footerhub-statcounter img,
.jhytel-footerhub-flagcounter img {
	display: block;

	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.jhytel-footerhub-flagcounter {
	display: block;
	text-align: center;
}


/* Modal footer */

.jhytel-footerhub-window-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	padding: 11px 18px;

	background: #fbf8fa;
	border-top: 1px solid #e8dde4;
}

.jhytel-footerhub-window-footer > span {
	color: #83767e;
	font-size: 9px;
}

.jhytel-footerhub-window-footer > a {
	padding: 7px 18px;

	color: #ffffff;
	background: #610c3a;
	border-radius: 7px;

	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-footerhub-window-footer > a:hover {
	color: #ffffff;
	background: #851758;
	text-decoration: none;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 950px) {
	.jhytel-footerhub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.jhytel-footerhub {
		grid-template-columns: 1fr;
	}

	.jhytel-footerhub-card {
		min-height: 88px;
	}

	.jhytel-footerhub-title {
		font-size: 14px;
	}

	.jhytel-footerhub-description,
	.jhytel-footerhub-visitor-button {
		font-size: 11px;
	}

	.jhytel-footerhub-modal {
		align-items: flex-start;
		padding: 8px;
		overflow-y: auto;
	}

	.jhytel-footerhub-window {
		margin: 0 auto;
		border-radius: 14px;
	}

	.jhytel-footerhub-window-content {
		grid-template-columns: 1fr;
	}

	.jhytel-footerhub-window-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.jhytel-footerhub-window-footer > a {
		text-align: center;
	}
}
/* =====================================================
   J-HyTEL JOURNAL NETWORK
   ===================================================== */

.jhytel-connectbar {
	display: grid;
	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(0, 0.78fr)
		minmax(0, 1.05fr)
		minmax(0, 0.85fr);
	align-items: center;
	gap: 10px;

	width: 100%;
	max-width: 100%;

	margin: 20px 0;
	padding: 16px 17px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 42%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);

	box-sizing: border-box;
	overflow: hidden;
}

.jhytel-connectbar > *,
.jhytel-connectbar-intro,
.jhytel-connectbar-heading,
.jhytel-connectbar-item,
.jhytel-connectbar-item-text,
.jhytel-connectbar-actions {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}


/* =====================================================
   J-HyTEL JOURNAL NETWORK
   ===================================================== */

.jhytel-connectbar {
	display: grid;
	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(0, 0.78fr)
		minmax(0, 1.05fr)
		minmax(0, 0.85fr);
	align-items: center;
	gap: 10px;

	width: 100%;
	max-width: 100%;

	margin: 20px 0;
	padding: 16px 17px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.08),
			transparent 42%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);

	box-sizing: border-box;
	overflow: hidden;
}

.jhytel-connectbar > *,
.jhytel-connectbar-intro,
.jhytel-connectbar-heading,
.jhytel-connectbar-item,
.jhytel-connectbar-item-text,
.jhytel-connectbar-actions {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}


/* =====================================================
   PUBLISHER
   ===================================================== */

.jhytel-connectbar-intro {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jhytel-connectbar-main-icon {
	display: inline-flex !important;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	color: #ffffff;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 255, 255, 0.18),
			transparent 45%
		),
		linear-gradient(135deg, #851758, #35122f);

	border: 2px solid rgba(227, 17, 255, 0.42);
	border-radius: 50%;

	box-shadow:
		0 7px 16px rgba(53, 18, 47, 0.21),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.jhytel-connectbar-main-icon span {
	color: #ffffff;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.jhytel-connectbar-heading {
	display: flex;
	flex-direction: column;
}

.jhytel-connectbar-kicker {
	display: block;

	color: #851758;
	font-family: 'Perpetua';
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.07em;
	line-height: 1.2;
}

.jhytel-connectbar-publisher {
	display: block;
	margin-top: 3px;

	color: #35122f;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.jhytel-connectbar-publisher:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-connectbar-heading p {
	margin: 3px 0 0;

	color: #756970;
	font-size: 9px;
	line-height: 1.4;
}

.jhytel-connectbar-email {
	display: block;
	max-width: 100%;
	margin-top: 3px;

	color: #851758;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;

	overflow-wrap: anywhere;
	word-break: break-word;
}

.jhytel-connectbar-email:hover {
	color: #610c3a;
	text-decoration: underline;
}


/* =====================================================
   SDG AND AUDIO CARDS
   ===================================================== */

.jhytel-connectbar-item {
	display: flex;
	align-items: center;
	gap: 9px;

	width: 100%;
	min-height: 80px;
	padding: 9px;

	background: #faf7f9;
	border: 1px solid #e8dce4;
	border-radius: 10px;
}

.jhytel-connectbar-item-text {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.jhytel-connectbar-item-text > span {
	display: block;

	color: #851758;
	font-family: "NexusSansTF-Regular", Arial, sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.jhytel-connectbar-item-text > a,
.jhytel-connectbar-item-text > strong {
	display: block;
	margin-top: 3px;

	color: #35122f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.jhytel-connectbar-item-text > a:hover {
	color: #851758;
	text-decoration: underline;
}

.jhytel-connectbar-item-text > small {
	display: block;
	margin-top: 3px;
	color: #82757d;
	line-height: 1.3;
}


/* SDG wheel */

.jhytel-connectbar-sdg {
	display: inline-flex !important;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;

	width: 42px !important;
	height: 42px !important;

	background: #851758;

	background:
		conic-gradient(
			#e5243b 0deg 21deg,
			#dda63a 21deg 42deg,
			#4c9f38 42deg 63deg,
			#c5192d 63deg 84deg,
			#ff3a21 84deg 105deg,
			#26bde2 105deg 126deg,
			#fcc30b 126deg 147deg,
			#a21942 147deg 168deg,
			#fd6925 168deg 189deg,
			#dd1367 189deg 210deg,
			#fd9d24 210deg 231deg,
			#bf8b2e 231deg 252deg,
			#3f7e44 252deg 273deg,
			#0a97d9 273deg 294deg,
			#56c02b 294deg 315deg,
			#00689d 315deg 336deg,
			#19486a 336deg 360deg
		);

	border: 2px solid #ffffff;
	border-radius: 50%;

	box-shadow:
		0 5px 12px rgba(53, 18, 47, 0.18),
		0 0 0 1px rgba(53, 18, 47, 0.12);
}

.jhytel-connectbar-sdg span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: 26px !important;
	height: 26px !important;

	color: #610c3a !important;
	background: #ffffff !important;
	border-radius: 50%;

	font-family: Arial, sans-serif;
	font-size: 7px !important;
	font-weight: 800;
	line-height: 1;
}


/* Music icon */

.jhytel-connectbar-round-icon {
	display: inline-flex !important;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border: 2px solid rgba(227, 17, 255, 0.42);
	border-radius: 50%;

	box-shadow: 0 6px 14px rgba(53, 18, 47, 0.19);
}

.jhytel-connectbar-round-icon span {
	color: #ffffff;

	font-family: Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}


/* Audio */

.jhytel-connectbar-audio audio {
	display: block;

	width: 100% !important;
	min-width: 0;
	max-width: 160px;
	height: 30px;
	margin-top: 5px;
}


/* =====================================================
   VISITOR BUTTONS
   ===================================================== */

.jhytel-connectbar-actions {
	display: flex;
	flex-direction: column;
	gap: 7px;

	width: 100%;
}

.jhytel-connectbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;

	width: 100%;
	max-width: 100%;
	min-height: 42px;
	padding: 8px 11px;

	border-radius: 9px;

	box-sizing: border-box;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	white-space: normal;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

.jhytel-connectbar-button > span:first-child {
	min-width: 0;
}

.jhytel-connectbar-button > span:last-child {
	flex: 0 0 auto;
	font-size: 15px;
}

.jhytel-connectbar-button-primary {
	color: #ffffff;
    font-family: 'Perpetua';
	background: linear-gradient(135deg, #851758, #35122f);
	border: 1px solid #610c3a;

	box-shadow: 0 6px 14px rgba(53, 18, 47, 0.18);
}

.jhytel-connectbar-button-primary:hover,
.jhytel-connectbar-button-primary:focus {
	color: #ffffff;
    font-family: 'Perpetua';
	box-shadow: 0 9px 19px rgba(53, 18, 47, 0.27);
	text-decoration: none;
	transform: translateY(-2px);
}

.jhytel-connectbar-button-secondary {
	color: #610c3a;
	background: #ffffff;
	border: 1px solid #dac6d3;
}

.jhytel-connectbar-button-secondary:hover,
.jhytel-connectbar-button-secondary:focus {
	color: #ffffff;
    font-family: 'Perpetua';
	background: #610c3a;
	border-color: #610c3a;
	text-decoration: none;
}


/* =====================================================
   RESPONSIVE CONNECTBAR
   ===================================================== */

@media (max-width: 950px) {
	.jhytel-connectbar {
		grid-template-columns:
			minmax(0, 1.2fr)
			minmax(0, 0.8fr)
			minmax(0, 1fr);
	}

	.jhytel-connectbar-actions {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.jhytel-connectbar-button {
		flex: 1;
	}
}

@media (max-width: 700px) {
	.jhytel-connectbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jhytel-connectbar-intro {
		grid-column: 1 / -1;
	}

	.jhytel-connectbar-actions {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.jhytel-connectbar {
		grid-template-columns: 1fr;
		padding: 14px;
	}

	.jhytel-connectbar-intro,
	.jhytel-connectbar-actions {
		grid-column: auto;
	}

	.jhytel-connectbar-actions {
		flex-direction: column;
	}

	.jhytel-connectbar-item {
		min-height: 82px;
	}

	.jhytel-connectbar-audio audio {
		max-width: 220px;
	}
}


/* =====================================================
   VISITOR POPUP
   ===================================================== */

.jhytel-visitors-popup {
	position: fixed;
	z-index: 999999;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 20px;

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		visibility 0.2s ease,
		opacity 0.2s ease;
}

.jhytel-visitors-popup:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.jhytel-visitors-popup-backdrop {
	position: absolute;
	z-index: 0;
	inset: 0;

	display: block;

	background: rgba(24, 9, 22, 0.78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.jhytel-visitors-popup-window {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 880px;

	background: #ffffff;
	border: 1px solid rgba(227, 17, 255, 0.38);
	border-top: 4px solid #e311ff;
	border-radius: 17px;

	box-shadow: 0 25px 75px rgba(24, 9, 22, 0.4);
	overflow: hidden;

	transform: translateY(15px) scale(0.98);
	transition: transform 0.2s ease;
}

.jhytel-visitors-popup:target
.jhytel-visitors-popup-window {
	transform: translateY(0) scale(1);
}


/* Popup header */

.jhytel-visitors-popup-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;

	padding: 16px 19px 13px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.1),
			transparent 48%
		),
		#ffffff;

	border-bottom: 1px solid #eadfe7;
}

.jhytel-visitors-popup-header > div > span {
	color: #851758;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jhytel-visitors-popup-header h2 {
	margin: 4px 0;

	color: #35122f;
	font-size: 22px;
	line-height: 1.2;
}

.jhytel-visitors-popup-header p {
	margin: 0;

	color: #756970;
	font-size: 12px;
	line-height: 1.4;
}

.jhytel-visitors-popup-close {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	color: #610c3a;
	background: #f7eff4;
	border: 1px solid #e3d3dd;
	border-radius: 50%;

	font-size: 25px;
	line-height: 1;
	text-decoration: none;
}

.jhytel-visitors-popup-close:hover {
	color: #ffffff;
	background: #610c3a;
	text-decoration: none;
}


/* Popup content */

.jhytel-visitors-popup-content {
	display: grid;
	grid-template-columns:
		minmax(180px, 0.55fr)
		minmax(0, 1.45fr);
	gap: 13px;

	padding: 15px 18px;
}

.jhytel-visitors-stat-card {
	min-width: 0;
	padding: 13px;

	background: #fcfafb;
	border: 1px solid #e9dfe5;
	border-radius: 11px;
}

.jhytel-visitors-stat-card > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;

	margin-bottom: 10px;
}

.jhytel-visitors-stat-card header span {
	display: block;

	color: #851758;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jhytel-visitors-stat-card header h3 {
	margin: 3px 0 0;

	color: #35122f;
	font-size: 13px;
}

.jhytel-visitors-stat-card header > a {
	color: #851758;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.jhytel-visitors-statcounter {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 100px;

	background: #ffffff;
	border: 1px solid #eee5eb;
	border-radius: 8px;
}

.jhytel-visitors-statcounter img,
.jhytel-visitors-flagcounter img {
	display: block;

	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.jhytel-visitors-flagcounter {
	display: block;
	text-align: center;
}


/* Popup footer */

.jhytel-visitors-popup-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	padding: 11px 18px;

	background: #fbf8fa;
	border-top: 1px solid #e8dde4;
}

.jhytel-visitors-popup-footer > span {
	color: #83767e;
	font-size: 9px;
}

.jhytel-visitors-popup-footer > a {
	padding: 7px 18px;

	color: #ffffff;
	background: #610c3a;
	border-radius: 7px;

	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-visitors-popup-footer > a:hover {
	color: #ffffff;
	background: #851758;
	text-decoration: none;
}


/* Popup mobile */

@media (max-width: 600px) {
	.jhytel-visitors-popup {
		align-items: flex-start;
		padding: 8px;
		overflow-y: auto;
	}

	.jhytel-visitors-popup-window {
		margin: 0 auto;
		border-radius: 14px;
	}

	.jhytel-visitors-popup-content {
		grid-template-columns: 1fr;
	}

	.jhytel-visitors-popup-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.jhytel-visitors-popup-footer > a {
		text-align: center;
	}
}
/* =====================================================
   CONNECTBAR: 3 KOTAK ATAS + 2 TOMBOL BAWAH
   ===================================================== */

.jhytel-connectbar {
	display: grid;

	/* Tiga kotak pada baris pertama */
	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(0, 0.8fr)
		minmax(0, 1.05fr);

	align-items: stretch;
	gap: 10px 12px;

	width: 100%;
	max-width: 100%;

	padding: 16px 17px;

	box-sizing: border-box;
	overflow: hidden;
}


/* Samakan tinggi tiga bagian atas */

.jhytel-connectbar-intro,
.jhytel-connectbar-item {
	min-width: 0;
	min-height: 88px;
	height: 100%;

	box-sizing: border-box;
}


/* Publisher diberi kartu tipis agar setara */

.jhytel-connectbar-intro {
	padding: 10px 12px;

	background: #fcfafb;
	border: 1px solid #e8dce4;
	border-radius: 10px;
}


/* SDG dan audio */

.jhytel-connectbar-item {
	padding: 10px 12px;
}


/* =====================================================
   DUA TOMBOL PADA BARIS KEDUA
   ===================================================== */

.jhytel-connectbar-actions {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;

	width: 100%;
	min-width: 0;
	margin-top: 2px;
}


/* Ukuran tombol diperbesar */

.jhytel-connectbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;

	width: 100%;
	max-width: 100%;
	min-height: 50px;
	padding: 11px 17px;

	border-radius: 10px;

	box-sizing: border-box;

	font-family: "NexusSansTF-Regular", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-decoration: none;
	white-space: normal;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

.jhytel-connectbar-button > span:first-child {
	min-width: 0;
}

.jhytel-connectbar-button > span:last-child {
	display: inline-flex;
	flex: 0 0 27px;
	align-items: center;
	justify-content: center;

	width: 27px;
	height: 27px;

	border-radius: 50%;

	font-size: 16px;
	line-height: 1;
}


/* Tombol Visitor */

.jhytel-connectbar-button-primary {
	color: #ffffff;
    font-family: 'Perpetua';
    font-size: 14px;
	background:
		radial-gradient(
			circle at top right,
			rgba(255, 255, 255, 0.16),
			transparent 44%
		),
		linear-gradient(135deg, #851758, #35122f);

	border: 1px solid #610c3a;

	box-shadow: 0 7px 16px rgba(53, 18, 47, 0.19);
}

.jhytel-connectbar-button-primary
> span:last-child {
	color: #610c3a;
	background: #ffffff;
}

.jhytel-connectbar-button-primary:hover,
.jhytel-connectbar-button-primary:focus {
	color: #ffffff;

	background:
		linear-gradient(135deg, #9b1b67, #4b1539);

	border-color: #e311ff;

	box-shadow: 0 10px 21px rgba(53, 18, 47, 0.27);

	text-decoration: none;
	transform: translateY(-2px);
}


/* Tombol Web Analytics */

.jhytel-connectbar-button-secondary {
	color: #610c3a;
	background: #ffffff;
    font-family: 'Perpetua';
	border: 1px solid #d7c2cf;
    font-size: 14px;
	box-shadow: 0 5px 13px rgba(53, 18, 47, 0.08);
}

.jhytel-connectbar-button-secondary
> span:last-child {
	color: #ffffff;
	background: #851758;
    font-family: 'Perpetua';
}

.jhytel-connectbar-button-secondary:hover,
.jhytel-connectbar-button-secondary:focus {
	color: #ffffff;
	background: #610c3a;
	border-color: #610c3a;

	box-shadow: 0 9px 19px rgba(53, 18, 47, 0.22);

	text-decoration: none;
	transform: translateY(-2px);
}

.jhytel-connectbar-button-secondary:hover
> span:last-child,
.jhytel-connectbar-button-secondary:focus
> span:last-child {
	color: #610c3a;
	background: #ffffff;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 800px) {
	.jhytel-connectbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Publisher menggunakan lebar penuh */
	.jhytel-connectbar-intro {
		grid-column: 1 / -1;
	}

	.jhytel-connectbar-actions {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 550px) {
	.jhytel-connectbar {
		grid-template-columns: 1fr;
		padding: 13px;
	}

	.jhytel-connectbar-intro,
	.jhytel-connectbar-actions {
		grid-column: auto;
	}

	.jhytel-connectbar-actions {
		grid-template-columns: 1fr;
	}

	.jhytel-connectbar-button {
		min-height: 52px;
		font-size: 12px;
	}
}

/* =====================================================
   J-HyTEL INFORMATION ACCORDION
   ===================================================== */

.jhytel-info-accordion {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 9px;

	margin: 20px 0;
	padding: 11px;

	background:
		radial-gradient(
			circle at top right,
			rgba(227, 17, 255, 0.07),
			transparent 40%
		),
		#ffffff;

	border: 1px solid #e7dce4;
	border-left: 4px solid #610c3a;
	border-radius: 0 14px 14px 0;

	box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}


/* Accordion card */

.jhytel-info-details {
	min-width: 0;

	background: #fcfafb;
	border: 1px solid #e9dfe5;
	border-radius: 10px;

	overflow: hidden;

	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.jhytel-info-details:hover {
	border-color: #d3b9c9;
	box-shadow: 0 5px 13px rgba(53, 18, 47, 0.08);
}

.jhytel-info-details[open] {
	grid-column: 1 / -1;

	background: #ffffff;
	border-color: #cdaabd;

	box-shadow: 0 8px 18px rgba(53, 18, 47, 0.1);
}


/* Summary */

.jhytel-info-details summary {
	display: flex;
	align-items: center;
	gap: 10px;

	min-height: 64px;
	padding: 9px 11px;

	cursor: pointer;
	list-style: none;
	user-select: none;
}

.jhytel-info-details summary::-webkit-details-marker {
	display: none;
}

.jhytel-info-details summary::marker {
	content: "";
}

.jhytel-info-details summary:focus {
	outline: 2px solid rgba(227, 17, 255, 0.4);
	outline-offset: -2px;
}

.jhytel-info-icon {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	color: #ffffff;
	background: linear-gradient(135deg, #851758, #35122f);
	border-radius: 50%;

	font-size: 18px;
	font-weight: 800;

	box-shadow: 0 5px 11px rgba(53, 18, 47, 0.17);
}

.jhytel-info-heading {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.jhytel-info-heading strong {
	color: #35122f;
	font-size: 18px;
	line-height: 1.3;
}

.jhytel-info-heading small {
	display: block;
	margin-top: 3px;

	color: #847780;
	font-size: 16px;
	line-height: 1.3;
}

.jhytel-info-arrow {
	flex: 0 0 auto;

	color: #851758;
	font-size: 15px;
	font-weight: 700;

	transition: transform 0.18s ease;
}

.jhytel-info-details[open]
.jhytel-info-arrow {
	transform: rotate(180deg);
}


/* Expanded content */

.jhytel-info-content {
	padding: 14px 17px 16px;

	color: #554950;
	border-top: 1px solid #eee5eb;

	font-size: 15px;
	line-height: 1.65;
}

.jhytel-info-content p {
	margin: 0 0 11px;
}

.jhytel-info-content p:last-child {
	margin-bottom: 0;
}

.jhytel-info-content a {
	color: #851758;
	font-weight: 700;
	text-decoration: none;
}

.jhytel-info-content a:hover {
	color: #610c3a;
	text-decoration: underline;
}


/* Article type tags */

.jhytel-info-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;

	margin-top: 12px;
}

.jhytel-info-tags span {
	padding: 6px 10px;

	color: #610c3a;
	background: #f8edf5;
	border: 1px solid #ead7e5;
	border-radius: 999px;

	font-size: 10px;
	font-weight: 700;
}


/* Editorial policy */

.jhytel-info-policy-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.jhytel-info-policy {
	padding: 10px 11px;
    font-size: 14px
	background: #faf7f9;
	border: 1px solid #ede3e9;
	border-radius: 8px;
}

.jhytel-info-policy span {
	display: block;

	color: #851758;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jhytel-info-policy strong {
	display: block;
	margin-top: 4px;

	color: #42353d;
	font-size: 15px;
	line-height: 1.4;
}


/* Collaboration */

.jhytel-info-partners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;

	margin: 11px 0;
}

.jhytel-info-partners > a {
	display: flex;
	flex-direction: column;
	padding: 10px 11px;
    font-size: 20px;
	background: #faf7f9;
	border: 1px solid #ede3e9;
	border-radius: 8px;

	text-decoration: none;
}

.jhytel-info-partners > a:hover {
	border-color: #cdaabd;
	text-decoration: none;
}

.jhytel-info-partners span {
	color: #8d7f87;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jhytel-info-partners strong {
	margin-top: 3px;
	color: #610c3a;
	font-size: 16px;
}

.jhytel-info-partners small {
	margin-top: 3px;
	color: #82757d;
	font-size: 15px;
}

.jhytel-info-inclusion {
	padding: 9px 11px;

	background: linear-gradient(90deg, #faf3f8, #ffffff);
	border-left: 3px solid #851758;
	border-radius: 0 7px 7px 0;

	font-size: 11px;
}


/* Responsive */

@media (max-width: 800px) {
	.jhytel-info-accordion {
		grid-template-columns: 1fr;
	}

	.jhytel-info-details[open] {
		grid-column: auto;
	}

	.jhytel-info-policy-grid,
	.jhytel-info-partners {
		grid-template-columns: 1fr;
	}
}