@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  /* Core palette */
  --ink: #080f08;
  --ink-2: #0c1a0c;
  --ink-3: #111e11;
  --forest: #1a4a1a;
  --forest-mid: #2d6e2d;
  --forest-hi: #3d8b3d;
  --sage: #7aab7a;
  --sage-pale: #b8d9b8;
  --gold: #c9a84c;
  --gold-pale: #e8d09a;
  --sky: #4a8fa8;
  --sky-pale: #9dcce0;
  --red-warn: #c0392b;
  --amber: #d4870a;
  --white: #f5f2ec;
  --white-dim: rgba(245, 242, 236, 0.65);
  --white-faint: rgba(245, 242, 236, 0.12);
  --white-ghost: rgba(245, 242, 236, 0.05);

  /* Glass */
  --glass: rgba(245, 242, 236, 0.04);
  --glass-border: rgba(245, 242, 236, 0.1);
  --glass-hover: rgba(245, 242, 236, 0.08);

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Outfit", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Spacing */
  --section-pad: clamp(5rem, 10vw, 9rem);
  --container: 1280px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--forest-mid);
  border-radius: 2px;
}

/* ===== CUSTOM CURSOR ===== */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--sage-pale);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s,
    height 0.2s,
    background 0.2s;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(184, 217, 184, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s var(--ease-out-expo),
    height 0.3s var(--ease-out-expo);
}

/* ===== GRAIN OVERLAY ===== */
body::after {
  content: "";
  position: fixed;
  inset: -200%;
  width: 400%;
  height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 99997;
  opacity: 0.25;
  animation: grain 18s steps(1) infinite;
}
@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-1%, -2%);
  }
  20% {
    transform: translate(1%, 2%);
  }
  30% {
    transform: translate(-1%, 2%);
  }
  40% {
    transform: translate(2%, -1%);
  }
  50% {
    transform: translate(-2%, 2%);
  }
  60% {
    transform: translate(1%, -2%);
  }
  70% {
    transform: translate(-3%, 1%);
  }
  80% {
    transform: translate(2%, 2%);
  }
  90% {
    transform: translate(-1%, -2%);
  }
}

/* ===== NAVIGATION ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.8rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s var(--ease-out-expo);
}
nav.scrolled {
  background: rgba(8, 15, 8, 0.92);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(184, 217, 184, 0.08);
  padding: 1.1rem 3.5rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
.nav-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--forest-mid), var(--sky));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 0 20px rgba(45, 110, 45, 0.4);
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.5px;
}
.nav-logo-text span {
  color: var(--sage);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  list-style: none;
}
.nav-links a {
  color: rgba(245, 242, 236, 0.55);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.nav-links a:hover {
  color: var(--sage-pale);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.nav-cta {
  padding: 0.55rem 1.4rem !important;
  background: transparent !important;
  border: 1px solid rgba(122, 171, 122, 0.4) !important;
  border-radius: 3px !important;
  color: var(--sage-pale) !important;
  transition: all 0.3s !important;
}
.nav-cta::after {
  display: none !important;
}
.nav-cta:hover {
  background: rgba(122, 171, 122, 0.12) !important;
  border-color: var(--sage) !important;
  color: var(--white) !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
  padding: 0.85rem 2.2rem;
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.35s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.08));
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover {
  background: var(--forest-hi);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(45, 110, 45, 0.35);
}
.btn-primary:hover::before {
  opacity: 1;
}
.btn-outline {
  padding: 0.85rem 2.2rem;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(245, 242, 236, 0.25);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.35s var(--ease-out-expo);
  backdrop-filter: blur(10px);
}
.btn-outline:hover {
  background: rgba(245, 242, 236, 0.07);
  border-color: rgba(245, 242, 236, 0.6);
  transform: translateY(-2px);
}

/* ===== SECTION TYPOGRAPHY ===== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.9rem;
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sage);
  opacity: 0.6;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  color: var(--white);
}
.section-title span {
  font-style: italic;
  color: var(--sage-pale);
  font-weight: 400;
}
.section-title strong {
  font-weight: 600;
}
.section-desc {
  color: var(--white-dim);
  max-width: 480px;
  line-height: 1.8;
  font-size: 0.92rem;
  font-weight: 300;
}
.section-header {
  max-width: 620px;
}

/* ===== DIVIDER LINE ===== */
.section-rule {
  width: 48px;
  height: 1px;
  background: var(--forest-mid);
  margin: 1.5rem 0;
  opacity: 0.8;
}

