/* =========================================================
   CUSTOM CSS ARSA / OJS 3.4.0.8
   Jurnal Bahasa dan Sastra Pusaka Cendekia
   Palette Base: #B6FF00 (Lime Green)
   Style: Elegant Academic, Fresh Lime, Dark Contrast, Responsive

   Cara pakai:
   OJS Dashboard > Settings > Website > Appearance >
   Advanced > Journal style sheet > Upload file ini > Save
   ========================================================= */

/* ---------- Root Color ---------- */
:root {
  --arsa-lime: #B6FF00;
  --arsa-lime-soft: #ECFFC2;
  --arsa-lime-pale: #F7FFE8;
  --arsa-lime-dark: #7DB300;

  --arsa-dark: #102015;
  --arsa-dark-2: #183522;
  --arsa-dark-3: #234A2E;

  --arsa-gold: #D6A738;
  --arsa-cream: #FAF8EF;
  --arsa-white: #ffffff;
  --arsa-text: #1C261F;
  --arsa-muted: #667066;
  --arsa-border: #DDE8D6;
  --arsa-red: #9B1C1C;

  --arsa-shadow: 0 14px 35px rgba(16, 32, 21, 0.12);
  --arsa-shadow-soft: 0 8px 24px rgba(16, 32, 21, 0.08);
}

/* ---------- Global ---------- */
html,
body {
  background:
    radial-gradient(circle at top left, rgba(182, 255, 0, 0.16), transparent 32%),
    linear-gradient(180deg, var(--arsa-lime-pale) 0%, #ffffff 42%, #f6fbf0 100%);
  color: var(--arsa-text);
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

a {
  color: var(--arsa-dark-3);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: var(--arsa-lime-dark);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Page Container ---------- */
.pkp_structure_page {
  max-width: 1240px;
  margin: 0 auto;
  background: transparent;
}

.pkp_structure_content {
  padding-top: 24px;
}

.pkp_structure_main {
  background: var(--arsa-white);
  border: 1px solid var(--arsa-border);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--arsa-shadow);
}

/* ---------- Header ---------- */
.pkp_structure_head {
  background:
    radial-gradient(circle at top left, rgba(182, 255, 0, 0.50), transparent 28%),
    linear-gradient(135deg, #0C1A10 0%, var(--arsa-dark-2) 48%, #07120A 100%);
  border-bottom: 6px solid var(--arsa-lime);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 10px 28px rgba(16, 32, 21, 0.28);
}

.pkp_site_name {
  padding: 34px 24px 28px;
  text-align: center;
}

.pkp_site_name a,
.pkp_site_name .is_text {
  color: #ffffff !important;
  font-size: 34px;
  font-weight: 850;
  letter-spacing: 0.3px;
  text-transform: none;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}

.pkp_site_name a:hover {
  color: var(--arsa-lime) !important;
}

/* Logo journal */
.pkp_site_name .is_img img,
.pkp_site_name img {
  max-height: 120px;
  width: auto;
}

/* ---------- Navigation ---------- */
.pkp_navigation_primary_row {
  background: rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(182, 255, 0, 0.28);
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 14px;
  border-radius: 10px;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
  background: var(--arsa-lime);
  color: var(--arsa-dark) !important;
}

.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary ul {
  border: 1px solid var(--arsa-border);
  border-radius: 12px;
  box-shadow: var(--arsa-shadow-soft);
}

.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul a {
  color: var(--arsa-text) !important;
  font-weight: 650;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary ul a:hover {
  background: var(--arsa-lime-soft);
  color: var(--arsa-dark) !important;
}

.pkp_navigation_user a {
  color: #ffffff !important;
  border-radius: 20px;
  padding: 6px 12px;
}

.pkp_navigation_user a:hover {
  background: var(--arsa-lime);
  color: var(--arsa-dark) !important;
}

/* ---------- Page Titles ---------- */
.pkp_page_index .page h1,
.page h1,
.page_title,
.obj_issue_toc .heading h1 {
  color: var(--arsa-dark);
  font-size: 30px;
  font-weight: 850;
  line-height: 1.3;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--arsa-lime);
}

.page h2,
.obj_issue_toc h2,
.current_issue h2,
.homepage_about h2,
.additional_content h2 {
  color: var(--arsa-dark-2);
  font-size: 24px;
  font-weight: 850;
  margin-top: 28px;
  margin-bottom: 14px;
}

.page h3,
.homepage_about h3,
.additional_content h3 {
  color: var(--arsa-dark-3);
  font-size: 20px;
  font-weight: 800;
}

/* ---------- Homepage Sections ---------- */
.homepage_about,
.pkp_page_index .additional_content,
.pkp_page_index .cmp_announcements,
.pkp_page_index .current_issue,
.page_index_journal .homepage_about {
  background: #ffffff;
  border: 1px solid var(--arsa-border);
  border-top: 5px solid var(--arsa-lime);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--arsa-shadow-soft);
}

.homepage_about p,
.additional_content p,
.page p {
  color: #263229;
}

.homepage_about p,
.additional_content p {
  text-align: justify;
}

/* ---------- Optional Homepage Image / Banner ---------- */
.homepage_image,
.page_index_journal .homepage_image {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--arsa-shadow);
  margin-bottom: 24px;
  border: 1px solid var(--arsa-border);
}

.homepage_image img,
.page_index_journal .homepage_image img {
  width: 100%;
  object-fit: cover;
}

/* ---------- Journal Info Table ---------- */
.homepage_about table,
.additional_content table,
.page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--arsa-border);
  border-radius: 14px;
  background: #ffffff;
}

