/* Menghilangkan link dan gambar PKP/OJS di footer */
.pkp_brand_footer {
  display: none !important;
}

/* Jika Anda juga ingin menghilangkan teks "About this Publishing System" */
.footer-content .about_system_link {
  display: none !important;
}

/* Mengambil Font Plus Jakarta Sans dari Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* Menerapkan font ke seluruh elemen Sidebar & Footer Poco */
body .poco-sidebar-container,
body .poco-footer-wrapper,
body .poco-copyright,
body .poco-item,
body .poco-header,
body .poco-footer-title {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* Penyesuaian ketebalan font agar lebih Poco Style */
body .poco-header,
body .poco-footer-title {
  font-weight: 800 !important; /* Sangat Tebal untuk Judul */
  letter-spacing: -0.5px;
}

body .poco-item {
  font-weight: 600 !important; /* Sedang-Tebal untuk Menu */
  font-size: 13px !important;
}

body .poco-footer-text {
  font-weight: 400 !important;
  line-height: 1.7;
}

/* CONTAINER UTAMA POCO */
body .poco-sidebar-container {
  background: #000000 !important;
  padding: 15px !important;
  border-left: 6px solid #ffce00 !important;
  border-bottom: 2px solid #ffce00 !important;
  position: relative;
  margin-top: 10px;
}

body .poco-header {
  background: #ffce00 !important;
  color: #000 !important;
  padding: 10px 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin-bottom: 15px !important;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%) !important;
}

body .poco-item {
  background: #1a1a1a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 15px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.3s ease;
}

body .poco-item:hover {
  background: #ffce00 !important;
  color: #000 !important;
  transform: translateX(10px);
}

/* SETTING ICON (MENGGUNAKAN SVG DATA-URI AGAR TIDAK KOTAK) */
.poco-item::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background-color: #ffce00; /* Warna Ikon Kuning */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: all 0.3s;
}

/* HOVER ICON JADI HITAM */
.poco-item:hover::before {
  background-color: #000 !important;
}

/* MAPPING ICON SATU PER SATU */
.item-editorial::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
.item-peer::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
.item-reviewers::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.item-focus::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z'/%3E%3C/svg%3E");
}
.item-author::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.item-plagiarism::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 6h2v2h-2V7zm0 4h2v6h-2v-6z'/%3E%3C/svg%3E");
}
.item-ethics::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83V6.3l6-2.25 6 2.25v4.79z'/%3E%3C/svg%3E");
}
.item-template::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}
.item-cover::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 4h2v5l-1-.75L9 9V4z'/%3E%3C/svg%3E");
}
.item-indexing::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}
.item-apc::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E");
}
.item-copyright::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.88 9.14c1.28.06 1.61 1.15 1.63 1.66h2.13c-.07-1.41-.73-3.13-3.71-3.13-2.86 0-3.9 2.08-3.9 4.33 0 2.21 1.13 4.34 3.91 4.34 3.01 0 3.61-1.87 3.67-3.2h-2.13c-.01.55-.31 1.61-1.56 1.61-1.33 0-1.71-1.09-1.71-2.75 0-1.72.39-2.71 1.7-2.75zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}
.item-history::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E");
}

/* FOOTER PKP HILANG */
.pkp_brand_footer,
.footer-content .about_system_link {
  display: none !important;
}

/* FOOTER WRAPPER */
.poco-footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 20px;
  background: #000000;
  border-top: 4px solid #ffce00;
  font-family: "Segoe UI", sans-serif;
  color: #ffffff;
}

/* RESPONSIVE KOLOM */
.poco-footer-col {
  flex: 1;
  min-width: 200px;
}

/* JUDUL KOLOM */
.poco-footer-title {
  color: #ffce00;
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 4px solid #ffce00;
  padding-left: 10px;
}

/* TEKS & LIST */
.poco-footer-text {
  font-size: 13px;
  line-height: 1.6;
  color: #cccccc;
}