/* ===== HERO ===== */
#hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-parallax-bg {
  position: absolute;
  inset: -80px;
  background:
    linear-gradient(
      to bottom,
      rgba(8, 15, 8, 0.2) 0%,
      rgba(8, 15, 8, 0.55) 55%,
      var(--ink) 100%
    ),
    url("../assets/img/komodo-hero.jpeg") center/cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
}
.hero-overlay-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122, 171, 122, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 171, 122, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  padding: 0 2rem;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 1.1rem;
  background: rgba(45, 110, 45, 0.15);
  border: 1px solid rgba(122, 171, 122, 0.25);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 2rem;
  backdrop-filter: blur(12px);
  animation: fadeDown 0.9s var(--ease-out-expo) both;
}
.hero-badge .dot {
  width: 5px;
  height: 5px;
  background: var(--sage);
  border-radius: 50%;
  animation: blink 2.5s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -1px;
  margin-bottom: 1.8rem;
  animation: fadeUp 0.9s 0.15s var(--ease-out-expo) both;
}
.hero-title .line1 {
  display: block;
  color: var(--white);
}
.hero-title .line2 {
  display: block;
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, var(--sage-pale) 30%, var(--sky-pale));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px; /* kasih jarak ke bawah */
  animation: fadeUp 0.9s 0.45s var(--ease-out-expo) both;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--white-dim);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.85;
  font-weight: 300;
  text-align: center; /* biar rata tengah */
  animation: fadeUp 0.9s 0.3s var(--ease-out-expo) both;
}
.hero-scroll {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(245, 242, 236, 0.3);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: fadeUp 0.9s 0.9s var(--ease-out-expo) both;
}
.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(245, 242, 236, 0.3));
  animation: scrollLine 2.2s infinite;
}
.hero-stats {
  position: absolute;
  top: 5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 4rem;
  animation: fadeUp 0.9s 0.6s var(--ease-out-expo) both;
}
.hero-stat {
  text-align: center;
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--sage-pale);
  letter-spacing: -1px;
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.65rem;
  color: rgba(245, 242, 236, 0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.hero-foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280'%3E%3Cpath fill='%23080f08' d='M0,260 Q180,190 360,220 Q540,250 720,185 Q900,120 1080,165 Q1260,210 1440,130 L1440,280 L0,280Z'/%3E%3C/svg%3E")
    bottom/cover no-repeat;
  will-change: transform;
}

