/* =========================================
           RESET & BASIC TYPOGRAPHY
           ========================================= */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-body); color: var(--ds-text-gray); line-height: 1.6; overflow-x: hidden; }
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--ds-text-dark); margin-bottom: 15px; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* Utility Classes */
        .ds-btn-green { display: inline-block; background-color: var(--ds-green); color: var(--ds-white); padding: 12px 30px; font-weight: 600; border-radius: 5px; text-transform: uppercase; font-size: 14px; border: none; cursor: pointer; }
        .ds-btn-green:hover { background-color: #7ab332; }
        .ds-btn-dark { display: inline-block; background-color: #0d3b44; color: var(--ds-white); padding: 12px 30px; font-weight: 600; border-radius: 5px; text-transform: uppercase; font-size: 14px; border: none; cursor: pointer; }
        .ds-text-blue { color: var(--ds-blue); }
        .ds-text-green { color: var(--ds-green); }
        .ds-section { padding: 80px 0; }
        .ds-bg-light { background-color: var(--ds-light-bg); }
        .ds-bg-blue { background-color: var(--ds-blue); color: var(--ds-white); }
        .ds-bg-blue h1, .ds-bg-blue h2, .ds-bg-blue h3 { color: var(--ds-white); }
        .ds-text-center { text-align: center; }
        .ds-leaf-divider { width: 50px; margin: 10px auto 30px; display: block; }

        /* =========================================
           HEADER NAVIGATION
           ========================================= */
/* =========================================
           HEADER NAVIGATION & DROPDOWN
           ========================================= */
        .ds-header { background: var(--ds-white); padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .ds-header .container { display: flex; justify-content: space-between; align-items: center; }
        .ds-logo img { height: 60px; }
        
        /* Modifikasi Struktur Navigasi Utama */
        .ds-nav ul { display: flex; gap: 25px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; margin: 0; padding: 0; list-style: none; }
        .ds-nav > ul > li > a { display: block; padding: 10px 0; } /* Padding area klik diperbesar */
        .ds-nav a:hover { color: var(--ds-green); }
        .ds-nav .active { color: var(--ds-green); }
        
        .ds-header-right { display: flex; align-items: center; gap: 20px; font-weight: 600; color: var(--ds-green); }
        .ds-hamburger { display: none; font-size: 24px; cursor: pointer; color: var(--ds-blue); }

        /* LOGIKA DROPDOWN MENU */
        .ds-dropdown {position: relative;}.ds-dropdown-menu {display: block !important;position: absolute;top: 100%;left: 0;background: #ffffff;min-width: 220px;border-top: 3px solid var(--ds-green);box-shadow: 0 10px 30px rgba(0,0,0,0.08);padding: 0;margin: 0;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;z-index: 100;}.ds-dropdown:hover .ds-dropdown-menu {opacity: 1;visibility: visible;transform: translateY(0);}.ds-dropdown-menu li {display: block !important;width: 100%;text-align: left;border-bottom: 1px solid #f0f0f0;}.ds-dropdown-menu li:last-child {border-bottom: none;}.ds-dropdown-menu a {display: block !important;padding: 14px 20px;font-family: var(--font-body);font-weight: 600;font-size: 13px;color: var(--ds-text-gray);text-transform: none;transition: all 0.2s ease;}.ds-dropdown-menu a:hover {color: var(--ds-green);background: #fafafa;padding-left: 25px;}

        /* =========================================
           HERO SECTION
           ========================================= */
        .ds-hero { position: relative; background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('/images/pille-riin-priske-O5Fo4vUuIBM-unsplash_11d33c25-3ffe-41a2-9620-dab4eb11f90f.webp') no-repeat center center/cover; padding: 30px 0 150px; z-index: 1; }
        .ds-hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; position: relative; z-index: 2; }
        .ds-hero h1 { font-size: 42px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
        .ds-kill-badge { background: var(--ds-green); color: white; width: 180px; height: 180px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: var(--font-heading); font-weight: 800; position: absolute; top: -15px; right: 40%; box-shadow: 0 10px 20px rgba(142, 198, 63, 0.4); z-index: 3;}
        .ds-kill-badge span.large { font-size: 36px; line-height: 1; }
            /* =========================================
           PERBAIKAN HERO PARTNERS (TEKS ATAS, LOGO BAWAH)
           ========================================= */
        .ds-hero-partners {
            background: #ffffff;
            padding: 25px 40px;
            border-radius: 8px;
            display: flex;
            align-items: flex-start; /* Menyejajarkan bagian atas teks */
            justify-content: flex-start;
            gap: 40px;
            position: absolute;
            bottom: -60px; /* Menempel kokoh menggantung di bawah hero banner */
            left: 20px;
            right: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
            z-index: 10;
        }

        /* Mengubah Orientasi Blok Menjadi Vertikal (Teks Atas, Gambar Bawah) */
        .ds-partner-block, 
        .ds-featured-block {
            display: flex;
            flex-direction: column; /* MEMAKSA TURUN KE BAWAH */
            gap: 15px; /* Jarak antara teks judul dengan barisan logo */
        }

        .ds-partner-block h4, 
        .ds-featured-block h4 {
            font-family: var(--font-heading);
            font-size: 20px;
            font-weight: 700;
            color: #2b2b2b;
            margin: 0;
            text-transform: none; /* Sesuai gambar asli, bukan huruf kapital semua */
        }

        /* Barisan Logo Menyamping */
        .ds-logo-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 22px; /* Jarak horizontal antar logo */
            flex-wrap: wrap; /* Pengaman jika layar menyusut */
        }

        .ds-logo-row img {
            height: 40px; /* Mengunci tinggi rata logo agar sejajar rapi */
            width: auto;
            object-fit: contain;
            filter: grayscale(10%) contrast(95%); /* Sentuhan agar menyatu dengan background */
        }

        /* Komponen Garis Pembatas Vertikal Murni CSS */
        .ds-vertical-divider {
            width: 1px;
            background-color: #b0b7ce; /* Warna abu-abu kebiruan soft sesuai gambar */
            align-self: stretch; /* Memaksa garis memanjang otomatis setinggi container */
            margin: 5px 0;
        }

        /* RESPONSIVE MOBILE ADJUSTMENT (SEO & UX FRIENDLY) */
        @media (max-width: 992px) {
            .ds-hero-partners {
                position: static; /* Lepas dari absolute agar tidak menabrak konten bawah di ponsel */
                margin: 40px auto 0;
                flex-direction: column; /* Di ponsel, susun balok kiri dan kanan ke bawah */
                gap: 25px;
                padding: 20px;
            }
            .ds-vertical-divider {
                width: 100%;
                height: 1px; /* Ubah garis vertikal menjadi horizontal di layar ponsel */
                margin: 10px 0;
            }
            .ds-logo-row {
                justify-content: center; /* Di ponsel, logo rata tengah agar estetis */
                gap: 15px;
            }
            .ds-partner-block h4, 
            .ds-featured-block h4 {
                text-align: center;
            }
        }

        /* =========================================
           INFO & CONTACT BANNER
           ========================================= */
        .ds-info-quote { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
        .ds-info-quote h2 { font-size: 28px; font-weight: 800; }
        .ds-quote-text { font-style: italic; font-size: 18px; text-align: center; }
        .ds-quote-text strong { display: block; margin-top: 15px; font-style: normal; font-size: 22px; color: var(--ds-text-dark); font-weight: 800;}
        
        .ds-contact-banner { margin-top: 60px; padding-top: 60px; border-top: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px;}
        .ds-contact-banner .center-text { text-align: center; flex: 1;}
        .ds-contact-banner h2 { font-size: 32px; margin-bottom: 10px; }

        /* =========================================
           REVOLUTIONARY TECHNOLOGY
           ========================================= */
        .ds-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; text-align: center; }
        .ds-tech-item .img-wrapper { background: #eacb9a; width: 180px; height: 180px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; padding: 20px;}
        .ds-tech-item h3 { color: var(--ds-white); font-size: 18px; margin-bottom: 15px; position: relative;}
        /* Note: Original has blue bg for this section part, adjusting to match layout pattern */
        
        .ds-destroys-section { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 100px; }
        .ds-destroys-section h2 { font-size: 36px; font-weight: 800; line-height: 1.3;}
        .ds-product-card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 20px; }
        .ds-product-card img { width: 120px; }

        /* =========================================
           PRODUCT SHOWCASE (BLUE BG)
           ========================================= */
        .ds-showcase { text-align: center; position: relative; padding: 100px 0;}
        .ds-showcase h2 { font-size: 36px; margin-bottom: 60px;}
        .ds-showcase-wrapper { display: flex; justify-content: center; align-items: center; position: relative; max-width: 800px; margin: 0 auto 50px;}
        .ds-showcase-bottle { z-index: 2; position: relative; width: 250px; }
        .ds-showcase-features { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
        .ds-feature-point { position: absolute; display: flex; align-items: center; gap: 15px; pointer-events: auto; font-weight: 600; font-family: var(--font-heading);}
        .ds-feature-point img { width: 60px; background: var(--ds-green); border-radius: 50%; padding: 10px; border: 3px solid rgba(255,255,255,0.2);}
        
        /* Positioning the 4 icons */
        .ds-fp-1 { top: 20%; left: 0; flex-direction: row-reverse;}
        .ds-fp-2 { top: 20%; right: 0; }
        .ds-fp-3 { bottom: 20%; left: 0; flex-direction: row-reverse;}
        .ds-fp-4 { bottom: 20%; right: 0; }

        /* =========================================
           MEDIA GRID
           ========================================= */
        .ds-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
        .ds-media-item { text-align: center; }
        .ds-media-item img { border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: 100%; margin-bottom: 15px;}
        .ds-media-item h4 { font-size: 14px; font-weight: 700; line-height: 1.4;}
        .ds-media-item h2 { font-size: 14px; font-weight: 700; line-height: 1.4;}
        .ds-media-item .logo-top { height: 40px; object-fit: contain; margin: 0 auto 10px; }

        /* =========================================
           TESTIMONIALS & TEAM
           ========================================= */
        .ds-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
        .ds-testimonial-card { background: white; padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-align: center; }
        .ds-testimonial-card h4 { font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 15px;}
        .ds-testimonial-card h4::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 1px; background: #ddd; }
        .ds-testimonial-card p { font-style: italic; font-size: 14px;}

        .ds-team-section { margin-top: 100px; text-align: center; }
        .ds-team-image { max-width: 600px; margin: 30px auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

        .ds-featured-partners { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 80px; text-align: center; }
        .ds-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; align-items: center; margin-top: 30px; }
        .ds-logo-grid img { height: 50px; object-fit: contain; }

        /* =========================================
           CTA GREEN BAR
           ========================================= */
        .ds-cta-bar { background: var(--ds-green); color: white; padding: 60px 0; text-align: center; }
        .ds-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center; }
        .ds-cta-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .ds-cta-item i { font-size: 30px; margin-bottom: 10px; }
        .ds-cta-item h3 { color: white; font-size: 24px; margin-bottom: 5px; }
        .ds-cta-item p { font-size: 14px; opacity: 0.9; }

        /* =========================================
           FOOTER
           ========================================= */
        .ds-footer { background: var(--ds-dark-blue); color: white; padding: 80px 0 30px; font-size: 14px; }
        .ds-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
        .ds-footer h3 { color: white; font-size: 20px; margin-bottom: 25px; }
        .ds-footer ul li { margin-bottom: 12px; }
        .ds-footer ul li a:hover { color: var(--ds-green); }
        .ds-footer-badges img { max-width: 150px; margin-bottom: 20px; }
        .ds-copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: #aaa;}
        .ds-copyright span { color: var(--ds-green); font-weight: 600; }

        /* Scroll to top button */
        .ds-back-to-top { position: fixed; bottom: 30px; right: 30px; background: var(--ds-green); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 99; transition: var(--transition); }
        .ds-back-to-top:hover { transform: translateY(-5px); }

        /* =========================================
           MOBILE RESPONSIVENESS
           ========================================= */
        @media (max-width: 992px) {
            .ds-hero-content { grid-template-columns: 1fr; text-align: center; }
            .ds-kill-badge { right: 20px; top: -20px; width: 120px; height: 120px; }
            .ds-kill-badge span.large { font-size: 24px; }
            .ds-hero h1 { font-size: 32px; }
            .ds-hero-partners { flex-direction: column; text-align: center; gap: 20px; position: static; margin-top: 40px; box-shadow: none; border: 1px solid #ddd; }
            
            .ds-info-quote, .ds-destroys-section, .ds-featured-partners { grid-template-columns: 1fr; text-align: center; }
            .ds-product-card { flex-direction: column; text-align: center; }
            
            .ds-tech-grid, .ds-media-grid, .ds-testimonial-grid, .ds-cta-grid { grid-template-columns: 1fr; }
            
            .ds-showcase-features { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
            .ds-feature-point { position: static; justify-content: center; flex-direction: column !important; text-align: center; }
            
            .ds-footer-grid { grid-template-columns: 1fr; text-align: center; }
            .ds-footer-badges img { margin: 0 auto 20px; }
        }

        @media (max-width: 768px) {
            .ds-nav, .ds-header-right span { display: none; }
            .ds-hamburger { display: block; }
        }
        /* 1. Pengaturan Logo Besar & Garis Biru Kiri */
        .ds-hero-brand {
            /* Membuat garis biru tebal murni dari CSS (Lebih tajam & Cepat di-load dibanding gambar) */
            border-top: 14px solid var(--ds-blue); 
            padding-top: 15px;
            margin-bottom: 35px;
            max-width: 340px; /* Membatasi lebar logo agar mirip proporsi aslinya */
        }
        .ds-hero-brand img {
            width: 100%;
            height: auto;
        }

        /* 2. Pengaturan Gambar Bakteri Mengambang Kanan */
        .ds-floating-virus {
            position: absolute;
            right: -40px; /* Melempar gambar ke luar sisi kanan botol */
            top: 45%;      /* Mengatur ketinggian posisi bakteri */
            width: 110px;  /* Dimensi ukuran gambar bakteri */
            height: auto;
            z-index: 1;
            
            /* BONUS SENIOR DEV: Berikan efek micro-interaction mengambang naik turun secara halus */
            animation: floatVirus 4s ease-in-out infinite;
        }

        /* Animasi naik turun untuk efek virus hidup */
        @keyframes floatVirus {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

        /* PENYESUAIAN PADA LAYAR PONSEL (RESPONSIVE) */
        @media (max-width: 992px) {
            .ds-hero-brand {
                margin: 0 auto 30px; /* Rata tengah di mobile */
                border-top-width: 10px; /* Sedikit menipiskan garis di ponsel */
                max-width: 280px;
            }
            
            /* Dari sudut pandang SEO & UX: Gambar dekoratif kecil seperti bakteri mengambang 
               sebaiknya disembunyikan di mobile agar tidak mengalihkan fokus teks utama */
            .ds-floating-virus {
                display: none; 
            }
        }

.floating-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: min(360px, calc(100% - 40px));
  padding: 22px 20px 20px;
  overflow: hidden;

  border: 1px solid rgba(255, 45, 52, 0.75);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 39, 46, 0.28),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(22, 7, 12, 0.98),
      rgba(5, 6, 11, 0.98)
    );

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(255, 31, 38, 0.22);

  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

.floating-popup.popup-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(120%) scale(0.9);
}

.popup-close {
  position: absolute;
  top: 9px;
  right: 11px;

  width: 34px;
  height: 34px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);

  font-size: 25px;
  line-height: 30px;
  cursor: pointer;
}

.popup-close:hover {
  background: rgba(255, 47, 53, 0.25);
}

.popup-content {
  text-align: center;
}

.popup-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 13px;

  border: 1px solid rgba(255, 46, 52, 0.5);
  border-radius: 100px;

  color: #ff5257;
  background: rgba(255, 35, 42, 0.08);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.popup-content h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.25;
}

.popup-content p {
  margin: 0 0 17px;
  color: #b8bbc4;
  font-size: 13px;
  line-height: 1.65;
}

.popup-button {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  border-radius: 11px;

  color: #ffffff;
  background: linear-gradient(135deg, #ff3036, #a80008);

  box-shadow: 0 10px 25px rgba(255, 32, 39, 0.25);

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-decoration: none;
}

.popup-button:hover {
  filter: brightness(1.12);
}

/* TOMBOL TOGGLE MELAYANG */

.popup-toggle {
  position: fixed;
  right: 0;
  bottom: 110px;
  z-index: 9998;

  width: 54px;
  min-height: 100px;
  padding: 10px 8px;

  border: 1px solid rgba(255, 67, 73, 0.8);
  border-right: 0;
  border-radius: 15px 0 0 15px;

  color: #ffffff;
  background: linear-gradient(180deg, #ff3036, #970006);

  box-shadow:
    -8px 8px 25px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(255, 35, 42, 0.25);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.popup-toggle.toggle-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.popup-toggle span {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 480px) {
  .floating-popup {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .popup-toggle {
    bottom: 90px;
    width: 48px;
    min-height: 90px;
  }
}