:root {
  --agr-green: #FFFDDF;
  --agr-green-dark: #174921;
  --agr-cream: #FFFDDF;
  --agr-text-dark: #111111;
}

/* basic */
body {
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  padding-top: 60px;          /* kompensasi navbar fixed-top */
  background-color: var(--agr-green-dark);
}

/* ================================= */
/*            NAVBAR AGRIRADAR       */
/* ================================= */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}

/* STATE AWAL (di hero) – hijau, menyatu dengan background */
.navbar-transparent {
  background-color: var(--agr-green);
  box-shadow: none;
}

/* STATE SETELAH SCROLL – putih semi, mengikuti konten di bawah */
.navbar-solid {
  background-color: #FFFDDF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
}

/* brand */
.brand-title {
  letter-spacing: .3px;
  font-weight: 600;
}

/* tombol nav umum */
.nav-btn {
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 500;
  transition: all 0.25s ease;
}

/* warna tombol & teks SAAT AWAL (di atas hero hijau) */
.navbar-transparent .nav-btn {
  color: #174921;
  background-color: transparent;
}
.navbar-transparent .nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.navbar-transparent .brand-title {
  color: #ffffff;
}

/* warna tombol & teks SAAT SCROLL (background putih) */
.navbar-solid .nav-btn {
  color: var(--agr-text-dark);
  background-color: transparent;
}
.navbar-solid .nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.navbar-solid .brand-title {
  color: var(--agr-text-dark);
}

/* LOGIN BUTTON */
.login-btn {
  border-radius: 999px;
  padding-inline: 1.8rem;
  font-weight: 600;
  background-color: var(--agr-cream);
  color: var(--agr-green-dark);
  border: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.login-btn:hover {
  background-color: #eef9cf;
  transform: translateY(-1px);
}

/* pastikan login tetap terbaca di kedua state */
.navbar-solid .login-btn,
.navbar-transparent .login-btn {
  color: var(--agr-green-dark);
}

/* RESPONSIVE NAVBAR (collapse background) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 10px;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  }

  .navbar-transparent .navbar-collapse {
    background-color: rgba(18, 64, 27, 0.96);
  }

  .navbar-solid .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.98);
  }

  .navbar-transparent .nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
  }

  .navbar-solid .nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
  }
}

/* ================================= */
/*            HERO AGRIRADAR         */
/* ================================= */

/* HERO AGRIRADAR – background dasar hijau */
.hero-agriradar {
  min-height: 100vh;
  background-color: #1f6a2f;   /* warna hijau dasar */
  padding: 70px 0 60px;
  display: flex;
  align-items: center;
  color: #ffffff;
  position: relative;          /* penting untuk ::before */
  overflow: hidden;
}

/* TEKSTUR DAUN DI ATASNYA */
.hero-agriradar::before {
  content: "";
  position: absolute;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
  background-image: url("asset/texture-leaf.png");
  background-repeat: repeat;   /* pola diulang */
  background-size: 450px auto; /* ubah angka ini kalau mau pola lebih besar/kecil */
  opacity: 0.15;               /* makin kecil = makin samar */
  mix-blend-mode: soft-light;  /* bikin menyatu dengan hijau */
  pointer-events: none;        /* biar nggak ganggu klik/kursor */
  z-index: 0;
}

/* Konten di dalam hero harus berada di atas tekstur */
.hero-agriradar > .container {
  position: relative;
  z-index: 1;
}

/* teks kiri */
.agr-hero-title {
  color: var(--agr-cream);
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
}

.agr-hero-text {
  max-width: 380px;
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 1rem;
}

/* gambar kanan */
.agr-hero-image-wrap {
  background: #e4f2d0;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.agr-hero-image {
  width: 100%;
  border-radius: 4px;
  display: block;
}

/* responsive hero */
@media (max-width: 991.98px) {
  .hero-agriradar {
    padding-top: 120px;
    text-align: center;
  }
  .agr-hero-text {
    margin-inline: auto;
  }
  .agr-hero-image-wrap {
    margin-top: 24px;
  }
}
/*  */
/* Animasi Fade In (Untuk Teks) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Sedikit bergeser dari bawah ke atas agar halus */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animasi Slide dari Kanan (Untuk Gambar) */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px); /* Mulai 50px dari sebelah kanan */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Kembali ke posisi original */
  }
}

/* ================================= */
/* ANIMATION CLASSES 1      */
/* ================================= */

/* Judul Hero */
.agr-hero-title {
  opacity: 0; /* Sembunyikan di awal */
  animation: fadeInUp 1s ease-out forwards; /* Durasi 1 detik */
}

