/* Stylesheet bersama kandangpetelur.com — sumber asli: blok <style> index.html.
   Dipakai oleh index.html, bebek-petelur.html, dan puyuh-petelur.html. */
/* ============================================================
   Design Tokens — Tema Biru (Light Mode Only)
   ============================================================ */
:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --cyan-500: #06b6d4;

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --bg: #ffffff;
  --bg-alt: var(--gray-50);
  --text: var(--gray-800);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(37,99,235,.12);
  --shadow-xl: 0 20px 50px rgba(37,99,235,.18);

  --radius:    14px;
  --radius-lg: 20px;

  --container: 1200px;

  /* ------------------------------------------------------------
     TOKEN TIPOGRAFI — sengaja tinggal di lapisan DASAR, bukan di
     site-v3.css. Seluruh aturan di berkas ini memakai var(), jadi
     kalau tokennya ditaruh di berkas lain, site.css tidak bisa
     berdiri sendiri dan suatu saat ada halaman yang hurufnya
     runtuh jadi ukuran bawaan browser.

     SATU keluarga untuk semuanya. Dulu dua: Sora untuk judul, Plus
     Jakarta Sans untuk isi. Masalahnya keduanya sans geometris yang
     mirip, jadi yang muncul bukan kontras melainkan beda rasa kecil
     di tiap ukuran — itulah yang bikin tampilan terasa "gimana gitu".
     PJS saja: huruf buatan Indonesia (Tokopedia), bobot 800-nya cukup
     untuk judul, dan tidak butuh tracking seketat Sora.
     ------------------------------------------------------------ */
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-body);

  /* Skala huruf: satu tempat untuk mengatur, semua aturan di bawah pakai
     var(). Rasio antar tangga ±1,13 — cukup jauh untuk terbaca sebagai
     tingkatan, cukup dekat untuk tidak terasa melompat. */
  --fs-mikro:   11px;        /* chip, tag, label micro */
  --fs-kecil:   12px;        /* meta, keterangan gambar, isi tabel */
  --fs-ui:      13.5px;      /* menu, tombol kecil, badge */
  --fs-body:    15px;        /* paragraf kartu */
  --fs-besar:   16.5px;      /* paragraf penting, pertanyaan FAQ */
  --fs-lead:    clamp(16px, 1.5vw, 18px);    /* kalimat di bawah judul */
  --fs-sub:     18px;        /* subjudul, nama brand, judul list */
  --fs-judul-s: 21px;        /* judul kartu */
  --fs-judul:   clamp(25px, 2.9vw, 33px);    /* h2 section */
  --fs-angka:   clamp(27px, 3.1vw, 36px);    /* angka statistik */
  /* Harga paket butuh tangga sendiri: di layar lebar grid-nya 5 kolom, jadi
     isi kartu cuma ~195px. "Rp 199rb /bln" di 36px tidak muat dan satuannya
     jatuh sendirian ke baris kedua — terbaca seperti layout rusak. */
  --fs-harga:   clamp(26px, 2.5vw, 31px);
  --fs-hero:    clamp(32px, 4.4vw, 52px);    /* h1 */
  --fs-hero-hp: clamp(28px, 8.4vw, 36px);    /* h1 di layar sempit */

  --lh-tajam: 1.12; --lh-judul: 1.25; --lh-body: 1.62; --lh-long: 1.72;
  --ls-ketat: -0.02em; --ls-sedikit: 0.02em; --ls-lebar: 0.08em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   Header
   ============================================================ */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: var(--fs-sub); letter-spacing: var(--ls-sedikit);
}
.brand-logo {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: #ffffff;
  border: 1px solid var(--blue-100);
  box-shadow: 0 4px 14px rgba(37,99,235,.18);
  padding: 4px;
}
.brand-logo img { width: 100%; height: 100%; border-radius: 8px; object-fit: contain; }
.brand .accent { color: var(--blue-600); }
.nav-links {
  display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  color: var(--gray-700); font-size: var(--fs-body); font-weight: 500;
}
.nav-links a { transition: color .15s; }
.nav-links a:hover { color: var(--blue-700); }

