/* ═══════════════════════════════════════════════════════════════════
   WALI.CSS — OJS Bootstrap Theme
   Version  : 1.0.0
   Author   : Muhammad Wali
   Website  : www.muhammadwali.com
   License  : MIT
   ---------------------------------------------------------------
   Prefix   : wali-
   Requires : Bootstrap 5 + Bootstrap Icons
              Google Fonts: Inter, Source Serif 4
   ---------------------------------------------------------------
   TABLE OF CONTENTS
   01. CSS Variables (Theme Tokens)
   02. Base & Reset
   03. Loader
   04. Topbar
   05. Marquee
   06. Header
   07. Navbar
   08. Page Hero (inner pages)
   09. Hero (Homepage)
   10. Buttons
   11. Stats Bar
   12. Issue List (Archive)
   13. Issue Hero (Issue Detail)
   14. Article Card (Search Results)
   15. Article Detail
   16. Cards & Content Blocks
   17. Tabs
   18. Accordion / FAQ
   19. Author Bio
   20. Person Card (Editorial Team)
   21. Contact Page
   22. Search Form
   23. Search Results
   24. Indexing Grid
   25. Static / Prose
   26. Journal Card (Portal)
   27. Sidebar
   28. References
   29. Metrics & Citations
   30. Announcements
   31. Section Headings
   32. Stat Pills
   33. CTA Card
   34. Footer
   35. Animations & Utilities
   36. Responsive
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   01. CSS VARIABLES (THEME TOKENS)
   Override in OJS child theme or per-journal stylesheet.
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --wali-primary:        #1a4f8a;
  --wali-primary-dark:   #0d2d52;
  --wali-primary-light:  #e8f0fe;
  --wali-accent:         #e05c1a;
  --wali-accent-dark:    #c04d10;
  --wali-gold:           #c8960c;
  --wali-gold-dark:      #a37a09;
  /* Semantic */
  --wali-green:          #1a7a4a;
  --wali-cyan:           #0891b2;
  --wali-red:            #dc2626;
  --wali-purple:         #6d28d9;
  /* Field colors */
  --wali-edu:            #1a4f8a;
  --wali-eco:            #1a7a4a;
  --wali-acc:            #c8960c;
  --wali-tech:           #0891b2;
  --wali-design:         #7c3aed;
  --wali-culture:        #b45309;
  /* Neutral */
  --wali-bg:             #e8edf4;
  --wali-surface:        #ffffff;
  --wali-border:         #dde3ec;
  --wali-light:          #f4f7fb;
  --wali-text:           #1e2a3a;
  --wali-muted:          #5a6a7e;
  /* Typography */
  --wali-font-body:      'Inter', system-ui, sans-serif;
  --wali-font-heading:   'Source Serif 4', Georgia, serif;
  --wali-font-size:      16px;
  --wali-line-height:    1.7;
  /* Radius */
  --wali-radius-sm:      4px;
  --wali-radius:         6px;
  --wali-radius-lg:      12px;
  /* Shadows */
  --wali-shadow-sm:      0 2px 8px rgba(0,0,0,.08);
  --wali-shadow:         0 4px 16px rgba(0,0,0,.10);
  --wali-shadow-lg:      0 8px 32px rgba(0,0,0,.14);
}


/* ═══════════════════════════════════════════════════════════════
   02. BASE & RESET
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--wali-font-size); }
body { font-family: var(--wali-font-body); background: var(--wali-bg); color: var(--wali-text); line-height: var(--wali-line-height); margin: 0; padding: 0; }
a { color: var(--wali-primary); text-decoration: none; }
a:hover { color: var(--wali-primary-dark); text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { font-family: var(--wali-font-heading); }
p { font-size: 1rem; }
img { max-width: 100%; height: auto; }


/* ═══════════════════════════════════════════════════════════════
   03. LOADER
═══════════════════════════════════════════════════════════════════ */
#wali-loader { position: fixed; inset: 0; z-index: 9999; background: var(--wali-primary-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s, visibility .6s; }
#wali-loader.wali-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.wali-ld-logo  { width: 84px; height: 84px; border-radius: 12px; margin-bottom: 18px; animation: waliPulse 1.5s ease-in-out infinite; }
.wali-ld-title { color: white; font-family: var(--wali-font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.wali-ld-sub   { color: rgba(255,255,255,.4); font-size: .82rem; letter-spacing: .1em; margin-bottom: 20px; }
.wali-ld-bar   { width: 220px; height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.wali-ld-fill  { height: 100%; background: linear-gradient(90deg,var(--wali-green),var(--wali-primary),var(--wali-accent)); animation: waliLdFill 2.3s ease forwards; }


/* ═══════════════════════════════════════════════════════════════
   04. TOPBAR
═══════════════════════════════════════════════════════════════════ */
#wali-topbar { background: var(--wali-primary-dark); color: rgba(255,255,255,.72); font-size: .82rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
#wali-topbar a { color: rgba(255,255,255,.72); }
#wali-topbar a:hover { color: white; text-decoration: none; }
.wali-topbar-item { display: inline-flex; align-items: center; gap: 5px; margin-right: 16px; }
.wali-open-badge { background: var(--wali-green); color: white; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: var(--wali-radius-sm); letter-spacing: .04em; }
.wali-lang-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); font-size: .78rem; padding: 2px 9px; border-radius: var(--wali-radius-sm); cursor: pointer; transition: background .2s; margin-left: 4px; }
.wali-lang-btn:hover { background: rgba(255,255,255,.2); }


/* ═══════════════════════════════════════════════════════════════
   05. MARQUEE
═══════════════════════════════════════════════════════════════════ */
#wali-marquee { background: linear-gradient(90deg,var(--wali-primary),var(--wali-primary-dark)); padding: 8px 0; border-bottom: 2px solid var(--wali-accent); overflow: hidden; }
.wali-marquee-label { background: var(--wali-accent); color: white; font-size: .78rem; font-weight: 700; padding: 3px 14px; border-radius: 0 4px 4px 0; margin-right: 16px; white-space: nowrap; flex-shrink: 0; }
.wali-marquee-wrap  { display: flex; align-items: center; overflow: hidden; }
.wali-marquee-track { display: flex; animation: waliMarquee 32s linear infinite; white-space: nowrap; }
.wali-marquee-track:hover { animation-play-state: paused; }
.wali-marquee-item  { color: rgba(255,255,255,.85); font-size: .8rem; padding: 0 30px; display: inline-flex; align-items: center; gap: 6px; }
.wali-marquee-item::before { content: '\2022'; color: var(--wali-accent); }


/* ═══════════════════════════════════════════════════════════════
   06. HEADER
═══════════════════════════════════════════════════════════════════ */
#wali-header { background: var(--wali-primary); padding: 18px 0; }
.wali-abbr-box { background: white; color: var(--wali-primary); font-weight: 900; font-size: 1.7rem; font-family: var(--wali-font-heading); width: 62px; height: 62px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wali-jname    { color: white; font-family: var(--wali-font-heading); font-size: 1.35rem; font-weight: 700; line-height: 1.2; margin: 0; }
.wali-jpub     { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 3px; }
.wali-issn-tag { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.92); font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: var(--wali-radius-sm); display: inline-block; margin-right: 6px; margin-top: 6px; }
/* Portal variant */
.wali-inst-logo      { width: 66px; height: 66px; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.wali-inst-logo img  { width: 100%; height: 100%; object-fit: contain; }
.wali-inst-logo-text { font-family: var(--wali-font-heading); font-weight: 900; font-size: 1.1rem; color: var(--wali-primary); }
.wali-inst-name { color: white; font-family: var(--wali-font-heading); font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0; }
.wali-inst-sub  { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 3px; }
.wali-inst-tag  { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.92); font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: var(--wali-radius-sm); display: inline-block; margin-right: 5px; margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════════
   07. NAVBAR
═══════════════════════════════════════════════════════════════════ */
#wali-navbar { background: var(--wali-surface); border-bottom: 3px solid var(--wali-primary); box-shadow: var(--wali-shadow-sm); position: sticky; top: 0; z-index: 100; }
#wali-navbar .nav-link { color: var(--wali-text) !important; font-size: .9rem; font-weight: 500; padding: 13px 15px !important; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: all .2s; }
#wali-navbar .nav-link:hover,
#wali-navbar .nav-link.active { color: var(--wali-primary) !important; border-bottom-color: var(--wali-primary); background: var(--wali-light); }
#wali-navbar .dropdown-item { font-size: .88rem; padding: 8px 16px; }
#wali-navbar .dropdown-item:hover { background: var(--wali-light); color: var(--wali-primary); }
.wali-search-form { display: flex; }
.wali-search-form input,
.wali-search-form input[type=text],
.wali-search-form input[type=search] { border: 1px solid var(--wali-border); border-right: none; border-radius: var(--wali-radius) 0 0 var(--wali-radius); padding: 7px 12px; font-size: .88rem; outline: none; width: 210px; font-family: var(--wali-font-body); }
.wali-search-form input:focus,
.wali-search-form input[type=text]:focus,
.wali-search-form input[type=search]:focus { border-color: var(--wali-primary); }
.wali-search-form button { background: var(--wali-primary); color: white; border: none; padding: 7px 14px; border-radius: 0 var(--wali-radius) var(--wali-radius) 0; cursor: pointer; font-size: .88rem; }


/* ═══════════════════════════════════════════════════════════════
   08. PAGE HERO (inner pages)
═══════════════════════════════════════════════════════════════════ */
#wali-page-hero { background: linear-gradient(135deg,var(--wali-primary-dark),var(--wali-primary)); padding: 30px 0; }
.wali-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 10px; flex-wrap: wrap; }
.wali-breadcrumb a { color: rgba(255,255,255,.7); }
.wali-breadcrumb a:hover { color: white; text-decoration: none; }
.wali-page-title { font-family: var(--wali-font-heading); font-size: 1.9rem; font-weight: 700; color: white; margin: 0 0 6px; }
.wali-page-sub   { color: rgba(255,255,255,.65); font-size: .92rem; margin: 0; }
.wali-page-icon  { width: 52px; height: 52px; border-radius: var(--wali-radius); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; flex-shrink: 0; }
.wali-status-open { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: white; font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; }
.wali-status-open::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; animation: waliPulse 1.5s infinite; }


