/* =========================================================
   Indocare Service — Company Profile
   assets/css/style.css  (semua tampilan diatur di sini)
   Tema: Biru Langit + Aksen Kuning
   ========================================================= */

/* ---------- Variabel warna (ganti di sini untuk ubah tema) ---------- */
:root {
  --biru:       #16a6e4;
  --biru-tua:   #0b84c4;
  --biru-gelap: #0a3d62;
  --biru-muda:  #e8f6fd;
  --kuning:     #ffc400;
  --kuning-tua: #f0b400;
  --teks:       #1b2430;
  --teks-lembut:#5b6675;
  --putih:      #ffffff;
  --abu:        #f5f8fb;
  --garis:      #e3e8ef;
  --kartu:      #ffffff;                  /* latar kartu, menu, kolom isian */
  --nav:        rgba(255, 255, 255, .95); /* latar navbar (agak tembus) */
  --radius:     14px;
  --bayang:     0 12px 34px rgba(16, 60, 100, .12);
  --maks:       1150px;
}

/* ---------- TEMA GELAP ----------
   Dipasang oleh assets/js/tema.js lewat <html data-tema="gelap"> (pilihan tersimpan di localStorage;
   pertama kali mengikuti pengaturan perangkat). Cukup menimpa variabel di atas — JANGAN hardcode warna
   terang di aturan lain, pakai var(--kartu)/var(--putih)/var(--teks). Biru merek, kuning, hero, CTA, dan
   footer sudah gelap sehingga tidak berubah. */
