/**
* ========================================================================
* GOLITERATI PRESS - OMP MASTER CSS v3.1 (Restructured & Optimized)
* Theme: Default OMP Theme Enhancement
* Philosophy: Zero Inline Styles - Pure Class-Based Architecture
* Author: Nurul Huda (taztezto) - Goliterati Press
* Last Updated: March 4, 2026
* Version: 3.1 (Fixed Sequential Numbering)
* Total Sections: 45 (Complete, No Gaps)
* ========================================================================
* 
* CHANGELOG v3.1:
* ✓ Fixed section numbering: removed gaps (42-47 were missing)
* ✓ Renumbered Section 48 → 42 (Homepage Highlights)
* ✓ Renumbered Section 49 → 43 (Series Highlight)
* ✓ Renumbered Section 50 → 44 (Journal Cluster)
* ✓ Added Section 45 (Responsive Editorial Cards)
* ✓ All sections now sequential: 1-45 without jumps
* ✓ No CSS removed - only organizational improvements
* ✓ Design integrity maintained - all functionality preserved
* 
* ========================================================================
*/

/* ========================================================================
1. CSS VARIABLES (Updated Brand Palette + Academic Extensions)
======================================================================== */

:root {

  /* --------------------------------------------------------------------
  PRIMARY BRAND PALETTE (OWL LOGO MATCH)
  -------------------------------------------------------------------- */

  /* Teal Family (Primary Brand) */
  --gl-teal: #2C7B7D;          /* Medium Teal (Owl Outline - PRIMARY) */
  --gl-teal-light: #3A9B9D;    /* Lighter Teal for hover, subtle accents */
  --gl-teal-dark: #1E6B6D;     /* Deep Teal (Primary Brand) */
  --gl-teal-darker: #145557;   /* Darkest Teal for strong contrast */

  /* Bronze / Beak Accent Family */
  --gl-bronze: #B87A5A;        /* Bronze Light (Beak Accent) */
  --gl-bronze-light: #C9947A;  /* Lighter Bronze for backgrounds */
  --gl-bronze-dark: #8B6F5E;   /* Bronze Dark (Beak Depth) */

  /* Gold Accent (RETAINED from v3.0) */
  --gl-gold: #B78A3D;          /* Primary Gold (UNCHANGED) */
  --gl-gold-light: #D4A759;    /* Light Gold (UNCHANGED) */
  --gl-gold-dark: #8F6A2B;     /* Dark Gold (UNCHANGED) */

  /* --------------------------------------------------------------------
  NEUTRALS (TEXT & BACKGROUND)
  -------------------------------------------------------------------- */

  /* Academic Neutrals (Charcoal) */
  --gl-charcoal: #3D4547;        /* Secondary Text (Main body) */
  --gl-charcoal-light: #5A5F61;  /* Subheadings, muted text */
  --gl-charcoal-dark: #2A2E30;   /* Titles / Strong headings */
  --gl-charcoal-darker: #1A1D1E; /* Highest contrast for key headings */

  /* Greys for Layout & Backgrounds */
  --gl-gray-50: #F8F9FA;
  --gl-gray-100: #E9ECEF;
  --gl-gray-200: #DEE2E6;
  --gl-gray-300: #CED4DA;
  --gl-gray-400: #ADB5BD;
  --gl-gray-text: #6B7178;       /* Warm Grey (Tagline, subtle copy) */

  --gl-white: #FFFFFF;

  /* --------------------------------------------------------------------
  SEMANTIC COLORS
  -------------------------------------------------------------------- */

  --gl-success: #4A7C59;         /* Scholarly Green (success) */
  --gl-warning: #F59E0B;         /* Warm Amber (warning) */
  --gl-danger: #EF4444;          /* Red (danger) */

  /* --------------------------------------------------------------------
  ACADEMIC EXTENSION PALETTE
  -------------------------------------------------------------------- */

  /* Deep Academic Blues */
  --gl-academic-blue: #2E5266;        /* Deep navy academic blue */
  --gl-academic-blue-light: #4A7A92;  /* Medium academic blue */

  /* Warm Academic Terracotta */
  --gl-terracotta: #A8654A;
  --gl-terracotta-light: #C08570;

  /* --------------------------------------------------------------------
  MODERN GRADIENTS (UPDATED TO NEW PALETTE)
  -------------------------------------------------------------------- */

  --gl-gradient-teal: linear-gradient(
    135deg,
    var(--gl-teal) 0%,
    var(--gl-teal-dark) 100%
  );

  --gl-gradient-slate: linear-gradient(
    135deg,
    var(--gl-charcoal) 0%,
    var(--gl-charcoal-dark) 100%
  );

  --gl-gradient-mixed: linear-gradient(
    135deg,
    var(--gl-charcoal-dark) 0%,
    var(--gl-teal-dark) 100%
  );

  --gl-gradient-gold: linear-gradient(
    135deg,
    var(--gl-gold) 0%,
    var(--gl-gold-dark) 100%
  );

  --gl-gradient-gold-reverse: linear-gradient(
    135deg,
    var(--gl-gold-dark) 0%,
    var(--gl-gold) 100%
  );

  --gl-gradient-teal-darker: linear-gradient(
    135deg,
    var(--gl-teal-dark) 0%,
    var(--gl-teal-darker) 100%
  );

  --gl-gradient-light: linear-gradient(
    135deg,
    var(--gl-gray-50) 0%,
    var(--gl-white) 100%
  );

  --gl-gradient-white-gray: linear-gradient(
    135deg,
    var(--gl-white) 0%,
    var(--gl-gray-50) 100%
  );

  /* Teal Transparent Gradient (for highlight boxes) */
  --gl-teal-gradient-light: linear-gradient(
    135deg,
    rgba(44, 123, 125, 0.08) 0%,
    rgba(30, 107, 109, 0.02) 100%
  );

  /* Shadows - Soft & Modern */
  --gl-shadow-sm: 0 1px 2px rgba(45, 55, 72, 0.05);
  --gl-shadow-md: 0 4px 6px -1px rgba(45, 55, 72, 0.08),
                  0 2px 4px -1px rgba(45, 55, 72, 0.04);
  --gl-shadow-lg: 0 10px 15px -3px rgba(45, 55, 72, 0.10),
                  0 4px 6px -2px rgba(45, 55, 72, 0.05);
  --gl-book-shadow: -4px 0 12px rgba(0, 0, 0, 0.06),
                    4px 4px 14px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --gl-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --gl-transition-fast: all 0.15s ease;

  /* Border Radius */
  --gl-radius-sm: 6px;
  --gl-radius-base: 8px;
  --gl-radius-md: 12px;
  --gl-radius-lg: 16px;
  --gl-radius-full: 9999px;

  /* Spacing Scale */
  --gl-space-1: 0.25rem; /* 4px */
  --gl-space-2: 0.5rem;  /* 8px */
  --gl-space-3: 0.75rem; /* 12px */
  --gl-space-4: 1rem;    /* 16px */
  --gl-space-5: 1.25rem; /* 20px */
  --gl-space-6: 1.5rem;  /* 24px */
  --gl-space-8: 2rem;    /* 32px */
  --gl-space-10: 2.5rem; /* 40px */
  --gl-space-12: 3rem;   /* 48px */
  --gl-space-16: 4rem;   /* 64px */

  /* Font Sizes */
  --gl-text-xs: 0.7rem;   /* 11.2px */
  --gl-text-sm: 0.85rem;  /* 13.6px */
  --gl-text-base: 0.9rem; /* 14.4px */
  --gl-text-md: 0.95rem;  /* 15.2px */
  --gl-text-lg: 1rem;     /* 16px */
  --gl-text-xl: 1.05rem;  /* 16.8px */
  --gl-text-2xl: 1.1rem;  /* 17.6px */
  --gl-text-3xl: 1.15rem; /* 18.4px */
  --gl-text-4xl: 1.3rem;  /* 20.8px */
  --gl-text-5xl: 1.5rem;  /* 24px */
  --gl-text-6xl: 1.75rem; /* 28px */
  --gl-text-7xl: 1.8rem;  /* 28.8px */

  /* Font Weights */
  --gl-font-normal: 400;
  --gl-font-medium: 500;
  --gl-font-semibold: 600;
  --gl-font-bold: 700;

  /* Line Heights */
  --gl-leading-tight: 1.2;
  --gl-leading-normal: 1.5;
  --gl-leading-relaxed: 1.6;
  --gl-leading-loose: 1.8;

  /* Letter Spacing */
  --gl-tracking-tight: -0.015em;
  --gl-tracking-normal: 0;
  --gl-tracking-wide: 0.03em;
  --gl-tracking-wider: 0.05em;
  --gl-tracking-widest: 0.06em;
}

/* ========================================================================
TABLE OF CONTENTS (Sections 1–19 in this PART)
========================================================================

PART 1: FOUNDATION (Sections 1–19)
  1. CSS Variables
  2. Global Resets & Base Styles
  3. Grid System
  4. Flexbox Utilities
  5. Spacing Utilities
  6. Gap Utilities
  7. Width & Max-Width Utilities
  8. Text Alignment & Display
  9. Position Utilities
  10. Typography Utilities
  11. Text Color Utilities
  12. Background Color Utilities
  13. Gradient Backgrounds
  14. Border Utilities
  15. Border Radius Utilities
  16. Shadow Utilities
  17. Opacity Utilities
  18. Transition Utilities
  19. Transform Utilities

======================================================================== */

/* ========================================================================
2. GLOBAL RESETS & BASE STYLES
======================================================================== */

body {
  color: var(--gl-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, .page_title) {
  color: var(--gl-charcoal-dark);
  letter-spacing: var(--gl-tracking-tight);
  font-weight: var(--gl-font-bold);
}

:where(a) {
  color: var(--gl-teal-dark);
  transition: var(--gl-transition);
}

:where(a:hover, a:focus) {
  color: var(--gl-teal-light);
  text-decoration: none;
}

/* ========================================================================
3. GRID SYSTEM
======================================================================== */

.gl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gl-space-5);
  margin-bottom: var(--gl-space-10);
}

.gl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gl-space-5);
}

.gl-card-grid--narrow {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.gl-card-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gl-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gl-space-4);
}

.gl-three-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gl-space-4);
}

/* ========================================================================
4. FLEXBOX UTILITIES
======================================================================== */

.gl-flex {
  display: flex;
}

.gl-flex-col {
  display: flex;
  flex-direction: column;
}

.gl-flex-row {
  display: flex;
  flex-direction: row;
}

/* Alignment */
.gl-items-center {
  align-items: center;
}

.gl-items-start {
  align-items: flex-start;
}

.gl-items-end {
  align-items: flex-end;
}

.gl-justify-center {
  justify-content: center;
}

.gl-justify-between {
  justify-content: space-between;
}

.gl-justify-end {
  justify-content: flex-end;
}

/* Flex Grow/Shrink */
.gl-flex-1 {
  flex: 1;
}

.gl-flex-shrink-0 {
  flex-shrink: 0;
}

.gl-flex-grow {
  flex-grow: 1;
}

/* ========================================================================
5. SPACING UTILITIES (Margin & Padding)
======================================================================== */

/* Margin Bottom */
.gl-mb-0 { margin-bottom: 0; }
.gl-mb-1 { margin-bottom: var(--gl-space-1); }
.gl-mb-2 { margin-bottom: var(--gl-space-2); }
.gl-mb-3 { margin-bottom: var(--gl-space-3); }
.gl-mb-4 { margin-bottom: var(--gl-space-4); }
.gl-mb-5 { margin-bottom: var(--gl-space-5); }
.gl-mb-6 { margin-bottom: var(--gl-space-6); }
.gl-mb-8 { margin-bottom: var(--gl-space-8); }
.gl-mb-10 { margin-bottom: var(--gl-space-10); }
.gl-mb-12 { margin-bottom: var(--gl-space-12); }
.gl-mb-16 { margin-bottom: var(--gl-space-16); }

