/**
* ========================================================================
* LITERATI GLOBAL NETWORK - 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.com/books
* Last Updated: March 4, 2026
* Version: 3.1 (Fixed Sequential Numbering)
* Total Sections: 50 (Complete, Ready for CloudPanel Nginx)
* ========================================================================
*/

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

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

/* ========================================================================
   50. MOBILE HEADER LOGO ADJUSTMENT (Custom Fix)
   ======================================================================== */

@media screen and (max-width: 768px) {
    /* Memaksa kontainer logo menjadi flex agar posisi vertikal senter otomatis */
    .pkp_structure_head .pkp_site_name,
    .pkp_structure_head .pkp_site_name .is_img {
        display: inline-flex;
        align-items: center;
        height: 100%;
        margin: 0;
    }

    /* Logo mengikuti batas kontainer (object-fit) dan ukuran dipresisikan */
    .pkp_structure_head .pkp_site_name a img,
    .pkp_structure_head .pkp_site_name .is_img img {
        max-height: 42px; /* Ukuran ini sejajar sempurna dengan tinggi ikon hamburger menu */
        max-width: 100%;
        width: auto;
        object-fit: contain; /* Mengunci agar logo tidak tertarik/keluar garis */
        margin: 0;
    }

    /* Padding diseimbangkan agar ruang kotak header proporsional */
    .pkp_structure_head {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}