/* ==========================================================================
   COMPANY PROFILE CMS — PREMIUM DESIGN SYSTEM
   Version 5.0 | Dark & Light Mode | CSS Custom Properties
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   Ubah variabel di sini untuk mengubah seluruh tema website.
   -------------------------------------------------------------------------- */
:root {
  /* — Brand Colors — */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* — Accent Color — */
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #d97706;

  /* — Success / Error — */
  --color-success: #10b981;
  --color-error: #ef4444;

  /* — Light Mode Surfaces — */
  --bg-body: #ffffff;
  --bg-section: #f8fafc;
  --bg-section-alt: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-footer: #0f172a;
  --bg-input: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-badge: #eff6ff;

  /* — Light Mode Text — */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;
  --text-link: var(--color-primary);

  /* — Light Mode Borders — */
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --border-color-hover: var(--color-primary-200);

  /* — Shadows — */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.08), 0 4px 10px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.1), 0 8px 16px -6px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 16px 40px -5px rgba(0,0,0,0.1), 0 6px 12px -4px rgba(0,0,0,0.05);

  /* — Typography — */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* — Spacing & Layout — */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --section-padding: 7rem;
  --section-padding-sm: 4rem;
  --header-height: 72px;

  /* — Border Radius — */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* — Transitions — */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — Overlay — */
  --overlay-color: rgba(15, 23, 42, 0.6);
}

/* --------------------------------------------------------------------------
   2. DARK MODE VARIABLES
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-body: #0b1120;
  --bg-section: #111827;
  --bg-section-alt: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #263548;
  --bg-header: rgba(11, 17, 32, 0.9);
  --bg-footer: #050a15;
  --bg-input: #1e293b;
  --bg-elevated: #1e293b;
  --bg-subtle: #1e293b;
  --bg-badge: rgba(37, 99, 235, 0.15);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0f172a;

  --border-color: #334155;
  --border-color-light: #1e293b;
  --border-color-hover: var(--color-primary);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.3), 0 4px 10px -4px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.4), 0 8px 16px -6px rgba(0,0,0,0.2);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-card-hover: 0 16px 40px -5px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(0,0,0,0.2);

  --overlay-color: rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   3. BASE / RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.7;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: 3.5rem;
}

.section-header.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--section-padding) 0;
  background-color: var(--bg-section-alt);
  transition: background-color var(--transition-slow);
}

.section--alt {
  background-color: var(--bg-section);
}

.section--dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f1f5f9;
}

.section--dark .section-title {
  color: #f1f5f9;
}

.section--dark .section-subtitle {
  color: #94a3b8;
}

/* Grid */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  :root {
    --section-padding: 4rem;
    --container-padding: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--bg-header);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

/* Logo + site name lockup (header & footer) */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  text-decoration: none;
}

.brand-lockup img {
  height: 44px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-lockup .brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13rem;
}

/* Tight zone: nav links need the room, and the logo already carries the brand */
@media (min-width: 768px) and (max-width: 1100px) {
  .site-header .brand-lockup.has-logo .brand-name {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand-lockup img {
    height: 34px;
    max-width: 104px;
  }

  .brand-lockup .brand-name {
    font-size: 0.9375rem;
    max-width: 40vw;
  }
}

/* Footer variant sits on the dark footer surface */
.footer-brand {
  margin-bottom: 1rem;
}

.footer-brand img {
  height: 36px;
  max-width: 140px;
}

.footer-brand .brand-name {
  font-size: 1.25rem;
  color: #f1f5f9;
  max-width: 16rem;
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

[data-theme="dark"] .nav-link:hover {
  background-color: rgba(37, 99, 235, 0.1);
}

.nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

/* Nav Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
}

.nav-dropdown.show,
.group:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-dropdown a:hover {
  color: var(--color-primary);
  background: var(--bg-subtle);
}

/* Language switcher options (button elements, not <a>) */
.nav-dropdown .language-option {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-dropdown .language-option img {
  flex-shrink: 0;
}

.nav-dropdown .language-option:hover {
  color: var(--color-primary);
  background: var(--bg-subtle);
}

/* Long language lists must not run off the viewport */
#language-dropdown {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

#language-dropdown::-webkit-scrollbar {
  width: 6px;
}

#language-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

#language-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

#language-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   7. DARK MODE TOGGLE
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--bg-subtle);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--color-primary-200);
}