/* Paragraf Hero */
.agr-hero-text {
  opacity: 0; /* Sembunyikan di awal */
  /* Durasi 1s, tapi delay 0.3s agar muncul setelah judul */
  animation: fadeInUp 1s ease-out 0.3s forwards; 
}

/* Gambar Drone */
.agr-hero-image {
  opacity: 0; /* Sembunyikan di awal */
  /* Durasi 1.2s agar lebih smooth */
  animation: slideInRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; 
}

/* Responsif: Di HP, kita bisa kurangi jarak slide agar tidak overflow */
@media (max-width: 991.98px) {
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(20px); /* Jarak lebih pendek di HP */
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
/* ===================================== */
/*   SECTION TANTANGAN & SOLUSI AGRI     */
/* ===================================== */

.agr-section-challenge {
  background-color: #FFFDDF;   /* krem lembut */
  padding: 70px 0 80px;
}

/* corner shape hijau muda di atas */
.agr-photo-card::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background-color: #c7df9b;
  border-bottom-right-radius: 80px;
  z-index: -1;
}

.agr-photo-img {
  display: block;
  width: 90%;
  height: 50%;
}

/* teks */
.agr-eyebrow {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7b8a5b;
  font-weight: 600;
}

.agr-challenge-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #1f6a2f;
  line-height: 1.3;
}

.agr-challenge-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #445033;
}

/* checklist tantangan */
.agr-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agr-checklist li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.check-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background-color: #e1f3c2;
  color: #1f6a2f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.agr-checklist p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #4f5a3a;
}

/* solusi & benefits */
.agr-solution-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f6a2f;
  line-height: 1.4;
}

/* card benefit */
.agr-benefit-card {
  background-color: #e4edc7;
  border-radius: 20px;
  padding: 18px 18px 20px;
  height: 100%;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.agr-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 999px;
  background-color: #cddc9a;
  color: #395023;
  font-weight: 600;
  margin-bottom: 10px;
}

.agr-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #1f6a2f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f1cf;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.agr-benefit-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f6a2f;
  margin-bottom: 6px;
}

.agr-benefit-text {
  font-size: 0.88rem;
  color: #4f5a3a;
  margin: 0;
}

/* tombol Next */
.agr-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: #1f6a2f;
  color: #f5f1cf;
  border-radius: 999px;
  padding: 10px 22px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agr-next-circle {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background-color: #d7f0b0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f6a2f;
  font-size: 0.9rem;
}

.agr-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.25);
}

/* responsive tweak */
@media (max-width: 991.98px) {
  .agr-section-challenge {
    padding-top: 50px;
  }
  .agr-challenge-title {
    font-size: 1.6rem;
  }
  .agr-solution-title {
    margin-top: 10px;
  }
  .agr-photo-card::before {
    width: 120px;
    height: 120px;
  }
}
/* ================================= */
/* SCROLL ANIMATION CLASSES 2      */
/* ================================= */

/* Keadaan Awal (Sebelum di-scroll) */
.reveal-up {
  opacity: 0;
  transform: translateY(60px); /* Geser ke bawah 60px */
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Transisi halus */
}

/* Keadaan Aktif (Saat JS mendeteksi scroll) */
.reveal-up.active {
  opacity: 1;
  transform: translateY(0); /* Kembali ke posisi asal */
}

/* OPSI TAMBAHAN: Delay untuk kartu agar muncul satu per satu */
/* Tambahkan class ini ke kartu ke-2 dan ke-3 jika ingin efek berurutan */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* integrated system flow */
/* ================================= */
/* SECTION: SYSTEM CYCLE        */
/* ================================= */

.agr-cycle-section {
  background-color: #FFFDDF; /* Warna background sesuai request */
  padding: 100px 0;
  position: relative;
  overflow: hidden; /* Mencegah scrollbar horizontal jika gambar keluar */
}

