/* ==========================================================================
   COMPONENTS: preloader, header, footer, tombol, kartu, form, dan overlay.
   ========================================================================== */

/* ======================== PRELOADER ========================
   Sengaja dibuat ringkas: satu wordmark kecil dan satu garis tipis yang
   bergerak sendiri. Versi sebelumnya menampilkan persentase, tapi angkanya
   dikarang (bertambah acak sampai 92 lalu melompat ke 100) sehingga tidak
   pernah mewakili kemajuan apa pun. Garis tak tentu lebih jujur, lebih tenang,
   dan tidak memerlukan timer JavaScript sama sekali. */
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preload);
  background: var(--bg);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
.pl-mark {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  font-weight: 700;
  /* Tanpa text-transform: nama merek ditulis apa adanya supaya kapitalisasinya
     tetap seperti yang dimaksud. */
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.pl-bar {
  position: relative;
  width: 120px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
/* Garis tak tentu: hanya transform yang dianimasikan, jadi seluruhnya
   ditangani compositor dan tidak memicu layout maupun paint ulang. */
.pl-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  border-radius: inherit;
  background: var(--accent-2);
  animation: plSlide 1.15s var(--ease-in-out) infinite;
}
@keyframes plSlide {
  from { transform: translateX(-105%); }
  to   { transform: translateX(370%); }
}

/* ======================== INDIKATOR SCROLL ======================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-accent);
  background-size: 200% 100%;
  z-index: var(--z-header);
  pointer-events: none;
}

/* ======================== HEADER ======================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  transition: background var(--t) var(--ease),
              border-color var(--t), transform 0.45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* CATATAN KINERJA: backdrop-filter dibuang dari elemen-elemen yang selalu
   tampak selama halaman digulir. Setiap frame, compositor harus membaca ulang
   latar di belakangnya lalu memburamkannya; pada beranda biayanya terukur
   sebesar 42,5 menjadi 59,6 fps dan jank 39,4 menjadi 0,7 persen. Karena situs
   ini berlatar hampir hitam, memburamkan latar hitam menghasilkan hitam juga,
   jadi kepekatan latar dinaikkan sedikit dan hasilnya nyaris sama.
   Overlay sementara (drawer, lightbox, toast) tetap memakai blur: keduanya
   diukur tidak menambah biaya karena hanya tampil sesaat. */
.site-header.is-stuck {
  /* Pekat penuh, bukan setengah tembus. Blur dulu bertugas menghapus isi yang
     lewat di belakang header; tanpa blur, sisa 6 persen transparansi membuat
     teks di baliknya membayang samar. Latar pekat menyembunyikannya lebih
     bersih daripada blur, dan tidak berbiaya sama sekali. */
  background: #ffffff;
  border-bottom-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Logo --- */
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--grad-accent);
  background-size: 200% 100%;
  color: var(--text);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: var(--ls-wider);
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
  /* Nama merek yang panjang punya huruf turun (g, y) yang hampir menyentuh
     baris ini karena line-height blok merek sangat rapat. */
  margin-top: 3px;
}
@media (max-width: 420px) { .brand__text { display: none; } }

/* --- Navigasi desktop --- */
.nav { display: flex; align-items: center; gap: 4px; }
/* Ambang 1340, bukan 1040. Isi header adalah merek (263px) + navigasi delapan
   menu (776px) + tombol ajakan + jarak antar bagian, seluruhnya sekitar
   1.290 piksel. Dengan ambang lama, navigasi sudah muncul di 1041px padahal
   belum muat, sehingga .site-header__inner meluap sampai 226 piksel dan
   tombol ajakan beserta burger terpotong di tepi kanan. Di bawah ambang ini
   menu berpindah ke laci, yang muat berapa pun lebarnya. */
@media (max-width: 1340px) { .nav { display: none; } }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--text); background: var(--glass); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: 1px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  border-radius: var(--r-full);
  background: var(--grad-accent);
  background-size: 200% 100%;
}
.nav__caret { transition: transform var(--t-fast) var(--ease); opacity: 0.6; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* --- Dropdown Layanan --- */
.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 300px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility var(--t);
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__drop a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__drop a:hover { background: var(--glass-2); color: var(--text); }
.nav__drop a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent-3); }
.nav__drop a small { display: block; color: var(--dim); font-size: 0.72rem; line-height: 1.4; }

