/* ==========================================================================
   Easy Service Surabaya — shared stylesheet untuk landing page layanan
   --------------------------------------------------------------------------
   Dipakai oleh: water-heater.html, servis-kompor.html, pompa-air.html
   Satu file, di-cache browser, jadi pindah halaman tidak download CSS lagi.
   Token warna & font diambil dari desain situs yang sudah ada.

   CARA EDIT: semua warna/ukuran ada di blok :root di bawah. Ubah di situ,
   berlaku ke semua halaman. Jangan tulis warna hardcode di file HTML.
   ========================================================================== */

:root {
  /* Warna — diambil dari situs existing */
  --ink:        #38373C;  /* teks utama    */
  --ink-soft:   #63626A;  /* teks sekunder */
  --ink-faint:  #8A8990;
  --brand:      #09AEB8;  /* teal aksen    */
  --brand-dark: #078089;
  --accent:     #FFD763;  /* kuning tombol */
  --wa:         #25D366;  /* hijau WhatsApp*/
  --wa-dark:    #1EA855;
  --line:       #E6E6E9;
  --bg:         #FFFFFF;
  --bg-soft:    #F7F8F9;
  --bg-dark:    #201F24;

  /* Layout */
  --wrap: 1140px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 4px 18px rgba(0, 0, 0, .06);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .10);

  /* Tinggi sticky CTA mobile — dipakai untuk padding-bottom body */
  --cta-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  /* Ruang untuk sticky CTA bar di mobile supaya tidak menutup konten akhir */
  padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 861px) {
  body { padding-bottom: 0; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-dark); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.85rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }

p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding: clamp(44px, 7vw, 76px) 0; }
.section--soft { background: var(--bg-soft); }
.section__lead {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.section__head { margin-bottom: clamp(26px, 4vw, 40px); }

/* Aksesibilitas: skip link + screen-reader only ----------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.topbar {
  background: var(--ink);
  color: #fff;
  font-size: .87rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  align-items: center; justify-content: center;
  padding: 8px 20px;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }
.topbar__sep { color: rgba(255, 255, 255, .35); }
@media (max-width: 560px) {
  .topbar__sep { display: none; }
  /* Nomor telepon di topbar adalah jalur konversi, tapi tinggi area kliknya
     hanya setinggi hurufnya (~21px) -- terlalu kecil untuk jempol. Padding
     tegak memperbesar area sentuh tanpa mengubah ukuran teks. */
  .topbar a { display: inline-block; padding: 6px 0; }
}

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 68px;
}
.site-header__logo img { width: 172px; height: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px; border-radius: 999px;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); color: var(--brand-dark); }
.nav a[aria-current="page"] { background: var(--brand); color: #fff; }

/* Nav mobile: geser horizontal, tidak butuh JS hamburger.
   Alasan: satu titik gagal lebih sedikit, dan penerus tidak perlu paham JS. */
@media (max-width: 860px) {
  .site-header__inner { min-height: 60px; gap: 10px; }
  .site-header__logo img { width: 138px; }
  .nav {
    overflow-x: auto; gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -4px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 11px; font-size: .88rem; }
  /* Ditulis `.nav a.nav__desktop-only`, bukan `.nav__desktop-only` saja.
     Sebabnya: tombol WhatsApp di nav juga memakai kelas .btn, dan aturan .btn
     (yang menyetel display:inline-flex) ditulis SETELAH blok ini. Karena bobot
     selektornya sama, yang menang adalah yang ditulis terakhir -- sehingga
     tombol itu tetap tampil di ponsel, tersembunyi di luar layar, dan membuat
     baris nav lebih panjang tanpa guna. Satu tingkat tambahan mengunci ini
     tanpa bergantung pada urutan penulisan. */
  .nav a.nav__desktop-only { display: none; }
}

/* ==========================================================================
   TOMBOL
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }

.btn--wa    { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); }
.btn--call  { background: var(--accent); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn--block { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: .92rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  background: linear-gradient(168deg, #FFFFFF 0%, #F2FBFC 58%, #E7F6F8 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__grid {
  display: grid; gap: clamp(28px, 4vw, 52px);
  align-items: center;
  /* WAJIB `padding-block`, JANGAN `padding: ... 0`.
     Elemen ini memakai dua kelas sekaligus: class="wrap hero__grid".
     `.wrap` menyetel padding-inline: 20px, tapi shorthand `padding` akan
     MENIMPA sisi kanan-kiri jadi 0 -- dan karena bobot selektornya sama,
     yang menang adalah yang ditulis terakhir, yaitu blok ini.
     Akibatnya seluruh isi hero menempel ke tepi layar di ponsel.
     Pernah tayang di 6 halaman. */
  padding-block: clamp(34px, 5.5vw, 66px);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-dark); margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.hero__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wa); flex: none;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .22);
}