/* Margin Top */
.gl-mt-0 { margin-top: 0; }
.gl-mt-1 { margin-top: var(--gl-space-1); }
.gl-mt-2 { margin-top: var(--gl-space-2); }
.gl-mt-3 { margin-top: var(--gl-space-3); }
.gl-mt-4 { margin-top: var(--gl-space-4); }
.gl-mt-5 { margin-top: var(--gl-space-5); }
.gl-mt-6 { margin-top: var(--gl-space-6); }
.gl-mt-8 { margin-top: var(--gl-space-8); }
.gl-mt-10 { margin-top: var(--gl-space-10); }
.gl-mt-12 { margin-top: var(--gl-space-12); }

/* Margin Left/Right */
.gl-ml-auto { margin-left: auto; }
.gl-mr-auto { margin-right: auto; }
.gl-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Padding */
.gl-p-0 { padding: 0; }
.gl-p-2 { padding: var(--gl-space-2); }
.gl-p-3 { padding: var(--gl-space-3); }
.gl-p-4 { padding: var(--gl-space-4); }
.gl-p-5 { padding: var(--gl-space-5); }
.gl-p-6 { padding: var(--gl-space-6); }
.gl-p-8 { padding: var(--gl-space-8); }
.gl-p-10 { padding: var(--gl-space-10); }

/* Padding Top/Bottom */
.gl-pt-4 { padding-top: var(--gl-space-4); }
.gl-pt-5 { padding-top: var(--gl-space-5); }
.gl-pt-6 { padding-top: var(--gl-space-6); }
.gl-pb-4 { padding-bottom: var(--gl-space-4); }
.gl-pb-5 { padding-bottom: var(--gl-space-5); }
.gl-pb-6 { padding-bottom: var(--gl-space-6); }

/* Padding Left/Right */
.gl-px-3 {
  padding-left: var(--gl-space-3);
  padding-right: var(--gl-space-3);
}
.gl-px-4 {
  padding-left: var(--gl-space-4);
  padding-right: var(--gl-space-4);
}
.gl-px-5 {
  padding-left: var(--gl-space-5);
  padding-right: var(--gl-space-5);
}
.gl-px-6 {
  padding-left: var(--gl-space-6);
  padding-right: var(--gl-space-6);
}

/* Padding Y-axis */
.gl-py-3 {
  padding-top: var(--gl-space-3);
  padding-bottom: var(--gl-space-3);
}
.gl-py-4 {
  padding-top: var(--gl-space-4);
  padding-bottom: var(--gl-space-4);
}
.gl-py-5 {
  padding-top: var(--gl-space-5);
  padding-bottom: var(--gl-space-5);
}
.gl-py-6 {
  padding-top: var(--gl-space-6);
  padding-bottom: var(--gl-space-6);
}
.gl-py-8 {
  padding-top: var(--gl-space-8);
  padding-bottom: var(--gl-space-8);
}
.gl-py-10 {
  padding-top: var(--gl-space-10);
  padding-bottom: var(--gl-space-10);
}

/* ========================================================================
6. GAP UTILITIES
======================================================================== */

.gl-gap-1 { gap: var(--gl-space-1); }
.gl-gap-2 { gap: var(--gl-space-2); }
.gl-gap-3 { gap: var(--gl-space-3); }
.gl-gap-4 { gap: var(--gl-space-4); }
.gl-gap-5 { gap: var(--gl-space-5); }
.gl-gap-6 { gap: var(--gl-space-6); }
.gl-gap-8 { gap: var(--gl-space-8); }

/* ========================================================================
7. WIDTH & MAX-WIDTH UTILITIES
======================================================================== */

.gl-w-full { width: 100%; }
.gl-w-auto { width: auto; }
.gl-w-50 { width: 50px; }

.gl-max-w-600 {
  max-width: 600px;
}

.gl-max-w-screen {
  max-width: 100vw;
}

/* ========================================================================
8. TEXT ALIGNMENT & DISPLAY
======================================================================== */

.gl-text-left { text-align: left; }
.gl-text-center { text-align: center; }
.gl-text-right { text-align: right; }

.gl-inline-block { display: inline-block; }
.gl-block { display: block; }

/* ========================================================================
9. POSITION UTILITIES
======================================================================== */

.gl-relative { position: relative; }
.gl-absolute { position: absolute; }
.gl-overflow-hidden { overflow: hidden; }

/* ========================================================================
10. TYPOGRAPHY UTILITIES
======================================================================== */

/* Font Sizes */
.gl-text-xs { font-size: var(--gl-text-xs); }
.gl-text-sm { font-size: var(--gl-text-sm); }
.gl-text-base { font-size: var(--gl-text-base); }
.gl-text-md { font-size: var(--gl-text-md); }
.gl-text-lg { font-size: var(--gl-text-lg); }
.gl-text-xl { font-size: var(--gl-text-xl); }
.gl-text-2xl { font-size: var(--gl-text-2xl); }
.gl-text-3xl { font-size: var(--gl-text-3xl); }
.gl-text-4xl { font-size: var(--gl-text-4xl); }
.gl-text-5xl { font-size: var(--gl-text-5xl); }
.gl-text-6xl { font-size: var(--gl-text-6xl); }
.gl-text-7xl { font-size: var(--gl-text-7xl); }

/* Font Weights */
.gl-font-normal { font-weight: var(--gl-font-normal); }
.gl-font-medium { font-weight: var(--gl-font-medium); }
.gl-font-semibold { font-weight: var(--gl-font-semibold); }
.gl-font-bold { font-weight: var(--gl-font-bold); }

/* Font Styles */
.gl-italic { font-style: italic; }
.gl-not-italic { font-style: normal; }

/* Line Heights */
.gl-leading-tight { line-height: var(--gl-leading-tight); }
.gl-leading-normal { line-height: var(--gl-leading-normal); }
.gl-leading-relaxed { line-height: var(--gl-leading-relaxed); }
.gl-leading-loose { line-height: var(--gl-leading-loose); }

/* Letter Spacing */
.gl-tracking-tight { letter-spacing: var(--gl-tracking-tight); }
.gl-tracking-normal { letter-spacing: var(--gl-tracking-normal); }
.gl-tracking-wide { letter-spacing: var(--gl-tracking-wide); }
.gl-tracking-wider { letter-spacing: var(--gl-tracking-wider); }
.gl-tracking-widest { letter-spacing: var(--gl-tracking-widest); }

/* Text Transform */
.gl-uppercase { text-transform: uppercase; }
.gl-lowercase { text-transform: lowercase; }
.gl-capitalize { text-transform: capitalize; }

/* Text Decoration */
.gl-no-underline { text-decoration: none; }
.gl-underline { text-decoration: underline; }

/* ========================================================================
11. TEXT COLOR UTILITIES
======================================================================== */

/* Primary Colors */
.gl-text-teal { color: var(--gl-teal); }
.gl-text-teal-light { color: var(--gl-teal-light); }
.gl-text-teal-dark { color: var(--gl-teal-dark); }
.gl-text-teal-darker { color: var(--gl-teal-darker); }

/* Neutrals */
.gl-text-charcoal { color: var(--gl-charcoal); }
.gl-text-charcoal-light { color: var(--gl-charcoal-light); }
.gl-text-charcoal-dark { color: var(--gl-charcoal-dark); }
.gl-text-charcoal-darker { color: var(--gl-charcoal-darker); }

/* Grays */
.gl-text-gray-50 { color: var(--gl-gray-50); }
.gl-text-gray-100 { color: var(--gl-gray-100); }
.gl-text-gray-200 { color: var(--gl-gray-200); }
.gl-text-gray-300 { color: var(--gl-gray-300); }
.gl-text-gray-400 { color: var(--gl-gray-400); }
.gl-text-gray-text { color: var(--gl-gray-text); }

/* Accents */
.gl-text-gold { color: var(--gl-gold); }
.gl-text-gold-light { color: var(--gl-gold-light); }
.gl-text-gold-dark { color: var(--gl-gold-dark); }

/* Semantic */
.gl-text-white { color: var(--gl-white); }
.gl-text-success { color: var(--gl-success); }
.gl-text-warning { color: var(--gl-warning); }
.gl-text-danger { color: var(--gl-danger); }

/* Academic Extensions */
.gl-text-academic-blue { color: var(--gl-academic-blue); }
.gl-text-academic-blue-light { color: var(--gl-academic-blue-light); }
.gl-text-bronze { color: var(--gl-bronze); }
.gl-text-bronze-dark { color: var(--gl-bronze-dark); }
.gl-text-terracotta { color: var(--gl-terracotta); }

/* ========================================================================
12. BACKGROUND COLOR UTILITIES
======================================================================== */

/* Primary Backgrounds */
.gl-bg-teal { background-color: var(--gl-teal); }
.gl-bg-teal-light { background-color: var(--gl-teal-light); }
.gl-bg-teal-dark { background-color: var(--gl-teal-dark); }
.gl-bg-teal-darker { background-color: var(--gl-teal-darker); }

/* Neutral Backgrounds */
.gl-bg-charcoal { background-color: var(--gl-charcoal); }
.gl-bg-charcoal-light { background-color: var(--gl-charcoal-light); }
.gl-bg-charcoal-dark { background-color: var(--gl-charcoal-dark); }
.gl-bg-charcoal-darker { background-color: var(--gl-charcoal-darker); }

/* Gray Backgrounds */
.gl-bg-gray-50 { background-color: var(--gl-gray-50); }
.gl-bg-gray-100 { background-color: var(--gl-gray-100); }
.gl-bg-gray-200 { background-color: var(--gl-gray-200); }
.gl-bg-gray-300 { background-color: var(--gl-gray-300); }

/* Accent Backgrounds */
.gl-bg-gold { background-color: var(--gl-gold); }
.gl-bg-gold-light { background-color: var(--gl-gold-light); }
.gl-bg-gold-dark { background-color: var(--gl-gold-dark); }

.gl-bg-bronze { background-color: var(--gl-bronze); }
.gl-bg-bronze-light { background-color: var(--gl-bronze-light); }
.gl-bg-bronze-dark { background-color: var(--gl-bronze-dark); }

/* Semantic Backgrounds */
.gl-bg-white { background-color: var(--gl-white); }
.gl-bg-success { background-color: var(--gl-success); }
.gl-bg-warning { background-color: var(--gl-warning); }
.gl-bg-danger { background-color: var(--gl-danger); }

/* Transparent */
.gl-bg-transparent { background-color: transparent; }

/* ========================================================================
13. GRADIENT BACKGROUNDS
======================================================================== */

.gl-bg-gradient-teal {
  background: var(--gl-gradient-teal);
}

.gl-bg-gradient-slate {
  background: var(--gl-gradient-slate);
}

.gl-bg-gradient-mixed {
  background: var(--gl-gradient-mixed);
}

.gl-bg-gradient-gold {
  background: var(--gl-gradient-gold);
}

.gl-bg-gradient-gold-reverse {
  background: var(--gl-gradient-gold-reverse);
}

.gl-bg-gradient-teal-darker {
  background: var(--gl-gradient-teal-darker);
}

.gl-bg-gradient-light {
  background: var(--gl-gradient-light);
}

.gl-bg-gradient-white-gray {
  background: var(--gl-gradient-white-gray);
}