/* --- Tombol hamburger --- */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  place-items: center;
  gap: 5px;
  background: var(--glass);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 1340px) { .burger { display: flex; } }
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Drawer mobile --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gut) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.45s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: var(--ls-wide);
}
.drawer__link:hover { color: var(--accent-3); }
.drawer__sub { padding-left: 18px; }
.drawer__sub a {
  display: block;
  padding: 11px 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.drawer__sub a:hover { color: var(--accent-3); }
.drawer__foot { margin-top: auto; padding-top: 32px; }

/* ======================== TOMBOL ======================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease-back), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn[disabled], .btn.is-busy { opacity: 0.55; pointer-events: none; }

/* Primer: permukaan krom terang dengan teks gelap. */
/* CTA utama di header. Sebelumnya memakai --grad-chrome, gradien logam sembilan
   hentian yang dirancang untuk judul besar. Dipakai sebagai isian tombol kecil,
   pita gelapnya (#6b5008 dan #8a6710) menjatuhkan kontras label sampai 2,6:1
   dan 3,8:1, jauh di bawah ambang 4,5:1, sehingga tulisannya tampak berkabut.
   Diganti emas rata: kontrasnya menjadi 12,1:1 dan tepinya tegas. */
.btn--primary {
  background: var(--accent-fill);
  color: var(--text);
  border: 1px solid var(--accent-2);
  /* Bayangan netral, bukan kilau emas. Di atas hitam kilau berwarna terbaca
     sebagai cahaya; di atas putih ia terbaca sebagai noda kuning di sekeliling
     tombol. Bayangan abu memberi ketinggian tanpa mengotori latar. */
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.btn--primary:hover {
  background: var(--accent-fill-2);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

/* Aksen: isian gradien perak, dipakai untuk CTA utama. */
.btn--accent {
  background: var(--grad-accent);
  background-size: 220% 100%;
  color: var(--text);
  border: 0;
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Garis tepi: netral untuk aksi sekunder. */
.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { background: var(--glass-2); border-color: var(--line-3); transform: translateY(-2px); }

.btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn--lg { padding: 18px 34px; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 44px; height: 44px; border-radius: 50%; }

/* Tautan teks dengan garis bawah yang tumbuh dari kiri. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  position: relative;
  padding-bottom: 3px;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--grad-accent);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ======================== BADGE & PILL ======================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--glass);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}
.badge--accent { border-color: transparent; background: var(--accent-1-soft); color: var(--accent-1); }
/* Latar lembutnya bernuansa emas, jadi teks accent-3 di atasnya turun ke
   4,41:1, tepat di bawah ambang. Dipakai accent-1 yang lebih pekat. */
.badge--soft { border-color: transparent; background: var(--accent-3-soft); color: var(--accent-1); }
.badge--muted { border-color: transparent; background: var(--accent-4-soft); color: var(--accent-4); }
.badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: pulseGlow 2.2s var(--ease-in-out) infinite;
}

/* Filter chip untuk portfolio & insight. */
.chip {
  padding: 9px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }

/* ======================== KARTU ======================== */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.card__body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.card__title { font-size: var(--fs-lg); color: var(--text); }
.card__desc { font-size: var(--fs-base); color: var(--muted); line-height: 1.7; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-3); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease-out), filter 0.6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.07); }
.card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 4px; margin-top: auto;
}

/* Ikon layanan: kotak dengan cahaya aksen di belakangnya. */
.icon-box {
  position: relative;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--text);
  flex-shrink: 0;
  transition: all var(--t) var(--ease);
}
.icon-box svg { width: 24px; height: 24px; }
.icon-box::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: inherit;
  background: var(--grad-accent);
  filter: blur(22px);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t) var(--ease);
}
.card:hover .icon-box { border-color: transparent; background: var(--grad-accent); color: var(--text); }
.card:hover .icon-box::after { opacity: 0.55; }

/* Nomor besar semi-transparan (untuk langkah proses & daftar). */
.big-num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-3);
  transition: color var(--t) var(--ease), -webkit-text-stroke-color var(--t) var(--ease);
}
.card:hover .big-num, .is-active .big-num { -webkit-text-stroke-color: var(--accent-3); }

/* ======================== STAT ======================== */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}
.stat__label {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* ======================== FORM ======================== */
.field { display: flex; flex-direction: column; gap: 9px; }
.field__label {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.field__label span { color: var(--accent-1); }
.input, .textarea, .select {
  width: 100%;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  /* Minimal 16px. Di bawah ukuran itu, Safari iOS otomatis memperbesar
     halaman begitu kolom disentuh, dan tata letak jadi meloncat. */
  font-size: max(16px, var(--fs-base));
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Placeholder tetap teks yang harus terbaca, jadi memakai --dim (4,7:1 di
   atas latar kolom) dan bukan --faint yang hanya untuk hiasan. */
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-2);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}
.textarea { resize: vertical; min-height: 140px; line-height: 1.65; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a8a94' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}
.select option { background: var(--surface-2); color: var(--text); }
.field__err { font-size: var(--fs-xs); color: var(--danger); min-height: 1em; }
.field.has-err .input, .field.has-err .textarea, .field.has-err .select { border-color: var(--danger); }

/* ======================== FOOTER ======================== */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(212, 160, 23, 0.04));
  padding-top: clamp(56px, 8vh, 100px);
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
/* Judul kolom footer memakai h3, bukan h5. Tingkat heading tidak boleh
   melompat: halaman berakhir dengan h2, jadi h5 di footer membuat pembaca
   layar melewati dua tingkat sekaligus. Ukurannya tetap sama, hanya
   tingkatnya yang dibetulkan. */
.footer__col h3 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}
.footer__col a, .footer__col li {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__col a:hover { color: var(--text); transform: translateX(4px); }

/* Logo di footer harus tetap sejajar dengan nama brand. Tanpa aturan ini,
   `.footer__col a { display: block }` di atas menimpa inline-flex milik
   .brand sehingga logo dan teksnya menumpuk vertikal. */
.site-footer .brand { display: inline-flex; align-items: center; gap: 12px; }
.site-footer .brand:hover { transform: none; }
.footer__blurb { font-size: var(--fs-base); color: var(--muted); max-width: 42ch; margin: 18px 0 22px; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--dim);
}
/* Nama besar sebagai elemen dekoratif di dasar footer.
   Ukuran hurufnya dihitung shell.js agar tepat selebar kontainer. Nilai
   clamp di bawah hanya cadangan bila JavaScript belum sempat berjalan. */