.hero h1 { margin-bottom: 14px; }
.hero h1 em {
  font-style: normal;
  color: var(--brand-dark);
}
.hero__sub {
  font-size: clamp(1.02rem, 2.1vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 22px;
}

/* Deretan bukti singkat di bawah CTA hero */
.hero__proof {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.hero__proof li { display: flex; align-items: center; gap: 8px; }
.hero__proof svg { width: 17px; height: 17px; fill: var(--wa); flex: none; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3; object-fit: cover;
}
/* Kartu garansi mengapung di atas foto */
.hero__badge {
  position: absolute; bottom: -14px; left: -10px;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 13px 18px;
  display: flex; align-items: center; gap: 12px;
  max-width: 250px;
}
.hero__badge strong { display: block; font-size: 1.5rem; line-height: 1; color: var(--brand-dark); }
.hero__badge span { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 899px) {
  .hero__badge { left: 12px; bottom: 12px; padding: 10px 14px; }
  .hero__badge strong { font-size: 1.25rem; }
}

/* ==========================================================================
   KARTU KELUHAN — bahasa pelanggan, bukan istilah teknisi
   ========================================================================== */

/* Pola `minmax(min(268px, 100%), 1fr)` dipakai di SEMUA grid di file ini.
   Kalau ditulis `minmax(268px, 1fr)` saja, kolom tetap memaksa lebar 268px
   walau wadahnya lebih sempit -- di layar 320px halaman jadi bisa digeser ke
   kanan. `min(..., 100%)` membuat batas bawahnya ikut menyusut. Kalau menambah
   grid baru, tiru pola ini. */
.symptoms {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
.symptoms li {
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.symptoms b { display: block; font-size: 1.04rem; margin-bottom: 5px; }
.symptoms span { font-size: .93rem; color: var(--ink-soft); }

/* ==========================================================================
   KARTU LAYANAN / ALASAN
   ========================================================================== */

.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px;
  box-shadow: var(--shadow);
  /* Kolom + margin-top:auto pada .btn-row di bawah membuat tombol pada
     sederet kartu sejajar walau panjang daftarnya berbeda. Kartu tanpa
     tombol tidak terpengaruh. */
  display: flex; flex-direction: column;
}
.card > .btn-row { margin-top: auto; }
.card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: #E7F6F8; color: var(--brand-dark);
  display: grid; place-items: center; margin-bottom: 14px;
}
.card__icon svg { width: 24px; height: 24px; fill: currentColor; }
.card h3 { font-size: 1.08rem; margin-bottom: 7px; }
.card p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* Tambahan kartu untuk beranda ---------------------------------------------
   .card__media  : foto layanan di atas kartu
   .card__list   : daftar pekerjaan yang ditangani (menggantikan paragraf
                   panjang berisi tanda "-" yang dipakai versi Elementor)
   .card__tag    : label kategori pada kartu artikel
   .card--link   : seluruh kartu bisa diklik (kartu artikel) */

.card__media {
  margin: -24px -22px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__list { list-style: none; margin: 0 0 18px; padding: 0; font-size: .94rem; }
.card__list li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 7px;
  color: var(--ink-soft);
}
.card__list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700;
}

.card__tag {
  display: inline-block; margin-bottom: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark);
}
.card--link { display: flex; flex-direction: column; }
.card--link h3 { margin-bottom: 8px; }
.card--link p { flex: 1; }
.card__more { margin-top: 14px; font-weight: 700; font-size: .92rem; color: var(--brand-dark); text-decoration: none; }
.card__more:hover { text-decoration: underline; }

/* ==========================================================================
   ANGKA PENGALAMAN
   ========================================================================== */