/* Teal Transparent Gradient (for highlight boxes) */
.gl-bg-teal-gradient-light {
  background: var(--gl-teal-gradient-light);
}

/* ========================================================================
14. BORDER UTILITIES
======================================================================== */

/* Border Width */
.gl-border { border: 1px solid var(--gl-gray-200); }
.gl-border-0 { border: none; }
.gl-border-2 { border-width: 2px; border-style: solid; }
.gl-border-3 { border-width: 3px; border-style: solid; }
.gl-border-4 { border-width: 4px; border-style: solid; }
.gl-border-5 { border-width: 5px; border-style: solid; }

/* Border Directional */
.gl-border-t { border-top: 1px solid var(--gl-gray-200); }
.gl-border-b { border-bottom: 1px solid var(--gl-gray-200); }
.gl-border-l { border-left: 1px solid var(--gl-gray-200); }
.gl-border-r { border-right: 1px solid var(--gl-gray-200); }

/* Border Top Specific */
.gl-border-t-2 { border-top: 2px solid; }
.gl-border-t-3 { border-top: 3px solid; }
.gl-border-t-4 { border-top: 4px solid; }

/* Border Bottom Specific */
.gl-border-b-2 { border-bottom: 2px solid; }
.gl-border-b-3 { border-bottom: 3px solid; }
.gl-border-b-4 { border-bottom: 4px solid; }

/* Border Left Specific */
.gl-border-l-3 { border-left: 3px solid; }
.gl-border-l-4 { border-left: 4px solid; }
.gl-border-l-5 { border-left: 5px solid; }

/* Border Colors */
.gl-border-teal { border-color: var(--gl-teal); }
.gl-border-teal-dark { border-color: var(--gl-teal-dark); }
.gl-border-gold { border-color: var(--gl-gold); }
.gl-border-gold-dark { border-color: var(--gl-gold-dark); }
.gl-border-charcoal { border-color: var(--gl-charcoal); }
.gl-border-charcoal-light { border-color: var(--gl-charcoal-light); }
.gl-border-charcoal-dark { border-color: var(--gl-charcoal-dark); }
.gl-border-gray-200 { border-color: var(--gl-gray-200); }
.gl-border-gray-300 { border-color: var(--gl-gray-300); }

/* Border with Transparency */
.gl-border-teal-30 { border-color: rgba(44, 123, 125, 0.30); }
.gl-border-teal-15 { border-color: rgba(44, 123, 125, 0.15); }

/* ========================================================================
15. BORDER RADIUS UTILITIES
======================================================================== */

.gl-rounded-none { border-radius: 0; }
.gl-rounded-sm { border-radius: var(--gl-radius-sm); }
.gl-rounded { border-radius: var(--gl-radius-base); }
.gl-rounded-md { border-radius: var(--gl-radius-md); }
.gl-rounded-lg { border-radius: var(--gl-radius-lg); }
.gl-rounded-full { border-radius: var(--gl-radius-full); }

/* Specific Corners */
.gl-rounded-t-lg {
  border-top-left-radius: var(--gl-radius-lg);
  border-top-right-radius: var(--gl-radius-lg);
}

.gl-rounded-b-lg {
  border-bottom-left-radius: var(--gl-radius-lg);
  border-bottom-right-radius: var(--gl-radius-lg);
}

/* ========================================================================
16. SHADOW UTILITIES
======================================================================== */

.gl-shadow-none { box-shadow: none; }
.gl-shadow-sm { box-shadow: var(--gl-shadow-sm); }
.gl-shadow-md { box-shadow: var(--gl-shadow-md); }
.gl-shadow-lg { box-shadow: var(--gl-shadow-lg); }
.gl-shadow-book { box-shadow: var(--gl-book-shadow); }

/* ========================================================================
17. OPACITY UTILITIES
======================================================================== */

.gl-opacity-0 { opacity: 0; }
.gl-opacity-50 { opacity: 0.5; }
.gl-opacity-60 { opacity: 0.6; }
.gl-opacity-70 { opacity: 0.7; }
.gl-opacity-80 { opacity: 0.8; }
.gl-opacity-90 { opacity: 0.9; }
.gl-opacity-95 { opacity: 0.95; }
.gl-opacity-100 { opacity: 1; }

/* ========================================================================
18. TRANSITION UTILITIES
======================================================================== */

.gl-transition { transition: var(--gl-transition); }
.gl-transition-fast { transition: var(--gl-transition-fast); }
.gl-transition-none { transition: none; }

/* ========================================================================
19. TRANSFORM UTILITIES
======================================================================== */

.gl-hover-scale:hover {
  transform: scale(1.02);
}

.gl-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow-lg);
}

/* ========================================================================
20. SECTION HEADER COMPONENT
========================================================================
USE CASE: Bagian judul besar dengan nomor section untuk dokumen/halaman
COMPONENTS: .gl-section, .gl-section-header, .gl-section-number, .gl-section-title
======================================================================== */

/* Section Container */
.gl-section {
  margin-bottom: var(--gl-space-12);
}

/* Section Header with Number Badge */
.gl-section-header {
  display: flex;
  align-items: center;
  gap: var(--gl-space-4);
  margin-bottom: var(--gl-space-6);
  padding-bottom: var(--gl-space-4);
  border-bottom: 3px solid var(--gl-charcoal-dark);
}

/* Section Header Variants */
.gl-section-header--gold {
  border-bottom-color: var(--gl-gold);
}

.gl-section-header--teal {
  border-bottom-color: var(--gl-teal);
}

.gl-section-header--charcoal-light {
  border-bottom-color: var(--gl-charcoal-light);
}

.gl-section-header--teal-dark {
  border-bottom-color: var(--gl-teal-dark);
}

/* Section Number Badge */
.gl-section-number {
  background: var(--gl-gradient-slate);
  color: var(--gl-white);
  width: 50px;
  height: 50px;
  border-radius: var(--gl-radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gl-text-4xl);
  font-weight: var(--gl-font-bold);
  box-shadow: var(--gl-shadow-md);
  flex-shrink: 0;
}

/* Section Number Variants */
.gl-section-number--gold {
  background: var(--gl-gradient-gold);
}

.gl-section-number--teal {
  background: var(--gl-gradient-teal);
}

.gl-section-number--charcoal {
  background: var(--gl-charcoal-light);
}

.gl-section-number--teal-darker {
  background: var(--gl-gradient-teal-darker);
}

.gl-section-number--star {
  font-size: var(--gl-text-5xl);
}

/* Section Title */
.gl-section-title {
  margin: 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-6xl);
  font-weight: var(--gl-font-bold);
  letter-spacing: var(--gl-tracking-tight);
}

/* Section Description */
.gl-section-description {
  color: var(--gl-charcoal-light);
  margin-bottom: var(--gl-space-6);
  font-size: var(--gl-text-md);
  line-height: var(--gl-leading-relaxed);
}

/* ========================================================================
21. STATS BOX COMPONENTS
========================================================================
USE CASE: Angka-angka kunci (jumlah artikel, negara mitra, dll.)
COMPONENTS: .gl-stats-box, .gl-stats-box--{variant}, .gl-stats-value, .gl-stats-label
======================================================================== */

/* Base Stats Box */
.gl-stats-box {
  text-align: center;
  padding: var(--gl-space-6) var(--gl-space-4);
  border-radius: var(--gl-radius-base);
  box-shadow: var(--gl-shadow-md);
}

/* Stats Box with Teal Gradient */
.gl-stats-box--teal {
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
}

/* Stats Box with Charcoal Gradient */
.gl-stats-box--charcoal {
  background: var(--gl-gradient-slate);
  color: var(--gl-white);
}

/* Stats Box with Gold Gradient */
.gl-stats-box--gold {
  background: var(--gl-gradient-gold);
  color: var(--gl-white);
}

/* Stats Box Light (Gray) */
.gl-stats-box--light {
  background: var(--gl-gray-100);
  color: var(--gl-charcoal-dark);
  border: 1px solid var(--gl-gray-200);
  box-shadow: var(--gl-shadow-sm);
}

/* Stats Value (Large Number) */
.gl-stats-value {
  font-size: 2.5rem;
  font-weight: var(--gl-font-bold);
  margin-bottom: var(--gl-space-1);
  line-height: 1;
}

/* Stats Label */
.gl-stats-label {
  font-size: var(--gl-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  opacity: 0.95;
}

/* ========================================================================
22. BADGE COMPONENTS
========================================================================
USE CASE: Status kecil, label indexing, highlight singkat
COMPONENTS: .gl-badge, .gl-badge--{variant}, .gl-badge--{size}
======================================================================== */

/* Base Badge */
.gl-badge {
  display: inline-block;
  padding: var(--gl-space-2) var(--gl-space-4);
  border-radius: var(--gl-radius-full);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  box-shadow: var(--gl-shadow-sm);
}

/* Badge Variants - Gradient */
.gl-badge--gold {
  background: var(--gl-gradient-gold);
  color: var(--gl-white);
}

.gl-badge--teal {
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
}

.gl-badge--charcoal {
  background: var(--gl-gradient-slate);
  color: var(--gl-white);
}

.gl-badge--gold-reverse {
  background: var(--gl-gradient-gold-reverse);
  color: var(--gl-white);
}

/* Badge Variants - Solid */
.gl-badge--gray {
  background: var(--gl-gray-100);
  color: var(--gl-charcoal);
}

.gl-badge--white {
  background: var(--gl-white);
  color: var(--gl-charcoal);
  border: 1px solid var(--gl-gray-200);
}

/* Badge Sizes */
.gl-badge--sm {
  padding: var(--gl-space-1) var(--gl-space-3);
  font-size: 0.65rem;
}

.gl-badge--md {
  padding: var(--gl-space-2) var(--gl-space-5);
  font-size: var(--gl-text-xs);
}

.gl-badge--lg {
  padding: var(--gl-space-2) var(--gl-space-5);
  font-size: var(--gl-text-sm);
}

/* ========================================================================
23. EDITOR/REVIEWER CARD COMPONENTS (BASE CARDS)
========================================================================
USE CASE: Kartu generik untuk editor, reviewer, advisory board
COMPONENTS: .gl-card, .gl-card--{variant}
======================================================================== */

/* Base Card */
.gl-card {
  background: var(--gl-white);
  border: 1px solid var(--gl-gray-200);
  border-radius: var(--gl-radius-base);
  padding: var(--gl-space-5);
  box-shadow: var(--gl-shadow-sm);
  transition: var(--gl-transition);
}

.gl-card:hover {
  box-shadow: var(--gl-shadow-md);
}

/* Card with Border Accent */
.gl-card--border-teal {
  border-left: 4px solid var(--gl-teal);
}

.gl-card--border-gold {
  border-left: 4px solid var(--gl-gold);
}

.gl-card--border-charcoal {
  border-left: 4px solid var(--gl-charcoal);
}

/* Card with Top Border */
.gl-card--top-teal {
  border-top: 4px solid var(--gl-teal);
}

.gl-card--top-gold {
  border-top: 4px solid var(--gl-gold);
}

/* Chief/Prominent Card (Managing Editor, Senior Advisor) */
.gl-card--chief {
  background: var(--gl-gradient-light);
  border: 2px solid var(--gl-gold);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-8);
  box-shadow: var(--gl-shadow-lg);
  position: relative;
  overflow: hidden;
}

/* Senior Advisor Card */
.gl-card--senior {
  background: var(--gl-gradient-white-gray);
  border: 2px solid var(--gl-gold-dark);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-6);
  box-shadow: var(--gl-shadow-md);
}

