/* ==========================================================================
   GEOGRAFI MANSACA — EDITORIAL & GEOSPATIAL DESIGN SYSTEM
   Anti-Slop Modern Educational Frontend
   Font Stack: Plus Jakarta Sans (Display/Heading), Outfit & DM Sans (Body), JetBrains Mono (Data)
   Palette: Warm Canvas (#FBFBF9), Rich Ink (#0F172A), Geo Emerald (#059669), Azure Ocean (#0284C7), Solar Amber (#D97706)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..600&family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Refined Color Variables */
  --ground: #FAF9F6;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --ink-muted: #475569;
  --ink-faint: #94A3B8;
  --border: #E2E8F0;
  
  --geo-emerald: #059669;
  --geo-emerald-light: #10B981;
  --geo-cyan: #0284C7;
  --geo-cyan-light: #0EA5E9;
  --geo-amber: #D97706;
  --geo-amber-light: #F59E0B;
  --geo-purple: #7C3AED;
  --geo-rose: #E11D48;
}

/* Global Reset & Base Typography */
body {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  background-color: var(--ground) !important;
  background-image: 
    radial-gradient(rgba(5, 150, 105, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(2, 132, 199, 0.03) 1px, transparent 1px) !important;
  background-size: 28px 28px, 36px 36px !important;
  background-position: 0 0, 14px 14px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

/* Header & Navigation Bar */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1.5px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03) !important;
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981 0%, #06B6D4 30%, #3B82F6 60%, #8B5CF6 85%, #F59E0B 100%);
  z-index: 60;
}

header a, header nav button {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hero Section Polish */
#beranda {
  padding-top: 2.5rem !important;
  padding-bottom: 4rem !important;
  border-bottom: 1px solid var(--border) !important;
}

#beranda h1 {
  font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 900 !important;
  color: #0F172A !important;
}

#beranda p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem) !important;
  color: #334155 !important;
  line-height: 1.65 !important;
  max-width: 44rem !important;
}

/* Hero CTAs */
#beranda button.bg-\[\#1B4E3E\] {
  background: linear-gradient(135deg, #059669 0%, #0D9488 100%) !important;
  border-radius: 14px !important;
  padding: 0.85rem 1.75rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  box-shadow: 0 8px 20px -4px rgba(5, 150, 105, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s ease !important;
}

#beranda button.bg-\[\#1B4E3E\]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -4px rgba(5, 150, 105, 0.45) !important;
  filter: brightness(1.05) !important;
}

/* Hero Secondary Action Buttons */
#beranda button.bg-\[\#FFFFFF\] {
  border-radius: 14px !important;
  padding: 0.85rem 1.5rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
  transition: all 0.2s ease !important;
}

#beranda button.bg-\[\#FFFFFF\]:hover {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
  background: #F0F9FF !important;
}

/* Geological Showcase Box Styling */
.plate-showcase-container {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.plate-showcase-container:hover {
  border-color: #0EA5E9 !important;
  box-shadow: 0 18px 40px -8px rgba(14, 165, 233, 0.16) !important;
}

.plate-nav-btn {
  padding: 7px 13px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  font-family: var(--font-display) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid transparent !important;
}

.plate-nav-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

.plate-nav-btn:not(.active) {
  background: #F1F5F9 !important;
  color: #475569 !important;
}

.plate-nav-btn:not(.active):hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Curriculum Section (#kurikulum) */
#kurikulum {
  padding-top: 4.5rem !important;
  padding-bottom: 5rem !important;
  background-color: #FFFFFF !important;
}

#kurikulum h2 {
  font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.75rem) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

/* Filter Buttons in Curriculum */
#kurikulum button {
  border-radius: 12px !important;
  font-family: var(--font-display) !important;
  transition: all 0.2s ease !important;
}

/* Curriculum Cards Card Grid */
#kurikulum .border, 
#quiz .border,
#laboratorium .border,
#kalkulator .border {
  border-radius: 18px !important;
  border: 1.5px solid #E2E8F0 !important;
  background-color: #FFFFFF !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#kurikulum .border:hover,
#quiz .border:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.1), 0 6px 16px -4px rgba(5, 150, 105, 0.08) !important;
}

/* Domain Hover Borders */
#kurikulum .border.hover\:border-emerald-500:hover {
  border-color: #059669 !important;
}

#kurikulum .border.hover\:border-sky-500:hover {
  border-color: #0284C7 !important;
}

#kurikulum .border.hover\:border-purple-500:hover {
  border-color: #7C3AED !important;
}

#kurikulum .border.hover\:border-amber-500:hover {
  border-color: #D97706 !important;
}

/* Local Cilacap Callout Box inside Curriculum Cards */
#kurikulum .bg-\[\#FAF9F6\] {
  background-color: #F8FAFC !important;
  border-left: 3.5px solid #059669 !important;
  border-radius: 10px !important;
}

/* External Link Buttons inside Cards */
#kurikulum a.bg-\[\#1B4E3E\] {
  background: #059669 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
  transition: all 0.2s ease !important;
}

#kurikulum a.bg-\[\#1B4E3E\]:hover {
  background: #047857 !important;
  transform: translateY(-1px) !important;
}

/* 5 Geosfer Section (#laboratorium) */
#laboratorium {
  padding-top: 4.5rem !important;
  padding-bottom: 5rem !important;
  background-color: #FAF9F6 !important;
}

#laboratorium button.border-l-2 {
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  transition: all 0.2s ease !important;
}

/* Spatial Calculator (#kalkulator) */
#kalkulator {
  padding-top: 4.5rem !important;
  padding-bottom: 5rem !important;
  background-color: #FFFFFF !important;
}

#kalkulator input, #kalkulator select {
  border-radius: 10px !important;
  border: 1.5px solid #CBD5E1 !important;
  font-family: var(--font-mono) !important;
  transition: all 0.2s ease !important;
}

#kalkulator input:focus, #kalkulator select:focus {
  border-color: #059669 !important;
  outline: 2px solid rgba(5, 150, 105, 0.2) !important;
}

/* Quiz Section (#quiz) */
#quiz {
  padding-top: 4.5rem !important;
  padding-bottom: 5rem !important;
  background-color: #FAF9F6 !important;
}

/* Fullscreen Geo Modal Lightbox */
.geo-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.geo-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.geo-modal-card {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 950px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.geo-modal-backdrop.open .geo-modal-card {
  transform: scale(1);
}