.stat {
  display: flex; align-items: baseline; gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.stat__num { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 700; line-height: 1; color: var(--brand); }
.stat__label { font-size: 1rem; color: var(--ink-soft); font-weight: 600; }

/* ==========================================================================
   KEBIJAKAN BIAYA
   --------------------------------------------------------------------------
   Dipakai di section #biaya. Menyampaikan kebijakan harga TANPA menyebut
   angka, jadi tidak ada yang perlu diisi dan tidak ada placeholder yang bisa
   lolos ke produksi. Kalau daftar harga resmi sudah tersedia, tabel .price di
   bawah bisa dipakai kembali di samping atau menggantikan blok ini.
   ========================================================================== */

.policy {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.policy li {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 18px 20px 18px 54px;
  box-shadow: var(--shadow);
}
.policy li::before {
  content: "\2713";
  position: absolute; left: 18px; top: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--wa); color: #fff;
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.policy b { display: block; font-size: 1.04rem; margin-bottom: 5px; }
.policy span { font-size: .93rem; color: var(--ink-soft); }

/* ==========================================================================
   TABEL BIAYA
   --------------------------------------------------------------------------
   Belum dipakai di halaman mana pun — menunggu daftar harga resmi dari klien.
   Style-nya sengaja dipertahankan supaya tabel bisa langsung dipasang kembali
   tanpa menulis CSS baru. Contoh markup-nya ada di docs/02-ARSITEKTUR-HALAMAN.md.
   ========================================================================== */

.price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.price {
  width: 100%; border-collapse: collapse;
  background: #fff; min-width: 540px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.price caption {
  caption-side: bottom; text-align: left;
  padding: 14px 4px 0; font-size: .87rem; color: var(--ink-faint);
}
.price th, .price td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.price thead th {
  background: var(--ink); color: #fff;
  font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}
.price tbody tr:last-child td { border-bottom: 0; }
.price tbody tr:nth-child(even) { background: var(--bg-soft); }
.price td:first-child { font-weight: 600; }
.price .price__num { white-space: nowrap; font-weight: 700; color: var(--brand-dark); }
.price .price__dur { white-space: nowrap; color: var(--ink-soft); font-size: .9rem; }

/* Penanda data yang masih menunggu konfirmasi klien.
   Sengaja dibuat mencolok supaya tidak pernah lolos ke produksi tanpa disadari. */
.todo {
  background: #FFF4C9;
  border-bottom: 2px dotted #C79A1B;
  color: #6B4E00;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.notice {
  display: flex; gap: 12px;
  background: #FFF9E3; border: 1px solid #F0DCA0;
  border-radius: var(--radius); padding: 16px 18px;
  font-size: .93rem; color: #6B4E00;
  margin-top: 20px;
}
.notice svg { width: 20px; height: 20px; fill: #C79A1B; flex: none; margin-top: 2px; }
.notice p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FAQ — <details> native, tanpa JS
   ========================================================================== */

.faq { max-width: 820px; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--brand); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 17px 52px 17px 20px; position: relative;
  font-weight: 700; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--brand-dark);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--bg-soft); }
.faq__body { padding: 0 20px 18px; color: var(--ink-soft); font-size: .96rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   TESTIMONI
   ========================================================================== */

.quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.quote {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px;
  box-shadow: var(--shadow);
}
.quote blockquote { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; }
.quote figcaption { font-size: .88rem; color: var(--ink-faint); font-weight: 600; }

/* ==========================================================================
   LOGO MEREK
   ========================================================================== */

.brands {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  align-items: center; justify-content: center;
}
.brands img {
  height: 34px; width: auto;
  opacity: .62; filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.brands img:hover { opacity: 1; filter: none; }

/* ==========================================================================
   BLOK CTA PENUTUP
   ========================================================================== */

.cta-band {
  background: var(--bg-dark);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .76); max-width: 44em; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 24px; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cta-band .btn--ghost:hover { border-color: #fff; color: #fff; }

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

.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, .72);
  font-size: .93rem; padding: clamp(38px, 5vw, 56px) 0 26px;
}
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }

/* Di ponsel tautan footer hanya setinggi hurufnya (~15px) dan berjarak 7px --
   mudah salah tekan, dan dua di antaranya adalah telepon & email. Padding
   tegak dipindahkan dari jarak antar-baris ke dalam area klik: tinggi footer
   praktis tidak berubah, tapi area sentuh jadi dua kali lebih besar. */
@media (max-width: 860px) {
  .site-footer li { margin-bottom: 1px; }
  .site-footer li a { display: inline-block; padding: 7px 0; }
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 32px; padding-top: 18px;
  font-size: .86rem; color: rgba(255, 255, 255, .5);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* ==========================================================================
   STICKY CTA MOBILE — selalu terlihat, ini jalur konversi utama
   ========================================================================== */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .09);
}
.sticky-cta .btn { padding: 13px 10px; font-size: .97rem; }

