/* ==========================================================================
   SITUS PUBLIK: tema "Urushi" (perusahaan × anime).
   Dimuat sesudah tokens/base/components.css dan menimpa token warnanya,
   lalu menambah komponen khusus situs.

   Warna di bawah :root adalah nilai tema Urushi, tema bawaan. Tema lain yang
   dipilih dari panel admin ada di tema-situs.css: tiap tema hanya mengganti
   variabel di :root, jadi aturan komponen di berkas ini tidak menyebut warna
   langsung kecuali putih di atas foto dan hijau WhatsApp.

   Identitas: merah logo, emas situs, di atas hitam pernis. Nuansa anime dari
   langit kota malam, matahari merah bergaris, kelopak sakura, pita miring,
   dan teks Jepang sebagai tanda air.

   Kontras terendah di permukaan #0c0a0d sampai #282127: teks 14,6:1,
   teks-2 11,3:1, redup 5,9:1, merah 5,7:1, emas 9,6:1. Teks putih di atas
   isian merah tombol: 5,24:1.

   Kinerja: tidak ada backdrop-filter pada elemen yang menempel saat
   digulir, dan semua animasi hanya menggerakkan transform atau opacity.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Permukaan ---------- */
  --bg:            #0c0a0d;
  --bg-soft:       #110d11;
  --surface:       #161216;
  --surface-2:     #1d181d;
  --surface-3:     #282127;
  --surface-4:     #3a3038;
  /* Versi rgb untuk lapisan tembus pandang. dasar = --bg, permukaan =
     --surface, tirai = selubung di atas langit dan foto kepala halaman,
     scrim = lapisan di atas foto kartu (tetap gelap di tema terang supaya
     teks putih di atasnya terbaca), latar = latar menu ponsel & pencarian. */
  --dasar-rgb:     12, 10, 13;
  --permukaan-rgb: 22, 18, 22;
  --tirai-rgb:     6, 4, 7;
  --scrim-rgb:     12, 10, 13;
  --latar-rgb:     5, 4, 7;

  --emas-rgb:      240, 198, 69;
  --line:          rgba(var(--emas-rgb), 0.12);
  --line-2:        rgba(var(--emas-rgb), 0.2);
  --line-3:        rgba(var(--emas-rgb), 0.34);

  --text:          #faf6ef;
  --text-2:        #e2dacd;
  --muted:         #b9ae9f;
  --dim:           #a89d8e;
  --faint:         #5c514b;
  /* Teks untuk keadaan sorot dan aktif: paling terang di tema gelap, paling
     pekat di tema terang. */
  --teks-kuat:     #ffffff;

  /* ---------- Aksen ----------
     Namanya mengikuti tema Urushi, perannya berlaku untuk semua tema:
     merah = aksen utama untuk teks, ikon, dan titik; merah-rgb = isian
     tombol; emas = aksen kedua untuk label dan garis. Tema lain
     (tema-situs.css) mengganti warnanya, bukan namanya. */
  --merah:         #ff6b6b;
  --merah-muda:    #ff8f8f;
  --aksen-rgb:     255, 107, 107;
  --merah-rgb:     200, 16, 46;
  --emas:          #f0c645;
  --emas-muda:     #f6d98a;
  --emas-muda-rgb: 246, 217, 138;
  --sakura:        #ffa8c5;

  --accent-1:      var(--merah-muda);
  --accent-2:      var(--merah);
  --accent-3:      var(--merah-muda);
  --accent-4:      var(--emas-muda);
  --accent-fill:   rgb(var(--merah-rgb));
  --accent-fill-2: #d7141f;
  --accent-1-soft: rgba(var(--aksen-rgb), 0.14);
  --accent-3-soft: rgba(var(--aksen-rgb), 0.14);
  --accent-4-soft: rgba(var(--emas-rgb), 0.12);
  /* Label di atas isian aksen, dan bayangan keras di bawah judul anime. */
  --teks-isian:    #ffffff;
  --bayang-judul:  #a50e1f;
  --bayang-judul-rgb: 165, 14, 31;

  --grad-accent: linear-gradient(100deg, var(--accent-fill) 0%, var(--accent-fill-2) 50%, var(--bayang-judul) 100%);
  --grad-emas:   linear-gradient(100deg, #fff4d6 0%, var(--emas-muda) 30%, var(--emas) 60%, #ffb3b3 100%);
  --grad-garis:  linear-gradient(90deg, var(--emas), var(--merah) 50%, transparent);
  /* Tepi bergradien dan permukaan bernuansa aksen untuk kartu sorotan
     (formulir kontak, pita ajakan, paket unggulan, palet pencarian). */
  --grad-tepi:   linear-gradient(140deg, var(--emas-muda), var(--accent-fill) 45%, var(--emas));
  --sorot:       color-mix(in srgb, var(--accent-fill) 12%, var(--surface));
  --sorot-kuat:  color-mix(in srgb, var(--accent-fill) 20%, var(--surface));

  --glass:         rgba(var(--emas-rgb), 0.04);
  --glass-2:       rgba(var(--emas-rgb), 0.08);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow:        0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 6px 12px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);
  --nyala:         0 8px 28px rgba(var(--merah-rgb), 0.38);

  --danger:        #ff7b93;
  --danger-soft:   rgba(255, 123, 147, 0.14);
  --ok:            #6ee7b7;

  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-anime:   'Dela Gothic One', 'Space Grotesk', system-ui, sans-serif;

  --header-h:  78px;

  /* Seigaiha (青海波): tiga busur sepusat, dua lapis bergeser setengah ubin. */
  --ombak: radial-gradient(circle at 50% 100%,
    transparent 0 21%, rgba(var(--emas-rgb), 0.14) 21% 25%,
    transparent 25% 41%, rgba(var(--emas-rgb), 0.14) 41% 45%,
    transparent 45% 61%, rgba(var(--emas-rgb), 0.14) 61% 65%, transparent 65%);

  /* ---------- Langit & kota ----------
     Langit hero dan kepala halaman, matahari bergaris, kelopak, dan siluet
     kota (kota.js memberi kelas, bukan warna). */
  --langit-1:      #060407;
  --langit-2:      #140b10;
  --langit-3:      #2e0d16;
  --langit-4:      #6e1220;
  --pendar-rgb:    225, 37, 27;
  --manga-rgb:     255, 255, 255;
  --bintang-1:     #ffffff;
  --bintang-2:     #fff1d6;
  --bintang-3:     #f6d98a;
  --mentari: linear-gradient(180deg, #ffe9a8 0%, #ffb347 26%, #ff3b2f 58%, #c8102e 82%, #8a0b1c 100%);
  --kelopak: linear-gradient(135deg, #fff5f7, #ffc2d4 55%, #f78fb0);
  --partikel:      #ffc2d4;
  --kota-gunung-a: #7a2a40;
  --kota-gunung-b: #2a1019;
  --kota-jauh-a:   #2a131b;
  --kota-jauh-b:   #170a10;
  --kota-salju:    #fff1e0;
  --kota-dekat:    #0a0709;
  --jendela-1:     #ffd36e;
  --jendela-2:     #fff1d6;
  --jendela-3:     #ff6b6b;
  /* Teks besar di atas langit hero. */
  --hero-teks:     #ffffff;
}

/* ======================== DASAR ======================== */
body { background: var(--bg); color: var(--text-2); }
/* Pita berjalan yang miring sedikit melewati tepi layar. Di Chrome ponsel,
   overflow-x: hidden pada body saja tidak mencegah halaman tergeser ke
   samping. clip memotongnya tanpa membuat wadah gulir baru, jadi elemen
   sticky (kartu samping detail layanan) tetap bekerja. */
html, body { overflow-x: clip; }
::selection { background: var(--accent-fill); color: var(--teks-isian); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-color: var(--bg); }
* { scrollbar-color: var(--surface-4) transparent; }
:focus-visible { outline-color: var(--emas); }
h1, h2, h3, h4 { color: var(--text); }
main { display: block; min-height: 60vh; }
/* Kelas dengan display sendiri (grid, flex) mengalahkan [hidden] bawaan
   peramban, sehingga panel tab dan pesan sukses formulir tampil semua. */
[hidden] { display: none !important; }

.kicker { color: var(--emas-muda); font-weight: 500; }
.kicker::before, .kicker--center::after { width: 30px; height: 2px; background: var(--grad-garis); }
.sec-title {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sec-head p { color: var(--muted); }
.container .container--narrow { margin-inline: auto; }
.center { text-align: center; }
/* base.css meratakan kanan-kiri beberapa paragraf pembuka. Pada kolom hero
   yang lebarnya dibatasi 54ch, hasilnya celah antarkata yang menganga. */
.hero__sub, .page-hero p, .sec-head p, .card__desc, .post-card p,
.pf-card__ringkas, .vm-card p, .tl-item p, .svc-row__desc { text-align: left; hyphens: manual; }

/* Gambar kosong: bidang bertema, bukan kotak putih. */
.img-ph {
  width: 100%; height: 100%;
  min-height: 120px;
  background:
    radial-gradient(circle at 70% 30%, rgba(var(--merah-rgb), 0.35), transparent 60%),
    linear-gradient(135deg, var(--surface-3), var(--surface));
  color: rgba(var(--emas-rgb), 0.45);
}

/* Inisial pengganti foto orang. Ukuran huruf mengikuti lebar wadahnya. */
.inisial {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  container-type: inline-size;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--emas-rgb), 0.28), transparent 60%),
    linear-gradient(140deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 62%, #000000));
  color: var(--teks-isian);
  font-family: var(--f-display); font-weight: 700;
  line-height: 1; letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  user-select: none;
}
.inisial > span { font-size: clamp(0.9rem, 38cqi, 9rem); }
.artikel__penulis .inisial { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--emas); }