/* ===== FOREST DEPTH ===== */
#forest-depth {
  position: relative;
  height: 90vh; /* Sedikit lebih tinggi agar transisi margin lebih leluasa */
  min-height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink); /* Warna gelap agar menutupi Hero dengan solid */

  /* PENTING: Untuk transisi margin yang halus */
  margin-top: 0;
  z-index: 20;
  will-change: margin-top, transform;
  transition: margin-top 0.1s linear;
}
.forest-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.forest-bg {
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #0d2210 50%,
    var(--ink) 100%
  );
}
.forest-mountains {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cpolygon fill='%23162e16' points='0,600 200,200 400,350 600,150 800,300 1000,100 1200,250 1440,180 1440,600'/%3E%3C/svg%3E")
    bottom/cover no-repeat;
}
.forest-hills {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cellipse fill='%231a3a1a' cx='200' cy='650' rx='400' ry='250'/%3E%3Cellipse fill='%231a3a1a' cx='700' cy='700' rx='450' ry='280'/%3E%3Cellipse fill='%231a3a1a' cx='1200' cy='680' rx='380' ry='260'/%3E%3C/svg%3E")
    bottom/cover no-repeat;
}
.forest-trees-back {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cg fill='%231c3a1c'%3E%3Crect x='50' y='200' width='30' height='400'/%3E%3Cpolygon points='65,100 30,280 100,280'/%3E%3Cpolygon points='65,150 25,320 105,320'/%3E%3Crect x='200' y='150' width='25' height='450'/%3E%3Cpolygon points='212,50 175,230 249,230'/%3E%3Crect x='380' y='180' width='28' height='420'/%3E%3Cpolygon points='394,80 358,260 430,260'/%3E%3Crect x='550' y='160' width='26' height='440'/%3E%3Cpolygon points='563,60 527,240 599,240'/%3E%3Crect x='720' y='140' width='30' height='460'/%3E%3Cpolygon points='735,40 698,220 772,220'/%3E%3Crect x='900' y='170' width='27' height='430'/%3E%3Cpolygon points='913,70 877,250 949,250'/%3E%3Crect x='1100' y='190' width='29' height='410'/%3E%3Cpolygon points='1114,90 1078,270 1150,270'/%3E%3Crect x='1300' y='155' width='25' height='445'/%3E%3Cpolygon points='1312,55 1276,235 1348,235'/%3E%3C/g%3E%3C/svg%3E")
    bottom/cover no-repeat;
}
.forest-trees-front {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600'%3E%3Cg fill='%230c1e0c'%3E%3Crect x='0' y='300' width='50' height='300'/%3E%3Cpolygon points='25,80 -20,340 70,340'/%3E%3Cpolygon points='25,160 -25,380 75,380'/%3E%3Crect x='280' y='260' width='55' height='340'/%3E%3Cpolygon points='307,60 252,300 362,300'/%3E%3Crect x='600' y='280' width='48' height='320'/%3E%3Cpolygon points='624,80 572,310 676,310'/%3E%3Crect x='920' y='250' width='52' height='350'/%3E%3Cpolygon points='946,50 890,290 1002,290'/%3E%3Crect x='1250' y='270' width='50' height='330'/%3E%3Cpolygon points='1275,70 1222,305 1328,305'/%3E%3Crect x='1400' y='290' width='45' height='310'/%3E%3Cpolygon points='1422,90 1375,315 1469,315'/%3E%3C/g%3E%3C/svg%3E")
    bottom/cover no-repeat;
}
.forest-fog {
  background: linear-gradient(
    to top,
    rgba(122, 171, 122, 0.04) 0%,
    transparent 50%
  );
  filter: blur(3px);
}
.silhouette {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  font-size: 5rem;
  filter: drop-shadow(0 0 24px rgba(122, 171, 122, 0.25));
}
.silhouette.visible {
  opacity: 0.5;
}
.forest-text {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2rem;
}
.forest-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--white);
  text-shadow: 0 2px 60px rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
  line-height: 1.05;
}
.forest-text p {
  color: rgba(245, 242, 236, 0.55);
  font-size: 1.05rem;
  max-width: 460px;
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.8;
}

/* ===== STATS OVERVIEW ===== */
#stats-overview {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink-2);
  position: relative;
}
#stats-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(45, 110, 45, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 4rem;
  background: rgba(245, 242, 236, 0.06);
  border: 1px solid rgba(245, 242, 236, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.stat-card {
  background: var(--ink-2);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.35s;
}
.stat-card:hover {
  background: var(--glass-hover);
}
.stat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--forest-mid),
    transparent
  );
  opacity: 0;
  transition: opacity 0.35s;
}
.stat-card:hover::after {
  opacity: 1;
}
.stat-card-icon {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  display: block;
  opacity: 0.8;
}
.stat-card-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--sage-pale);
  letter-spacing: -1px;
}
.stat-card-label {
  font-size: 0.72rem;
  color: rgba(245, 242, 236, 0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stat-card-trend {
  font-size: 0.7rem;
  margin-top: 0.8rem;
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
  display: inline-block;
  font-family: var(--font-mono);
}
.trend-down {
  background: rgba(192, 57, 43, 0.15);
  color: #e87a6f;
}
.trend-up {
  background: rgba(45, 110, 45, 0.2);
  color: var(--sage);
}

/* ===== WILDLIFE MAP ===== */
#wildlife-map {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink);
  position: relative;
}
.map-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: start;
}
.map-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.map-point {
  fill: #d4870a;
  stroke: white;
  stroke-width: 100;
  transition: 0.3s;
}

.map-point:hover {
  fill: #c0392b;
  r: 12;
}
.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: rgba(245, 242, 236, 0.55);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: 0.2rem;
  text-align: left;
}
.filter-btn:hover,
.filter-btn.active {
  border-left-color: var(--sage);
  color: var(--white);
  background: rgba(122, 171, 122, 0.06);
}
.filter-btn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.76rem;
  color: rgba(245, 242, 236, 0.5);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.map-main {
  position: relative;
  aspect-ratio: 900 / 400;
  background: url("../assets/img/peta-indo.png") center/cover no-repeat;
}