/* Production/Simple Card */
.gl-card--simple {
  background: var(--gl-white);
  border-left: 5px solid var(--gl-charcoal);
  border-radius: var(--gl-radius-base);
  padding: var(--gl-space-5) var(--gl-space-6);
  box-shadow: var(--gl-shadow-sm);
  border: 1px solid var(--gl-gray-200);
}

/* ========================================================================
24. CARD TYPOGRAPHY ELEMENTS (GENERIC)
========================================================================
USE CASE: Basic cards & simple layouts (.gl-card)
CLASSES: .gl-card-name, .gl-card-affiliation, .gl-card-expertise
PATTERN: Direct class on element (no BEM)
======================================================================== */

/* Card Name/Title */
.gl-card-name {
  margin: 0 0 var(--gl-space-2) 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-3xl);
  font-weight: var(--gl-font-bold);
}

.gl-card-name--large {
  font-size: var(--gl-text-5xl);
}

.gl-card-name--medium {
  font-size: var(--gl-text-4xl);
}

.gl-card-name--small {
  font-size: var(--gl-text-3xl);
}

/* Card Affiliation */
.gl-card-affiliation {
  margin: 0 0 var(--gl-space-3) 0;
  color: var(--gl-charcoal-light);
  font-size: var(--gl-text-lg);
  font-style: italic;
}

.gl-card-affiliation--small {
  font-size: var(--gl-text-sm);
}

/* Card Expertise */
.gl-card-expertise {
  margin: 0;
  color: var(--gl-charcoal);
  font-size: var(--gl-text-md);
}

.gl-card-expertise strong {
  color: var(--gl-teal-dark);
}

.gl-card-expertise--small {
  font-size: var(--gl-text-sm);
  font-weight: var(--gl-font-semibold);
  color: var(--gl-teal-dark);
}

/* ========================================================================
25. REVIEWER CARD COMPONENTS (Compact with Checkmark)
========================================================================
USE CASE: Daftar reviewer ringkas dengan icon check
COMPONENTS: .gl-reviewer-card, .gl-reviewer-name, .gl-reviewer-institution
======================================================================== */

/* Reviewer Card Container */
.gl-reviewer-card {
  background: var(--gl-white);
  padding: var(--gl-space-3) var(--gl-space-4);
  border-radius: var(--gl-radius-sm);
  box-shadow: var(--gl-shadow-sm);
}

/* Reviewer Card with Left Border Accent */
.gl-reviewer-card--teal {
  border-left: 3px solid var(--gl-teal);
}

.gl-reviewer-card--gold {
  border-left: 3px solid var(--gl-gold);
}

/* Reviewer Checkmark Icon */
.gl-reviewer-check {
  color: var(--gl-teal);
  font-size: var(--gl-text-3xl);
  flex-shrink: 0;
}

/* Reviewer Name */
.gl-reviewer-name {
  color: var(--gl-charcoal-dark);
  display: block;
  margin-bottom: var(--gl-space-1);
  font-weight: var(--gl-font-bold);
}

/* Reviewer Institution */
.gl-reviewer-institution {
  color: var(--gl-charcoal-light);
  font-style: italic;
  font-size: var(--gl-text-sm);
}

/* ========================================================================
26. EDITORIAL CARD WITH ID BADGES - COMPLETE SYSTEM
========================================================================
USE CASE: Editorial team profiles, reviewer cards dengan foto & ID badges
CLASSES: .gl-editorial-card__name, .gl-editorial-card__institution, dll.
PATTERN: BEM notation (Block__Element) – lebih kompleks dari Section 24
======================================================================== */

/* ============================================
26.1 EDITORIAL CARD CONTAINERS
============================================ */

/* Base Editorial Card */
.gl-editorial-card {
  background: var(--gl-white);
  border: 1px solid var(--gl-gray-200);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-6);
  box-shadow: var(--gl-shadow-sm);
  transition: var(--gl-transition);
  text-align: center;
}

.gl-editorial-card:hover {
  box-shadow: var(--gl-shadow-md);
  transform: translateY(-2px);
}

/* Chief/Managing Editor Card - Premium Style */
.gl-editorial-card--chief {
  background: var(--gl-gradient-light);
  border: 2px solid var(--gl-gold);
  border-radius: var(--gl-radius-lg);
  padding: var(--gl-space-8);
  box-shadow: var(--gl-shadow-lg);
  position: relative;
  overflow: hidden;
}

.gl-editorial-card--chief::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gl-gradient-gold);
}

/* Senior Editor Card */
.gl-editorial-card--senior {
  background: var(--gl-gradient-white-gray);
  border: 2px solid var(--gl-gold-dark);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-6);
  box-shadow: var(--gl-shadow-md);
}

/* Standard Editorial Card - with Teal Accent */
.gl-editorial-card--teal {
  border-left: 4px solid var(--gl-teal);
}

.gl-editorial-card--teal:hover {
  border-left-color: var(--gl-teal-dark);
}

/* Advisory Board Card - with Gold Accent */
.gl-editorial-card--gold {
  border-left: 4px solid var(--gl-gold);
}

.gl-editorial-card--gold:hover {
  border-left-color: var(--gl-gold-dark);
}

/* ============================================
26.2 PHOTO CIRCLE COMPONENT
============================================ */

/* Photo Container */
.gl-editorial-card__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--gl-space-4) auto;
  border: 3px solid var(--gl-gray-200);
  background: var(--gl-gray-100);
  transition: var(--gl-transition);
}

.gl-editorial-card:hover .gl-editorial-card__photo {
  border-color: var(--gl-teal);
  box-shadow: 0 0 0 4px rgba(44, 123, 125, 0.10);
}

/* Photo for Chief Editor - Larger with Gold Border */
.gl-editorial-card--chief .gl-editorial-card__photo {
  width: 100px;
  height: 100px;
  border: 3px solid var(--gl-gold);
  margin-bottom: var(--gl-space-5);
}

.gl-editorial-card--chief:hover .gl-editorial-card__photo {
  border-color: var(--gl-gold-dark);
  box-shadow: 0 0 0 4px rgba(183, 138, 61, 0.2);
}

/* Photo for Senior Editor */
.gl-editorial-card--senior .gl-editorial-card__photo {
  width: 90px;
  height: 90px;
  border: 3px solid var(--gl-gold-light);
}

/* Actual Image inside Photo Container */
.gl-editorial-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo Placeholder (when no image) */
.gl-editorial-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gl-gray-100);
  color: var(--gl-gray-400);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  letter-spacing: var(--gl-tracking-wider);
  text-transform: uppercase;
}

/* ============================================
26.3 CARD TEXT ELEMENTS (EDITORIAL)
============================================ */

/* Name/Title - BOLD + HITAM + RATA TENGAH */
.gl-editorial-card__name {
  margin: 0 0 var(--gl-space-2) 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-2xl);
  font-weight: var(--gl-font-bold);
  line-height: var(--gl-leading-tight);
  text-align: center;
}

.gl-editorial-card--chief .gl-editorial-card__name {
  font-size: var(--gl-text-4xl);
  color: var(--gl-charcoal-dark);
  font-weight: var(--gl-font-bold);
}

.gl-editorial-card--senior .gl-editorial-card__name {
  font-size: var(--gl-text-3xl);
  color: var(--gl-charcoal-dark);
  font-weight: var(--gl-font-bold);
}

/* Role Badge */
.gl-editorial-card__role {
  display: inline-block;
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
  padding: var(--gl-space-2) var(--gl-space-4);
  border-radius: var(--gl-radius-full);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wide);
  margin-bottom: var(--gl-space-3);
}

.gl-editorial-card--chief .gl-editorial-card__role {
  background: var(--gl-gradient-gold);
}

/* Institution/Affiliation */
.gl-editorial-card__institution {
  display: block;
  margin: var(--gl-space-2) 0;
  color: var(--gl-charcoal-light);
  font-size: var(--gl-text-sm);
  font-style: italic;
  line-height: var(--gl-leading-normal);
}

/* Expertise */
.gl-editorial-card__expertise {
  margin: var(--gl-space-3) 0;
  padding-top: var(--gl-space-3);
  border-top: 1px solid var(--gl-gray-200);
  color: var(--gl-charcoal);
  font-size: var(--gl-text-sm);
}

.gl-editorial-card__expertise strong {
  color: var(--gl-teal-dark);
  font-weight: var(--gl-font-semibold);
}

/* ============================================
26.4 ID BADGES (ORCID, Scopus, WoS, etc.)
============================================ */

/* ID Badges Container - SINGLE ROW */
.gl-editorial-card__id-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gl-space-2);
  justify-content: center;
  margin-top: var(--gl-space-4);
  padding-top: var(--gl-space-4);
  border-top: 1px solid var(--gl-gray-200);
}

.gl-editorial-card--chief .gl-editorial-card__id-badges {
  border-top-color: rgba(183, 138, 61, 0.2);
}

.gl-editorial-card--teal .gl-editorial-card__id-badges {
  border-top-color: rgba(44, 123, 125, 0.15);
}

.gl-editorial-card--gold .gl-editorial-card__id-badges {
  border-top-color: rgba(184, 122, 90, 0.2);
}

/* Base ID Badge Link - RESPONSIVE FLEX */
.gl-editorial-card__id-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gl-space-2) var(--gl-space-3);
  border-radius: var(--gl-radius-sm);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-decoration: none;
  transition: var(--gl-transition);
  border: 1.5px solid;
  letter-spacing: var(--gl-tracking-wide);
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* ORCID Badge - Green */
.gl-editorial-card__id-link--orcid {
  background: #A6CE39;
  color: #FFFFFF;
  border-color: #A6CE39;
}

.gl-editorial-card__id-link--orcid:hover {
  background: #8FB82B;
  border-color: #8FB82B;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(166, 206, 57, 0.3);
}

/* Scopus Badge - Orange */
.gl-editorial-card__id-link--scopus {
  background: #E9711C;
  color: #FFFFFF;
  border-color: #E9711C;
}

.gl-editorial-card__id-link--scopus:hover {
  background: #D45F0F;
  border-color: #D45F0F;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(233, 113, 28, 0.3);
}

/* Web of Science Badge - Blue */
.gl-editorial-card__id-link--wos {
  background: #124E96;
  color: #FFFFFF;
  border-color: #124E96;
}

.gl-editorial-card__id-link--wos:hover {
  background: #0D3A6F;
  border-color: #0D3A6F;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(18, 78, 150, 0.3);
}

/* SINTA Badge - Teal/Goliterati Brand */
.gl-editorial-card__id-link--sinta {
  background: var(--gl-teal);
  color: #FFFFFF;
  border-color: var(--gl-teal);
}

.gl-editorial-card__id-link--sinta:hover {
  background: var(--gl-teal-dark);
  border-color: var(--gl-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(44, 123, 125, 0.3);
}

/* Google Scholar Badge - Light Blue */
.gl-editorial-card__id-link--gscholar {
  background: #4285F4;
  color: #FFFFFF;
  border-color: #4285F4;
}

.gl-editorial-card__id-link--gscholar:hover {
  background: #2A6CDA;
  border-color: #2A6CDA;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
}

/* Badge Focus State for Accessibility */
.gl-editorial-card__id-link:focus-visible {
  outline: 3px solid rgba(44, 123, 125, 0.4);
  outline-offset: 2px;
}

/* ============================================
26.5 REVIEWER CARDS (Compact Style)
============================================ */

/* Reviewer Card - More Compact than Editorial Card */
.gl-reviewer-card {
  background: var(--gl-white);
  padding: var(--gl-space-4) var(--gl-space-5);
  border-radius: var(--gl-radius-base);
  box-shadow: var(--gl-shadow-sm);
  text-align: center;
  transition: var(--gl-transition);
}

.gl-reviewer-card:hover {
  box-shadow: var(--gl-shadow-md);
  transform: translateY(-2px);
}

/* Reviewer Card with Border Accent */
.gl-reviewer-card--teal {
  border-left: 3px solid var(--gl-teal);
}

.gl-reviewer-card--gold {
  border-left: 3px solid var(--gl-gold);
}

/* Reviewer Photo - Smaller */
.gl-reviewer-card__photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--gl-space-3) auto;
  border: 2px solid var(--gl-gray-200);
  background: var(--gl-gray-100);
}