.theme-toggle .toggle-thumb {
  position: absolute;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  transition: transform var(--transition-spring);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle .toggle-thumb i {
  font-size: 10px;
  color: white;
}

[data-theme="dark"] .theme-toggle {
  background: var(--bg-subtle);
  border-color: var(--border-color);
}

[data-theme="dark"] .theme-toggle .toggle-thumb {
  transform: translateX(22px);
  background: var(--color-accent);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.mobile-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

@media (min-width: 768px) {
  .mobile-menu-button {
    display: none !important;
  }
}

.mobile-menu-button:hover {
  background: var(--bg-subtle);
}

/* --------------------------------------------------------------------------
   7b. FORM STYLES
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-input, var(--bg-card));
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

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

/* --------------------------------------------------------------------------
   8. HERO SECTION
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 80vh;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  line-height: 1.7;
  max-width: 600px;
}

.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-gradient-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.hero-particles::before,
.hero-particles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  animation: particleFloat 15s ease-in-out infinite;
}

.hero-particles::before {
  width: 500px;
  height: 500px;
  background: var(--color-primary);
  top: -150px;
  right: -100px;
}

.hero-particles::after {
  width: 400px;
  height: 400px;
  background: var(--color-accent);
  bottom: -100px;
  left: -100px;
  animation-delay: -7s;
  animation-duration: 18s;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.8125rem 2rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-50);
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(37, 99, 235, 0.1);
}

.btn-white {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
}

.btn-white:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.btn-sm {
  font-size: 0.8125rem;
  padding: 0.5rem 1.25rem;
}

.btn-lg {
  font-size: 1rem;
  padding: 1rem 2.5rem;
}

.btn i,
.btn svg {
  transition: transform var(--transition-fast);
}

.btn:hover i,
.btn:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
}

.card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card-img {
  transform: scale(1.04);
}

.card-img-wrapper {
  overflow: hidden;
  position: relative;
}

.card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card:hover .card-img-overlay {
  opacity: 1;
}

.card-body {
  padding: 1.75rem;
}

.card-category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.625rem;
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.card:hover .card-title,
a.card:hover .card-title {
  color: var(--color-primary);
}

.card-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 1.25rem;
  transition: gap var(--transition-fast);
}

.card:hover .card-link {
  gap: 0.75rem;
}

/* Card variants */
.card--flat {
  box-shadow: none;
  border: 1px solid var(--border-color);
}

.card--flat:hover {
  box-shadow: var(--shadow-lg);
}

.card--product .card-img-wrapper {
  aspect-ratio: 1;
}

.card--product .card-img {
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   11. STATS / COUNTERS
   -------------------------------------------------------------------------- */
.stat-item {
  text-align: center;
  padding: 2rem 1rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.625rem;
}

.stat-number .stat-suffix {
  color: var(--color-primary);
}

.stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   12. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: all var(--transition-base);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.testimonial-card::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary-100);
  position: absolute;
  top: 1rem;
  left: 1.5rem;
}

[data-theme="dark"] .testimonial-card::before {
  color: rgba(37, 99, 235, 0.12);
}

.testimonial-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.testimonial-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.125rem;
}

[data-theme="dark"] .testimonial-avatar-placeholder {
  background: rgba(37, 99, 235, 0.15);
}

.testimonial-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.testimonial-position {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1.25rem;
}

.stars i {
  font-size: 0.8125rem;
}

.stars .filled {
  color: var(--color-accent);
}

.stars .empty {
  color: var(--border-color);
}

/* --------------------------------------------------------------------------
   13. TEAM MEMBERS
   -------------------------------------------------------------------------- */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  text-align: center;
}

.team-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.team-card .team-photo {
  aspect-ratio: 1;
  overflow: hidden;
}

.team-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-photo img {
  transform: scale(1.05);
}

.team-card .team-info {
  padding: 1.5rem;
}

.team-card .team-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.team-card .team-position {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 500;
}

.team-social {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.team-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  transition: all var(--transition-fast);
}

.team-social a:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   14. ICON BOX
   -------------------------------------------------------------------------- */
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: all var(--transition-base);
}

.icon-box i {
  font-size: 1.375rem;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.card:hover .icon-box {
  background: var(--color-primary);
}

.card:hover .icon-box i {
  color: white;
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-footer);
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
}

.footer-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.footer-link {
  display: block;
  color: #94a3b8;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all var(--transition-base);
}

.footer-social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2rem;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p,
.footer-bottom a {
  font-size: 0.875rem;
  color: #64748b;
}

.footer-bottom a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   16. PAGE HERO (Inner Pages)
   -------------------------------------------------------------------------- */
.page-hero {
  min-height: 45vh;
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.56s; }

/* --------------------------------------------------------------------------
   18. FORM ELEMENTS
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

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

/* --------------------------------------------------------------------------
   19. BADGE / TAG
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-badge);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.badge--success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.badge--error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
}

.badge--accent {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   20. PRICE
   -------------------------------------------------------------------------- */
.price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.25rem;
}

.price-original {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-weight: 400;
}

