/* ============================================================
   DEPLOY: Journal of Informatics and Computing Technology
   Journal Style Sheet — OJS 3.3+ (tema Default)

   Pasang di: Settings > Website > Appearance > Journal Style Sheet

   Daftar isi
   1. Token warna
   2. Header dan navigasi
   3. Tipografi umum
   4. Tautan dan tombol
   5. Halaman depan dan daftar artikel
   6. Halaman artikel
   7. Sidebar dan custom block
   8. Footer
   9. Responsif
   ============================================================ */


/* ---------- 1. Token warna ---------- */

:root {
  --deploy-navy:      #060629;
  --deploy-navy-alt:  #141440;
  --deploy-cyan:      #22D3EE;
  --deploy-violet:    #8B7BFF;
  --deploy-slate:     #5B7099;
  --deploy-surface:   #EEF3FA;
  --deploy-border:    #DBE3EE;
  --deploy-link:      #0E7490;
  --deploy-text:      #1F2A44;
}


/* ---------- 2. Header dan navigasi ---------- */

.pkp_structure_head {
  background-color: var(--deploy-navy);
  border-bottom: 2px solid var(--deploy-cyan);
  background-image: url(https://journal.naistudio.com/public/journals/1/bg_header.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.pkp_site_name {
  color: #FFFFFF;
  letter-spacing: 3px;
}

.pkp_site_name .is_text a { color: #FFFFFF; }
.pkp_site_nav_menu{
  background: none;
}
.pkp_navigation_primary_row { background: none; }

.pkp_nav_list a {
  color: #EEF3FA;
  font-size: 13.5px;
}

.pkp_nav_list a:hover,
.pkp_nav_list a:focus {
  color: var(--deploy-cyan);
}

.pkp_search input[type="search"] {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #FFFFFF;
  border-radius: 4px;
}
.pkp_search input[type="search"]::placeholder { color: #8394B5; }

@media (min-width: 992px) {
  .pkp_site_name .is_img img { max-height: 70px; margin-bottom: 5px; }
}


/* ---------- 3. Tipografi umum ---------- */

body { color: var(--deploy-text); }

.page h1,
.page h2,
.obj_issue_toc h2 { color: var(--deploy-navy); }

.pkp_page_index .homepage_about h2,
.page > h1 {
  border-bottom: 1px solid var(--deploy-border);
  padding-bottom: 10px;
}


/* ---------- 4. Tautan dan tombol ---------- */

a               { color: var(--deploy-link); }
a:hover, a:focus{ color: var(--deploy-violet); }

.cmp_button,
.pkp_button,
button.submitFormButton {
  background: var(--deploy-navy);
  border: none;
  color: #FFFFFF;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.cmp_button:hover,
.pkp_button:hover,
button.submitFormButton:hover {
  background: var(--deploy-navy-alt);
  color: var(--deploy-cyan);
}


/* ---------- 5. Halaman depan dan daftar artikel ---------- */

.obj_article_summary h3,
.obj_article_summary h3 a { color: var(--deploy-navy); }
.obj_article_summary h3 a:hover { color: var(--deploy-link); }

.obj_article_summary .authors { color: var(--deploy-slate); font-size: 13px; }
.obj_article_summary .pages   { color: var(--deploy-slate); }

.obj_article_summary .galleys_links a {
  background: var(--deploy-surface);
  border: 1px solid var(--deploy-border);
  color: var(--deploy-navy);
  border-radius: 3px;
  font-size: 12px;
  transition: all .15s ease;
}
.obj_article_summary .galleys_links a:hover {
  background: var(--deploy-navy);
  border-color: var(--deploy-navy);
  color: #FFFFFF;
}

.obj_issue_toc .heading_section,
.obj_issue_toc .section > h2 {
  color: var(--deploy-navy);
  border-bottom: 2px solid var(--deploy-cyan);
  padding-bottom: 6px;
}

.current_issue .current_issue_title { color: var(--deploy-navy); }


/* ---------- 6. Halaman artikel ---------- */

.obj_article_details .page_title { color: var(--deploy-navy); }

.obj_article_details .item.doi .value a { color: var(--deploy-link); }

.obj_article_details .main_entry .item .label,
.obj_article_details .entry_details .item .label {
  color: var(--deploy-navy);
  border-bottom: 1px solid var(--deploy-border);
  padding-bottom: 5px;
}

.obj_article_details .download a.obj_galley_link {
  background: var(--deploy-navy);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
}
.obj_article_details .download a.obj_galley_link:hover {
  background: var(--deploy-navy-alt);
  color: var(--deploy-cyan);
}

.obj_article_details .item.keywords .value { color: var(--deploy-slate); }


/* ============================================================
   7. SIDEBAR dan custom block
   ============================================================ */

.pkp_structure_sidebar { padding-left: 24px; }

.pkp_block {
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.pkp_block .title {
  background: var(--deploy-navy);
  color: #FFFFFF;
  font-weight: bold;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
  padding: 12px 16px;
  border: none;
  border-bottom: 2px solid var(--deploy-cyan);
  text-align: center;
  font-size: 13px;
}
.pkp_block li.locale_en,
.pkp_block li.locale_id{
  border:1px solid #DBE3EE;
  margin-bottom: 0;
  border-top: 0;
}
.locale_id{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.locale_en a,
.locale_id a{
  display: block;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--deploy-text) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: 0.3s;
}

.pkp_block .content {
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--deploy-text);
}

.pkp_block ul { list-style: none; margin: 0; padding: 0; }
.pkp_block li { margin-bottom: 8px; }

/* 7a. Tabel data — pasangan label dan nilai */

.dpsb-data { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.dpsb-data th,
.dpsb-data td {
  padding: 7px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--deploy-surface);
  word-break: break-word;
}
.dpsb-data tr:last-child th,
.dpsb-data tr:last-child td { border-bottom: none; }

.dpsb-data th { width: 42%; font-weight: 400; color: var(--deploy-slate); }
.dpsb-data td {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--deploy-navy);
}

/* 7b. Tombol sidebar — maksimal satu solid per panel */

.dpsb-btn {
  display: block;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: var(--deploy-navy);
  color: #FFFFFF !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dpsb-btn:last-child { margin-bottom: 0; }
.dpsb-btn:hover {
  background: var(--deploy-navy-alt);
  color: var(--deploy-cyan) !important;
}

.dpsb-btn-ghost {
  background: transparent;
  color: var(--deploy-navy) !important;
  border: 1px solid var(--deploy-border);
}
.dpsb-btn-ghost:hover {
  background: var(--deploy-surface);
  color: var(--deploy-navy) !important;
  border-color: var(--deploy-cyan);
}

/* 7c. Kartu orang — editor, mitra bestari */

.dpsb-person { display: flex; gap: 12px; align-items: flex-start; }
.dpsb-person img {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--deploy-surface);
}
.dpsb-person-name { font-size: 13px; font-weight: 500; color: var(--deploy-navy); }
.dpsb-person-role { font-size: 12px; color: var(--deploy-slate); margin-top: 2px; }

/* 7d. Tag indeksasi */

.dpsb-index { display: flex; flex-wrap: wrap; gap: 6px; }
.dpsb-index a,
.dpsb-index span {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--deploy-border);
  border-radius: 3px;
  color: var(--deploy-slate) !important;
  text-decoration: none !important;
  transition: all .15s ease;
}
.dpsb-index a:hover {
  background: var(--deploy-surface);
  border-color: var(--deploy-cyan);
  color: var(--deploy-navy) !important;
}

/* 7e. Blok penekanan — tenggat, pengumuman */

.dpsb-note {
  background: var(--deploy-surface);
  border-left: 3px solid var(--deploy-cyan);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--deploy-navy);
}
.dpsb-note strong { display: block; margin-bottom: 4px; font-weight: 500; }

/* 7f. Logo perangkat pendukung */

.dpsb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dpsb-tools img {
  max-width: 74px; height: auto;
  opacity: .78;
  transition: opacity .15s ease;
}
.dpsb-tools img:hover { opacity: 1; }


/* ============================================================
   8. FOOTER
   ============================================================ */

.pkp_structure_footer_wrapper {
  padding: 0 !important;
  background: var(--deploy-navy) !important;
  border: none !important;
}
.pkp_footer_content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dp-footer {
  background: var(--deploy-navy);
  color: #BFCADF;
  font-size: 14px;
  line-height: 1.7;
}

.dp-footer a {
  color: #BFCADF;
  text-decoration: none;
  transition: color .15s ease;
}
.dp-footer a:hover,
.dp-footer a:focus { color: var(--deploy-cyan); text-decoration: underline; }
.dp-footer a:focus-visible {
  outline: 2px solid var(--deploy-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

.dp-inner { max-width: 1100px; margin: 0 auto; padding: 48px 24px 0; }
.dp-grid  { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; }

.dp-logo    { display: block; width: 100%; max-width: 270px; height: auto; margin: 0 0 14px; }
.dp-tagline { font-size: 13px; color: #8394B5; margin: 0 0 16px; max-width: 340px; }
.dp-desc    { font-size: 13px; color: #A3B2CC; margin: 0 0 18px; max-width: 340px; }

.dp-meta {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8394B5;
  line-height: 2;
}
.dp-meta strong { color: #BFCADF; font-weight: 500; }

.dp-head {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139,123,255,.4);
}

.dp-footer .dp-list    { list-style: none; margin: 0; padding: 0; }
.dp-footer .dp-list li { margin-bottom: 8px; font-size: 13px; }

.dp-index      { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dp-index span {
  font-size: 11px;
  padding: 4px 9px;
  border: 1px solid rgba(191,202,223,.3);
  border-radius: 3px;
  color: #A3B2CC;
}

.dp-contact        { font-size: 13px; color: #A3B2CC; font-style: normal; line-height: 1.8; }
.dp-contact strong { color: #BFCADF; font-weight: 500; margin-bottom: 6px; }

.dp-license {
  margin-top: 10px;
  padding: 18px 20px;
  background: rgba(34,211,238,.08);
  border-left: 3px solid var(--deploy-cyan);
  font-size: 13px;
  color: #A3B2CC;
  line-height: 1.6;
}
.dp-license a { color: var(--deploy-cyan); text-decoration: underline; }

.dp-bar {
  margin-top: 36px;
  border-top: 1px solid rgba(191,202,223,.18);
  padding: 20px 0 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #8394B5;
}
.dp-bar-links { display: flex; flex-wrap: wrap; gap: 18px; }


/* ---------- 9. Responsif ---------- */

@media (max-width: 992px) {
  .dp-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .pkp_structure_sidebar { padding-left: 0; padding-top: 24px; }
  .dp-grid   { grid-template-columns: 1fr; gap: 30px; }
  .dp-inner  { padding: 36px 18px 0; }
  .dp-bar    { flex-direction: column; align-items: flex-start; }
  .dp-logo   { max-width: 220px; }
  .dp-desc,
  .dp-tagline { max-width: none; }
}

.dpsb-links {
  list-style: none;
  margin: -16px;
  padding: 0;
}
.dpsb-links li { margin: 0; border-bottom: 1px solid var(--deploy-surface); }
.dpsb-links li:last-child { border-bottom: none; }

.dpsb-links a {
  display: block;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--deploy-text) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: 0.3s;
}
.dpsb-links a:hover,
.locale_en a:hover,
.locale_id a:hover,
.locale_en.current a,
.locale_id.current a {
  background: var(--deploy-surface);
  border-left-color: var(--deploy-cyan);
  color: var(--deploy-navy) !important;
  padding-left: 20px;
}
.locale_en.current a,
.locale_id.current a {
  background: #fff0d6;
  border-left-color: #ffa500;
  color: var(--deploy-navy) !important;
  padding-left: 20px;
}
.pkp_block .content ul li{
    padding:0px;
}
.pkp_brand_footer{
  display: none;
}
.pkp_navigation_primary > li > a::after {
    background: none;
}