/* ============================================================
   Loka Bhakti — Full Custom Style
   OJS 3.3.0.6 | jaf-fisib.unpak.ac.id

   Cara pasang:
   Settings → Website → Appearance → Additional CSS → Save
   ============================================================ */


/* ──────────────────────────────────────────────
   VARIABEL UTAMA — Ubah di sini saja
   ────────────────────────────────────────────── */
:root {

  /* === Cover & Homepage === */
  --cover-width:            220px;
  --cover-margin-top:        78px;
  --cover-margin-right:      24px;
  --cover-margin-bottom:     16px;
  --cover-margin-left:       16px;
  --cover-border-radius:      0px;
  --cover-bg:               #ffffff;
  --cover-frame-border:     1px solid #c8d8ec;
  --cover-frame-padding:     5px;
  --cover-frame-radius:       0px;

  /* === Index By — Tombol Logo === */
  --index-logo-width:        200px;
  --index-btn-bg:           #f4f7fb;
  --index-btn-bg-hover:     #e6eef8;
  --index-btn-border:       1px solid #c8d8ec;
  --index-btn-radius:        8px;
  --index-btn-padding:       8px 12px;
  --index-btn-margin:        4px;
  --index-btn-shadow:        0 1px 4px rgba(0,0,0,0.08);
  --index-btn-shadow-hover:  0 4px 12px rgba(0,0,0,0.15);

  /* === About Journal Sidebar === */
  --about-hover-bg:         #e8f0fb;
  --about-hover-color:      #1a4a7a;
  --about-hover-border:     #ea580c;
  --about-transition:       0.25s ease;
}


/* ══════════════════════════════════════════════
   BAGIAN 1 — COVER & LAYOUT HOMEPAGE
   ══════════════════════════════════════════════ */

img[src*="homepageImage_en_US"] {
  float:         right !important;
  width:         var(--cover-width) !important;
  max-width:     var(--cover-width) !important;
  height:        auto !important;
  margin:        var(--cover-margin-top) var(--cover-margin-right) var(--cover-margin-bottom) var(--cover-margin-left) !important;
  display:       block;
  background:    var(--cover-bg);
  border:        var(--cover-frame-border) !important;
  border-radius: var(--cover-frame-radius) !important;
  padding:       var(--cover-frame-padding) !important;
  box-shadow:    0 2px 8px rgba(0,0,0,0.08);
}

#homepageAbout {
  display:    flow-root;
  text-align: justify;
}

#homepageAbout::after {
  content: "";
  display: table;
  clear:   both;
}

#homepageAbout h2 {
  margin-top: 0;
  text-align: left;
}

#homepageIssue {
  clear: both;
}

.about-journal-home {
  margin:        40px auto;
  padding:       30px;
  background:    #f8f8f8;
  border-radius: 12px;
}

.about-journal-home h2 {
  font-size:     32px;
  margin-bottom: 15px;
  color:         #222;
}

.about-journal-home p {
  font-size:   16px;
  line-height: 1.8;
  color:       #555;
}


/* ══════════════════════════════════════════════
   BAGIAN 2 — TEKS RATA KIRI-KANAN (Justify)
   ══════════════════════════════════════════════ */

#homepageAbout p,
#homepageAbout div,
#homepageAbout span,
.homepage_about p,
.pkp_page_index #homepageAbout p,
.pkp_page_issue .description p,
.obj_issue_summary .description p,
.issue_description p,
#homepageIssue .description p,
.pkp_page_index .description p {
  text-align:      justify !important;
  text-align-last: left !important;
  hyphens:         auto;
}

.article-abstract p,
.abstract p,
#abstract p,
.pkp_page_article .abstract p,
.article_abstract p,
section.abstract p,
.article-references p,
.references p,
#references p,
.pkp_page_article .references p,
.article_references p,
section.references p,
.pkp_page_article .main_entry .references,
.pkp_page_article .main_entry .references p {
  text-align:      justify !important;
  text-align-last: left !important;
  hyphens:         auto;
}