/* Menu sedang (901–1080px): nav sudah 8 item, rapatkan agar tidak mentok tombol CTA. */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav-links { gap: 15px; font-size: var(--fs-ui); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-weight: 600; font-size: var(--fs-body);
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .2s, background .2s;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.45); }
.btn-secondary {
  background: #fff; color: var(--blue-700);
  border-color: var(--blue-200);
}
.btn-secondary:hover { background: var(--blue-50); border-color: var(--blue-300); }
.btn-wa {
  background: #25d366; color: #fff;
  box-shadow: 0 8px 20px rgba(37,211,102,.35);
}
.btn-wa:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,211,102,.45); }
.btn-lg { padding: 14px 26px; font-size: var(--fs-besar); border-radius: 12px; }
.btn-ghost { background: transparent; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 60px;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(59,130,246,.10), transparent 50%),
    radial-gradient(700px 400px at 10% 100%, rgba(251,191,36,.08), transparent 50%),
    linear-gradient(180deg, var(--blue-50), #fff);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(37,99,235,.08) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blue-200);
  color: var(--blue-800); font-size: var(--fs-ui); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,.2); }
h1 {
  margin: 18px 0 14px;
  font-size: var(--fs-hero);
  line-height: var(--lh-tajam);
  letter-spacing: var(--ls-ketat);
  font-weight: 800;
  color: var(--gray-900);
}
h1 .hl {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead {
  font-size: var(--fs-lead);
  color: var(--gray-700);
  max-width: 560px;
  margin: 0 0 24px;
}
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.trust-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: var(--fs-ui); color: var(--gray-500);
}
.trust-row span::before {
  content: "✓"; color: var(--blue-600); font-weight: 800; margin-right: 6px;
}

.hero-mockup {
  position: relative; padding: 14px;
  background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: rotate(-1deg);
}
.hero-mockup svg.app-window {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
  background: #fff;
}
.hero-mockup::after {
  content: "🥚"; position: absolute; top: -18px; right: -10px;
  font-size: 36px; transform: rotate(15deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}

/* ============================================================
   Stats Bar
   ============================================================ */
.stats-bar {
  padding: 36px 0;
  background: var(--blue-600);
  color: #fff;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.stat b {
  display: block; font-size: var(--fs-angka); font-weight: 800;
  letter-spacing: var(--ls-ketat);
}
.stat span { font-size: var(--fs-ui); color: rgba(255,255,255,.85); }

/* ============================================================
   Section base
   ============================================================ */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.eyebrow {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-800);
  font-size: var(--fs-kecil); font-weight: 700; letter-spacing: var(--ls-sedikit);
  text-transform: uppercase;
  margin-bottom: 14px;
}
h2 {
  margin: 0 0 12px;
  font-size: var(--fs-judul);
  font-weight: 800; letter-spacing: var(--ls-ketat);
  color: var(--gray-900);
}
.sec-lead {
  font-size: var(--fs-besar); color: var(--gray-500); margin: 0;
}

/* ============================================================
   Unggas petelur (ayam / bebek / puyuh)
   ============================================================ */
.section-unggas { background: linear-gradient(180deg, var(--blue-50), #fff 72%); }
.species-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.species {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 24px 22px; text-align: left;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.species-icon { display: block; height: 62px; width: auto; margin-bottom: 12px; }
.species h3 { margin: 0 0 8px; font-size: var(--fs-sub); color: var(--gray-900); }
.species-unit {
  display: inline-block; margin: 0 0 12px; padding: 3px 10px;
  font-size: var(--fs-kecil); font-weight: 700; color: var(--blue-800);
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px;
}
.species p { margin: 0; font-size: var(--fs-body); color: var(--gray-500); line-height: var(--lh-long); }
.species b { color: var(--gray-900); }
.species-note {
  max-width: 1000px; margin: 22px auto 0; padding: 16px 22px;
  font-size: var(--fs-body); color: var(--gray-500); line-height: var(--lh-long); text-align: center;
  background: #fff; border: 1px dashed var(--blue-200); border-radius: 14px;
}
.species-note b { color: var(--gray-900); }

/* ============================================================
   Why Choose (3-up highlights)
   ============================================================ */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.why-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-300);
}
.why-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
  color: var(--blue-700);
  font-size: 26px;
  margin-bottom: 16px;
}
.why-card h3 { margin: 0 0 8px; font-size: var(--fs-judul-s); font-weight: 700; color: var(--gray-900); }
.why-card p { margin: 0; color: var(--gray-500); font-size: var(--fs-body); }