.homepage_about table tr:nth-child(odd),
.additional_content table tr:nth-child(odd),
.page table tr:nth-child(odd) {
  background: var(--arsa-lime-pale);
}

.homepage_about table td,
.additional_content table td,
.page table td,
.homepage_about table th,
.additional_content table th,
.page table th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--arsa-border);
  vertical-align: top;
}

.homepage_about table th,
.additional_content table th,
.page table th {
  background: var(--arsa-dark);
  color: #ffffff;
}

.homepage_about table tr:last-child td,
.additional_content table tr:last-child td,
.page table tr:last-child td {
  border-bottom: none;
}

.homepage_about table td:first-child,
.additional_content table td:first-child,
.page table td:first-child {
  color: var(--arsa-dark);
  font-weight: 800;
  width: 32%;
}

/* ---------- Current Issue ---------- */
.current_issue,
.obj_issue_toc {
  position: relative;
}

.current_issue::before,
.obj_issue_toc::before {
  content: "Current Issue";
  display: inline-block;
  background: var(--arsa-lime);
  color: var(--arsa-dark);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.current_issue .current_issue_title,
.obj_issue_toc .heading .published {
  color: var(--arsa-muted);
  font-weight: 650;
}

.obj_issue_toc .sections {
  margin-top: 18px;
}

.obj_issue_toc .section h2 {
  background: linear-gradient(90deg, var(--arsa-lime-soft), transparent);
  border-left: 6px solid var(--arsa-lime);
  padding: 12px 16px;
  border-radius: 12px;
}

/* ---------- Article Cards ---------- */
.obj_article_summary {
  background: #ffffff;
  border: 1px solid var(--arsa-border);
  border-left: 6px solid var(--arsa-lime);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(16, 32, 21, 0.065);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obj_article_summary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(16, 32, 21, 0.16);
  border-left-color: var(--arsa-lime-dark);
}

.obj_article_summary .title a,
.obj_article_summary .title {
  color: var(--arsa-dark);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.45;
}

.obj_article_summary .title a:hover {
  color: var(--arsa-lime-dark);
}

.obj_article_summary .authors,
.obj_article_summary .meta,
.obj_article_summary .pages {
  color: var(--arsa-muted);
  font-size: 14px;
}

/* ---------- Article Detail Page ---------- */
.obj_article_details .page_title {
  color: var(--arsa-dark);
  font-weight: 850;
}

.obj_article_details .authors,
.obj_article_details .item,
.obj_article_details .main_entry,
.obj_article_details .entry_details {
  color: var(--arsa-text);
}

.obj_article_details .item .label {
  color: var(--arsa-dark);
  font-weight: 850;
}

.obj_article_details .abstract {
  background: var(--arsa-lime-pale);
  border-left: 6px solid var(--arsa-lime);
  border-radius: 14px;
  padding: 18px;
}

/* ---------- Buttons, PDF, Submission ---------- */
.cmp_button,
.cmp_form .buttons button,
.page_lost_password .buttons button,
.obj_galley_link,
.block_make_submission a,
a.read_more,
a.action,
button.submit {
  display: inline-block;
  background: var(--arsa-dark);
  color: #ffffff !important;
  border: 1px solid var(--arsa-dark);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(16, 32, 21, 0.22);
  transition: all 0.2s ease-in-out;
}

.cmp_button:hover,
.cmp_form .buttons button:hover,
.page_lost_password .buttons button:hover,
.obj_galley_link:hover,
.block_make_submission a:hover,
a.read_more:hover,
a.action:hover,
button.submit:hover {
  background: var(--arsa-lime);
  color: var(--arsa-dark) !important;
  border-color: var(--arsa-lime);
  transform: translateY(-1px);
}

.obj_galley_link.pdf,
.obj_galley_link[href$=".pdf"] {
  background: var(--arsa-red);
  border-color: var(--arsa-red);
}

.obj_galley_link.pdf:hover,
.obj_galley_link[href$=".pdf"]:hover {
  background: var(--arsa-lime);
  border-color: var(--arsa-lime);
  color: var(--arsa-dark) !important;
}

/* ---------- Sidebar Blocks ---------- */
.pkp_structure_sidebar {
  padding-left: 22px;
}

.pkp_block {
  background: #ffffff;
  border: 1px solid var(--arsa-border);
  border-top: 5px solid var(--arsa-lime);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--arsa-shadow-soft);
}