.footer__wordmark {
  text-align: center;
  user-select: none;
  padding-bottom: 10px;
  overflow: hidden;
}
.footer__wordmark span {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 9.2vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
}

/* Ikon sosial */
.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: all var(--t) var(--ease);
  padding: 0;
}
.social a:hover { color: var(--bg); background: var(--text); border-color: var(--text); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; }

/* ======================== OVERLAY: TOAST & LIGHTBOX ======================== */
.toast-wrap {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  background: #ffffff;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent-3);
  color: var(--text);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow);
  animation: toastIn 0.45s var(--ease-back);
  max-width: min(360px, calc(100vw - 40px));
}
.toast--ok  { border-left-color: var(--accent-4); }
.toast--err { border-left-color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(50px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Backdrop lightbox sengaja tetap gelap meski temanya terang. Foto dilihat
   paling jelas di atas latar gelap, dan lapisan ini hanya muncul sesaat. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(13, 13, 18, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img, .lightbox video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  animation: lbIn 0.5s var(--ease-out);
}
@keyframes lbIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  /* Lapisan ini sengaja tetap gelap, jadi tombolnya TIDAK boleh ikut token
     halaman: --text, --line-2, dan --glass semuanya gelap sekarang, sehingga
     tombol tutup akan lenyap sama sekali di atas tirai dan orang terkurung di
     dalam lightbox. Warnanya ditulis terang secara eksplisit. */
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.lightbox__close:hover { background: #ffffff; color: #0d0d12; }
.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.lightbox__nav:hover { background: #ffffff; color: #0d0d12; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

/* ======================== KEADAAN & PEMUATAN ======================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  animation: skel 1.4s infinite;
}
@keyframes skel { to { transform: translateX(100%); } }
.skeleton--card { height: 320px; border-radius: var(--r-lg); }
.skeleton--line { height: 14px; margin-bottom: 10px; }
.skeleton--title { height: 30px; width: 62%; margin-bottom: 18px; }

.empty {
  padding: clamp(46px, 8vw, 96px) 24px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.empty svg { width: 46px; height: 46px; color: var(--faint); }
.empty h3 { color: var(--text-2); }
.empty p { font-size: var(--fs-base); max-width: 44ch; }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent-3);
  border-radius: 50%;
  animation: spinSlow 0.8s linear infinite;
}

/* ======================== BREADCRUMB & PAGINASI ======================== */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--dim);
}
/* Pemisah menempel pada item, bukan berdiri sendiri, supaya tidak pernah
   tertinggal menggantung di ujung baris saat remah navigasi membungkus. */
.crumb > * + *::before {
  content: '/';
  margin-right: 9px;
  color: var(--faint);
}
.crumb a { color: var(--muted); transition: color var(--t-fast); }
.crumb a:hover { color: var(--accent-2); }
.crumb__kini { color: var(--text-2); }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px; }
.pager button {
  min-width: 42px; height: 42px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: all var(--t-fast) var(--ease);
}
.pager button:hover:not([disabled]) { border-color: var(--line-3); color: var(--text); }
.pager button.is-active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.pager button[disabled] { opacity: 0.32; cursor: not-allowed; }

/* ======================== KENYAMANAN SENTUH ========================
   Pada perangkat sentuh, tautan setinggi 19 sampai 27 piksel terlalu kecil
   untuk disentuh dengan tepat. Area sentuhnya diperbesar lewat padding,
   tanpa mengubah tampilan teksnya. */
@media (hover: none), (pointer: coarse) {
  .crumb a,
  .link-arrow,
  .footer__col a,
  .footer__col li {
    padding-block: 12px;
  }
  .crumb { gap: 6px 12px; }
  .social a { width: 46px; height: 46px; }
  /* Badge yang berupa tautan perlu bidang sentuh minimal 36 piksel. */
  a.badge { padding-block: 11px; }
}


/* Pita penanda mode pratinjau draf. Sengaja mencolok dan menempel di bawah
   layar supaya tidak ada yang mengira sedang melihat halaman yang sudah
   terbit. */
.pita-pratinjau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-toast);
  padding: 10px 16px;
  background: var(--accent-fill);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}