/* ══════════════════════════════════════════════
   BAGIAN 3 — SIDEBAR: ABOUT JOURNAL
   ▸ Animasi hover mengenai SELURUH KOTAK baris
     bukan hanya teks — dengan cara menjadikan
     <a> sebagai display:block penuh lebar,
     lalu transform + background pada box-nya.
   ══════════════════════════════════════════════ */

/* --- Reset margin/padding list agar rapi --- */
.pkp_block a[href*="editorialTeam"],
.pkp_block a[href*="PeerReview"],
.pkp_block a[href*="FocusScope"],
.pkp_block a[href*="AuthorGuidelines"],
.pkp_block a[href*="PublicationEthics"],
.pkp_block a[href*="JournalPolicy"],
.pkp_block a[href*="OnlineSubmission"],
.pkp_block a[href*="ReviewPolicy"],
.pkp_block a[href*="OpenAccess"],
.pkp_block a[href*="PublicationFrequency"],
.pkp_block a[href*="PublicationCharge"],
.pkp_block a[href*="information"] {
  /* Jadikan block agar mengisi penuh lebar kontainer */
  display:         block !important;

  /* Padding membentuk "kotak" di tiap baris */
  padding:         7px 12px !important;
  margin:          2px 0 !important;

  /* Animasi pada BOX secara keseluruhan */
  transition:
    background     var(--about-transition),
    color          var(--about-transition),
    transform      var(--about-transition),
    border-left    var(--about-transition),
    padding-left   var(--about-transition),
    box-shadow     var(--about-transition);

  border-left:     3px solid transparent;
  border-radius:   6px;
  color:           inherit;
  text-decoration: none !important;
  font-size:       14px;
  line-height:     1.5;
}

/* --- Hover: seluruh kotak bergerak & berubah --- */
.pkp_block a[href*="editorialTeam"]:hover,
.pkp_block a[href*="PeerReview"]:hover,
.pkp_block a[href*="FocusScope"]:hover,
.pkp_block a[href*="AuthorGuidelines"]:hover,
.pkp_block a[href*="PublicationEthics"]:hover,
.pkp_block a[href*="JournalPolicy"]:hover,
.pkp_block a[href*="submissions"]:hover,
.pkp_block a[href*="OnlineSubmission"]:hover,
.pkp_block a[href*="ReviewPolicy"]:hover,
.pkp_block a[href*="OpenAccess"]:hover,
.pkp_block a[href*="PublicationFrequency"]:hover,
.pkp_block a[href*="PublicationCharge"]:hover,
.pkp_block a[href*="information"]:hover {
  background:      var(--about-hover-bg) !important;
  color:           var(--about-hover-color) !important;
  border-left:     3px solid var(--about-hover-border) !important;
  padding-left:    12px !important;
  transform:       translateY(-3px);         /* seluruh kotak naik ke atas */
  box-shadow:      2px 2px 8px rgba(74,144,217,0.15);
  text-decoration: none !important;
  border-radius:   6px;
}

/* --- Active (klik) --- */
.pkp_block a[href*="editorialTeam"]:active,
.pkp_block a[href*="PeerReview"]:active,
.pkp_block a[href*="FocusScope"]:active,
.pkp_block a[href*="AuthorGuidelines"]:active,
.pkp_block a[href*="PublicationEthics"]:active,
.pkp_block a[href*="JournalPolicy"]:active,
.pkp_block a[href*="submissions"]:active,
.pkp_block a[href*="OnlineSubmission"]:active,
.pkp_block a[href*="ReviewPolicy"]:active,
.pkp_block a[href*="OpenAccess"]:active,
.pkp_block a[href*="PublicationFrequency"]:active,
.pkp_block a[href*="PublicationCharge"]:active,
.pkp_block a[href*="information"]:active {
  transform:  translateX(2px);
  box-shadow: none;
  background: #d4e6f8 !important;
}


/* ══════════════════════════════════════════════
   BAGIAN 4 — SIDEBAR: ARTICLE TEMPLATE
   ══════════════════════════════════════════════ */

.pkp_block a:has(img[src*="template"]) {
  display:       inline-block;
  transition:    opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  border-radius: 4px;
}

.pkp_block a:has(img[src*="template"]):hover {
  opacity:    0.88;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transform:  translateY(-2px);
}