.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
  background: linear-gradient(135deg, var(--arsa-dark), var(--arsa-dark-3));
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 850;
  padding: 11px 14px;
  margin: -18px -18px 15px;
  border-radius: 16px 16px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 4px solid var(--arsa-lime);
}

.pkp_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_block ul li {
  border-bottom: 1px solid #edf2ef;
  margin: 0;
}

.pkp_block ul li:last-child {
  border-bottom: none;
}

.pkp_block ul li a {
  display: block;
  padding: 9px 0;
  color: var(--arsa-text);
  font-weight: 650;
}

.pkp_block ul li a:hover {
  color: var(--arsa-lime-dark);
  padding-left: 6px;
}

.pkp_block img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- Search Box / Forms ---------- */
.pkp_search input[type="text"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--arsa-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--arsa-text);
}

.pkp_search input[type="text"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--arsa-lime-dark);
  box-shadow: 0 0 0 3px rgba(182, 255, 0, 0.30);
  outline: none;
}

/* ---------- Announcements ---------- */
.cmp_announcements .obj_announcement_summary {
  background: var(--arsa-lime-pale);
  border: 1px solid var(--arsa-border);
  border-left: 5px solid var(--arsa-lime);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}

.obj_announcement_summary h2,
.obj_announcement_summary h3,
.obj_announcement_summary .title {
  color: var(--arsa-dark);
  font-weight: 850;
}