/* Typography Header */
.agr-cycle-subtitle {
  color: #ADBA77;
  font-size: 1.4rem; /* Setara 32px responsif */
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.agr-cycle-title {
  color: #2A611F;
  font-size: clamp(2rem, 4vw, 3.5rem); /* Responsif: Min 2rem, Max 3.5rem (64px) */
  font-weight: 700;
  line-height: 1.1;
  font-family: "Outfit", sans-serif; /* Fallback font */
}

/* Timeline Wrapper */
.agr-timeline-wrapper {
  position: relative;
  margin-top: 3rem;
}

/* Timeline Item Row */
.agr-timeline-item {
  position: relative; 
  display: flex;
  gap: 30px;
  margin-bottom: 50px; /* Jarak antar item */
  z-index: 1;
}
.agr-timeline-item::before {
  content: '';
  position: absolute;
  left: 37.5px;                /* Posisi tengah icon (75px / 2) */
  transform: translateX(-50%); /* Pastikan garis benar-benar di tengah as */
  top: 0;
  
  /* KUNCI RAHASIA: Tinggi garis = tinggi konten item + jarak margin ke bawah */
  height: calc(100% + 50px);   
  
  width: 3px;
  background-color: #D9D9D9;
  z-index: -1; /* Taruh di belakang icon */
}

.agr-timeline-item:last-child::before {
  display: none;
}

/* Marker / Lingkaran Icon */
.agr-timeline-marker {
  flex-shrink: 0;
}

.agr-icon-circle {
  width: 75px;
  height: 75px;
  background-color: #BDCA9A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #2A611F;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Bisa diganti tag img di HTML jika mau pakai gambar PNG icon */
.agr-icon-circle img {
  width: 50%;
  height: auto;
}

/* Konten Teks Timeline */
.agr-timeline-content {
  padding-top: 10px; /* Visual adjustment agar sejajar icon */
}

.agr-item-title {
  color: #205B1C; /* Warna hijau gelap sesuai request */
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  margin-bottom: 12px;
}

.agr-item-desc {
  color: #ADBA77; /* Warna dasar teks deskripsi */
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  font-weight: 400;
}

/* Style khusus untuk span yang di-highlight (Bold + Italic + Hijau Tua) */
.agr-highlight {
  color: #205B1C;
  font-weight: 700;
  font-style: italic;
}

/* Gambar Rotasi di Kanan */
.agr-cycle-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.agr-rotated-img {
  transform: rotate(-4deg); /* Memutar gambar -4 derajat */
  border-radius: 16px;
  box-shadow: 20px 20px 60px rgba(42, 97, 31, 0.15);
  transition: transform 0.5s ease;
  max-width: 80%; /* Agar tidak terlalu besar */
}

/* Efek hover interaktif sedikit */
.agr-rotated-img:hover {
  transform: rotate(0deg) scale(1.02);
}

/* RESPONSIVE (HP) */
@media (max-width: 768px) {
  .agr-cycle-section {
    padding: 60px 0;
  }
  
  .agr-timeline-wrapper::before {
    left: 24px; /* Sesuaikan garis di HP */
  }

  .agr-icon-circle {
    width: 50px; /* Perkecil icon di HP */
    height: 50px;
    font-size: 20px;
  }

  .agr-item-title {
    font-size: 1.25rem;
  }
  
/* ================================= */
/* CUSTOM SCROLL ANIMATIONS (SECTION 3) */
/* ================================= */

/* 1. Base Style (Semua elemen animasi mulai dari opacity 0) */
.reveal-left, 
.reveal-right, 
.reveal-down, 
.reveal-fade {
  opacity: 0;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Easing smooth */
}

/* 2. Posisi Awal (Sebelum Scroll) */

/* Hijau & Pink: Dari Kiri */
.reveal-left {
  transform: translateX(-60px);
}

/* Kuning: Dari Kanan */
.reveal-right {
  transform: translateX(60px);
}

/* Biru: Dari Atas (Drone turun) */
.reveal-down {
  transform: translateY(-80px); /* Jarak agak jauh biar kerasa 'terbang' */
}

/* Kotak Background: Diam, cuma transparan */
.reveal-fade {
  transform: scale(0.98); /* Sedikit efek zoom in halus opsional, atau hapus baris ini kalau mau diam total */
}


/* 3. Keadaan Aktif (Saat Scroll Kena) */
.reveal-left.active, 
.reveal-right.active, 
.reveal-down.active, 
.reveal-fade.active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* 4. Delay Utilitas (Agar timeline muncul satu-satu) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-500 { transition-delay: 0.5s; } /* Untuk Drone muncul belakangan */
  
  /* Gambar disembunyikan atau ditaruh bawah (class d-none d-lg-block di HTML menyembunyikan di HP) */
}
/* ================================= */
/* SECTION: HARDWARE BREAKDOWN       */
/* ================================= */

.agr-hardware-section {
  background-color: #FFFDDF;
  padding: 100px 0 120px;
  overflow: hidden; /* Mencegah elemen lingkaran keluar layar */
}

/* Typography Header */
.agr-hardware-eyebrow {
  color: #ADBA77;
  font-size: 1.5rem; /* ~24px - 32px scaled */
  font-weight: 700;
  line-height: 1.2;
}

.agr-hardware-title {
  color: #2A611F;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2rem;
}

/* --- GRID & CARDS --- */

.agr-tech-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 550px; /* Tinggi fix agar seragam */
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.agr-tech-card:hover {
  transform: translateY(-5px);
}

/* Background Image Setting */
.agr-card-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gradient Overlays (Sesuai Desain) */
.agr-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.9; /* Sedikit transparan agar gambar terlihat */
}

/* Variasi Gradient tiap kartu */
.overlay-1 { background: linear-gradient(319deg, rgba(0,0,0,0.4) 0%, rgba(60,60,60,0.6) 100%); }
.overlay-2 { background: linear-gradient(46deg, rgba(0,0,0,0.4) 0%, rgba(60,60,60,0.6) 100%); }
.overlay-3 { background: linear-gradient(223deg, rgba(0,0,0,0.4) 0%, rgba(60,60,60,0.6) 100%); }
.overlay-4 { background: linear-gradient(139deg, rgba(0,0,0,0.4) 0%, rgba(60,60,60,0.6) 100%); }

/* Isi Konten Kartu */
.agr-card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  z-index: 2;
  display: flex;            /* Wajib ada agar bisa diatur posisinya */
  flex-direction: column;   /* Agar susunan vertikal (atas ke bawah) */
  justify-content: flex-start; /* Posisi Vertikal: Atas */
  align-items: flex-start;     /* Posisi Horizontal: Kiri */
  text-align: left;            /* Arah teks: Kiri */
}