/* ============================================================
   Features grid
   ============================================================ */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.feature {
  padding: 24px;
  border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border);
  transition: all .2s;
}
.feature:hover {
  border-color: var(--blue-300);
  box-shadow: var(--shadow);
}
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 22px;
  margin-bottom: 14px;
}
.feature h3 { margin: 0 0 6px; font-size: var(--fs-besar); font-weight: 700; color: var(--gray-900); }
.feature p { margin: 0; color: var(--gray-500); font-size: var(--fs-body); }

/* ============================================================
   Screenshots Gallery
   ============================================================ */
.gallery-wrap {
  position: relative;
  padding: 40px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery-wrap::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.gallery-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.shot {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s;
}
.shot:hover { transform: translateY(-3px); }
.shot svg { display: block; width: 100%; height: auto; background: #fff; }
.shot-label {
  padding: 12px 14px; font-size: var(--fs-ui); color: var(--gray-700); font-weight: 600;
  background: #fff; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.shot-label .tag {
  font-size: var(--fs-mikro); padding: 2px 8px; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-700); font-weight: 700;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.plan:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--blue-300);
}
.plan.featured {
  border: 2px solid var(--blue-500);
  box-shadow: var(--shadow-lg);
  transform: scale(1.04);
}
.plan.featured:hover { transform: scale(1.04) translateY(-4px); }
.plan-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
  color: #fff; font-size: var(--fs-mikro); font-weight: 800;
  padding: 4px 14px; border-radius: 999px;
  letter-spacing: var(--ls-sedikit); text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.plan-name {
  font-size: var(--fs-ui); font-weight: 700; color: var(--blue-700);
  text-transform: uppercase; letter-spacing: var(--ls-lebar);
}
.plan-price {
  margin: 12px 0 4px;
  font-size: var(--fs-harga); font-weight: 800; color: var(--gray-900);
  letter-spacing: var(--ls-ketat);
}
.plan-price small { font-size: var(--fs-ui); font-weight: 500; color: var(--gray-500); }
.plan-desc { font-size: var(--fs-ui); color: var(--gray-500); margin: 0 0 18px; min-height: 38px; }
.plan ul {
  list-style: none; padding: 0; margin: 0 0 22px;
  font-size: var(--fs-ui); color: var(--gray-700);
  flex: 1;
}
.plan li {
  padding: 6px 0; padding-left: 22px; position: relative;
}
.plan li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--blue-600); font-weight: 800;
}
.plan .btn { width: 100%; }

/* ============================================================
   Promise (Update & Support — section baru)
   ============================================================ */
.promise {
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border-radius: var(--radius-lg);
  padding: 48px;
  border: 1px solid var(--blue-200);
}
.promise-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.promise h2 { margin-bottom: 16px; }
.promise-list { list-style: none; padding: 0; margin: 20px 0 0; }
.promise-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px dashed var(--blue-200);
}
.promise-list li:last-child { border-bottom: none; }
.promise-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--blue-600); color: #fff;
  display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}
.promise-list h4 { margin: 0 0 2px; font-size: var(--fs-besar); font-weight: 700; color: var(--gray-900); }
.promise-list p { margin: 0; font-size: var(--fs-ui); color: var(--gray-600); }
.promise-visual {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--blue-200), var(--blue-50));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 140px;
}
.promise-visual::before, .promise-visual::after {
  content: ""; position: absolute;
  border: 2px dashed var(--blue-300);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}