html[data-tema="gelap"] {
  color-scheme: dark;
  --teks:        #e7edf4;
  --teks-lembut: #a6b3c3;
  --putih:       #0e1621;
  --abu:         #121c29;
  --garis:       #25344a;
  --biru-muda:   #15283b;
  --kartu:       #172233;
  --nav:         rgba(14, 22, 33, .92);
  --bayang:      0 12px 34px rgba(0, 0, 0, .5);
}
/* Berkas logo punya dua versi: teks hitam (tema terang) & teks putih (tema gelap) */
.logo .logo-gelap { display: none; }
html[data-tema="gelap"] .navbar .logo .logo-terang { display: none; }
html[data-tema="gelap"] .navbar .logo .logo-gelap { display: block; }
html[data-tema="gelap"] .peta { filter: invert(.92) hue-rotate(180deg) saturate(.85) brightness(.92); }
html[data-tema="gelap"] .card-foto > img,
html[data-tema="gelap"] .foto-frame img,
html[data-tema="gelap"] .slider-track .item img,
html[data-tema="gelap"] .produk .gambar img,
html[data-tema="gelap"] .prod-foto img,
html[data-tema="gelap"] .mini-prod img { filter: brightness(.9); }
html[data-tema="gelap"] .slider-nav { color: var(--teks); }
html[data-tema="gelap"] .slider-nav:hover { color: var(--biru-gelap); }
html[data-tema="gelap"] .chip-area span { color: var(--teks); }
html[data-tema="gelap"] .chip-area span.chip-kota { color: #fff; background: var(--biru-tua); }
html[data-tema="gelap"] .footer { background: #08111d; }
html[data-tema="gelap"] .copy { border-top-color: #1a2a3f; }
html[data-tema="gelap"] .form input::placeholder,
html[data-tema="gelap"] .form textarea::placeholder { color: #6f7f93; }
/* Transisi halus sesaat ketika tema diganti (kelas dipasang tema.js ±0,4 dtk) */
html.tema-ganti *, html.tema-ganti *::before, html.tema-ganti *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* ---------- Reset dasar ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--teks);
  line-height: 1.6;
  background: var(--putih);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.wrap { width: 92%; max-width: var(--maks); margin: 0 auto; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: .2s;
}
.btn-utama { background: var(--kuning); color: var(--biru-gelap); }
.btn-utama:hover { background: var(--kuning-tua); transform: translateY(-2px); }
.btn-biru { background: var(--biru); color: #fff; }
.btn-biru:hover { background: var(--biru-tua); transform: translateY(-2px); }
.btn-garis { border-color: #fff; color: #fff; }
.btn-garis:hover { background: #fff; color: var(--biru); }

/* ---------- Top bar ---------- */
.topbar { background: var(--biru-gelap); color: #dbe9f5; font-size: .85rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar-inner .kiri { opacity: .9; }
.topbar-inner .kanan { display: flex; gap: 18px; align-items: center; }
.topbar-inner a { color: #dbe9f5; transition: .2s; }
.topbar-inner a:hover { color: var(--kuning); }

/* Pengaturan tampilan (partials/pengaturan.php): bahasa ID | EN + tombol tema terang/gelap.
   Berupa "dock" melayang di kiri-bawah (.dock-set) sehingga SELALU terlihat di semua halaman & ukuran layar,
   tidak ikut hilang saat halaman digulir. Perilaku tema: assets/js/tema.js (semua [data-tema-ganti]). */
.pengaturan { display: flex; align-items: center; gap: 8px; }
.dock-set {
  position: fixed; left: 18px; bottom: 20px; z-index: 90; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--kartu) 88%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--garis); box-shadow: 0 10px 28px rgba(10, 61, 98, .18);
  animation: dock-masuk .6s cubic-bezier(.2, .7, .2, 1) .5s backwards; transition: box-shadow .25s, transform .25s;
}
.dock-set:hover { box-shadow: 0 14px 34px rgba(10, 61, 98, .26); transform: translateY(-2px); }
@keyframes dock-masuk { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
.tombol-tema {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 0;
  background: var(--biru-muda); color: var(--biru-tua); border: 0; cursor: pointer; transition: background .22s, color .22s, transform .35s;
}
.tombol-tema:hover { background: var(--kuning); color: var(--biru-gelap); transform: rotate(18deg); }
.tombol-tema svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.tombol-tema .ikon-matahari { display: none; }
html[data-tema="gelap"] .tombol-tema .ikon-matahari { display: block; }
html[data-tema="gelap"] .tombol-tema .ikon-bulan { display: none; }
/* Pilih bahasa ID | EN — dua tautan, yang aktif berwarna kuning */
.pilih-bahasa { display: flex; border-radius: 999px; background: var(--biru-muda); padding: 3px; }
.pilih-bahasa a {
  min-width: 38px; padding: 7px 11px; border-radius: 999px; text-align: center;
  font-size: .8rem; font-weight: 800; letter-spacing: .4px; color: var(--biru-tua); transition: .22s;
}
.pilih-bahasa a:hover { color: var(--biru-gelap); background: rgba(255, 255, 255, .5); }
.pilih-bahasa a.aktif, .pilih-bahasa a.aktif:hover { background: var(--kuning); color: var(--biru-gelap); }

/* Ikon garis SVG (helper ikon() di tampilan_helper.php) — warna mengikuti teks sekitarnya */
svg.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.btn svg.i { margin-right: 4px; }
.card .ikon, .info-item .ikon { background: linear-gradient(135deg, var(--biru-muda), color-mix(in srgb, var(--biru) 22%, var(--biru-muda))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biru) 18%, transparent); transition: background .3s, transform .3s; }
.card:hover .ikon { background: var(--kuning); transform: translateY(-2px); }
.card .ikon svg.i, .info-item .ikon svg.i { width: 56%; height: 56%; vertical-align: 0; color: var(--biru-tua); transition: transform .3s, color .3s; }
.card:hover .ikon svg.i, .info-item:hover .ikon svg.i { color: var(--biru-gelap); transform: scale(1.12) rotate(-6deg); }
.strip .ikon-besar svg.i, .ikon-besar svg.i { width: 1em; height: 1em; vertical-align: 0; stroke-width: 1.5; }
.strip .ikon-besar { color: var(--kuning); }
.peta-card .baris .ic svg.i { width: 20px; height: 20px; color: var(--biru); vertical-align: 0; }
.footer a svg.i, .footer-links a svg.i { margin-right: 6px; color: var(--kuning); }
.topbar .kiri svg.i, .topbar a svg.i { margin-right: 4px; color: var(--kuning); }
.wa-float svg.i { width: 30px; height: 30px; vertical-align: 0; stroke-width: 1.9; }
.feat .num svg.i { width: 18px; height: 18px; vertical-align: 0; stroke-width: 2.6; }
/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--garis);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
/* Logo berupa gambar (public/assets/img/logo*.webp): tinggi dikunci, lebar mengikuti rasio asli. */
.logo { display: flex; align-items: center; }
.logo img { display: block; height: 52px; width: auto; }
.menu { display: flex; gap: 28px; }
.menu a { font-weight: 600; color: var(--teks-lembut); transition: .2s; }
.menu a:hover, .menu a.active { color: var(--biru); }
.nav-cta { display: inline-block; }
.burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 10px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--teks); margin: 5px auto; transition: .25s; }

/* ---------- Menu dropdown (submenu Layanan) ---------- */
.menu > li { position: relative; }
.punya-sub > a .tanda { font-size: .65rem; margin-left: 3px; display: inline-block; transition: .25s; }
.submenu {
  position: absolute; top: 100%; left: -14px; min-width: 258px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px;
  box-shadow: var(--bayang); padding: 8px 0; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s;
  /* daftar layanan panjang (15+): bisa digulir kalau lebih tinggi dari layar */
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.punya-sub:hover .submenu,
.punya-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.punya-sub:hover > a .tanda { transform: rotate(180deg); }
.submenu li a {
  display: block; padding: 10px 20px; font-size: .92rem; font-weight: 500;
  color: var(--teks-lembut); white-space: nowrap;
}
.submenu li a:hover { background: var(--biru-muda); color: var(--biru); }
.submenu .pisah { height: 1px; background: var(--garis); margin: 6px 0; }

/* ---------- Halaman detail layanan ---------- */
.detail-lain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.detail-lain a {
  display: block; padding: 14px 16px; background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 12px; font-weight: 600; font-size: .92rem; transition: .22s;
}
.detail-lain a:hover { border-color: var(--biru); color: var(--biru); transform: translateY(-3px); box-shadow: var(--bayang); }
.detail-lain a.kini { background: var(--biru); color: #fff; border-color: var(--biru); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(120deg, #0a3d62 0%, #0b84c4 55%, #16a6e4 100%);
  color: #fff; padding: 90px 0; overflow: hidden;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.15; margin-bottom: 18px; }
.hero p { font-size: 1.1rem; opacity: .92; margin-bottom: 26px; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-mini { display: flex; gap: 22px; flex-wrap: wrap; font-size: .9rem; }
.hero-mini span { display: flex; gap: 8px; align-items: center; opacity: .95; }
.hero-mini span::before { content: "✓"; color: var(--kuning); font-weight: 800; }
.hero-photo {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 55px rgba(0,0,0,.32); border: 4px solid rgba(255,255,255,.18);
}
/* Foto bingkai hero = slider otomatis (script.js bagian 9): foto bertumpuk, yang .aktif tampil (cross-fade) */
.hero-photo { position: relative; aspect-ratio: 1000 / 760; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.hero-photo { isolation: isolate; }
.hero-photo img.lama { opacity: 1; z-index: 1; transition: none; }
.hero-photo img.aktif { opacity: 1; z-index: 2; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; justify-content: center; gap: 8px; }
.hero-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; transition: .3s; }
.hero-dots button.aktif { width: 26px; border-radius: 6px; background: var(--kuning); }

/* ---------- Bagian umum ---------- */
.section { padding: 84px 0; }
.section.abu { background: var(--abu); }
.head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.head .kicker { color: var(--biru); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; font-size: .8rem; }
.head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 8px 0 12px; }
.head p { color: var(--teks-lembut); }

/* ---------- Kartu layanan ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: block; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 32px; transition: .25s; color: inherit; }
.card:hover { transform: translateY(-6px); box-shadow: var(--bayang); border-color: transparent; }
.card .ikon { width: 60px; height: 60px; border-radius: 14px; background: var(--biru-muda); display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 18px; }
.card:hover .ikon { background: var(--kuning); }
.card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.card p { color: var(--teks-lembut); font-size: .95rem; }
.card .more { display: inline-block; margin-top: 14px; color: var(--biru); font-weight: 700; font-size: .9rem; }

/* Kartu dengan foto */
.card-foto { padding: 0; overflow: hidden; }
.card-foto > img { width: 100%; height: 190px; object-fit: cover; }
.card-foto .isi { padding: 26px; }
.card-foto .isi h3 { font-size: 1.18rem; margin-bottom: 8px; }
.card-foto .isi p { color: var(--teks-lembut); font-size: .95rem; }

/* ---------- About + checklist + foto ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; align-items: center; }
.foto-frame { border-radius: 18px; overflow: hidden; box-shadow: var(--bayang); }
.foto-frame img { width: 100%; height: 100%; object-fit: cover; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 20px; }
.checklist li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.checklist li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--biru); color: #fff; display: grid; place-items: center; font-size: .8rem; }

/* ---------- Proses (langkah) ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { text-align: center; }
.step .bulat { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; background: var(--biru-muda); color: var(--biru); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; transition: .25s; }
.step:hover .bulat { background: var(--kuning); color: var(--biru-gelap); }
.step h4 { margin-bottom: 6px; }
.step p { color: var(--teks-lembut); font-size: .92rem; }

/* ---------- Statistik ---------- */
.stats { background: linear-gradient(120deg, var(--biru-tua), var(--biru)); color: #fff; }
.stats .grid-4 { text-align: center; }
.stat .angka { font-size: 2.6rem; font-weight: 800; color: var(--kuning); }
.stat p { opacity: .92; margin-top: 4px; }

/* ---------- Galeri ---------- */
/* Slider otomatis (script.js bagian 9): jumlah foto per layar diatur variabel --per */
.slider-galeri { position: relative; }
.slider-viewport { overflow: hidden; border-radius: 14px; }
.slider-track { display: flex; gap: 16px; --per: 4; will-change: transform; }
.slider-track .item { flex: 0 0 calc((100% - 16px * (var(--per) - 1)) / var(--per)); border-radius: 14px; overflow: hidden; position: relative; }
.slider-track .item img { width: 100%; height: 250px; object-fit: cover; transition: .35s; }
.slider-track .item:hover img { transform: scale(1.07); }
.slider-nav {
  position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  background: var(--kartu); color: var(--biru-gelap); font-size: 1.9rem; line-height: 1; padding-bottom: 4px;
  box-shadow: 0 6px 18px rgba(10, 61, 98, .22); transition: .25s; cursor: pointer;
}
.slider-nav:hover { background: var(--kuning); transform: scale(1.08); }
.slider-prev { left: -18px; }
.slider-next { right: -18px; }


/* ---------- Kartu keunggulan (beranda "Alasan memilih") & kotak ulasan Google ---------- */
.card.kecil { padding: 26px; }
.card.kecil h3 { font-size: 1.05rem; }
.card.kecil p { font-size: .9rem; }
.kotak-ulasan {
  display: flex; align-items: center; gap: 22px; margin-top: 40px; padding: 24px 28px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius);
}
.kotak-ulasan .bintang { color: var(--kuning); font-size: 1.5rem; letter-spacing: 3px; flex: none; }
.kotak-ulasan h3 { font-size: 1.1rem; margin-bottom: 2px; }
.kotak-ulasan p { color: var(--teks-lembut); font-size: .92rem; }
.kotak-ulasan .btn { margin-left: auto; flex: none; }
/* ---------- FAQ (accordion) ---------- */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-cat { color: var(--biru); font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .5px; margin: 30px 0 12px; }
.faq-item { background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
/* .faq-q = <button> (bisa difokus & dibuka dengan keyboard); tampilan tetap seperti baris teks biasa */
.faq-q {
  width: 100%; margin: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: left;
  padding: 18px 22px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q:focus-visible { outline: 2px solid var(--biru); outline-offset: -3px; border-radius: 12px; }
.faq-q:focus:not(:focus-visible) { outline: none; }
/* Tanpa JS: semua jawaban terbuka (tanpa tanda +). Dengan JS (kelas js-faq dari script.js bagian 7): akordeon. */
.js-faq .faq-q::after { content: "+"; color: var(--biru); font-size: 1.5rem; font-weight: 700; flex: none; }
.js-faq .faq-item.open .faq-q::after { content: "\2212"; }
.faq-item.open .faq-q { color: var(--biru); }
.faq-a { overflow: hidden; transition: max-height .3s ease; padding: 0 22px 18px; color: var(--teks-lembut); }
.js-faq .faq-a { max-height: 0; padding: 0 22px; }
.js-faq .faq-item.open .faq-a { max-height: 2400px; padding: 0 22px 18px; }  /* tinggi pasti diisi script.js (scrollHeight) */

/* ---------- Keunggulan (angka) ---------- */
.feat { display: flex; gap: 16px; align-items: flex-start; }
.feat .num { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--biru); color: #fff; display: grid; place-items: center; font-weight: 800; }
.feat h4 { margin-bottom: 4px; }
.feat p { color: var(--teks-lembut); font-size: .95rem; }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(135deg, var(--biru-gelap), var(--biru-tua)); color: #fff; border-radius: 20px; padding: 58px; text-align: center; position: relative; overflow: hidden; }
/* lingkaran kuning di kotak CTA dihapus (permintaan pemilik) */
.cta h2 { position: relative; z-index: 2; font-size: 2rem; margin-bottom: 10px; }
.cta p { position: relative; z-index: 2; opacity: .9; margin-bottom: 26px; }
.cta .btn { position: relative; z-index: 2; }

/* ---------- Halaman kontak ---------- */
.kontak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.info-item .ikon { width: 48px; height: 48px; border-radius: 12px; background: var(--biru-muda); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.form label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .92rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--garis);
  border-radius: 10px; font: inherit; background: var(--kartu); color: var(--teks);
}
.form select { cursor: pointer; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--biru); border-color: transparent; }
.form button { margin-top: 18px; width: 100%; }
.form .wajib { color: #d64545; }
.form-nota {
  margin-top: 12px; font-size: .84rem; color: var(--teks-lembut);
  background: var(--biru-muda); padding: 11px 14px; border-radius: 10px; line-height: 1.5;
}

/* ---------- Halaman dalam: judul ---------- */
.page-head { position: relative; overflow: hidden; background: var(--biru-gelap); color: #fff; padding: 96px 0; text-align: center; }
.page-head > .wrap { position: relative; z-index: 2; }
.page-head h1 { text-shadow: 0 2px 14px rgba(0,0,0,.35); }
/* Foto latar blok atas (.page-head & .hero): foto + lapisan biru gradien agar tulisan putih tetap terbaca */
.head-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Lapisan di atas foto, SATU bahasa dengan hero beranda: gradasi biru diagonal — pekat di kiri, memudar bening ke kanan —
   ditambah lengkung gelap tipis di dasar agar judul menempel ke latar. Warna murni dari --biru-gelap/--biru-tua (bukan abu-abu).
   JANGAN pakai lapisan gelap di tengah (tampak keabu-abuan/kotor) atau biru rata (foto berkabut). Baris pertama = cadangan browser lama. */
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 61, 98, .6);
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--biru-gelap) 55%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--biru-gelap) 90%, transparent) 0%,
      color-mix(in srgb, var(--biru-gelap) 66%, transparent) 48%,
      color-mix(in srgb, var(--biru-tua) 34%, transparent) 100%);
}
/* Hero: teks di kiri, foto bingkai di kanan → gelap di kiri, memudar ke kanan */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 61, 98, .55);
  background:
    linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--biru-gelap) 60%, #000) 82%, transparent) 0%, color-mix(in srgb, var(--biru-gelap) 55%, transparent) 55%, color-mix(in srgb, var(--biru-gelap) 22%, transparent) 100%);
}
.page-head h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.page-head .crumb { opacity: .85; margin-top: 8px; font-size: .92rem; }
.page-head .crumb a { color: #fff; }

/* =========================================================
   TOKO / PRODUK
   ========================================================= */
.btn-kecil { padding: 9px 16px; font-size: .82rem; border-radius: 8px; }
.btn-outline { border: 2px solid var(--garis); color: var(--teks-lembut); background: var(--kartu); }
.btn-outline:hover { border-color: var(--biru); color: var(--biru); }

.toko-layout { display: grid; grid-template-columns: 1fr 272px; gap: 34px; align-items: start; }

/* Toolbar urutkan / tampilkan */
.toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--abu); border: 1px solid var(--garis);
  border-radius: 12px; margin-bottom: 26px;
}
.toolbar label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--teks-lembut); }
.toolbar select {
  font: inherit; font-size: .9rem; padding: 8px 12px; border: 1px solid var(--garis);
  border-radius: 8px; background: var(--kartu); color: var(--teks); cursor: pointer;
}
.toolbar select:focus { outline: 2px solid var(--biru); border-color: transparent; }
.toolbar .hitung { margin-left: auto; font-size: .9rem; color: var(--teks-lembut); }