/* ═══════════════════════════════════════════════════════════════
   09. HERO (HOMEPAGE)
═══════════════════════════════════════════════════════════════════ */
#wali-hero { background: linear-gradient(135deg,var(--wali-primary-dark) 0%,var(--wali-primary) 55%,#2563ab 100%); padding: 0; position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: stretch; }
#wali-hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.04); }
#wali-hero::after  { content: ''; position: absolute; bottom: -60px; left: 5%; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.03); }
.wali-hero-content { position: relative; z-index: 2; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }
.wali-hero-badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: var(--wali-radius-sm); display: inline-flex; align-items: center; gap: 5px; }
.wali-hero-badge.eco { background: rgba(26,122,74,.3); border-color: rgba(26,122,74,.5); }
.wali-hero-title { font-family: var(--wali-font-heading); font-size: clamp(1.8rem,3.5vw,2.6rem); font-weight: 700; color: white; line-height: 1.2; margin: 0 0 14px; }
.wali-hero-desc  { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.8; margin-bottom: 24px; }
.wali-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wali-hero-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--wali-radius); padding: 16px 20px; text-align: center; flex: 1; }
.wali-hero-stat-num { font-family: var(--wali-font-heading); font-size: 1.9rem; font-weight: 900; color: white; line-height: 1; }
.wali-hero-stat-lbl { font-size: .78rem; color: rgba(255,255,255,.7); margin-top: 4px; }
.wali-hero-cover-col { position: relative; z-index: 2; display: flex; align-items: stretch; padding: 0; }
.wali-cover-wrapper  { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px 24px 16px 0; }
.wali-cover-card { width: 100%; max-width: 280px; aspect-ratio: 3/4; background: #07182E; position: relative; display: flex; place-content: center; place-items: center; overflow: hidden; border-radius: 20px; }
.wali-cover-card::before { content: ''; position: absolute; width: 120px; background-image: linear-gradient(180deg,rgb(0,183,255),rgb(255,48,255)); height: 130%; animation: waliRotBG 3s linear infinite; }
.wali-cover-card::after  { content: ''; position: absolute; background: #07182E; inset: 5px; border-radius: 15px; }
.wali-cover-inner { position: relative; z-index: 1; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 14px; overflow: hidden; }
.wali-cover-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }


/* ═══════════════════════════════════════════════════════════════
   10. BUTTONS
═══════════════════════════════════════════════════════════════════ */
.wali-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--wali-radius); font-size: .88rem; font-weight: 700; border: none; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; line-height: 1; }
.wali-btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.wali-btn-primary { background: var(--wali-primary); color: white; }
.wali-btn-accent  { background: var(--wali-accent); color: white; }
.wali-btn-dark    { background: #2d2d2d; color: white; }
.wali-btn-outline { background: white; color: var(--wali-text); border: 1px solid #ccc; }
.wali-btn-green   { background: var(--wali-green); color: white; }
.wali-btn-cyan    { background: var(--wali-cyan); color: white; }
.wali-btn-red     { background: var(--wali-red); color: white; }
.wali-btn-amber   { background: var(--wali-gold); color: white; }
.wali-btn-purple  { background: var(--wali-purple); color: white; }
.wali-btn-ghost   { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.3); }
.wali-btn-lg { padding: 11px 26px; font-size: .95rem; }
.wali-btn-sm { padding: 5px 12px; font-size: .78rem; }
.wali-btn-xs { padding: 4px 10px; font-size: .74rem; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: var(--wali-radius-sm); }
.wali-btn-abs  { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); font-size: .78rem; font-weight: 600; color: var(--wali-primary); background: var(--wali-light); cursor: pointer; transition: all .2s; }
.wali-btn-abs:hover, .wali-btn-abs.active { background: var(--wali-primary); color: white; border-color: var(--wali-primary); }
.wali-btn-full { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--wali-radius-sm); font-size: .78rem; font-weight: 700; color: white; background: var(--wali-primary); border: 1px solid var(--wali-primary); text-decoration: none; transition: all .2s; }
.wali-btn-full:hover { background: var(--wali-primary-dark); color: white; text-decoration: none; }
.wali-btn-pdf  { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--wali-radius-sm); font-size: .78rem; font-weight: 700; color: white; background: var(--wali-accent); border: 1px solid var(--wali-accent); text-decoration: none; transition: all .2s; }
.wali-btn-pdf:hover { background: var(--wali-accent-dark); color: white; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   11. STATS BAR
═══════════════════════════════════════════════════════════════════ */
#wali-stats { background: var(--wali-surface); border-bottom: 1px solid var(--wali-border); }
.wali-stat-block { cursor: pointer; border-right: 1px solid var(--wali-border); }
.wali-stat-block:last-child { border-right: none; }
.wali-stat-head { padding: 22px 20px 16px; position: relative; overflow: hidden; user-select: none; }
.wali-stat-head::after { content: ''; position: absolute; right: -14px; top: -14px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.12); }
.wali-stat-num  { font-family: var(--wali-font-heading); font-size: 2.4rem; font-weight: 900; color: white; line-height: 1; margin: 0; }
.wali-stat-lbl  { font-size: .92rem; color: rgba(255,255,255,.88); font-weight: 600; margin-top: 5px; }
.wali-stat-hint { font-size: .74rem; color: rgba(255,255,255,.6); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.wali-stat-bg-icon { position: absolute; right: 12px; top: 12px; font-size: 2.8rem; opacity: .18; color: white; }
.wali-stat-edu  .wali-stat-head { background: linear-gradient(135deg,#1a4f8a,#2563ab); }
.wali-stat-eco  .wali-stat-head { background: linear-gradient(135deg,#1a7a4a,#16a34a); }
.wali-stat-acc  .wali-stat-head { background: linear-gradient(135deg,#c8960c,#d97706); }
.wali-stat-tech .wali-stat-head { background: linear-gradient(135deg,#0891b2,#0e7490); }
.wali-stat-detail { padding: 14px 20px; background: #fafbfc; border-top: 1px solid var(--wali-border); }
.wali-stat-drow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #eee; font-size: .9rem; }
.wali-stat-drow:last-child { border-bottom: none; }
.wali-stat-dval  { font-weight: 700; color: var(--wali-primary); font-size: .95rem; }
.wali-stat-dhigh { font-weight: 700; color: var(--wali-cyan); font-size: .95rem; }
.wali-stat-row   { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--wali-border); font-size: .88rem; }
.wali-stat-row:last-child { border-bottom: none; }
.wali-stat-row-val { font-weight: 700; color: var(--wali-primary); font-size: .92rem; }
.wali-time-row  { background: var(--wali-surface); border-top: 1px solid var(--wali-border); }
.wali-time-cell { text-align: center; padding: 16px 10px; border-right: 1px solid var(--wali-border); }
.wali-time-cell:last-child { border-right: none; }
.wali-time-num  { font-family: var(--wali-font-heading); font-size: 2rem; font-weight: 900; color: var(--wali-primary); line-height: 1; }
.wali-time-unit { font-size: .8rem; color: var(--wali-muted); }
.wali-time-lbl  { font-size: .78rem; color: var(--wali-muted); margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════
   12. ISSUE LIST (Archive)
═══════════════════════════════════════════════════════════════════ */
.wali-issue-item { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); display: flex; overflow: hidden; margin-bottom: 20px; transition: box-shadow .2s, transform .15s; position: relative; min-height: 200px; }
.wali-issue-item:hover { box-shadow: var(--wali-shadow); transform: translateY(-2px); }
.wali-issue-item.current { border-left: 4px solid var(--wali-accent); }
.wali-issue-cover { width: 140px; flex-shrink: 0; position: relative; overflow: hidden; align-self: stretch; }
.wali-issue-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s; }
.wali-issue-item:hover .wali-issue-cover img { transform: scale(1.04); }
.wali-issue-cover-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--wali-font-heading); font-weight: 900; font-size: 1.8rem; color: rgba(255,255,255,.55); }
.wali-issue-cover-ph small { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.4); font-family: var(--wali-font-body); margin-top: 6px; text-align: center; }
.wali-current-badge { position: absolute; top: 10px; left: 0; background: var(--wali-accent); color: white; font-size: .62rem; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 0 var(--wali-radius-sm) var(--wali-radius-sm) 0; letter-spacing: .04em; z-index: 2; box-shadow: 2px 2px 6px rgba(0,0,0,.2); }
.wali-issue-body    { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.wali-issue-meta    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.wali-issue-jname   { font-size: .78rem; font-weight: 600; color: var(--wali-primary); display: flex; align-items: center; gap: 4px; }
.wali-issue-type    { font-size: .72rem; background: var(--wali-light); border: 1px solid var(--wali-border); color: var(--wali-muted); padding: 2px 8px; border-radius: var(--wali-radius-sm); font-weight: 600; }
.wali-issue-pubdate { font-size: .76rem; color: var(--wali-muted); display: flex; align-items: center; gap: 4px; }
.wali-issue-vol     { font-family: var(--wali-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--wali-primary-dark); margin-bottom: 2px; line-height: 1.3; }
.wali-issue-month   { font-size: .78rem; font-weight: 700; color: var(--wali-accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.wali-issue-desc    { font-size: .9rem; color: var(--wali-muted); line-height: 1.75; margin-bottom: 14px; flex: 1; }
.wali-issue-foot    { display: flex; align-items: center; }
.wali-shape { position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; pointer-events: none; overflow: hidden; }
.wali-shape::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 50px 50px; border-color: transparent transparent var(--wali-light) transparent; }
/* Pagination */
.wali-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--wali-border); }
.wali-page-info { font-size: .82rem; color: var(--wali-muted); }
.wali-page-btns { display: flex; gap: 4px; }
.wali-page-btn  { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); font-size: .82rem; font-weight: 600; color: var(--wali-muted); background: var(--wali-surface); cursor: pointer; transition: all .2s; text-decoration: none; padding: 0 8px; }
.wali-page-btn:hover { border-color: var(--wali-primary); color: var(--wali-primary); text-decoration: none; }
.wali-page-btn.active { background: var(--wali-primary); color: white; border-color: var(--wali-primary); }
.wali-page-btn.disabled { opacity: .35; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════
   13. ISSUE HERO (Issue Detail)
═══════════════════════════════════════════════════════════════════ */
.wali-issue-hero { display: flex; gap: 28px; align-items: flex-start; }
.wali-issue-hero-cover { width: 180px; flex-shrink: 0; border-radius: var(--wali-radius); overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.25); position: relative; top: 24px; z-index: 2; }
.wali-issue-hero-cover img { width: 100%; display: block; }
.wali-issue-hero-cover-ph { width: 100%; height: 240px; background: linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.06)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--wali-font-heading); font-weight: 900; font-size: 2.4rem; color: rgba(255,255,255,.75); }
.wali-issue-hero-cover-ph small { font-size: .65rem; font-family: var(--wali-font-body); color: rgba(255,255,255,.45); margin-top: 6px; }
.wali-issue-hero-info  { flex: 1; padding-bottom: 24px; }
.wali-current-pill     { display: inline-flex; align-items: center; gap: 5px; background: var(--wali-accent); color: white; font-size: .72rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 8px; letter-spacing: .04em; }
.wali-issue-hero-month { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.wali-issue-hero-title { font-family: var(--wali-font-heading); font-size: 1.65rem; font-weight: 700; color: white; line-height: 1.25; margin-bottom: 5px; }
.wali-issue-hero-vol   { font-size: .9rem; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.wali-issue-hero-desc  { font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.8; margin-bottom: 16px; }
.wali-issue-meta-row   { display: flex; gap: 8px; flex-wrap: wrap; }
.wali-meta-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: .78rem; padding: 4px 11px; border-radius: var(--wali-radius-sm); }
.wali-meta-chip strong { color: white; }
.wali-issue-stat-bar { background: var(--wali-primary-dark); border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; }
.wali-issue-stat-bar .container { display: flex; flex-wrap: wrap; }
.wali-istat { flex: 1; min-width: 90px; text-align: center; padding: 8px 12px; border-right: 1px solid rgba(255,255,255,.08); }
.wali-istat:last-child { border-right: none; }
.wali-istat-num { font-family: var(--wali-font-heading); font-size: 1.6rem; font-weight: 800; color: white; line-height: 1; }
.wali-istat-lbl { font-size: .68rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.wali-metrics-bar { background: var(--wali-light); border-bottom: 1px solid var(--wali-border); padding: 12px 0; }
.wali-metrics-bar .container { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.wali-metric-item  { display: flex; align-items: center; gap: 10px; }
.wali-metric-icon  { width: 36px; height: 36px; border-radius: var(--wali-radius); color: white; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.wali-metric-val   { font-family: var(--wali-font-heading); font-size: 1.1rem; font-weight: 800; color: var(--wali-primary-dark); line-height: 1; }
.wali-metric-lbl   { font-size: .72rem; color: var(--wali-muted); }
.wali-metric-sep   { width: 1px; height: 36px; background: var(--wali-border); }
.wali-metric-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════════
   14. ARTICLE CARD (Search Results)
═══════════════════════════════════════════════════════════════════ */
.wali-article-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); margin-bottom: 10px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.wali-article-card:hover { box-shadow: 0 3px 16px rgba(26,79,138,.1); border-color: #bfdbfe; }
.wali-article-inner { padding: 15px 18px 13px; }
.wali-article-top   { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.wali-vol-badge     { background: var(--wali-primary); color: white; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--wali-radius-sm); }
.wali-pages-badge   { background: var(--wali-light); border: 1px solid var(--wali-border); color: var(--wali-muted); font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: var(--wali-radius-sm); display: inline-flex; align-items: center; gap: 3px; }
.wali-article-title { font-family: var(--wali-font-heading); font-size: .97rem; font-weight: 700; color: var(--wali-primary-dark); line-height: 1.4; margin-bottom: 6px; }
.wali-article-title a { color: inherit; }
.wali-article-title a:hover { color: var(--wali-primary); text-decoration: none; }
.wali-highlight     { background: #fef9c3; color: #713f12; border-radius: 2px; padding: 0 2px; font-weight: 700; }
.wali-article-authors { font-size: .81rem; color: var(--wali-muted); margin-bottom: 5px; display: flex; align-items: flex-start; gap: 5px; }
.wali-article-authors i { flex-shrink: 0; margin-top: 3px; color: var(--wali-primary); }
.wali-affil-toggle  { font-size: .72rem; color: var(--wali-primary); cursor: pointer; font-weight: 600; border: none; background: none; padding: 0 0 0 4px; transition: color .2s; }
.wali-affil-toggle:hover { color: var(--wali-primary-dark); text-decoration: underline; }
.wali-affil-box     { display: none; background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 9px 12px; font-size: .77rem; color: var(--wali-muted); margin: 5px 0 6px; line-height: 1.7; }
.wali-affil-box.show { display: block; }
.wali-article-meta  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .76rem; color: var(--wali-muted); margin-bottom: 9px; }
.wali-article-meta span { display: inline-flex; align-items: center; gap: 3px; }
.wali-article-meta i { color: var(--wali-primary); font-size: .74rem; }
.wali-article-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--wali-muted); margin-bottom: 10px; }
.wali-article-stats span { display: inline-flex; align-items: center; gap: 3px; }
.wali-idx-row  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.wali-idx-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); font-size: .7rem; font-weight: 600; color: var(--wali-muted); background: var(--wali-light); transition: all .2s; text-decoration: none; }
.wali-idx-link:hover { background: var(--wali-primary); color: white; border-color: var(--wali-primary); text-decoration: none; }
.wali-idx-link img { width: 12px; height: 12px; object-fit: contain; }
.wali-article-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--wali-border); }
.wali-abstract-box { display: none; background: var(--wali-light); border-left: 3px solid var(--wali-primary); padding: 11px 15px; margin-top: 10px; border-radius: 0 var(--wali-radius-sm) var(--wali-radius-sm) 0; font-size: .84rem; color: var(--wali-muted); line-height: 1.8; }
.wali-abstract-box.show { display: block; }


