/* =========================================================
   OJS AQUA MODERN RESPONSIVE THEME (Full Script Ready Copy)
   Dominant color: #44EFF3
   - Modern header & navigation (glass)
   - 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 (Aqua Variants) */
:root{
  --aqua:#44EFF3;           /* warna utama */
  --aqua-2:#22d3ee;         /* aqua lebih soft */
  --teal:#06b6d4;           /* teal/cyan */
  --teal-dark:#0891b2;      /* teal gelap */
  --navy:#062235;           /* navy gelap untuk kontras */
  --navy-2:#0b3552;         /* navy soft */

  --bg:#f2fdff;             /* background sangat lembut */
  --card:#ffffff;
  --text:#0b1f33;
  --muted:#64748b;
  --border:#e2e8f0;

  --shadow: 0 14px 34px rgba(6,34,53,.12);
  --shadow-sm: 0 8px 18px rgba(6,34,53,.10);
  --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(--navy-2); text-decoration: none; }
a:hover{ color: var(--teal-dark); 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 */
.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(68,239,243,.96) 0%, rgba(6,34,53,.96) 100%);
  border-bottom: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

/* 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: 650;
  text-decoration: none;
  opacity: .98;
}

/* 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, rgba(6,34,53,.98) 0%, rgba(11,53,82,.98) 55%, rgba(68,239,243,.85) 120%) !important;
}

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

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

/* Wrap menu for mobile */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul{
  flex-wrap: wrap;
}

/* Spacing menu */
.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(68,239,243,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(68,239,243,.26);
  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(68,239,243,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(68,239,243,.34);
}

/* Dropdown menu */
.pkp_navigation_primary_wrapper ul li ul{
  background: rgba(6,34,53,.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(68,239,243,.14) !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,.26);
  background: rgba(255,255,255,.10);
  color: #fff;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper .pkp_search.is_open input[type=text]::placeholder{
  color: rgba(255,255,255,.70);
}

/* =========================================================
   BUTTONS (Aqua modern)
   ========================================================= */
.cmp_button_wire, .obj_galley_link, .cmp_button{
  background: linear-gradient(180deg, var(--aqua) 0%, var(--teal-dark) 100%) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color: var(--navy) !important;            /* teks gelap biar kontras di aqua */
  border-radius: 14px !important;
  padding: .60rem 1.10rem !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 20px rgba(8,145,178,.22);
  transition: all .18s ease;
}
.cmp_button_wire:hover, .obj_galley_link:hover, .cmp_button:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  text-decoration: none;
}

/* =========================================================
   ARTICLE SUMMARY CARD (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 (aqua) */
.obj_article_summary:before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:6px; height:100%;
  background: linear-gradient(180deg, var(--aqua) 0%, var(--teal-dark) 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 (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: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 60%, rgba(68,239,243,.85) 140%);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(6,34,53,.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: #ecfeff !important; /* aqua sangat muda */
  border: 1px solid rgba(68,239,243,.22);
  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(--navy-2);
  font-weight: 800;
  text-decoration: none;
  transition: all .18s ease;
}

#customblock-Sidebar_menu.pkp_block ul li a:hover{
  background: rgba(68,239,243,.20) !important;
  transform: translateX(2px);
  text-decoration: none;
}

/* =========================================================
   FOOTER (modern + responsive + logo badges)
   ========================================================= */
.pkp_structure_footer_wrapper{
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 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(--aqua) !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,.32) !important;
  margin: 14px 0 !important;
}

/* Brand footer */
.pkp_structure_footer .pkp_brand_footer{
  background: rgba(255,255,255,.06) !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; }