/* TITIK */
.map-point {
  fill: #11ff00;
  stroke: white;
  stroke-width: 2;
  transition: 0.3s;
  cursor: pointer;
}

.map-point:hover {
  fill: #ffcc00;
  stroke-opacity: 0.8;
  r: 10;
}

/* POPUP */
.map-popup {
  position: absolute;
  background: #59bc039c;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: 0.2s;
  z-index: 9999;
  min-width: 160px;
}

/* text */
.map-popup h4 {
  margin: 0 0 5px;
  color: #ffffff;
}

.map-popup p {
  margin: 2px 0;
}

/* ===== DASHBOARD ===== */
#dashboard {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink-2);
  position: relative;
}
#dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(74, 143, 168, 0.04) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 1px;
  margin-top: 3rem;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.chart-card {
  background: var(--ink-2);
  padding: 2rem;
  transition: background 0.35s;
}
.chart-card:hover {
  background: var(--glass-hover);
}
.chart-card.wide {
  grid-column: span 2 !important;
}
.chart-card h4 {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.3);
  margin-bottom: 0.3rem;
}
.chart-card h3 {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: rgba(245, 242, 236, 0.8);
}
.chart-wrapper {
  position: relative;
  height: 240px !important;
}
.chart-card:not(.wide) .chart-wrapper {
  height: 260px !important;
}

/* ===== ANIMAL SPOTLIGHT ===== */
#animal-spotlight {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.animal-card {
  background: var(--ink);
  overflow: hidden;
  transition: background 0.4s;
  opacity: 0;
  transform: translateY(30px);
}
.animal-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo),
    background 0.4s;
}
.animal-card:hover {
  background: var(--glass-hover);
  transform: translateY(-5px);
  transition: 0.3s;
}
.animal-img {
  width: 100%;
  height: 190px;
  background: linear-gradient(135deg, var(--ink-3), #1a2e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  transition: transform 0.6s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.animal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--ink) 100%);
  opacity: 0.7;
}
.animal-card:hover .animal-img {
  transform: scale(1.04);
}
.animal-info {
  padding: 1.4rem;
}
.animal-status {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  font-family: var(--font-mono);
}
.animal-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.animal-scientific {
  font-style: italic;
  color: rgba(245, 242, 236, 0.3);
  font-size: 0.76rem;
  margin-bottom: 0.9rem;
}
.animal-desc {
  color: rgba(245, 242, 236, 0.5);
  font-size: 0.8rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-weight: 300;
}
.animal-meta {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(245, 242, 236, 0.06);
}
.animal-meta-item {
  text-align: center;
  flex: 1;
}
.animal-meta-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sage);
}
.animal-meta-key {
  font-size: 0.6rem;
  color: rgba(245, 242, 236, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.2rem;
}

/* ===== INCIDENT REPORTING ===== */
#incident-reporting {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink-3);
  position: relative;
}
.incident-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
  align-items: start;
}
.report-form {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2.2rem;
  backdrop-filter: blur(20px);
}
.form-group {
  margin-bottom: 1.3rem;
}
.form-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.4);
  margin-bottom: 0.5rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(245, 242, 236, 0.03);
  border: 1px solid rgba(245, 242, 236, 0.1);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--sage);
  background: rgba(122, 171, 122, 0.04);
}
.form-select option {
  background: var(--ink);
}
.form-textarea {
  resize: vertical;
  min-height: 90px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.upload-area {
  border: 1px dashed rgba(245, 242, 236, 0.12);
  border-radius: 3px;
  padding: 1.8rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(245, 242, 236, 0.3);
}
.upload-area:hover {
  border-color: var(--sage);
  background: rgba(122, 171, 122, 0.03);
  color: rgba(245, 242, 236, 0.6);
}
.upload-icon {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}
.upload-text {
  font-size: 0.78rem;
  line-height: 1.6;
}
.incident-tracker {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tracker-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 0.4rem;
}
.tracker-subtitle {
  color: rgba(245, 242, 236, 0.35);
  font-size: 0.78rem;
  margin-bottom: 1rem;
}
.incident-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 0;
  padding: 1.3rem 1.4rem;
  transition:
    background 0.25s,
    border-left-color 0.25s;
  border-left: 2px solid transparent;
  backdrop-filter: blur(20px);
}
.incident-card:first-of-type {
  border-radius: 4px 4px 0 0;
}
.incident-card:last-child {
  border-radius: 0 0 4px 4px;
}
.incident-card:hover {
  background: var(--glass-hover);
  border-left-color: var(--sage);
}
.incident-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.incident-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(245, 242, 236, 0.3);
}
.incident-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  font-family: var(--font-mono);
}
.status-pending {
  background: rgba(212, 135, 10, 0.12);
  color: #f0b75a;
}
.status-review {
  background: rgba(74, 143, 168, 0.12);
  color: var(--sky-pale);
}
.status-resolved {
  background: rgba(45, 110, 45, 0.15);
  color: var(--sage);
}
.incident-title {
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  color: rgba(245, 242, 236, 0.85);
}
.incident-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.72rem;
  color: rgba(245, 242, 236, 0.35);
}
.incident-timeline {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(245, 242, 236, 0.05);
  display: flex;
  gap: 3px;
}
.timeline-step {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(245, 242, 236, 0.08);
}
.timeline-step.done {
  background: var(--forest-mid);
}
.timeline-step.active {
  background: var(--sky);
  animation: pulse-bar 1.8s infinite;
}