.pkp_block a:has(img[src*="template"]):active {
  transform:  translateY(0);
  box-shadow: none;
}


/* ══════════════════════════════════════════════
   BAGIAN 5 — SIDEBAR: INDEX BY (Tombol Logo)
   ══════════════════════════════════════════════ */

.pkp_block:has(img[src*="/images/logo/"]) .pkp_block_content {
  display:         flex !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  align-items:     center !important;
  gap:             6px !important;
  padding:         4px !important;
}

.pkp_block a:has(img[src*="/images/logo/"]) {
  display:         inline-flex !important;
  align-items:     center;
  justify-content: center;
  background:      var(--index-btn-bg);
  border:          var(--index-btn-border);
  border-radius:   var(--index-btn-radius);
  padding:         var(--index-btn-padding);
  margin:          var(--index-btn-margin);
  box-shadow:      var(--index-btn-shadow);
  transition:      all 0.2s ease;
  text-decoration: none !important;
}

.pkp_block a:has(img[src*="/images/logo/"]):hover {
  background:   var(--index-btn-bg-hover);
  box-shadow:   var(--index-btn-shadow-hover);
  transform:    translateY(-2px);
  border-color: #a0b8d8;
}

.pkp_block a:has(img[src*="/images/logo/"]):active {
  transform:  translateY(0);
  box-shadow: var(--index-btn-shadow);
}

.pkp_block img[src*="/images/logo/"]:not(a img) {
  display:       inline-flex !important;
  background:    var(--index-btn-bg);
  border:        var(--index-btn-border);
  border-radius: var(--index-btn-radius);
  padding:       var(--index-btn-padding);
  margin:        var(--index-btn-margin);
  box-shadow:    var(--index-btn-shadow);
}

.pkp_block img[src*="/images/logo/"] {
  width:      var(--index-logo-width) !important;
  height:     auto !important;
  display:    block;
  object-fit: contain;
}


/* ══════════════════════════════════════════════
   BAGIAN 6 — PEER REVIEWER SECTION
   Accent: Orange
   ══════════════════════════════════════════════ */

.loka-reviewer-section {
  padding:     40px 20px;
  font-family: Arial, sans-serif;
}

.loka-reviewer-container {
  max-width: 1050px;
  margin:    auto;
}

.loka-reviewer-title {
  text-align:    center;
  margin-bottom: 30px;
}

.loka-reviewer-title small {
  color:          #ea580c;
  letter-spacing: 3px;
  font-size:      12px;
  font-weight:    bold;
}

.loka-reviewer-title h2 {
  font-size: 38px;
  color:     #1e293b;
  margin:    10px 0;
}

.loka-reviewer-title p {
  color:       #64748b;
  font-size:   15px;
  line-height: 1.8;
  max-width:   700px;
  margin:      auto;
}

.loka-reviewer-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px;
}

.loka-reviewer-card {
  border:        1px solid #fed7aa;
  border-left:   5px solid #f97316;
  border-radius: 18px;
  padding:       22px;
  display:       flex;
  align-items:   center;
  gap:           22px;
  transition:    0.3s ease;
  background:    white;
}

.loka-reviewer-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 10px 25px rgba(249,115,22,0.12);
}

.loka-reviewer-photo {
  width:        85px;
  height:       85px;
  border-radius: 50%;
  object-fit:   cover;
  border:       3px solid #fdba74;
  flex-shrink:  0;
}

.loka-reviewer-info {
  flex: 1;
}

.loka-reviewer-name {
  font-size:     24px;
  color:         #1e293b;
  font-weight:   bold;
  margin-bottom: 6px;
}

.loka-reviewer-affiliation {
  color:         #475569;
  font-size:     14px;
  line-height:   1.7;
  margin-bottom: 12px;
}

.loka-reviewer-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.loka-reviewer-tags span {
  background:    #fff7ed;
  color:         #ea580c;
  padding:       6px 12px;
  border-radius: 30px;
  font-size:     12px;
  border:        1px solid #fdba74;
}

