/* =========================================================
   OJS GREEN MODERN RESPONSIVE THEME (Full Script Ready Copy)
   - Modern header & navigation (green)
   - Clean cards, buttons, sidebar
   - Footer refined + indexing logo badges
   - Responsive (mobile-friendly)
   - SAFE for OJS (no destructive global reset)
   ========================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Sunflower:wght@300;500&display=swap');

/* Theme variables (Green Variants) */
:root{
  --primary:#0f766e;        /* hijau utama (teal/emerald) */
  --primary-dark:#064e3b;   /* hijau tua */
  --primary-2:#10b981;      /* hijau terang */
  --lime:#a3e635;           /* aksen lime */
  --lime-dark:#65a30d;      /* aksen lime gelap */

  --bg:#f3faf7;             /* background hijau sangat lembut */
  --card:#ffffff;
  --text:#0b1f1a;
  --muted:#64748b;
  --border:#e2e8f0;

  --shadow: 0 14px 34px rgba(6,78,59,.14);
  --shadow-sm: 0 8px 18px rgba(6,78,59,.12);
  --radius:16px;
}

/* Base */
html, body{
  font-family: "Poppins","Sunflower", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
}

body{
  background-color: var(--bg);
  background-image: url(https://i.ibb.co/GngLz03/batik-BC-Rev.png);
  background-attachment: fixed;
}

/* Links */
a{ color: var(--primary-dark); text-decoration: none; }
a:hover{ color: var(--primary-2); text-decoration: underline; }

/* =========================================================
   PAGE WRAPPER (Responsive)
   ========================================================= */
.pkp_structure_page{
  margin: 22px auto;
  width: 1162px;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Mobile: full width + padding aman */
@media (max-width: 1000px){
  .pkp_structure_page{
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .pkp_structure_main{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Header spacing (lebih proporsional) */
.pkp_head_wrapper{ padding-top: 3.6rem; }
@media (max-width: 700px){
  .pkp_head_wrapper{ padding-top: 3.1rem; }
}

/* =========================================================
   HEADER / TOP USER BAR (modern + glass)
   ========================================================= */
.pkp_navigation_user{
  background: linear-gradient(90deg, rgba(15,118,110,.98) 0%, rgba(6,78,59,.98) 100%);
  border-bottom: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* Teks menu user */
.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus{
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  opacity: .96;
}

/* Dropdown user menu */
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > ul.dropdown-menu{
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* =========================================================
   PRIMARY MENU (NAVIGATION) - modern, sticky, responsive
   ========================================================= */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary_row{
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}

/* Sticky menu (modern) */
.pkp_navigation_primary_wrapper{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* Menu items */
.pkp_navigation_primary_wrapper a,
.pkp_navigation_primary_wrapper ul li a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a{
  color: #ffffff !important;
  font-weight: 650 !important;
}

/* Spacing menu */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul{
  flex-wrap: wrap; /* biar wrap di mobile */
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a{
  margin: 0 !important;
  padding: 0 14px !important;
  line-height: 46px !important;
  border-radius: 12px;
  transition: all .18s ease;
  letter-spacing: .2px;
}

/* Mobile menu: lebih padat */
@media (max-width: 700px){
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a{
    padding: 0 10px !important;
    line-height: 42px !important;
    border-radius: 10px;
  }
}

/* Hover menu */
.pkp_navigation_primary_wrapper a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover{
  background: rgba(255,255,255,.16) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Active/current menu */
.pkp_navigation_primary_wrapper .pkp_navigation_primary > li.current > a,
.pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:focus{
  background: rgba(163,230,53,.22) !important; /* lime highlight */
  box-shadow: inset 0 0 0 1px rgba(163,230,53,.32);
}

/* Dropdown menu */
.pkp_navigation_primary_wrapper ul li ul{
  background: rgba(6,78,59,.98) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.14);
}

.pkp_navigation_primary_wrapper ul li ul li{
  border-bottom: solid 1px rgba(255,255,255,.14) !important;
}
.pkp_navigation_primary_wrapper ul li ul li:last-child{ border-bottom: none !important; }

.pkp_navigation_primary_wrapper ul li ul li a{
  color: #ffffff !important;
  padding: 10px 14px !important;
  line-height: 1.2rem !important;
}
.pkp_navigation_primary_wrapper ul li ul li a:hover{
  background: rgba(255,255,255,.12) !important;
}

/* Search icon & teks Search putih */
.pkp_navigation_primary_wrapper .pkp_search button,
.pkp_navigation_primary_wrapper .pkp_search .search_prompt,
.pkp_navigation_primary_wrapper .pkp_search.is_open button{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Input search */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper .pkp_search.is_open input[type=text]{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper .pkp_search.is_open input[type=text]::placeholder{
  color: rgba(255,255,255,.72);
}

/* =========================================================
   BUTTONS (green modern)
   ========================================================= */
.cmp_button_wire, .obj_galley_link, .cmp_button{
  background: linear-gradient(180deg, var(--primary-2) 0%, var(--primary-dark) 100%) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: .60rem 1.10rem !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 20px rgba(6,78,59,.22);
  transition: all .18s ease;
}
.cmp_button_wire:hover, .obj_galley_link:hover, .cmp_button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  text-decoration: none;
}

/* Secondary: wire style (kalau ada) */
.cmp_button_wire{
  background: linear-gradient(180deg, rgba(16,185,129,.95) 0%, rgba(15,118,110,.95) 100%) !important;
}

/* =========================================================
   ARTICLE SUMMARY CARD (lebih modern)
   ========================================================= */
.obj_article_summary{
  border: 1px solid var(--border) !important;
  background: var(--card);
  padding: 16px !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .18s ease;
  position: relative;
}

/* Accent bar (hijau-lime) */
.obj_article_summary:before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:6px; height:100%;
  background: linear-gradient(180deg, var(--primary-2) 0%, var(--lime) 100%);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.obj_article_summary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
}

/* DOI label image */
.obj_article_summary .item.doi .label{
  background: url(/public/journals/8/images/icon-doi.png) left center no-repeat;
  width: 25px !important; height:24px !important;
  color: transparent; text-indent: 100%;
  white-space: nowrap; overflow: hidden;
}

/* Stats icons (FontAwesome) */
.obj_article_summary .item.stats .abstract,
.obj_article_summary .item.stats .galley{ position:relative; }
.obj_article_summary .item.stats .abstract{ margin-left: 20px; margin-right: 10px; }
.obj_article_summary .item.stats .galley{ margin-left: 25px; }
.obj_article_summary .item.stats .abstract:before{
  content: "\f080"; font-family: FontAwesome; left:-15px; position:absolute; top:0;
}
.obj_article_summary .item.stats .galley:before{
  content: "\f1c1"; font-family: FontAwesome; left:-15px; position:absolute; top:0;
}

/* =========================================================
   SIDEBAR (judul blok & menu lebih modern)
   ========================================================= */
.pkp_structure_sidebar .pkp_block{
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px !important;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px !important;
}

/* Title sidebar */
.pkp_structure_sidebar .pkp_block .title{
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(6,78,59,.18);
  margin: 0 0 10px 0;
}

/* Custom sidebar menu */
#customblock-Sidebar_menu.pkp_block ul,
#customblock-Sidebar_menu.pkp_block ul li{
  margin: 0 !important; padding: 0 !important; list-style: none;
}

#customblock-Sidebar_menu.pkp_block ul li{
  background: #ecfdf5 !important; /* hijau sangat muda */
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 14px;
  margin: 8px 0 !important;
  overflow: hidden;
}

#customblock-Sidebar_menu.pkp_block ul li a{
  display: block;
  line-height: 46px;
  padding: 0 14px;
  color: var(--primary-dark);
  font-weight: 750;
  text-decoration: none;
  transition: all .18s ease;
}

#customblock-Sidebar_menu.pkp_block ul li a:hover{
  background: rgba(163,230,53,.18) !important; /* lime hover */
  transform: translateX(2px);
  text-decoration: none;
}

/* =========================================================
   FOOTER (modern + rapi + logo badges)
   ========================================================= */
.pkp_structure_footer_wrapper{
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border: none !important;
  margin-top: 0 !important;
}

/* Isi footer */
.pkp_structure_footer .pkp_footer_content{
  padding: 26px 18px !important;
  color: #ffffff !important;
  max-width: 1162px;
  margin: 0 auto !important;
}

/* Responsive padding footer */
@media (max-width: 700px){
  .pkp_structure_footer .pkp_footer_content{
    padding: 18px 14px !important;
  }
}

/* Semua teks/link putih */
.pkp_structure_footer,
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content span,
.pkp_structure_footer .pkp_footer_content a{
  color: #ffffff !important;
}

/* Link hover */
.pkp_structure_footer .pkp_footer_content a:hover{
  color: var(--lime) !important;
  text-decoration: underline;
}

/* Paragraf */
.pkp_structure_footer .pkp_footer_content p{
  margin: 6px 0 !important;
  line-height: 1.55em;
  opacity: .96;
}

/* Separator */
.pkp_structure_footer .pkp_footer_content hr{
  border: none !important;
  height: 1px !important;
  background: rgba(255,255,255,.36) !important;
  margin: 14px 0 !important;
}

/* Brand footer */
.pkp_structure_footer .pkp_brand_footer{
  background: rgba(0,0,0,.12) !important;
  padding: 12px 0 16px 0 !important;
  height: auto !important;
}

/* Logo indexing jadi badge modern */
.pkp_structure_footer .pkp_footer_content img{
  max-height: 68px;
  height: auto;
  margin: 7px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  padding: 6px;
  box-shadow: 0 10px 16px rgba(0,0,0,.12);
}

/* =========================================================
   EXTRA: tools / visitor
   ========================================================= */
#customblock-Tools .content>.content div{ width: 86% !important; margin: auto; }
#customblock-Tools .content>.content div a img{ width: 100% !important; border-radius: 14px; }

#customblock-Visitor_statistics .content>.content .supercounter,
#customblock-Visitor_statistics .content>.content .statcounter{ text-align:center; }