.gl-reviewer-card--teal .gl-reviewer-card__photo {
  border-color: var(--gl-teal);
}

.gl-reviewer-card--gold .gl-reviewer-card__photo {
  border-color: var(--gl-gold);
}

.gl-reviewer-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reviewer Name */
.gl-reviewer-name {
  display: block;
  margin: 0 0 var(--gl-space-1) 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-md);
  font-weight: var(--gl-font-bold);
}

/* Reviewer Institution */
.gl-reviewer-institution {
  color: var(--gl-charcoal-light);
  font-style: italic;
  font-size: var(--gl-text-sm);
}

/* Reviewer ID Badges - Same styling as editorial cards */
.gl-reviewer-card .gl-editorial-card__id-badges {
  margin-top: var(--gl-space-3);
  padding-top: var(--gl-space-3);
}

.gl-reviewer-card--teal .gl-editorial-card__id-badges {
  border-top-color: rgba(44, 123, 125, 0.15);
}

.gl-reviewer-card--gold .gl-editorial-card__id-badges {
  border-top-color: rgba(184, 122, 90, 0.2);
}

/* ============================================
26.6 RESPONSIVE ADJUSTMENTS
============================================ */

@media (max-width: 768px) {
  .gl-editorial-card {
    padding: var(--gl-space-5);
  }

  .gl-editorial-card--chief {
    padding: var(--gl-space-6);
  }

  .gl-editorial-card__photo {
    width: 70px;
    height: 70px;
  }

  .gl-editorial-card--chief .gl-editorial-card__photo {
    width: 90px;
    height: 90px;
  }

  .gl-editorial-card__name {
    font-size: var(--gl-text-xl);
  }

  .gl-editorial-card--chief .gl-editorial-card__name {
    font-size: var(--gl-text-3xl);
  }

  .gl-editorial-card__id-badges {
    gap: var(--gl-space-1);
  }

  .gl-editorial-card__id-link {
    font-size: 0.65rem;
    padding: var(--gl-space-1) var(--gl-space-3);
  }
}

/* ========================================================================
27. HIGHLIGHT/ALERT BOX COMPONENTS
======================================================================== */

.gl-highlight-box {
  background: var(--gl-teal-gradient-light);
  border: 2px solid rgba(44, 123, 125, 0.30);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-6);
}

.gl-highlight-title {
  margin: 0 0 var(--gl-space-5) 0;
  color: var(--gl-teal-dark);
  font-weight: var(--gl-font-bold);
  font-size: var(--gl-text-3xl);
}

.gl-highlight-footer {
  margin-top: var(--gl-space-6);
  padding-top: var(--gl-space-5);
  border-top: 1px solid rgba(44, 123, 125, 0.15);
  color: var(--gl-charcoal-light);
  font-size: var(--gl-text-sm);
  font-style: italic;
  text-align: center;
}

/* ========================================================================
28. CTA (Call-to-Action) COMPONENTS
======================================================================== */

.gl-cta-box {
  text-align: center;
  margin-top: var(--gl-space-12);
  padding: var(--gl-space-10) var(--gl-space-8);
  background: var(--gl-gradient-light);
  border: 2px solid var(--gl-gray-200);
  border-radius: var(--gl-radius-md);
  box-shadow: var(--gl-shadow-lg);
}

.gl-cta-badge {
  display: inline-block;
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
  padding: var(--gl-space-2) var(--gl-space-5);
  border-radius: var(--gl-radius-full);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  margin-bottom: var(--gl-space-5);
}

.gl-cta-title {
  margin: 0 0 var(--gl-space-4) 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-7xl);
  font-weight: var(--gl-font-bold);
}

.gl-cta-description {
  font-size: var(--gl-text-lg);
  color: var(--gl-charcoal-light);
  line-height: var(--gl-leading-relaxed);
  margin-bottom: var(--gl-space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
29. BUTTON COMPONENTS
======================================================================== */

.gl-btn {
  display: inline-block;
  padding: var(--gl-space-4) var(--gl-space-8);
  border-radius: var(--gl-radius-base);
  font-size: var(--gl-text-lg);
  font-weight: var(--gl-font-semibold);
  text-decoration: none;
  box-shadow: var(--gl-shadow-md);
  transition: var(--gl-transition);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wide);
  cursor: pointer;
  border: none;
}

/* Primary */
.gl-btn--primary {
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
}

.gl-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow-lg);
  color: var(--gl-white);
}

/* Secondary */
.gl-btn--secondary {
  background: var(--gl-gray-100);
  color: var(--gl-charcoal);
  border: 1px solid var(--gl-gray-200);
}

.gl-btn--secondary:hover {
  background: var(--gl-gray-200);
  color: var(--gl-charcoal-dark);
}

/* Outline */
.gl-btn--outline {
  background: transparent;
  color: var(--gl-charcoal);
  border: 2px solid var(--gl-gray-300);
}

.gl-btn--outline:hover {
  background: var(--gl-gray-50);
  border-color: var(--gl-teal);
  color: var(--gl-teal-dark);
}

/* Sizes */
.gl-btn--sm {
  padding: var(--gl-space-2) var(--gl-space-4);
  font-size: var(--gl-text-sm);
}

.gl-btn--lg {
  padding: var(--gl-space-5) var(--gl-space-10);
  font-size: var(--gl-text-xl);
}

/* Full Width */
.gl-btn--full {
  width: 100%;
  display: block;
}

/* ========================================================================
30. SPECIAL CARD LAYOUTS
======================================================================== */

.gl-col-card {
  padding: var(--gl-space-4);
  background: var(--gl-white);
  border: 1px solid var(--gl-gray-200);
  border-radius: var(--gl-radius-base);
}

.gl-col-card h4 {
  margin: 0 0 var(--gl-space-2) 0;
  color: var(--gl-charcoal-dark);
  font-size: var(--gl-text-2xl);
}

.gl-col-card p {
  margin: 0;
  color: var(--gl-charcoal-light);
  font-size: var(--gl-text-sm);
}

.gl-col-card--teal {
  border-left: 3px solid var(--gl-teal);
}

/* ========================================================================
31. LIST STYLING
======================================================================== */

.gl-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gl-list-spaced li {
  margin-bottom: var(--gl-space-3);
}

.gl-list-spaced li:last-child {
  margin-bottom: 0;
}

/* ========================================================================
32. DIVIDER UTILITIES
======================================================================== */

.gl-divider {
  border: 0;
  border-top: 1px solid var(--gl-gray-200);
  margin: var(--gl-space-6) 0;
}

.gl-divider--thick {
  border-top-width: 2px;
}

.gl-divider--teal {
  border-top-color: var(--gl-teal);
}

/* ========================================================================
33. CONTENT WRAPPER
======================================================================== */

.gl-content { }

.gl-content-section {
  margin-bottom: var(--gl-space-12);
}

.gl-content-section:last-child {
  margin-bottom: 0;
}

/* ========================================================================
34. HERO BANNER COMPONENTS
======================================================================== */

.gl-hero {
  background: var(--gl-gradient-mixed);
  color: var(--gl-white);
  padding: var(--gl-space-12) var(--gl-space-8);
  text-align: center;
  border-radius: var(--gl-radius-lg);
  margin-bottom: var(--gl-space-12);
  box-shadow: var(--gl-shadow-lg);
}

.gl-hero-title {
  margin: 0 0 var(--gl-space-4) 0;
  font-size: var(--gl-text-7xl);
  font-weight: var(--gl-font-bold);
  color: var(--gl-white);
  letter-spacing: var(--gl-tracking-tight);
}

.gl-hero-subtitle {
  font-size: var(--gl-text-2xl);
  margin-bottom: var(--gl-space-6);
  opacity: 0.95;
  line-height: var(--gl-leading-relaxed);
}

.gl-hero-description {
  font-size: var(--gl-text-lg);
  max-width: 700px;
  margin: 0 auto var(--gl-space-8) auto;
  opacity: 0.9;
  line-height: var(--gl-leading-relaxed);
}

.gl-hero--teal {
  background: var(--gl-gradient-teal);
}

.gl-hero--gold {
  background: var(--gl-gradient-gold);
}

.gl-hero--compact {
  padding: var(--gl-space-8) var(--gl-space-6);
}

/* ========================================================================
35. ENHANCED OMP HEADER/NAV
======================================================================== */

.pkp_structure_head .pkp_site_name a {
  transition: var(--gl-transition);
}

.pkp_structure_head .pkp_site_name a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.pkp_navigation_primary ul li a {
  transition: var(--gl-transition);
  border-radius: var(--gl-radius-sm);
  padding: var(--gl-space-2) var(--gl-space-4);
}

.pkp_navigation_primary ul li a:hover {
  background: var(--gl-teal-gradient-light);
  color: var(--gl-teal-dark);
  transform: translateY(-1px);
}

.pkp_search form {
  transition: var(--gl-transition);
}

.pkp_search form:focus-within {
  box-shadow: var(--gl-shadow-md);
}

/* ========================================================================
36. FORM STYLING
======================================================================== */

.gl-form-group {
  margin-bottom: var(--gl-space-5);
}

.gl-form-label {
  display: block;
  margin-bottom: var(--gl-space-2);
  color: var(--gl-charcoal-dark);
  font-weight: var(--gl-font-semibold);
  font-size: var(--gl-text-md);
}

.gl-form-input {
  width: 100%;
  padding: var(--gl-space-3) var(--gl-space-4);
  border: 1px solid var(--gl-gray-300);
  border-radius: var(--gl-radius-base);
  font-size: var(--gl-text-md);
  transition: var(--gl-transition);
  background: var(--gl-white);
  color: var(--gl-charcoal);
}

.gl-form-input:focus {
  outline: none;
  border-color: var(--gl-teal);
  box-shadow: 0 0 0 3px rgba(44, 123, 125, 0.10);
}

.gl-form-textarea {
  min-height: 120px;
  resize: vertical;
}

.gl-form-select {
  width: 100%;
  padding: var(--gl-space-3) var(--gl-space-4);
  border: 1px solid var(--gl-gray-300);
  border-radius: var(--gl-radius-base);
  font-size: var(--gl-text-md);
  background: var(--gl-white);
  cursor: pointer;
  transition: var(--gl-transition);
}

.gl-form-select:focus {
  outline: none;
  border-color: var(--gl-teal);
  box-shadow: 0 0 0 3px rgba(44, 123, 125, 0.10);
}

.gl-form-check {
  display: flex;
  align-items: center;
  gap: var(--gl-space-2);
  margin-bottom: var(--gl-space-3);
}

.gl-form-check input[type="checkbox"],
.gl-form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.gl-form-check label {
  cursor: pointer;
  font-size: var(--gl-text-md);
  color: var(--gl-charcoal);
  margin: 0;
}

.gl-form-help {
  font-size: var(--gl-text-sm);
  color: var(--gl-gray-text);
  margin-top: var(--gl-space-2);
}

.gl-form-input--error {
  border-color: var(--gl-danger);
}