@media (max-width: 768px) {
  .loka-reviewer-card {
    flex-direction: column;
    text-align:     center;
  }

  .loka-reviewer-name {
    font-size: 22px;
  }

  .loka-reviewer-tags {
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 7 — EDITORIAL TEAM SECTION
   Accent: Orange
   ══════════════════════════════════════════════ */

.loka-editorial-section {
  padding:     40px 20px;
  font-family: Arial, sans-serif;
}

.loka-editorial-container {
  max-width: 1050px;
  margin:    auto;
}

.loka-editorial-title {
  text-align:    center;
  margin-bottom: 35px;
}

.loka-editorial-title small {
  color:          #ea580c;
  letter-spacing: 3px;
  font-size:      12px;
  font-weight:    bold;
}

.loka-editorial-title h2 {
  font-size: 38px;
  color:     #1e293b;
  margin:    10px 0;
}

.loka-editorial-title p {
  color:       #64748b;
  font-size:   15px;
  line-height: 1.8;
  max-width:   700px;
  margin:      auto;
}

.loka-editorial-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   18px;
}

.loka-editorial-card {
  border:        1px solid #fed7aa;
  border-left:   5px solid #f97316;
  border-radius: 18px;
  padding:       22px;
  display:       flex;
  align-items:   center;
  gap:           22px;
  transition:    0.3s ease;
  background:    white;
}

.loka-editorial-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 10px 25px rgba(249,115,22,0.12);
}

.loka-editorial-photo {
  width:         85px;
  height:        85px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid #fdba74;
  background:    #fff7ed;
  flex-shrink:   0;
}

.loka-editorial-info {
  flex: 1;
}

.loka-editorial-name {
  font-size:     24px;
  color:         #1e293b;
  font-weight:   bold;
  margin-bottom: 6px;
}

.loka-editorial-position {
  color:          #ea580c;
  font-size:      14px;
  font-weight:    bold;
  margin-bottom:  8px;
  letter-spacing: 0.3px;
}

.loka-editorial-affiliation {
  color:         #475569;
  font-size:     14px;
  line-height:   1.7;
  margin-bottom: 12px;
}

.loka-editorial-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.loka-editorial-tags span {
  background:    #fff7ed;
  color:         #ea580c;
  padding:       6px 12px;
  border-radius: 30px;
  font-size:     12px;
  border:        1px solid #fdba74;
}