.price-discount {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   21. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.breadcrumb a {
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .separator {
  font-size: 0.625rem;
}

.breadcrumb .current {
  color: var(--text-primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   22. CTA SECTION
   -------------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-dark) 50%, #1e3a5f 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
}

.cta-section .section-title {
  color: #ffffff;
}

.cta-section .section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   23. PAGINATION
   -------------------------------------------------------------------------- */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.pagination-wrapper .pagination {
  display: flex;
  gap: 0.375rem;
}

.pagination-wrapper .page-link {
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.pagination-wrapper .page-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-wrapper .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* --------------------------------------------------------------------------
   24. MOBILE MENU
   -------------------------------------------------------------------------- */
.mobile-nav {
  background: var(--bg-body);
  border-top: 1px solid var(--border-color);
  padding: 1rem;
}

.mobile-nav a,
.mobile-nav button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.mobile-nav a:hover,
.mobile-nav button:hover {
  background: var(--bg-subtle);
  color: var(--color-primary);
}

.mobile-nav a.active {
  background: var(--bg-badge);
  color: var(--color-primary);
  font-weight: 600;
}

/* Panel lives inside the fixed header, so it needs its own scroll container */
.mobile-menu {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-body);
  box-shadow: var(--shadow-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.mobile-menu::-webkit-scrollbar {
  width: 6px;
}

.mobile-menu::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-menu::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

/* Language list can hold 100+ entries — keep it scrollable inside the panel */
.mobile-lang-dropdown {
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.mobile-lang-dropdown::-webkit-scrollbar {
  width: 6px;
}

.mobile-lang-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-lang-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   25. CONTENT AREA (Article body, rich text)
   -------------------------------------------------------------------------- */
.content-area h1, .content-area h2, .content-area h3,
.content-area h4, .content-area h5, .content-area h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--text-primary);
}

.content-area h1 { font-size: 2.25rem; border-bottom: 3px solid var(--color-primary); padding-bottom: 0.5rem; }
.content-area h2 { font-size: 1.875rem; border-bottom: 2px solid var(--color-primary-200); padding-bottom: 0.4rem; }
.content-area h3 { font-size: 1.5rem; color: var(--color-primary); }
.content-area h4 { font-size: 1.25rem; }

.content-area p {
  margin-bottom: 1.25em;
  line-height: 1.85;
  color: var(--text-secondary);
}

.content-area > p:first-of-type {
  font-size: 1.125rem;
  color: var(--text-primary);
}

.content-area ul, .content-area ol {
  margin: 1em 0 1.5em;
  padding-left: 2em;
  line-height: 1.85;
}

.content-area ul { list-style-type: disc; }
.content-area ol { list-style-type: decimal; }
.content-area ul ul { list-style-type: circle; }
.content-area ol ol { list-style-type: lower-alpha; }

.content-area li {
  margin-bottom: 0.5em;
  color: var(--text-secondary);
}

.content-area strong, .content-area b {
  font-weight: 600;
  color: var(--text-primary);
}

.content-area a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-area a:hover {
  color: var(--color-primary-dark);
}

.content-area blockquote {
  margin: 2em 0;
  padding: 1.5em 2em;
  border-left: 4px solid var(--color-primary);
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-secondary);
}

.content-area blockquote p {
  margin-bottom: 0;
  color: inherit;
}

.content-area code {
  background: var(--bg-subtle);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: var(--font-mono);
  color: var(--color-primary);
}

.content-area pre {
  background: #1e293b;
  color: #f1f5f9;
  padding: 1.5em;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 2em 0;
}

.content-area pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.content-area img {
  border-radius: var(--radius-md);
  margin: 2em 0;
  box-shadow: var(--shadow-md);
}

.content-area table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.content-area table th {
  background: var(--bg-subtle);
  padding: 0.75em 1em;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

.content-area table td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.content-area table tr:hover {
  background: var(--bg-subtle);
}

.content-area hr {
  border: none;
  border-top: 2px solid var(--border-color);
  margin: 3em 0;
}

/* --------------------------------------------------------------------------
   26. CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   27. GALLERY
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay-text {
  color: white;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   28. UTILITY CLASSES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary-color { color: var(--color-primary); }
.text-secondary-color { color: var(--text-secondary); }
.text-muted { color: var(--text-tertiary); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.w-full { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   29. RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .stat-number {
    font-size: 2.25rem;
  }

  .card-body {
    padding: 1.25rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .mobile-menu-button {
    display: block !important;
  }

  .nav-desktop {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   30. GOOGLE TRANSLATE (keep hidden)
   -------------------------------------------------------------------------- */
.goog-te-banner-frame { display: none !important; visibility: hidden !important; }
body { top: 0 !important; position: static !important; }
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-logo-link { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body.translated-ltr, body.translated-rtl { margin-top: 0 !important; }
.VIpgJd-ZVi9od-ORHb-OEVmcd { z-index: 0 !important; }

.translation-loading {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--overlay-color); color: white;
  padding: 20px 28px; border-radius: var(--radius-md);
  z-index: 9999; display: none;
  backdrop-filter: blur(8px);
  font-size: 0.9375rem;
}
.translation-loading.show { display: flex; align-items: center; gap: 12px; }

.language-active {
  background-color: var(--bg-badge) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   31. SMOOTH PAGE TRANSITION
   -------------------------------------------------------------------------- */
.page-transition {
  animation: pageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-section) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   32. FORM ELEMENTS
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  outline: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

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

/* --------------------------------------------------------------------------
   33. BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--bg-badge);
  color: var(--color-primary);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

/* --------------------------------------------------------------------------
   34. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .separator {
  font-size: 0.5rem;
  color: var(--text-tertiary);
}

.breadcrumb .current {
  color: var(--color-primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   35. PRICING
   -------------------------------------------------------------------------- */
.price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.125rem;
}

.price-discount {
  color: var(--color-primary);
}

.price-original {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  text-decoration: line-through;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   36. GALLERY ITEMS
   -------------------------------------------------------------------------- */
.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   37. LINE-CLAMP UTILITIES
   -------------------------------------------------------------------------- */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   38. PAGINATION
   -------------------------------------------------------------------------- */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Paginasi publik.

   Aturan lama menyasar seluruh <a> dan <span> di dalam .pagination-wrapper,
   sehingga angka di dalam kalimat "Menampilkan 1 sampai 9" ikut mendapat kotak
   40x40 dan tampil berantakan. Sekarang hanya elemen ber-kelas .pagination-item
   yang dibentuk, jadi teks biasa tetap menjadi teks biasa. */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  margin-top: 3rem;
}

.pagination-wrapper .pagination {
  margin-top: 0;
}

.pagination-summary {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast);
}

a.pagination-item:hover {
  color: var(--color-primary);
  background: var(--bg-badge);
  border-color: var(--color-primary);
}

a.pagination-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination-item.is-active {
  color: var(--text-on-primary, #ffffff);
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.pagination-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination-item i {
  font-size: 0.75rem;
}

.pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 40px;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

/* Di layar sempit, ringkasan disembunyikan dan tombol dirapatkan supaya
   seluruh nomor halaman tetap muat tanpa menggeser tata letak. */
@media (max-width: 480px) {
  .pagination-summary {
    display: none;
  }

  .pagination-item {
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
  }
}


/* --------------------------------------------------------------------------
   38b. KARTU PRODUK (daftar)

   Versi sebelumnya memakai .card--product dengan gambar persegi, padding
   1.25rem, dan tiga sampai empat tombol lebar bertumpuk. Satu kartu bisa
   setinggi hampir seluruh layar, sehingga hanya empat produk terlihat
   sekaligus. Di sini gambar dibuat 4:3, jarak dirapatkan, dan tautan
   marketplace diringkas menjadi ikon dalam satu baris.
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-color-hover);
}

.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-subtle);
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.product-card:hover .product-card-media img {
  transform: scale(1.04);
}

.product-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  color: var(--text-tertiary);
}

.product-card-badges {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  border-radius: var(--radius-sm);
}

.product-badge.is-featured { background: var(--color-primary); }
.product-badge.is-discount { background: var(--color-accent); }
.product-badge.is-empty    { background: var(--text-tertiary); }

.product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem 0.875rem;
}

.product-card-category {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.product-card-title a:hover { color: var(--color-primary); }

.product-card-desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.product-card-price .price { font-size: 1rem; }
.product-card-price .price-original { font-size: 0.75rem; }

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.product-card-meta .is-empty { color: var(--color-error); }

/* Didorong ke dasar kartu agar seluruh tombol sejajar antarkartu meskipun
   panjang judul dan deskripsinya berbeda. */
.product-card-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.625rem;
}

.product-card-cta {
  flex: 1;
  min-width: 0;
  height: 32px;
  font-size: 0.75rem;
}

.product-card-links {
  display: flex;
  gap: 0.25rem;
}

.product-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.product-card-link:hover {
  background: var(--bg-subtle);
  border-color: var(--border-color-hover);
}

/* Di layar sempit kartu tetap dua kolom, tetapi tautan marketplace dipangkas
   agar tombol utama tidak terhimpit. */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .product-card-body { padding: 0.625rem 0.6875rem 0.75rem; }
  .product-card-desc { display: none; }
  .product-card-link:nth-of-type(n + 3) { display: none; }
}


/* --------------------------------------------------------------------------
   38c. BILAH PENCARIAN PRODUK

   Menggantikan panel filter empat kolom yang sebelumnya selalu terbuka dan
   memakan hampir sepertiga layar. Polanya mengikuti marketplace: kolom cari
   memanjang, filter lanjutan disembunyikan di balik satu tombol ikon.
   -------------------------------------------------------------------------- */

/* Tanpa ini panel filter sempat terlihat sekejap sebelum Alpine dimuat. */
[x-cloak] {
  display: none !important;
}

.search-bar {
  margin-bottom: 1.5rem;
  padding: 0.625rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.search-bar-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-field > i {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  height: 42px;
  padding: 0 0.875rem 0 2.375rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-field input::placeholder { color: var(--text-tertiary); }

.search-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--bg-badge);
}

.search-field input::-webkit-search-cancel-button { cursor: pointer; }

.filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast);
}