/* Animasi muncul. Tundaan diatur shell.js agar kartu berurutan. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--tunda, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ======================== PRELOADER ======================== */
#preloader { background: var(--bg); }
.pl-mark { font-family: var(--f-anime); font-weight: 400; color: var(--emas-muda); letter-spacing: 0.12em; }
.pl-bar { background: var(--surface-3); }
.pl-bar::after { background: var(--grad-accent); }

/* ======================== NAVIGASI ========================
   Header berbentuk pil yang mengambang 12px dari tepi atas. Di atas hero ia
   setengah tembus; setelah menggulir ia memadat dan menggelap. Sengaja tanpa
   backdrop-filter (lihat catatan kinerja di components.css). */
.scroll-progress { background: var(--grad-garis); height: 2px; }
.brand__mark {
  background: var(--grad-accent);
  color: var(--teks-isian);
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px var(--emas), var(--nyala);
  transform: rotate(-4deg);
}
.brand__name { font-family: var(--f-display); color: var(--text); letter-spacing: 0.02em; }
.brand__sub { color: var(--emas-muda); }

.navbar {
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: var(--z-header);
  padding: 0 14px;
  pointer-events: none;
  transition: transform 0.45s var(--ease-out);
}
.navbar.is-hidden { transform: translateY(calc(-100% - 24px)); }
.navbar__pil {
  position: relative;
  pointer-events: auto;
  max-width: 1280px;
  height: 64px;
  margin: 0 auto;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: var(--r-full);
  border: 1px solid rgba(var(--emas-rgb), 0.16);
  background: rgba(var(--dasar-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: height 0.35s var(--ease-out), background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.navbar.is-stuck .navbar__pil {
  height: 58px;
  background: rgba(var(--dasar-rgb), 0.95);
  border-color: rgba(var(--emas-rgb), 0.24);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Garis cahaya tipis di dasar pil: emas ke merah, seperti header panel. */
.navbar__pil::after {
  content: '';
  position: absolute;
  left: 32px; right: 32px; bottom: -1px;
  height: 1px;
  background: var(--grad-garis);
  opacity: 0.55;
  pointer-events: none;
}
.navbar .brand { flex-shrink: 0; }
.navbar .brand__mark { width: 40px; height: 40px; }

.navbar__nav { position: relative; margin: 0 auto; }
.navbar__menu { display: flex; align-items: center; gap: 2px; }
.navbar__tautan {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.navbar__tautan:hover, .navbar__tautan:focus-visible, .navbar__item.is-open > .navbar__tautan { color: var(--teks-kuat); }
.navbar__tautan.is-active { color: var(--teks-kuat); }
/* Titik merah kecil di bawah tautan halaman aktif. */
.navbar__tautan.is-active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--merah);
  box-shadow: 0 0 8px var(--merah);
}
.navbar__caret { width: 14px; height: 14px; opacity: 0.7; transition: transform var(--t) var(--ease-out); }
.navbar__item.is-open .navbar__caret { transform: rotate(180deg); }
@media (hover: hover) { .navbar__item:hover .navbar__caret { transform: rotate(180deg); } }

/* Sorotan yang meluncur. Posisi dan lebarnya diisi navigasi.js. */
.navbar__penanda {
  position: absolute;
  top: 50%; left: 0;
  width: var(--w, 0);
  height: 40px;
  border-radius: var(--r-full);
  background: rgba(var(--emas-rgb), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--emas-rgb), 0.2);
  transform: translate(var(--x, 0), -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s var(--ease-out), width 0.38s var(--ease-out), opacity 0.2s, background 0.2s;
}
.navbar__penanda.is-tampil { opacity: 1; }
.navbar__penanda.is-aktif { background: rgba(var(--merah-rgb), 0.22); box-shadow: inset 0 0 0 1px rgba(var(--aksen-rgb), 0.3); }

/* ---- Panel menu (besar & tarik) ---- */
.navbar__item--tarik { position: relative; }
.navbar__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--merah-rgb), 0.16), transparent 50%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s var(--ease), transform 0.26s var(--ease-out), visibility 0s linear 0.26s;
}
/* Jembatan tak terlihat di atas panel: tanpa ini, menggeser tetikus dari
   tautan ke panel melewati celah dan panelnya keburu tertutup. */
.navbar__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.navbar__item.is-open > .navbar__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s;
}
@media (hover: hover) {
  .navbar__item:hover > .navbar__panel { opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s; }
}

.mega {
  width: min(880px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 12px;
}
.mega__daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
.mega__layanan {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  transition: background var(--t-fast);
}
.mega__layanan:hover, .mega__layanan:focus-visible { background: rgba(var(--merah-rgb), 0.14); }
.mega__ikon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(var(--merah-rgb), 0.18);
  color: var(--merah-muda);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t) var(--ease-back);
}
.mega__ikon svg { width: 21px; height: 21px; }
.mega__layanan:hover .mega__ikon { background: var(--grad-accent); color: var(--teks-isian); transform: rotate(-6deg); }
.mega__teks { display: grid; gap: 3px; }
.mega__teks b { color: var(--text); font-size: var(--fs-sm); }
.mega__teks small { color: var(--dim); font-size: var(--fs-xs); line-height: 1.5; }
.mega__sorot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(var(--emas-rgb), 0.2);
  background: linear-gradient(170deg, var(--sorot-kuat), var(--surface));
}
.mega__sorot::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  z-index: -1;
  background: var(--ombak) 0 0 / 44px 22px, var(--ombak) 22px 11px / 44px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000);
          mask-image: linear-gradient(transparent, #000);
}
.mega__mentari { right: -46px; bottom: -40px; width: 150px; z-index: -1; opacity: 0.85; }
.mega__jp {
  position: absolute;
  top: 14px; right: 16px;
  writing-mode: vertical-rl;
  font-family: var(--f-anime);
  font-size: 1.5rem;
  color: rgba(var(--emas-muda-rgb), 0.35);
}
.mega__label { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
.mega__sorot b { font-family: var(--f-display); font-size: var(--fs-lg); color: var(--teks-kuat); line-height: 1.25; max-width: 15ch; }
.mega__sorot p { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; margin-bottom: 6px; }
.mega__kaki {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.mega__kaki a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: var(--fs-xs);
  transition: background var(--t-fast), color var(--t-fast);
}
.mega__kaki a:hover { background: rgba(var(--emas-rgb), 0.08); color: var(--emas-muda); }
.mega__kaki svg { width: 15px; height: 15px; }

.tarik { width: 340px; display: grid; gap: 2px; }
.tarik__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  transition: background var(--t-fast);
}
.tarik__item:hover, .tarik__item:focus-visible { background: rgba(var(--emas-rgb), 0.07); }
.tarik__item.is-active { background: rgba(var(--merah-rgb), 0.14); }
.tarik__ikon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  color: var(--emas);
}
.tarik__ikon svg { width: 19px; height: 19px; }
.tarik__teks { display: grid; gap: 2px; flex: 1; }
.tarik__teks b { color: var(--text); font-size: var(--fs-sm); }
.tarik__teks small { color: var(--dim); font-size: var(--fs-xs); }
.tarik__panah { width: 16px; height: 16px; color: var(--merah); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast), transform var(--t-fast); }
.tarik__item:hover .tarik__panah { opacity: 1; transform: none; }