.gl-form-error-text {
  color: var(--gl-danger);
  font-size: var(--gl-text-sm);
  margin-top: var(--gl-space-1);
}

/* ========================================================================
37. TABLE STYLING
======================================================================== */

.gl-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--gl-space-6);
  border-radius: var(--gl-radius-base);
  box-shadow: var(--gl-shadow-sm);
}

.gl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gl-white);
  font-size: var(--gl-text-md);
}

.gl-table thead {
  background: var(--gl-gradient-slate);
  color: var(--gl-white);
}

.gl-table thead th {
  padding: var(--gl-space-4) var(--gl-space-5);
  text-align: left;
  font-weight: var(--gl-font-semibold);
  letter-spacing: var(--gl-tracking-wide);
  text-transform: uppercase;
  font-size: var(--gl-text-sm);
}

.gl-table--teal-header thead {
  background: var(--gl-gradient-teal);
}

.gl-table--gold-header thead {
  background: var(--gl-gradient-gold);
}

.gl-table tbody tr {
  border-bottom: 1px solid var(--gl-gray-200);
  transition: var(--gl-transition-fast);
}

.gl-table tbody tr:hover {
  background: var(--gl-gray-50);
}

.gl-table tbody tr:last-child {
  border-bottom: none;
}

.gl-table tbody td {
  padding: var(--gl-space-4) var(--gl-space-5);
  color: var(--gl-charcoal);
}

/* Striped */
.gl-table--striped tbody tr:nth-child(even) {
  background: var(--gl-gray-50);
}

.gl-table--striped tbody tr:nth-child(even):hover {
  background: var(--gl-gray-100);
}

/* Bordered */
.gl-table--bordered {
  border: 1px solid var(--gl-gray-200);
}

.gl-table--bordered th,
.gl-table--bordered td {
  border: 1px solid var(--gl-gray-200);
}

/* Compact */
.gl-table--compact tbody td,
.gl-table--compact thead th {
  padding: var(--gl-space-2) var(--gl-space-3);
  font-size: var(--gl-text-sm);
}

/* ========================================================================
38. RESPONSIVE UTILITIES
======================================================================== */

@media (max-width: 768px) {
  .gl-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .gl-hide-desktop {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .gl-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gl-space-3);
  }

  .gl-card-grid {
    grid-template-columns: 1fr;
    gap: var(--gl-space-4);
  }

  .gl-two-col,
  .gl-three-col {
    grid-template-columns: 1fr;
  }

  .gl-hero {
    padding: var(--gl-space-8) var(--gl-space-4);
  }

  .gl-hero-title {
    font-size: var(--gl-text-5xl);
  }

  .gl-section-title {
    font-size: var(--gl-text-4xl);
  }

  .gl-card--chief,
  .gl-card--senior {
    padding: var(--gl-space-5);
  }

  .gl-cta-box {
    padding: var(--gl-space-6) var(--gl-space-4);
  }

  .gl-cta-title {
    font-size: var(--gl-text-5xl);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .gl-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gl-three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================================================
39. PRINT STYLES
======================================================================== */

@media print {

  .gl-card,
  .gl-stats-box,
  .gl-badge,
  .gl-btn,
  .gl-hero {
    box-shadow: none !important;
    transition: none !important;
  }

  .gl-card:hover,
  .gl-btn--primary:hover {
    transform: none !important;
  }

  .gl-card,
  .gl-stats-box,
  .gl-section {
    page-break-inside: avoid;
  }

  .gl-hero,
  .gl-badge--gold,
  .gl-badge--teal,
  .gl-badge--charcoal {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .gl-btn,
  .pkp_navigation_primary,
  .pkp_search {
    display: none !important;
  }
}

/* ========================================================================
40. ACCESSIBILITY HELPERS & FINAL UTILITIES
======================================================================== */

.gl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gl-btn:focus-visible,
.gl-form-input:focus-visible,
.gl-form-select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gl-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .gl-card,
  .gl-stats-box,
  .gl-badge {
    border: 2px solid currentColor;
  }
}

/* Cursor */
.gl-cursor-pointer { cursor: pointer; }
.gl-cursor-default { cursor: default; }

/* User Select */
.gl-select-none { user-select: none; }
.gl-select-all { user-select: all; }

/* Pointer Events */
.gl-pointer-events-none { pointer-events: none; }
.gl-pointer-events-auto { pointer-events: auto; }

/* Visibility */
.gl-visible { visibility: visible; }
.gl-invisible { visibility: hidden; }

/* Z-Index */
.gl-z-0 { z-index: 0; }
.gl-z-10 { z-index: 10; }
.gl-z-20 { z-index: 20; }
.gl-z-30 { z-index: 30; }
.gl-z-40 { z-index: 40; }
.gl-z-50 { z-index: 50; }

/* Object Fit */
.gl-object-cover { object-fit: cover; }
.gl-object-contain { object-fit: contain; }

/* Aspect Ratio */
.gl-aspect-square { aspect-ratio: 1 / 1; }
.gl-aspect-video { aspect-ratio: 16 / 9; }

/* Vertical Align */
.gl-align-top { vertical-align: top; }
.gl-align-middle { vertical-align: middle; }
.gl-align-bottom { vertical-align: bottom; }

/* Word Break */
.gl-break-words { word-break: break-word; }
.gl-break-all { word-break: break-all; }

/* Whitespace */
.gl-whitespace-nowrap { white-space: nowrap; }
.gl-whitespace-normal { white-space: normal; }

/* Animations */
@keyframes gl-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gl-animate-fade-in {
  animation: gl-fadeIn 0.5s ease-out;
}

@keyframes gl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.gl-animate-pulse {
  animation: gl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes gl-slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.gl-animate-slide-in-left {
  animation: gl-slideInLeft 0.5s ease-out;
}

/* Icon */
.gl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gl-icon--sm {
  width: 20px;
  height: 20px;
  font-size: var(--gl-text-lg);
}

.gl-icon--md {
  width: 30px;
  height: 30px;
  font-size: var(--gl-text-2xl);
}

.gl-icon--lg {
  width: 40px;
  height: 40px;
  font-size: var(--gl-text-3xl);
}

.gl-icon--teal { color: var(--gl-teal); }
.gl-icon--gold { color: var(--gl-gold); }
.gl-icon--success { color: var(--gl-success); }

/* Skeleton Loader */
.gl-skeleton {
  background: linear-gradient(
    90deg,
    var(--gl-gray-100) 25%,
    var(--gl-gray-200) 50%,
    var(--gl-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: gl-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--gl-radius-base);
}

@keyframes gl-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gl-skeleton--text {
  height: 1em;
  margin-bottom: var(--gl-space-2);
}

.gl-skeleton--card {
  height: 200px;
}

/* ========================================================================
41. ENHANCED OMP COMPONENTS & GLOBAL POLISH
======================================================================== */

.obj_monograph_summary .cover img {
  border-radius: var(--gl-radius-base);
  box-shadow: var(--gl-book-shadow);
  transition: var(--gl-transition);
}

.obj_monograph_summary .cover img:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}

.listPanel__item {
  transition: var(--gl-transition);
  border-radius: var(--gl-radius-base);
}

.listPanel__item:hover {
  box-shadow: var(--gl-shadow-md);
  transform: translateX(2px);
}

.cmp_pagination a {
  transition: var(--gl-transition);
  border-radius: var(--gl-radius-sm);
}

.cmp_pagination a:hover {
  background: var(--gl-teal-gradient-light);
  color: var(--gl-teal-dark);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--gl-teal);
  color: var(--gl-white);
}

::-moz-selection {
  background: var(--gl-teal);
  color: var(--gl-white);
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--gl-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gl-gray-300);
  border-radius: var(--gl-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gl-teal);
}

/* PKP Branding & Footer Cleanup */
:where(.pkp_brand_footer, .pkp_footer_content .pkp_brand_footer, footer .pkp_brand_footer) {
  display: none !important;
}

.pkp_structure_footer_wrapper .pkp_footer_content {
  border-top: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Simple Footer - keep original dark values (can be recolored later) */
.gl-footer-simple {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #2d3748;
}

.gl-footer-simple strong {
  color: #cbd5e1;
  font-weight: 600;
}

.pkp_structure_footer {
  background-color: transparent !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pkp_structure_footer_wrapper {
  background-color: #2d3748 !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================================================
42. HOMEPAGE 4 HIGHLIGHT BOXES (OWL TEAL EDITION)
Grid 4 kolom responsif untuk menonjolkan fitur utama di homepage
======================================================================== */

/* Wrapper grid 4 kolom, auto-responsif */
.gl-home-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gl-space-5);
  margin-top: var(--gl-space-8);
  margin-bottom: var(--gl-space-10);
}

/* Base card */
.gl-home-highlight {
  background: var(--gl-white);
  border-radius: var(--gl-radius-md);
  border: 1px solid var(--gl-gray-200);
  box-shadow: var(--gl-shadow-md);
  padding: var(--gl-space-6) var(--gl-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-3);
  transition: var(--gl-transition);
  position: relative;
  overflow: hidden;
}

.gl-home-highlight:hover {
  transform: translateY(-3px);
  box-shadow: var(--gl-shadow-lg);
}

/* Top accent bar (teal default) */
.gl-home-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gl-gradient-teal);
}

/* Variants accent */
.gl-home-highlight--gold::before {
  background: var(--gl-gradient-gold);
}

.gl-home-highlight--charcoal::before {
  background: var(--gl-gradient-slate);
}

/* Optional soft background variants */
.gl-home-highlight--soft-teal {
  background: var(--gl-teal-gradient-light);
  border-color: rgba(44, 123, 125, 0.30);
}

.gl-home-highlight--soft-gold {
  background: linear-gradient(
    135deg,
    rgba(183, 138, 61, 0.08) 0%,
    rgba(183, 138, 61, 0.02) 100%
  );
  border-color: rgba(183, 138, 61, 0.30);
}

/* Icon circle di atas judul */
.gl-home-highlight__icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gl-space-2);
  font-size: var(--gl-text-2xl);
  color: var(--gl-white);
  background: var(--gl-gradient-teal);
  box-shadow: var(--gl-shadow-sm);
}

.gl-home-highlight--gold .gl-home-highlight__icon {
  background: var(--gl-gradient-gold);
}

.gl-home-highlight--charcoal .gl-home-highlight__icon {
  background: var(--gl-gradient-slate);
}

/* Judul */
.gl-home-highlight__title {
  margin: 0 0 var(--gl-space-2) 0;
  font-size: var(--gl-text-2xl);
  font-weight: var(--gl-font-bold);
  color: var(--gl-charcoal-dark);
  letter-spacing: var(--gl-tracking-tight);
}

/* Deskripsi */
.gl-home-highlight__text {
  margin: 0;
  font-size: var(--gl-text-sm);
  color: var(--gl-charcoal-light);
  line-height: var(--gl-leading-relaxed);
}