.promise-visual::before { inset: -20px; }
.promise-visual::after { inset: -40px; animation-direction: reverse; animation-duration: 50s; }
/* Maskot jenis unggas (gambar) menggantikan emoji di lingkaran yang sama */
.promise-visual img {
  width: 84%; height: 84%; object-fit: contain;
  background: #fff; border-radius: 50%;
  box-shadow: 0 10px 26px rgba(15,23,42,.14);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600; font-size: var(--fs-besar);
  color: var(--gray-900);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 22px; color: var(--blue-600); font-weight: 400;
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--blue-50); }
.faq-body {
  padding: 0 22px 18px;
  font-size: var(--fs-body); color: var(--gray-600);
  line-height: var(--lh-long);
}

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.final-cta h2 { color: #fff; position: relative; }
.final-cta p { color: rgba(255,255,255,.85); font-size: var(--fs-sub); max-width: 540px; margin: 12px auto 28px; position: relative; }
.final-cta .cta-group { justify-content: center; position: relative; }
.final-cta .btn-secondary {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25);
}
.final-cta .btn-secondary:hover { background: rgba(255,255,255,.2); }

/* ============================================================
   Footer
   ============================================================ */
footer {
  background: var(--gray-900); color: var(--gray-300);
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  margin-bottom: 32px;
}
.footer-brand .brand { color: #fff; font-size: var(--fs-judul-s); }
.footer-tagline { color: var(--gray-500); font-size: var(--fs-body); margin: 12px 0 0; max-width: 280px; }
.footer-col h4 {
  margin: 0 0 14px; font-size: var(--fs-ui); text-transform: uppercase;
  letter-spacing: var(--ls-lebar); color: #fff;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--gray-300); font-size: var(--fs-body); transition: color .15s; }
.footer-col a:hover { color: var(--blue-400); }
.footer-bottom {
  border-top: 1px solid var(--gray-700);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--gray-500); font-size: var(--fs-ui);
}

/* ---- Sosial media (footer) ---- */
.footer-social {
  display: flex; align-items: center; gap: 10px 18px;
  flex-wrap: wrap; margin: -6px 0 30px;
}
.fs-label {
  font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--ls-lebar);
  color: #fff; font-weight: 700;
}
.fs-list { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gray-700);
  color: var(--gray-300); font-size: var(--fs-ui); font-weight: 600;
  text-decoration: none; transition: .18s;
}
.fs-item:hover { background: rgba(255,255,255,.11); color: #fff; transform: translateY(-2px); }
.fs-item svg { width: 17px; height: 17px; flex: none; display: block; }
.fs-ig:hover { border-color: #D62976; }
.fs-fb:hover { border-color: #1877F2; }
.fs-tt:hover { border-color: #FE2C55; }
.fs-km:hover { border-color: #60A5FA; }

/* ============================================================
   Floating WA button
   ============================================================ */
.floating-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
}
.floating-wa a {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  padding: 14px 18px; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-body);
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s;
}
.floating-wa a:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 36px rgba(37,211,102,.55); }
.floating-wa svg { fill: currentColor; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .plan.featured { transform: none; }
  .plan.featured:hover { transform: translateY(-4px); }
}
@media (max-width: 900px) {
  .hero { padding: 56px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-mockup { transform: none; }
  .hero-art { transform: none; max-width: 560px; margin: 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .species-grid { grid-template-columns: 1fr; max-width: 520px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .promise { padding: 32px 24px; }
  .promise-grid { grid-template-columns: 1fr; gap: 32px; }
  .promise-visual { max-width: 280px; margin: 0 auto; font-size: 100px; }
  .final-cta { padding: 40px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .section { padding: 56px 0; }
}
@media (max-width: 540px) {
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 12px 20px; font-size: var(--fs-body); }
}
/* ---- Dokumen penjualan (paper mocks) ---- */
.paper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.paper { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,.08); overflow: hidden; }
.paper svg { display: block; width: 100%; height: auto; }
.doc-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.doc-feat { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; font-size: var(--fs-ui); color: var(--gray-500); display: flex; gap: 10px; align-items: flex-start; line-height: var(--lh-body); }
.doc-feat b { color: var(--gray-900); }

/* ---- Grafik & analitik ---- */
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.chart-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px; box-shadow: 0 12px 32px rgba(15,23,42,.06); }
.chart-card h3 { margin: 0; font-size: var(--fs-besar); color: var(--gray-900); }
.chart-sub { font-size: var(--fs-kecil); color: var(--gray-500); margin: 2px 0 0; }
.chart-card svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.insight-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.insight { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); border-radius: 999px; padding: 8px 14px; font-size: var(--fs-ui); font-weight: 600; }

/* ---- Foto dokumen ---- */
.doc-photo { margin: 30px auto 0; max-width: 900px; }
.doc-photo--wide { max-width: 100%; }
.doc-photo img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--gray-200); box-shadow: 0 18px 44px rgba(15,23,42,.12); }
.doc-photo figcaption { text-align: center; font-size: var(--fs-ui); color: var(--gray-500); margin-top: 12px; }
.demo-cta { text-align: center; margin: 26px 0 0; font-size: var(--fs-besar); color: var(--gray-500); }
.demo-cta a { font-weight: 700; }

