/* ==========================================================================
   Tema hijau korporat (Arah F). Dipasang SETELAH style.css.
   Menimpa token warna gelap-biru jadi putih, hijau tua, dan mint, plus
   komponen yang warnanya ditulis langsung di style.css.
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-bg-deep: #102c25;
  --color-surface: #f6f9f7;
  --color-surface-2: #eef7f2;
  --color-text: #14211d;
  --color-divider: #e3e8e6;

  --color-accent: #173d33;
  --color-accent-2: #22594a;
  --color-accent-deep: #102c25;
  --color-accent-100: #eef7f2;
  --color-accent-200: #dcefe5;
  --color-accent-300: #b8e3cb;
  --color-accent-400: #7fbf9f;
  --color-accent-500: #2f7a60;
  --color-accent-600: #22594a;
  --color-accent-700: #1c4a3e;
  --color-accent-800: #b8e3cb;
  --color-accent-900: #eef7f2;

  --color-section: #173d33;
  --color-section-glow: #22594a;

  --font-heading: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 0 0 1px #e3e8e6;
  --shadow-md: 0 0 0 1px #b8e3cb, 0 22px 40px -26px rgba(23, 61, 51, 0.5);
  --shadow-lg: 0 0 0 1px #b8e3cb, 0 30px 60px -30px rgba(23, 61, 51, 0.55);

  --mint: #dcefe5;
  --mint-2: #b8e3cb;
}

body { font-size: 15.5px; }
.page { background: #fff; }
::selection { background: var(--mint-2); }

h1, h2, h3, .section-title, .card-title { color: var(--color-accent); letter-spacing: -0.025em; }
.lead { color: #5f6b67; }

.eyebrow {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent-2);
  padding-left: 28px;
}
.eyebrow::before { width: 18px; height: 2px; border-radius: 2px; background: var(--color-accent-2); }

/* Tombol */
.btn { font-size: 15px; padding: 13px 22px; border-radius: 10px; }
.btn-primary {
  color: #fff;
  background: var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 22px -14px rgba(23, 61, 51, 0.9);
}
.btn-primary:hover { background: var(--color-accent-2); }
.btn-secondary { background: #fff; color: var(--color-text); border-color: var(--color-divider); }
.btn-secondary:hover { background: #fff; border-color: var(--color-accent); }

/* Kartu */
.card { background: #fff; box-shadow: none; border: 1px solid var(--color-divider); border-radius: 20px; padding: 24px; }
.card-body { color: #5f6b67; opacity: 1; font-size: 14.5px; }
.card-media { padding: 0; }
.card-media:hover { box-shadow: var(--shadow-md); }
.card-media .visual-16x10 { background: var(--mint); padding: 16px 16px 0; }
.card-media .visual-16x10 img { border-radius: 10px 10px 0 0; box-shadow: 0 -6px 24px -14px rgba(0, 0, 0, 0.3); }
.tag { background: var(--mint); color: var(--color-accent); font-weight: 600; border-radius: 999px; }

/* Harga */
.price-card { background: #fff; border: 1px solid var(--color-divider); box-shadow: none; }
.price-name { color: var(--color-accent-2); }
.price-value { color: var(--color-accent); font-weight: 600; }
.price-value small, .price-desc { color: #5f6b67; }
.price-list li::before { border-color: var(--color-accent-2); }
.price-card.is-unggulan { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 30px 60px -36px rgba(23, 61, 51, 0.8); }
.price-card.is-unggulan .price-name { color: var(--mint-2); }
.price-card.is-unggulan .price-value { color: #fff; }
.price-card.is-unggulan .price-value small, .price-card.is-unggulan .price-desc { color: var(--mint-2); }
.price-card.is-unggulan .price-list li::before { border-color: var(--mint-2); }
.price-card.is-unggulan .btn-primary { background: var(--mint-2); color: #102c25; box-shadow: none; }
.price-card.is-unggulan .btn-primary:hover { background: #fff; }
.price-badge { color: #102c25; background: var(--mint-2); }
.price-hitung { background: var(--color-surface-2); border-color: var(--mint-2); }
.price-hitung b { color: var(--color-accent); }

/* Kartu contoh desain */
.tag-contoh { background: var(--color-accent); color: #fff; }
.buka-contoh { color: var(--color-accent-2); }
.kartu-contoh:hover .visual img { transform: none; translate: 0 -6px; transition: translate 0.5s ease; }

/* Lain-lain */
.wa-float { color: #fff; background: var(--color-accent); box-shadow: 0 20px 40px -18px rgba(23, 61, 51, 0.8); }
.wa-float svg { color: var(--mint-2); }
.footer { background: #102c25; color: #c7d6cf; border-top: 0; }
.footer h4 { color: var(--mint-2); }
.footer ul a, .footer-tagline, .footer-bottom { color: #c7d6cf; }
.footer ul a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.12); }
.footer .brand-nama { color: #fff; }
.footer .brand .kotak { background: var(--mint-2); }
.footer .brand .kotak path { fill: var(--color-accent); }
.footer .brand .kotak g { fill: #fff; }

/* Halaman dalam (Tentang, Layanan, Portofolio, Kontak) memakai kepala yang
   sama dengan beranda: putih buram, logo kotak hijau. */
.nav { background: rgba(255, 255, 255, 0.9); border-bottom-color: var(--color-divider); padding-block: 18px; }
.brand { gap: 10px; }
.brand .kotak { width: 36px; height: 36px; border-radius: 9px; background: var(--color-accent); display: grid; place-items: center; flex: 0 0 auto; }
.brand .kotak svg { width: 20px; height: 22px; }
.brand-nama { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); }
.nav-links a { color: #33413c; font-size: 15px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-accent-2); }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-links .btn-primary, .nav-links .btn-primary:hover { color: #fff; }
.nav-toggle { border-color: var(--color-divider); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--color-accent); }
@media (max-width: 900px) {
  .nav-links { background: #fff; border-bottom: 1px solid var(--color-divider); box-shadow: 0 20px 30px -24px rgba(23, 61, 51, 0.5); }
  .nav-links a.btn { display: inline-flex; padding: 13px 22px; }
}

/* Kartu yang dibuka dari beranda (portofolio.html#nama) */
.card-media[id] { scroll-margin-top: 110px; }
.card-media:target { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--mint-2), var(--shadow-md); }

/* Formulir */
.input { background: #fff; }
.input:hover { border-color: var(--mint-2); }
select.input { color-scheme: light; }
.field-error { color: #b42318; }
.input[aria-invalid="true"] { border-color: #b42318; }

/* Sisa warna biru di style.css */
.page { background: #fff; }
.muted { color: #5f6b67; }
.brand, .card-media, .kartu-contoh { color: inherit; }