/* Khusus kartu sebelah kanan (opsional, agar variatif) */
@media (min-width: 992px) {
  .content-right {
    align-items: flex-end;   /* Pindahkan elemen ke sisi Kanan */
    text-align: right;       /* Buat teks paragraf rata kanan */
  }
  
  /* Opsional: Mengubah arah bayangan badge agar lebih rapi di kanan */
  .content-right .agr-card-badge-wrap::before {
    left: auto;   
    right: -8px;  
  }
}

/* 3. Penyesuaian Mobile (Kembali ke Rata Kiri agar rapi) */
@media (max-width: 991.98px) {
  .agr-card-content {
    padding: 24px;
    /* Di HP kita abaikan content-right, kembali ke default align-items: flex-start */
    align-items: flex-start !important;
    text-align: left !important;
  }
}
/* Badge Style (Efek tumpuk) */
.agr-card-badge-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

/* Kotak hijau muda di belakang (shadow effect) */
.agr-card-badge-wrap::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 8px;
  width: 100%;
  height: 100%;
  background-color: #BDCA9A;
  border-radius: 10px;
  z-index: -1;
}

/* Teks Badge Utama */
.agr-card-badge {
  display: block;
  background-color: #ADBA77;
  color: #174921; /* Hijau gelap untuk kontras */
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  font-family: "Outfit", sans-serif;
}

.agr-card-desc {
  color: #F7F8FC;
  font-size: 1.1rem; /* 18px */
  font-weight: 600;
  line-height: 1.5;
  max-width: 400px; /* Agar teks tidak terlalu lebar */
  margin: 0;
}

/* --- CENTER PIECE (Lingkaran Tengah) --- */
.agr-center-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Paling atas */
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Biar klik tembus ke kartu di bawahnya */
}

.agr-center-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #BDCA9A;
  border-radius: 50%;
  opacity: 0.95;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.agr-center-img {
  position: relative;
  width: 75%; /* 75% dari container 500px */
  height: auto;
  transform: rotate(-3deg);
  z-index: 11;
  border-radius: 12px;
}

/* RESPONSIVE TWEAK */
@media (max-width: 991.98px) {
  .agr-hardware-section {
    padding: 60px 0;
  }
  .agr-hardware-eyebrow {
    margin-bottom: 10px;
  }
  .agr-tech-card {
    height: 400px; /* Di HP lebih pendek sedikit */
  }
  .agr-card-content {
    padding: 24px;
  }
  .agr-card-badge {
    font-size: 1rem;
    padding: 8px 16px;
  }
  .agr-card-desc {
    font-size: 0.95rem;
  }
  /* Center piece hilang otomatis via class d-none d-lg-flex */
}
/* ================================= */
/* SECTION: COMMAND CENTER (DSS)     */
/* ================================= */