@media (max-width: 768px) {
  .loka-editorial-card {
    flex-direction: column;
    text-align:     center;
  }

  .loka-editorial-name {
    font-size: 22px;
  }

  .loka-editorial-tags {
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════
   BAGIAN 8 — RUNNING TEXT (Marquee)
   ══════════════════════════════════════════════ */

.loka-marquee {
  width:      100%;
  overflow:   hidden;
  background: #111827;
  color:      white;
  padding:    10px 0;
  box-sizing: border-box;
}

.loka-marquee-inner {
  display:    flex;
  width:      max-content;
  animation:  lokaRun 30s linear infinite;
}

/* Dua salinan konten untuk loop seamless */
.loka-marquee-content {
  display:        inline-block;
  white-space:    nowrap;
  padding-right:  80px;
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.5px;
}

.loka-marquee-content span {
  color:       #fbbf24;
  font-weight: bold;
}

@keyframes lokaRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════
   BAGIAN 9 — ARTIKEL CARD
   Border Kiri Oranye
   ══════════════════════════════════════════════ */

.obj_article_summary {
  background:    #ffffff !important;
  border-left:   4px solid #e07b2a !important;
  border-radius: 0 8px 8px 0 !important;
  padding:       14px 18px !important;
  margin-bottom: 10px !important;
  box-shadow:    0 1px 6px rgba(224,123,42,0.08) !important;
  transition:    box-shadow 0.2s ease, border-color 0.2s ease;
}

.obj_article_summary:hover {
  box-shadow:   0 4px 16px rgba(224,123,42,0.16) !important;
  border-color: #ba6010 !important;
}

.obj_article_summary h3 a {
  color:           #1e3a5f !important;
  text-decoration: none !important;
  transition:      color 0.15s;
}

.obj_article_summary h3 a:hover {
  color: #e07b2a !important;
}

.obj_article_summary .authors {
  color:     #888 !important;
  font-size: 13px !important;
  margin:    4px 0 !important;
}

.obj_article_summary .pages {
  color:     #aaa !important;
  font-size: 12px !important;
}

.obj_article_summary .galleys_links a {
  display:         inline-block !important;
  background:      #fff5ec !important;
  border:          1px solid #f6a96c !important;
  border-radius:   20px !important;
  padding:         2px 12px !important;
  font-size:       12px !important;
  color:           #854f0b !important;
  text-decoration: none !important;
  margin-top:      6px !important;
  transition:      background 0.15s;
}

.obj_article_summary .galleys_links a:hover {
  background: #ffe8cc !important;
}

.pkp_brand_footer,
.page_footer .pkp_brand_footer,
footer .pkp_brand_footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* =================================================
   LOKA BHAKTI — MODERN SCOPUS STYLE FOOTER
================================================= */

/* WRAPPER */
.pkp_structure_footer_wrapper{
    background:#ffffff !important;
    border-top:4px solid #ea580c;
    margin-top:60px;
    box-shadow:0 -2px 20px rgba(0,0,0,0.04);
}

/* MAIN FOOTER */
.pkp_structure_footer{
    background:#ffffff !important;
    color:#111827 !important;
    padding:0px 40px 30px;
    font-family:Arial,sans-serif;
    position:relative;
}

/* FOOTER CONTENT */
.pkp_footer_content{
    max-width:1200px;
    margin:auto;
    line-height:1.9;
    font-size:15px;
    color:#374151 !important;
}

/* TITLE STYLE */
.pkp_footer_content strong,
.pkp_footer_content b{
    color:#111827;
    font-size:16px;
    letter-spacing:.3px;
}

/* LINKS */
.pkp_footer_content a{
    color:#ea580c !important;
    text-decoration:none;
    font-weight:600;
    transition:all .3s ease;
}

.pkp_footer_content a:hover{
    color:#c2410c !important;
    padding-left:3px;
}

/* PARAGRAPH */
.pkp_footer_content p{
    margin-bottom:12px;
}

/* PKP BRAND */
.pkp_brand_footer{
    background:#f9fafb !important;
    border-top:1px solid #e5e7eb;
    padding:18px;
}

/* PKP IMAGE */
.pkp_brand_footer img{
    opacity:.75;
    transition:.3s;
}

.pkp_brand_footer img:hover{
    opacity:1;
    transform:scale(1.03);
}

/* RESPONSIVE */
@media (max-width:768px){

.pkp_structure_footer{
    padding:35px 20px 25px;
}

.pkp_footer_content{
    font-size:14px;
    line-height:1.8;
}
}

/* RAPATKAN JARAK KONTEN KE FOOTER */

.pkp_structure_footer_wrapper{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pkp_structure_footer{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* hilangkan jarak bawah konten homepage */
.page_index_journal .homepage_image,
.page_index_journal .current_issue,
.page_index_journal .additional_content {
    margin-bottom: 0px !important;
}

/* jika masih jauh */
.obj_issue_toc {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   PANDUAN KUSTOMISASI CEPAT

   COVER:
   ▸ Lebar cover             → --cover-width: 220px

   ABOUT JOURNAL HOVER (BAGIAN 3):
   ▸ Warna background hover  → --about-hover-bg: #e8f0fb
   ▸ Warna teks hover        → --about-hover-color: #1a4a7a
   ▸ Warna garis kiri hover  → --about-hover-border: #4a90d9
   ▸ Kecepatan animasi       → --about-transition: 0.25s ease
   ▸ Naik ke atas saat hover   → translateY(-3px) di :hover

   ARTICLE TEMPLATE HOVER:
   ▸ Transparansi hover      → opacity: 0.88
   ▸ Naik saat hover         → translateY(-2px)

   INDEX BY:
   ▸ Ukuran logo             → --index-logo-width: 200px
   ▸ Warna tombol            → --index-btn-bg: #f4f7fb

   MARQUEE:
   ▸ Kecepatan               → animation duration di lokaRun (default: 30s)
   ▸ Gunakan 2 elemen .loka-marquee-content di HTML untuk loop seamless
   ============================================================ */