@media (min-width: 861px) {
  .sticky-cta { display: none; }
}

/* ==========================================================================
   FORMULIR PENAWARAN B2B (Netlify Forms)
   --------------------------------------------------------------------------
   Dipakai di beranda, bagian #penawaran. Style-nya tadinya ditulis di dalam
   <style> pada index.html; dipindah ke sini saat beranda ditulis ulang.

   JANGAN ubah atribut form di HTML (name, data-netlify, form-name, honeypot) —
   Netlify Forms mengenali formulir dari atribut itu, bukan dari CSS.
   ========================================================================== */

.netlify-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.netlify-form__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.netlify-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-weight: 600; font-size: .95rem; color: var(--ink);
}
.netlify-form input,
.netlify-form textarea {
  border: 1px solid #DFE3E6; border-radius: 10px;
  padding: 12px 14px;
  font-size: .95rem; font-family: inherit;
}
.netlify-form textarea { resize: vertical; }
.netlify-form input:focus,
.netlify-form textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(9, 174, 184, .15);
}

/* Honeypot: kolom jebakan untuk robot spam. WAJIB tetap display:none. */
.netlify-form__honeypot { display: none; }

.netlify-form__full { grid-column: 1 / -1; }
.netlify-form__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; justify-content: flex-start;
}
.netlify-form__wa { color: #0B7C4A; font-weight: 700; font-size: .92rem; text-decoration: underline; }

.netlify-form button {
  border: none; border-radius: 999px;
  background: var(--accent); color: var(--ink);
  font: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 14px 32px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.netlify-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

@media (max-width: 640px) {
  .netlify-form { padding: 16px; }
  /* Label tombol panjang ("KIRIM PERMINTAAN PENAWARAN" + huruf kapital +
     letter-spacing) lebarnya 296px. Di layar 320px itu melebihi ruang yang
     tersedia sehingga halaman bisa digeser ke kanan. Dibuat selebar kolom:
     tidak melebar keluar, sekaligus area tekannya lebih besar. */
  .netlify-form button { width: 100%; padding: 14px 18px; letter-spacing: .5px; }
  .netlify-form__actions { justify-content: center; }
}

/* ==========================================================================
   MODAL PILIHAN KONTAK
   --------------------------------------------------------------------------
   Dipicu oleh tautan ber-atribut data-contact-modal="true" (lihat site.js).
   Gunanya: di ponsel, tombol "Hubungi Teknisi" tidak langsung menelepon,
   tapi menawarkan WhatsApp atau telepon dulu.

   CSS ini sebelumnya ditulis ulang di dalam <style> pada 6 halaman berbeda.
   Sekarang satu tempat saja — ubah di sini, berlaku ke semua halaman.
   ========================================================================== */

.contact-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .56);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.contact-modal[hidden] { display: none; }
.contact-modal.is-visible { display: flex; }

.contact-modal__card {
  position: relative;
  background: #fff; border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 25px 55px rgba(0, 0, 0, .35);
  max-width: 420px; width: 100%;
  text-align: center; font-family: inherit;
}
.contact-modal__card h3 { margin: 0 0 8px; font-size: 1.4rem; }
.contact-modal__card p { margin: 0 0 18px; color: var(--ink-soft); font-size: .95rem; }

.contact-modal__actions { display: flex; flex-direction: column; gap: 12px; }
.contact-modal__action {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  font-weight: 600; font-size: 1rem;
  text-decoration: none; color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-modal__action--whatsapp { background: var(--wa); box-shadow: 0 8px 20px rgba(37, 211, 102, .35); }
.contact-modal__action--phone { background: #0F62FE; box-shadow: 0 8px 20px rgba(15, 98, 254, .35); }
.contact-modal__action:hover,
.contact-modal__action:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.contact-modal__icon svg { width: 22px; height: 22px; display: block; fill: #fff; }

.contact-modal__close {
  position: absolute; top: 12px; right: 14px;
  border: none; background: transparent;
  font-size: 1.8rem; line-height: 1;
  color: var(--ink-faint); cursor: pointer;
}

body.contact-modal-open { overflow: hidden; }

@media (min-width: 768px) {
  .contact-modal__actions { flex-direction: row; }
  .contact-modal__action { flex: 1; }
}

/* ==========================================================================
   UTILITAS
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sticky-cta, .site-header, .topbar, .cta-band { display: none !important; }
  body { padding-bottom: 0; }
}