/* ---- Tombol di kanan ---- */
.navbar__aksi { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.navbar__cari {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: rgba(var(--emas-rgb), 0.04);
  color: var(--muted);
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.navbar__cari:hover { border-color: var(--emas); color: var(--teks-kuat); }
.navbar__cari svg { width: 16px; height: 16px; }
.navbar__cari kbd, .palet kbd {
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--glass);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  color: var(--dim);
}
.navbar__cta { height: 40px; padding: 0 18px; }
.navbar__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(var(--emas-rgb), 0.05);
}
.navbar__burger span {
  position: absolute;
  left: 13px; right: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t) var(--ease-out), top var(--t) var(--ease-out);
}
.navbar__burger span:first-child { top: 17px; }
.navbar__burger span:last-child { top: 25px; right: 18px; }
.navbar__burger.is-open span:first-child { top: 21px; transform: rotate(45deg); }
.navbar__burger.is-open span:last-child { top: 21px; right: 13px; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .navbar__nav { display: none; }
  .navbar__burger { display: block; }
  .navbar__cari { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .navbar__cari span, .navbar__cari kbd { display: none; }
}
@media (max-width: 560px) {
  .navbar { top: 8px; padding: 0 8px; }
  .navbar__pil { height: 58px; padding: 0 7px 0 10px; gap: 10px; }
  .navbar__cta { display: none; }
  .navbar .brand__text { display: flex; }
  .navbar .brand__sub { display: none; }
}

/* ---- Lembar menu ponsel ---- */
.lembar { position: fixed; inset: 0; z-index: 105; visibility: hidden; transition: visibility 0s linear 0.45s; }
.lembar.is-open { visibility: visible; transition-delay: 0s; }
.lembar__latar { position: absolute; inset: 0; background: rgba(var(--latar-rgb), 0.7); opacity: 0; transition: opacity 0.35s; }
.lembar.is-open .lembar__latar { opacity: 1; }
.lembar__isi {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 24px;
  border-left: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--merah-rgb), 0.35), transparent 45%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
}
.lembar.is-open .lembar__isi { transform: none; }
/* Isinya lebih tinggi dari layar ponsel; tanpa ini kolom flex menyusutkan
   tombol cari dan kartu kontak alih-alih menggulir. */
.lembar__isi > * { flex-shrink: 0; }
.lembar__isi::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  z-index: -1;
  background: var(--ombak) 0 0 / 44px 22px, var(--ombak) 22px 11px / 44px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000);
          mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}
.lembar__kepala { display: flex; align-items: center; justify-content: space-between; }
.lembar__kepala .brand__text { display: flex; }
.lembar__tutup {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--text);
}
.lembar__tutup svg { width: 20px; height: 20px; }
.lembar__cari {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: rgba(var(--dasar-rgb), 0.7);
  color: var(--dim);
  font-size: var(--fs-sm);
  text-align: left;
}
.lembar__cari svg { width: 18px; height: 18px; color: var(--merah); }
.lembar__menu { display: grid; }
.lembar__menu > li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  transition-delay: calc(0.08s + var(--i, 0) * 45ms);
}
.lembar.is-open .lembar__menu > li { opacity: 1; transform: none; }
.lembar__tautan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.lembar__tautan::-webkit-details-marker { display: none; }
.lembar__tautan > span:not(.lembar__no) { flex: 1; }
.lembar__tautan.is-active { color: var(--merah-muda); }
.lembar__no { font-family: var(--f-mono); font-size: 0.66rem; color: var(--dim); width: 22px; }
.lembar__panah { width: 20px; height: 20px; color: var(--dim); transition: transform var(--t) var(--ease-out); }
.lembar__grup[open] .lembar__panah { transform: rotate(180deg); color: var(--merah); }
.lembar__sub { display: grid; gap: 2px; padding: 0 0 14px 36px; }
.lembar__sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.lembar__sub a:hover, .lembar__sub a.is-active { background: rgba(var(--merah-rgb), 0.14); color: var(--teks-kuat); }
.lembar__sub svg { width: 17px; height: 17px; color: var(--merah); flex-shrink: 0; }
.lembar__kontak { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lembar__kartu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(var(--permukaan-rgb), 0.8);
  color: var(--text);
  min-width: 0;
}
.lembar__kartu svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--emas); }
.lembar__kartu span { min-width: 0; display: grid; }
.lembar__kartu b { font-size: var(--fs-sm); }
.lembar__kartu small { color: var(--dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lembar__kartu--wa { background: linear-gradient(120deg, #128c4a, #0d6b39); border-color: transparent; }
.lembar__kartu--wa svg, .lembar__kartu--wa small { color: #ffffff; }
.lembar__kaki { margin-top: auto; display: grid; gap: 16px; }

/* ---- Palet pencarian ---- */
.palet { position: fixed; inset: 0; z-index: 108; display: grid; justify-items: center; align-items: start; padding: 12vh 12px 12px; visibility: hidden; transition: visibility 0s linear 0.25s; }
.palet.is-open { visibility: visible; transition-delay: 0s; }
.palet__latar { position: absolute; inset: 0; background: rgba(var(--latar-rgb), 0.72); opacity: 0; transition: opacity 0.25s; }
.palet.is-open .palet__latar { opacity: 1; }
.palet__kotak {
  position: relative;
  width: min(640px, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, var(--surface-2), var(--bg)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px) scale(0.97);
  transition: opacity 0.22s, transform 0.28s var(--ease-out);
}
.palet.is-open .palet__kotak { opacity: 1; transform: none; }
.palet__masukan { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.palet__masukan > svg { width: 20px; height: 20px; color: var(--merah); flex-shrink: 0; }
.palet__masukan input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: max(16px, var(--fs-lg)); }
.palet__masukan input::placeholder { color: var(--dim); }
.palet__masukan input::-webkit-search-cancel-button { display: none; }
.palet__hasil { overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.palet__grup + .palet__grup { margin-top: 6px; }
.palet__judul { display: block; padding: 10px 12px 6px; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
.palet__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--text-2); }
.palet__item.is-aktif { background: rgba(var(--merah-rgb), 0.2); color: var(--teks-kuat); box-shadow: inset 0 0 0 1px rgba(var(--aksen-rgb), 0.25); }
.palet__ikon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-2); color: var(--emas); }
.palet__item.is-aktif .palet__ikon { background: var(--grad-accent); border-color: transparent; color: var(--teks-isian); }
.palet__ikon svg { width: 17px; height: 17px; }
.palet__teks { flex: 1; min-width: 0; display: grid; gap: 1px; }
.palet__teks b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palet__teks small { font-size: var(--fs-xs); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palet__teks mark { background: none; color: var(--emas-muda); text-decoration: underline; text-decoration-color: var(--merah); text-underline-offset: 3px; }
.palet__enter { font-family: var(--f-mono); color: var(--dim); opacity: 0; }
.palet__item.is-aktif .palet__enter { opacity: 1; }
.palet__kosong { display: grid; justify-items: center; gap: 6px; padding: 34px 16px; text-align: center; color: var(--muted); }
.palet__kosong > span { font-size: 1.6rem; color: var(--merah-muda); }
.palet__kosong a { color: var(--emas-muda); text-decoration: underline; }
.palet__kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-xs); }
.palet__kaki span { display: inline-flex; align-items: center; gap: 5px; }
.palet__jp { margin-left: auto; font-family: var(--f-anime); color: rgba(var(--emas-muda-rgb), 0.4); }
@media (max-width: 560px) {
  .palet { padding-top: 10px; }
  .palet__kotak { max-height: calc(100svh - 20px); }
  .palet__kaki { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar__penanda, .lembar__isi, .lembar__menu > li, .palet__kotak { transition: none; }
}
/* ======================== TOMBOL ======================== */
.btn--primary {
  background: var(--grad-accent);
  color: var(--teks-isian);
  border: 1px solid rgba(var(--emas-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--nyala);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}
.btn--primary:hover { background: var(--grad-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 34px rgba(var(--merah-rgb), 0.55); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:focus-visible { outline-color: var(--emas); }
.btn--ghost { background: rgba(var(--emas-rgb), 0.05); color: var(--text); border-color: var(--line-3); }
.btn--ghost:hover { background: rgba(var(--emas-rgb), 0.1); border-color: var(--emas); color: var(--teks-kuat); }
.link-arrow { color: var(--emas-muda); }
.link-arrow::after { background: var(--grad-garis); }
.badge { color: var(--text-2); border-color: var(--line-2); background: rgba(var(--emas-rgb), 0.05); }
.badge .ic { width: 12px; height: 12px; color: var(--merah); }
a.badge:hover { border-color: var(--emas); color: var(--teks-kuat); }

.chip-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chip { color: var(--muted); border-color: var(--line-2); display: inline-flex; align-items: center; gap: 8px; }
.chip span { font-family: var(--f-mono); font-size: 0.68rem; opacity: 0.75; }
.chip:hover { color: var(--teks-kuat); border-color: var(--emas); }
.chip.is-active { background: var(--grad-accent); color: var(--teks-isian); border-color: transparent; box-shadow: var(--nyala); }

/* ======================== LANGIT & KOTA ======================== */
.kota { display: block; width: 100%; height: 100%; }
/* Badan gunung cukup terang supaya puncak saljunya tidak tampak melayang. */
.kota .st-ga { stop-color: var(--kota-gunung-a); }
.kota .st-gb { stop-color: var(--kota-gunung-b); }
.kota .st-ja { stop-color: var(--kota-jauh-a); }
.kota .st-jb { stop-color: var(--kota-jauh-b); }
.kota .k-salju { fill: var(--kota-salju); }
.kota .k-dekat, .kota__tiang rect { fill: var(--kota-dekat); }
.kota__kabel { stroke: var(--kota-dekat); }
.kota__jendela rect { fill: var(--jendela-1); opacity: 0.85; }
.kota__jendela rect:nth-child(3n) { fill: var(--jendela-2); }
.kota__jendela rect:nth-child(5n) { fill: var(--jendela-3); }

.langit {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 100%, rgba(var(--pendar-rgb), 0.45), transparent 70%),
    radial-gradient(ellipse 50% 40% at 8% 100%, rgba(var(--emas-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, var(--langit-1) 0%, var(--langit-2) 40%, var(--langit-3) 72%, var(--langit-4) 100%);
}
.langit__bintang {
  position: absolute;
  inset: 0 0 30% 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, var(--bintang-1) 60%, transparent 100%),
    radial-gradient(1px 1px at 140px 90px, color-mix(in srgb, var(--bintang-1) 80%, transparent) 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 90px 170px, var(--bintang-2) 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 230px 210px, var(--bintang-3) 60%, transparent 100%),
    radial-gradient(2px 2px at 310px 60px, var(--bintang-1) 60%, transparent 100%);
  background-size: 330px 260px, 270px 300px, 410px 350px, 290px 240px, 520px 430px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 95%);
          mask-image: linear-gradient(#000 30%, transparent 95%);
  animation: kelip 4.5s ease-in-out infinite alternate;
}
@keyframes kelip { from { opacity: 0.5; } to { opacity: 1; } }
.langit__pendar {
  position: absolute;
  right: calc(8vw - 14vmin);
  bottom: calc(18vh - 14vmin);
  width: min(78vmin, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--pendar-rgb), 0.4) 0%, rgba(var(--pendar-rgb), 0.12) 42%, transparent 68%);
}
.langit__mentari, .cta-band__mentari, .mega__mentari {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mentari);
  -webkit-mask-image: linear-gradient(#000 0 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%,
    #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 92%, #000 92%);
          mask-image: linear-gradient(#000 0 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%,
    #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 92%, #000 92%);
}
.langit__mentari { right: 8vw; bottom: 18vh; width: min(50vmin, 520px); }
.langit__kota { position: absolute; left: 0; right: 0; bottom: 0; height: min(42vh, 380px); }
.langit__kelopak { position: absolute; inset: 0; overflow: hidden; }
.langit__kelopak i {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: calc(13px * var(--s, 1));
  height: calc(10px * var(--s, 1));
  border-radius: 100% 0 100% 0;
  background: var(--kelopak);
  opacity: 0.9;
  animation: gugur var(--d, 18s) linear var(--t, 0s) infinite;
  will-change: transform;
}
.langit__kelopak i:nth-child(even) { animation-name: gugur2; }
@keyframes gugur {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg); }
  25%  { transform: translate3d(5vw, 28vh, 0) rotate(80deg) rotateX(60deg); }
  50%  { transform: translate3d(-1vw, 56vh, 0) rotate(170deg) rotateX(0deg); }
  75%  { transform: translate3d(6vw, 84vh, 0) rotate(260deg) rotateX(70deg); }
  100% { transform: translate3d(2vw, 114vh, 0) rotate(360deg) rotateX(0deg); }
}
@keyframes gugur2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); }
  25%  { transform: translate3d(-4vw, 28vh, 0) rotate(-70deg) rotateY(70deg); }
  50%  { transform: translate3d(2vw, 56vh, 0) rotate(-160deg) rotateY(0deg); }
  75%  { transform: translate3d(-5vw, 84vh, 0) rotate(-250deg) rotateY(60deg); }
  100% { transform: translate3d(-1vw, 114vh, 0) rotate(-340deg) rotateY(0deg); }
}