/* ═══════════════════════════════════════════════════════════════
   15. ARTICLE DETAIL
═══════════════════════════════════════════════════════════════════ */
.wali-art-type-pill  { display: inline-flex; align-items: center; gap: 5px; background: var(--wali-accent); color: white; font-size: .72rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; }
.wali-art-hero-title { font-family: var(--wali-font-heading); font-size: 1.5rem; font-weight: 700; color: white; line-height: 1.3; margin-bottom: 10px; }
.wali-art-cover-col  { width: 190px; flex-shrink: 0; }
.wali-art-cover-wrap { border-radius: var(--wali-radius); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.2); position: relative; top: 20px; z-index: 2; }
.wali-art-cover-wrap img { width: 100%; display: block; }
.wali-art-cover-ph   { width: 100%; height: 250px; background: linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05)); display: flex; align-items: center; justify-content: center; font-family: var(--wali-font-heading); font-weight: 900; font-size: 2.2rem; color: rgba(255,255,255,.7); }
.wali-pdf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--wali-accent); color: white; font-weight: 700; font-size: .88rem; padding: 10px; border-radius: var(--wali-radius); margin-top: 28px; transition: all .2s; text-decoration: none; }
.wali-pdf-btn:hover { background: var(--wali-accent-dark); color: white; text-decoration: none; }
.wali-meta-info-row  { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wali-meta-info-item { display: flex; align-items: center; gap: 8px; }
.wali-meta-info-icon { width: 30px; height: 30px; border-radius: var(--wali-radius-sm); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: white; font-size: .8rem; flex-shrink: 0; }
.wali-meta-info-lbl  { font-size: .7rem; color: rgba(255,255,255,.55); }
.wali-meta-info-val  { font-size: .86rem; color: white; font-weight: 600; }
.wali-meta-info-val a { color: rgba(255,255,255,.85); }
.wali-share-inline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.wali-share-lbl    { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.55); }
.wali-share-btn    { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: var(--wali-radius-sm); font-size: .75rem; font-weight: 600; text-decoration: none; transition: all .2s; opacity: .85; }
.wali-share-btn:hover { opacity: 1; text-decoration: none; transform: translateY(-1px); }
.wali-share-fb { background: #1877f2; color: white; }
.wali-share-tw { background: #1da1f2; color: white; }
.wali-share-li { background: #0a66c2; color: white; }
.wali-share-em { background: rgba(255,255,255,.2); color: white; }
.wali-art-stat-bar { background: var(--wali-primary-dark); border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; }
.wali-art-stat-bar .container { display: flex; flex-wrap: wrap; }
.wali-astat { flex: 1; min-width: 80px; text-align: center; padding: 8px 12px; border-right: 1px solid rgba(255,255,255,.08); }
.wali-astat:last-child { border-right: none; }
.wali-astat-num { font-family: var(--wali-font-heading); font-size: 1.4rem; font-weight: 800; color: white; line-height: 1; }
.wali-astat-lbl { font-size: .65rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.wali-art-scholar-links { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 9px; font-size: .8rem; }
.wali-art-scholar-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--wali-muted); padding: 2px 0; }
.wali-art-scholar-links a:hover { color: var(--wali-primary); text-decoration: underline; }
.wali-art-scholar-links .sep { color: var(--wali-border); margin: 0 6px; font-size: .9rem; }
/* Article items (issue detail list) */
.wali-art-item { padding: 16px 0; border-bottom: 1px solid var(--wali-border); }
.wali-art-item:last-child { border-bottom: none; padding-bottom: 0; }
.wali-art-title   { font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; color: var(--wali-primary-dark); line-height: 1.4; margin-bottom: 5px; }
.wali-art-title a { color: var(--wali-primary-dark); }
.wali-art-title a:hover { color: var(--wali-primary); }
.wali-art-authors { font-size: .84rem; color: var(--wali-muted); margin-bottom: 3px; }
.wali-art-authors a { color: var(--wali-primary); font-weight: 500; }
.wali-art-meta    { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 7px; font-size: .78rem; color: var(--wali-muted); }
.wali-art-meta span { display: inline-flex; align-items: center; gap: 4px; }
.wali-art-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Article num badges */
.wali-art-num { width: 30px; height: 30px; border-radius: 50%; background: var(--wali-primary); color: white; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.wali-art-num.gold   { background: var(--wali-gold); }
.wali-art-num.green  { background: var(--wali-green); }
.wali-art-num.red    { background: var(--wali-red); }
.wali-art-num.cyan   { background: var(--wali-cyan); }
.wali-art-num.purple { background: var(--wali-purple); }
.wali-art-tag { font-size: .7rem; padding: 2px 8px; border-radius: var(--wali-radius-sm); font-weight: 600; display: inline-block; }
.wali-tag-article   { background: #dbeafe; color: #1d4ed8; }
.wali-tag-editorial { background: #fef3c7; color: #92400e; }
.wali-tag-popular   { background: #dcfce7; color: #166534; }


/* ═══════════════════════════════════════════════════════════════
   16. CARDS & CONTENT BLOCKS
═══════════════════════════════════════════════════════════════════ */
.wali-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); margin-bottom: 18px; overflow: hidden; }
.wali-card-head { padding: 13px 18px; border-bottom: 2px solid var(--wali-primary); display: flex; align-items: center; gap: 8px; font-family: var(--wali-font-heading); font-size: .95rem; font-weight: 700; color: var(--wali-primary-dark); }
.wali-card-body { padding: 18px; }
.wali-content-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; }
.wali-content-head { padding: 13px 18px; border-bottom: 2px solid var(--wali-primary); display: flex; align-items: center; justify-content: space-between; }
.wali-content-head-title { font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; color: var(--wali-primary-dark); display: flex; align-items: center; gap: 8px; }
.wali-content-body { padding: 18px; }
.wali-abstract-text { font-size: .92rem; line-height: 1.85; color: var(--wali-text); text-align: justify; margin: 0; }
.wali-kw-tag { display: inline-flex; align-items: center; background: var(--wali-light); border: 1px solid var(--wali-border); color: var(--wali-primary); font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin: 3px; transition: all .2s; }
.wali-kw-tag:hover { background: var(--wali-primary); color: white; text-decoration: none; }
.wali-id-table { width: 100%; font-size: .88rem; }
.wali-id-table td { padding: 7px 10px; border-bottom: 1px solid var(--wali-border); }
.wali-id-table tr:last-child td { border-bottom: none; }
.wali-id-table td:first-child { color: var(--wali-muted); font-weight: 600; width: 45%; }
/* Issue table */
.wali-issue-table { width: 100%; font-size: .85rem; }
.wali-issue-table td { padding: 7px 15px; border-bottom: 1px solid var(--wali-border); }
.wali-issue-table tr:last-child td { border-bottom: none; }
.wali-issue-table td:first-child { color: var(--wali-muted); font-weight: 600; width: 45%; }

/* ═══════════════════════════════════════════════════════════════
   17. TABS
═══════════════════════════════════════════════════════════════════ */
.wali-tabs { display: flex; border-bottom: 2px solid var(--wali-border); flex-wrap: wrap; }
.wali-tab-btn { padding: 10px 16px; font-size: .86rem; font-weight: 600; color: var(--wali-muted); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.wali-tab-btn.active { color: var(--wali-primary); border-bottom-color: var(--wali-primary); }
.wali-tab-btn:hover  { color: var(--wali-primary); }
.wali-tab-pane { display: none; padding: 18px 0 0; }
.wali-tab-pane.active { display: block; }
.wali-tab-nav { border-bottom: 2px solid var(--wali-border); margin-bottom: 0; }
.wali-tab-nav .nav-link { font-size: .9rem; font-weight: 600; color: var(--wali-muted); padding: 11px 20px; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 0; background: none; display: inline-flex; align-items: center; gap: 7px; }
.wali-tab-nav .nav-link:hover  { color: var(--wali-primary); background: var(--wali-light); }
.wali-tab-nav .nav-link.active { color: var(--wali-primary); border-bottom-color: var(--wali-primary); background: var(--wali-surface); }
.wali-tab-content { background: var(--wali-surface); border: 1px solid var(--wali-border); border-top: none; border-radius: 0 0 var(--wali-radius) var(--wali-radius); }
.wali-tab-sub-head { padding: 11px 18px; font-size: .88rem; font-weight: 700; border-bottom: 1px solid var(--wali-border); display: flex; align-items: center; gap: 7px; }


/* ═══════════════════════════════════════════════════════════════
   18. ACCORDION / FAQ
═══════════════════════════════════════════════════════════════════ */
.wali-faq-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.wali-faq-tab  { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 20px; font-size: .82rem; font-weight: 600; border: 1px solid var(--wali-border); background: var(--wali-surface); color: var(--wali-muted); cursor: pointer; transition: all .2s; user-select: none; }
.wali-faq-tab:hover { border-color: var(--wali-primary); color: var(--wali-primary); }
.wali-faq-tab.active { background: var(--wali-primary); color: white; border-color: var(--wali-primary); }
.wali-faq-tab .badge { background: rgba(255,255,255,.25); color: white; font-size: .68rem; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
.wali-faq-tab:not(.active) .badge { background: var(--wali-light); color: var(--wali-muted); }
.wali-faq-group { margin-bottom: 28px; }
.wali-faq-group-title { display: flex; align-items: center; gap: 9px; font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; color: var(--wali-primary-dark); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--wali-border); }
.wali-faq-group-icon  { width: 32px; height: 32px; border-radius: var(--wali-radius-sm); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.wali-acc-item { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); margin-bottom: 6px; overflow: hidden; transition: box-shadow .2s; }
.wali-acc-item.open { box-shadow: 0 2px 12px rgba(26,79,138,.09); border-color: #bfdbfe; }
.wali-acc-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left; transition: background .2s; }
.wali-acc-btn:hover { background: var(--wali-light); }
.wali-acc-item.open .wali-acc-btn { background: var(--wali-light); }
.wali-acc-num { width: 24px; height: 24px; border-radius: 50%; background: var(--wali-primary); color: white; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wali-acc-item.open .wali-acc-num { background: var(--wali-accent); }
.wali-acc-q { flex: 1; font-size: .9rem; font-weight: 600; color: var(--wali-text); line-height: 1.4; }
.wali-acc-item.open .wali-acc-q { color: var(--wali-primary-dark); }
.wali-acc-chevron { font-size: .8rem; color: var(--wali-muted); transition: transform .25s; flex-shrink: 0; }
.wali-acc-item.open .wali-acc-chevron { transform: rotate(180deg); color: var(--wali-primary); }
.wali-acc-body { display: none; padding: 0 16px 16px 52px; font-size: .88rem; color: var(--wali-muted); line-height: 1.8; }
.wali-acc-item.open .wali-acc-body { display: block; }
.wali-acc-body a { color: var(--wali-primary); text-decoration: underline; }
.wali-acc-body ul { padding-left: 1.2rem; margin: 8px 0; }
.wali-acc-body li { margin-bottom: 4px; }
.wali-acc-body strong { color: var(--wali-text); }


/* ═══════════════════════════════════════════════════════════════
   19. AUTHOR BIO
═══════════════════════════════════════════════════════════════════ */
.wali-author-bio { padding: 14px 0; border-bottom: 1px solid var(--wali-border); }
.wali-author-bio:last-child { border-bottom: none; padding-bottom: 0; }
.wali-author-name  { font-weight: 700; font-size: .95rem; color: var(--wali-primary-dark); }
.wali-author-affil { font-size: .82rem; color: var(--wali-muted); display: flex; align-items: center; gap: 5px; margin: 3px 0 5px; }
.wali-author-bio-text { font-size: .85rem; color: var(--wali-text); line-height: 1.75; text-align: justify; }
.wali-author-links { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.wali-author-link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--wali-radius-sm); font-size: .74rem; font-weight: 600; border: 1px solid var(--wali-border); color: var(--wali-muted); background: var(--wali-light); transition: all .2s; }
.wali-author-link-btn:hover { background: var(--wali-primary); color: white; border-color: var(--wali-primary); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   20. PERSON CARD (Editorial Team)
═══════════════════════════════════════════════════════════════════ */
.wali-section-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 20px; }
.wali-section-divider-line  { flex: 1; height: 2px; background: var(--wali-border); }
.wali-section-divider-label { display: flex; align-items: center; gap: 8px; background: var(--wali-primary); color: white; font-family: var(--wali-font-heading); font-size: .92rem; font-weight: 700; padding: 7px 18px; border-radius: 20px; white-space: nowrap; }
.wali-person-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; height: 100%; }
.wali-person-card:hover { box-shadow: 0 6px 24px rgba(26,79,138,.12); transform: translateY(-2px); }
.wali-person-card-top { padding: 20px 20px 14px; display: flex; gap: 14px; align-items: flex-start; }
.wali-person-avatar { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg,var(--wali-primary),var(--wali-primary-dark)); color: white; font-family: var(--wali-font-heading); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid var(--wali-border); }
.wali-person-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wali-person-name  { font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; color: var(--wali-primary-dark); margin: 0 0 2px; line-height: 1.3; }
.wali-person-role  { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-bottom: 5px; }
.wali-person-role.editor-in-chief { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.wali-person-role.editor   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.wali-person-role.reviewer { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.wali-person-role.managing { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.wali-person-affil { font-size: .8rem; color: var(--wali-muted); display: flex; align-items: flex-start; gap: 5px; line-height: 1.5; }
.wali-person-affil i { flex-shrink: 0; margin-top: 3px; }
.wali-person-card-body { padding: 0 20px 14px; }
.wali-person-country { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--wali-muted); margin-bottom: 8px; }
.wali-person-expertise { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.wali-expertise-tag { display: inline-flex; align-items: center; background: var(--wali-light); border: 1px solid var(--wali-border); color: var(--wali-primary); font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.wali-person-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--wali-border); background: var(--wali-light); }
.wali-person-link  { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--wali-radius-sm); border: 1px solid var(--wali-border); background: var(--wali-surface); font-size: .73rem; font-weight: 600; color: var(--wali-muted); transition: all .2s; text-decoration: none; }
.wali-person-link:hover { background: var(--wali-primary); color: white; border-color: var(--wali-primary); text-decoration: none; }
.wali-person-link img { width: 14px; height: 14px; object-fit: contain; }
/* Stat pills */
.wali-stat-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.wali-stat-pill   { display: flex; align-items: center; gap: 8px; background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); padding: 10px 16px; }
.wali-stat-pill-num { font-family: var(--wali-font-heading); font-size: 1.4rem; font-weight: 800; color: var(--wali-primary); line-height: 1; }
.wali-stat-pill-lbl { font-size: .72rem; color: var(--wali-muted); text-transform: uppercase; letter-spacing: .05em; }


/* ═══════════════════════════════════════════════════════════════
   21. CONTACT PAGE
═══════════════════════════════════════════════════════════════════ */
.wali-contact-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; height: 100%; }
.wali-contact-card-head { padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid var(--wali-primary); }
.wali-contact-card-head.support-head { border-bottom-color: var(--wali-green); }
.wali-contact-card-icon { width: 44px; height: 44px; border-radius: var(--wali-radius); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.wali-contact-card-icon.primary { background: var(--wali-primary); color: white; }
.wali-contact-card-icon.support { background: var(--wali-green); color: white; }
.wali-contact-card-title { font-family: var(--wali-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--wali-primary-dark); margin: 0; }
.wali-contact-card-sub  { font-size: .76rem; color: var(--wali-muted); margin-top: 2px; }
.wali-contact-card-body { padding: 6px 20px 18px; }
.wali-contact-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--wali-border); }
.wali-contact-row:last-child { border-bottom: none; padding-bottom: 0; }
.wali-contact-row-icon { width: 34px; height: 34px; border-radius: var(--wali-radius-sm); background: var(--wali-light); border: 1px solid var(--wali-border); display: flex; align-items: center; justify-content: center; color: var(--wali-primary); font-size: .88rem; flex-shrink: 0; margin-top: 2px; }
.wali-contact-row-icon.wa-icon { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.wali-contact-row-lbl { font-size: .7rem; font-weight: 700; color: var(--wali-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.wali-contact-row-val { font-size: .9rem; color: var(--wali-text); font-weight: 500; line-height: 1.5; }
.wali-contact-row-val a { color: var(--wali-primary); }
.wali-contact-row-val a:hover { color: var(--wali-primary-dark); }
.wali-wa-link { display: inline-flex; align-items: center; gap: 6px; color: #15803d !important; font-weight: 700; }
.wali-wa-link:hover { color: #166534 !important; text-decoration: none; }
.wali-wa-full-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #25d366; color: white; font-weight: 700; font-size: .88rem; padding: 10px; border-radius: var(--wali-radius); text-decoration: none; transition: all .2s; margin: 0 20px 18px; }
.wali-wa-full-btn:hover { background: #128c7e; color: white; text-decoration: none; transform: translateY(-1px); }
/* Operating hours */
.wali-hours-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; }
.wali-hours-head { background: var(--wali-accent); color: white; padding: 14px 20px; display: flex; align-items: center; gap: 10px; font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; }
.wali-hours-body { padding: 8px 20px 16px; }
.wali-hours-row  { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--wali-border); }
.wali-hours-row:last-child { border-bottom: none; padding-bottom: 0; }
.wali-hours-day    { color: var(--wali-muted); font-size: .88rem; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.wali-hours-time   { font-weight: 700; color: var(--wali-primary-dark); font-size: .88rem; }
.wali-hours-closed { font-weight: 700; color: var(--wali-red); font-size: .88rem; }
.wali-hours-note   { margin-top: 12px; padding: 10px 12px; background: var(--wali-light); border-radius: var(--wali-radius-sm); border: 1px solid var(--wali-border); font-size: .79rem; color: var(--wali-muted); }
/* Map */
.wali-map-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; }
.wali-map-head { background: var(--wali-primary); color: white; padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.wali-map-head-title { font-family: var(--wali-font-heading); font-size: 1rem; font-weight: 700; }
.wali-map-head-sub   { font-size: .75rem; color: rgba(255,255,255,.65); font-family: var(--wali-font-body); font-weight: 400; margin-top: 2px; }
.wali-map-wrap { width: 100%; height: 340px; }
.wali-map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.wali-map-footer { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--wali-border); }
.wali-map-addr { font-size: .83rem; color: var(--wali-muted); display: flex; align-items: flex-start; gap: 6px; line-height: 1.6; }
.wali-map-btn  { display: inline-flex; align-items: center; gap: 6px; background: var(--wali-primary); color: white; font-size: .8rem; font-weight: 700; padding: 7px 16px; border-radius: var(--wali-radius-sm); text-decoration: none; transition: all .2s; white-space: nowrap; }
.wali-map-btn:hover { background: var(--wali-primary-dark); color: white; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   22. SEARCH FORM (Search Results Page)
═══════════════════════════════════════════════════════════════════ */
.wali-search-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); padding: 20px 22px; margin-bottom: 18px; }
.wali-query-wrap { flex: 1; display: flex; }
.wali-query-wrap input[type=search] { flex: 1; border: 1px solid var(--wali-border); border-right: none; border-radius: var(--wali-radius) 0 0 var(--wali-radius); padding: 10px 14px; font-size: .95rem; outline: none; font-family: var(--wali-font-body); transition: border .2s; background: var(--wali-light); }
.wali-query-wrap input[type=search]:focus { border-color: var(--wali-primary); background: white; box-shadow: 0 0 0 3px rgba(26,79,138,.07); }
.wali-query-wrap button[type=submit] { background: var(--wali-primary); color: white; border: none; padding: 10px 22px; border-radius: 0 var(--wali-radius) var(--wali-radius) 0; font-weight: 700; font-size: .9rem; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .2s; }
.wali-query-wrap button[type=submit]:hover { background: var(--wali-primary-dark); }
.wali-adv-fieldset { border: none; padding: 0; margin: 0; }
.wali-adv-legend   { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--wali-primary); cursor: pointer; padding: 10px 0 0; border: none; background: none; width: 100%; text-align: left; transition: color .2s; user-select: none; }
.wali-adv-legend:hover { color: var(--wali-primary-dark); }
.wali-adv-legend .chev { transition: transform .25s; font-size: .75rem; }
.wali-adv-legend.open .chev { transform: rotate(180deg); }
.wali-adv-body { display: none; padding-top: 14px; border-top: 1px solid var(--wali-border); margin-top: 10px; }
.wali-adv-body.show { display: block; }
.wali-adv-note { display: flex; gap: 7px; align-items: flex-start; font-size: .78rem; color: var(--wali-muted); background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 9px 12px; margin-bottom: 14px; line-height: 1.6; }
.wali-adv-note i { flex-shrink: 0; color: var(--wali-primary); margin-top: 2px; }
.wali-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wali-filter-block label { display: block; font-size: .75rem; font-weight: 700; color: var(--wali-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.wali-date-selects { display: flex; gap: 5px; flex-wrap: wrap; }
.wali-date-selects select { border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 7px 8px; font-size: .82rem; outline: none; background: var(--wali-light); color: var(--wali-text); transition: border .2s; cursor: pointer; }
.wali-date-selects select:focus { border-color: var(--wali-primary); background: white; }
.wali-filter-block input[type=text] { width: 100%; border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 8px 11px; font-size: .88rem; outline: none; background: var(--wali-light); font-family: var(--wali-font-body); transition: border .2s; }
.wali-filter-block input[type=text]:focus { border-color: var(--wali-primary); background: white; }
.wali-adv-actions { display: flex; gap: 8px; margin-top: 14px; }
.wali-adv-actions button { padding: 8px 18px; border-radius: var(--wali-radius-sm); font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; }
.wali-adv-actions .btn-apply { background: var(--wali-primary); color: white; border: none; }
.wali-adv-actions .btn-apply:hover { background: var(--wali-primary-dark); }
.wali-adv-actions .btn-clear { background: none; border: 1px solid var(--wali-border); color: var(--wali-muted); }
.wali-adv-actions .btn-clear:hover { border-color: var(--wali-accent); color: var(--wali-accent); }
.wali-result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wali-result-head h2 { font-family: var(--wali-font-heading); font-size: 1.1rem; font-weight: 700; color: var(--wali-primary-dark); margin: 0; display: flex; align-items: center; gap: 8px; }
.wali-result-count-badge { background: var(--wali-primary); color: white; font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 20px; }
.wali-result-sort { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--wali-muted); }
.wali-result-sort select { border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 5px 10px; font-size: .82rem; outline: none; background: var(--wali-surface); }


/* ═══════════════════════════════════════════════════════════════
   23. INDEXING GRID
═══════════════════════════════════════════════════════════════════ */
.wali-index-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.wali-index-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 6px 10px; background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); text-decoration: none; transition: all .22s; text-align: center; overflow: hidden; }
.wali-index-item:hover { background: var(--wali-surface); border-color: var(--wali-primary); box-shadow: 0 4px 16px rgba(26,79,138,.12); transform: translateY(-2px); text-decoration: none; }
.wali-index-img-wrap { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wali-index-img-wrap img { max-width: 90%; max-height: 38px; width: auto; height: auto; object-fit: contain; display: block; }
.wali-index-item-name { font-size: .68rem; font-weight: 600; color: var(--wali-muted); line-height: 1.3; word-break: break-word; }
.wali-index-item:hover .wali-index-item-name { color: var(--wali-primary); }


/* ═══════════════════════════════════════════════════════════════
   24. STATIC / PROSE (Static Page)
═══════════════════════════════════════════════════════════════════ */
.wali-content-body.prose-body { padding: 32px 36px; }
.wali-prose { font-size: .95rem; line-height: 1.85; color: var(--wali-text); }
.wali-prose p { margin-bottom: 1.1rem; }
.wali-prose p:last-child { margin-bottom: 0; }
.wali-prose h2 { font-family: var(--wali-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--wali-primary-dark); margin: 2rem 0 .75rem; padding-bottom: 8px; border-bottom: 2px solid var(--wali-border); }
.wali-prose h3 { font-family: var(--wali-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--wali-primary-dark); margin: 1.5rem 0 .5rem; }
.wali-prose ul, .wali-prose ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.wali-prose li { margin-bottom: .4rem; }
.wali-prose strong { color: var(--wali-primary-dark); }
.wali-prose a { color: var(--wali-primary); text-decoration: underline; }
.wali-prose a:hover { color: var(--wali-primary-dark); }
.wali-prose blockquote { border-left: 4px solid var(--wali-primary); background: var(--wali-light); padding: 14px 18px; margin: 1.2rem 0; border-radius: 0 var(--wali-radius-sm) var(--wali-radius-sm) 0; font-style: italic; color: var(--wali-muted); }
.wali-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; font-size: .88rem; }
.wali-prose table th { background: var(--wali-primary); color: white; padding: 9px 14px; text-align: left; font-weight: 600; }
.wali-prose table td { padding: 8px 14px; border-bottom: 1px solid var(--wali-border); }
.wali-prose table tr:last-child td { border-bottom: none; }
.wali-prose table tr:nth-child(even) td { background: var(--wali-light); }
.wali-prose hr { border: none; border-top: 2px solid var(--wali-border); margin: 2rem 0; }
.wali-infobox { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--wali-radius); margin-bottom: 1.4rem; font-size: .88rem; line-height: 1.7; }
.wali-infobox.info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.wali-infobox.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.wali-infobox.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.wali-infobox.danger  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wali-infobox-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.wali-last-updated { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--wali-muted); padding: 12px 36px; border-top: 1px solid var(--wali-border); background: var(--wali-light); }
.wali-toc-link { display: flex; align-items: center; gap: 7px; padding: 6px 0; font-size: .83rem; color: var(--wali-muted); border-bottom: 1px solid var(--wali-border); transition: all .2s; }
.wali-toc-link:last-child { border-bottom: none; }
.wali-toc-link:hover { color: var(--wali-primary); text-decoration: none; padding-left: 4px; }
.wali-toc-link.active { color: var(--wali-primary); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   25. JOURNAL CARD (Portal Multi-Jurnal)
═══════════════════════════════════════════════════════════════════ */
.wali-jcard { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; margin-bottom: 20px; transition: box-shadow .2s; }
.wali-jcard:hover { box-shadow: var(--wali-shadow); }
.wali-jcard-head { padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--wali-border); }
.wali-jcard-cover { width: 72px; height: 96px; border-radius: var(--wali-radius-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--wali-border); }
.wali-jcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.wali-jcard-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--wali-font-heading); font-weight: 900; font-size: 1.1rem; color: white; }
.wali-jcard-name { font-family: var(--wali-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--wali-primary-dark); line-height: 1.3; margin-bottom: 4px; }
.wali-jcard-pub  { font-size: .82rem; color: var(--wali-muted); margin-bottom: 6px; }
.wali-jcard-issn { font-size: .74rem; font-weight: 600; color: var(--wali-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.wali-jcard-body { padding: 14px 20px; }
.wali-jcard-desc { font-size: .9rem; color: var(--wali-muted); line-height: 1.75; margin-bottom: 12px; }
.wali-jcard-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wali-jcard-tag  { display: inline-flex; align-items: center; gap: 4px; background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 4px 10px; font-size: .78rem; color: var(--wali-muted); }
.wali-jcard-stats { display: flex; gap: 0; border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; margin-bottom: 14px; }
.wali-jcard-stat  { flex: 1; text-align: center; padding: 10px 6px; border-right: 1px solid var(--wali-border); }
.wali-jcard-stat:last-child { border-right: none; }
.wali-jcard-stat-num { font-family: var(--wali-font-heading); font-size: 1.15rem; font-weight: 800; color: var(--wali-primary); line-height: 1; }
.wali-jcard-stat-lbl { font-size: .7rem; color: var(--wali-muted); margin-top: 3px; }
.wali-jcard-foot { padding: 12px 20px; background: var(--wali-light); border-top: 1px solid var(--wali-border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Status badges */
.wali-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--wali-radius-sm); font-size: .72rem; font-weight: 700; }
.wali-badge-oa     { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.wali-badge-doi    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wali-badge-sinta  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.wali-badge-doaj   { background: #f3e8ff; color: #6d28d9; border: 1px solid #e9d5ff; }
.wali-badge-active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.wali-badge-new    { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
/* Journal mini list (sidebar) */
.wali-jmini { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--wali-border); }
.wali-jmini:last-child { border-bottom: none; }
.wali-jmini-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.wali-jmini-name { font-size: .88rem; font-weight: 600; color: var(--wali-primary-dark); line-height: 1.35; }
.wali-jmini-abbr { font-size: .74rem; color: var(--wali-muted); }


/* ═══════════════════════════════════════════════════════════════
   26. SIDEBAR
═══════════════════════════════════════════════════════════════════ */
.wali-sb-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); margin-bottom: 18px; overflow: hidden; }
.wali-sb-head { background: var(--wali-primary); color: white; padding: 11px 15px; font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.wali-sb-body { padding: 13px 15px; }
.wali-sb-link { display: flex; align-items: center; gap: 7px; padding: 7px 0; font-size: .88rem; color: var(--wali-primary); border-bottom: 1px solid var(--wali-border); transition: all .2s; }
.wali-sb-link:last-child { border-bottom: none; }
.wali-sb-link:hover { color: var(--wali-primary-dark); text-decoration: none; padding-left: 5px; }
.wali-sb-link i { font-size: .78rem; color: var(--wali-muted); }
.wali-sb-link.active { color: var(--wali-primary-dark); font-weight: 700; padding-left: 5px; }
.wali-sb-link.active i { color: var(--wali-primary); }
.wali-rev-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--wali-border); }
.wali-rev-item:last-child { border-bottom: none; }
.wali-rev-num  { width: 24px; height: 24px; border-radius: 50%; background: var(--wali-gold); color: white; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wali-rev-name { font-size: .88rem; font-weight: 600; color: var(--wali-primary-dark); line-height: 1.35; }
.wali-rev-role { font-size: .74rem; color: var(--wali-muted); }
.wali-oa-badge { display: inline-flex; align-items: center; gap: 5px; background: #fff7e6; border: 1px solid #fcd34d; color: #92400e; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--wali-radius-sm); }
.wali-index-logo { background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 4px 10px; font-size: .72rem; font-weight: 700; color: var(--wali-muted); display: inline-block; margin: 2px; }
.wali-for-authors { background: linear-gradient(135deg,#f0f7ff,#e8f0fe); border: 1px solid #c7d9f5; border-radius: var(--wali-radius); padding: 18px; margin-bottom: 18px; }
.wali-for-authors h6 { font-family: var(--wali-font-heading); font-weight: 700; color: var(--wali-primary-dark); margin-bottom: 10px; font-size: 1.02rem; }
/* RSS */
.wali-rss-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--wali-border); font-size: .84rem; }
.wali-rss-item:last-child { border-bottom: none; }
.wali-rss-badge { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: var(--wali-radius-sm); flex-shrink: 0; }
.wali-rss-badge.rss2 { background: #f97316; color: white; }
.wali-rss-badge.atom { background: #8b5cf6; color: white; }
.wali-rss-badge.rss1 { background: #6b7280; color: white; }


/* ═══════════════════════════════════════════════════════════════
   27. REFERENCES
═══════════════════════════════════════════════════════════════════ */
.wali-ref-item { padding: 10px 0; border-bottom: 1px solid var(--wali-border); font-size: .84rem; line-height: 1.75; }
.wali-ref-item:last-child { border-bottom: none; }
.wali-ref-num  { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wali-primary); color: white; font-size: .68rem; font-weight: 700; flex-shrink: 0; margin-right: 8px; vertical-align: middle; }
.wali-ref-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.wali-ref-icons a { opacity: .65; transition: opacity .2s; display: inline-flex; }
.wali-ref-icons a:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   28. METRICS & CITATIONS
═══════════════════════════════════════════════════════════════════ */
.wali-dim-badge  { display: inline-flex; align-items: center; gap: 6px; background: #f5f3ff; border: 1px solid #ddd6fe; color: #6d28d9; font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: var(--wali-radius-sm); text-decoration: none; transition: all .2s; }
.wali-dim-badge:hover  { background: #ede9fe; text-decoration: none; color: #5b21b6; }
.wali-plum-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; font-size: .8rem; font-weight: 700; padding: 6px 14px; border-radius: var(--wali-radius-sm); text-decoration: none; transition: all .2s; }
.wali-plum-badge:hover { background: #ffedd5; text-decoration: none; color: #9a3412; }
.wali-metrics-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.wali-chart-bars   { display: flex; align-items: flex-end; gap: 5px; height: 80px; margin: 14px auto; max-width: 360px; }
.wali-chart-bar    { flex: 1; border-radius: 3px 3px 0 0; opacity: .75; transition: opacity .2s; cursor: pointer; }
.wali-chart-bar:hover { opacity: 1; }
.wali-chart-labels { display: flex; gap: 5px; max-width: 360px; margin: 0 auto; font-size: .63rem; color: var(--wali-muted); }
.wali-chart-labels span { flex: 1; text-align: center; }
/* How to cite */
.wali-cite-box { background: var(--wali-light); border: 1px solid var(--wali-border); border-radius: var(--wali-radius-sm); padding: 12px 14px; font-size: .82rem; line-height: 1.7; color: var(--wali-text); margin-bottom: 10px; }
.wali-cite-formats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wali-cite-fmt-btn { font-size: .72rem; padding: 3px 9px; border-radius: var(--wali-radius-sm); border: 1px solid var(--wali-border); background: var(--wali-surface); color: var(--wali-primary); cursor: pointer; transition: all .2s; font-weight: 600; }
.wali-cite-fmt-btn:hover, .wali-cite-fmt-btn.active { background: var(--wali-primary); color: white; border-color: var(--wali-primary); }
.wali-dl-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--wali-radius-sm); font-size: .76rem; font-weight: 600; border: 1px solid var(--wali-border); background: var(--wali-surface); color: var(--wali-muted); transition: all .2s; text-decoration: none; margin-right: 4px; margin-bottom: 4px; }
.wali-dl-btn:hover { background: var(--wali-primary); color: white; border-color: var(--wali-primary); text-decoration: none; }
/* License */
.wali-license-box { text-align: center; padding: 4px 0; }
.wali-license-box p { font-size: .8rem; color: var(--wali-muted); line-height: 1.6; margin-top: 8px; }
/* Similar articles */
.wali-similar-item { padding: 12px 0; border-bottom: 1px solid var(--wali-border); }
.wali-similar-item:last-child { border-bottom: none; padding-bottom: 0; }
.wali-similar-title a { font-family: var(--wali-font-heading); font-size: .9rem; font-weight: 700; color: var(--wali-primary-dark); line-height: 1.4; }
.wali-similar-title a:hover { color: var(--wali-primary); }
.wali-similar-meta { font-size: .75rem; color: var(--wali-muted); margin-top: 3px; }


/* ═══════════════════════════════════════════════════════════════
   29. ANNOUNCEMENTS
═══════════════════════════════════════════════════════════════════ */
.wali-ann-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); padding: 18px; margin-bottom: 12px; border-left: 4px solid var(--wali-primary); transition: box-shadow .2s; }
.wali-ann-card:hover { box-shadow: var(--wali-shadow); }
.wali-ann-card.featured { border-left-color: var(--wali-accent); }
.wali-ann-meta  { font-size: .78rem; color: var(--wali-muted); margin-bottom: 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wali-ann-badge { background: var(--wali-accent); color: white; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--wali-radius-sm); text-transform: uppercase; }
.wali-ann-title   { font-weight: 600; font-size: 1rem; color: var(--wali-primary-dark); line-height: 1.45; margin-bottom: 7px; }
.wali-ann-excerpt { font-size: .9rem; color: var(--wali-muted); line-height: 1.75; }
.wali-ann-list-item { padding: 11px 0; border-bottom: 1px solid var(--wali-border); display: flex; gap: 10px; align-items: flex-start; }
.wali-ann-list-item:last-child { border-bottom: none; }
.wali-ann-num    { width: 24px; height: 24px; border-radius: 50%; background: var(--wali-light); color: var(--wali-primary); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.wali-ann-ltitle { font-size: .92rem; font-weight: 500; color: var(--wali-primary-dark); line-height: 1.45; }
.wali-ann-ldate  { font-size: .76rem; color: var(--wali-muted); margin-top: 3px; }


/* ═══════════════════════════════════════════════════════════════
   30. SECTION HEADINGS
═══════════════════════════════════════════════════════════════════ */
.wali-sec-head { font-family: var(--wali-font-heading); font-size: 1.1rem; font-weight: 700; color: var(--wali-primary-dark); padding-bottom: 10px; border-bottom: 2px solid var(--wali-primary); margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.wali-sec-head a { font-size: .82rem; font-weight: 500; color: var(--wali-primary); font-family: var(--wali-font-body); }
.wali-sub-label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: .88rem; font-weight: 700; border-radius: var(--wali-radius) var(--wali-radius) 0 0; color: white; margin-bottom: 0; }
/* Issue card (homepage) */
.wali-issue-card { background: var(--wali-surface); border: 1px solid var(--wali-border); border-radius: var(--wali-radius); overflow: hidden; margin-bottom: 20px; }
.wali-issue-hd   { background: linear-gradient(135deg,var(--wali-primary),var(--wali-primary-dark)); padding: 18px 22px; color: white; display: flex; align-items: center; justify-content: space-between; }
.wali-issue-vol  { font-family: var(--wali-font-heading); font-size: 1.1rem; font-weight: 700; }
.wali-issue-date { font-size: .8rem; opacity: .75; margin-top: 3px; }
.wali-issue-count { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); border-radius: var(--wali-radius-sm); padding: 5px 14px; font-size: .82rem; font-weight: 600; }
.wali-issue-snum { font-size: 1.4rem; font-weight: 800; color: var(--wali-primary); }
.wali-issue-slbl { font-size: .75rem; color: var(--wali-muted); }
.wali-art-wrap   { border: 1px solid var(--wali-border); border-top: none; border-radius: 0 0 var(--wali-radius) var(--wali-radius); overflow: hidden; margin-bottom: 22px; }
.wali-art-footer { padding: 12px 18px; background: #f8fafc; border-top: 1px solid var(--wali-border); text-align: center; }


/* ═══════════════════════════════════════════════════════════════
   31. CTA CARD
═══════════════════════════════════════════════════════════════════ */
.wali-cta-card { background: linear-gradient(135deg,var(--wali-primary-dark),var(--wali-primary)); border-radius: var(--wali-radius); padding: 24px; text-align: center; color: white; margin-top: 8px; }
.wali-cta-card h3 { font-family: var(--wali-font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.wali-cta-card p  { font-size: .84rem; opacity: .75; margin-bottom: 16px; }
.wali-cta-btn { display: inline-flex; align-items: center; gap: 7px; background: white; color: var(--wali-primary); font-weight: 700; font-size: .84rem; padding: 9px 20px; border-radius: var(--wali-radius-sm); text-decoration: none; transition: all .2s; margin: 4px; }
.wali-cta-btn:hover { background: var(--wali-light); color: var(--wali-primary-dark); text-decoration: none; }
.wali-cta-btn.wa { background: #25d366; color: white; }
.wali-cta-btn.wa:hover { background: #128c7e; color: white; }


/* ═══════════════════════════════════════════════════════════════
   32. FOOTER
═══════════════════════════════════════════════════════════════════ */
#wali-footer { background: var(--wali-primary-dark); color: #94a3b8; margin-top: 40px; }
.wali-footer-top   { padding: 42px 0 32px; border-bottom: 1px solid rgba(255,255,255,.07); }
.wali-footer-jname { color: white; font-family: var(--wali-font-heading); font-weight: 700; font-size: 1.05rem; margin-top: 10px; }
.wali-footer-desc  { font-size: .84rem; opacity: .5; line-height: 1.8; margin-top: 6px; }
.wali-footer-h     { color: white; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 13px; }
.wali-footer-lnk   { color: #94a3b8; font-size: .84rem; display: block; padding: 4px 0; transition: color .2s; }
.wali-footer-lnk:hover { color: #7dd3fc; text-decoration: none; }
.wali-footer-bottom { padding: 15px 0; text-align: center; font-size: .78rem; opacity: .4; border-top: 1px solid rgba(255,255,255,.05); }
.wali-cc { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--wali-radius-sm); padding: 4px 10px; font-size: .74rem; color: rgba(255,255,255,.55); margin-top: 10px; }


/* ═══════════════════════════════════════════════════════════════
   33. ANIMATIONS & KEYFRAMES
═══════════════════════════════════════════════════════════════════ */
@keyframes waliPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes waliLdFill {
  0%   { width: 0; }
  100% { width: 100%; }
}
@keyframes waliRotBG {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes waliMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes waliFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waliSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════
   34. UTILITIES
═══════════════════════════════════════════════════════════════════ */
/* Fade-in on scroll */
.wali-fade { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.wali-fade.wali-vis { opacity: 1; transform: translateY(0); }

/* Delay helpers */
.wali-delay-1 { transition-delay: .1s; }
.wali-delay-2 { transition-delay: .2s; }
.wali-delay-3 { transition-delay: .3s; }
.wali-delay-4 { transition-delay: .4s; }

/* Text helpers */
.wali-text-primary { color: var(--wali-primary) !important; }
.wali-text-accent  { color: var(--wali-accent)  !important; }
.wali-text-muted   { color: var(--wali-muted)   !important; }
.wali-text-white   { color: white               !important; }

/* Background helpers */
.wali-bg-primary { background: var(--wali-primary)      !important; }
.wali-bg-light   { background: var(--wali-light)        !important; }
.wali-bg-surface { background: var(--wali-surface)      !important; }

/* Border helpers */
.wali-border-primary { border-color: var(--wali-primary) !important; }
.wali-border-top-primary { border-top: 3px solid var(--wali-primary) !important; }

/* Divider */
.wali-divider { border: none; border-top: 1px solid var(--wali-border); margin: 20px 0; }
.wali-divider-bold { border-top-width: 2px; border-color: var(--wali-primary); }

/* Truncate */
.wali-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wali-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Sticky top offset (below sticky navbar) */
.wali-sticky-below-nav { position: sticky; top: 56px; }

/* Print */
@media print {
  #wali-topbar, #wali-marquee, #wali-navbar,
  #wali-footer, .wali-sb-card, .wali-loader { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  .wali-prose { font-size: 11pt; line-height: 1.6; }
  a { color: black; text-decoration: underline; }
}


/* ═══════════════════════════════════════════════════════════════
   35. THEME SWITCHER SUPPORT
═══════════════════════════════════════════════════════════════════ */

/* ── Default (sudah di :root, ini hanya dokumentasi) ── */
[data-theme="default"] {
  --wali-primary:       #1a4f8a;
  --wali-primary-dark:  #0d2d52;
  --wali-primary-light: #e8f0fe;
  --wali-accent:        #e05c1a;
  --wali-accent-dark:   #c04d10;
  --wali-bg:            #e8edf4;
  --wali-light:         #f4f7fb;
}

/* ── Teal / Hijau Toska ── */
[data-theme="teal"] {
  --wali-primary:       #0f766e;
  --wali-primary-dark:  #0d4f4a;
  --wali-primary-light: #ccfbf1;
  --wali-accent:        #f59e0b;
  --wali-accent-dark:   #d97706;
  --wali-bg:            #e6f4f3;
  --wali-light:         #f0fdf9;
}

/* ── Maroon / Merah Tua ── */
[data-theme="maroon"] {
  --wali-primary:       #881337;
  --wali-primary-dark:  #4c0519;
  --wali-primary-light: #ffe4e6;
  --wali-accent:        #d97706;
  --wali-accent-dark:   #b45309;
  --wali-bg:            #f5e8ec;
  --wali-light:         #fff1f2;
}

/* ── Forest / Hijau Hutan ── */
[data-theme="forest"] {
  --wali-primary:       #166534;
  --wali-primary-dark:  #052e16;
  --wali-primary-light: #dcfce7;
  --wali-accent:        #ea580c;
  --wali-accent-dark:   #c2410c;
  --wali-bg:            #e8f0eb;
  --wali-light:         #f0fdf4;
}

/* ── Slate / Abu Biru ── */
[data-theme="slate"] {
  --wali-primary:       #334155;
  --wali-primary-dark:  #0f172a;
  --wali-primary-light: #e2e8f0;
  --wali-accent:        #0891b2;
  --wali-accent-dark:   #0e7490;
  --wali-bg:            #e8ecf0;
  --wali-light:         #f1f5f9;
}

/* ── Purple / Ungu Akademik ── */
[data-theme="purple"] {
  --wali-primary:       #6d28d9;
  --wali-primary-dark:  #3b0764;
  --wali-primary-light: #ede9fe;
  --wali-accent:        #db2777;
  --wali-accent-dark:   #be185d;
  --wali-bg:            #ede8f5;
  --wali-light:         #f5f3ff;
}

/* ── Gold / Emas Klasik ── */
[data-theme="gold"] {
  --wali-primary:       #92400e;
  --wali-primary-dark:  #451a03;
  --wali-primary-light: #fef3c7;
  --wali-accent:        #1a4f8a;
  --wali-accent-dark:   #0d2d52;
  --wali-bg:            #f5ede0;
  --wali-light:         #fffbeb;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --wali-primary:       #3b82f6;
  --wali-primary-dark:  #1d4ed8;
  --wali-primary-light: #1e3a5f;
  --wali-accent:        #f97316;
  --wali-accent-dark:   #ea580c;
  --wali-bg:            #0f172a;
  --wali-surface:       #1e293b;
  --wali-border:        #334155;
  --wali-light:         #1e293b;
  --wali-text:          #e2e8f0;
  --wali-muted:         #94a3b8;
}

/* ── Font Switcher ── */
[data-font="serif"] {
  --wali-font-body:    'Source Serif 4', Georgia, serif;
  --wali-font-heading: 'Source Serif 4', Georgia, serif;
}
[data-font="sans"] {
  --wali-font-body:    'Inter', system-ui, sans-serif;
  --wali-font-heading: 'Inter', system-ui, sans-serif;
}
[data-font="mono"] {
  --wali-font-body:    'JetBrains Mono', 'Courier New', monospace;
  --wali-font-heading: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Font Size Switcher ── */
[data-fontsize="sm"] { --wali-font-size: 14px; }
[data-fontsize="md"] { --wali-font-size: 16px; }
[data-fontsize="lg"] { --wali-font-size: 18px; }


/* ═══════════════════════════════════════════════════════════════
   36. RESPONSIVE
═══════════════════════════════════════════════════════════════════ */

/* ── Large (≤1199px) ── */
@media (max-width: 1199px) {
  .wali-index-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Medium (≤991px) ── */
@media (max-width: 991px) {
  .wali-hero-cover-col { display: none; }
  .wali-hero-content   { padding: 32px 0; }
  .wali-issue-hero     { flex-direction: column; gap: 16px; }
  .wali-issue-hero-cover { width: 130px; top: 0; }
  .wali-art-cover-col  { display: none; }
}

/* ── Tablet (≤767px) ── */
@media (max-width: 767px) {
  html { font-size: 15px; }

  /* Stats */
  .wali-stat-block { border-right: none; border-bottom: 1px solid var(--wali-border); }
  .wali-stat-num   { font-size: 2rem; }
  .wali-istat-num  { font-size: 1.2rem; }
  .wali-astat-num  { font-size: 1.1rem; }

  /* Issue */
  .wali-issue-cover { width: 90px; }
  .wali-issue-body  { padding: 12px 14px; }

  /* Article detail */
  .wali-art-stat-bar .container,
  .wali-issue-stat-bar .container { flex-wrap: wrap; }

  /* Journal card */
  .wali-jcard-stats { flex-wrap: wrap; }
  .wali-jcard-stat  { min-width: 45%; }

  /* Content body */
  .wali-content-body.prose-body { padding: 20px 18px; }
  .wali-last-updated { padding: 10px 18px; }

  /* Filter grid */
  .wali-filter-grid { grid-template-columns: 1fr; }

  /* Indexing */
  .wali-index-grid { grid-template-columns: repeat(3, 1fr); }

  /* Page hero */
  .wali-page-title { font-size: 1.5rem; }

  /* Footer */
  .wali-footer-top { padding: 28px 0 20px; }
}

/* ── Mobile (≤575px) ── */
@media (max-width: 575px) {
  html { font-size: 14px; }

  /* Navbar search */
  .wali-search-form input,
  .wali-search-form input[type=text],
  .wali-search-form input[type=search] { width: 130px; }

  /* Issue cover */
  .wali-issue-cover { width: 70px; }

  /* Index grid */
  .wali-index-grid { grid-template-columns: repeat(3, 1fr); }

  /* Date selects */
  .wali-date-selects select { font-size: .78rem; padding: 6px 6px; }

  /* Hero stat */
  .wali-hero-stat { min-width: 100px; }

  /* Stat pills */
  .wali-stat-pills { flex-direction: column; }
  .wali-stat-pill  { width: 100%; }

  /* Share buttons */
  .wali-share-inline { gap: 5px; }

  /* Buttons */
  .wali-btn-lg { padding: 9px 18px; font-size: .88rem; }

  /* Accordion body indent */
  .wali-acc-body { padding-left: 36px; }
}

/* ── Very small (≤400px) ── */
@media (max-width: 400px) {
  .wali-index-grid { grid-template-columns: repeat(2, 1fr); }
  .wali-page-title { font-size: 1.3rem; }
  .wali-hero-title { font-size: 1.5rem; }
}