/* ===== EDUCATION ===== */
#education {
  padding: var(--section-pad) 3.5rem;
  background: var(--ink-2);
  position: relative;
}
#education::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(109, 76, 65, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.edu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.edu-card {
  background: var(--ink-2);
  padding: 2rem 1.6rem;
  text-align: center;
  transition: background 0.3s;
  position: relative;
}
.edu-card:hover {
  background: var(--glass-hover);
}
.edu-icon {
  width: 52px;
  height: 52px;
  background: rgba(45, 110, 45, 0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1.1rem;
  border: 1px solid rgba(122, 171, 122, 0.12);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.edu-card:hover .edu-icon {
  background: rgba(45, 110, 45, 0.25);
  border-color: rgba(122, 171, 122, 0.25);
}
.edu-card h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: rgba(245, 242, 236, 0.85);
}
.edu-card p {
  font-size: 0.76rem;
  color: rgba(245, 242, 236, 0.45);
  line-height: 1.7;
  font-weight: 300;
}

/* ===== CONSERVATION IMPACT ===== */
#conservation-impact {
  position: relative;
  padding: var(--section-pad) 3.5rem;
  overflow: hidden;
}
.impact-bg {
  position: absolute;
  inset: -80px;
  background:
    linear-gradient(rgba(8, 15, 8, 0.8), rgba(8, 15, 8, 0.8)),
    url("../assets/img/tanduk.jpg") center/cover no-repeat;
  will-change: transform;
}
.impact-content {
  position: relative;
  z-index: 1;
}
.impact-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 300;
  max-width: 580px;
  margin-bottom: 3.5rem;
  line-height: 1.1;
}
.impact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 242, 236, 0.08);
  border: 1px solid rgba(245, 242, 236, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.impact-card {
  background: rgba(8, 15, 8, 0.7);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(30px);
  transition: background 0.35s;
}
.impact-card:hover {
  background: rgba(45, 110, 45, 0.08);
}
.impact-num {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 300;
  color: var(--sage-pale);
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: -1px;
}
.impact-label {
  font-size: 0.68rem;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.impact-desc {
  font-size: 0.82rem;
  color: rgba(245, 242, 236, 0.6);
  margin-top: 1rem;
  line-height: 1.7;
  font-weight: 300;
  border-top: 1px solid rgba(245, 242, 236, 0.06);
  padding-top: 1rem;
}

/* ===== CONTACT / FOOTER ===== */
#contact {
  padding: var(--section-pad) 3.5rem 3.5rem;
  background: var(--ink);
  border-top: 1px solid rgba(245, 242, 236, 0.05);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3.5rem;
  margin-top: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
}
.contact-brand p {
  color: rgba(245, 242, 236, 0.4);
  font-size: 0.82rem;
  line-height: 1.8;
  margin: 1rem 0;
  font-weight: 300;
}
.social-links {
  display: flex;
  gap: 0.6rem;
}
.social-link {
  width: 34px;
  height: 34px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 242, 236, 0.4);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 0.8rem;
}
.social-link:hover {
  background: rgba(45, 110, 45, 0.2);
  border-color: var(--sage);
  color: var(--white);
  transform: translateY(-2px);
}
.contact-col h4 {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.3);
  margin-bottom: 1.1rem;
}
.contact-col ul {
  list-style: none;
}
.contact-col ul li {
  margin-bottom: 0.6rem;
}
.contact-col ul a {
  color: rgba(245, 242, 236, 0.45);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s;
  font-weight: 300;
}
.contact-col ul a:hover {
  color: var(--sage-pale);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.5rem;
  font-size: 0.73rem;
  color: rgba(245, 242, 236, 0.2);
}
.footer-bottom a {
  color: var(--sage);
  text-decoration: none;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@keyframes pulse-bar {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* ===== HAMBURGER ===== */
.nav-hamburger {
  display: none;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-grid .chart-card.wide {
    grid-column: span 2;
  }
  .spotlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .edu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-container {
    grid-template-columns: 1fr;
  }
  .impact-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  nav,
  nav.scrolled {
    padding: 1.1rem 1.5rem;
  }
  nav {
    background: rgba(8, 15, 8, 0.95) !important;
    backdrop-filter: blur(20px);
  }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
  }
  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sage-pale);
    border-radius: 2px;
    transition: all 0.3s;
  }
  .nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: #080f08;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 99996;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links.open {
    opacity: 1;
    pointer-events: all;
  }

  .nav-links a {
    font-size: 1.5rem !important;
    letter-spacing: 3px;
  }
  #stats-overview,
  #wildlife-map,
  #dashboard,
  #animal-spotlight,
  #incident-reporting,
  #education,
  #conservation-impact,
  #contact {
    padding: 4rem 1.5rem;
  }
  .stats-grid,
  .spotlight-grid,
  .edu-grid,
  .impact-cards {
    grid-template-columns: 1fr;
  }
  .incident-layout,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid .chart-card.wide {
    grid-column: span 1;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ===== CHART SOURCE LABEL ===== */
.chart-source {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(245, 242, 236, 0.05);
  font-size: 0.68rem;
  color: rgba(245, 242, 236, 0.28);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.chart-source .src-label {
  color: var(--sage);
  font-weight: 700;
  margin-right: 0.3rem;
  letter-spacing: 1px;
}

/* ===== REFERENCE BLOCK ===== */
.reference-block {
  margin-top: 3rem;
  background: rgba(8, 15, 8, 0.6);
  border: 1px solid rgba(122, 171, 122, 0.1);
  border-radius: 4px;
  overflow: hidden;
  backdrop-filter: blur(20px);
}
.ref-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.8rem;
  background: rgba(45, 110, 45, 0.08);
  border-bottom: 1px solid rgba(122, 171, 122, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sage);
}
.ref-icon {
  font-size: 1rem;
}
.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(245, 242, 236, 0.04);
}
.ref-item {
  display: flex;
  gap: 1.1rem;
  padding: 1.3rem 1.6rem;
  background: var(--ink-2);
  transition: background 0.25s;
}
.ref-item:hover {
  background: rgba(45, 110, 45, 0.06);
}
.ref-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(122, 171, 122, 0.3);
  padding-top: 0.1rem;
  min-width: 22px;
  letter-spacing: 0.5px;
}
.ref-content {
  flex: 1;
}
.ref-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 242, 236, 0.8);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}
.ref-detail {
  font-size: 0.73rem;
  color: rgba(245, 242, 236, 0.38);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.ref-detail em {
  font-style: italic;
  color: rgba(245, 242, 236, 0.5);
}
.ref-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--sky);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.ref-link:hover {
  color: var(--sky-pale);
}
.ref-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.8rem;
  background: rgba(212, 135, 10, 0.04);
  border-top: 1px solid rgba(212, 135, 10, 0.1);
  font-size: 0.71rem;
  color: rgba(245, 242, 236, 0.35);
  line-height: 1.7;
  font-weight: 300;
}
.ref-note-icon {
  font-size: 0.9rem;
  padding-top: 0.1rem;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .ref-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .ref-grid {
    grid-template-columns: 1fr;
  }
  .ref-item {
    padding: 1rem 1.1rem;
  }
}