/* ======================== HERO BERANDA ======================== */
.hero {
  position: relative;
  min-height: max(100svh, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 40px) 0 clamp(150px, 22vh, 220px);
}
.hero__latar { position: absolute; inset: 0; z-index: -1; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--foto .langit { background: linear-gradient(180deg, rgba(var(--tirai-rgb), 0.55), rgba(var(--tirai-rgb), 0.35) 45%, color-mix(in srgb, var(--accent-fill) 18%, rgba(var(--tirai-rgb), 0.72))); }
.hero--foto .langit__bintang, .hero--foto .langit__pendar, .hero--foto .langit__mentari { display: none; }
/* Garis konsentrasi manga di sekitar matahari, diam supaya tidak berat. */
.hero__garis {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 78% 72%, rgba(var(--manga-rgb), 0.05) 0deg 0.8deg, transparent 0.8deg 5deg);
  -webkit-mask-image: radial-gradient(circle at 78% 72%, transparent 22%, #000 34%, transparent 70%);
          mask-image: radial-gradient(circle at 78% 72%, transparent 22%, #000 34%, transparent 70%);
}
/* Tirai kiri supaya teks hero selalu terbaca di atas foto maupun ilustrasi. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--tirai-rgb), 0.75) 0%, rgba(var(--tirai-rgb), 0.35) 45%, transparent 70%);
  pointer-events: none;
}
.hero__isi { position: relative; z-index: 2; }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-full);
  background: rgba(var(--dasar-rgb), 0.55);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--emas-muda);
  animation: naik 0.9s var(--ease-out) both;
}
.hero__kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--merah); box-shadow: 0 0 12px var(--merah); }
.hero__judul {
  margin: 26px 0 22px;
  font-family: var(--f-anime);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.hero__baris { display: block; animation: naik 1s var(--ease-out) both; }
.hero__baris--1 {
  font-size: clamp(3.4rem, 1.4rem + 9.5vw, 10rem);
  background: var(--grad-emas);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(5px 5px 0 var(--bayang-judul)) drop-shadow(0 0 40px rgba(var(--aksen-rgb), 0.25));
  animation-delay: 0.1s;
}
.hero__baris--2 {
  font-size: clamp(1.5rem, 0.9rem + 3.2vw, 3.6rem);
  color: var(--hero-teks);
  letter-spacing: 0.06em;
  margin-top: 10px;
  text-shadow: 3px 3px 0 rgba(var(--bayang-judul-rgb), 0.9);
  animation-delay: 0.22s;
}
.hero__sub {
  max-width: 54ch;
  font-size: var(--fs-lg);
  color: var(--text-2);
  line-height: 1.75;
  animation: naik 1s var(--ease-out) 0.34s both;
}
.hero__aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; animation: naik 1s var(--ease-out) 0.46s both; }
@keyframes naik { from { opacity: 0; transform: translateY(30px); } }

.hero__jp {
  position: absolute;
  right: clamp(16px, 4vw, 70px);
  top: calc(var(--header-h) + 30px);
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--f-anime);
  font-size: clamp(2.4rem, 7vh, 5.4rem);
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(var(--emas-muda-rgb), 0.7), rgba(var(--pendar-rgb), 0.45));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none;
}
.hero__stat {
  position: absolute;
  left: 50%;
  bottom: clamp(70px, 9vh, 96px);
  transform: translateX(-50%);
  z-index: 2;
  width: min(var(--container), calc(100% - 2 * var(--gut)));
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  pointer-events: none;
}
.hero__stat-kartu {
  min-width: 150px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(var(--dasar-rgb), 0.82);
  box-shadow: var(--shadow), inset 0 -3px 0 var(--merah);
  animation: naik 1s var(--ease-out) both, melayang 6s var(--ease-in-out) infinite alternate;
  animation-delay: calc(0.6s + var(--i) * 0.12s), calc(var(--i) * -2s);
}
.hero__stat-kartu b { display: block; font-family: var(--f-anime); font-weight: 400; font-size: 1.9rem; color: var(--hero-teks); line-height: 1.1; }
.hero__stat-kartu > span { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
@keyframes melayang { to { transform: translateY(-8px); } }
@media (max-width: 860px) {
  .hero__stat { justify-content: flex-start; gap: 10px; overflow-x: auto; }
  .hero__stat-kartu { min-width: 120px; padding: 12px 14px; }
  .hero__stat-kartu b { font-size: 1.5rem; }
  .hero__jp { display: none; }
}
/* Di tablet dan ponsel kartu mengambang berdesakan dengan tombol hero dan
   terpotong di tepi kanan, padahal angkanya sudah tampil lengkap di bagian
   perkenalan tepat di bawah hero. Matahari juga dikecilkan supaya tidak
   berada tepat di belakang paragraf. */
@media (max-width: 860px) {
  .hero__stat { display: none; }
  .hero { padding-bottom: 130px; }
  .langit__mentari { width: min(42vmin, 340px); right: 4vw; bottom: 24vh; }
  .langit__pendar { width: min(62vmin, 520px); }
}
.hero__gulir {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 1.5px solid var(--line-3);
  border-radius: 14px;
}
.hero__gulir span {
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--emas);
  animation: gulir 1.8s var(--ease-in-out) infinite;
}
@keyframes gulir { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 860px) { .hero__gulir { display: none; } }

/* ======================== PITA BERJALAN ========================
   Miring seperti pita judul anime, menutup batas bawah hero. */
.marquee {
  position: relative;
  z-index: 3;
  margin: -34px -2vw 0;
  padding: 16px 0;
  background: var(--grad-accent);
  border-block: 1px solid rgba(var(--emas-rgb), 0.6);
  transform: rotate(-1.6deg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.marquee__jalur { display: flex; width: max-content; animation: jalan 38s linear infinite; }
.marquee__isi { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.marquee__isi span {
  font-family: var(--f-anime);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--teks-isian);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.marquee__isi i { font-style: normal; color: var(--emas-muda); font-size: 1rem; }
@keyframes jalan { to { transform: translateX(-50%); } }

/* ======================== BAGIAN ======================== */
.section--gelap {
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--surface-2) 60%, transparent) 30%, color-mix(in srgb, var(--surface-2) 60%, transparent) 70%, transparent 100%);
  position: relative;
}
.section--gelap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 44px;
  background: var(--ombak) 0 0 / 44px 22px, var(--ombak) 22px 11px / 44px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: 0.8;
  pointer-events: none;
}