.filter-toggle:hover,
.filter-toggle.is-open {
  color: var(--color-primary);
  background: var(--bg-badge);
  border-color: var(--color-primary);
}

/* Jumlah filter yang sedang aktif, supaya tetap terbaca walau panel tertutup. */
.filter-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: var(--color-accent);
  border-radius: 9999px;
}

.search-submit {
  flex-shrink: 0;
  height: 42px;
  padding: 0 1.125rem;
}

.filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.625rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.filter-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Tinggi dipendekkan menjadi 38px, tetapi padding bawaannya (0.75rem atas dan
   bawah) harus ikut dikecilkan. Tanpa itu ruang untuk teks tersisa sekitar
   14px sementara barisnya sendiri butuh lebih, sehingga tulisan di dalam
   dropdown terpotong separuh. */
.filter-field .form-input,
.filter-field .form-select {
  height: 38px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 36px;
}

/* Ruang di kanan disisakan untuk ikon panah yang digambar sebagai
   background-image pada .form-select. */
.filter-field .form-select {
  padding-right: 2.25rem;
}

.filter-range {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.filter-range span { color: var(--text-tertiary); }

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.filter-actions .btn { height: 38px; }

@media (max-width: 640px) {
  /* Teks tombol dilepas agar ketiganya tetap muat dalam satu baris. */
  .search-submit span { display: none; }
  .search-submit { padding: 0; width: 42px; }
  .filter-panel { grid-template-columns: 1fr; }
  .filter-actions { align-items: stretch; }
  .filter-actions .btn { flex: 1; }
}


/* --------------------------------------------------------------------------
   38d. GALERI

   Kartu galeri dan lightbox yang menangani foto sekaligus video. Sebelumnya
   tombol play pada video hanyalah <div> hiasan tanpa aksi, sehingga video
   tidak bisa diputar dari halaman daftar sama sekali.
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-color-hover);
}

/* Seluruh permukaan gambar adalah tombol, bukan hanya ikon kecil di tengah. */
.gallery-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 0;
  cursor: pointer;
}