.animal-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* map */
@media (max-width: 480px) {
  .map-main {
    aspect-ratio: 950 / 250;
  }

  .map-popup {
    font-size: 0.7rem;
    padding: 8px;
    min-width: 120px;
    max-width: 160px;
  }

  .map-popup h4 {
    font-size: 0.8rem;
  }

  .map-point {
    stroke-width: 1;
  }
}

/* ===== FORM VALIDATION ===== */
.field-error {
  border-color: var(--red-warn) !important;
  background: rgba(192, 57, 43, 0.06) !important;
  animation: fieldShake 0.35s ease;
}
@keyframes fieldShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  80% {
    transform: translateX(-3px);
  }
}
.btn-shake {
  animation: btnShake 0.5s ease;
}
@keyframes btnShake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-6px);
  }
  45% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-4px);
  }
}

/* ===== INCIDENT LAYOUT ALIGNMENT ===== */
.incident-layout {
  align-items: stretch;
}
.report-form,
.incident-tracker {
  display: flex;
  flex-direction: column;
}
.incident-tracker {
  height: 100%;
}
.incident-tracker > .incident-card:first-of-type {
  border-radius: 4px 4px 0 0;
}
.incident-tracker > .incident-card:last-child {
  border-radius: 0 0 4px 4px;
  flex: 1;
}