/* Perkenalan singkat di beranda */
.intro__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.intro__teks { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.intro__lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.8; }
@media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; } }

/* Statistik */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat-grid--pita { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat {
  padding: 24px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 -3px 0 var(--merah);
}
.stat:nth-child(even) { box-shadow: inset 0 -3px 0 var(--emas); }
.stat__num { font-family: var(--f-anime); font-weight: 400; color: var(--teks-kuat); letter-spacing: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.stat__num em { font-style: normal; color: var(--merah); }
.stat__label { color: var(--muted); }
.stat-grid--ringkas .stat { padding: 18px; }
.stat-grid--ringkas .stat__num { font-size: 2.1rem; }

/* ======================== KARTU LAYANAN ======================== */
/* Ambang 220px: lima layanan muat sebaris di layar lebar, alih-alih 4 + 1
   yang meninggalkan satu kartu sendirian di baris kedua. */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 100% 0%, rgba(var(--merah-rgb), 0.28), transparent 55%);
  opacity: 0;
  transition: opacity var(--t);
}
.svc-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--grad-garis);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.svc-card:hover { transform: translateY(-6px); border-color: var(--line-3); box-shadow: var(--shadow-lg); }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card__no {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--f-anime);
  font-size: 2.6rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--emas-rgb), 0.3);
}
.svc-card__ikon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--grad-accent);
  color: var(--teks-isian);
  box-shadow: var(--nyala);
  transform: rotate(-4deg);
}
.svc-card__ikon svg { width: 26px; height: 26px; }
.svc-card__judul { font-size: var(--fs-lg); font-weight: 700; margin-top: 8px; }
.svc-card__teks { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; flex: 1; }
.svc-card__lanjut { display: inline-flex; align-items: center; gap: 6px; color: var(--emas-muda); font-size: var(--fs-sm); font-weight: 600; }
.svc-card__lanjut svg { width: 15px; height: 15px; transition: transform var(--t); }
.svc-card:hover .svc-card__lanjut svg { transform: translate(3px, -3px); }

/* ======================== KARTU PROYEK ======================== */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
/* Kartu besar di kiri setinggi semua kartu kecil di kanan. --baris diisi
   beranda.js sesuai jumlah proyek unggulan, supaya tidak ada kartu yang
   jatuh sendirian ke baris baru. */
.pf-grid--unggulan { grid-template-columns: 1.35fr 1fr; grid-auto-rows: minmax(230px, auto); }
.pf-grid--unggulan .pf-card { min-height: 230px; }
.pf-grid--unggulan .pf-card--besar { grid-row: span var(--baris, 2); }
@media (max-width: 860px) {
  .pf-grid--unggulan { grid-template-columns: minmax(0, 1fr); }
  .pf-grid--unggulan .pf-card--besar { grid-row: auto; }
}
.pf-card {
  position: relative;
  display: block;
  min-height: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pf-card--besar { min-height: 520px; }
.pf-card__media { position: absolute; inset: 0; z-index: -2; }
.pf-card__media img, .pf-card__media .img-ph {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 1s var(--ease-out), filter 0.6s;
}
/* Lapisan gelap ke merah: menyatukan foto apa pun dengan palet situs. */
.pf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 22%, rgba(var(--scrim-rgb), 0.6) 55%, rgba(var(--scrim-rgb), 0.95) 100%);
  transition: background var(--t);
}
/* Kartu pendek: teks memenuhi hampir seluruh tinggi, jadi sisi kiri digelapkan
   dan gambar dibiarkan terlihat di sisi kanan. */
.pf-grid--unggulan .pf-card:not(.pf-card--besar)::before {
  background:
    linear-gradient(90deg, rgba(var(--scrim-rgb), 0.94) 0%, rgba(var(--scrim-rgb), 0.72) 48%, rgba(var(--scrim-rgb), 0.1) 88%),
    linear-gradient(180deg, transparent 50%, rgba(var(--scrim-rgb), 0.7) 100%);
}
.pf-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, rgba(var(--merah-rgb), 0.45), transparent 60%);
  opacity: 0;
  transition: opacity var(--t);
}
.pf-card:hover .pf-card__media img { transform: scale(1.07); filter: saturate(1) contrast(1.05); }
.pf-card:hover::after { opacity: 1; }
.pf-card__isi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-card__meta { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
.pf-card__judul { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; color: #ffffff; line-height: 1.25; }
.pf-card--besar .pf-card__judul { font-size: var(--fs-xl); }
.pf-card__ringkas { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; max-width: 52ch; }
.pf-card__panah {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--scrim-rgb), 0.7);
  border: 1px solid var(--line-3);
  color: #ffffff;
  transition: background var(--t), transform var(--t) var(--ease-back);
}
.pf-card__panah svg { width: 18px; height: 18px; }
.pf-card:hover .pf-card__panah { background: var(--accent-fill); transform: rotate(45deg); }

/* ======================== ALUR (BERANDA) ======================== */
.alur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: alur; }
@media (max-width: 960px) { .alur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .alur { grid-template-columns: minmax(0, 1fr); } }
.alur__tahap {
  position: relative;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alur__no {
  font-family: var(--f-anime);
  font-size: 3rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--aksen-rgb), 0.55);
}
.alur__ikon { position: absolute; top: 26px; right: 26px; color: var(--emas); }
.alur__ikon svg { width: 26px; height: 26px; }
.alur__tahap h3 { font-size: var(--fs-lg); font-weight: 700; }
.alur__durasi { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.68rem; color: var(--emas-muda); }
.alur__durasi svg { width: 13px; height: 13px; }
.alur__tahap p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

/* ======================== LOGO KLIEN ======================== */
.logo-pita { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-pita__jalur { display: flex; width: max-content; animation: jalan 45s linear infinite; }
.logo-pita:hover .logo-pita__jalur { animation-play-state: paused; }
.logo-pita__isi { display: flex; align-items: center; gap: 24px; padding-right: 24px; }
.logo-pita__logo {
  display: grid;
  place-items: center;
  width: 200px; height: 92px;
  padding: 18px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(var(--emas-rgb), 0.03);
  color: var(--text-2);
  font-weight: 700;
}
/* Logo apa pun dijadikan putih seragam supaya dinding logonya rapi.
   Foto dokumentasi (.logo-foto) dikecualikan; ia tampil berwarna. */
.logo-pita__logo img:not(.logo-foto), .logo-kartu img:not(.logo-foto) {
  max-width: 100%; max-height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity var(--t);
}
.logo-pita__logo:hover img { opacity: 1; }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.logo-kartu {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 150px;
  padding: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  text-align: center;
  transition: border-color var(--t), transform var(--t) var(--ease-out);
}
a.logo-kartu:hover { border-color: var(--emas); transform: translateY(-4px); }
.logo-kartu:hover img { opacity: 1; }
.logo-kartu__nama { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); }

/* Foto dokumentasi bersama klien mengisi bingkainya, tidak dipadatkan
   ke tinggi logo 54px. */