.poco-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.poco-footer-list li {
  margin-bottom: 10px;
  font-size: 13px;
}

.poco-footer-list a {
  color: #ffffff !important;
  text-decoration: none;
  transition: 0.3s;
}

.poco-footer-list a:hover {
  color: #ffce00 !important;
  padding-left: 5px;
}

/* AKSEN POCO */
.poco-tag {
  background: #ffce00;
  color: #000;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  margin-right: 8px;
}

.poco-footer-status {
  display: inline-block;
  margin-top: 15px;
  border: 1px solid #ffce00;
  color: #ffce00;
  padding: 5px 15px;
  font-size: 10px;
  font-weight: bold;
}

/* GRID INDEXING */
.poco-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.poco-index-box {
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #ffce00;
  transition: 0.3s;
}

.poco-index-box:hover {
  background: #ffce00;
  color: #000;
  cursor: crosshair;
}

/* COPYRIGHT BAR */
.poco-copyright {
  background: #111;
  color: #666;
  text-align: center;
  padding: 15px;
  font-size: 11px;
  border-top: 1px solid #222;
}

/* HP/MOBILE ADJUSTMENT */
@media (max-width: 768px) {
  .poco-footer-wrapper {
    flex-direction: column;
  }
}

/* Container Utama - Background Terang */
.clean-editorial-wrapper {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: #ffffff;
  padding: 10px;
}

/* Label Section yang Rapi */
.clean-label {
  font-size: 11px;
  font-weight: 800;
  color: #888;
  letter-spacing: 1.5px;
  padding: 20px 0 10px 0;
  border-bottom: 2px solid #f1f1f1;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* Card Member - Compact & Clean */
.clean-member-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #eeeeee;
  padding: 12px 15px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  border-radius: 4px; /* Sedikit melengkung agar modern */
}

.clean-member-card:hover {
  border-color: #ffce00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateX(5px);
}

/* Foto - Tetap dengan Ring Poco */
.member-photo {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  margin-right: 18px;
  border: 2px solid #ffce00;
  border-radius: 50%; /* Lingkaran sempurna */
  overflow: hidden;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typography Content */
.member-info {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

.member-affiliate {
  font-size: 12px;
  color: #666;
  margin: 2px 0 0 0 !important;
}

.country-code {
  font-size: 9px;
  background: #f1f1f1;
  color: #999;
  padding: 1px 4px;
  border-radius: 2px;
  vertical-align: middle;
}

/* Badge ID yang Elegan */
.member-ids {
  display: flex;
  gap: 8px;
}

.id-link {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  text-decoration: none !important;
  border-radius: 20px; /* Gaya Pill Button */
  transition: 0.2s;
  border: 1px solid #ddd;
  color: #555 !important;
}

.id-link.sinta:hover {
  background: #ffce00;
  border-color: #ffce00;
  color: #000 !important;
}
.id-link.scopus:hover {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff !important;
}
.id-link.scholar:hover {
  background: #4285f4;
  border-color: #4285f4;
  color: #fff !important;
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .member-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .clean-member-card {
    padding: 15px;
  }
}

/* Container Utama Additional Content */
.home-additional-wrapper {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  padding: 20px 0;
}

.home-subtitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #888;
  margin-bottom: 20px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.home-subtitle::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #eee;
  margin-left: 15px;
}

/* METRICS GRID */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 40px;
}

.metric-item {
  background: #fdfdfd;
  border: 1px solid #eee;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
  transition: 0.3s;
}

.metric-item:hover {
  border-color: #ffce00;
  transform: translateY(-3px);
}

.metric-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #000;
}

.metric-label {
  display: block;
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 700;
}

/* WORKFLOW SYSTEM */
.workflow-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  padding: 15px;
  border-radius: 4px;
}