.agr-command-section {
  background-color: #2E6325; /* Warna hijau tua sesuai desain */
  padding: 100px 0;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Menggunakan tekstur daun yang sama dengan Hero (Opsional) */
.agr-command-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("asset/texture-leaf.png"); /* Pastikan path gambar benar */
  background-repeat: repeat;
  background-size: 450px auto;
  opacity: 0.1; /* Sedikit lebih tipis agar teks terbaca */
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Agar konten berada di atas background texture */
.agr-command-section .container {
  position: relative;
  z-index: 1;
}

/* Typography */
.agr-command-eyebrow {
  color: #ADBA77;
  font-size: 1.5rem; /* ~24px - 32px */
  font-weight: 700;
  margin-bottom: 1rem;
}

.agr-command-title {
  color: #FFFDDF; /* Warna Cream/Kuning pucat */
  font-size: clamp(2rem, 4vw, 3.5rem); /* Responsif 64px */
  font-weight: 700;
  line-height: 1.1;
}

.agr-command-intro {
  color: #F7F8FC;
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  max-width: 950px;
  line-height: 1.6;
}

.agr-body-text-com {
  color: #F7F8FC;
  font-size: 1.25rem; /* 20px */
  font-weight: 500; /* Sedikit lebih tipis dari intro */
  line-height: 1.6;
}

/* Images Utilities */
.agr-img-wrapper img {
  height: 415px; /* Tinggi fixed sesuai desain agar sejajar */
  width: 100%;
}

/* Legend System (Kotak Warna) */
.agr-legend-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Posisi di tengah */
  gap: 30px; /* Jarak antar item */
  margin-top: 20px;
}