/* ---- Asisten AI & Pembesaran DOC ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; max-width: 1040px; margin: 0 auto; }
.duo-copy h3 { font-size: var(--fs-judul-s); color: var(--gray-900); margin: 0 0 10px; letter-spacing: var(--ls-ketat); }
.duo-copy > p { margin: 0 0 18px; color: var(--gray-500); font-size: var(--fs-besar); line-height: var(--lh-long); }
.duo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.duo-list li { display: flex; gap: 10px; font-size: var(--fs-body); color: var(--gray-500); line-height: var(--lh-body); }
.duo-list li b { color: var(--gray-900); }
.duo-shot { background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; padding: 14px; box-shadow: 0 18px 44px rgba(15,23,42,.10); }
.duo-shot figure { margin: 0; min-height: 240px; display: grid; place-items: center; background: linear-gradient(160deg, var(--blue-50), #fff); border-radius: 12px; }
.duo-shot img { width: 100%; height: auto; display: block; border-radius: 12px; }
.duo-shot figcaption { text-align: center; font-size: var(--fs-kecil); color: var(--gray-500); margin-top: 10px; }
.eyebrow-icon { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-icon img { width: 26px; height: 26px; border-radius: 50%; }
.chat { max-width: 430px; margin: 26px auto 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(15,23,42,.10); }
.chat-head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: linear-gradient(135deg, var(--blue-50), #fff); border-bottom: 1px solid var(--gray-200); }
.chat-head img { width: 32px; height: 32px; border-radius: 50%; }
.chat-head b { font-size: var(--fs-ui); color: var(--gray-900); }
.chat-head em { font-size: var(--fs-kecil); font-style: normal; color: #059669; font-weight: 700; margin-left: auto; }
.chat-body { padding: 14px 13px; display: flex; flex-direction: column; gap: 9px; }
.bub { max-width: 88%; font-size: var(--fs-ui); line-height: var(--lh-body); border-radius: 14px; padding: 9px 12px; }
.bub.me { align-self: flex-end; background: var(--blue-600); color: #fff; border-bottom-right-radius: 4px; }
.bub.bot { align-self: flex-start; background: var(--gray-100); color: var(--gray-700); border-bottom-left-radius: 4px; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 26px; } }

/* ---- Timeline rilis ---- */
.timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--blue-100); }
.tl-item { position: relative; margin-bottom: 28px; }
.tl-item::before { content: ""; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); }
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-ver { font-weight: 800; color: var(--gray-900); font-size: var(--fs-besar); }
.tl-tag { font-size: var(--fs-mikro); font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.tl-tag.new { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.tl-date { font-size: var(--fs-kecil); color: var(--gray-500); }
.tl-item ul { margin: 8px 0 0; padding-left: 18px; color: var(--gray-500); font-size: var(--fs-body); line-height: var(--lh-long); }
.tl-more { text-align: center; margin-top: 8px; }

@media (max-width: 980px) {
  .paper-grid, .chart-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .doc-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .doc-feats { grid-template-columns: 1fr; } }

/* ============================================================
   Halaman tematik unggas (bebek-petelur.html & puyuh-petelur.html)
   Selektor baru — tidak dipakai oleh halaman lain, jadi tidak mengubah tampilan lama.
   ============================================================ */
/* Ilustrasi hero halaman tematik: kandang + telur jenis unggasnya (bukan screenshot aplikasi) */
.hero-art {
  position: relative; padding: 14px;
  background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: rotate(-1deg);
}
.hero-art picture, .hero-art img { display: block; width: 100%; height: auto; }
.hero-art img { border-radius: 14px; }

/* Hero satu kolom (kalau halaman tematik sedang tidak memakai ilustrasi) */
.hero-solo { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; text-align: center; }
.hero-solo .lead { margin-left: auto; margin-right: auto; }
.hero-solo .cta-group, .hero-solo .trust-row, .hero-solo .unit-strip { justify-content: center; }

/* Strip satuan di bawah hero */
.unit-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin: 28px 0 0; }
.unit-pill {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-ui); font-weight: 700; color: var(--blue-800);
}
.unit-pill span { font-weight: 500; color: var(--gray-500); font-size: var(--fs-ui); }