.logo-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo-pita__logo--foto { padding: 0; overflow: hidden; }
.logo-kartu--foto { place-items: stretch; padding: 12px 12px 18px; }
.logo-kartu--foto .logo-foto { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); }
/* Cloudinary sudah memberi isian sesuai bingkai; contain menjaga gambar di
   luar Cloudinary tetap utuh. */
.logo-utuh { object-fit: contain; }

/* ======================== TESTIMONI ======================== */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.testi-card__kutip { color: var(--merah); }
.testi-card__kutip svg { width: 30px; height: 30px; }
.testi-card blockquote { font-size: var(--fs-base); line-height: 1.8; color: var(--text); flex: 1; }
.testi-card figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.testi-card__foto { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--emas); }
.testi-card__foto img, .testi-card__foto .img-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.testi-card b { display: block; color: var(--text); font-size: var(--fs-sm); }
.testi-card small { color: var(--dim); font-size: var(--fs-xs); }

/* ======================== KARTU ARTIKEL ======================== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}
.post-card:hover { transform: translateY(-5px); border-color: var(--line-3); box-shadow: var(--shadow-lg); }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.post-card__media img, .post-card__media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__isi { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.post-card__meta { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--emas-muda); }
.post-card__judul { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.3; }
.post-card__ringkas { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; flex: 1; }
.post-card__penulis { font-size: var(--fs-xs); color: var(--dim); padding-top: 10px; border-top: 1px solid var(--line); }
.post-card--utama { display: grid; grid-template-columns: 1.3fr 1fr; margin-bottom: 26px; }
.post-card--utama .post-card__media { aspect-ratio: auto; min-height: 340px; }
.post-card--utama .post-card__isi { padding: clamp(24px, 4vw, 44px); justify-content: center; }
.post-card--utama .post-card__judul { font-size: var(--fs-xl); }
@media (max-width: 820px) { .post-card--utama { grid-template-columns: 1fr; } .post-card--utama .post-card__media { min-height: 220px; } }

/* ======================== PITA AJAKAN ======================== */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(34px, 6vw, 70px);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(120deg, var(--sorot), var(--bg)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  z-index: -1;
  background: var(--ombak) 0 0 / 44px 22px, var(--ombak) 22px 11px / 44px 22px;
  -webkit-mask-image: linear-gradient(transparent, #000);
          mask-image: linear-gradient(transparent, #000);
}
.cta-band__mentari { right: -70px; top: 50%; width: 300px; transform: translateY(-50%); z-index: -1; opacity: 0.9; }
.cta-band__isi { max-width: 640px; position: relative; }
.cta-band h2 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.cta-band p { margin-top: 14px; color: var(--text-2); font-size: var(--fs-lg); }
.cta-band .btn { position: relative; }
@media (max-width: 700px) { .cta-band__mentari { width: 200px; right: -90px; opacity: 0.45; } }

/* ======================== KEPALA HALAMAN ======================== */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 56px) 0 clamp(120px, 16vh, 170px);
  background:
    radial-gradient(ellipse 60% 70% at 85% 100%, rgba(var(--pendar-rgb), 0.38), transparent 70%),
    linear-gradient(180deg, var(--langit-1) 0%, var(--langit-2) 50%, var(--langit-3) 100%);
}
.page-hero__latar { position: absolute; inset: 0; z-index: -1; }
.page-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero--foto .page-hero__latar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--tirai-rgb), 0.7), rgba(var(--tirai-rgb), 0.86));
}
/* Layar lebar: foto menempati sisi kanan dan memudar ke kiri, sehingga judul
   berdiri di atas latar gelap dan fotonya tetap terlihat utuh. */
@media (min-width: 900px) {
  .page-hero--foto .page-hero__foto {
    left: auto;
    width: 64%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
            mask-image: linear-gradient(90deg, transparent, #000 40%);
  }
  .page-hero--foto .page-hero__latar::after {
    background: linear-gradient(90deg, rgba(var(--tirai-rgb), 0.7), rgba(var(--tirai-rgb), 0.15) 60%, color-mix(in srgb, var(--accent-fill) 10%, transparent));
  }
}
.page-hero__kota { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 18vh, 180px); z-index: 1; }
.page-hero__jp {
  position: absolute;
  right: -0.05em;
  bottom: clamp(70px, 12vh, 130px);
  z-index: 0;
  font-family: var(--f-anime);
  font-size: clamp(4.5rem, 2rem + 11vw, 12rem);
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(var(--emas-muda-rgb), 0.2), rgba(var(--pendar-rgb), 0.08));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.page-hero__isi { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.page-hero__judul {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero__lead { max-width: 60ch; font-size: var(--fs-lg); color: var(--text-2); line-height: 1.75; }
.crumb { color: var(--dim); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--emas-muda); }
.crumb__kini { color: var(--text-2); max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb > * + *::before { color: var(--faint); }

/* ======================== PROSA (ISI KAYA) ======================== */
.prose { color: var(--text-2); font-size: var(--fs-base); line-height: 1.85; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 1.8em; font-weight: 700; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.5em; font-weight: 700; }
.prose a { color: var(--merah-muda); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6em; }
.prose ul li::before { content: ''; position: absolute; left: 0.2em; top: 0.75em; width: 7px; height: 7px; background: var(--merah); transform: rotate(45deg); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--emas); font-weight: 700; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { border-left: 3px solid var(--emas); padding: 4px 0 4px 20px; color: var(--text); font-style: italic; }
.prose img { border-radius: var(--r); margin-block: 1.4em; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); }
.prose code { font-family: var(--f-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); }
.prose--tengah { margin-inline: auto; }

/* ======================== DAFTAR CENTANG ======================== */
.cek-list { display: grid; gap: 12px; }
.cek-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.cek-list svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  padding: 3px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(var(--merah-rgb), 0.25);
  color: var(--merah-muda);
}

/* ======================== TENTANG ======================== */
.about-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; } }
.about-split__foto { position: relative; padding: 0 0 60px 0; }
.about-split__utama { display: block; aspect-ratio: 4 / 5; width: 82%; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.about-split__utama img, .about-split__kedua img, .about-split__utama .img-ph { width: 100%; height: 100%; object-fit: cover; }
.about-split__kedua {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--emas), var(--shadow-lg);
}
.about-split__cap {
  position: absolute;
  left: -10px; top: 24px;
  writing-mode: vertical-rl;
  font-family: var(--f-anime);
  font-size: 2.2rem;
  color: var(--teks-isian);
  padding: 14px 8px;
  background: var(--grad-accent);
  border-radius: 10px;
  box-shadow: var(--nyala);
}
.about-lead { font-size: var(--fs-lg); line-height: 1.8; color: var(--text); }
.about-story { color: var(--muted); line-height: 1.85; }

.vm-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
@media (max-width: 860px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card { padding: clamp(26px, 4vw, 44px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); }
.vm-card--visi {
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--merah-rgb), 0.35), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}
.vm-card--visi p { font-family: var(--f-display); font-size: var(--fs-xl); line-height: 1.35; color: var(--text); font-weight: 500; }
.vm-card__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--emas-muda); }
.vm-card__label svg { width: 18px; height: 18px; color: var(--merah); }
.vm-list { display: grid; gap: 16px; counter-reset: misi; }
.vm-list li { counter-increment: misi; display: grid; grid-template-columns: 38px 1fr; gap: 12px; color: var(--text-2); line-height: 1.7; }
.vm-list li::before { content: counter(misi, decimal-leading-zero); font-family: var(--f-anime); color: var(--merah); font-size: 1.1rem; }

.nilai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.nilai { position: relative; padding: 28px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.nilai__no { position: absolute; top: 20px; right: 22px; font-family: var(--f-mono); font-size: 0.7rem; color: var(--dim); }
.nilai__ikon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line-3); color: var(--emas); margin-bottom: 18px; }
.nilai__ikon svg { width: 24px; height: 24px; }
.nilai h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.nilai p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

.timeline { position: relative; display: grid; gap: 26px; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--merah), var(--emas), transparent); }
.tl-item { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -34px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--merah);
  box-shadow: 0 0 12px rgba(var(--aksen-rgb), 0.6);
}
.tl-item__tahun { font-family: var(--f-anime); color: var(--emas-muda); font-size: 1.05rem; padding-top: 2px; }
.tl-item h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.tl-item__tempat { display: block; font-size: var(--fs-xs); color: var(--merah-muda); margin-bottom: 6px; }
.tl-item p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
.timeline--rapat .tl-item { grid-template-columns: 1fr; gap: 6px; }
.timeline--rapat .tl-item__tahun { font-family: var(--f-mono); font-size: 0.72rem; }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 6px; } }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.team-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  isolation: isolate;
}
.team-card__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.team-card__foto img, .team-card__foto .img-ph { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); transition: transform 0.9s var(--ease-out), filter 0.5s; }
.team-card:hover .team-card__foto img { transform: scale(1.05); filter: grayscale(0); }
.team-card__isi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 22px 22px;
  display: grid;
  gap: 4px;
  background: linear-gradient(transparent, rgba(var(--scrim-rgb), 0.95) 45%);
}
.team-card__nama { font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 700; color: #ffffff; }
.team-card__peran { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
.team-card__bio { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; margin-top: 6px; }
.team-card__go { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--scrim-rgb), 0.7); border: 1px solid var(--line-3); color: #ffffff; transition: background var(--t), transform var(--t) var(--ease-back); }
.team-card:hover .team-card__go { background: var(--accent-fill); transform: rotate(45deg); }

/* ======================== LAYANAN ======================== */
.svc-rows { display: grid; gap: clamp(60px, 9vw, 120px); }
.svc-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.svc-row--balik .svc-row__media { order: 2; }
@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr; } .svc-row--balik .svc-row__media { order: 0; } }
.svc-row__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
}
.svc-row__media img, .svc-row__media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.svc-row__media:hover img { transform: scale(1.05); }
.svc-row__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(var(--merah-rgb), 0.35), transparent 55%); }
.svc-row__no {
  position: absolute;
  left: 20px; bottom: 6px;
  z-index: 1;
  font-family: var(--f-anime);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  color: #ffffff;
  text-shadow: 4px 4px 0 var(--bayang-judul);
}
.svc-row__isi { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.svc-row__ikon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--grad-accent); color: var(--teks-isian); box-shadow: var(--nyala); }
.svc-row__ikon svg { width: 26px; height: 26px; }
.svc-row__judul { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.svc-row__judul a:hover { color: var(--merah-muda); }
.svc-row__tagline { color: var(--emas-muda); font-size: var(--fs-lg); }
.svc-row__desc { color: var(--muted); line-height: 1.8; }
.svc-row .cek-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
@media (max-width: 560px) { .svc-row .cek-list { grid-template-columns: 1fr; } }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-samping { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .dua-kolom { grid-template-columns: 1fr; } }
.kotak-daftar { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.kotak-daftar h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 20px; }
.kotak-daftar h2 svg { width: 20px; height: 20px; color: var(--emas); }
.kartu-ajak {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, var(--sorot), var(--surface)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg);
}
.kartu-ajak__ikon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--grad-accent); color: var(--teks-isian); }
.kartu-ajak__ikon svg { width: 24px; height: 24px; }
.kartu-ajak h3 { font-size: var(--fs-lg); font-weight: 700; }
.kartu-ajak p { color: var(--muted); font-size: var(--fs-sm); }
.kartu-lain { display: grid; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.kartu-lain__judul { padding: 10px 12px; font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); }
.kartu-lain a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); }
.kartu-lain a span { flex: 1; }
.kartu-lain a svg { width: 18px; height: 18px; color: var(--merah); flex-shrink: 0; }
.kartu-lain a svg:last-child { color: var(--dim); width: 15px; }
.kartu-lain a:hover { background: rgba(var(--emas-rgb), 0.06); color: var(--teks-kuat); }

.paket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: stretch; }
.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 28px 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface);
}
.paket .cek-list { flex: 1; margin-block: 10px 18px; }
.paket--sorot {
  border-color: transparent;
  background:
    linear-gradient(170deg, var(--sorot-kuat), var(--surface)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(var(--merah-rgb), 0.25);
  transform: translateY(-10px);
}
@media (max-width: 900px) { .paket--sorot { transform: none; } }
.paket__pita {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--grad-accent);
  color: var(--teks-isian);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--nyala);
}
.paket__pita svg { width: 13px; height: 13px; fill: var(--emas); stroke: var(--emas); }
.paket__nama { font-size: var(--fs-lg); font-weight: 700; }
.paket__catatan { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.paket__harga { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; color: var(--emas-muda); letter-spacing: -0.02em; }

/* ======================== GALERI & LIGHTBOX ======================== */
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.galeri__sel { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.galeri__sel img, .galeri__sel .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.galeri__sel:hover img { transform: scale(1.06); }
.galeri__putar { position: absolute; inset: 0; display: grid; place-items: center; color: #ffffff; background: rgba(0, 0, 0, 0.35); }
.galeri__putar svg { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--accent-fill); }
.lightbox__isi { display: grid; place-items: center; max-width: 100%; max-height: 100%; }
.lightbox__isi img, .lightbox__isi video { max-width: min(1400px, 92vw); max-height: 86vh; border-radius: var(--r); }

/* ======================== PORTFOLIO DETAIL ======================== */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-bottom: clamp(36px, 6vw, 64px);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.meta-bar div { padding: 20px 22px; background: var(--surface); }
.meta-bar dt { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.meta-bar dd { color: var(--text); font-weight: 600; }
.meta-bar a { display: inline-flex; align-items: center; gap: 6px; color: var(--merah-muda); }
.meta-bar a svg { width: 14px; height: 14px; }
.tag-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.proyek-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.proyek-nav > a:not(.proyek-nav__semua) {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  transition: border-color var(--t);
}
.proyek-nav > a:hover { border-color: var(--emas); }
.proyek-nav small { display: block; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); font-weight: 400; margin-bottom: 4px; }
.proyek-nav svg { width: 20px; height: 20px; color: var(--merah); flex-shrink: 0; }
.proyek-nav__lanjut { justify-content: flex-end; text-align: right; }
.proyek-nav__semua { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-3); color: var(--emas); }
@media (max-width: 700px) { .proyek-nav { grid-template-columns: 1fr; } .proyek-nav__semua { justify-self: center; } }

/* ======================== PROSES ======================== */
.geser-info { display: none; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); }
.geser-info svg { width: 14px; height: 14px; color: var(--merah); }
.proses-jalur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 18px;
  overflow-x: auto;
  padding: 10px 2px 26px;
  scroll-snap-type: x mandatory;
  counter-reset: tahap;
}
@media (min-width: 1100px) { .proses-jalur { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
@media (max-width: 1099px) { .geser-info { display: flex; } }
.proses-tahap {
  position: relative;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--merah-rgb), 0.18), transparent 55%),
    var(--surface);
}
.proses-tahap__no { font-size: clamp(3.5rem, 6vw, 5rem); -webkit-text-stroke: 1.2px rgba(var(--aksen-rgb), 0.6); font-family: var(--f-anime); }
.proses-tahap:hover .proses-tahap__no { -webkit-text-stroke-color: var(--emas); }
.proses-tahap__ikon { position: absolute; top: 30px; right: 28px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--grad-accent); color: var(--teks-isian); box-shadow: var(--nyala); }
.proses-tahap__ikon svg { width: 24px; height: 24px; }
.proses-tahap h2 { font-size: var(--fs-xl); font-weight: 700; }
.proses-tahap__durasi { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.7rem; color: var(--emas-muda); }
.proses-tahap__durasi svg { width: 14px; height: 14px; }
.proses-tahap p { color: var(--muted); line-height: 1.75; }

.respon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; counter-reset: respon; }
.respon { position: relative; padding: 30px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.respon__no { position: absolute; top: 22px; right: 24px; font-family: var(--f-anime); font-size: 2.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--emas-rgb), 0.4); }
.respon__ikon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line-3); color: var(--merah); margin-bottom: 6px; }
.respon__ikon svg { width: 22px; height: 22px; }
.respon h3 { font-size: var(--fs-lg); font-weight: 700; }
.respon__waktu { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 0.68rem; color: var(--emas-muda); }
.respon__waktu svg { width: 13px; height: 13px; }
.respon p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

/* ======================== ARTIKEL ======================== */
.artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.artikel__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.artikel__meta svg { width: 16px; height: 16px; color: var(--merah); }
.artikel__penulis { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.artikel__penulis img, .artikel__penulis .img-ph { width: 44px; height: 44px; min-height: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--emas); }
.artikel__penulis b { display: block; color: var(--text); }
.artikel__penulis small { color: var(--dim); font-size: var(--fs-xs); }
.artikel__sampul { margin-bottom: 40px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); }
.artikel__sampul img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bagikan { display: flex; align-items: center; gap: 10px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.bagikan span { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); margin-right: 8px; }
.bagikan a, .bagikan button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text-2); transition: all var(--t-fast); }
.bagikan a:hover, .bagikan button:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--teks-isian); }
.bagikan svg { width: 17px; height: 17px; }

/* ======================== KONTAK ======================== */
.kontak-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 960px) { .kontak-grid { grid-template-columns: 1fr; } }
.kontak-form {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, var(--surface-2), var(--bg)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg);
}
.kontak-form h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 26px; }
.kontak-form .f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kontak-form .f-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .kontak-form .f-grid { grid-template-columns: 1fr; } }
.kontak-form .field__err { display: block; margin: 16px 0; }
.input, .textarea, .select { background: rgba(var(--dasar-rgb), 0.75); border-color: var(--line-2); color: var(--text); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-3); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--merah); background: rgba(var(--dasar-rgb), 0.95); box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), 0.18); }
.select option { background: var(--surface-2); }
.field__label { color: var(--text-2); }
.field__label span { color: var(--merah); }
.kontak-sukses { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--r); background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.kontak-sukses__ikon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--bg); flex-shrink: 0; }
.kontak-sukses__ikon svg { width: 24px; height: 24px; }
.kontak-sukses p { color: var(--text); }
.kontak-info { display: grid; gap: 20px; }
.kontak-wa {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #128c4a, #0d6b39);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(18, 140, 74, 0.3);
  transition: transform var(--t) var(--ease-out);
}
.kontak-wa:hover { transform: translateY(-3px); }
.kontak-wa svg { width: 28px; height: 28px; flex-shrink: 0; }
.kontak-wa span { flex: 1; }
.kontak-wa b { display: block; font-size: var(--fs-lg); }
.kontak-wa small { opacity: 0.9; }
.kontak-daftar { display: grid; gap: 4px; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.kontak-daftar li { display: flex; gap: 14px; padding: 14px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.kontak-daftar li > svg { width: 20px; height: 20px; color: var(--merah); flex-shrink: 0; margin-top: 2px; }
.kontak-daftar small { display: block; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim); }
.kontak-daftar a:hover { color: var(--emas-muda); }
.kontak-peta { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line-2); border-radius: var(--r-lg); filter: grayscale(0.4) invert(0.9) hue-rotate(180deg); }
.prep-box { padding: clamp(26px, 4vw, 44px); border-radius: var(--r-xl); border: 1px dashed var(--line-3); background: rgba(var(--emas-rgb), 0.03); }
.prep-box h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xl); font-weight: 700; margin-bottom: 22px; }
.prep-box h2 svg { width: 24px; height: 24px; color: var(--emas); }
.prep-box__note { margin-top: 20px; color: var(--dim); font-size: var(--fs-sm); }

/* ======================== AKORDION ======================== */
.acc { display: grid; gap: 12px; }
.acc__item { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t); }
.acc__item[open] { border-color: var(--line-3); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; color: var(--text); font-weight: 600; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--emas); flex-shrink: 0; transition: transform var(--t) var(--ease-out), background var(--t); }
.acc__item[open] .acc__ico { transform: rotate(45deg); background: var(--accent-fill); color: var(--teks-isian); border-color: transparent; }
.acc__body { padding: 0 24px 24px; color: var(--muted); line-height: 1.8; }

/* ======================== PROFIL TIM ======================== */
.profil__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .profil__grid { grid-template-columns: 1fr; } }
.profil__kartu {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 18px;
  padding: 18px 18px 24px;
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, var(--surface-2), var(--bg)) padding-box,
    var(--grad-tepi) border-box;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 960px) { .profil__kartu { position: static; } }
.profil__foto { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; }
.profil__foto img, .profil__foto .img-ph { width: 100%; height: 100%; object-fit: cover; }
.profil__nama { padding: 0 6px; }
.profil__nama b { display: block; font-family: var(--f-display); font-size: var(--fs-xl); color: var(--text); }
.profil__nama span { color: var(--emas-muda); font-size: var(--fs-sm); }
.profil__kartu .social { padding: 0 6px; }
.profil__detail { display: grid; gap: 1px; border-radius: var(--r); overflow: hidden; background: var(--line); }
.profil__detail div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 14px; background: var(--surface); }
.profil__detail dt { font-size: var(--fs-xs); color: var(--dim); }
.profil__detail dd { font-size: var(--fs-xs); color: var(--text-2); word-break: break-word; }
.profil__judul { margin: 10px 0 18px; }
.profil__sub { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 20px; }
.profil__sub svg { width: 20px; height: 20px; color: var(--merah); }
.skill-list { display: grid; gap: 18px; }
.skill { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.skill__nama { color: var(--text-2); font-size: var(--fs-sm); }
.skill__angka { font-family: var(--f-mono); font-size: 0.72rem; color: var(--emas-muda); }
.skill__bar { grid-column: 1 / -1; height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.skill__bar span { display: block; height: 100%; width: var(--n); border-radius: inherit; background: var(--grad-garis); background-size: 160% 100%; box-shadow: 0 0 14px rgba(var(--aksen-rgb), 0.4); }
.bidang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.bidang { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; }
.bidang__ikon { color: var(--emas); }
.bidang__ikon svg { width: 24px; height: 24px; }
.bidang b { color: var(--text); }
.bidang p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
.tab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.karya-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.karya { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.karya__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.karya__media img, .karya__media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
a.karya:hover .karya__media img { transform: scale(1.06); }
.karya__isi { display: grid; gap: 4px; padding: 18px 20px; }
.karya__isi small { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--emas-muda); }
.karya__isi b { color: var(--text); }
.karya > svg { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgba(var(--scrim-rgb), 0.75); color: #ffffff; }

/* ======================== FOOTER ======================== */
.site-footer {
  border-top-color: var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-fill) 7%, transparent));
}
.site-footer__ombak {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: var(--ombak) 0 0 / 44px 22px, var(--ombak) 22px 11px / 44px 22px;
  -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          mask-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.site-footer .container { position: relative; }
.footer__col h3 { color: var(--emas-muda); }
.footer__col a, .footer__info { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--muted); padding: 6px 0; }
.footer__col a:hover { color: var(--teks-kuat); }
.footer__col svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--merah); }
.footer__blurb { color: var(--muted); }
.footer__wordmark span {
  font-family: var(--f-anime);
  font-weight: 400;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, rgba(var(--emas-muda-rgb), 0.16), rgba(var(--pendar-rgb), 0.04));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.footer__bottom { border-top-color: var(--line); color: var(--dim); }
.footer__jp i { font-style: normal; color: var(--merah-muda); }
.social a { border-color: var(--line-2); color: var(--text-2); }
.social a:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--teks-isian); }

/* ======================== TOMBOL MENGAMBANG ========================
   WhatsApp selalu terjangkau; tombol ke atas muncul setelah menggulir jauh. */
.fab {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 80;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.fab__wa, .fab__atas {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t) var(--ease-back), opacity var(--t) var(--ease);
}
.fab__wa { background: #128c4a; color: #ffffff; }
.fab__wa svg { width: 24px; height: 24px; }
.fab__wa:hover { transform: scale(1.08); }
.fab__atas {
  width: 44px; height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  color: var(--emas-muda);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.fab__atas.is-tampil { opacity: 1; transform: none; pointer-events: auto; }
.fab__atas svg { width: 20px; height: 20px; transform: rotate(180deg); }
body.is-locked .fab { display: none; }
body:has(.pita-pratinjau) .fab { bottom: 60px; }

/* ======================== LAYAR SEMPIT ========================
   Rata kanan-kiri bawaan base.css baik di kolom lebar, tapi di ponsel
   memunculkan celah antarkata yang menganga. */
@media (max-width: 640px) {
  .prose p, .about-lead, .about-story, .acc__body p, .prep-box__note { text-align: left; hyphens: manual; }
  .section { padding-block: clamp(56px, 9vh, 90px); }
  .sec-head { margin-bottom: 30px; }
  .cta-band { padding: 30px 24px; }
  .cta-band .btn { width: 100%; }
}

/* ======================== LAIN-LAIN ======================== */
.empty { border-color: var(--line-2); color: var(--muted); }
.empty svg { color: var(--faint); }
.empty h3 { color: var(--text); }
.skip-link { background: var(--surface-2); color: var(--text); }
.pita-pratinjau { background: var(--grad-accent); color: var(--teks-isian); }
.toast { background: var(--surface-2); color: var(--text); }

/* Halaman 404 */
.galat {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 40px) var(--gut) 200px;
}
.galat__angka {
  font-family: var(--f-anime);
  font-size: clamp(7rem, 26vw, 18rem);
  line-height: 0.9;
  background: var(--grad-emas);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(6px 6px 0 var(--bayang-judul));
}
.galat__jp { font-family: var(--f-anime); font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--merah-muda); margin: 10px 0 6px; }
.galat p { color: var(--muted); max-width: 46ch; margin: 0 auto 30px; }

/* ======================== GERAK MINIMAL ======================== */
@media (prefers-reduced-motion: reduce) {
  .langit__kelopak, .hero__gulir { display: none; }
  .langit__bintang, .marquee__jalur, .logo-pita__jalur, .hero__stat-kartu,
  .hero__kicker, .hero__baris, .hero__sub, .hero__aksi { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}