/* Link kecil di bawah (opsional) */
.gl-home-highlight__link {
  margin-top: var(--gl-space-3);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  color: var(--gl-teal-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.gl-home-highlight__link:hover {
  color: var(--gl-teal-light);
}

/* Responsive tweaks untuk layar kecil */
@media (max-width: 768px) {
  .gl-home-highlights {
    gap: var(--gl-space-4);
    margin-top: var(--gl-space-6);
    margin-bottom: var(--gl-space-8);
  }

  .gl-home-highlight {
    padding: var(--gl-space-5) var(--gl-space-4);
  }

  .gl-home-highlight__title {
    font-size: var(--gl-text-xl);
  }
}

/* ========================================================================
43. SERIES HIGHLIGHT STRIP (FEATURED SERIES)
1 baris khusus untuk menonjolkan 1 seri utama
======================================================================== */

.gl-series-highlight {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--gl-space-6);
  padding: var(--gl-space-6) var(--gl-space-6);
  border-radius: var(--gl-radius-lg);
  background: var(--gl-gradient-teal-darker);
  color: var(--gl-white);
  box-shadow: var(--gl-shadow-lg);
  margin: var(--gl-space-10) 0;
  align-items: center;
}

.gl-series-highlight__badge {
  display: inline-block;
  padding: var(--gl-space-2) var(--gl-space-5);
  border-radius: var(--gl-radius-full);
  background: var(--gl-gradient-gold);
  color: var(--gl-white);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  margin-bottom: var(--gl-space-3);
}

.gl-series-highlight__title {
  margin: 0 0 var(--gl-space-3) 0;
  font-size: var(--gl-text-6xl);
  font-weight: var(--gl-font-bold);
  letter-spacing: var(--gl-tracking-tight);
  color: var(--gl-white);
}

.gl-series-highlight__subtitle {
  margin: 0 0 var(--gl-space-4) 0;
  font-size: var(--gl-text-lg);
  opacity: 0.95;
  line-height: var(--gl-leading-relaxed);
}

.gl-series-highlight__meta {
  font-size: var(--gl-text-sm);
  opacity: 0.9;
}

/* Kolom kanan: bullet singkat atau cover kecil */
.gl-series-highlight__right {
  background: rgba(0, 0, 0, 0.08);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gl-series-highlight__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gl-series-highlight__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gl-space-2);
  font-size: var(--gl-text-sm);
  margin-bottom: var(--gl-space-2);
}

.gl-series-highlight__list li:last-child {
  margin-bottom: 0;
}

.gl-series-highlight__bullet {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-top: 0.4rem;
  background: var(--gl-gold-light);
}

/* Optional: CTA kecil */
.gl-series-highlight__cta {
  margin-top: var(--gl-space-4);
}

/* Responsif */
@media (max-width: 768px) {
  .gl-series-highlight {
    grid-template-columns: 1fr;
    padding: var(--gl-space-5) var(--gl-space-4);
    gap: var(--gl-space-4);
  }

  .gl-series-highlight__title {
    font-size: var(--gl-text-4xl);
  }

  .gl-series-highlight__subtitle {
    font-size: var(--gl-text-md);
  }
}

/* ========================================================================
44. JOURNAL CLUSTER HIGHLIGHT (MULTI-JOURNAL STRIP)
Untuk menonjolkan kelompok jurnal: Economics Cluster, Education Cluster, dll.
======================================================================== */

.gl-journal-cluster {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--gl-space-6);
  padding: var(--gl-space-6) var(--gl-space-6);
  border-radius: var(--gl-radius-lg);
  background: var(--gl-gradient-slate);
  color: var(--gl-white);
  box-shadow: var(--gl-shadow-lg);
  margin: var(--gl-space-10) 0;
  align-items: center;
}

/* Badge di atas judul cluster */
.gl-journal-cluster__badge {
  display: inline-block;
  padding: var(--gl-space-2) var(--gl-space-5);
  border-radius: var(--gl-radius-full);
  background: var(--gl-gradient-teal);
  color: var(--gl-white);
  font-size: var(--gl-text-xs);
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  margin-bottom: var(--gl-space-3);
}

/* Judul cluster */
.gl-journal-cluster__title {
  margin: 0 0 var(--gl-space-3) 0;
  font-size: var(--gl-text-6xl);
  font-weight: var(--gl-font-bold);
  letter-spacing: var(--gl-tracking-tight);
  color: var(--gl-white);
}

/* Deskripsi pendek cluster */
.gl-journal-cluster__subtitle {
  margin: 0 0 var(--gl-space-4) 0;
  font-size: var(--gl-text-lg);
  opacity: 0.95;
  line-height: var(--gl-leading-relaxed);
}

/* Info meta (jumlah jurnal, index, dsb.) */
.gl-journal-cluster__meta {
  font-size: var(--gl-text-sm);
  opacity: 0.9;
}

/* Kolom kanan: daftar jurnal sebagai pill card */
.gl-journal-cluster__journals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gl-space-3);
}

/* Card per-jurnal dalam cluster */
.gl-journal-cluster__journal {
  background: rgba(0, 0, 0, 0.10);
  border-radius: var(--gl-radius-md);
  padding: var(--gl-space-3) var(--gl-space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: var(--gl-transition);
}

.gl-journal-cluster__journal:hover {
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow-md);
}

/* Nama jurnal */
.gl-journal-cluster__journal-name {
  margin: 0 0 var(--gl-space-1) 0;
  font-size: var(--gl-text-md);
  font-weight: var(--gl-font-semibold);
  color: var(--gl-white);
}

/* Tagline / scope singkat */
.gl-journal-cluster__journal-scope {
  margin: 0;
  font-size: var(--gl-text-xs);
  opacity: 0.9;
}

/* Badge kecil indeks / kategori */
.gl-journal-cluster__journal-badges {
  margin-top: var(--gl-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gl-space-1);
}

.gl-journal-cluster__journal-badge {
  padding: 0.1rem 0.5rem;
  border-radius: var(--gl-radius-full);
  font-size: 0.65rem;
  font-weight: var(--gl-font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gl-tracking-wider);
  background: rgba(255, 255, 255, 0.10);
  color: var(--gl-white);
}

/* Varian warna badge indeks */
.gl-journal-cluster__journal-badge--sinta {
  background: var(--gl-teal);
}

.gl-journal-cluster__journal-badge--doaj {
  background: #F59E0B;
}

.gl-journal-cluster__journal-badge--garuda {
  background: #2563EB;
}

/* CTA di bawah cluster */
.gl-journal-cluster__cta {
  margin-top: var(--gl-space-4);
}

/* Responsif */
@media (max-width: 768px) {
  .gl-journal-cluster {
    grid-template-columns: 1fr;
    padding: var(--gl-space-5) var(--gl-space-4);
    gap: var(--gl-space-4);
  }

  .gl-journal-cluster__title {
    font-size: var(--gl-text-4xl);
  }

  .gl-journal-cluster__subtitle {
    font-size: var(--gl-text-md);
  }
}

/* Button di dalam journal cluster selalu putih */
.gl-journal-cluster .gl-btn--outline {
  color: var(--gl-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.gl-journal-cluster .gl-btn--outline:hover {
  color: var(--gl-white);
  border-color: var(--gl-white);
  background: rgba(255, 255, 255, 0.08);
}

.gl-journal-cluster__cta a {
  color: var(--gl-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.gl-journal-cluster__cta a:hover {
  color: var(--gl-white);
}

/* ========================================================================
45. RESPONSIVE EDITORIAL CARDS (Mobile Optimizations)
======================================================================== */

@media (max-width: 768px) {

  /* Nama editor mengecil */
  .gl-editorial-card__name {
    font-size: var(--gl-text-xl);
  }

  .gl-editorial-card--chief .gl-editorial-card__name {
    font-size: var(--gl-text-2xl);
  }

  .gl-editorial-card--senior .gl-editorial-card__name {
    font-size: var(--gl-text-xl);
  }

  /* Institusi & expertise lebih kecil sedikit */
  .gl-editorial-card__institution,
  .gl-editorial-card__expertise {
    font-size: var(--gl-text-xs);
  }

  /* ID badges boleh wrap + teks boleh turun baris */
  .gl-editorial-card__id-badges {
    flex-wrap: wrap;
    row-gap: var(--gl-space-2);
  }

  .gl-editorial-card__id-link {
    flex: 0 1 auto;
    min-width: 100px;
    white-space: normal;
  }
}

.gl-editorial-card__name {
  word-break: break-word;
}

/* ========================================================================
46. AUTHOR RESOURCES & DOWNLOAD CARDS
======================================================================== */

/* HEADER */
.gl-author-header {
    /* sekarang 1 warna deep teal, tanpa gradasi */
    background: #1E6B6D;
    color: var(--gl-white);
    padding: var(--gl-space-8) var(--gl-space-6);
    border-radius: var(--gl-radius-lg);
    margin-bottom: var(--gl-space-12);
    box-shadow: var(--gl-shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* efek highlight atas tetap boleh, bisa dihapus kalau mau flat total */
.gl-author-header::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.gl-author-header-title {
    position: relative;
    z-index: 1;
    font-size: var(--gl-text-7xl);
    font-weight: var(--gl-font-bold);
    letter-spacing: var(--gl-tracking-tight);
    margin: 0 0 var(--gl-space-4) 0;
    color: var(--gl-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.gl-author-header-subtitle {
    position: relative;
    z-index: 1;
    font-size: var(--gl-text-lg);
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--gl-leading-relaxed);
    opacity: 0.9;
    color: rgba(255,255,255,0.95);
}

/* INTRO BOX */
.gl-author-intro {
    background: var(--gl-white);
    border-radius: var(--gl-radius-md);
    border: 2px solid var(--gl-gray-200);
    border-top: 6px solid var(--gl-teal);
    padding: var(--gl-space-6);
    margin-bottom: var(--gl-space-8);
    box-shadow: var(--gl-shadow-sm);
    font-size: var(--gl-text-lg);
    line-height: var(--gl-leading-relaxed);

    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* RESOURCE CARDS */
.gl-author-grid {
    display: grid;
    gap: var(--gl-space-5);
    margin-bottom: var(--gl-space-8);
}

/* >>> gabungan definisi gl-author-card */
.gl-author-card {
    background: var(--gl-white);
    border-radius: var(--gl-radius-md);
    padding: var(--gl-space-6);
    box-shadow: var(--gl-shadow-md);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: var(--gl-transition);
    padding-bottom: calc(var(--gl-space-6) + 68px);
}

/* garis kiri default (teal, dioverride di varian) */
.gl-author-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--gl-gradient-teal);
    transition: var(--gl-transition);
}

/* HOVER GENERIC – hanya efek naik + shadow */
.gl-author-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gl-shadow-lg);
    border-color: transparent; /* warna diatur di varian */
}

/* HOVER SESUAI VARIAN WARNA */

/* Teal */
.gl-author-card--teal:hover {
    border-color: rgba(44, 123, 125, 0.30);
}
.gl-author-card--teal:hover::before {
    background: var(--gl-gradient-teal);
    width: 6px;
}

/* Gold/Bronze */
.gl-author-card--gold:hover {
    border-color: rgba(183, 138, 61, 0.30);
}
.gl-author-card--gold:hover::before {
    background: var(--gl-gradient-gold);
    width: 6px;
}

/* Blue */
.gl-author-card--blue:hover {
    border-color: rgba(0, 70, 168, 0.30);
}
.gl-author-card--blue:hover::before {
    background: linear-gradient(135deg, #3ba4ff 0%, #0046a8 100%);
    width: 6px;
}

/* Featured card (ISBN / Perpusnas) */
.gl-author-card--featured::before {
    background: var(--gl-gradient-gold);
}

.gl-author-card--featured {
    background: linear-gradient(
        135deg,
        rgba(183, 138, 61, 0.05) 0%,
        #ffffff 100%
    );
    border-color: rgba(183, 138, 61, 0.25);
}

.gl-author-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--gl-radius-md);
    background: var(--gl-gradient-teal);
    color: var(--gl-white);
    font-weight: var(--gl-font-bold);
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--gl-space-3);
}

/* Badge warna mengikuti tema card */
.gl-author-card--teal .gl-author-badge { background: var(--gl-gradient-teal); }
.gl-author-card--gold .gl-author-badge { background: var(--gl-gradient-gold); }
.gl-author-card--blue .gl-author-badge { background: linear-gradient(135deg, #3ba4ff 0%, #0046a8 100%); }

.gl-author-card-title {
    font-size: var(--gl-text-4xl);
    font-weight: var(--gl-font-bold);
    color: var(--gl-charcoal-dark);
    margin-bottom: var(--gl-space-3);
}

.gl-author-card-text {
    font-size: var(--gl-text-md);
    color: var(--gl-gray-text);
    line-height: var(--gl-leading-relaxed);
    margin-bottom: 0;
}

/* CONTACT BOX */
.gl-author-contact {
    background: var(--gl-teal-gradient-light);
    border-radius: var(--gl-radius-md);
    border: 2px solid rgba(44, 123, 125, 0.3);
    padding: var(--gl-space-6);
    text-align: center;
    font-size: var(--gl-text-md);
    line-height: var(--gl-leading-relaxed);
}

/* ========================================================================
46A. MODERN FLAT DOWNLOAD BUTTON (ICON PANEL BULAT)
======================================================================== */

.gl-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 999px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--gl-tracking-wide);
    font-weight: var(--gl-font-semibold);
    font-size: var(--gl-text-md);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
    position: relative;
    overflow: hidden;
    background: var(--gl-white);
    color: var(--gl-charcoal-dark);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Warna lembut mengikuti tema card – bukan blok gradasi penuh */
.gl-dl-btn--teal {
    background: linear-gradient(
        135deg,
        rgba(44, 123, 125, 0.06),
        rgba(44, 123, 125, 0.01)
    );
    border-color: rgba(44, 123, 125, 0.25);
    color: var(--gl-teal-dark);
}

.gl-dl-btn--gold {
    background: linear-gradient(
        135deg,
        rgba(183, 138, 61, 0.08),
        rgba(183, 138, 61, 0.02)
    );
    border-color: rgba(183, 138, 61, 0.30);
    color: var(--gl-gold-dark);
}

.gl-dl-btn--blue {
    background: linear-gradient(
        135deg,
        rgba(59, 164, 255, 0.08),
        rgba(0, 70, 168, 0.02)
    );
    border-color: rgba(0, 70, 168, 0.25);
    color: #0046a8;
}

.gl-dl-btn--dark {
    background: linear-gradient(
        135deg,
        rgba(42, 46, 48, 0.08),
        rgba(42, 46, 48, 0.02)
    );
    border-color: rgba(42, 46, 48, 0.25);
    color: var(--gl-charcoal-dark);
}

/* Highlight glossy lebih halus */
.gl-dl-btn::before {
    content: '';
    position: absolute;
    inset: 0 0 55% 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0) 80%
    );
    pointer-events: none;
    opacity: 0.7;
}

/* Area ikon di kiri – panel BULAT LINGKARAN */
.gl-dl-btn__icon-wrap {
    width: 64px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Background panel BULAT LINGKARAN (bukan kotak) */
.gl-dl-btn__icon-wrap::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.22) 75%
    );
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
}