/* ===== TOAST NOTIFICATION ===== */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(8, 15, 8, 0.96);
  border: 1px solid rgba(192, 57, 43, 0.4);
  border-radius: 4px;
  padding: 0.85rem 1.5rem;
  font-size: 0.82rem;
  color: #e87a6f;
  z-index: 99999;
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-out-expo);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.toast-notification.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-notification.toast-success {
  border-color: rgba(45, 110, 45, 0.4);
  color: var(--sage);
}

/* ===== SHARED POPUP OVERLAY ===== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 4, 0.85);
  backdrop-filter: blur(18px) saturate(1.2);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-expo);
}
.popup-overlay.popup-visible {
  opacity: 1;
  pointer-events: all;
}
.popup-overlay.popup-visible .popup-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.popup-box {
  position: relative;
  background: var(--ink-2);
  border: 1px solid rgba(122, 171, 122, 0.15);
  border-radius: 6px;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(122, 171, 122, 0.05);
  transform: translateY(28px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.45s var(--ease-out-expo),
    opacity 0.4s var(--ease-out-expo);
  max-height: 90vh;
  overflow-y: auto;
}
.popup-box::-webkit-scrollbar {
  width: 3px;
}
.popup-box::-webkit-scrollbar-track {
  background: var(--ink);
}
.popup-box::-webkit-scrollbar-thumb {
  background: var(--forest-mid);
  border-radius: 2px;
}

.popup-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 32px;
  height: 32px;
  background: rgba(245, 242, 236, 0.06);
  border: 1px solid rgba(245, 242, 236, 0.1);
  border-radius: 50%;
  color: rgba(245, 242, 236, 0.5);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  z-index: 2;
}
.popup-close:hover {
  background: rgba(192, 57, 43, 0.2);
  border-color: rgba(192, 57, 43, 0.4);
  color: #e87a6f;
}

/* ===== SUCCESS POPUP ===== */
.success-popup {
  width: 100%;
  max-width: 480px;
  padding: 2.8rem 2.4rem 2.4rem;
  text-align: center;
}
.success-icon-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(45, 110, 45, 0.3);
  animation: ringPulse 2.4s ease infinite;
}
@keyframes ringPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.15;
  }
}
.success-icon {
  font-size: 2.8rem;
  filter: drop-shadow(0 0 18px rgba(45, 110, 45, 0.5));
  animation: iconPop 0.5s 0.15s var(--ease-out-expo) both;
}
@keyframes iconPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.success-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.7rem;
}
.success-subtitle {
  color: rgba(245, 242, 236, 0.5);
  font-size: 0.85rem;
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 2rem;
}
.success-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.07);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.success-meta-item {
  background: var(--ink);
  padding: 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.success-meta-icon {
  font-size: 1.1rem;
  display: block;
}
.success-meta-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(245, 242, 236, 0.3);
  margin-bottom: 0.15rem;
}
.success-meta-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sage-pale);
}
.success-id {
  color: var(--sky-pale) !important;
}