.agr-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legend-box {
  width: 52px;
  height: 45px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.agr-legend-item span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

/* RESPONSIVE TWEAKS */
@media (max-width: 991.98px) {
  .agr-command-section {
    padding: 60px 0;
  }
  
  /* Gambar menjadi tinggi otomatis di HP agar tidak gepeng */
  .agr-img-wrapper img {
    height: auto;
    aspect-ratio: 16/9;
  }
  
  .agr-command-intro, 
  .agr-body-text {
    font-size: 1rem; /* Kecilkan font text di HP */
  }

  /* Legend jadi lebih rapat di HP */
  .agr-legend-container {
    gap: 15px;
    justify-content: flex-start; /* Rata kiri di HP jika mau, atau tetap center */
  }
  
  .legend-box {
    width: 40px;
    height: 35px;
  }
  
  .agr-legend-item span {
    font-size: 0.9rem;
  }
}
/* ========================================== */
/* SECTION: PARTNERS & PROJECTS (FINAL FIX Z-INDEX) */
/* ========================================== */

.agr-partners-section {
  background-color: #FFFDDF;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

/* --- JUDUL UTAMA --- */
.agr-command-eyebrow {
  color: #ADBA77;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.agr-command-title-partner {
  color: #2E6325;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%; 
}

/* --- KOMPOSIT DRONE (KIRI) --- */

/* Wrapper utama untuk area kiri */
/* Wrapper utama */
.agr-drone-composite {
  position: relative;
  width: 100%;
  height: 500px; /* Tinggi area aman */
}

/* 1. Background Shape (Kotak Kosong di Belakang Atas) */
.agr-drone-bg-shape {
  position: absolute;
  top: 0;
  left: 200px;      /* Geser ke kanan agar muncul di belakang drone */
  width: 180px;     /* Lebar sedang */
  height: 220px;    /* Tinggi sedang */
  background-color: #BDCA9A; /* Hijau muda */
  border-radius: 25px;
  z-index: 1;       /* Layer paling belakang */
}

/* 2. Box Teks (Kotak Trusted di Depan Bawah) */
.agr-trusted-box {
  position: absolute;
  top: 140px;       /* Posisi mulai dari bawah kotak background */
  left: 30px;          /* Rata kiri */
  width: 260px;     /* Lebar kotak teks diperbesar */
  height: 300px;    /* Tinggi diperbesar agar memanjang ke bawah */
  background-color: #ADBA77; /* Hijau tua */
  border-radius: 25px;
  padding: 30px;
  padding-top: 100px; /* Memberi ruang kosong di atas untuk drone */
  z-index: 2;       /* Di tengah */
  display: flex;
  align-items: center; /* Teks vertikal tengah ke bawah */
  justify-content: flex-start;
  text-align: left;
}

.agr-trusted-title {
  color: #2E6325;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* 3. Gambar Drone (Paling Depan) */
.agr-drone-img {
  position: absolute;
  top: 50px;        /* Posisi vertikal pas di perpotongan kotak */
  left: 100px;       /* Posisi horizontal */
  width: 100%;
  max-width: 250px; /* Ukuran drone besar proporsional */
  height: auto;
  z-index: 3;       /* Paling depan */
  transform: rotate(-4deg);
  filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.15));
}

.agr-trusted-title {
  color: #2E6325;
  font-size: 1.5rem; /* Font sedikit diperbesar agar pas dengan kotaknya */
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}


/* --- GALERI (KANAN) --- */
.agr-gallery-img {
  height: 220px;
  object-fit: cover;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.agr-gallery-img:hover {
  transform: translateY(-5px);
}


/* --- DAFTAR PROJECT & MITRA --- */
.agr-project-card {
  background-color: #2E6325;
  border-radius: 25px;
  padding: 40px 50px;
  color: #ffffff;
  position: relative;
  margin-top: 40px;
}

.agr-card-header {
  color: #BDCA9A;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.agr-project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agr-project-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #FFFDDF;
}

.agr-project-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  background-color: #BDCA9A;
  border-radius: 50%;
}

.agr-mitra-name {
  font-size: 2rem;
  font-weight: 600;
  color: #FFFDDF;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991.98px) {
  .agr-drone-composite {
    height: auto;
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .agr-drone-bg-shape {
    position: static;
    width: 80%;
    height: 300px;
    margin-bottom: -150px;
  }

  .agr-drone-img {
    position: static;
    transform: none;
    margin-bottom: -50px;
    max-width: 300px;
  }

  .agr-trusted-box {
    position: static;
    width: 80%;
    margin-top: 20px;
  }

  .agr-project-card {
    padding: 30px;
  }
  
  .agr-card-header {
    font-size: 1.5rem;
  }

  .agr-project-list li {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
}
/* ================================= */
/* SECTION: R&D TIMELINE             */
/* ================================= */

.agr-timeline-section {
  background-color: #FFFDDF;
  padding: 50px 0 100px;
}

.agr-timeline-main-title {
  color: #2E6325;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Wrapper Timeline Vertikal */
.agr-timeline-vertical {
  position: relative;
  padding: 40px 0;
}

/* Garis Tengah */
.agr-timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #D9D9D9; /* Warna garis abu-abu */
  transform: translateX(-50%);
  z-index: 0;
}

/* Dot Tengah */
.agr-timeline-dot {
  width: 26px;
  height: 26px;
  background-color: #2E6325;
  border-radius: 50%;
  border: 4px solid #FFFDDF; /* Border putih/krem agar terpisah dari garis */
  display: inline-block;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px #2E6325; /* Efek outline */
}

/* Badge Tahun (2026, 2027) */
.agr-year-badge {
  background-color: #BDCA9A;
  color: #2E6325;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 10px 30px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Teks Sub-Timeline (Estimasi, dll) */
.agr-timeline-sub {
  color: #2A611F;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Feature Title (Pest Detection, etc) */
.agr-feature-title {
  color: #929F70;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* RESPONSIVE TIMELINE (HP) */
@media (max-width: 991.98px) {
  /* Sembunyikan garis tengah di HP */
  .agr-timeline-line {
    left: 20px; /* Pindah ke kiri */
  }
  
  .agr-timeline-dot {
    display: none; /* Sembunyikan dot di HP agar layout simple stack */
  }

  .agr-timeline-row {
    display: flex;
    flex-direction: column;
    text-align: left !important; /* Paksa rata kiri */
    margin-bottom: 60px;
    position: relative;
    padding-left: 20px; /* Ruang untuk border kiri jika mau */
  }

  /* Reset alignment */
  .agr-timeline-row .col-lg-5,
  .agr-timeline-row h4,
  .agr-timeline-row h5 {
    text-align: left !important;
  }

  /* Badge pindah ke kiri */
  .agr-year-badge {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  /* Gambar Pest Detection */
  .d-flex {
    justify-content: flex-start !important;
  }
}
/* ========================================== */
/* SECTION: ADVANTAGES & SERVICES            */
/* ========================================== */

.agr-advantages-section {
  background-color: #1f6a2f; /* Warna hijau background sesuai Figma */
  padding: 100px 0;
  position: relative;
  color: #BDCA9A; /* Warna teks utama */
  overflow: hidden;
}

/* Overlay Tekstur Daun (Agar background tidak flat) */
.agr-advantages-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("asset/texture-leaf.png"); /* Pastikan path ini benar */
  background-repeat: repeat;
  background-size: 450px auto;
  opacity: 0.1; /* Transparansi rendah agar tekstur halus */
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Container content harus di atas background overlay */
.agr-advantages-section .container {
  position: relative;
  z-index: 1;
}

/* Typography */
.agr-adv-title {
  color: #BDCA9A;
  font-size: clamp(2.5rem, 5vw, 4rem); /* Responsif: min 40px, max 64px */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.agr-adv-subtitle {
  font-size: 2rem; /* Sekitar 32px */
  font-weight: 700;
  margin-bottom: 16px;
  color: #BDCA9A;
}

.agr-adv-text {
  font-size: 1.25rem; /* Sekitar 20px - 24px agar mudah dibaca */
  font-weight: 400;
  line-height: 1.6;
  color: #BDCA9A;
}

/* Styling List Benefit */
.agr-adv-list {
  list-style: none; /* Hilangkan bullet default browser */
  padding: 0;
  margin: 0;
}

.agr-adv-list li {
  position: relative;
  padding-left: 35px; /* Ruang untuk bullet custom */
  margin-bottom: 24px;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #BDCA9A;
}

/* Bullet Custom (Lingkaran) */
.agr-adv-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px; /* Sesuaikan vertikal bullet dengan baris pertama teks */
  width: 14px;
  height: 14px;
  background-color: #BDCA9A;
  border-radius: 50%;
}

/* Responsive Mobile */
@media (max-width: 991.98px) {
  .agr-advantages-section {
    padding: 60px 0;
  }
  
  .agr-adv-subtitle {
    font-size: 1.5rem;
  }
  
  .agr-adv-text, 
  .agr-adv-list li {
    font-size: 1rem; /* Perkecil font body di HP */
  }
  
  .agr-adv-list li::before {
    width: 10px;
    height: 10px;
    top: 8px;
  }
}
/* ========================================== */
/* SECTION: PILOT PROJECT & SCALING          */
/* ========================================== */

.agr-pilot-section {
  background-color: #FFFDDF;
  padding: 100px 0;
  color: #2E6325;
}

/* Judul Section (Hijau Tua) */
.agr-section-title {
  color: #386D27;
  font-size: clamp(2rem, 4vw, 3.5rem); /* Responsif */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

/* Teks Deskripsi Umum */
.agr-body-text {
  font-size: 1.25rem; /* ~20px */
  line-height: 1.6;
  color: #2E6325;
  font-weight: 400;
}

/* --- PILOT CARDS --- */
.agr-pilot-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 200px; /* Tinggi fix agar seragam */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.agr-pilot-card:hover {
  transform: translateY(-5px);
}

.agr-pilot-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient Overlay (Hitam transparan ke Hijau) */
.agr-pilot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #181F02 0%, rgba(142, 174, 30, 0.4) 100%);
  z-index: 1;
}

.agr-pilot-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 25px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Badge Hijau Muda */
.agr-pilot-badge {
  background-color: #BDCA9A;
  color: #205B1C;
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: inline-block;
  /* Efek layer tumpuk di badge (opsional, meniru desain) */
  box-shadow: -5px -5px 0px #ADBA77; 
}

.agr-pilot-desc {
  color: #F7F8FC;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* Panah Penghubung */
.agr-arrow-icon {
  font-size: 3rem;
  color: #386D27;
}

/* --- PROCESS FLOW (FLOWCHART) --- */
.agr-process-flow {
  padding: 20px 0;
}

.agr-flow-box {
  background-color: #B8C991;
  border-radius: 18px;
  padding: 30px;
  height: 100%;
  min-height: 180px; /* Tinggi minimum agar kotak sama tinggi */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.agr-flow-title {
  color: #205B1C;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.agr-flow-arrow {
  font-size: 2.5rem;
  color: #386D27;
}

/* --- APPLICATION SCOPE --- */
.agr-scope-box {
  border-left: 5px solid #386D27;
  padding-left: 20px;
  margin-top: 20px;
}

.agr-scope-label {
  color: #2E6325;
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 10px;
}

.agr-scope-items {
  color: #2E6325;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}

/* RESPONSIVE (MOBILE) */
@media (max-width: 991.98px) {
  .agr-pilot-card {
    height: auto; /* Tinggi otomatis di HP */
    min-height: 220px;
  }
  
  .agr-arrow-icon {
    transform: rotate(90deg); /* Panah jadi ke bawah di HP */
    margin: 20px 0;
  }

  .agr-flow-arrow {
    transform: rotate(90deg); /* Panah flow jadi ke bawah */
    margin: 20px 0;
  }
  
  .agr-section-title {
    text-align: center !important;
    font-size: 2rem;
  }
  
  .agr-body-text {
    text-align: center !important;
    font-size: 1rem;
  }
  
  .agr-scope-items {
    font-size: 1.1rem;
    display: block; /* Turun baris di HP */
    margin-top: 5px;
  }
}
/* ========================================== */
/* SECTION: DOCUMENTATION & DEMO             */
/* ========================================== */

.agr-docs-section {
  background-color: #1f6a2f; /* Hijau tua sesuai Figma */
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

/* Overlay Tekstur Daun */
.agr-docs-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("asset/texture-leaf.png"); /* Gunakan aset yang sama */
  background-repeat: repeat;
  background-size: 450px auto;
  opacity: 0.1; 
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

.agr-docs-section .container {
  position: relative;
  z-index: 1;
}

/* Typography */
.agr-docs-title {
  color: #BDCA9A;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Video Card Style */
.agr-video-card {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.agr-video-card:hover {
  transform: translateY(-5px);
}

.agr-video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Rasio 16:9 */
  background-color: #000;
}

.agr-video-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play Button Overlay */
.agr-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.2);
  transition: background 0.3s;
}

.agr-video-card:hover .agr-play-overlay {
  background-color: rgba(0,0,0,0.1);
}

.agr-play-circle {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #212121;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Content Text */
.agr-video-content {
  padding: 20px;
}

.agr-video-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Batasi judul 1 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom Button (Our Website) */
.agr-website-btn {
  display: inline-block;
  background-color: #FFFDDF; /* Cream */
  color: #3C7128; /* Hijau Teks */
  font-weight: 700;
  font-size: 1.25rem;
  padding: 12px 40px;
  border-radius: 10px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  transition: transform 0.2s;
  border: none;
}

.agr-website-btn:hover {
  transform: scale(1.05);
  color: #2E531F;
}

/* Responsive */
@media (max-width: 991.98px) {
  .agr-docs-section {
    padding: 60px 0;
  }
  .agr-docs-title {
    font-size: 2rem;
  }
  .agr-website-btn {
    display: block;
    text-align: center;
    width: 100%;
  }
}
/* Tambahan CSS untuk Iframe YouTube */
.agr-video-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Menghilangkan border bawaan iframe */
}
/* ========================================== */
/* FOOTER                                    */
/* ========================================== */

.agr-footer {
  background-color: #FFFDDF; /* Hijau sesuai desain Figma */
  padding: 80px 0 40px;
  color: #1f6a2f; /* Warna Cream */
  position: relative;
  overflow: hidden;
}

/* Overlay Tekstur Daun (Konsisten dengan section lain) */
.agr-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("asset/texture-leaf.png"); 
  background-repeat: repeat;
  background-size: 450px auto;
  opacity: 0.05; /* Sangat tipis agar tidak mengganggu teks */
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

.agr-footer .container {
  position: relative;
  z-index: 1;
}

/* Logo */
.agr-footer-logo {
  height: 80px; /* Sesuaikan ukuran logo */
  width: auto;
  object-fit: contain;
  /* Filter agar logo terlihat bagus di background hijau (opsional) */
  /* filter: brightness(0) invert(1);  <- Aktifkan jika ingin logo jadi putih polos */
}

/* Text Styles */
.agr-footer-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #1f6a2f;
  opacity: 0.9;
}

.agr-footer-contact {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f6a2f;
}

/* Navigation Column */
.agr-footer-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1f6a2f;
}

.agr-footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agr-footer-nav li {
  margin-bottom: 12px;
}

.agr-footer-nav a {
  color: #1f6a2f;
  text-decoration: none;
  font-size: 1.25rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.agr-footer-nav a:hover {
  transform: translateX(5px); /* Efek geser saat hover */
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 253, 223, 0.5);
}

/* Map Wrapper */
.agr-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border: 2px solid rgba(255, 253, 223, 0.2);
}

/* Copyright Area */
.agr-divider {
  border-color: rgba(255, 253, 223, 0.3);
  margin: 40px 0 30px;
}

.agr-copyright p {
  font-size: 1rem;
  opacity: 0.8;
}

/* Responsive Mobile */
@media (max-width: 991.98px) {
  .agr-footer {
    padding: 60px 0 30px;
    text-align: left;
  }
  
  .agr-footer-logo {
    height: 60px;
  }
  
  .agr-footer-title {
    margin-top: 20px;
    font-size: 1.5rem;
  }
  
  .agr-footer-text,
  .agr-footer-nav a {
    font-size: 1rem;
  }
}

/* ANIMASI SCROLL SECTION 3 */
.reveal-left, .reveal-right, .reveal-down, .reveal-fade {
  opacity: 0;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Posisi Awal */
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-down { transform: translateY(-80px); }
.reveal-fade { transform: scale(0.98); }

/* Posisi Akhir (Active) */
.reveal-left.active, 
.reveal-right.active, 
.reveal-down.active, 
.reveal-fade.active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Delay */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-500 { transition-delay: 0.5s; }