/* Alur pemakaian bernomor */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; text-align: left;
}
.step-n {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 12px;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff; font-weight: 800; font-size: var(--fs-body);
}
.step h3 { margin: 0 0 6px; font-size: var(--fs-besar); font-weight: 700; color: var(--gray-900); }
.step p { margin: 0; font-size: var(--fs-body); color: var(--gray-500); line-height: var(--lh-body); }

/* Tabel pembanding */
.cmp-wrap {
  overflow-x: auto; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-body); min-width: 560px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th { background: var(--blue-50); color: var(--blue-900); font-size: var(--fs-kecil); text-transform: uppercase; letter-spacing: var(--ls-sedikit); }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td b { color: var(--gray-900); }
.cmp .yes { color: #047857; font-weight: 700; }

/* Kartu ilustrasi perhitungan */
.calc {
  max-width: 620px; margin: 0 auto; background: #fff;
  border: 1px solid var(--blue-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.calc-head {
  padding: 14px 20px; font-size: var(--fs-body); font-weight: 700; color: var(--blue-900);
  background: linear-gradient(135deg, var(--blue-50), #fff);
  border-bottom: 1px solid var(--blue-100);
}
.calc-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 20px; font-size: var(--fs-body); color: var(--gray-500);
  border-bottom: 1px dashed var(--gray-200);
}
.calc-row b { color: var(--gray-900); font-variant-numeric: tabular-nums; }
.calc-row.total { background: var(--blue-50); border-bottom: none; font-weight: 700; color: var(--blue-900); }
.calc-note { padding: 12px 20px; font-size: var(--fs-ui); color: var(--gray-500); background: var(--gray-50); }

/* Tautan silang antar halaman unggas */
.xlinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 880px; margin: 34px auto 0; }
.xlink {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); transition: .18s;
}
.xlink:hover { border-color: var(--blue-300); box-shadow: var(--shadow); transform: translateY(-3px); }
.xlink-icon { flex: 0 0 auto; height: 56px; width: auto; }
.xlink-txt { flex: 1 1 auto; min-width: 0; }
.xlink b { display: block; margin-bottom: 6px; font-size: var(--fs-ui); letter-spacing: var(--ls-sedikit); text-transform: uppercase; color: var(--blue-700); }
.xlink-desc { font-size: var(--fs-body); color: var(--gray-500); }
.xlink-go { flex: 0 0 auto; font-size: var(--fs-judul-s); line-height: 1; color: var(--blue-600); transition: transform .18s; }
.xlink:hover .xlink-go { transform: translateX(4px); }

/* Petunjuk bahwa tabel pembanding bisa digeser pada layar sempit */
.cmp-hint {
  display: none; margin: 10px 0 0; text-align: center;
  font-size: var(--fs-kecil); color: var(--gray-500);
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .xlinks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .cmp-hint { display: block; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }