/* ============================================================
   KandangPetelur.com — LAPISAN DESAIN v3
   Dimuat SESUDAH assets/site.css, jadi semua nama class lama
   tetap berlaku dan halaman lain (releases/panduan/legal/bebek/
   puyuh) ikut tersibak tanpa harus ditulis ulang.
   Tidak ada satu pun angka/harga/klaim yang diubah di sini.
   ============================================================ */

/* ------------------------------------------------------------
   0. TOKEN v3 — menimpa token lama, bukan menambah yang baru
   ------------------------------------------------------------ */
:root {
  /* netral yang lebih "dingin" & dalam */
  --gray-50:  #f6f8fc;
  --gray-100: #eef2f8;
  --gray-200: #e2e8f2;
  --gray-300: #cbd6e6;
  --gray-400: #94a3b8;
  --gray-500: #5b6a81;
  --gray-600: #47586f;
  --gray-700: #33415a;
  --gray-800: #1c283d;
  --gray-900: #0b1424;

  --bg:      #f6f8fc;
  --bg-alt:  #eef2f9;
  --text:    #22314a;
  --text-muted: #5b6a81;
  --border:  rgba(11, 20, 36, .09);

  /* permukaan gelap baru */
  --ink-900: #05080f;
  --ink-800: #070b16;
  --ink-700: #0b1424;
  --ink-600: #111d33;
  --line-dark: rgba(255, 255, 255, .10);

  /* aksen */
  --v3-blue:   #2f6bff;
  --v3-blue-2: #4f8cff;
  --v3-indigo: #5b5bef;
  --v3-cyan:   #22d3ee;
  --v3-violet: #8b5cf6;
  --v3-amber:  #fbbf24;
  --v3-green:  #16a34a;
  /* ujung gradient dulu #22d3ee -> teks putih di atasnya cuma 1,81:1.
     #0891b2 tetap bernuansa cyan tapi label putih naik ke 3,7:1. */
  --grad-brand: linear-gradient(120deg, #2f6bff 0%, #5b5bef 52%, #0891b2 100%);
  --grad-hot:   linear-gradient(120deg, #fbbf24 0%, #f97316 100%);

  /* bayangan berlapis */
  --shadow-sm: 0 1px 2px rgba(11,20,36,.06), 0 2px 6px -2px rgba(11,20,36,.08);
  --shadow:    0 2px 4px rgba(11,20,36,.04), 0 12px 28px -14px rgba(11,20,36,.28);
  --shadow-lg: 0 4px 8px rgba(11,20,36,.04), 0 22px 48px -20px rgba(11,20,36,.32);
  --shadow-xl: 0 8px 16px rgba(11,20,36,.06), 0 40px 80px -28px rgba(11,20,36,.40);
  --glow-blue: 0 14px 40px -12px rgba(47,107,255,.55);

  --radius:    18px;
  --radius-lg: 26px;
  --container: 1240px;

  /* Token huruf (keluarga, skala --fs-*, --lh-*, --ls-*) tinggal di :root
     site.css supaya lapisan dasar bisa berdiri sendiri. Lapisan v3 di sini
     cuma MENIMPA nilainya bila perlu — dan saat ini tidak ada yang ditimpa. */
}

/* ------------------------------------------------------------
   1. DASAR & TIPOGRAFI
   ------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  letter-spacing: -0.005em;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--ls-ketat); }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
b, strong { font-weight: 700; color: var(--gray-900); }
::selection { background: rgba(47,107,255,.18); }

/* fokus yang rapi untuk keyboard */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--v3-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.container { padding: 0 26px; }

/* ------------------------------------------------------------
   2. HEADER — "pulau" kaca mengambang + progress bar + drawer
   ------------------------------------------------------------ */
header {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 12px 0 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.nav {
  position: relative;
  gap: 20px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 10px -4px rgba(11,20,36,.18), 0 22px 50px -26px rgba(11,20,36,.45);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow .3s, background .3s;
}
body.v3-scrolled .nav { background: rgba(255,255,255,.92); }
.brand { font-family: var(--font-display); font-size: var(--fs-sub); font-weight: 800; color: var(--gray-900); }
.brand .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-logo {
  width: 36px; height: 36px; border-radius: 11px; padding: 3px;
  background: #fff; border: 1px solid rgba(11,20,36,.07);
  box-shadow: 0 6px 16px -6px rgba(47,107,255,.5);
}
.nav-links { font-size: var(--fs-body); font-weight: 600; color: var(--gray-700); gap: 24px; }
.nav-links a { padding: 8px 2px; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--grad-brand); border-radius: 2px; transition: right .25s ease;
}
.nav-links a:hover::after, .nav-links a.v3-active::after { right: 0; }
.nav-links li { white-space: nowrap; }

/* tombol menu mobile (disuntik site.js) */
.v3-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(11,20,36,.10);
  box-shadow: var(--shadow-sm); cursor: pointer; padding: 0;
}
.v3-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--gray-900); position: relative; transition: .25s; }
.v3-burger span::before, .v3-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px;
  background: var(--gray-900); transition: .25s;
}
.v3-burger span::before { top: -6px; }
.v3-burger span::after  { top: 6px; }
body.v3-menu-open .v3-burger span { background: transparent; }
body.v3-menu-open .v3-burger span::before { transform: translateY(6px) rotate(45deg); }
body.v3-menu-open .v3-burger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* laci menu mobile */
.v3-drawer {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(5,8,15,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.v3-menu-open .v3-drawer { opacity: 1; pointer-events: auto; }
.v3-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: #fff; padding: 84px 24px 28px;
  box-shadow: -30px 0 60px -20px rgba(11,20,36,.35);
  transform: translateX(102%); transition: transform .32s cubic-bezier(.22,.7,.2,1);
  overflow-y: auto;
}
body.v3-menu-open .v3-drawer-panel { transform: none; }
.v3-drawer-panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; font-size: var(--fs-besar); font-weight: 600; color: var(--gray-900);
  border-bottom: 1px solid rgba(11,20,36,.07);
}
.v3-drawer-panel a::after { content: "→"; color: var(--v3-blue); font-weight: 700; }
.v3-drawer-panel .v3-drawer-cta { display: grid; gap: 10px; margin-top: 22px; }
.v3-drawer-panel .v3-drawer-cta a { border: 0; justify-content: center; color: #fff; }
.v3-drawer-panel .v3-drawer-cta a::after { content: ""; }

/* progress baca */
#v3Progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-brand); z-index: 80;
  box-shadow: 0 0 12px rgba(47,107,255,.6);
  transition: width .1s linear;
}

/* ------------------------------------------------------------
   3. TOMBOL
   ------------------------------------------------------------ */
.btn {
  border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: var(--fs-body);
  letter-spacing: var(--ls-ketat); position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
}
.btn-lg { padding: 15px 28px; font-size: var(--fs-besar); }
.btn-primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--glow-blue);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -12px rgba(47,107,255,.7); }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .8s ease; }
.btn-secondary {
  background: rgba(255,255,255,.06); color: var(--gray-900);
  border-color: rgba(11,20,36,.14); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: #fff; border-color: var(--v3-blue); color: var(--v3-blue); transform: translateY(-2px); }
/* tombol WA: hijau merek #25d366 + teks putih hanya 1,98:1 (tidak terbaca).
   #0f9d58 tetap hijau WhatsApp, label putih jadi 3,5:1. */
.btn-wa { background: #0f9d58; color: #fff; box-shadow: 0 12px 30px -10px rgba(15,157,88,.6); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(15,157,88,.7); background: #0c8a4d; }
.btn-ghost { color: var(--gray-700); }

/* di atas hero gelap, tombol sekunder jadi kaca */
.hero .btn-secondary, .final-cta .btn-secondary, .gallery-wrap .btn-secondary {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.26);
  box-shadow: none;
}
.hero .btn-secondary:hover, .final-cta .btn-secondary:hover {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   4. HERO — kabin gelap "aurora"
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 108px 0 116px;
  background: var(--ink-800);
  color: #dce6f7;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 140%;
  background:
    radial-gradient(52% 42% at 18% 12%, rgba(47,107,255,.42), transparent 62%),
    radial-gradient(46% 40% at 82% 6%,  rgba(139,92,246,.34), transparent 64%),
    radial-gradient(40% 36% at 62% 76%, rgba(34,211,238,.22), transparent 66%),
    radial-gradient(30% 28% at 96% 62%, rgba(251,191,36,.16), transparent 70%);
  filter: blur(4px);
  mask-image: none; -webkit-mask-image: none;
  animation: v3Aurora 22s ease-in-out infinite alternate;
  z-index: -2;
}
@keyframes v3Aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 78%);
}
.hero-grid { gap: 54px; align-items: center; }
.hero-content { position: relative; z-index: 1; }

.badge {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #dbe7ff; box-shadow: none; font-weight: 600; letter-spacing: var(--ls-ketat);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.badge .dot { background: var(--v3-cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.22); animation: v3Pulse 2.4s ease-in-out infinite; }
@keyframes v3Pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,211,238,.18);} 50% { box-shadow: 0 0 0 7px rgba(34,211,238,.05);} }

/* h1 PUTIH ini dulu global. Halaman dengan hero TERANG ikut kebagian:
   judul releases.html jadi putih di atas putih — hilang sama sekali, tanpa error.
   Warna terang sekarang khusus konteks gelap; defaultnya gelap lagi supaya
   halaman baru tidak perlu ingat menimpa warna. */
