/* ============================================================
   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:     10px;
  --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);
}


/* ══════════════════════════════════════════════
   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
   Hanya efek hidup — ukuran & bentuk tidak berubah
   ══════════════════════════════════════════════ */

.pkp_block a[href*="editorialTeam"],
.pkp_block a[href*="Peer_Review"],
.pkp_block a[href*="focus_scope"],
.pkp_block a[href*="Author_Guidelines"],
.pkp_block a[href*="Publication_Ethics"],
.pkp_block a[href*="Journal_Policy"],
.pkp_block a[href*="submissions"],
.pkp_block a[href*="Online_Submission"],
.pkp_block a[href*="Review_Policy"],
.pkp_block a[href*="Open_Access"],
.pkp_block a[href*="Publication_Frequency"],
.pkp_block a[href*="Publication_Charge"],
.pkp_block a[href*="information"] {
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 4px;
}

.pkp_block a[href*="editorialTeam"]:hover,
.pkp_block a[href*="Peer_Review"]:hover,
.pkp_block a[href*="focus_scope"]:hover,
.pkp_block a[href*="Author_Guidelines"]:hover,
.pkp_block a[href*="Publication_Ethics"]:hover,
.pkp_block a[href*="Journal_Policy"]:hover,
.pkp_block a[href*="submissions"]:hover,
.pkp_block a[href*="Online_Submission"]:hover,
.pkp_block a[href*="Review_Policy"]:hover,
.pkp_block a[href*="Open_Access"]:hover,
.pkp_block a[href*="Publication_Frequency"]:hover,
.pkp_block a[href*="Publication_Charge"]:hover,
.pkp_block a[href*="information"]:hover {
  color:           #1a4a7a !important;
  background:      #e8f0fb !important;
  text-decoration: none !important;
}


/* ══════════════════════════════════════════════
   BAGIAN 4 — SIDEBAR: ARTICLE TEMPLATE
   Hanya efek hidup — ukuran & bentuk tidak berubah
   ══════════════════════════════════════════════ */

.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;
}

/* ====================================
   LOKA BHAKTI - CLEAN REVIEWER SECTION
==================================== */

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

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

/* TITLE */

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

.loka-reviewer-title small{
    color:#8b7355;
    letter-spacing:3px;
    font-size:12px;
}

.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;
}

/* GRID */

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

/* CARD */

.loka-reviewer-card{
    border:1px solid #e2e8f0;
    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(0,0,0,0.08);
}

/* PHOTO */

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

/* INFO */

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

/* NAME */

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

/* AFFILIATION */

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

/* TAGS */

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

.loka-reviewer-tags span{
    background:#f1f5f9;
    color:#334155;
    padding:6px 12px;
    border-radius:30px;
    font-size:12px;
}

/* MOBILE */

@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;
    }
}

/* ====================================
   LOKA BHAKTI - CLEAN REVIEWER SECTION
   ORANGE ACCENT VERSION
==================================== */

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

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

/* TITLE */

.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;
}

/* GRID */

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

/* CARD */

.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);
}

/* PHOTO */

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

/* INFO */

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

/* NAME */

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

/* AFFILIATION */

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

/* TAGS */

.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;
}

/* MOBILE */

@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;
    }
}


/* ====================================
   LOKA BHAKTI - EDITORIAL TEAM SECTION
   ORANGE ACCENT VERSION
==================================== */

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

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

/* TITLE */

.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;
}

/* GRID */

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

/* CARD */

.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);
}

/* DEFAULT PROFILE */

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

/* INFO */

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

/* NAME */

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

/* POSITION */

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

/* AFFILIATION */

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

/* TAGS */

.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;
}

/* MOBILE */

@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;
    }

}

}

/* =========================
   RUNNING TEXT LOKA BHAKTI
========================= */

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

.loka-marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: lokaRun 20s linear infinite;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

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

@keyframes lokaRun {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ──────────────────────────────────────────────
   ARTIKEL CARD — Border Kiri Oranye
   Loka Bhakti | OJS 3.3.0.6
   ────────────────────────────────────────────── */

/* Card setiap artikel */
.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;
}

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

/* Judul artikel */
.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;
}

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

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

/* Link PDF */
.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;
}

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

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

   ABOUT JOURNAL HOVER:
   ▸ Warna teks hover        → color: #1a4a7a
   ▸ Warna background hover  → background: #e8f0fb

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

   INDEX BY:
   ▸ Ukuran logo             → --index-logo-width: 90px
   ▸ Warna tombol            → --index-btn-bg: #f4f7fb
   ============================================================ */