/* ---------- Breadcrumb ---------- */
.cmp_breadcrumbs {
  color: var(--arsa-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

.cmp_breadcrumbs a {
  font-weight: 700;
}

/* ---------- Lists ---------- */
.page ul li,
.page ol li,
.homepage_about ul li,
.additional_content ul li {
  margin-bottom: 7px;
}

/* ---------- Footer ---------- */
.pkp_structure_footer_wrapper {
  background:
    radial-gradient(circle at top right, rgba(182, 255, 0, 0.38), transparent 30%),
    linear-gradient(135deg, #07120A 0%, var(--arsa-dark) 100%);
  color: #ffffff;
  border-top: 6px solid var(--arsa-lime);
  margin-top: 36px;
  border-radius: 28px 28px 0 0;
}

.pkp_structure_footer {
  padding: 28px 24px;
}

.pkp_structure_footer a {
  color: var(--arsa-lime);
  font-weight: 700;
}

.pkp_structure_footer a:hover {
  color: #ffffff;
}

/* ---------- Custom Utility Classes ----------
   Boleh dipakai jika Bapak/Ibu menambahkan HTML di Homepage atau Sidebar.
   Contoh:
   <div class="arsa-card">...</div>
   <div class="arsa-badge">SINTA</div>
   --------------------------------------------------------- */

.arsa-card {
  background: #ffffff;
  border: 1px solid var(--arsa-border);
  border-top: 5px solid var(--arsa-lime);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: var(--arsa-shadow-soft);
}

.arsa-card-title {
  color: var(--arsa-dark);
  font-size: 20px;
  font-weight: 850;
  margin-bottom: 10px;
}

.arsa-badge,
.arsa-badge-lime,
.arsa-badge-dark {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 12px;
  margin: 4px 4px 4px 0;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.arsa-badge,
.arsa-badge-lime {
  background: var(--arsa-lime);
  color: var(--arsa-dark);
}

.arsa-badge-dark {
  background: var(--arsa-dark);
  color: #ffffff;
}

.arsa-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.arsa-info-item {
  background: var(--arsa-lime-pale);
  border: 1px solid var(--arsa-border);
  border-left: 5px solid var(--arsa-lime);
  border-radius: 14px;
  padding: 16px;
}

.arsa-info-item strong {
  display: block;
  color: var(--arsa-dark);
  font-size: 14px;
  margin-bottom: 5px;
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 991px) {
  .pkp_structure_main {
    padding: 22px;
    border-radius: 14px;
  }

  .pkp_structure_sidebar {
    padding-left: 0;
    margin-top: 24px;
  }

  .pkp_site_name a,
  .pkp_site_name .is_text {
    font-size: 26px;
  }

  .pkp_navigation_primary > li > a {
    padding: 12px 10px;
  }

  .arsa-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .pkp_site_name {
    padding: 26px 16px 22px;
  }

  .pkp_site_name a,
  .pkp_site_name .is_text {
    font-size: 22px;
    line-height: 1.35;
  }

  .pkp_structure_main {
    padding: 18px;
    box-shadow: none;
  }

  .homepage_about,
  .pkp_page_index .additional_content,
  .pkp_page_index .cmp_announcements,
  .pkp_page_index .current_issue {
    padding: 18px;
  }

  .obj_article_summary {
    padding: 16px;
  }

  .homepage_about table td,
  .additional_content table td,
  .page table td {
    display: block;
    width: 100% !important;
  }

  .homepage_about table td:first-child,
  .additional_content table td:first-child,
  .page table td:first-child {
    background: var(--arsa-lime-soft);
    border-bottom: none;
  }

  .arsa-info-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FINAL FIX ARSA OJS 3.4.0.8
   Logo + Header Integration for ARSA_logo_header_transparent_OJS_1600.png
   Warna dasar: #B6FF00
   Tempel bagian ini di paling bawah CSS, atau upload file CSS final ini langsung.
   ========================================================= */

/* Header dibuat light-academic agar logo ARSA gelap-lime menyatu dan terbaca */
.pkp_structure_head {
  background:
    radial-gradient(circle at top left, rgba(182, 255, 0, 0.34), transparent 30%),
    radial-gradient(circle at top right, rgba(182, 255, 0, 0.18), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7ffe8 62%, #eefad6 100%) !important;
  border-bottom: 6px solid #B6FF00 !important;
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 10px 28px rgba(16, 32, 21, 0.16) !important;
  overflow: hidden !important;
}

/* Area logo: hilangkan batas tinggi bawaan agar logo tidak kecil di tengah */
.pkp_site_name {
  text-align: center !important;
  padding: 18px 18px 16px !important;
  margin: 0 auto !important;
}

.pkp_site_name .is_img,
.pkp_site_name a.is_img {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

/* Ini bagian paling penting: override max-height:120px pada CSS lama */
.pkp_site_name .is_img img,
.pkp_site_name a.is_img img,
.pkp_site_name img {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 6px 16px rgba(16, 32, 21, 0.16));
  animation: arsaLogoFloat 5.5s ease-in-out infinite;
}

/* Jika OJS menampilkan judul teks, warna disesuaikan dengan header terang */
.pkp_site_name a,
.pkp_site_name .is_text {
  color: #102015 !important;
  text-shadow: none !important;
}

/* Shine effect halus agar logo terlihat hidup, bukan animasi berlebihan */
.pkp_site_name .is_img::after,
.pkp_site_name a.is_img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 70%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(182, 255, 0, 0.20) 48%, transparent 100%);
  transform: skewX(-18deg);
  animation: arsaLogoShine 6.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes arsaLogoFloat {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 6px 16px rgba(16, 32, 21, 0.16));
  }
  50% {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 24px rgba(182, 255, 0, 0.32));
  }
}

@keyframes arsaLogoShine {
  0% { left: -140%; opacity: 0; }
  18% { opacity: 1; }
  42% { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* Menu dibuat gelap agar kontras dengan header terang */
.pkp_navigation_primary_row {
  background: linear-gradient(90deg, #102015 0%, #183522 55%, #102015 100%) !important;
  border-top: 1px solid rgba(182, 255, 0, 0.35) !important;
  border-bottom: 1px solid rgba(182, 255, 0, 0.30) !important;
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
  background: #B6FF00 !important;
  color: #102015 !important;
}

/* User navigation */
.pkp_navigation_user a {
  color: #102015 !important;
  background: rgba(182, 255, 0, 0.18) !important;
}

.pkp_navigation_user a:hover {
  background: #102015 !important;
  color: #B6FF00 !important;
}

/* Mobile */
@media (max-width: 991px) {
  .pkp_site_name {
    padding: 14px 10px !important;
  }

  .pkp_site_name .is_img,
  .pkp_site_name a.is_img,
  .pkp_site_name .is_img img,
  .pkp_site_name a.is_img img,
  .pkp_site_name img {
    max-width: 96vw !important;
  }
}

@media (max-width: 640px) {
  .pkp_structure_head {
    border-radius: 0 0 18px 18px !important;
  }

  .pkp_site_name {
    padding: 12px 8px !important;
  }

  .pkp_site_name .is_img,
  .pkp_site_name a.is_img {
    border-radius: 12px !important;
  }
}

/* Respect accessibility preference */
@media (prefers-reduced-motion: reduce) {
  .pkp_site_name .is_img img,
  .pkp_site_name a.is_img img,
  .pkp_site_name img,
  .pkp_site_name .is_img::after,
  .pkp_site_name a.is_img::after {
    animation: none !important;
  }
}