/* Grid produk */
.produk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.produk {
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; transition: .25s;
}
.produk:hover { transform: translateY(-6px); box-shadow: var(--bayang); border-color: transparent; }
.produk .gambar { position: relative; display: block; background: var(--biru-muda); }
/* height:auto WAJIB: atribut height="620" pada <img> kalau tidak ditimpa menjadi tinggi 620px dan mengalahkan aspect-ratio (kotak jadi memanjang) */
.produk .gambar img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.produk .tag {
  position: absolute; top: 12px; left: 12px; background: var(--kuning); color: var(--biru-gelap);
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 5px 10px; border-radius: 999px;
}
.produk .isi { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.produk h3 { font-size: 1rem; line-height: 1.35; margin-bottom: 6px; }
.produk h3 a:hover { color: var(--biru); }
.produk .ukuran { font-size: .82rem; color: var(--teks-lembut); margin-bottom: 10px; }
.produk .harga { font-size: 1.15rem; font-weight: 800; color: var(--biru); margin-bottom: 14px; }
.produk .harga small { font-size: .74rem; font-weight: 500; color: var(--teks-lembut); display: block; }
.produk .aksi { display: flex; gap: 8px; margin-top: auto; }
.produk .aksi .btn { flex: 1; text-align: center; }

/* Sidebar toko */
.sidebar-box {
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px;
  padding: 22px; margin-bottom: 20px;
}
.sidebar-box h4 {
  font-size: .84rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--biru); margin-bottom: 14px;
}
.kat-list li a {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 0;
  font-size: .93rem; color: var(--teks-lembut); border-bottom: 1px solid var(--garis);
  transition: .2s; cursor: pointer;
}
.kat-list li:last-child a { border-bottom: 0; }
.kat-list li a:hover, .kat-list li a.aktif { color: var(--biru); font-weight: 700; }
.kat-list li a span { color: var(--teks-lembut); font-size: .82rem; }
.mini-prod { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--garis); }
.mini-prod:last-child { border-bottom: 0; }
.mini-prod img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }
.mini-prod h5 { font-size: .86rem; line-height: 1.3; }
.mini-prod small { color: var(--biru); font-weight: 700; }
.sidebar-cta { background: linear-gradient(135deg, var(--biru-gelap), var(--biru-tua)); color: #fff; text-align: center; }
.sidebar-cta h4 { color: var(--kuning); }
.sidebar-cta p { font-size: .9rem; opacity: .92; margin-bottom: 16px; }

/* Pesan kosong saat filter tidak ketemu */
.kosong { text-align: center; padding: 50px 20px; color: var(--teks-lembut); }

/* ---------- Halaman detail produk ---------- */
.prod-detail { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; }
.prod-foto { border-radius: 18px; overflow: hidden; border: 1px solid var(--garis); background: var(--biru-muda); }
.prod-foto img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.prod-info .kicker { color: var(--biru); font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .6px; }
.prod-info h1, .prod-info .prod-nama { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 14px; }
.prod-harga { font-size: 2rem; font-weight: 800; color: var(--biru); margin-bottom: 6px; }
.prod-harga small { display: block; font-size: .8rem; font-weight: 500; color: var(--teks-lembut); }
.prod-info > p { color: var(--teks-lembut); margin: 16px 0; }
.prod-aksi { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.spek { width: 100%; border-collapse: collapse; margin-top: 6px; }
.spek th, .spek td { text-align: left; padding: 11px 14px; font-size: .92rem; border-bottom: 1px solid var(--garis); }
.spek th { width: 40%; color: var(--teks-lembut); font-weight: 600; background: var(--abu); }
.catatan { background: var(--biru-muda); border-radius: 12px; padding: 16px 18px; font-size: .9rem; color: var(--teks-lembut); }

/* ---------- Strip konsultasi ---------- */
.strip { background: linear-gradient(120deg, var(--biru-tua), var(--biru)); color: #fff; }
.strip-inner { display: flex; align-items: center; gap: 24px; padding: 32px 0; }
.strip .ikon-besar { font-size: 2.6rem; flex: none; }
.strip h3 { font-size: 1.4rem; margin-bottom: 2px; }
.strip p { opacity: .9; font-size: .96rem; }
.strip .btn { margin-left: auto; flex: none; }

/* ---------- Peta (Google Maps) ---------- */
.peta-wrap { position: relative; line-height: 0; }
.peta { width: 100%; height: 470px; border: 0; display: block; }
.peta-card {
  position: absolute; top: 50%; right: 6%; transform: translateY(-50%);
  background: linear-gradient(135deg, var(--biru-gelap), var(--biru-tua));
  color: #fff; padding: 28px; border-radius: 16px; max-width: 370px;
  box-shadow: 0 18px 44px rgba(0,0,0,.3); line-height: 1.6;
}
.peta-card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.peta-card .baris { display: flex; gap: 10px; margin-bottom: 12px; font-size: .94rem; }
.peta-card .baris .ic { flex: none; }
.peta-card a { color: #fff; text-decoration: none; }
.peta-card a:hover { color: var(--kuning); }
.peta-card .jam { border-top: 1px solid rgba(255,255,255,.25); margin-top: 18px; padding-top: 14px; }
.peta-card .jam h4 { color: var(--kuning); font-size: .82rem; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; }
.peta-card .jam-baris { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; opacity: .95; }

/* ---------- Tombol WA melayang ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: .2s; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- Footer ---------- */
.footer { background: #0a2540; color: #c7d0dd; padding: 58px 0 25px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 34px; }
.footer h4 { color: #fff; margin-bottom: 16px; font-size: 1rem; }
.footer a { color: #c7d0dd; display: block; padding: 5px 0; transition: .2s; }
.footer a:hover { color: var(--kuning); }
.footer .logo { margin-bottom: 12px; }
.footer .logo img { height: 56px; }
.copy { text-align: center; border-top: 1px solid #16324f; margin-top: 34px; padding-top: 22px; font-size: .88rem; color: #8a97a8; }

/* ---------- Ikon sosial media ----------
   Diletakkan SETELAH blok .footer agar tidak tertimpa aturan `.footer a`
   (spesifisitas sama, jadi yang terakhir menang).                        */
.sosmed { display: flex; gap: 10px; margin-top: 18px; }
.footer .sosmed a, .sosmed a {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: .25s;
}
.sosmed a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer .sosmed a:hover, .sosmed a:hover {
  background: var(--kuning); color: var(--biru-gelap);
  border-color: var(--kuning); transform: translateY(-3px);
}

/* versi kecil untuk top bar */
.sosmed-mini { display: flex; gap: 8px; align-items: center; }
.topbar .sosmed-mini a, .sosmed-mini a {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0;
  color: #dbe9f5; background: rgba(255, 255, 255, .12); transition: .22s;
}
.sosmed-mini a svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.topbar .sosmed-mini a:hover, .sosmed-mini a:hover { background: var(--kuning); color: var(--biru-gelap); }

/* =========================================================
   LOADER / PRELOADER
   Tampil saat halaman dibuka & saat pindah halaman.
   Opsi C pilihan pemilik: logo + kilau yang menyapu bentuk logo, kerlip bintang, garis progres (semua mengikuti logo).
   Semua murni CSS — tanpa library tambahan. Markup: partials/loader.php.
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--biru-gelap) 0%, var(--biru-tua) 60%, var(--biru) 100%);
  transition: opacity .45s ease, visibility .45s ease;
  /* JARING PENGAMAN: kalau JavaScript gagal, loader tetap hilang sendiri */
  animation: loader-darurat 0s linear 8s forwards;
}
.loader.selesai { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loader-darurat { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.loader-isi { display: flex; flex-direction: column; align-items: center; text-align: center; width: 320px; max-width: 90vw; }

/* ---- logo: muncul → melayang pelan; kilau, kerlip & garis progres menyusul (siklus 2.4 dtk) ---- */
.lg-wrap {
  position: relative; width: min(290px, 74vw);
  animation: logo-masuk .55s cubic-bezier(.2, .8, .25, 1) both, logo-melayang 2.4s ease-in-out .55s infinite;
}
.lg-dasar { display: block; width: 100%; height: auto; }
@keyframes logo-masuk {
  from { opacity: 0; transform: translateY(14px) scale(.86); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes logo-melayang {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.035); }
}

/* cahaya hangat di belakang matahari logo */
.lg-cahaya {
  position: absolute; left: -2%; top: -14%; width: 36%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 0, .55) 0%, rgba(255, 196, 0, .16) 55%, transparent 72%);
  animation: cahaya-denyut 2.4s ease-in-out infinite;
}
@keyframes cahaya-denyut {
  0%, 100% { transform: scale(.8); opacity: .35; }
  45%      { transform: scale(1.25); opacity: 1; }
}

/* kilau putih yang menyapu HANYA di dalam bentuk logo (logo dipakai sebagai mask), dua lintasan */
.lg-kilau {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url("../img/logo-putih.webp") center / contain no-repeat; mask: url("../img/logo-putih.webp") center / contain no-repeat;
  animation: kilau-sapu 2.4s ease-in-out .35s infinite;
}
.lg-kilau-2 { opacity: .55; animation-delay: .62s; }
@keyframes kilau-sapu {
  0%       { background-position: 160% 0; }
  45%,100% { background-position: -60% 0; }
}

/* kerlip bintang kecil mengikuti arah kilau (kiri → kanan) */
.kerlip {
  position: absolute; width: 16px; height: 16px; pointer-events: none; opacity: 0;
  background: #fff8dc; filter: drop-shadow(0 0 5px rgba(255, 220, 120, .95));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: kerlip-muncul 2.4s ease-in-out infinite;
}
.k1 { left: 9%;  top: 2%;  animation-delay: .55s; }
.k2 { left: 25%; top: 40%; width: 11px; height: 11px; animation-delay: .72s; }
.k3 { left: 63%; top: 6%;  width: 20px; height: 20px; animation-delay: .92s; }
.k4 { left: 92%; top: 62%; width: 12px; height: 12px; animation-delay: 1.1s; }
@keyframes kerlip-muncul {
  0%       { opacity: 0; transform: scale(0) rotate(0deg); }
  10%      { opacity: 1; transform: scale(1.15) rotate(45deg); }
  22%,100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

/* garis progres tipis di bawah logo */
.lg-garis { width: min(200px, 56vw); height: 3px; margin-top: 26px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.lg-garis span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--kuning), #fff8dc);
  box-shadow: 0 0 10px rgba(255, 196, 0, .8);
  animation: garis-isi 2.4s ease-in-out infinite;
}
@keyframes garis-isi {
  0%       { width: 0; opacity: 1; }
  78%      { width: 100%; opacity: 1; }
  92%,100% { width: 100%; opacity: 0; }
}
/* =========================================================
   GERAK (MOTION) — meniru efek situs referensi: muncul saat digulir (fadeInUp/Left/Right),
   header menempel + tombol ke atas, gelembung sabun naik, kilau foto saat hover, riak tombol WA,
   counter angka, slider hero, ombak bergeser di kotak CTA.
   Kelas dipasang script.js (bagian 8). Semua dimatikan bila pengguna memilih "kurangi gerakan".
   ========================================================= */

/* 1) Muncul saat digulir — kelas .reveal dilepas lagi setelah selesai (supaya hover .card tetap normal).
      JANGAN pasang overflow-x pada <body>/<html>: nilainya dipropagasikan ke viewport dan MEMATIKAN scroll halaman.
      Geseran dari samping ditahan di tiap .section (clip tidak membuat scroll container). */
.js-gerak .section { overflow-x: clip; }
.js-gerak .reveal { opacity: 0; transform: translateY(44px); transition: opacity 1s ease, transform 1s cubic-bezier(.22, .61, .36, 1); }
.js-gerak .reveal-kiri  { transform: translateX(-56px); }
.js-gerak .reveal-kanan { transform: translateX(56px); }
/* HP: muncul dari bawah saja (harus SETELAH aturan translateX di atas — spesifisitas sama, yang terakhir menang) */
@media (max-width: 860px) {
  .js-gerak .reveal-kiri, .js-gerak .reveal-kanan { transform: translateY(44px); }
}
.js-gerak .reveal.d1 { transition-delay: .1s; }
.js-gerak .reveal.d2 { transition-delay: .2s; }
.js-gerak .reveal.d3 { transition-delay: .3s; }
.js-gerak .reveal.d4 { transition-delay: .4s; }
.js-gerak .reveal.d5 { transition-delay: .5s; }
.js-gerak .reveal.d6 { transition-delay: .6s; }
.js-gerak .reveal.tampil { opacity: 1; transform: none; }

/* 2) Masuk saat halaman dibuka (setelah loader) */
@keyframes masuk-atas  { from { opacity: 0; transform: translateY(34px); }  to { opacity: 1; transform: none; } }
@keyframes masuk-kiri  { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes masuk-kanan { from { opacity: 0; transform: translateX(64px); }  to { opacity: 1; transform: none; } }
.js-gerak .hero-grid > div:first-child { animation: masuk-kiri 1s .55s both ease; }
.js-gerak .hero-photo { animation: masuk-kanan 1s .7s both ease; }
.js-gerak .page-head h1 { animation: masuk-atas .9s .5s both ease; }
.js-gerak .page-head .crumb { animation: masuk-atas .9s .7s both ease; }

/* 3) Header menempel: mengecil + meluncur turun sekali saat digulir > 110px; tombol ke atas muncul */
.nav-inner, .logo img { transition: height .3s ease; }
.navbar.menempel { box-shadow: 0 8px 28px rgba(10, 61, 98, .14); animation: turun-header .45s ease; }
@keyframes turun-header { from { transform: translateY(-100%); } to { transform: none; } }
@media (min-width: 1151px) {
  .navbar.menempel .nav-inner { height: 62px; }
  .navbar.menempel .logo img { height: 44px; }
}
.ke-atas {
  position: fixed; right: 26px; bottom: 90px; z-index: 89; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; line-height: 1;
  background: var(--kuning); color: var(--biru-gelap); box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: .3s;
}
.ke-atas.buka { opacity: 1; visibility: visible; transform: none; }
.ke-atas:hover { background: var(--biru); color: #fff; }

/* 4) Gelembung sabun naik (hero, kotak CTA, bagian statistik) — <span> dibuat script.js di .gelembung-lapis */
.stats { position: relative; overflow: hidden; }
.stats > .wrap { position: relative; z-index: 2; }
.gelembung-lapis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; --naik: 640px; }
.cta .gelembung-lapis { --naik: 380px; }
.stats .gelembung-lapis { --naik: 300px; }
.gelembung-lapis span {
  position: absolute; top: 100%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .45);
  animation: gelembung-terbang 10s linear infinite;
}
.gelembung-lapis span:nth-child(1)  { left: 6%;  width: 16px; height: 16px; animation-duration: 9s;  animation-delay: -1s; }
.gelembung-lapis span:nth-child(2)  { left: 14%; width: 28px; height: 28px; animation-duration: 12s; animation-delay: -5s; }
.gelembung-lapis span:nth-child(3)  { left: 23%; width: 12px; height: 12px; animation-duration: 8s;  animation-delay: -3s; }
.gelembung-lapis span:nth-child(4)  { left: 31%; width: 34px; height: 34px; animation-duration: 14s; animation-delay: -8s; }
.gelembung-lapis span:nth-child(5)  { left: 40%; width: 20px; height: 20px; animation-duration: 10s; animation-delay: -2s; }
.gelembung-lapis span:nth-child(6)  { left: 48%; width: 14px; height: 14px; animation-duration: 11s; animation-delay: -6s; }
.gelembung-lapis span:nth-child(7)  { left: 57%; width: 30px; height: 30px; animation-duration: 13s; animation-delay: -4s; }
.gelembung-lapis span:nth-child(8)  { left: 64%; width: 18px; height: 18px; animation-duration: 9s;  animation-delay: -9s; }
.gelembung-lapis span:nth-child(9)  { left: 72%; width: 26px; height: 26px; animation-duration: 15s; animation-delay: -7s; }
.gelembung-lapis span:nth-child(10) { left: 80%; width: 12px; height: 12px; animation-duration: 8s;  animation-delay: -11s; }
.gelembung-lapis span:nth-child(11) { left: 88%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: -3s; }
.gelembung-lapis span:nth-child(12) { left: 95%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: -6s; }
@keyframes gelembung-terbang {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  12%  { opacity: .9; }
  50%  { transform: translate(18px, calc(var(--naik) * -.5)) scale(1); }
  85%  { opacity: .7; }
  100% { transform: translate(-14px, calc(var(--naik) * -1)) scale(1.15); opacity: 0; }
}
@media (max-width: 860px) {
  .gelembung-lapis { --naik: 900px; }
  .cta .gelembung-lapis { --naik: 420px; }
  .gelembung-lapis span:nth-child(n+8) { display: none; }
}

/* 5) Slider hero: foto latar bergantian (cross-fade) */
/* cross-fade tanpa "lubang": foto lama (.lama) tetap penuh di BAWAH sementara foto baru (.aktif) memudar masuk di atasnya */
.hero { isolation: isolate; }
.hero > .head-bg { opacity: 0; transition: opacity 1.4s ease; }
.hero > .head-bg.lama { opacity: 1; z-index: -1; transition: none; }
.hero > .head-bg.aktif { opacity: 1; z-index: 0; }

/* 6) Kilau (shine) menyapu foto saat di-hover */
.foto-frame, .slider-track .item, .hero-photo, .card-foto, .produk .gambar { position: relative; overflow: hidden; }
.foto-frame::before, .slider-track .item::before, .hero-photo::before, .card-foto::before, .produk .gambar::before {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-22deg);
}
.foto-frame:hover::before, .slider-track .item:hover::before, .hero-photo:hover::before, .card-foto:hover::before, .produk .gambar:hover::before { animation: kilau 1s ease; }
@keyframes kilau { from { left: -130%; } to { left: 160%; } }

/* 7) Riak (pulse) pada tombol WhatsApp melayang */
.wa-float { animation: riak-wa 2.8s infinite; }
@keyframes riak-wa {
  0%   { box-shadow: 0 8px 20px rgba(0, 0, 0, .2), 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 8px 20px rgba(0, 0, 0, .2), 0 0 0 22px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 8px 20px rgba(0, 0, 0, .2), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 8) Ombak halus bergeser di dasar kotak CTA */
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='.09' d='M0 45 Q150 0 300 45 T600 45 T900 45 T1200 45 V90 H0 Z'/%3E%3C/svg%3E") repeat-x left bottom / 1200px 90px;
  animation: geser-ombak 45s linear infinite;
}
@keyframes geser-ombak { to { background-position-x: -1200px; } }

/* hormati pengguna yang tidak nyaman dengan animasi */
@media (prefers-reduced-motion: reduce) {
  .lg-wrap, .lg-cahaya, .lg-kilau, .kerlip, .lg-garis span { animation: none; }
  .lg-kilau, .kerlip, .lg-cahaya { display: none; }
  .lg-garis span { width: 100%; }
  .gelembung-lapis { display: none; }
  .wa-float, .cta::before, .navbar.menempel, .dock-set { animation: none; }
  .foto-frame:hover::before, .slider-track .item:hover::before, .hero-photo:hover::before, .card-foto:hover::before, .produk .gambar:hover::before { animation: none; }
  .hero > .head-bg, .hero-photo img { transition: none; }
}

/* =========================================================
   UTILITAS
   Kelas kecil pengganti inline style, supaya HTML lebih bersih
   dan tampilan bisa diubah dari satu tempat saja.
   Diletakkan setelah blok .footer agar tidak tertimpa `.footer a`.
   ========================================================= */

/* warna & jarak teks */
.lembut     { color: var(--teks-lembut); }
.lembut-mb  { color: var(--teks-lembut); margin-bottom: 14px; }

/* judul dengan ukuran berbeda */
.h2-kecil          { font-size: 1.5rem; }
.h2-sedang         { font-size: 1.6rem; margin-bottom: 20px; }
.h2-sedang.rapat   { margin-bottom: 8px; }

/* blok .head yang rata kiri (bukan tengah) */
.head.kiri { text-align: left; margin: 0 0 12px; }

/* jarak */
.mt-besar  { margin-top: 22px; }
.mb-besar  { margin-bottom: 28px; }
.tengah    { text-align: center; }
.head.mt-besar { margin-top: 40px; }
.feat.jarak    { margin-bottom: 18px; }

/* penyesuaian grid */
.checklist.satu-kolom { grid-template-columns: 1fr; }

/* daftar wilayah layanan (beranda) */
.chip-area { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-area.tengah { justify-content: center; }
.chip-area span { background: var(--biru-muda); color: var(--biru-gelap); border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600; }
.chip-area span.chip-kota { background: var(--biru-gelap); color: #fff; }
.grid-2.atas { align-items: start; }

/* baris bercentang (dipakai di halaman detail layanan & produk) */
.baris-cek { display: flex; gap: 9px; margin-bottom: 9px; color: var(--teks-lembut); }

/* tautan sebaris — ditulis spesifik agar menang dari `.footer a` */
.footer .tautan-kuning, .tautan-kuning { display: inline; padding: 0; color: var(--kuning); }
.tautan-biru { color: var(--biru); font-weight: 700; }

/* =========================================================
   RESPONSIVE — tampilan di HP / tablet
   ========================================================= */
/* Desktop: link menu setinggi navbar agar submenu menempel rapat */
@media (min-width: 1151px) {
  .menu > li > a { display: block; padding: 24px 0; }
}
@media (max-width: 1050px) {
  .toko-layout { grid-template-columns: 1fr; }
  .produk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .grid-4, .detail-lain { grid-template-columns: repeat(2, 1fr); }
  .slider-track { --per: 3; }
  .produk-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-detail { grid-template-columns: 1fr; gap: 28px; }
}
/* Menu jadi hamburger sebelum navbar (logo + menu + tombol "Minta Penawaran")
   kehabisan tempat dan bertabrakan/meluber ke luar layar */
@media (max-width: 1150px) {
  .menu {
    position: fixed; inset: 72px 0 auto 0; background: var(--kartu); flex-direction: column; gap: 0;
    padding: 10px 0 calc(24px + env(safe-area-inset-bottom, 0px)); border-bottom: 1px solid var(--garis); box-shadow: var(--bayang);
    transform: translateY(-140%); transition: .3s, visibility 0s linear .3s; pointer-events: none;
    visibility: hidden;   /* menu tertutup tidak bisa difokus Tab / dibaca pembaca layar */
    /* submenu panjang: seluruh menu yang digulir. Tinggi pasti diisi script.js (sisa layar di bawah navbar); ini cadangannya */
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu.open { transform: translateY(0); pointer-events: auto; visibility: visible; transition: .3s; }
  /* selama menu terbuka, navbar (+ menu) berada DI ATAS dock ID|EN, tombol WhatsApp & ↑ → item terakhir tidak tertutup */
  html.menu-terbuka .navbar { z-index: 95; }
  .punya-sub .submenu, .punya-sub:hover .submenu, .punya-sub:focus-within .submenu { visibility: inherit; }
  .menu a { padding: 12px 24px; }
  .nav-cta { display: none; }
  .burger { display: block; }
  .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Submenu di HP: buka-tutup dengan tap */
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; min-width: 0; padding: 0;
    background: var(--abu); display: none; max-height: none; overflow: visible;
  }
  .punya-sub.buka .submenu { display: block; }
  .punya-sub.buka > a .tanda { transform: rotate(180deg); }
  .submenu li a { padding: 11px 40px; white-space: normal; }
}
@media (max-width: 860px) {
  .page-head { padding: 62px 0; }
  .topbar { display: none; }
  .hero-grid, .grid-3, .grid-2, .kontak-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .cta { padding: 40px 22px; }
  .checklist { grid-template-columns: 1fr; }
  /* Peta & strip di HP */
  .peta { height: 330px; }
  .peta-card { position: static; transform: none; max-width: none; border-radius: 0; }
  .strip-inner { flex-direction: column; text-align: center; }
  .kotak-ulasan { flex-direction: column; text-align: center; }
  .kotak-ulasan .btn { margin-left: 0; }
  .strip .btn { margin-left: 0; }
  .detail-lain { grid-template-columns: 1fr; }
  .slider-track { --per: 2; }
}
@media (max-width: 560px) {
  .dock-set { left: 12px; bottom: 14px; padding: 4px; }
  .dock-set .tombol-tema { width: 34px; height: 34px; }
  .dock-set .pilih-bahasa a { min-width: 34px; padding: 6px 9px; font-size: .74rem; }
  .produk-grid { grid-template-columns: 1fr; }
  .toolbar .hitung { margin-left: 0; width: 100%; }
  .produk .aksi { flex-direction: column; }
}
@media (max-width: 520px) {
  .grid-4 { grid-template-columns: 1fr; }
  .slider-track { --per: 1; }
  .slider-prev { left: 6px; }
  .slider-next { right: 6px; }
}


/* =========================================================
   TIPOGRAFI, FOOTER, TEMA GELAP — perapian (2026-10-21)
   ========================================================= */
/* Tipografi: satu keluarga huruf sistem (cepat, tanpa unduhan), hierarki judul konsisten, baris rapi. */
body {
  font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.65; font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.22; letter-spacing: -.012em; text-wrap: balance; }
h4 { font-weight: 700; letter-spacing: 0; }
p, li, dd { text-wrap: pretty; }
.kicker { letter-spacing: .12em; text-transform: uppercase; font-weight: 800; font-size: .78rem; }
.head h2 { line-height: 1.2; }
.head p { max-width: 62ch; margin-inline: auto; }
.head.kiri p { margin-inline: 0; }
.card h3, .produk h3 { line-height: 1.3; }
.card p, .step p, .feat p { line-height: 1.6; }
.stat .angka, .harga, .jam-baris, .hero-mini { font-variant-numeric: tabular-nums; }
.btn { letter-spacing: .01em; line-height: 1.25; }
.menu a { font-size: .96rem; }
.page-head h1, .hero h1 { letter-spacing: -.02em; }

/* Footer: baris kontak = ikon + teks sejajar (teks yang melipat tetap lurus di bawah teks, bukan di bawah ikon) */
.footer { padding-bottom: 96px; }
.footer p { line-height: 1.7; max-width: 46ch; }
.footer-kontak a { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; line-height: 1.5; }
.footer-kontak a svg.i { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.peta-card .baris { align-items: flex-start; gap: 12px; }
.peta-card .baris .ic { width: 20px; padding-top: 2px; }
.peta-card .baris > span:last-child { min-width: 0; }
.info-item { align-items: flex-start; }
.info-item h4 { line-height: 1.3; margin-bottom: 2px; }

/* Tema gelap: blok biru terang (statistik, strip, CTA, kartu peta) diganti biru tua redup agar tidak menyilaukan */
html[data-tema="gelap"] .stats,
html[data-tema="gelap"] .strip {
  background: linear-gradient(120deg, #0c2237 0%, #0f3452 100%);
  border-block: 1px solid var(--garis);
}
html[data-tema="gelap"] .cta {
  background: linear-gradient(135deg, #0c2237, #11405f);
  border: 1px solid var(--garis);
}
html[data-tema="gelap"] .hero { background: linear-gradient(120deg, #061c30 0%, #0a3d62 55%, #0b5a8a 100%); }
/* lingkaran kuning di kotak CTA dihapus (permintaan pemilik) */
html[data-tema="gelap"] .peta-card {
  background: linear-gradient(135deg, #0c2237, #0f3452); border: 1px solid var(--garis);
}
html[data-tema="gelap"] .stats .gelembung-lapis,
html[data-tema="gelap"] .cta .gelembung-lapis { opacity: .35; }
html[data-tema="gelap"] .stat .angka { color: var(--kuning); }
html[data-tema="gelap"] .kotak-ulasan { background: var(--kartu); border-color: var(--garis); }
html[data-tema="gelap"] .btn-biru { background: #0b6ea6; }
html[data-tema="gelap"] .btn-biru:hover { background: var(--biru-tua); }

/* HP: ruang di bawah halaman agar teks terakhir tidak tertutup dock bahasa/tema & tombol WhatsApp */
@media (max-width: 860px) {
  .footer { padding-bottom: 156px; }  /* di atas tombol ↑ (bottom 90px + 44px) & WhatsApp */
  .copy { line-height: 1.7; }
  .footer-grid { gap: 28px; }
}

/* =========================================================
   2026-10-21 — TOMBOL SLIDER BERSUDUT + SAPUAN WARNA PADA SEMUA TOMBOL
   ========================================================= */

/* ---- Tombol slider bersudut (galeri & panah foto hero): papan miring di tepi foto, panah di tengah.
        Hover = kuning menyapu masuk; klik = sapuan biru → kuning + panah membesar (kelas .klik dipasang script.js). ---- */
.slider-nav {
  position: absolute; top: 50%; z-index: 4; width: 58px; height: 118px; margin-top: -59px; padding: 0; border: 0; border-radius: 0;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--kartu); color: var(--biru-gelap); box-shadow: none; font-size: 0; line-height: 0;
  transition: color .25s, width .25s;
}
.slider-prev { left: 0; clip-path: polygon(0 0, 100% 0, 68% 100%, 0 100%); padding-right: 14px; }
.slider-next { right: 0; clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%); padding-left: 14px; }
.slider-nav svg.i { position: relative; z-index: 2; width: 26px; height: 26px; vertical-align: 0; stroke-width: 2.4; transition: transform .25s; }
.slider-nav::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--kuning);
  transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.slider-next::before { transform-origin: right center; }
.slider-nav:hover { transform: none; background: var(--kartu); }
.slider-nav:hover::before { transform: scaleX(1); }
.slider-prev:hover svg.i { transform: translateX(-4px); }
.slider-next:hover svg.i { transform: translateX(4px); }
.slider-nav.klik { animation: panah-warna .6s ease; }
.slider-nav.klik::before { animation: sapu-klik .6s ease forwards; }
.slider-nav.klik svg.i { animation: panah-klik .55s ease; }
@keyframes sapu-klik {
  0%   { transform: scaleX(0); background: var(--biru); }
  45%  { transform: scaleX(1); background: var(--biru); }
  100% { transform: scaleX(1); background: var(--kuning); }
}
@keyframes panah-warna { 0%, 40% { color: #fff; } 100% { color: var(--biru-gelap); } }
@keyframes panah-klik { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
.hero-photo .slider-nav { width: 46px; height: 92px; margin-top: -46px; }
.hero-photo .slider-prev { padding-right: 11px; }
.hero-photo .slider-next { padding-left: 11px; }
.hero-photo .slider-nav svg.i { width: 22px; height: 22px; }
.hero-dots button.klik { animation: titik-klik .6s ease; }
@keyframes titik-klik {
  0%   { box-shadow: 0 0 0 0 rgba(255, 196, 0, .9), 0 1px 4px rgba(0, 0, 0, .35); background: var(--kuning); transform: scale(1.5); }
  100% { box-shadow: 0 0 0 14px rgba(255, 196, 0, 0), 0 1px 4px rgba(0, 0, 0, .35); transform: scale(1); }
}
html[data-tema="gelap"] .slider-nav { color: var(--teks); background: var(--kartu); }
html[data-tema="gelap"] .slider-nav:hover { color: var(--biru-gelap); }
@media (max-width: 520px) {
  .slider-nav { width: 44px; height: 92px; margin-top: -46px; }
  .slider-prev { left: 0; } .slider-next { right: 0; }
}

/* ---- SEMUA tombol (.btn): warna menyapu dari kiri saat disorot; saat diklik menyapu lagi dari kanan ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s, border-color .3s, background-color .3s, transform .2s, box-shadow .3s; }
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--sapu, var(--biru-gelap));
  transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(0) scale(.97); }
.btn.klik::before { animation: sapu-btn .5s ease forwards; }
@keyframes sapu-btn { from { transform: scaleX(0); transform-origin: right center; } to { transform: scaleX(1); transform-origin: right center; } }
.btn-utama { --sapu: var(--biru-gelap); }
.btn-utama:hover { background: var(--kuning); color: #fff; box-shadow: 0 10px 24px rgba(10, 61, 98, .28); }
.btn-biru { --sapu: var(--kuning); }
.btn-biru:hover { background: var(--biru); color: var(--biru-gelap); box-shadow: 0 10px 24px rgba(255, 196, 0, .35); }
.btn-garis { --sapu: #fff; }
.btn-garis:hover { background: transparent; color: var(--biru-gelap); }
.btn-outline { --sapu: var(--biru); }
.btn-outline:hover { border-color: var(--biru); color: #fff; }
html[data-tema="gelap"] .btn-biru:hover { background: #0b6ea6; color: var(--biru-gelap); }
html[data-tema="gelap"] .btn-utama:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .slider-nav.klik, .slider-nav.klik::before, .slider-nav.klik svg.i, .hero-dots button.klik, .btn.klik::before { animation: none; }
}

/* =========================================================
   2026-10-21 (3) — FRAME FOTO HERO BARU (bingkai kaca ganda + sudut kuning, serasi dengan foto banner),
   tanpa titik navigasi, tanpa cincin kuning di tombol saat disorot
   ========================================================= */
.hero-photo {
  border: 0; border-radius: 22px;
  box-shadow: 0 8px 22px rgba(4, 22, 40, .32);
}



/* tombol berwarna: warna garis tepi mengikuti warna sapuan, jadi tidak ada cincin/outline berbeda warna saat disorot */
.btn-utama { border-color: var(--kuning); }
.btn-utama:hover { border-color: var(--biru-gelap); }
.btn-biru { border-color: var(--biru); }
.btn-biru:hover { border-color: var(--kuning); }
html[data-tema="gelap"] .btn-biru { border-color: #0b6ea6; }
html[data-tema="gelap"] .btn-biru:hover { border-color: var(--kuning); }
.btn:focus-visible { outline: 2px solid var(--kuning); outline-offset: 3px; }
.btn:focus:not(:focus-visible) { outline: none; }

/* =========================================================
   TOMBOL TANPA GARIS TEPI (2026-10-21): garis tepi memotong sapuan warna sehingga tampak garis tipis saat transisi.
   Sekarang tombol tanpa border; tombol bergaris memakai cincin "inset box-shadow" yang tertutup penuh oleh sapuan warna.
   ========================================================= */
.btn { border: 0; padding: 15px 30px; }
.btn-kecil { padding: 11px 18px; }
.btn::before { inset: 0; }
.btn-garis { box-shadow: inset 0 0 0 2px #fff; }
.btn-garis:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn-outline { box-shadow: inset 0 0 0 2px var(--garis); }
.btn-outline:hover { box-shadow: inset 0 0 0 2px var(--biru); }
.btn-utama:hover, .btn-biru:hover { box-shadow: 0 10px 24px rgba(10, 61, 98, .22); }

/* =========================================================
   WARNA BOCOR (2026-10-21): tepi bulat sapuan warna kena anti-alias sehingga warna latar tombol mengintip di pinggir.
   Solusi: saat disorot, warna latar tombol ikut berganti ke warna sapuan SETELAH sapuan selesai (jeda 0,4 dtk),
   jadi keadaan akhir selalu satu warna penuh dan tidak ada tepi berbeda warna.
   ========================================================= */
.btn { transition: color .3s, background-color 0s, transform .2s, box-shadow .3s; }
.btn:hover, .btn:focus-visible { transition: color .3s, background-color 0s linear .4s, transform .2s, box-shadow .3s; }
.btn:hover { background-color: var(--sapu, var(--biru-gelap)); }
html[data-tema="gelap"] .btn:hover { background-color: var(--sapu, var(--biru-gelap)); }

/* =========================================================
   TRANSISI TOMBOL LEBIH MULUS (2026-10-21): sapuan bertepi MIRING yang meluncur dengan kurva halus (ease-in-out),
   warna teks berganti tepat saat sapuan melewatinya, warna latar baru berganti setelah sapuan selesai.
   ========================================================= */
.btn::before {
  inset: 0 auto 0 0; width: calc(100% + 26px); transform: translateX(-100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn { transition: color .3s ease .12s, background-color 0s, transform .25s ease, box-shadow .35s ease; }
.btn:hover, .btn:focus-visible { transition: color .3s ease .12s, background-color 0s linear .55s, transform .25s ease, box-shadow .35s ease; }
.btn.klik::before { animation: sapu-btn .5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes sapu-btn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* =========================================================
   TRANSISI TOMBOL v3 (2026-10-21) — gradien yang meluncur (tanpa pseudo-element, tanpa overflow/clip):
   satu lapis latar milik tombol itu sendiri, jadi tepi bulat selalu mulus, tidak ada warna bocor / garis tipis.
   Tepi sapuan miring & lembut, kurva ease-in-out. Warna sapuan = --sapu (per jenis tombol).
   ========================================================= */
/* (aturan v3 yang menyembunyikan ::before tombol dihapus — itu penyebab sapuan tidak terlihat) */
.btn {
  background-image: linear-gradient(105deg, var(--sapu, var(--biru-gelap)) 0%, var(--sapu, var(--biru-gelap)) 40%, transparent 52%, transparent 100%) !important;
  background-size: 260% 100% !important; background-repeat: no-repeat !important; background-position: 100% 50% !important;
  transition: background-position .6s cubic-bezier(.65, 0, .35, 1), color .3s ease .14s, transform .25s ease, box-shadow .35s ease;
}
.btn:hover, .btn:focus-visible {
  background-position: 0% 50% !important;
  transition: background-position .6s cubic-bezier(.65, 0, .35, 1), color .3s ease .14s, transform .25s ease, box-shadow .35s ease;
}
.btn.klik { animation: btn-pop .45s ease; }
@keyframes btn-pop { 0% { filter: brightness(1.28); transform: scale(.96); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.klik { animation: none; } }

/* =========================================================
   TRANSISI TOMBOL v4 (2026-10-21) — meniru gerak tombol slider foto hero yang disukai pemilik:
   hover = warna menyapu cepat dengan tepi lurus (kurva "meluncur lalu melambat" .38 dtk), ikon bergeser/membesar;
   klik = sapuan warna kontras lewat di atas tombol lalu memudar (kelas .klik dari script.js/admin.js).
   Tetap satu lapis gradien milik tombol (tanpa warna bocor di tepi bulat).
   ========================================================= */
.btn {
  background-image: linear-gradient(90deg, var(--sapu, var(--biru-gelap)) 0%, var(--sapu, var(--biru-gelap)) 50%, transparent 50.4%, transparent 100%) !important;
  background-size: 200% 100% !important; background-repeat: no-repeat !important; background-position: 100% 50% !important;
  transition: background-position .38s cubic-bezier(.2, .7, .2, 1), color .25s ease .08s, transform .25s ease, box-shadow .35s ease;
  --klik: var(--kuning);
}
.btn:hover, .btn:focus-visible {
  background-position: 0% 50% !important;
  transition: background-position .38s cubic-bezier(.2, .7, .2, 1), color .25s ease .08s, transform .25s ease, box-shadow .35s ease;
}
.btn-utama { --klik: var(--biru); }
.btn-biru { --klik: var(--biru-gelap); }
.btn svg.i { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.btn:hover svg.i { transform: translateX(3px) scale(1.12); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--klik); opacity: 0;
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.btn.klik { animation: none; }
.btn.klik::after { animation: btn-klik-sapu .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.btn.klik svg.i { animation: btn-ikon-klik .5s ease; }
@keyframes btn-klik-sapu {
  0%   { opacity: 1; transform: scaleX(0); }
  55%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes btn-ikon-klik { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-10deg); } 100% { transform: scale(1.12) translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .btn.klik::after, .btn.klik svg.i { animation: none; } }

/* =========================================================
   TRANSISI TOMBOL v5 (2026-10-21) — PERSIS seperti tombol "Discover More" situs referensi (GeneralCleaning/theme-btn-one):
   ::before selebar 0% di kiri, saat hover melebar jadi 100% dengan `transition: all 500ms ease`; teks berganti warna bersamaan.
   Satu-satunya tambahan: warna latar tombol baru berganti ke warna sapuan SETELAH sapuan selesai (menghindari tepi bulat berwarna bocor).
   ========================================================= */
.btn {
  background-image: none !important; background-size: auto !important; background-position: 0 0 !important;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 500ms ease, transform 250ms ease, box-shadow 350ms ease, background-color 0s;
}
.btn::before {
  display: block !important; animation: none !important;
  content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; right: auto; bottom: auto; z-index: -1;
  background: var(--sapu, var(--biru-gelap)); transform: none; clip-path: none; will-change: auto;
  transition: all 500ms ease;
}
.btn:hover::before, .btn:focus-visible::before { width: 100%; transform: none; }
.btn:hover, .btn:focus-visible {
  background-position: 0 0 !important;
  background-color: var(--sapu, var(--biru-gelap)) !important;
  transition: color 500ms ease, transform 250ms ease, box-shadow 350ms ease, background-color 0s linear .5s;
}
.btn svg.i, .btn:hover svg.i, .btn.klik svg.i { transform: none; animation: none; transition: none; }

/* ---- Foto hero: TANPA frame transparan yang diam; hanya drop shadow tipis + riak putih yang meluas lalu memudar (seperti tombol WA) ---- */
.hero-photo { margin: 0; box-shadow: 0 8px 22px rgba(4, 22, 40, .32); }
.js-gerak .hero-photo { animation: masuk-kanan 1s .7s both ease, bingkai-riak 2.8s 1.8s infinite; }
@keyframes bingkai-riak {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5), 0 8px 22px rgba(4, 22, 40, .32); }
  70%  { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0), 0 8px 22px rgba(4, 22, 40, .32); }
  100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0), 0 8px 22px rgba(4, 22, 40, .32); }
}
@media (prefers-reduced-motion: reduce) { .js-gerak .hero-photo { animation: none; } }

/* =========================================================
   TOMBOL PANAH SLIDER BERSUDUT TAPI MEMBULAT (2026-10-21): semua konten situs bersudut-bulat, jadi papan panah ikut dibulatkan
   (clip-path path() menggantikan polygon bersudut tajam; ukuran: galeri 58x118, foto hero 46x92, HP 44x92)
   ========================================================= */
.slider-prev { clip-path: path('M 0 16 Q 0 0 16 0 L 42 0 Q 58 0 55.5 15.8 L 41.9 102.2 Q 39.4 118 23.4 118 L 16 118 Q 0 118 0 102 Z'); }
.slider-next { clip-path: path('M 16.1 15.8 Q 18.6 0 34.6 0 L 42 0 Q 58 0 58 16 L 58 102 Q 58 118 42 118 L 16 118 Q 0 118 2.5 102.2 Z'); }
.hero-photo .slider-prev { clip-path: path('M 0 16 Q 0 0 16 0 L 30 0 Q 46 0 43.5 15.8 L 33.8 76.2 Q 31.3 92 15.3 92 L 16 92 Q 0 92 0 76 Z'); }
.hero-photo .slider-next { clip-path: path('M 12.2 15.8 Q 14.7 0 30.7 0 L 30 0 Q 46 0 46 16 L 46 76 Q 46 92 30 92 L 16 92 Q 0 92 2.5 76.2 Z'); }
@media (max-width: 520px) {
  .slider-prev { clip-path: path('M 0 16 Q 0 0 16 0 L 28 0 Q 44 0 41.6 15.8 L 32.3 76.2 Q 29.9 92 13.9 92 L 16 92 Q 0 92 0 76 Z'); }
  .slider-next { clip-path: path('M 11.7 15.8 Q 14.1 0 30.1 0 L 28 0 Q 44 0 44 16 L 44 76 Q 44 92 28 92 L 16 92 Q 0 92 2.4 76.2 Z'); }
  .hero-photo .slider-prev { clip-path: path('M 0 16 Q 0 0 16 0 L 30 0 Q 46 0 43.5 15.8 L 33.8 76.2 Q 31.3 92 15.3 92 L 16 92 Q 0 92 0 76 Z'); }
  .hero-photo .slider-next { clip-path: path('M 12.2 15.8 Q 14.7 0 30.7 0 L 30 0 Q 46 0 46 16 L 46 76 Q 46 92 30 92 L 16 92 Q 0 92 2.5 76.2 Z'); }
}

/* =========================================================
   TRANSISI TOMBOL v6 (2026-10-21) — sapuan hard-edge ala "Discover More", TANPA pseudo-element & TANPA lapisan ganda:
   satu gradien dengan titik henti --x (didaftarkan lewat @property) yang bergeser 0% → 100% selama 500ms ease.
   Satu lapis = satu kali pemotongan tepi bulat → tidak ada sisa warna dasar (kuning) mengintip di lengkung tepi.
   ========================================================= */
@property --x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.btn::before { content: none !important; display: none !important; }
.btn {
  --x: 0%;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, var(--sapu, var(--biru-gelap)) var(--x), var(--dasar, transparent) var(--x)) !important;
  background-size: auto !important; background-position: 0 0 !important; background-repeat: no-repeat !important;
  transition: --x 500ms ease, color 500ms ease, transform 250ms ease, box-shadow 350ms ease;
}
.btn:hover, .btn:focus-visible {
  --x: 100%;
  background-color: transparent !important; background-position: 0 0 !important;
  transition: --x 500ms ease, color 500ms ease, transform 250ms ease, box-shadow 350ms ease;
}
/* warna dasar tombol (harus sama dengan warna latar aslinya) */
.btn-utama { --dasar: var(--kuning); }
.btn-biru { --dasar: var(--biru); }
html[data-tema="gelap"] .btn-biru { --dasar: #0b6ea6; }
.btn-garis, .sisi .btn-garis { --dasar: transparent; }
.btn-outline { --dasar: var(--kartu); }
.btn-bahaya { --dasar: var(--merah-muda); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:focus-visible { transition: color 0s; } }

/* =========================================================
   BAGIAN "TIM AHLI" (2026-10-21): foto di sisi kanan MEMUDAR ke warna latar (gaya situs referensi),
   teks di kiri. Pemudaran lewat mask-image (kiri & bawah) sehingga menyatu di tema terang maupun gelap.
   Foto: public/assets/img/pakar.jpg (bisa diganti di panel admin → Foto → Foto lain).
   ========================================================= */
.pakar { position: relative; overflow: hidden; background: var(--abu); padding: 90px 0; }
.pakar-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; pointer-events: none; }
.pakar-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 60%), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 60%), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%);
  mask-composite: intersect;
}
html[data-tema="gelap"] .pakar-foto img { filter: brightness(.82); }
.pakar > .wrap { position: relative; z-index: 2; }
.pakar-isi { max-width: 540px; }
.pakar-isi .head.kiri { margin-bottom: 16px; }
.pakar-isi p.lembut { margin-bottom: 18px; }
.pakar-isi .checklist { margin-bottom: 24px; }
@media (max-width: 980px) {
  .pakar { padding: 0 0 64px; }
  .pakar-foto { position: relative; width: 100%; height: 320px; }
  .pakar-foto img { object-position: 70% 30%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); -webkit-mask-composite: source-over; mask-composite: add; }
  .pakar-isi { max-width: none; margin-top: -30px; }
}

/* ---- Blok teks dengan foto memudar di KIRI (bagian "Wilayah Layanan"): foto menyentuh tepi kiri layar & memudar ke kanan/bawah ---- */
.pakar-blok { position: relative; padding: 12px 0 4px; margin-bottom: 8px; }
.pakar-blok .pakar-foto { top: 0; bottom: 0; left: calc(50% - 50vw); right: auto; width: 54vw; }
.pakar-blok .pakar-foto img {
  object-position: 20% center;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 60%), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 60%), linear-gradient(0deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%);
  mask-composite: intersect;
}
.pakar-kiri .pakar-isi { margin-left: auto; max-width: 560px; position: relative; z-index: 2; }
.pakar-kiri .pakar-isi .head { margin-bottom: 14px; }
@media (max-width: 980px) {
  .pakar-blok .pakar-foto { position: relative; left: auto; width: 100%; height: 240px; margin-bottom: -26px; }
  .pakar-blok .pakar-foto img { object-position: 25% 30%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); -webkit-mask-composite: source-over; mask-composite: add; }
  .pakar-kiri .pakar-isi { max-width: none; }
}

/* ---- Foto memudar lebih MENYATU dengan teks: pemudaran bertahap yang lebih lebar, foto melebar sedikit ke bawah teks (teks tetap di atas),
        dan mode "multiply" pada tema terang sehingga bagian putih foto ikut warna latar bagian (tanpa kotak foto yang terlihat) ---- */
.pakar-foto { width: 64%; }
.pakar-foto img {
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 18%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .9) 62%, #000 78%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 18%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .9) 62%, #000 78%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pakar-blok .pakar-foto { width: 66vw; }
.pakar-blok .pakar-foto img {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .22) 18%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .9) 62%, #000 78%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .22) 18%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .9) 62%, #000 78%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-tema="gelap"] .pakar-foto img { mix-blend-mode: normal; }
@media (max-width: 980px) {
  .pakar-foto { width: 100%; }
  .pakar-blok .pakar-foto { width: 100%; }
  .pakar-foto img, .pakar-blok .pakar-foto img {
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 48%); mask-image: linear-gradient(0deg, transparent 0%, #000 48%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}

/* Foto "Wilayah Layanan" (kiri): tampilkan kepala petugas (potong dari atas, bukan dari tengah) + jarak lega ke daftar tautan di bawahnya */
@media (min-width: 981px) {
  .pakar-blok .pakar-foto img { object-position: 20% 8%; }
  .pakar-foto img { clip-path: inset(0 3px 3px 3px); } /* buang garis tipis artefak antialias multiply+mask di tepi foto */
  .pakar-blok { margin-bottom: 30px; }
}
/* Teks "Wilayah Layanan": huruf sedikit lebih besar, jarak baris & paragraf lega, judul tidak terlalu raksasa */
.pakar-kiri .pakar-isi { max-width: 580px; padding: 14px 0; }
.pakar-kiri .pakar-isi .head { margin-bottom: 18px; }
.pakar-kiri .pakar-isi h2 { font-size: clamp(1.6rem, 2.3vw, 2.05rem); line-height: 1.22; }
.pakar-kiri .pakar-isi p { font-size: 1rem; line-height: 1.8; margin-bottom: 16px; }
.pakar-kiri .pakar-isi p:last-child { margin-bottom: 0; }
/* Foto "Wilayah Layanan" disamakan dengan foto "Kenapa IndoCareService": foto setinggi seluruh bagian (dari tepi atas bagian sampai di bawah teks),
   subjek di sisi foto yang jauh dari teks, pemudaran ke latar di empat sisi. Padding .section = 84px → ditutup margin negatif. */
@media (min-width: 981px) {
  .pakar-blok.pakar-kiri { margin: -84px 0 34px; padding: 84px 0 72px; }
  .pakar-blok .pakar-foto { width: 62vw; }
  .pakar-blok .pakar-foto img { object-position: 18% 16%; }
}
/* "Wilayah Layanan": daftar tautan layanan, chip kota & tombol ikut masuk ke kolom teks (satu kesatuan dengan foto di kiri) */
.pakar-kiri .pakar-isi .detail-lain.dua a { padding: 10px 14px; font-size: .88rem; line-height: 1.35; }
.pakar-kiri .pakar-isi .chip-area { gap: 7px; }
.pakar-kiri .pakar-isi .chip-area span { padding: 5px 12px; font-size: .82rem; }
@media (min-width: 601px) {
  .pakar-kiri .pakar-isi .detail-lain.dua { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (min-width: 981px) {
  .pakar-kiri .pakar-isi { max-width: 600px; }
  .pakar-blok .pakar-foto { width: 58vw; }
  .pakar-blok .pakar-foto img {
    object-position: 0% 30%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .3) 10%, rgba(0, 0, 0, .75) 24%, #000 38%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
    mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .3) 10%, rgba(0, 0, 0, .75) 24%, #000 38%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 18%);
  }
}@media (min-width: 981px) {
  .pakar-blok .pakar-foto { bottom: auto; height: min(100%, 82vw); }
}
/* Foto "Wilayah Layanan" dirapikan: lebar foto berhenti sedikit melewati tepi kolom teks (tidak menimpa teks), rasio 3:4 tetap supaya kepala petugas
   selalu utuh di semua lebar layar, pemudaran hanya di sisi dekat teks. Tepi kolom teks = 50vw − 25px (kolom 600px rata kanan di wrap 1150px). */
@media (min-width: 981px) {
  .pakar-blok .pakar-foto { width: calc(50vw + 15px); height: auto; aspect-ratio: 3 / 4; max-height: 100%; bottom: auto; }
  .pakar-blok .pakar-foto img {
    object-position: 0% 20%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .45) 8%, rgba(0, 0, 0, .85) 16%, #000 24%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%);
    mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .45) 8%, rgba(0, 0, 0, .85) 16%, #000 24%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%);
  }
}@media (min-width: 981px) {
  .pakar-blok .pakar-foto img {
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .3) 8%, rgba(0, 0, 0, .7) 18%, rgba(0, 0, 0, .95) 28%, #000 34%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%);
    mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, .3) 8%, rgba(0, 0, 0, .7) 18%, rgba(0, 0, 0, .95) 28%, #000 34%), linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .6) 14%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%);
  }
}
/* Daftar tautan layanan yang diciutkan ke 4 baris (script.js bagian 10); tanpa JS daftar tampil penuh */
.ringkas { position: relative; transition: max-height .45s ease; }
.ringkas.tertutup {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent 100%);
}
.ringkas-tombol { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ringkas { transition: none; } }
/* ---- "Wilayah Layanan": kartu tautan berikon, tombol buka-tutup selebar kolom, chip kota ringan ---- */
.pakar-kiri .pakar-isi .detail-lain.dua a {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 10px; border-radius: 14px;
  background: var(--kartu); border: 1px solid var(--garis); font-size: .88rem; font-weight: 600; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(10, 61, 98, .04); transition: border-color .22s, box-shadow .22s, transform .22s, color .22s;
}
.pakar-kiri .pakar-isi .detail-lain.dua a .ik {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--biru-muda); color: var(--biru-tua); transition: background .22s, color .22s;
}
.pakar-kiri .pakar-isi .detail-lain.dua a .ik svg.i { width: 18px; height: 18px; vertical-align: 0; }
.pakar-kiri .pakar-isi .detail-lain.dua a .tx { flex: 1; min-width: 0; }
.pakar-kiri .pakar-isi .detail-lain.dua a::after {
  content: "\2192"; flex: none; color: var(--biru); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .22s, transform .22s;
}
.pakar-kiri .pakar-isi .detail-lain.dua a:hover { border-color: var(--biru); color: var(--teks); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 61, 98, .10); }
.pakar-kiri .pakar-isi .detail-lain.dua a:hover .ik { background: var(--biru); color: #fff; }
.pakar-kiri .pakar-isi .detail-lain.dua a:hover::after { opacity: 1; transform: none; }

.pakar-kiri .pakar-isi .ringkas-tombol .btn {
  width: 100%; justify-content: center; gap: 10px; padding: 12px 20px; font-size: .9rem; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--biru);
  color: var(--biru-tua);
}
.pakar-kiri .pakar-isi .ringkas-tombol .btn:hover { box-shadow: inset 0 0 0 1.5px var(--biru); }
.ringkas-tombol .chev { width: 8px; height: 8px; margin: -4px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
.ringkas-tombol [aria-expanded="true"] .chev { margin-top: 3px; transform: rotate(-135deg); }

.pakar-kiri .pakar-isi .chip-area { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--garis); gap: 8px; }
.pakar-kiri .pakar-isi .chip-area span,
.pakar-kiri .pakar-isi .chip-area span.chip-kota {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; font-size: .82rem; font-weight: 600;
  background: var(--kartu); color: var(--teks); border: 1px solid var(--garis); border-radius: 999px;
}
.pakar-kiri .pakar-isi .chip-area span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--biru); flex: none; }
.pakar-kiri .pakar-isi .chip-area + .mt-besar { margin-top: 22px; }
.pakar-kiri .pakar-isi .ringkas-tombol .btn { display: flex; align-items: center; }
.ringkas-tombol .chev { display: inline-block; flex: none; }

/* =========================================================
   KELOMPOK FRONTEND-PUBLIK — perbaikan audit 2026-10-22 (aksesibilitas & responsif; tampilan yang disetujui tidak berubah)
   ========================================================= */
/* #02 Fokus keyboard (:focus-visible) pada .btn memenuhi tombol dengan warna sapuan (v6) → warna teks harus ikut berganti
   seperti saat hover, kalau tidak teks hilang (mis. biru-gelap di atas biru-gelap). Tanpa border (aturan CLAUDE.md). */
.btn-utama:focus-visible { color: #fff; }
.btn-biru:focus-visible { color: var(--biru-gelap); }
.btn-garis:focus-visible { color: var(--biru-gelap); }
.btn-outline:focus-visible { color: #fff; }

/* #18 Tombol "Lihat semua 21 layanan" (beranda): teks biru-tua di atas sapuan biru tak terbaca (1,5:1).
   Sapuan = biru gelap + teks putih saat hover/fokus (kontras ±11:1); cincin biru tetap. */
.pakar-kiri .pakar-isi .ringkas-tombol .btn { --sapu: var(--biru-gelap); }
.pakar-kiri .pakar-isi .ringkas-tombol .btn:hover,
.pakar-kiri .pakar-isi .ringkas-tombol .btn:focus-visible { color: #fff; }

/* #54 Panah slider: outline terpotong clip-path → fokus keyboard ditandai sapuan kuning yang sama dengan hover */
.slider-nav:focus-visible { outline: none; }
.slider-nav:focus-visible::before { transform: scaleX(1); }
.slider-nav:focus-visible, html[data-tema="gelap"] .slider-nav:focus-visible { color: var(--biru-gelap); }

/* #56 "Kurangi gerakan": tautan anchor & tombol ↑ tanpa gulir halus */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* #59 Pilihan bahasa saat disorot: latar mengikuti --kartu (bukan putih tetap) → terbaca di tema gelap */
.pilih-bahasa a:not(.aktif):hover { background: color-mix(in srgb, var(--kartu) 60%, transparent); }
html[data-tema="gelap"] .pilih-bahasa a:not(.aktif):hover { color: var(--teks); }

/* #61 Teks penting di bawah 12px dinaikkan ke 12px */
.produk .tag { font-size: .75rem; }
.produk .harga small { font-size: .75rem; }
@media (max-width: 560px) { .dock-set .pilih-bahasa a { font-size: .75rem; } }
/* #61 Menu hamburger: tautan utama (Beranda, Tentang, …) masih inline → padding 12px tumpang tindih, jarak antarbaris hanya ±26px.
   Dijadikan blok seperti tautan submenu: tiap baris ±45px sesuai padding yang memang sudah ditulis. */
@media (max-width: 1150px) { .menu > li > a { display: block; } }

/* #66 Dropdown desktop tidak melewati dasar layar saat top bar tampil (top bar 40 + navbar 72 + jarak) */
@media (min-width: 1151px) { .submenu { max-height: calc(100vh - 124px); max-height: calc(100dvh - 124px); } }

/* #08 Menu hamburger di 861–1150px: navbar berada di bawah top bar (y=40) → sisa layar 112px lebih pendek.
   Cadangan bila JS belum jalan; script.js mengisi tinggi pasti (sisa layar di bawah navbar). */
@media (min-width: 861px) and (max-width: 1150px) {
  .menu { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); }
}

/* #60 Tautan "Lewati ke konten utama" — tersembunyi sampai difokus dengan Tab */
.lewati {
  position: absolute; left: 12px; top: -80px; z-index: 10000; padding: 10px 18px; border-radius: 10px;
  background: var(--kuning); color: var(--biru-gelap); font-weight: 700; box-shadow: var(--bayang); transition: top .2s;
}
.lewati:focus { top: 12px; outline: 2px solid var(--biru-gelap); outline-offset: 2px; }
#konten:focus { outline: none; }