.gallery-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-card:hover .gallery-card-media img { transform: scale(1.05); }

.gallery-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  color: var(--text-tertiary);
}

.gallery-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.gallery-card:hover .gallery-card-scrim { opacity: 1; }

.gallery-card-action {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  color: #111827;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.gallery-card:hover .gallery-card-action,
.gallery-card-media:focus-visible .gallery-card-action {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Item video menampilkan tanda putar sejak awal, jadi terlihat bahwa isinya
   memang bisa diputar tanpa perlu menyorotnya lebih dulu. */
.gallery-card-media[aria-label^="Putar"] .gallery-card-action {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gallery-card-tags {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gallery-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  border-radius: var(--radius-sm);
}

.gallery-tag.is-featured { background: var(--color-accent); }

.gallery-card-body {
  padding: 0.75rem 0.875rem 0.875rem;
}

.gallery-card-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-card-title a { color: var(--text-primary); text-decoration: none; }
.gallery-card-title a:hover { color: var(--color-primary); }

.gallery-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

/* ---------- Lightbox ---------- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 7, 18, 0.92);
}

.gallery-lightbox.is-open { display: flex; }

.gallery-lightbox-inner {
  width: 100%;
  max-width: 1100px;
}

.gallery-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 76vh;
}

.gallery-lightbox-stage img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Rasio 16:9 dijaga lewat pembungkus agar iframe tidak gepeng di layar mana pun. */
.gallery-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 76vh;
  background: #000000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gallery-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.875rem;
  color: #ffffff;
}

.gallery-lightbox-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.gallery-lightbox-caption {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.gallery-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 1.125rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.gallery-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .gallery-card-body { padding: 0.625rem 0.6875rem 0.75rem; }
  .gallery-lightbox { padding: 0.75rem; }
  .gallery-lightbox-bar { flex-direction: column; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   38e. KARTU LOWONGAN

   Sebelumnya tiap lowongan berupa baris selebar layar dengan padding 2rem dan
   dua tombol besar di kanan, sehingga daftar panjang terasa melelahkan. Bentuk
   grid ini menampung jauh lebih banyak posisi dalam satu layar.
   -------------------------------------------------------------------------- */
.job-count {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.job-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.job-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-color-hover);
}

.job-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.job-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
}

.job-chip.is-type {
  color: var(--color-primary);
  background: var(--bg-badge);
  border-color: transparent;
}

.job-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.job-card-title a { color: var(--text-primary); text-decoration: none; }
.job-card-title a:hover { color: var(--color-primary); }

.job-card-dept {
  margin: -0.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.job-card-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card-facts {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin: 0.125rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.job-card-facts li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.job-card-facts i {
  width: 13px;
  text-align: center;
  color: var(--text-tertiary);
}

/* Tenggat yang tinggal dua minggu ditandai, supaya pelamar tidak melewatkannya. */
.job-card-facts .is-urgent {
  color: var(--color-accent);
  font-weight: 600;
}

/* Didorong ke dasar agar tombol sejajar antarkartu meski panjang teksnya beda. */
.job-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.job-card-actions .btn { flex: 1; height: 34px; font-size: 0.8125rem; }

@media (max-width: 640px) {
  .job-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   38f. BERANDA

   Desain ulang beranda. Sebelumnya delapan seksi memakai pola yang persis
   sama: label tengah, judul tengah, subjudul tengah, grid tiga kolom, tombol
   tengah. Berulang delapan kali tanpa jeda visual, halaman terasa seperti
   templat generik.

   Di sini ritmenya dipecah: kepala seksi rata kiri dengan tautan di kanan,
   susunan bento untuk layanan, tata letak berselang-seling untuk proyek, dan
   kolom judul yang menempel untuk keunggulan.

   Seluruh warna dekoratif diambil dari variabel tema, sehingga tetap dapat
   disetel lewat /admin/theme-settings.
   -------------------------------------------------------------------------- */

/* ---------- Latar dekoratif ---------- */

/* Cahaya lembut di belakang seksi. Dipasang pada elemen berposisi relatif dan
   tidak menangkap klik, jadi aman ditumpuk di atas konten apa pun. */
/* Cahaya lembut di belakang seksi.

   Digambar sebagai background-image, bukan pseudo-element ber-z-index negatif.
   Versi sebelumnya memakai ::before di dalam stacking context tersendiri
   (isolation: isolate). Pada seksi yang pendek, lingkaran 760px itu meluber
   jauh ke bawah lalu terpotong rata persis di batas seksi, sehingga muncul
   garis horizontal yang terlihat jelas di halaman blog.

   Sebagai background, cahayanya otomatis terkurung di kotak seksi tanpa perlu
   overflow: hidden, yang penting karena beberapa seksi memuat kolom
   position: sticky dan akan rusak bila induknya dipotong. */
.has-glow {
  position: relative;
  background-repeat: no-repeat;
}

.has-glow--tr {
  background-image: radial-gradient(circle 460px at 88% 0%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 15%, transparent), transparent 70%);
}

.has-glow--tl {
  background-image: radial-gradient(circle 460px at 12% 0%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 15%, transparent), transparent 70%);
}

.has-glow--bl {
  background-image: radial-gradient(circle 460px at 10% 100%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 15%, transparent), transparent 70%);
}

[data-theme="dark"] .has-glow--tr {
  background-image: radial-gradient(circle 460px at 88% 0%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 24%, transparent), transparent 70%);
}

[data-theme="dark"] .has-glow--tl {
  background-image: radial-gradient(circle 460px at 12% 0%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 24%, transparent), transparent 70%);
}

