:root {
  --brand: #E20B1A;
  --dark-brown: #662222;
}

body {
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  padding-top: 80px; /* Added to prevent content from hiding behind fixed navbar */
}

/* ===== NAVBAR STYLING ===== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: none;
}

/* Navbar saat transparan (awal) */
.navbar-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Navbar saat solid (setelah scroll) */
.navbar-solid {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px); /* Optional: adds blur effect behind navbar */
}

/* Navbar brand dan button styling */
.navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand-title {
  letter-spacing: .3px;
}

.nav-btn {
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-weight: 500;
  color: #000; /* Default color untuk state transparan */
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.login-btn {
  box-shadow: 4px 8px 4px rgba(0, 0, 0, .25);
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 6px 10px 6px rgba(0, 0, 0, .2);
}

/* Warna teks navbar saat transparan */
.navbar-transparent .nav-btn {
  color: #000;
}

.navbar-transparent .navbar-brand span {
  color: #000;
}

/* Warna teks navbar saat solid */
.navbar-solid .nav-btn {
  color: #000;
}

.navbar-solid .navbar-brand span {
  color: #000;
}

/* ===== HERO SECTION ===== */
.hero {
  /* Background tetap sama */
  background: linear-gradient(135deg, #ffffff 0%, #ffe3e3 50%, #E20B1A 100%);
  
  /* UBAH BAGIAN INI: */
  min-height: 85vh;        /* Tinggi section sedikit dikurangi (opsional) */
  display: flex;           /* Ganti Grid ke Flex agar lebih mudah kontrol vertikalnya */
  align-items: flex-start; /* KUNCI: Membuat konten menempel ke ATAS, bukan di tengah */
  
  /* ATUR POSISI NAIK TURUN DI SINI: */
  padding-top: 140px;       /* Semakin kecil angkanya, semakin naik ke atas */
  padding-bottom: 40px;    /* Memberi ruang di bawah agar tidak terlalu mepet */
  
  position: relative;
  overflow: hidden;
}

.hero-text-container {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px); /* Efek kaca buram */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}
.hero-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.text-dot {
  color: #000;
}

.text-brand {
  color: var(--brand);
}

.text-dark-brown {
  color: var(--dark-brown);
}

.hero-sub {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

/* Hero Image with Circular Mask */
.hero-image {
  position: relative;
  z-index: 5;          /* Pastikan di atas lingkaran */
  width: auto;         /* Biarkan lebar menyesuaikan aspek rasio gambar */
  max-width: 100%;      /* Batasi agar tidak terlalu raksasa (bisa ubah ke 70% atau 90%) */
  height: auto;        /* Jaga proporsi agar tidak gepeng */
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* Accent circles for the background */
.accent-circle-1,
.accent-circle-2 {
  position: absolute;
  border-radius: 9999px;
  z-index: 1;
}

.accent-circle-1 {
  width: 167px;
  height: 167px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  top: 4rem;
  right: 15rem;
  filter: blur(.2px);
}

.accent-circle-2 {
  /* Ganti background solid dengan gradasi transparan */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  width: 500px;
  height: 500px;
  position: absolute;
  /* Sesuaikan posisi agar pas di belakang logo */
  right: -50px; 
  bottom: -50px;
  z-index: 1;
}

/* Adding text overlay on the image */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  z-index: 3;
}

/* ===== ARTICLES SECTION ===== */
#articles {
  background-color: #f8f9fa;
}

.card {
  transition: transform 0.2s ease-in-out;
  border: none;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-img-top {
  object-fit: cover;
  height: 200px;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.card-text {
  font-size: 0.95rem;
  color: #6c757d;
}

.innovation-box {
  padding: 40px;
  text-align: center;
  border-radius: 8px;
}

.innovation-box h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #090909;
}

.innovation-box p {
  font-size: 1.5rem;
  font-weight: 400;
  color: #000000;
}

/* ===== ABOUT SECTION ===== */
/* ===== ABOUT (layout seperti contoh) ===== */
#about{
  background:#fff;                 /* putih bersih seperti gambar */
  padding-top:80px; padding-bottom:80px;
}

/* Kicker di kanan */
.about-kicker{
  display:flex; align-items:center; justify-content:flex-end;
  gap:12px; margin-bottom:8px;
}
.kicker-bar{ width:56px; height:10px; background:#E20B1A; border-radius:6px; }
.kicker-text{ font-weight:700; color:#2B2B2B; letter-spacing:.2px; }

/* Judul 2 baris, baris 1 merah, baris 2 hitam – rata kanan */
.about-title-merged {
  font-family: "Outfit", system-ui, -apple-system, Segoe UI;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  text-align: right;   /* sesuai desain kamu */
  margin-bottom: 20px;
  word-break: break-word;
}

.about-title-merged .red {
  color: #E20B1A;
}

.about-title-merged .black {
  color: #000;
}
/* Deskripsi & tombol rata kanan */
.about-desc{
  text-align:right; color:#4A4A4A; font-size:clamp(13px,1.6vw,16px);
  line-height:1.65; margin:0 0 14px;
}
.about-btn-wrap {
  display: flex;
  justify-content: flex-end;
}
.about-cta{
  display:inline-flex; align-items:center; gap:14px;
  margin-left:auto; text-decoration:none;
  background:#E20B1A; color:#fff; font-weight:700;
  padding:12px 22px; border-radius:999px;
  box-shadow:0 10px 14px rgba(226,11,26,.25);
}
.about-cta .arrow{
  background:#fff; color:#E20B1A; border-radius:999px;
  font-style:normal; font-weight:900; line-height:1; padding:6px 9px;
}

/* Kiri: komposisi foto + lingkaran merah */
.about-photos{ position:relative; height:360px; }
.about-circle{
  position:absolute; inset:auto; left:0; top:20px;
  width:310px; height:310px; background:#E20B1A; border-radius:999px;
  transform:translateX(10%); z-index:0; opacity:.95;
}
.ph{ position:absolute; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.15); }
.ph-1{ width:300px; height:200px; object-fit:cover; left:14px; top:0; z-index:2; }
.ph-2{ width:240px; height:160px; object-fit:cover; left:40%; bottom:6px; transform:translateX(-50%); z-index:2; }
.ph-3{ width:220px; height:145px; object-fit:cover; left:0; top:48%; transform:translateY(-50%); z-index:2; }

/* Responsif */
@media (max-width: 991.98px){
  .about-title, .about-desc{ text-align:left; }        /* di tablet/HP jadi rata kiri */
  .about-kicker{ justify-content:flex-start; }
  .about-cta{ margin-left:0; }
  .about-photos{ height:300px; }
  .about-circle{ width:260px; height:260px; }
  .ph-1{ width:260px; height:170px; }
  .ph-2{ width:210px; height:140px; }
  .ph-3{ width:190px; height:126px; }
}
@media (max-width: 576px){
  .about-photos{ height:260px; }
  .about-circle{ width:220px; height:220px; transform:translateX(0); }
}


/* ===== CONTACT & LOGIN SECTIONS ===== */
/* ===== CONTACT LANDING ===== */
.contact-landing{
  background:#ffffff;
  padding-top:80px;
  padding-bottom:80px;
}

.contact-illu{
  max-width: 380px;
}

/* text di kanan */
.contact-kicker{
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:#7c7c7c;
}

.contact-title{
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing:.08em;
  text-transform: uppercase;
  color:#1f2640;            /* biru tua seperti contoh */
}

.contact-subtitle{
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing:.25em;
  text-transform: uppercase;
  color:#E20B1A;            /* ungu muda */
}

.contact-text{
  font-size: .95rem;
  color:#616161;
  max-width: 420px;
}

/* tombol contact */
.contact-btn-wrap{
  display:flex;
  justify-content:flex-start;   /* kalau mau ke kanan: flex-end */
}

.contact-btn{
  background:#E20B1A;           /* ungu seperti gambar */
  border-radius:999px;
  padding:10px 28px;
  border:none;
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  box-shadow:0 10px 20px rgba(138,123,229,.35);
}
.contact-btn:hover{
  background:#7666dc;
  color:#fff;
}

/* responsif */
@media (max-width: 767.98px){
  .contact-illu{
    max-width:260px;
    margin-bottom:20px;
  }
  .contact-text{
    max-width:none;
  }
}

#login
#login {
  background-color: #f8f9fa;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 991.98px) {
  .accent-circle-1 {
    top: -1rem;
    right: 2rem;
    width: 120px;
    height: 120px;
  }

  .accent-circle-2 {
    width: 280px;
    height: 280px;
    right: -1rem;
    bottom: -1rem;
  }

  .hero-image {
    margin-top: 60px;
  }
  
  .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 767.98px) {
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-text {
    font-size: 0.9rem;
  }
  
  .innovation-box h1 {
    font-size: 2.5rem;
  }

  .innovation-box p {
    font-size: 1.2rem;
  }
  
  .about-heading {
    font-size: 1.5rem;
  }

  .about-text {
    font-size: 1rem;
  }

  .circle-background {
    width: 150px;
    height: 150px;
    top: 15%;
    right: -15%;
  }
  
  body {
    padding-top: 70px; /* Adjust for smaller navbar height on mobile */
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Custom button styles */
.btn-dark, .btn-outline-dark {
  border-radius: 30px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-outline-dark:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* ========================================== */
/* FOOTER                                    */
/* ========================================== */

.agr-footer {
  background-color: #ffffff; /* Hijau sesuai desain Figma */
  padding: 80px 0 40px;
  color: #000000; /* 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: #000000;
  opacity: 0.9;
}

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

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

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

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

.agr-footer-nav a {
  color: #000000;
  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;
  }
}
/* Container untuk divider */
.custom-shape-divider-bottom-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); /* Membalik gelombang agar pas di bawah */
    z-index: 2; /* Di atas background, di bawah konten */
}

.custom-shape-divider-bottom-1 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px; /* Tinggi gelombang */
}

/* Warna isi gelombang (Harus sama dengan warna background section SETELAHNYA) */
.custom-shape-divider-bottom-1 .shape-fill {
    fill: #f8f9fa; /* Ini warna abu-abu muda milik section Articles */
}

/* Responsif untuk HP */
@media (max-width: 767px) {
    .custom-shape-divider-bottom-1 svg {
        height: 50px;
    }
}
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: transparent; /* Transparan */
}

.divider-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(226, 11, 26, 0.3), transparent); /* Gradasi merah pudar */
  max-width: 800px; /* Jangan terlalu lebar */
}

.divider-icon {
  color: #E20B1A; /* Warna Merah Brand */
  padding: 0 15px;
  background: #fff; /* Agar garis tidak menabrak ikon */
  font-size: 1.2rem;
}
/* ================================= */
/* 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 */
  
/* 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; }