.step-num {
  background: #ffce00;
  color: #000;
  font-weight: 900;
  font-size: 14px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.step-text {
  font-size: 13px;
  color: #555;
}

.step-text strong {
  color: #000;
  display: block;
  text-transform: uppercase;
  font-size: 11px;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .step-item {
    flex-direction: row;
  }
}

/* Container Utama */
.about-poco-container {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  padding: 30px 0;
  max-width: 100%;
}

/* Badge Kecil di Atas */
.about-badge {
  display: inline-block;
  background: #f1f1f1;
  color: #888;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Judul Utama */
.about-main-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #000 !important;
  margin: 0 0 25px 0 !important;
  border: none !important;
}

/* KOTAK INTERAKTIF (PUTIH CLEAN) */
.about-card-interactive {
  background: #ffffff;
  border: 1px solid #eeeeee;
  padding: 35px;
  border-radius: 8px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* EFEK HOVER */
.about-card-interactive:hover {
  transform: translateY(-8px); /* Melayang ke atas */
  border-color: #ffce00; /* Berubah jadi Kuning Poco */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); /* Bayangan lembut */
}

/* Isi Teks */
.about-text-content {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px !important;
  text-align: justify;
}

.about-text-content strong {
  color: #000;
}

/* Garis Aksen Kuning di Dalam */
.about-accent-line {
  width: 40px;
  height: 4px;
  background: #ffce00;
  margin-top: 10px;
  transition: width 0.5s ease;
}

.about-card-interactive:hover .about-accent-line {
  width: 100px; /* Garis memanjang saat disentuh */
}

/* Metadata Row */
.about-meta-row {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.meta-tag {
  font-size: 11px;
  font-weight: 700;
  color: #222;
  background: #fff;
  border: 1px solid #eee;
  padding: 6px 15px;
  border-radius: 4px;
}

.meta-tag span {
  color: #ffce00;
  margin-right: 5px;
  font-weight: 900;
}

/* Responsive */
@media (max-width: 600px) {
  .about-card-interactive {
    padding: 20px;
  }
  .about-meta-row {
    flex-wrap: wrap;
  }
}

/* Container Utama Gaya HyperOS */
.hyper-container {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 24px; /* Sudut sangat bulat khas OS modern */
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  margin: 20px 0;
  overflow: hidden;
}

/* Header Jendela OS */
.hyper-os-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f9f9f9;
}

.os-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.red {
  background: #ff5f56;
}
.yellow {
  background: #ffbd2e;
}
.green {
  background: #27c93f;
}

.os-title {
  font-size: 10px;
  font-weight: 800;
  color: #bbb;
  letter-spacing: 1px;
  margin-left: 10px;
}

/* Metrics Grid */
.hyper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 25px;
}

.hyper-card-mini {
  background: #f8f9fb;
  padding: 15px;
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hyper-card-mini:hover {
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transform: scale(1.02);
}

.hyper-label {
  display: block;
  font-size: 10px;
  color: #888;
  font-weight: 600;
  margin-bottom: 4px;
}

.hyper-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #000;
}

.hyper-bar {
  height: 4px;
  background: #eee;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #ffce00; /* Aksen Poco */
}

/* Workflow Pills */
.hyper-section-title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 15px;
}

.workflow-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.step-pill {
  display: flex;
  align-items: center;
  background: #f0f0f0;
  padding: 6px 12px;
  border-radius: 30px;
  gap: 8px;
}

.step-pill.active {
  background: #000;
  color: #ffce00;
}

.pill-num {
  font-size: 10px;
  font-weight: 900;
}

.pill-txt {
  font-size: 11px;
  font-weight: 700;
}

.step-connector {
  flex-grow: 1;
  height: 2px;
  background: #eee;
  margin: 0 10px;
}

/* Buttons Action Center */
.hyper-action-center {
  display: flex;
  gap: 10px;
}

.hyper-btn-primary {
  flex: 2;
  background: #ffce00;
  color: #000 !important;
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none !important;
  transition: 0.2s;
}

.hyper-btn-secondary {
  flex: 1;
  background: #f0f0f0;
  color: #444 !important;
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none !important;
}

.hyper-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}