h1 {
  margin: 22px 0 16px;
  color: var(--gray-900);
  font-size: var(--fs-hero);
  line-height: var(--lh-tajam);
  text-wrap: balance;
}
.hero h1, .hero-solo h1 { color: #fff; }
h1 .hl {
  background: linear-gradient(96deg, #7fb0ff 0%, #b499ff 42%, #6ee7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { color: var(--gray-600); font-size: var(--fs-lead); max-width: 580px; margin-bottom: 28px; }
.hero .lead, .hero-solo .lead { color: #a9bad6; }
.hero .lead b, .hero-solo .lead b { color: #eaf1ff; }
.cta-group { gap: 14px; margin-bottom: 26px; }
.trust-row { gap: 10px; font-size: var(--fs-ui); color: #9fb1cf; }
.trust-row span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.trust-row span::before { content: "✓"; color: var(--v3-cyan); margin-right: 0; }

/* bingkai mockup */
.hero-mockup {
  padding: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 60%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(11,20,36,.2);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) translateZ(0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-mockup:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }
.hero-mockup svg.app-window { border-radius: 14px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); }
.hero-mockup::after {
  top: -22px; right: -6px; font-size: 34px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* kartu kecil mengambang di atas mockup (dipasang di HTML index) */
.hero-float { position: absolute; z-index: 3; display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(8,14,26,.72); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #eaf1ff; font-size: var(--fs-kecil); font-weight: 600; white-space: nowrap;
  animation: v3Float 6s ease-in-out infinite;
}
.hero-float b { display: block; font-family: var(--font-display); font-size: var(--fs-besar); color: #fff; letter-spacing: var(--ls-ketat); }
.hero-float small { display: block; font-size: var(--fs-mikro); font-weight: 500; color: #93a7c9; }
.hero-float .ico { font-size: var(--fs-sub); }
.hero-float.f1 { left: -26px; top: 16%; animation-delay: .2s; }
.hero-float.f2 { right: -18px; top: 46%; animation-delay: 1.4s; }
.hero-float.f3 { left: 8px; bottom: -18px; animation-delay: 2.6s; }
@keyframes v3Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-art-wrap { position: relative; }
/* garis cahaya di tepi bawah hero */
.hero-edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* hero halaman bebek/puyuh yang hanya punya satu kolom */
.hero-solo { position: relative; z-index: 1; }
.hero-solo h1 { color: #fff; }
.hero-solo .lead { color: #a9bad6; }
.hero-solo .badge { color: #dbe7ff; }
.hero-art { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   5. STATS — rak kartu di perbatasan hero
   ------------------------------------------------------------ */
.stats-bar {
  padding: 0; margin-top: -74px; background: transparent; color: inherit;
  position: relative; z-index: 5;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg);
}
.stat {
  padding: 12px 8px; border-radius: 14px; position: relative;
  transition: background .25s, transform .25s;
}
.stat:hover { background: var(--gray-50); transform: translateY(-2px); }
.stat + .stat::before {
  content: ""; position: absolute; left: -8px; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(11,20,36,.14), transparent);
}
.stat b {
  font-family: var(--font-display); font-size: var(--fs-angka); font-weight: 800;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { font-size: var(--fs-kecil); color: var(--gray-500); font-weight: 600; letter-spacing: var(--ls-sedikit); }

/* ------------------------------------------------------------
   6. SECTION DASAR
   ------------------------------------------------------------ */
.section { padding: 96px 0; position: relative; }
.section-alt {
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(47,107,255,.055), transparent 70%),
    radial-gradient(50% 40% at 8% 100%, rgba(139,92,246,.05), transparent 70%),
    var(--bg-alt);
}
.section-head { max-width: 780px; margin: 0 auto 52px; }
h2 { font-size: var(--fs-judul); line-height: var(--lh-tajam); color: var(--gray-900); text-wrap: balance; }
.sec-lead { font-size: var(--fs-besar); color: var(--gray-500); line-height: var(--lh-long); }
.sec-lead b { color: var(--gray-800); }
.eyebrow {
  background: rgba(47,107,255,.09); color: #1e52d6; border: 1px solid rgba(47,107,255,.16);
  font-family: var(--font-body); font-weight: 700; letter-spacing: var(--ls-lebar);
  padding: 5px 15px; margin-bottom: 16px;
}
.eyebrow-icon img { border-radius: 50%; }

/* ------------------------------------------------------------
   7. WHY — 3 kartu unggulan
   ------------------------------------------------------------ */
.why-grid { gap: 18px; }
.why-card {
  padding: 30px 28px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.why-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-brand); opacity: 0; transition: opacity .3s;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47,107,255,.28); }
.why-card:hover::before { opacity: 1; }
.why-icon {
  width: 54px; height: 54px; border-radius: 16px; font-size: 25px; margin-bottom: 18px;
  background: linear-gradient(150deg, #eaf1ff, #f5f3ff);
  border: 1px solid rgba(47,107,255,.14); color: #1e52d6;
  box-shadow: inset 0 1px 0 #fff;
}
.why-card h3 { font-size: var(--fs-judul-s); }
.why-card p { font-size: var(--fs-body); line-height: var(--lh-long); }

/* ------------------------------------------------------------
   8. FITUR — bento 6 kolom
   ------------------------------------------------------------ */
.features-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.feature {
  grid-column: span 2;
  padding: 26px 24px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px;
  background: radial-gradient(circle, rgba(47,107,255,.10), transparent 66%);
  opacity: 0; transition: opacity .3s;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(47,107,255,.26); }
.feature:hover::after { opacity: 1; }
.feature h3 { font-size: var(--fs-besar); letter-spacing: var(--ls-ketat); }
.feature p { font-size: var(--fs-body); line-height: var(--lh-body); }
.feature-icon {
  width: 46px; height: 46px; border-radius: 14px; font-size: 22px; margin-bottom: 16px;
  background: linear-gradient(150deg, #eaf1ff, #f5f3ff);
  border: 1px solid rgba(47,107,255,.14); color: #1e52d6;
}
/* irama bento: 2 kartu lebar, 3 kartu biasa, dst. */
.feature:nth-child(1), .feature:nth-child(2),
.feature:nth-child(9), .feature:nth-child(10) { grid-column: span 3; }
.feature:nth-child(14) { grid-column: span 6; }
.feature:nth-child(1) .feature-icon, .feature:nth-child(2) .feature-icon,
.feature:nth-child(9) .feature-icon, .feature:nth-child(10) .feature-icon { width: 52px; height: 52px; font-size: 25px; }
.feature:nth-child(1) h3, .feature:nth-child(2) h3,
.feature:nth-child(9) h3, .feature:nth-child(10) h3 { font-size: var(--fs-sub); }
/* kartu penutup (Aman & Privat) jadi pita lebar bertema gelap */
.feature:nth-child(14) {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center;
  background: linear-gradient(120deg, var(--ink-700), #14244a 60%, #1b2a55);
  border-color: rgba(255,255,255,.12); color: #cfdcf5;
}
.feature:nth-child(14) h3 { grid-column: 2; color: #fff; margin: 0; }
.feature:nth-child(14) p { grid-column: 2; color: #a9bad6; }
.feature:nth-child(14) .feature-icon { grid-row: span 2; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff; }

/* ------------------------------------------------------------
   9. UNGGAS (ayam / bebek / puyuh)
   ------------------------------------------------------------ */
.section-unggas {
  background:
    radial-gradient(50% 40% at 12% 0%, rgba(47,107,255,.08), transparent 70%),
    radial-gradient(46% 40% at 92% 10%, rgba(251,191,36,.10), transparent 70%),
    linear-gradient(180deg, #fff, var(--bg) 78%);
}
/* Dulu bagian ini tiga blok yang saling mengulang: banner kartun lebar, tiga kartu
   putih berisi clip-art, lalu dua kartu tautan yang menulis ulang nama & satuan yang
   sama. Sekarang satu kartu = satu unggas: pita foto, avatar, nama, satuan, dan
   tautan halaman khususnya ada di satu tempat. */
.species-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; align-items: stretch; }
.species {
  display: flex; flex-direction: column; margin: 0; padding: 0; text-align: left;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow); position: relative;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.species:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(47,107,255,.26); }
/* Pita foto menelan chrome kartu bawaan .v3-slot: fotonya yang jadi tepi kartu.
   Selektornya lewat .species-photo, bukan .v3-slot, supaya kelas itu benar-benar
   dipakai (penjaga _v3_cek.js menandai kelas yang tidak punya aturan sama sekali). */
.species .species-photo.ada {
  display: block; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.species .species-photo.ada img { width: 100%; height: 188px; object-fit: cover; border-radius: 0; display: block; }
.species-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 20px; }
.species-top { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
/* min-width:0: tanpa ini judul panjang memaksa baris flex melebar dan menggeser chip. */
.species-nama { flex: 1 1 auto; min-width: 0; }
.species-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(47,107,255,.13), rgba(126,87,255,.13));
  border: 1px solid rgba(47,107,255,.15);
}
.species-icon { height: 34px; width: auto; margin: 0; filter: drop-shadow(0 5px 9px rgba(11,20,36,.18)); }
.species h3 { margin: 0 0 7px; font-size: var(--fs-judul-s); }
.species-unit {
  display: inline-block; margin: 0; padding: 3px 10px;
  font-family: var(--font-body); font-size: var(--fs-kecil); font-weight: 700; line-height: var(--lh-body);
  letter-spacing: var(--ls-sedikit); border-radius: 999px;
  background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.18); color: #1e52d6;
}
.species p { flex: 1 1 auto; margin: 0 0 15px; font-size: var(--fs-body); line-height: var(--lh-long); }
/* Penutup kartu: dulu dua kartu .xlink di bawah grid, sekarang satu baris per unggas. */
.species-link {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 13px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 700;
  color: #1e52d6; text-decoration: none;
}
.species-link:hover { color: var(--blue-700); }
.species-go { font-weight: 800; transition: transform .2s; }
.species-link:hover .species-go { transform: translateX(4px); }
.species-note {
  border: 1px solid var(--border); border-left: 3px solid rgba(47,107,255,.5);
  border-radius: 12px; background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm); font-size: var(--fs-body); max-width: 1120px;
}
.xlinks { gap: 14px; }
.xlink {
  border-radius: var(--radius); background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.xlink:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47,107,255,.28); }
.xlink-go { color: #1e52d6; }

/* ------------------------------------------------------------
   10. GALERI TAMPILAN + PITA "GAMBARAN KASAR"
   ------------------------------------------------------------ */
.gallery-wrap {
  padding: 34px; border-radius: 30px; border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(47,107,255,.55), transparent 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(139,92,246,.42), transparent 62%),
    linear-gradient(160deg, #0a1226, #060a14);
  box-shadow: var(--shadow-xl);
}
.gallery-wrap::before {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.gallery-grid { gap: 16px; }
.shot {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.8);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.shot:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 34px 70px -26px rgba(0,0,0,.9); }
/* pita keterangan di bawah tiap mockup: dasar site.css memakai latar PUTIH,
   jadi teksnya harus gelap. Di v3 kita balik jadi bar gelap yang sengaja
   (kontras #e6eefb di atas #0d1526 = 14,6:1). */
.shot-label {
  background: #0d1526; color: #e6eefb;
  border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-body); font-size: var(--fs-kecil); font-weight: 600;
  letter-spacing: -.005em;
}
.shot-label .tag {
  background: rgba(47,107,255,.24); color: #cfe0ff;
  border: 1px solid rgba(47,107,255,.42);
  font-weight: 700; letter-spacing: var(--ls-lebar);
}
.demo-cta {
  font-size: var(--fs-besar); color: var(--gray-700);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 14px 22px; box-shadow: var(--shadow-sm);
}
.demo-cta a { color: #1e52d6; font-weight: 700; }

/* pita peringatan "ini cuma gambaran" — komponen baru v3 */
.penanda {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px;
  margin-top: 26px; padding: 26px 28px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(251,191,36,.18), transparent 60%),
    #fffdf6;
  border: 1px solid rgba(180,120,20,.28);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.penanda::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--grad-hot);
}
.penanda-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-kecil); font-weight: 800; letter-spacing: var(--ls-lebar); text-transform: uppercase;
  color: #92400e; background: rgba(251,191,36,.22);
  border: 1px solid rgba(180,120,20,.28); border-radius: 999px; padding: 5px 13px; margin-bottom: 12px;
}
.penanda h3 { margin: 0 0 10px; font-size: var(--fs-judul-s); color: #231a08; font-family: var(--font-display); letter-spacing: var(--ls-ketat); }
.penanda p { margin: 0 0 6px; font-size: var(--fs-besar); color: #4a3c1c; line-height: var(--lh-long); }
.penanda p b { color: #231a08; }
.penanda-count {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 4px;
  font-size: var(--fs-ui); color: #6b5522; font-weight: 600;
}
.penanda-count i { font-style: normal; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #1e52d6; display: block; }
.penanda-copy { min-width: 0; }
.penanda-copy u { text-decoration: none; border-bottom: 2px solid rgba(180,120,20,.45); }
.penanda-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.penanda .btn-secondary {
  background: #fff; color: var(--gray-800); border-color: rgba(11,20,36,.16); box-shadow: var(--shadow-sm);
}
.penanda .btn-secondary:hover { color: #1e52d6; border-color: rgba(47,107,255,.4); background: #f4f8ff; }
.penanda-box {
  background: #fff; border: 1px solid rgba(11,20,36,.10); border-radius: 16px; padding: 16px 18px;
}
.penanda-box h4 { margin: 0 0 10px; font-size: var(--fs-ui); letter-spacing: var(--ls-lebar); text-transform: uppercase; color: var(--gray-500); font-family: var(--font-body); }
.pn-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pn-chip {
  font-size: var(--fs-kecil); font-weight: 600; color: #1e2c46;
  background: var(--gray-50); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px;
}
.pn-chip.hilang { color: #6b5522; background: #fffaf0; border-color: rgba(180,120,20,.25); }
.pn-chip.hilang::before { content: "· "; color: #b45309; }
/* Dulu 15 chip dibuka sekaligus dan panel sampingnya jadi lebih tinggi dari
   kolom teks di sebelahnya. Sekarang 5 yang paling kuat tampil, sisanya masuk
   <details> bawaan HTML: nol JS, tetap bisa di-Tab lalu di-Enter. */
.pn-lebih { margin-top: 9px; }
.pn-lebih summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: var(--fs-kecil); font-weight: 700; color: #92400e;
  background: #fffaf0; border: 1px dashed rgba(180,120,20,.45); border-radius: 999px; padding: 5px 12px;
}
.pn-lebih summary::-webkit-details-marker { display: none; }
.pn-lebih summary::after { content: "▾"; font-size: var(--fs-mikro); line-height: 1; opacity: .85; }
.pn-lebih[open] summary::after { content: "▴"; }
.pn-lebih summary:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.pn-sisa { margin-top: 9px; }
.penanda-cta { display: grid; gap: 9px; margin-top: auto; }
.penanda-cta .btn { width: 100%; }
.penanda-fine { font-size: var(--fs-kecil); color: #7a6427; margin: 0; }

/* ------------------------------------------------------------
   10b. SLOT FOTO OPSIONAL — dinyalakan site.js hanya kalau file-nya ADA.
        Jadi halaman tetap rapi walaupun gambarnya belum di-generate.
   ------------------------------------------------------------ */
/* Foto hero sudah dipasang. Dulu lapisannya .88->.95 rata (hitam pekat) sehingga
   fotornya tidak kelihatan sama sekali — slot foto jadi kerja kosong.
   Sekarang lapisannya miring: 0-52% (tempat judul + paragraf + tombol) tetap
   gelap, 68-100% (tempat kartu dashboard) membiarkan kandang terlihat.
   Penjaga _v3_slot.js [C] menguji sisi TERGELAP di pita 0-52% saja, karena di
   situ teks berada; di luar pita itu tidak ada teks yang bisa hilang. */
.hero.v3-ada-foto {
  background:
    linear-gradient(100deg, rgba(7,11,22,.90) 0%, rgba(7,11,22,.80) 40%, rgba(7,11,22,.52) 72%, rgba(7,11,22,.40) 100%),
    var(--v3-foto) 78% 62% / cover no-repeat;
}
/* Aurora v3 menyapu warna di atas foto dan membuat sisi kanannya kembali pudar. */
.hero.v3-ada-foto::before { opacity: .34; }
/* Di bawah 980px .hero-grid menumpuk jadi SATU kolom: teks melebar penuh, jadi
   bagian gradient horizontal yang paling terang (sisi kanan, alpha .40) jatuh
   tepat di belakang judul dan tombol. Terukur di piksel asli (500px):
   4,00:1 di pita judul dan 3,64:1 di pita tombol — dua-duanya di bawah 4,5:1.
   Untuk lebar itu lapisannya jadi VERTIKAL: gelap tempat teks berada, foto
   tetap boleh bernapas di sepertiga bawah di belakang kartu dashboard. */
@media (max-width: 980px) {
  .hero.v3-ada-foto {
    background:
      linear-gradient(178deg, rgba(7,11,22,.94) 0%, rgba(7,11,22,.90) 45%, rgba(7,11,22,.80) 75%, rgba(7,11,22,.62) 100%),
      var(--v3-foto) 60% 42% / cover no-repeat;
  }
}
.v3-slot { display: none; }
.v3-slot.ada {
  display: grid; gap: 16px; margin-top: 26px; padding: 18px;
  border-radius: var(--radius-lg); background: #fff;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.v3-slot.ada img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.v3-slot-cap { margin: 0; font-size: var(--fs-body); color: var(--gray-600); line-height: var(--lh-body); align-self: center; }
@media (min-width: 900px) {
  .v3-slot.ada { grid-template-columns: 1.15fr .85fr; align-items: center; }
}

/* ------------------------------------------------------------
   11. DOKUMEN (kertas + foto + doc-feats)
   ------------------------------------------------------------ */
.paper-grid { gap: 18px; }
.paper {
  border-radius: 16px; box-shadow: var(--shadow-lg);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.paper:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow-xl); }
.doc-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.doc-photo figcaption { font-size: var(--fs-ui); color: var(--gray-500); }
.doc-feats { gap: 12px; }
.doc-feat {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; font-size: var(--fs-body); box-shadow: var(--shadow-sm);
  transition: transform .2s, border-color .2s;
}
.doc-feat:hover { transform: translateY(-2px); border-color: rgba(47,107,255,.26); }

/* ------------------------------------------------------------
   12. ASISTEN AI (duo + chat)
   ------------------------------------------------------------ */
.duo { gap: 40px; align-items: center; }
.duo + .duo { margin-top: 56px; }
.duo-copy h3 { font-size: var(--fs-judul-s); line-height: var(--lh-judul); margin: 0 0 10px; }
.duo-copy > p { color: var(--gray-500); font-size: var(--fs-besar); margin: 0 0 20px; }
.duo-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.duo-list li {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px; font-size: var(--fs-body); box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.duo-list li:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.duo-list li > span:first-child {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, #eaf1ff, #f5f3ff); border: 1px solid rgba(47,107,255,.14); font-size: var(--fs-sub);
}
.duo-shot figure {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-xl);
  background: #fff;
}
.duo-shot img { width: 100%; height: auto; display: block; }

.chat {
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; max-width: 720px;
}
.chat-head {
  background: linear-gradient(120deg, var(--ink-700), #16264d);
  color: #eaf1ff; padding: 14px 18px; font-size: var(--fs-body);
}
.chat-head b { color: #fff; }
.chat-head em { color: #6ee7b7; font-style: normal; font-size: var(--fs-kecil); }
.chat-body { padding: 20px; display: grid; gap: 12px; background: linear-gradient(180deg, #f7f9fd, #fff); }
.bub { font-size: var(--fs-body); line-height: var(--lh-body); border-radius: 18px; padding: 12px 16px; }
.bub.me { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 24px -14px rgba(47,107,255,.8); }
.bub.bot { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------
   13. LANGKAH / PEMBANDING / KALKULATOR
   ------------------------------------------------------------ */
.steps { gap: 14px; }
.step {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.step-n {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-weight: 800;
  box-shadow: var(--glow-blue); margin-bottom: 10px;
}
.cmp-wrap { border-radius: var(--radius-lg); }
.cmp { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.cmp-hint { font-size: var(--fs-ui); color: var(--gray-500); }
.calc {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.calc-head { font-family: var(--font-display); }
/* 20 Okt: lapisan ini dulu menulis "padding: 12px 0" — shorthand MENGHAPUS padding
   samping 20px yang sudah diberikan site.css, jadi seluruh baris angka menempel 1px
   ke bingkai kartu (terukur: label mulai di x=1, nilai berhenti 1px dari tepi kanan)
   sementara judul dan catatan tetap menjorok 20px. Angka yang rata ke bingkai juga
   bikin garis pemisah putus di tengah bilangan. Samping dikembalikan, dan kolom nilai
   dikunci supaya tidak pernah lagi terpotong: label yang panjang yang turun baris,
   bukan angkanya yang meluber. */
.calc-row { padding: 12px 20px; }
.calc-row span { flex: 1 1 auto; min-width: 0; }
.calc-row b { flex: none; white-space: nowrap; text-align: right; }
@media (max-width: 560px) {
  .calc-row { padding: 11px 14px; font-size: var(--fs-ui); }
  .calc-head, .calc-note { padding-left: 14px; padding-right: 14px; }
}
.calc-note { font-size: var(--fs-kecil); color: var(--gray-500); }
.unit-strip { gap: 10px; }
.unit-pill {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: var(--fs-ui); font-weight: 700; color: var(--gray-800);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   14. GRAFIK & ANALITIK
   ------------------------------------------------------------ */
.chart-grid { gap: 16px; }
.chart-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.chart-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.chart-card h3 { font-size: var(--fs-besar); margin: 0 0 4px; }
.chart-sub { font-size: var(--fs-kecil); }
.insight-row { gap: 10px; }
.insight {
  border-radius: 14px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .2s, border-color .2s;
}
.insight:hover { transform: translateY(-3px); border-color: rgba(47,107,255,.3); }
.insight b { font-family: var(--font-display); font-size: var(--fs-sub); }

/* ------------------------------------------------------------
   15. TIMELINE RILIS
   ------------------------------------------------------------ */
/* Warisan v2: timeline 760px tanpa padding kartu. Efeknya badge versi
   terpotong sudut kartu, teks mepet ke tepi kanan, titiknya mengambang lepas
   dari sumbu, dan kartu 3, 4, 5 tingginya beda-beda dengan ruang kosong.
   `gap: 14px` yang lama bahkan tidak pernah berlaku (timeline bukan flex/grid). */
.timeline {
  display: grid; gap: 18px;
  max-width: 900px; margin: 0 auto;
  padding-left: 48px;
}
.timeline::before {
  content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(47,107,255,.85) 0%, rgba(47,107,255,.40) 45%, rgba(47,107,255,.08) 100%);
}
.tl-item {
  position: relative; margin: 0;
  padding: 17px 22px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s, border-color .25s;
}
/* pusat titik = 48 + (-38) + 16/2 = 18 = pusat sumbu (16 + 4/2) */
.tl-item::before {
  content: ""; position: absolute; left: -38px; top: 21px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 4px solid #2f6bff;
  box-shadow: 0 0 0 4px rgba(47,107,255,.10);
}
/* jembatan titik -> kartu, supaya tidak kelihatan lepas */
.tl-item::after {
  content: ""; position: absolute; left: -22px; top: 28px; width: 22px; height: 2px;
  background: linear-gradient(90deg, rgba(47,107,255,.40), rgba(47,107,255,.08));
}
.tl-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: rgba(47,107,255,.28); }
/* rilis terbaru harus terlihat paling penting, bukan sama rata */
.tl-item:first-child {
  border-color: rgba(47,107,255,.34);
  background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
  box-shadow: 0 14px 34px -16px rgba(47,107,255,.45);
}
.tl-item:first-child::before {
  background: var(--grad-brand); border-color: #fff;
  box-shadow: 0 0 0 5px rgba(47,107,255,.16), var(--glow-blue);
}
.tl-head { gap: 9px; }
.tl-ver {
  font-family: var(--font-display); font-size: var(--fs-besar); line-height: 1;
  padding: 7px 11px; border-radius: 11px;
  background: var(--grad-brand); color: #fff; box-shadow: var(--glow-blue);
}
.tl-tag { background: rgba(47,107,255,.08); color: #1e52d6; border: 1px solid rgba(47,107,255,.16); }
.tl-tag.new { background: #e9fbf2; color: #047857; border-color: #a7f3d0; }
.tl-date { margin-left: auto; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.tl-item ul { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tl-item li { position: relative; padding-left: 25px; font-size: var(--fs-besar); line-height: var(--lh-body); color: var(--gray-600); }
.tl-item li::before {
  content: "\2713"; position: absolute; left: 0; top: 3px; width: 17px; height: 17px;
  border-radius: 6px; background: rgba(47,107,255,.11); color: #1e52d6;
  font-size: var(--fs-mikro); font-weight: 800; line-height: 1; display: grid; place-items: center;
}
.tl-item li b { color: var(--gray-900); }
@media (min-width: 1000px) {
  /* dua kolom: kartu 900px jangan jadi satu baris teks ~110 karakter */
  .tl-item ul { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
@media (max-width: 700px) {
  .timeline { padding-left: 30px; gap: 14px; }
  .timeline::before { left: 6px; width: 3px; }
  .tl-item { padding: 15px 16px 14px; border-radius: 15px; }
  .tl-item::before { left: -28px; top: 18px; width: 13px; height: 13px; border-width: 3px; }
  .tl-item::after { display: none; }
  .tl-date { margin-left: 0; width: 100%; }
  .tl-item li { font-size: var(--fs-body); }
}
.tl-more { margin-top: 26px; }
.tl-more a { color: #1e52d6; font-weight: 700; }

/* ------------------------------------------------------------
   16. HARGA
   ------------------------------------------------------------ */
.pricing-grid { gap: 16px; align-items: stretch; }
.plan {
  border-radius: var(--radius-lg); padding: 28px 26px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  position: relative; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(47,107,255,.24); }
.plan-name {
  font-family: var(--font-display); font-size: var(--fs-besar); font-weight: 700; letter-spacing: var(--ls-lebar);
  text-transform: uppercase; color: var(--gray-500);
}
.plan-price {
  font-family: var(--font-display); font-size: var(--fs-harga); font-weight: 800; letter-spacing: var(--ls-ketat);
  color: var(--gray-900); margin: 8px 0 6px; font-variant-numeric: tabular-nums;
}
.plan-price small { font-size: var(--fs-ui); font-weight: 600; color: var(--gray-500); letter-spacing: 0; white-space: nowrap; }
.plan-desc { font-size: var(--fs-body); color: var(--gray-500); }
.plan ul { padding: 0; margin: 18px 0 22px; display: grid; gap: 9px; }
.plan li {
  font-size: var(--fs-body); color: var(--gray-700); padding-left: 26px; position: relative; list-style: none;
}
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center;
  font-size: var(--fs-mikro); font-weight: 800; color: #1e52d6; background: rgba(47,107,255,.10);
}
.plan .btn { margin-top: auto; }
.plan.featured {
  transform: none;
  background: linear-gradient(165deg, #0a1226 0%, #14264f 55%, #1b2f66 100%);
  border-color: rgba(255,255,255,.16); color: #dbe6f7;
  box-shadow: 0 34px 70px -30px rgba(11,20,36,.75);
}
.plan.featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 40% at 50% 0%, rgba(47,107,255,.45), transparent 70%);
}
.plan.featured .plan-name { color: #9fb6dd; }
.plan.featured .plan-price { color: #fff; }
.plan.featured .plan-desc { color: #a9bad6; }
.plan.featured li { color: #dbe6f7; }
.plan.featured li::before { color: #6ee7ff; background: rgba(110,231,255,.14); }
.plan.featured:hover { transform: translateY(-8px); }
.plan-popular {
  background: var(--grad-hot); color: #241a06; font-weight: 800; letter-spacing: var(--ls-lebar);
  border: 0; box-shadow: 0 10px 24px -10px rgba(251,191,36,.8);
}

/* ------------------------------------------------------------
   17. JANJI / DUKUNGAN
   ------------------------------------------------------------ */
/* panel .promise di site.css itu permukaan TERANG (biru muda -> putih),
   jadi seluruh isinya harus tetap terang. Jangan pakai gaya gelap di sini. */
.promise {
  border-radius: 30px; border: 1px solid rgba(47,107,255,.16);
  box-shadow: var(--shadow-lg);
}
/* Jarak 16px itu warisan saat lingkaran HP masih kempes. Sekarang cincinnya
   melebar 27px ke atas & ke bawah kotak, jadi butuh napas — kalau tidak,
   chip janji yang paling atas/ paling bawah menempel ke kartu tetangga. */
.promise-grid { gap: 40px; }
@media (min-width: 900px) { .promise-grid { gap: 46px; } }
.promise-item, .promise-list li {
  background: rgba(255,255,255,.74); border: 1px solid rgba(47,107,255,.14);
  border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.promise-list li:last-child { border-bottom: 1px solid rgba(47,107,255,.14); }
.promise-list h4 { color: var(--gray-900); }
.promise-list p { color: var(--gray-600); }
.promise-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad-brand); color: #fff; border: 0;
  box-shadow: 0 10px 22px -8px rgba(47,107,255,.6);
}
/* Lingkaran komitmen. Dulu SELURUH blok ikut berputar 40s, jadi telurnya
   jungkir balik pelan tanpa arti. Sekarang tiap gerakan punya tugas:
   sapuan "radar" = rilis jalan terus, 4 titik orbit = empat janji di kiri
   (tetap tegak karena dilawan putar), telurnya cuma mengambang. */
.promise-visual {
  animation: none;
  background:
    radial-gradient(58% 58% at 50% 38%, #fff 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 72%),
    radial-gradient(circle at 50% 50%, var(--blue-200), var(--blue-50));
}
.promise-visual::before { inset: -18px; border-width: 1.5px; border-color: rgba(47,107,255,.26); animation-duration: 46s; }
/* Cincin terluar = skala jam (24 garis pendek), bukan lingkaran kosong. */
.promise-visual::after {
  inset: -44px; border: 0; animation: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(47,107,255,.34) 0deg .8deg, rgba(47,107,255,0) .8deg 15deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 90%, #000 91%);
          mask: radial-gradient(circle closest-side, transparent 0 90%, #000 91%);
}
.pv-sweep {
  position: absolute; inset: -44px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(47,107,255,0) 0deg 186deg, rgba(47,107,255,.10) 268deg,
    rgba(91,91,239,.30) 336deg, rgba(34,211,238,.52) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 52%, #000 53%);
          mask: radial-gradient(circle closest-side, transparent 0 52%, #000 53%);
  animation: v3Spin 9s linear infinite;
}
.pv-core {
  position: relative; display: grid; place-items: center;
  width: 47%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #fff 0 58%, rgba(255,255,255,.45) 70%, rgba(255,255,255,0) 78%);
  box-shadow: 0 0 0 1px rgba(47,107,255,.10), 0 26px 52px -26px rgba(11,20,36,.38);
  animation: pvBob 6s ease-in-out infinite;
}
.pv-core > span {
  font-size: 116px; line-height: 1;
  filter: drop-shadow(0 16px 22px rgba(11,20,36,.22));
}
/* kepala sapuan: titik terang di ujung arc, jadi gerakannya terbaca
   "sedang jalan", bukan lingkaran yang mutar doang */
.pv-head { position: absolute; inset: -44px; animation: v3Spin 9s linear infinite; }
.pv-head b {
  position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 2px solid #22d3ee;
  box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 0 22px 5px rgba(34,211,238,.55);
}
/* Orbit tempat 4 janji berjalan: ring-nya digambar supaya titik-titiknya
   terbaca "naik jalur", bukan emoji yang melayang tanpa sebab. */
.pv-orbit {
  position: absolute; inset: -26px; border-radius: 50%;
  border: 1px dashed rgba(47,107,255,.20);
  animation: v3Spin 26s linear infinite;
}
.pv-sat { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); }
.pv-sat > i {
  position: absolute; left: 50%; top: 0; width: 0; height: 0; font-style: normal;
  animation: v3SpinBack 26s linear infinite;
}
.pv-sat > i > em {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px;
  display: grid; place-items: center; font-style: normal; font-size: 20px;
  border-radius: 50%; background: linear-gradient(180deg, #fff, #f2f6ff);
  border: 1px solid rgba(47,107,255,.24);
  box-shadow: 0 0 0 7px rgba(255,255,255,.72), 0 14px 26px -14px rgba(11,20,36,.55);
  transform: rotate(calc(-1 * var(--a, 0deg)));
}
.pv-tag {
  position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: var(--fs-kecil); font-weight: 700; letter-spacing: var(--ls-sedikit);
  color: #1e52d6; background: rgba(255,255,255,.92);
  border: 1px solid rgba(47,107,255,.24); border-radius: 999px;
  padding: 5px 13px; white-space: nowrap; box-shadow: var(--shadow-sm);
}
@keyframes pvBob { 0%, 100% { transform: translateY(-7px) rotate(-7deg); } 50% { transform: translateY(7px) rotate(7deg); } }
@keyframes v3Spin { to { transform: rotate(360deg); } }
@keyframes v3SpinBack { to { transform: rotate(-360deg); } }
@media (max-width: 900px) {
  /* site.css memberi `margin: 0 auto` di sini. Untuk ANAK GRID, margin auto
     membunuh stretch: lebarnya menyusut ke isi — terukur 85px, bukan 280px —
     lalu .pv-core { width: 47% } ikut kehilangan acuan. Hasilnya di HP:
     lingkaran kempes, keempat janji menumpuk di atas telur. Obatnya lebar
     eksplisit (persentase kolom), bukan max-width. */
  .promise-visual { width: min(300px, 82%); max-width: none; margin: 6px auto 0; }
  /* Semua cincin dinyatakan dalam persen terhadap lingkarnya sendiri, bukan
     piksel tetap, supaya kecilnya lingkaran selalu ikut mengecilkan cincin —
     tidak ada lagi cincin yang melewati tepi kartu putih lalu terpotong. */
  .promise-visual::before { inset: -3.5%; }
  .promise-visual::after  { inset: -7.5%; }
  .pv-sweep { inset: -7.5%; }
  .pv-head  { inset: -7.5%; }
  .pv-head b { width: 12px; height: 12px; margin-left: -6px; top: -6px; }
  .pv-orbit { inset: -4%; }
  .pv-core > span { font-size: 62px; }
}
@media (max-width: 700px) {
  .pv-sat > i > em { width: 30px; height: 30px; left: -15px; top: -15px; font-size: 13px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 8px 16px -10px rgba(11,20,36,.55); }
  .pv-tag { font-size: var(--fs-mikro); bottom: 6%; padding: 4px 10px; }
}

/* ------------------------------------------------------------
   18. FAQ
   ------------------------------------------------------------ */
.faq-wrap { max-width: 840px; }
.faq-item {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: rgba(47,107,255,.26); box-shadow: var(--shadow); }
.faq-item[open] { border-color: rgba(47,107,255,.36); box-shadow: var(--shadow); }
.faq-body summary { font-weight: 700; font-size: var(--fs-besar); color: var(--gray-900); font-family: var(--font-body); }
.faq-body summary::marker, .faq-body summary::-webkit-details-marker { display: none; content: ""; }

/* ------------------------------------------------------------
   19. FINAL CTA
   ------------------------------------------------------------ */
.final-cta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 32px; padding: 68px 40px; text-align: center;
  background:
    radial-gradient(60% 90% at 20% 10%, rgba(47,107,255,.55), transparent 62%),
    radial-gradient(50% 80% at 84% 88%, rgba(34,211,238,.35), transparent 62%),
    linear-gradient(160deg, #070c18, #101c3a);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-xl);
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
}
.final-cta h2 { color: #fff; font-size: var(--fs-judul); }
.final-cta p { color: #a9bad6; font-size: var(--fs-besar); }
.final-cta .cta-group { justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------ */
footer {
  background: var(--ink-900); color: #9fb1cf; position: relative;
  border-top: 0;
}
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,107,255,.85), rgba(34,211,238,.7), transparent);
}
footer .brand { color: #fff; }
.footer-tagline { font-size: var(--fs-body); color: #8ea1c0; max-width: 340px; }
.footer-grid { gap: 34px; }
.footer-col h4 {
  font-family: var(--font-body); font-size: var(--fs-kecil); letter-spacing: var(--ls-lebar); text-transform: uppercase;
  color: #6d81a4; margin: 0 0 14px;
}
.footer-col ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.footer-col a { font-size: var(--fs-body); color: #bfcee6; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); color: #7f92b3; font-size: var(--fs-ui);
}
.footer-bottom a { color: #bfcee6; }
.fs-label { color: #6d81a4; }
.fs-item {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #d5e2f6;
  transition: transform .2s, background .2s, border-color .2s;
}
.fs-item:hover { transform: translateY(-3px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.26); }

/* ------------------------------------------------------------
   21. WHATSAPP MENGAMBANG + CTA CEKUNGAN MOBILE
   ------------------------------------------------------------ */
.floating-wa { right: 22px; bottom: 22px; }
.floating-wa a {
  border-radius: 999px; padding: 13px 18px; gap: 9px;
  background: #0f9d58; color: #fff; font-weight: 700; font-size: var(--fs-body);
  box-shadow: 0 16px 34px -12px rgba(37,211,102,.75);
  transition: transform .2s, box-shadow .25s;
}
.floating-wa a:hover { transform: translateY(-3px) scale(1.03); background: #0c8a4d; box-shadow: 0 22px 44px -14px rgba(15,157,88,.85); }

#v3Sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 30px -18px rgba(11,20,36,.4);
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
body.v3-sticky-on #v3Sticky { transform: none; }
#v3Sticky .btn { flex: 1; padding: 13px 12px; font-size: var(--fs-body); }

/* ------------------------------------------------------------
   22. UTILITAS v3 (reveal, chips, tabel halus)
   ------------------------------------------------------------ */
.v3-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.v3-reveal.v3-in { opacity: 1; transform: none; }
.v3-reveal.d1 { transition-delay: .07s; }
.v3-reveal.d2 { transition-delay: .14s; }
.v3-reveal.d3 { transition-delay: .21s; }
.v3-reveal.d4 { transition-delay: .28s; }

.v3-taglist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.v3-tag {
  font-size: var(--fs-kecil); font-weight: 600; color: var(--gray-700);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   22b. IKON CUSTOM — dipasang _v3_pasang_ikon.js; bentuk: _v3_ikon_set.js

   UKURAN. Tiap glyph digambar di kanvas 24 lalu dipotong 1em, jadi
   besarnya IKUT font-size pelatnya sendiri (why-icon 25px, feature-icon
   22px, pv-core 62px, dst). Sengaja tidak ada aturan ukuran per pelat —
   itu memang gunanya 1em, dan itu yang bikin satu set tetap seragam.

   WARNA. Delapan warna peternakan diputar sebaris per kartu. Yang disentuh
   di sini HANYA warna; aturan ukuran di bagian 7, 8, 11, 12, 17 dibiarkan.
   Biru #1e52d6 yang lama bikin semua pelat tampak sama — itu yang dihapus.
   Semua pasangan garis/pelat dipilih >= 3:1 terhadap latar WCAG 1.4.11.
   ------------------------------------------------------------ */
.ikon { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }

.why-card:nth-child(8n+1), .feature:nth-child(8n+1), .doc-feat:nth-child(8n+1),
.duo-list li:nth-child(8n+1), .promise-item:nth-child(8n+1), .promise-list li:nth-child(8n+1) {
  --ak: #c85a22; --ak1: #fff1e7; --ak2: #ffe3ce; --akb: rgba(200,90,34,.22);
}
.why-card:nth-child(8n+2), .feature:nth-child(8n+2), .doc-feat:nth-child(8n+2),
.duo-list li:nth-child(8n+2), .promise-item:nth-child(8n+2), .promise-list li:nth-child(8n+2) {
  --ak: #b87a00; --ak1: #fff7e0; --ak2: #ffedbf; --akb: rgba(184,122,0,.22);
}
.why-card:nth-child(8n+3), .feature:nth-child(8n+3), .doc-feat:nth-child(8n+3),
.duo-list li:nth-child(8n+3), .promise-item:nth-child(8n+3), .promise-list li:nth-child(8n+3) {
  --ak: #238657; --ak1: #e8f8ef; --ak2: #d5f1e2; --akb: rgba(35,134,87,.22);
}
.why-card:nth-child(8n+4), .feature:nth-child(8n+4), .doc-feat:nth-child(8n+4),
.duo-list li:nth-child(8n+4), .promise-item:nth-child(8n+4), .promise-list li:nth-child(8n+4) {
  --ak: #0b7c8c; --ak1: #e4f7fa; --ak2: #cfeff6; --akb: rgba(11,124,140,.22);
}
.why-card:nth-child(8n+5), .feature:nth-child(8n+5), .doc-feat:nth-child(8n+5),
.duo-list li:nth-child(8n+5), .promise-item:nth-child(8n+5), .promise-list li:nth-child(8n+5) {
  --ak: #2f6bff; --ak1: #eaf1ff; --ak2: #dce8ff; --akb: rgba(47,107,255,.18);
}
.why-card:nth-child(8n+6), .feature:nth-child(8n+6), .doc-feat:nth-child(8n+6),
.duo-list li:nth-child(8n+6), .promise-item:nth-child(8n+6), .promise-list li:nth-child(8n+6) {
  --ak: #7c5cff; --ak1: #f1edff; --ak2: #e4deff; --akb: rgba(124,92,255,.20);
}
.why-card:nth-child(8n+7), .feature:nth-child(8n+7), .doc-feat:nth-child(8n+7),
.duo-list li:nth-child(8n+7), .promise-item:nth-child(8n+7), .promise-list li:nth-child(8n+7) {
  --ak: #d6455d; --ak1: #ffecf0; --ak2: #ffe0e6; --akb: rgba(214,69,93,.20);
}
.why-card:nth-child(8n+8), .feature:nth-child(8n+8), .doc-feat:nth-child(8n+8),
.duo-list li:nth-child(8n+8), .promise-item:nth-child(8n+8), .promise-list li:nth-child(8n+8) {
  --ak: #8a5a2b; --ak1: #f7eee5; --ak2: #f0e2d2; --akb: rgba(138,90,43,.22);
}

/* pelat ikon: ikut warna kartu, ukuran tidak disentuh */
.why-icon, .feature-icon, .duo-list li > span:first-child, .promise-icon {
  background: linear-gradient(150deg, var(--ak1, #eaf1ff), var(--ak2, #f5f3ff));
  border: 1px solid var(--akb, rgba(47,107,255,.14));
  color: var(--ak, #1e52d6); box-shadow: inset 0 1px 0 #fff;
}
.doc-feat .ikon, .insight .ikon { color: var(--ak, var(--blue-700)); }
.why-card::before { background: linear-gradient(120deg, var(--ak), var(--ak2)); }
.feature::after { background: radial-gradient(circle, var(--akb), transparent 66%); }

/* kartu penutup "Aman & Privat" tetap pita gelap — ikonnya putih di atas
   latar tembus, bukan pelat berwarna. Aturan bagian 8 sudah mengatur ini;
   diulang di sini karena blok 22b datang belakangan dan akan menimpanya. */
.feature:nth-child(14) .feature-icon {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);
  color: #fff; box-shadow: none;
}

/* ------------------------------------------------------------
   23. RESPONSIF
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nav-links { gap: 18px; }
}
@media (max-width: 1024px) {
  .feature:nth-child(1), .feature:nth-child(2), .feature:nth-child(9), .feature:nth-child(10) { grid-column: span 3; }
  .hero-float.f1 { left: -8px; }
  .hero-float.f3 { left: 20px; }
}
@media (max-width: 980px) {
  .section { padding: 74px 0; }
  .hero { padding: 86px 0 104px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-mockup { transform: none; }
  .lead { max-width: none; }
  .penanda { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 26px; }
  .duo-shot { order: -1; }
  .features-grid { grid-template-columns: repeat(4, 1fr); }
  .feature, .feature:nth-child(1), .feature:nth-child(2),
  .feature:nth-child(9), .feature:nth-child(10) { grid-column: span 2; }
  .feature:nth-child(14) { grid-column: span 4; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat::before { display: none; }
  .species-grid { grid-template-columns: 1fr; }
  /* Satu kolom: kartunya selebar layar, jadi pitanya ikut naik supaya foto tidak gepeng. */
  .species .species-photo.ada img { height: 216px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  header { padding: 10px 0 0; }
  .nav { padding: 7px 8px 7px 14px; }
  .nav nav, .nav > nav { display: none; }
  .nav-links { display: none; }
  .nav > .btn { display: none; }
  .v3-burger { display: inline-flex; }
}
@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature, .feature:nth-child(n) { grid-column: span 2; }
  .feature:nth-child(14) { grid-template-columns: 1fr; }
  .gallery-wrap { padding: 18px; border-radius: 22px; }
  .gallery-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px;
  }
  .gallery-grid .shot { flex: 0 0 82%; scroll-snap-align: center; }
  .final-cta { padding: 48px 22px; border-radius: 24px; }
  .hero-float { display: none; }
  .floating-wa { bottom: 78px; right: 14px; }
  .floating-wa a span { display: none; }
  .floating-wa a { padding: 13px; }
  #v3Sticky { display: flex; }
  .stats-bar { margin-top: -58px; }
  .stats-grid { padding: 16px; gap: 10px; }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
  h1 { font-size: var(--fs-hero-hp); }
  .cta-group .btn { flex: 1 1 auto; justify-content: center; }
  .demo-cta { border-radius: var(--radius); text-align: center; }
}
@media (max-width: 540px) {
  .section { padding: 60px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .chat { font-size: var(--fs-ui); }
  .penanda { padding: 20px 18px; }
}

/* ------------------------------------------------------------
   24. GERAKAN BERKURANG & CETAK
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .badge .dot, .hero-float, .promise-visual,
  .pv-sweep, .pv-head, .pv-orbit, .pv-sat > i, .pv-core { animation: none !important; }
  .v3-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn-primary::after { display: none; }
  * { transition-duration: .01ms !important; }
}
@media print {
  header, .floating-wa, #v3Sticky, #v3Progress, .v3-drawer { display: none !important; }
  .hero { background: #fff !important; color: #111 !important; }
}