[data-theme="dark"] .has-glow--bl {
  background-image: radial-gradient(circle 460px at 10% 100%,
    color-mix(in srgb, var(--color-glow, #3b82f6) 24%, transparent), transparent 70%);
}

/* Peramban lama tanpa color-mix tetap mendapat latar polos, bukan gradien rusak. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .has-glow--tr, .has-glow--tl, .has-glow--bl { background-image: none; }
}

/* Garis kisi tipis. Memberi kesan ruang tanpa perlu berkas gambar. */
.has-grid {
  position: relative;
  isolation: isolate;
}

.has-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- Kepala seksi rata kiri ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.section-head-text { max-width: 620px; }

.section-head .section-title { margin-bottom: 0.5rem; }
.section-head .section-subtitle { margin: 0; }

/* Tautan "lihat semua" yang mendampingi judul, bukan tombol besar di bawah
   grid seperti sebelumnya. */
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.section-link:hover {
  gap: 0.75rem;
  border-bottom-color: var(--color-primary);
}

/* ---------- Tentang kami: dua kolom tidak simetris ---------- */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.about-figure {
  position: relative;
  border-radius: var(--radius-xl, 1.25rem);
  overflow: visible;
}

.about-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* Bidang warna di belakang foto, digeser sedikit supaya gambar terasa
   berlapis alih-alih menempel rata di halaman. */
.about-figure::before {
  content: '';
  position: absolute;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  z-index: -1;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-gradient-via, #2563eb), var(--color-gradient-from, #1e3a8a));
  opacity: 0.16;
}

/* Kartu angka yang menumpang di sudut foto. */
.about-badge {
  position: absolute;
  right: -1.25rem;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-badge-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
}

.about-badge-label {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-secondary);
  max-width: 96px;
}

.about-points {
  display: grid;
  gap: 0.75rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.about-points i {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-success, #10b981);
}

/* ---------- Statistik ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3.5rem;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-cell {
  padding: 1.75rem 1.25rem;
  background: var(--bg-card);
}

.stat-cell-value {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stat-cell-value span { color: var(--color-primary); }

.stat-cell-label {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* ---------- Layanan: susunan bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.bento-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: 1.375rem;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  isolation: isolate;
}

/* Item pertama dibuat dua kali lebih besar supaya grid tidak terbaca sebagai
   deretan kotak seragam. */
.bento-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 476px;
}

.bento-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-item:hover .bento-media { transform: scale(1.05); }

.bento-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.9) 8%, rgba(3, 7, 18, 0.35) 52%, rgba(3, 7, 18, 0.1) 100%);
}

/* Item tanpa gambar tetap punya latar berwarna, bukan kotak abu kosong. */
.bento-item.is-plain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(145deg, var(--color-gradient-via, #2563eb), var(--color-gradient-to, #0f172a));
}

.bento-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.bento-item:first-child .bento-title { font-size: 1.5rem; }

.bento-text {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-item:first-child .bento-text { -webkit-line-clamp: 3; font-size: 0.9375rem; }

.bento-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  transition: gap var(--transition-fast);
}

.bento-item:hover .bento-more { gap: 0.75rem; }

/* ---------- Proyek: baris berselang-seling ---------- */
.showcase {
  display: grid;
  gap: 3rem;
}

.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

/* Baris genap dibalik arahnya, jadi mata pembaca bergerak zigzag alih-alih
   menuruni kolom yang sama terus. */
.showcase-row:nth-child(even) .showcase-media { order: 2; }

.showcase-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.showcase-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-row:hover .showcase-media img { transform: scale(1.03); }

.showcase-index {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--color-primary);
}

.showcase-title {
  margin: 0.625rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.showcase-title a { color: var(--text-primary); text-decoration: none; }
.showcase-title a:hover { color: var(--color-primary); }

.showcase-text {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

/* ---------- Keunggulan: judul menempel + daftar bernomor ---------- */
.sticky-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3.5rem;
  align-items: start;
}

.sticky-col { position: sticky; top: 6rem; }

.reason-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
}

.reason-item:last-child { border-bottom: 1px solid var(--border-color); }

.reason-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  padding-top: 0.25rem;
}

.reason-title {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.reason-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---------- Testimoni bertingkat ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Kolom tengah diturunkan sedikit agar barisnya tidak rata seperti tabel. */
.quote-grid > :nth-child(2) { margin-top: 2.25rem; }

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 0.6;
  color: var(--color-primary);
  opacity: 0.28;
}

.quote-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.quote-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.quote-foot img,
.quote-initial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.quote-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  background: var(--color-primary);
}

.quote-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.quote-role { font-size: 0.75rem; color: var(--text-tertiary); }

/* ---------- Artikel: satu utama + dua pendamping ---------- */
.article-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.75rem;
}

.article-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: 1.75rem;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--radius-lg);
  isolation: isolate;
}

.article-lead img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-lead:hover img { transform: scale(1.04); }

.article-lead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.92) 10%, rgba(3, 7, 18, 0.3) 60%, transparent 100%);
}

.article-lead-title {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.article-side { display: grid; gap: 1rem; align-content: start; }

.article-mini {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.article-mini:hover {
  border-color: var(--border-color-hover);
  transform: translateX(3px);
}

.article-mini img {
  width: 100%;
  height: 100%;
  min-height: 84px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article-mini-title {
  margin: 0.375rem 0 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.article-lead .article-meta { color: rgba(255, 255, 255, 0.75); }

/* ---------- Tim ---------- */
.team-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.team-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.team-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-tile:hover img { transform: scale(1.05); }

.team-tile-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1rem 0.875rem;
  color: #ffffff;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.88), transparent);
}

.team-tile-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; }
.team-tile-role { font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }

.team-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(145deg, var(--color-gradient-via, #2563eb), var(--color-gradient-to, #0f172a));
}

/* ---------- Ajakan penutup ---------- */
.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3.25rem;
  overflow: hidden;
  border-radius: var(--radius-xl, 1.25rem);
  color: #ffffff;
  background:
    radial-gradient(ellipse 80% 120% at 12% 8%, var(--color-gradient-via, #2563eb) 0%, transparent 58%),
    linear-gradient(135deg, var(--color-gradient-from, #1e3a8a), var(--color-gradient-to, #0f172a));
}

.cta-panel::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -46%;
  width: 460px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 66%);
  pointer-events: none;
}

.cta-panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.cta-panel p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

/* ---------- Penyesuaian layar kecil ---------- */
@media (max-width: 1024px) {
  .about-split,
  .sticky-split,
  .showcase-row,
  .article-split,
  .cta-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sticky-col { position: static; }
  .showcase-row:nth-child(even) .showcase-media { order: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-item:first-child { grid-column: span 2; grid-row: auto; min-height: 300px; }
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-grid > :nth-child(2) { margin-top: 0; }
  .team-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-panel { padding: 2.25rem; }
}

@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { padding: 1.25rem 1rem; }
  .stat-cell-value { font-size: 1.75rem; }
  .bento { grid-template-columns: 1fr; }
  .bento-item,
  .bento-item:first-child { grid-column: auto; min-height: 220px; }
  .quote-grid { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-mini { grid-template-columns: 84px minmax(0, 1fr); }
  .about-badge { right: 0.75rem; bottom: -1rem; padding: 0.75rem 0.875rem; }
  .about-figure::before { inset: 1rem -1rem -1rem 1rem; }
  .section-head { align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   38g. KARTU LAYANAN & ALUR PROSES

   Mengikuti bahasa visual yang sama dengan kartu produk dan galeri: media 4:3
   di atas, badan kartu rapat di bawah. Sebelumnya halaman layanan memakai
   .card umum dengan gambar penampung dari layanan luar (placehold.co), yang
   berarti halaman publik bergantung pada domain pihak ketiga hanya untuk
   menampilkan kotak abu-abu.
   -------------------------------------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-color-hover);
}

.service-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-subtle);
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.service-card:hover .service-card-media img { transform: scale(1.05); }

/* Penampung bergradien memakai warna tema, menggantikan gambar dari luar. */
.service-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, var(--color-gradient-via, #2563eb), var(--color-gradient-to, #0f172a));
}

.service-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem 1rem;
}

.service-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.service-card-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.service-card:hover .service-card-more { gap: 0.6875rem; }

/* ---------- Alur proses ---------- */

/* Garis penghubung antarlangkah, menggantikan empat kartu terpisah yang
   tidak menunjukkan bahwa langkahnya berurutan. */
.process-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  position: relative;
}

.process-step { position: relative; }

.process-step::after {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 1px;
  background: linear-gradient(90deg, var(--border-color), transparent);
}

.process-step:last-child::after { display: none; }

.process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.process-step-title {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.process-step-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .process-step::after { display: none; }
}


/* Baris pil penyaring kategori. Menggantikan deretan tombol yang sebelumnya
   dipusatkan di pita terpisah, sehingga kini menyatu dengan daftarnya. */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  transition: color var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast);
}

.filter-pill:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-pill.is-active {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Jarak ikon di navbar

   Markup memakai utilitas ml-1 (0.25rem = 4px) untuk memberi jarak ikon panah
   dari teks menu, dan ml-auto untuk mendorong tanda centang ke kanan pada
   dropdown bahasa. Empat piksel terlalu rapat pada ukuran ikon sekecil itu,
   sehingga panah terlihat menempel di huruf terakhir. Diatur di sini agar
   berlaku seragam tanpa perlu menyunting tiap tempat di layout.
   -------------------------------------------------------------------------- */
.nav-link .fa-chevron-down {
  margin-left: 0.4375rem;
  opacity: 0.7;
}

.nav-link:hover .fa-chevron-down,
.nav-link.active .fa-chevron-down {
  opacity: 1;
}

/* Tanda centang bahasa yang sedang dipakai. Diberi jarak kiri agar tidak
   menempel pada nama bahasa yang panjang. */
.nav-dropdown .language-option .fa-check {
  margin-left: 0.875rem;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   38h. TANYA JAWAB

   Memakai <details> bawaan peramban, bukan buka-tutup berbasis JavaScript.
   Selain berfungsi tanpa skrip, seluruh jawaban tetap ada di dalam HTML meski
   sedang tertutup, sehingga crawler mesin jawaban dapat membacanya.
   -------------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: 0;
  max-width: 860px;
}

.faq-item {
  border-top: 1px solid var(--border-color);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border-color);
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.125rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

/* Segitiga bawaan disembunyikan agar ikon sendiri yang dipakai. */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }

.faq-question:hover { color: var(--color-primary); }