/* ===== PHOTO UPLOAD PREVIEW ===== */
.upload-drag {
  border-color: var(--sage) !important;
  background: rgba(122, 171, 122, 0.05) !important;
}

.upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.preview-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.25s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo);
  border: 1px solid rgba(245, 242, 236, 0.1);
  background: var(--ink-3);
  cursor: default;
}
.preview-item.preview-visible {
  opacity: 1;
  transform: scale(1);
}
.preview-item.preview-exit {
  opacity: 0;
  transform: scale(0.8);
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 8, 4, 0.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.5rem;
}
.preview-item:hover .preview-overlay {
  opacity: 1;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.preview-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(245, 242, 236, 0.9);
  line-height: 1.2;
  word-break: break-all;
}
.preview-size {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--sage);
}

.preview-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 22px;
  height: 22px;
  background: rgba(192, 57, 43, 0.85);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 0.55rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s,
    background 0.2s;
  transform: scale(0.8);
}
.preview-item:hover .preview-remove {
  opacity: 1;
  transform: scale(1);
}
.preview-remove:hover {
  background: rgba(192, 57, 43, 1);
  transform: scale(1.1) !important;
}

/* ===== ANIMAL MODAL ===== */
.animal-popup {
  width: 100%;
  max-width: 720px;
}
.amodal-header {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 200px;
}
.amodal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px 0 0 0;
  min-height: 220px;
}
.amodal-header-info {
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
}
.amodal-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0.5rem 0 0.2rem;
  color: var(--white);
}
.amodal-scientific {
  font-style: italic;
  color: rgba(245, 242, 236, 0.35);
  font-size: 0.82rem;
  margin-bottom: 0.9rem;
}
.amodal-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.amodal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.8rem;
  background: rgba(245, 242, 236, 0.04);
  border: 1px solid rgba(245, 242, 236, 0.1);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(245, 242, 236, 0.5);
  letter-spacing: 0.3px;
}
.amodal-badge i {
  color: var(--sage);
  font-size: 0.6rem;
}
.trend-badge {
  color: rgba(245, 242, 236, 0.4);
}
.amodal-body {
  padding: 1.8rem 2rem 2rem;
}
.amodal-desc {
  color: rgba(245, 242, 236, 0.6);
  font-size: 0.88rem;
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 1.2rem;
}
.amodal-fact-box {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: rgba(45, 110, 45, 0.08);
  border: 1px solid rgba(122, 171, 122, 0.12);
  border-radius: 3px;
  margin-bottom: 1.5rem;
}
.amodal-fact-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.amodal-fact {
  color: rgba(245, 242, 236, 0.55);
  font-size: 0.8rem;
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
}
.amodal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(245, 242, 236, 0.05);
  border: 1px solid rgba(245, 242, 236, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.amodal-detail {
  background: var(--ink);
  padding: 1rem 1.1rem;
  transition: background 0.2s;
}
.amodal-detail:hover {
  background: rgba(45, 110, 45, 0.06);
}
.amodal-detail-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.amodal-detail-label i {
  font-size: 0.6rem;
}
.amodal-detail-val {
  font-size: 0.8rem;
  color: rgba(245, 242, 236, 0.65);
  line-height: 1.5;
  font-weight: 300;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-card.wide {
    grid-column: span 1 !important;
  }
  .ref-grid {
    grid-template-columns: 1fr;
  }
  .success-meta {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-card.wide {
    grid-column: span 1 !important;
  }
  .ref-item {
    padding: 1rem 1.1rem;
  }
  .upload-preview {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .amodal-header {
    grid-template-columns: 1fr;
  }
  .amodal-img {
    height: 180px;
    border-radius: 6px 6px 0 0;
    min-height: unset;
  }
  .amodal-header-info {
    padding: 1.2rem 1.3rem 1rem;
  }
  .amodal-name {
    font-size: 1.5rem;
  }
  .amodal-body {
    padding: 1.2rem 1.3rem 1.5rem;
  }
  .amodal-grid {
    grid-template-columns: 1fr;
  }
  .upload-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}