/* ICON IMG (PNG/SVG via URL) – tidak diwarnai lagi lewat CSS */
.gl-dl-btn__icon-img {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    display: block;
}

/* Area teks di kanan */
.gl-dl-btn__label {
    padding: 0 28px 0 8px;
    height: 52px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.gl-dl-btn__text {
    position: relative;
    z-index: 1;
}

/* Hover: subtle, tidak melompat */
.gl-dl-btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
    background-color: rgba(255, 255, 255, 0.98);
}

/* Wrapper aksi di kanan bawah card (desktop) */
.gl-author-card-action {
    position: absolute;
    right: var(--gl-space-6);
    bottom: var(--gl-space-6);
}

/* Warna garis kiri card mengikuti tema tombol (default state) */
.gl-author-card--teal::before  { background: var(--gl-gradient-teal); }
.gl-author-card--gold::before  { background: var(--gl-gradient-gold); }
.gl-author-card--blue::before  { background: linear-gradient(135deg, #3ba4ff 0%, #0046a8 100%); }

/* TIMELINE (jika dipakai) */
.gl-author-timeline-panel {
    max-width: 1100px;
    margin: var(--gl-space-8) auto;
    background: var(--gl-gradient-white-gray);
    border-radius: var(--gl-radius-lg);
    border: 1px solid var(--gl-gray-200);
    box-shadow: var(--gl-shadow-md);
    padding: var(--gl-space-6) var(--gl-space-6) var(--gl-space-4);
}

.gl-author-timeline-item {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
    gap: var(--gl-space-5);
    padding: var(--gl-space-4) 0;
    border-bottom: 1px solid var(--gl-gray-200);
    position: relative;
}

.gl-author-timeline-item:last-child {
    border-bottom: none;
}

/* Garis vertikal timeline */
.gl-author-timeline-item::before {
    content: '';
    position: absolute;
    left: 88px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gl-gray-200);
}

/* Meta column (angka + label) */
.gl-author-timeline-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gl-space-2);
    max-width: 140px;
}

.gl-author-label {
    font-size: var(--gl-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--gl-tracking-wide);
    color: var(--gl-gray-text);
    line-height: 1.3;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .gl-author-card {
        padding: var(--gl-space-5);
        padding-bottom: var(--gl-space-5);
    }

    .gl-author-card .gl-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gl-space-3);
    }

    .gl-author-badge {
        width: 40px;
        height: 40px;
        font-size: var(--gl-text-lg);
        margin-bottom: var(--gl-space-2);
    }

    .gl-author-card-title {
        font-size: var(--gl-text-3xl);
    }

    .gl-author-card-action {
        position: static;
        width: 100%;
        margin-top: var(--gl-space-3);
        display: flex;
        justify-content: center;
    }

    .gl-dl-btn {
        width: auto;
        justify-content: flex-start;
    }
}

/* FOOTER CONTACT LAYOUT */
.gl-author-contact {
    background: var(--gl-teal-gradient-light);
    border-radius: var(--gl-radius-md);
    border: 2px solid rgba(44, 123, 125, 0.3);
    padding: var(--gl-space-4) var(--gl-space-6);
    font-size: var(--gl-text-md);
    line-height: var(--gl-leading-relaxed);
}

/* Baris isi: icon + teks */
.gl-author-contact .gl-flex {
    text-align: left;              /* teks rata kiri di dalam baris flex */
}

/* Icon di footer contact */
.gl-contact-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(44, 123, 125, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;                /* icon tidak mengecil saat sempit */
}

.gl-contact-icon-img {
    width: 18px;
    height: 18px;
    display: block;
}

/* Badge COPE bergaya tombol kapsul */
.gl-cope-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gl-space-2);
    padding: var(--gl-space-2) var(--gl-space-4);
    border-radius: 999px;
    background: #1E9D8A;                       /* teal solid */
    color: #FFFFFF;
    font-size: var(--gl-text-xs);
    font-weight: var(--gl-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--gl-tracking-wide);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Panel ikon kiri, mirip tombol download */
.gl-cope-badge {
    display: inline-flex;
    align-items: center;                 /* pusat vertikal */
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 1.6rem;              /* sedikit lebih tipis */
    border-radius: 999px;
    background: #1E9D8A;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: var(--gl-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--gl-tracking-wide);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    line-height: 1;                      /* penting: supaya teks center */
}

/* Icon bulat */
.gl-cope-icon-wrap {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gl-cope-icon {
    width: 13px;
    height: 13px;
    display: block;
}

.gl-cope-text {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   48. HOMEPAGE - SIMPLE BUT STUNNING (4 BOXES - FINAL)
   Design LOCKED - Do Not Modify Structure
   ════════════════════════════════════════════════════════════════ */

/* Hero Motto Section (UNCHANGED) */
.gl-hero-motto {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.gl-hero-motto::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(32, 178, 170, 0.03) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.gl-motto-accent-line {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--gl-teal, #20b2aa) 50%, transparent 100%);
  margin: 0 auto 1.5rem auto;
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

.gl-motto-text {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.gl-motto-tagline {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #475569;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Four Pillars Grid - LOCKED DESIGN */
.gl-pillars-grid-four {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .gl-pillars-grid-four {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Pillar Card (UNCHANGED) */
.gl-pillar-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
}

.gl-pillar-card:hover {
  border-color: var(--gl-teal, #20b2aa);
  box-shadow: 0 12px 28px rgba(32, 178, 170, 0.15);
  transform: translateY(-6px);
}

/* Accent Card (for Ethics - card 3) */
.gl-pillar-card--accent {
  border: 2px solid var(--gl-teal, #20b2aa);
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfc 100%);
}

.gl-pillar-card--accent:hover {
  box-shadow: 0 12px 28px rgba(32, 178, 170, 0.25);
}

/* Pillar Number (UNCHANGED) */
.gl-pillar-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gl-teal, #20b2aa);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Pillar Title (UNCHANGED) */
.gl-pillar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

/* Pillar Text (UNCHANGED) */
.gl-pillar-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* COPE Badge (UNCHANGED) */
.gl-cope-badge {
  display: inline-block;
  background: var(--gl-teal, #20b2aa);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-top: 1rem;
}

/* Simple CTA Section (UNCHANGED) */
.gl-simple-cta {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #0f172a;
  border-radius: 12px;
  margin-top: 3rem;
}

.gl-cta-question {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
}

.gl-btn-cta {
  display: inline-block;
  background: var(--gl-teal, #20b2aa);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.gl-btn-cta:hover {
  background: #1a9d96;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(32, 178, 170, 0.4);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .gl-motto-text {
    font-size: 1.5rem;
  }
  
  .gl-motto-tagline {
    font-size: 1rem;
  }
  
  .gl-pillar-number {
    font-size: 2.5rem;
  }
}

/* Memaksa URL panjang di daftar referensi agar turun ke baris baru */
.item.references,
.item.references p,
.item.references a,
.value.references {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
}

/* ========================================================================
49. WHATSAPP CONFIRMATION BUTTON (PAYMENT PAGE)
======================================================================== */

.gl-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #25D366;
  color: #ffffff;
  padding: 14px 36px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap; /* KUNCI UTAMA: Memaksa teks selalu 1 baris */
}

.gl-btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
  color: #ffffff;
}

.gl-btn-wa img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  display: block;
}

/* Responsivitas untuk layar HP */
@media (max-width: 480px) {
  .gl-btn-wa {
    padding: 12px 14px; /* Padding dikurangi sedikit agar proporsional di layar HP kecil */
    font-size: 13px; /* Ukuran font mengecil otomatis */
    gap: 8px; /* Jarak ikon dan teks merapat */
    width: 100%;
  }
  
  .gl-btn-wa img {
    width: 18px;
    height: 18px;
  }
}

/* Container Hero Author Resources - Sinkron dengan Brand Teal */
.gl-content .gl-author-hero-teal {
    background-color: #1E6B6D; /* Sesuai variabel --gl-teal-dark */
    background-image: none;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 3rem;
    box-shadow: var(--gl-shadow-md);
}

/* Garis Aksen Pudar (Efek Glow di Tengah) */
.gl-author-hero-teal .gl-motto-accent-line {
    /* Gradasi: Transparan -> Putih -> Transparan */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    height: 3px;
    width: 120px; /* Sedikit lebih lebar agar pudarannya terlihat mewah */
    margin: 0 auto 25px auto;
    border-radius: 99px;
}

/* Teks Tagline - Putih penuh */
.gl-author-hero-teal .gl-motto-tagline {
    color: #ffffff;
    opacity: 1;
    line-height: 1.8;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 500;
}