.faq-question i {
  flex-shrink: 0;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.faq-item[open] .faq-question i {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  padding: 0 2.5rem 1.25rem 0;
}

.faq-answer p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .faq-question { font-size: 0.9375rem; }
  .faq-answer { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   39. ADDITIONAL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* --------------------------------------------------------------------------
   40. RESPONSIVE GRID FIX FOR FEATURED ARTICLE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid[style*="grid-template-columns: 1fr 1fr"],
  .grid[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  .flex[style*="justify-content: space-between"] {
    flex-direction: column;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   41. FULL-WIDTH UTILITY
   -------------------------------------------------------------------------- */
.w-full { width: 100%; }

/* --------------------------------------------------------------------------
   42. BG PRIMARY TOKEN FOR TEAM AVATAR
   -------------------------------------------------------------------------- */
.bg-primary { background-color: var(--bg-section-alt); }

/* --------------------------------------------------------------------------
   43. STATIC PAGE CONTENT TYPOGRAPHY
   -------------------------------------------------------------------------- */
.static-page-content h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.static-page-content h2 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 2.25rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

.static-page-content h3 {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.static-page-content h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.static-page-content p {
  margin-bottom: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.9;
}

.static-page-content ul,
.static-page-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.75rem;
  color: var(--text-secondary);
}

.static-page-content ul { list-style-type: disc; }
.static-page-content ol { list-style-type: decimal; }

.static-page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

.static-page-content li ul,
.static-page-content li ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.static-page-content blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  background: var(--bg-subtle);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

.static-page-content blockquote p:last-child {
  margin-bottom: 0;
}

.static-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.static-page-content table th,
.static-page-content table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  text-align: left;
}

.static-page-content table th {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--text-primary);
}

.static-page-content table td {
  color: var(--text-secondary);
}

.static-page-content code {
  background: var(--bg-subtle);
  padding: 0.2em 0.5em;
  border-radius: 0.25rem;
  font-size: 0.9em;
  color: var(--color-primary-dark);
  font-family: 'Fira Code', 'Courier New', monospace;
}

.static-page-content pre {
  background: var(--bg-footer);
  color: #e2e8f0;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.static-page-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.static-page-content hr {
  border: none;
  border-top: 2px solid var(--border-color);
  margin: 2.5rem 0;
}

.static-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}

.static-page-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.static-page-content a:hover {
  color: var(--color-primary-dark);
}

.static-page-content > *:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 15px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: gap var(--transition-base), padding var(--transition-base),
              transform var(--transition-fast), box-shadow var(--transition-base);
}

.wa-float i {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Label stays collapsed until hover, so the button reads as a clean circle */
.wa-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--transition-base), opacity var(--transition-base);
}

.wa-float:hover,
.wa-float:focus-visible {
  gap: 0.625rem;
  padding-right: 1.25rem;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.16);
}

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
  max-width: 11rem;
  opacity: 1;
}

.wa-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.4);
  outline-offset: 2px;
}

/* Attention ring on load, then it settles down */
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  animation: waPulse 2.4s ease-out 3;
  pointer-events: none;
}

@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
  .wa-float:hover { transform: none; }
}

@media (max-width: 640px) {
  .wa-float {
    right: 1rem;
    bottom: 1rem;
    height: 52px;
    padding: 0 13px;
  }

  .wa-float i {
    font-size: 1.625rem;
  }

  /* No hover on touch — keep it a plain circle */
  .wa-float-label {
    display: none;
  }
}

/* ============================================================
   PERSETUJUAN COOKIE
   Markup: resources/views/partials/cookie-consent.blade.php
   ============================================================ */

.cc {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1200;
  padding: 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* display:flex di atas mengalahkan perilaku bawaan atribut hidden, jadi
   keadaan tersembunyinya harus dinyatakan sendiri. */
.cc[hidden] { display: none; }

.cc-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 62rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 18px 48px -22px rgba(15, 23, 42, .45);
}

.cc-main { flex: 1 1 26rem; min-width: 0; }

.cc-title {
  margin: 0 0 .35rem;
  font-family: var(--font-display, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
}

.cc-title i { color: var(--color-primary, #6366f1); margin-right: .3rem; }

.cc-text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-secondary, #4b5563);
}

.cc-text a { color: var(--color-primary, #6366f1); text-decoration: underline; }

.cc-options {
  margin-top: .9rem;
  display: grid;
  gap: .5rem;
}

.cc-options[hidden] { display: none; }

.cc-option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-subtle, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  cursor: pointer;
}

.cc-option.is-locked { cursor: default; opacity: .85; }
.cc-option input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--color-primary, #6366f1); }
.cc-option strong { display: block; font-size: .8125rem; color: var(--text-primary, #111827); }
.cc-option em {
  display: block;
  margin-top: .1rem;
  font-style: normal;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-secondary, #6b7280);
}

.cc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

.cc-btn {
  padding: .55rem 1.1rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cc-btn[hidden] { display: none; }

.cc-btn-primary {
  background: var(--color-primary, #6366f1);
  color: #fff;
}

.cc-btn-primary:hover { background: var(--color-primary-dark, #4f46e5); }

.cc-btn-quiet {
  background: transparent;
  border-color: var(--border-color, #d1d5db);
  color: var(--text-secondary, #4b5563);
}

.cc-btn-quiet:hover { background: var(--bg-subtle, #f3f4f6); }

@media (max-width: 640px) {
  .cc { padding: .6rem; }
  .cc-panel { padding: 1rem; gap: .9rem; }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1 1 auto; text-align: center; }
}