/* ==========================================================================
   NIGHTLESS — Global stylesheet
   Dipakai oleh semua halaman. Token di :root adalah satu-satunya tempat
   untuk mengubah warna, font, dan spacing seluruh situs.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Warna (dari Figma variables) */
  --white-100: #ffffff;
  --white-80: #f2f2f2;
  --white-60: #e5e5e5;
  --black-100: #000000;
  --black-80: #333333;
  --primary-100: #03132b;
  --primary-10: #f7faff;
  --blue-100: #00539b;
  --orange-100: #f8613b;
  --orange-20: #fa967c;
  --orange-deep: #923923;
  --grad-orange: linear-gradient(90deg, var(--orange-100) 0%, var(--orange-20) 100%);

  /* Tipografi */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Skala tipografi — fluid, mengecil sendiri di layar kecil */
  --fs-display: clamp(2.5rem, 1.33rem + 5.2vw, 4.6875rem); /* 40 → 75px */
  --fs-h2: clamp(2rem, 1.3rem + 3.1vw, 2.8125rem); /* 32 → 45px */
  --fs-h3: clamp(1.25rem, 1.03rem + 0.98vw, 1.6875rem); /* 20 → 27px */
  --fs-lead: clamp(1.25rem, 1.1rem + 0.65vw, 2.1875rem); /* 20 → 35px */
  --fs-stat: clamp(1.5rem, 1.28rem + 0.98vw, 2.5rem); /* 24 → 40px */
  --fs-body: 1rem; /* 16px */
  --fs-sm: 0.875rem; /* 14px */

  /* Spacing — kelipatan 8, menggantikan angka pecahan dari Figma */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.25rem;
  --sp-5: 1.5rem;
  --sp-6: 1.75rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-10: 3.75rem;
  --sp-12: 5rem;

  /* Layout */
  --gutter: 2.5rem; /* 40px — sama dengan padding Content di Figma */
  --maxw: 1360px; /* lebar konten di desktop 1440 */
  --radius-sm: 0.625rem; /* 10px — tombol */
  --radius-lg: 1.5rem; /* 24px — kartu */

  /* Gerak */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;
}

/*
   Figma memakai padding 40px di semua frame, termasuk Mobile — jadi
   --gutter dibiarkan 2.5rem. Baru di layar yang benar-benar sempit
   (di bawah 380px) dikecilkan sedikit supaya teks tidak terjepit.
*/
@media (max-width: 379px) {
  :root {
    --gutter: 1.75rem;
  }
}

/* --- 2. Reset ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* Supaya halaman pendek (404) tetap memenuhi layar: bagian isi memuai,
     footer tetap menempel di bawah, dan isinya benar-benar di tengah. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black-100);
  color: var(--white-100);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--orange-20);
  outline-offset: 3px;
}

/* --- Scrollbar ----------------------------------------------------------- */
/*
   Dua sintaks berbeda karena belum ada standar tunggal. Yang -webkit-
   dipakai Chrome, Edge, dan Safari — hanya di sana gradient bisa dipasang.
   Firefox memakai scrollbar-color yang hanya menerima warna polos, jadi di
   sana dipakai oranye tengah yang paling mendekati.
*/
html {
  scrollbar-color: var(--orange-100) var(--black-100);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--black-100);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--orange-100) 0%,
    var(--orange-20) 100%
  );
  border-radius: 10px;
  /* Border transparan menyisakan jarak tipis dari tepi track */
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--orange-20) 0%,
    var(--orange-100) 100%
  );
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--black-100);
}

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

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white-100);
  color: var(--black-100);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- 3. Animasi ---------------------------------------------------------- */
/*
   Dua jenis gerakan:
   1. .reveal  — elemen naik + memudar masuk. Dipicu saat halaman dibuka
                 (untuk hero) atau saat di-scroll ke layar (section lain).
   2. .ken     — gambar hero perlahan di-zoom out, memberi kesan "hidup".
   Jeda tiap elemen diatur lewat --d, jadi urutannya terasa berurutan
   bukan serempak.
*/

/*
   Catatan: dulu di sini ada filter: blur(). Itu dilepas karena browser
   me-raster elemen ber-filter pada resolusi lebih rendah, sehingga logo
   dan ikon terlihat pecah. Sekarang hanya opacity + geser vertikal.
*/
.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Tombol tetap bisa terangkat saat hover walau ikut animasi masuk */
.js-anim .btn.reveal.is-in:hover {
  transform: translateY(-2px);
}

/* Logo klien & kartu project muncul satu per satu */
.js-anim .stagger > * {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.045s);
}

.js-anim .stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* Zoom pelan pada foto hero saat halaman dibuka */
.ken {
  animation: ken 2.4s var(--ease-out) both;
}

@keyframes ken {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* Garis tipis yang melebar — dipakai di bawah section klien */
.js-anim .rule-grow {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}

.js-anim .rule-grow.is-in {
  transform: scaleX(1);
}

/* Hormati pengaturan "kurangi animasi" di OS pengguna */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .stagger > *,
  .rule-grow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ken {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 4. Pembungkus layout ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* --- 5. Tombol ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.008em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease,
    background-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  background: rgba(238, 140, 115, 0.15);
  border: 1px solid rgba(248, 97, 59, 0.2);
  color: var(--white-100);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  background: var(--grad-orange);
  border-color: var(--orange-20);
}

.btn--primary {
  background: var(--grad-orange);
  border: 1px solid var(--orange-20);
  color: var(--white-100);
}

.btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(248, 97, 59, 0.35);
}

/* --- 6. Navigasi --------------------------------------------------------- */
/*
   Navbar menempel di atas layar sepanjang halaman. Saat halaman masih di
   paling atas ia transparan; begitu digulir, muncul gradient hitam dari
   atas supaya tautannya tetap terbaca di atas konten apa pun.
   Dipakai sama persis di seluruh halaman.
*/
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  padding: var(--sp-8) var(--gutter);
  transition: padding 0.3s var(--ease-out), background 0.3s ease;
}

/*
   Gradient sengaja dibuat lebih tinggi daripada kotak navbar (240%) supaya
   peralihan ke konten di bawahnya landai, bukan berhenti mendadak di tepi
   navbar.
*/
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 240%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.75) 35%,
    rgba(0, 0, 0, 0.4) 65%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.is-scrolled .nav::before {
  opacity: 1;
}

/*
   Setelah digulir, navbar merapat. Menu layar penuh memakai nilai yang
   sama (lihat .is-scrolled .menu di bawah) supaya logo dan tombol X tetap
   jatuh di posisi logo dan burger, baik di puncak halaman maupun setelah
   digulir.
*/
.is-scrolled .nav {
  padding-block: var(--sp-4);
}

.nav__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.nav__logo img,
.nav__logo svg {
  height: 26px;
  width: auto;
}

.nav__links {
  display: flex;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
}

.nav__links a {
  position: relative;
  opacity: 0.75;
  transition: opacity 0.22s ease, text-shadow 0.22s ease;
}

/* Halaman yang sedang dibuka: lebih terang, tanpa garis bawah */
.nav__links a[aria-current="page"] {
  opacity: 1;
}

/* Hover: sedikit berpendar putih, tipis saja */
.nav__links a:hover {
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55),
    0 0 20px rgba(255, 255, 255, 0.25);
}

/* Tombol hamburger & tombol tutup — hanya tampil di mobile */
.nav__toggle,
.menu__close {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/*
   Ukurannya dibuat 24x24, sama dengan tombol X di sidebar, dan garisnya
   dipusatkan secara vertikal. Dengan kotak yang identik, hasil morph-nya
   jatuh tepat di posisi dan ukuran X tersebut.
*/
/* Tanpa `display` di sini — nilainya diatur di media query mobile, supaya
   tidak menimpa `display: none` di atas dan muncul di desktop. */
.nav__toggle {
  width: 24px;
  height: 24px;
  flex-direction: column;
  justify-content: center;
}

.nav__toggle span {
  display: block;
  height: 2px;
  margin-left: auto;
  background: var(--white-100);
  border-radius: 2px;
  transition: width 0.25s var(--ease-out),
    transform 0.34s var(--ease-out), opacity 0.18s ease;
}

.nav__toggle span:nth-child(1) {
  width: 100%;
}
.nav__toggle span:nth-child(2) {
  width: 70%;
  margin-block: 6px;
}
.nav__toggle span:nth-child(3) {
  width: 85%;
}

.nav__toggle:hover span {
  width: 100%;
}

/*
   Tiga garis berubah jadi tanda silang: garis atas dan bawah bertemu di
   tengah lalu memutar berlawanan arah, garis tengah mengerut hilang.
   Perubahan ini selesai lebih dulu, baru panel menu meluncur masuk.

   Panjang 21.8px bukan angka kira-kira: X di sidebar digambar dari titik
   (5,5) ke (19,19) dalam kotak 24x24, jadi diagonalnya 19.8px, ditambah
   ujung membulat 1px di tiap sisi. Hasilnya dua lengan yang panjang,
   tebal, dan sudutnya sama persis dengan X di sidebar.
*/
.nav__toggle[aria-expanded="true"] span {
  width: 21.8px;
  margin-inline: auto;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- 7. Menu layar penuh (mobile) ---------------------------------------- */
/* Panel oranye bergradien, meluncur dari kanan — mengikuti frame MENU di Figma */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  /* Padding atas & samping disamakan dengan .nav supaya logo dan tombol X
     jatuh persis di posisi logo dan burger sebelum menu dibuka. */
  padding: var(--sp-8) var(--gutter) var(--gutter);
  transition: transform 0.5s var(--ease-out), padding 0.3s var(--ease-out);
  /* Gradasi dibuat simetris lalu digeser terus-menerus. Karena warna di
     kedua ujungnya sama, pergeserannya menyambung tanpa lompatan. */
  background: linear-gradient(
    90deg,
    var(--orange-100) 0%,
    var(--orange-deep) 50%,
    var(--orange-100) 100%
  );
  background-size: 200% 100%;
  animation: menu-gradient 6s linear infinite;
  transform: translateX(100%);
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
}

@keyframes menu-gradient {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.menu[data-open="true"] {
  transform: translateX(0);
}

/*
   Atribut `hidden` dari HTML punya kekuatan lebih rendah daripada
   `.menu { display: flex }` di media query, jadi tanpa aturan ini panel
   yang tertutup tetap bisa dijangkau tombol Tab dan dibacakan screen
   reader meski sudah di luar layar.
*/
.menu[hidden] {
  display: none;
}

/* Sama persis dengan .is-scrolled .nav, jadi barisnya tidak bergeser */
.is-scrolled .menu {
  padding-top: var(--sp-4);
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: 26px; /* setinggi logo, sama seperti baris di navbar */
}

/* Dibatasi ke logo saja — sebelumnya ikut mengenai ikon X di sebelahnya
   dan membuatnya menjadi 24x26, bukan 24x24. */
.menu__top .nav__logo img,
.menu__top .nav__logo svg {
  height: 26px;
  width: auto;
}

.menu__close {
  width: 24px;
  height: 24px;
}

.menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  font-size: clamp(2rem, 9vw, 2.625rem); /* → 42px */
  line-height: 1.08;
  letter-spacing: -0.04em;
}

/* Tiap link masuk berurutan setelah panel terbuka */
.menu__links li {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.menu[data-open="true"] .menu__links li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.18s + var(--i) * 0.07s);
}

.menu__legal {
  font-size: 0.75rem;
  opacity: 0.7;
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .menu__close {
    display: block;
  }

  .menu {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu__links li {
    transition: none;
  }
}

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 900px;
  padding: var(--gutter);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
   Gradient hitam di bawah foto hero. Tingginya mengikuti tinggi section,
   bukan angka tetap — tugasnya menjaga teks tetap terbaca, dan area teks
   ikut bergeser di tiap ukuran layar. Lantai 300px supaya di layar pendek
   (HP mendatar) gradientnya tidak ikut menyusut sampai teks tenggelam.
*/
.hero__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: max(300px, 47%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    var(--black-100) 100%
  );
  pointer-events: none;
}

/* Di mobile area teksnya lebih tinggi, jadi gradientnya ikut naik */
@media (max-width: 860px) {
  .hero__fade {
    height: max(360px, 58%);
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero__text {
  flex: 1 1 350px;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Jarak lebar antara judul dan statistik, seperti di Figma (206px) */
  gap: clamp(3rem, 9vw, 12.875rem);
}

.hero__heading {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  max-width: 700px;
}

.stats__item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stats__num {
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stats__label {
  font-size: clamp(0.8125rem, 0.74rem + 0.33vw, 1.3rem);
  color: var(--white-60);
}

.stats__divider {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.25);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: flex-end;
}

/*
   Mobile mengikuti frame "Mobile - Homepage" di Figma:
   seluruh isi hero rata tengah, statistik mengecil jadi satu baris rapat,
   dan dua tombol sejajar di tengah.
*/
@media (max-width: 860px) {
  .hero {
    min-height: 100svh;
  }

  /*
     Foto hero jauh lebih lebar daripada layar HP, jadi sisi kanan-kirinya
     terpotong. Titik fokusnya digeser ke 68% supaya tangan dan HP tetap
     di tengah — angka ini diambil dari posisi BG di frame Mobile Figma.
  */
  .hero__bg img {
    object-position: 68% 46%;
  }

  .hero__content {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .hero__text {
    flex: 0 1 auto;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .hero__heading {
    font-size: clamp(2rem, 10.5vw, 2.8125rem); /* → 45px */
  }

  .hero__sub {
    margin-top: 0.9375rem; /* 15px */
    font-size: clamp(1.25rem, 5.85vw, 1.5625rem); /* → 25px */
  }

  /* Tiga statistik tetap sebaris, mengecil seperti di Figma */
  .stats {
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--sp-1); /* 8px */
    width: 100%;
    margin-top: var(--sp-3);
  }

  .stats__item {
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    text-align: center;
    gap: 0.4375rem;
  }

  .stats__num {
    font-size: 1.6875rem; /* 27px */
    letter-spacing: -0.04em;
  }

  .stats__label {
    font-size: 0.6875rem; /* 11px — Figma 8px, dinaikkan agar terbaca */
    line-height: 1.3;
    color: var(--white-80);
  }

  .stats__divider {
    min-height: 62px;
    margin-inline: var(--sp-1);
  }

  .hero__actions {
    justify-content: center;
    width: 100%;
    margin-top: var(--sp-7);
  }
}

/* --- 9. Bagian klien ----------------------------------------------------- */
.clients {
  background: var(--black-100);
  padding: var(--sp-8) var(--gutter);
}

.clients__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.clients__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.clients__subtitle {
  opacity: 0.8;
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-8);
}

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--sp-2);
  border-radius: 12px;
}

.logo-card img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}

.logo-card:hover img {
  opacity: 1;
  transform: scale(1.06);
}

.clients__more {
  margin-top: var(--sp-7);
  font-size: var(--fs-sm);
  letter-spacing: -0.04em;
  text-align: center;
}

.clients__rule {
  margin-top: var(--sp-8);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 10. Featured projects ----------------------------------------------- */
.works {
  background: var(--black-100);
  padding: var(--sp-10) var(--gutter);
}

.works__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.works__eyebrow {
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
}

.works__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.works__desc {
  opacity: 0.8;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--black-80);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.card__media {
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  padding: var(--sp-6) var(--sp-6) 0;
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
}

/* Ringkasan dipotong di baris ke-4 supaya tinggi kartu seragam */
.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--white-80);
  opacity: 0.5;
}

.card__footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-4) var(--sp-6);
}

/* --- 11. CTA ------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--primary-100);
  padding: var(--sp-10) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dua lapis gradient: hitam dari atas, biru dari bawah */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
}

.cta::before {
  top: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.5) 88%,
    var(--black-100) 100%
  );
}

/*
   Gradient biru diselesaikan di 88%, bukan 100%. Kalau warnanya baru
   penuh tepat di tepi bawah, kemiringannya berhenti mendadak saat bertemu
   footer yang warnanya rata — mata membacanya sebagai garis tipis padahal
   tidak ada beda warna. Dengan 12% terakhir sudah rata, sambungannya mulus.
*/
.cta::after {
  bottom: 0;
  height: 269px;
  background: linear-gradient(
    to bottom,
    rgba(0, 83, 155, 0) 13%,
    var(--blue-100) 88%,
    var(--blue-100) 100%
  );
}

.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-7);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: 520px;
  justify-content: flex-start;
}

.cta__title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

/*
   Versi mobile mengikuti frame "Mobile - Homepage > CTA" di Figma.
   Di sana foto HP tidak memenuhi seluruh kotak: ukurannya 1162x685 pada
   bingkai 428x720, digeser ke kiri sejauh 602px. Angka-angka persen di
   bawah adalah terjemahan langsung dari posisi itu, sehingga seluruh badan
   HP terlihat utuh dan tidak terpotong di atas seperti kalau dipaksa
   menutup penuh.
*/
@media (max-width: 860px) {
  .cta__content {
    min-height: 600px; /* + padding atas-bawah ≈ proporsi 428:720 di Figma */
    justify-content: flex-end;
  }

  .cta__bg {
    left: -140.7%; /* -602 / 428 */
    right: auto;
    width: 271.5%; /* 1162 / 428 */
    top: -4.4%; /* -31.68 / 720 */
    height: 95.1%; /* 685 / 720 */
  }

  .cta__bg img {
    object-position: center;
  }

  /*
     Section ini jauh lebih tinggi di mobile, jadi gradient biru setinggi
     269px tidak cukup menutupi area teks. Di Figma lapisannya menutupi
     sekitar 82% tinggi section — disamakan di sini.
  */
  .cta::after {
    height: 82%;
  }

  /* Judul CTA di mobile memakai Inter Light, bukan Regular */
  .cta__title {
    font-weight: 300;
  }
}

/* Pemisah baris mengikuti Figma; di layar sempit dibiarkan wrap sendiri */
.cta__title br {
  display: none;
}

@media (min-width: 900px) {
  .cta__title br {
    display: inline;
  }
}

/* --- 12. Footer ---------------------------------------------------------- */
.footer {
  background: var(--blue-100);
  color: var(--primary-10);
  padding: var(--sp-8) var(--gutter);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.footer__logo img,
.footer__logo svg {
  height: 26px;
  width: auto;
}

/*
   Di Figma ketiga blok ini berjarak 185px satu sama lain pada lebar konten
   1360px — angka itu persis sisa ruang yang terbagi rata setelah nav (195),
   kontak (maks 548) dan hak cipta (246) ditempatkan. Jadi yang dipakai di
   sini bukan jarak tetap 185px, melainkan space-between: hasilnya sama di
   lebar desktop, dan ikut merapat sendiri di layar yang lebih sempit.
*/
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-8);
  align-items: flex-start;
  font-size: var(--fs-sm);
}

.footer__nav {
  display: flex;
  gap: var(--sp-3);
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 90px;
}

.footer__nav a {
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.footer__nav a:hover {
  opacity: 1;
}

.footer__contact {
  flex: 1 1 250px;
  max-width: 548px;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  font-style: normal;
}

/* Alamat dipecah dua baris sesuai Figma; di layar sempit biarkan wrap sendiri */
@media (max-width: 860px) {
  .footer__contact br {
    display: none;
  }
}

.footer__contact p,
.footer__contact a {
  opacity: 0.7;
}

.footer__contact a:hover {
  opacity: 1;
}

.footer__legal {
  max-width: 246px;
  opacity: 0.7;
}

/*
   Footer versi mobile mengikuti frame Figma: semuanya rata tengah, lima
   tautan berjajar dalam satu baris, lalu kontak dan hak cipta bertumpuk
   di bawahnya.
*/
@media (max-width: 860px) {
  .footer__inner {
    align-items: center;
    gap: var(--sp-5);
    text-align: center;
  }

  .footer__cols {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
  }

  /* display:contents melarutkan kedua <ul> supaya kelima tautan jadi satu
     baris; urutannya ditata ulang dengan `order` agar tetap Home → About →
     Services → Portfolio → Contact us seperti di Figma. */
  .footer__nav {
    width: 100%;
    justify-content: space-between;
    gap: var(--sp-1);
  }

  .footer__nav ul {
    display: contents;
  }

  .footer__nav ul:first-child li:nth-child(1) {
    order: 1;
  }
  .footer__nav ul:first-child li:nth-child(2) {
    order: 3;
  }
  .footer__nav ul:first-child li:nth-child(3) {
    order: 5;
  }
  .footer__nav ul:last-child li:nth-child(1) {
    order: 2;
  }
  .footer__nav ul:last-child li:nth-child(2) {
    order: 4;
  }

  /* flex:1 dari versi desktop membuat blok ini memanjang ke bawah begitu
     arahnya jadi kolom — dimatikan di sini. */
  .footer__contact {
    flex: 0 0 auto;
    align-items: center;
    max-width: none;
    gap: var(--sp-2);
  }

  .footer__legal {
    max-width: none;
    padding-top: var(--sp-5);
    font-size: 0.75rem;
  }
}

/* --- 13. Tombol varian terang --------------------------------------------- */
/* Dipakai di halaman 404: latar putih, teks hitam. */
.btn--light {
  background: radial-gradient(
    ellipse at center,
    #ffffff 0%,
    #e7e6e6 100%
  );
  border: 1px solid rgba(242, 236, 228, 0.2);
  color: var(--black-100);
}

.btn--light:hover {
  filter: brightness(1.04);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}

/* --- 14. Halaman 404 ------------------------------------------------------- */
/* Pembungkus transisi ikut memuai, supaya footer tetap menempel di bawah */
.page-wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.error {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Padding atas sebesar tinggi navbar, supaya isinya terbaca di tengah
     ruang antara navbar dan footer — bukan di tengah seluruh section. */
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-12);
  overflow: hidden;
}

.error__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.9375rem); /* → 63px */
  width: 100%;
  max-width: 980px;
}

.error__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/*
   Angka 404 dibangun dari tiga lapis yang saling menumpuk. Urutan
   tumpukannya diatur lewat z-index, dan urutan itulah kuncinya:

   1. ::before — garis tepi tetap, warna terang, memudar ke bawah.
   2. ::after  — garis tepi putih yang hanya terlihat lewat celah sempit;
                 celah itu digeser terus-menerus sehingga kilau berjalan
                 menyusuri tepi angka.
   3. <span>   — isi bergradien oranye, digambar PALING ATAS.

   Karena isinya menimpa paling akhir, separuh garis tepi yang jatuh di
   dalam huruf tertutup rapi dan yang tersisa hanya sisi luarnya — sama
   seperti di Figma. Lebar garisnya dibuat dua kali lipat karena hanya
   setengahnya yang terlihat.
*/
.error__number {
  position: relative;
  display: inline-block;
  font-size: clamp(7rem, 27.7vw, 24.94rem); /* → 399px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: -0.0877em; /* -35px pada 399px */
  color: transparent;
}

.error__number::before,
.error__number::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
}

/* 1 — garis tepi tetap */
.error__number::before {
  z-index: 1;
  -webkit-text-stroke: 0.012em rgba(255, 168, 140, 0.95);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 62%,
    transparent 88%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 62%,
    transparent 88%
  );
}

/* 2 — kilau berjalan */
.error__number::after {
  z-index: 2;
  -webkit-text-stroke: 0.016em rgba(255, 255, 255, 0.95);
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 42%,
    #000 50%,
    transparent 58%
  );
  mask-image: linear-gradient(
    100deg,
    transparent 42%,
    #000 50%,
    transparent 58%
  );
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: shine 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* 3 — isi bergradien, menimpa bagian dalam garis tepi */
.error__number > span {
  position: relative;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    var(--orange-100) 0%,
    rgba(248, 97, 59, 0) 89.4%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes shine {
  0% {
    -webkit-mask-position: 160% 0;
    mask-position: 160% 0;
  }
  62%,
  100% {
    -webkit-mask-position: -60% 0;
    mask-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error__number::after {
    animation: none;
    opacity: 0;
  }
}

.error__label {
  font-size: clamp(1.5rem, 2.43vw, 2.1875rem); /* → 35px */
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(
    to bottom,
    var(--white-100) 0%,
    rgba(136, 136, 136, 0) 131.4%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: 716px;
}

.error__text {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 1.0625rem; /* 17px */
}

.error__title {
  font-size: clamp(1.5rem, 2.43vw, 2.1875rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(
    to bottom,
    var(--white-100) 0%,
    rgba(136, 136, 136, 0) 151.4%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error__desc {
  font-size: 0.9375rem; /* 15px */
  font-weight: 300;
  line-height: 1.61;
  letter-spacing: -0.04em;
  background: linear-gradient(
    to bottom,
    var(--white-100) 0%,
    rgba(136, 136, 136, 0) 241.7%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Versi footer berlatar hitam — dipakai di halaman 404 */
.footer--dark {
  background: var(--black-100);
  color: var(--white-100);
}

@media (max-width: 860px) {
  .error__row {
    flex-direction: column;
    text-align: center;
  }

  .error__text {
    flex: 0 0 auto;
    align-items: center;
  }
}

/* --- 15. Transisi antar halaman -------------------------------------------- */
/*
   Opsi 2: halaman lama memudar sambil naik sedikit, halaman baru muncul
   dari bawah. Hanya aktif kalau JavaScript hidup — tanpa itu halaman
   berganti seperti biasa tanpa jeda apa pun.
*/
.js-anim .page-wrap {
  animation: page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-anim.is-leaving .page-wrap {
  animation: page-out 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes page-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .page-wrap,
  .js-anim.is-leaving .page-wrap {
    animation: none;
  }
}

/* --- 16. Halaman About Us -------------------------------------------------- */
/*
   Halaman ini bertema terang di bawah hero: bagian klien dan footer
   berlatar putih. Logo klien hanya tersedia dalam versi putih, jadi
   dibalik jadi hitam lewat filter — semuanya monokrom, jadi hasilnya
   bersih dan tidak perlu file terpisah.
*/
.hero--about .hero__content {
  justify-content: flex-end;
}

.hero--about .hero__text {
  flex: 1 1 100%;
  max-width: none;
  gap: 0;
}

.about-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

.about-lede__title {
  flex: 1 1 300px;
  font-size: clamp(2rem, 3.47vw, 3.125rem); /* → 50px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-lede__text {
  flex: 1 1 250px;
  font-size: var(--fs-body);
  line-height: normal;
}

@media (max-width: 860px) {
  /*
     Homepage merata-tengahkan isi hero di mobile, tapi About Us tetap rata
     kiri sesuai frame Figma-nya — jadi aturan itu dibatalkan di sini.
  */
  .hero--about .hero__text {
    align-items: flex-start;
    text-align: left;
  }

  .about-lede {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .about-lede__title,
  .about-lede__text {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --- Bagian klien versi terang --- */
.clients--light {
  background: var(--white-100);
  color: var(--black-100);
}

.clients--light .logo-card img {
  /* Logo aslinya putih; dibalik agar menjadi hitam di latar putih */
  filter: invert(1);
  opacity: 0.9;
}

.clients--light .logo-card:hover img {
  opacity: 1;
}

.clients__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

/* --- Footer versi terang --- */
.footer--light {
  background: var(--white-100);
  color: var(--black-100);
}

.footer--light .footer__logo img {
  filter: invert(1);
}

/* --- 17. Token status (error / warning) ------------------------------------ */
/*
   Tidak ditemukan variabel error/warning di design system Figma, jadi
   warnanya dipilih di sini. Merah dibuat condong ke crimson, bukan merah
   oranye — supaya tidak tertukar dengan warna merek (#f8613b) saat
   keduanya muncul berdekatan di form.
*/
:root {
  --error: #ff4d6d;
  --error-soft: rgba(255, 77, 109, 0.14);
  --error-line: rgba(255, 77, 109, 0.55);
  --warning: #ffc14d;
  --success: #4de8a0;
}

/* --- 18. Latar bercahaya (Services & Detail Services) ---------------------- */
.glow {
  position: relative;
  isolation: isolate;
  background: var(--black-100);
}

.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 78% at 50% -12%,
    #c2451f 0%,
    #7d2d14 26%,
    #2a0f08 52%,
    var(--black-100) 78%
  );
  pointer-events: none;
}

.glow--left::before {
  background: radial-gradient(
    110% 85% at 18% -8%,
    #c2451f 0%,
    #7d2d14 24%,
    #2a0f08 50%,
    var(--black-100) 76%
  );
}

/* --- 19. Halaman Services -------------------------------------------------- */
.services {
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-12);
}

.services__title {
  margin-bottom: var(--sp-10);
  font-size: clamp(2.5rem, 4.86vw, 4.375rem); /* → 70px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* Jarak atas dan bawah disamakan, seperti halaman Services lainnya. */
  .services {
    padding-top: calc(var(--sp-8) + 104px);
    padding-bottom: var(--sp-8);
  }

  .services__title {
    margin-bottom: var(--sp-8);
  }
}

@media (max-width: 620px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Kartu layanan --- */
.scard {
  display: flex;
  flex-direction: column;
  min-height: 519px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background: linear-gradient(to bottom, #131315 58%, var(--black-100) 100%);
  overflow: hidden;
  color: inherit;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.scard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

.scard__media {
  position: relative;
  height: 303px;
  flex: 0 0 auto;
  overflow: hidden;
}

.scard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

.scard:hover .scard__media img {
  transform: scale(1.06);
}

/* Gradient di bawah foto supaya menyatu dengan badan kartu */
.scard__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(
    to bottom,
    rgba(19, 19, 21, 0) 0%,
    rgba(19, 19, 21, 0.85) 70%,
    #131315 100%
  );
  pointer-events: none;
}

.scard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.scard__title {
  margin-bottom: 0.4375rem;
  font-size: clamp(1.5rem, 1.9vw, 2.1875rem); /* → 35px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Figma memakai 10px; dinaikkan ke 13px agar nyaman dibaca */
.scard__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}

.scard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 0.625rem 1rem;
  border: 1px solid rgba(242, 236, 228, 0.2);
  border-radius: 250px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease;
}

.scard:hover .scard__cta {
  background: rgba(255, 255, 255, 0.22);
}

/* --- 20. Halaman Detail Services ------------------------------------------- */
.detail {
  display: flex;
  align-items: center;
  padding: calc(var(--sp-10) + 104px) var(--gutter) var(--sp-10);
}

.detail__inner {
  display: grid;
  grid-template-columns: minmax(280px, 43%) 1fr;
  gap: var(--sp-8);
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.2s ease, gap 0.2s var(--ease-out);
}

.detail__back:hover {
  opacity: 1;
  gap: 0.9375rem;
}

.detail__back svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.detail__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(1.5rem, 2.08vw, 1.875rem); /* → 30px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.detail__media {
  aspect-ratio: 494 / 291;
  border-radius: 18px;
  overflow: hidden;
  background: #1a1a1a;
}

.detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Daftar sub-layanan di kolom kanan */
.slist {
  display: flex;
  flex-direction: column;
}

.slist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(1.75rem, 3.1vw, 2.8125rem); /* → 45px */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.03em;
  transition: padding-left 0.25s var(--ease-out),
    border-color 0.25s ease, color 0.25s ease;
}

.slist__row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.slist__row:hover {
  padding-left: 0.75rem;
  border-color: var(--orange-20);
}

.slist__chev {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--orange-100);
  transition: transform 0.25s var(--ease-out);
}

.slist__row:hover .slist__chev {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  /*
     Di desktop isi halaman diatur rata tengah dalam satu layar penuh, jadi
     padding atasnya besar. Di mobile isinya jauh lebih tinggi dari layar,
     sehingga padding itu hanya menyisakan ruang kosong di atas. Di sini
     jaraknya disamakan: dari navbar ke isi = dari isi ke footer.
  */
  .detail {
    align-items: flex-start;
    padding-top: calc(var(--sp-8) + 104px);
    padding-bottom: var(--sp-8);
  }

  .detail__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .slist__row {
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  }
}

/* --- 21. Halaman Contact --------------------------------------------------- */
.contact {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--sp-10) + 104px) var(--gutter) var(--sp-10);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 490px);
  gap: var(--sp-10);
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.contact__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-5);
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: var(--fs-sm);
}

.contact__title {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.contact__lede {
  max-width: 44ch;
  margin-top: var(--sp-5);
  opacity: 0.85;
}

.contact__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  font-style: normal;
}

.contact__row dt {
  font-size: 0.8125rem;
  opacity: 0.6;
}

.contact__row dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
}

.contact__row a:hover {
  color: var(--orange-20);
}

@media (max-width: 900px) {
  /* Alasan sama seperti Detail Services: jarak atas dan bawah disamakan. */
  .contact {
    align-items: flex-start;
    min-height: 0;
    padding-top: calc(var(--sp-8) + 104px);
    padding-bottom: var(--sp-8);
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* --- 22. Form kontak ------------------------------------------------------- */
/*
   Tiga keadaan tiap kolom isian:
   - diam    : latar putih transparan tipis, garis tepi samar
   - aktif   : garis tepi oranye + cincin lembut saat kursor masuk
   - salah   : garis tepi merah + latar kemerahan + pesan di bawahnya
   Keadaan "salah" dipicu lewat atribut aria-invalid, jadi pembaca layar
   ikut mengumumkannya — bukan sekadar berubah warna.
*/
.cform {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  padding: var(--sp-8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(3, 3, 3, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.cform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cform__title {
  font-size: clamp(1.5rem, 2.43vw, 2.1875rem); /* → 35px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.cform__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.field__req {
  color: var(--orange-20);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white-100);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Daftar pilihan memakai warna gelap agar terbaca di semua sistem */
.field select option {
  background: #15161a;
  color: var(--white-100);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange-20);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(248, 97, 59, 0.22);
}

/* --- Keadaan salah --- */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error-line);
  background: var(--error-soft);
}

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.24);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--error);
}

.field__error svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.125rem;
}

.field.is-invalid .field__error {
  display: flex;
}

/* Sedikit bergoyang saat pesan salah pertama kali muncul */
.js-anim .field.is-invalid .field__error {
  animation: nudge 0.32s var(--ease-out) both;
}

@keyframes nudge {
  0% {
    opacity: 0;
    transform: translateX(-5px);
  }
  55% {
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* --- Tombol kirim & pesan hasil --- */
.cform__submit {
  width: 100%;
}

.cform__submit[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.cform__status {
  display: none;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.cform__status.is-shown {
  display: flex;
}

.cform__status[data-kind="ok"] {
  border: 1px solid rgba(77, 232, 160, 0.45);
  background: rgba(77, 232, 160, 0.12);
  color: var(--success);
}

.cform__status[data-kind="bad"] {
  border: 1px solid var(--error-line);
  background: var(--error-soft);
  color: var(--error);
}

@media (max-width: 520px) {
  .cform {
    padding: var(--sp-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .field.is-invalid .field__error {
    animation: none;
  }
}

/* --- 17. Token status (error / warning) ----------------------------------- */
/*
   Warna status ditaruh di sini supaya mudah diganti satu baris kalau nanti
   nilai dari Figma sudah pasti. Merah murni terlalu dekat dengan oranye
   merek, jadi dipilih merah yang lebih terang dan dingin agar tetap jelas
   terbaca sebagai peringatan di atas latar gelap — dan selalu ditemani
   teks, bukan warna saja.
*/
:root {
  --error: #ff5c5c;
  --error-soft: rgba(255, 92, 92, 0.12);
  --warning: #ffb224;
  --success: #4ade80;
}

/* --- 18. Halaman Services -------------------------------------------------- */
.services {
  position: relative;
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-12);
  background: linear-gradient(
    to bottom,
    #45170b 0%,
    #7f2914 14%,
    #000 72%
  );
}

.services__title {
  margin-bottom: var(--sp-10);
  font-size: clamp(2.25rem, 3.47vw, 3.125rem); /* → 50px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-align: center;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* Kartu layanan: foto di atas, judul & ringkasan di bawah */
.scard {
  display: flex;
  flex-direction: column;
  min-height: 519px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background: linear-gradient(to bottom, #131315 58%, #000 100%);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.scard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

.scard__media {
  position: relative;
  flex: 0 0 303px;
  overflow: hidden;
}

.scard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.scard:hover .scard__media img {
  transform: scale(1.05);
}

/* Gradient di bawah foto supaya menyatu dengan badan kartu */
.scard__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(
    to bottom,
    rgba(19, 19, 21, 0) 0%,
    rgba(19, 19, 21, 0.85) 70%,
    #131315 100%
  );
  pointer-events: none;
}

.scard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.scard__title {
  margin-bottom: 0.4375rem;
  font-size: clamp(1.5rem, 2.43vw, 2.1875rem); /* → 35px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

/*
   Figma memakai 10px untuk ringkasan ini. Di layar nyata ukuran itu di
   bawah ambang nyaman baca, jadi dinaikkan ke 12px — proporsinya terhadap
   judul tetap mirip.
*/
.scard__desc {
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
}

.btn--pill {
  padding: 0.625rem 1.125rem;
  border: 1px solid rgba(242, 236, 228, 0.2);
  border-radius: 250px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white-100);
  font-size: 0.75rem;
}

.btn--pill:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- 19. Halaman Detail Services ------------------------------------------ */
.dservice {
  position: relative;
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-12);
  background: radial-gradient(
    200% 95% at 0% 0%,
    #f5612f 0%,
    #cc5029 10%,
    #a0401f 20%,
    #6b2a14 32%,
    #39170c 45%,
    #140806 60%,
    #000 75%
  );
}

.dservice__grid {
  display: grid;
  grid-template-columns: minmax(280px, 585fr) minmax(300px, 775fr);
  gap: var(--sp-8);
  align-items: start;
}

.dservice__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  opacity: 0.85;
  transition: opacity 0.2s ease, gap 0.2s var(--ease-out);
}

.dservice__back:hover {
  opacity: 1;
  gap: var(--sp-2);
}

.dservice__back svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.dservice__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(1.5rem, 2.08vw, 1.875rem); /* → 30px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dservice__media {
  aspect-ratio: 494 / 291;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1a1a1a;
}

.dservice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Daftar sub-layanan di kolom kanan */
.dlist {
  display: flex;
  flex-direction: column;
}

.dlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: padding-left 0.25s var(--ease-out), color 0.25s ease;
}

.dlist__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.dlist__item:hover {
  padding-left: var(--sp-2);
}

.dlist__item span[aria-hidden] {
  flex: none;
  font-size: 1.5rem;
  color: var(--orange-100);
  transition: transform 0.25s var(--ease-out);
}

.dlist__item:hover span[aria-hidden] {
  transform: translateX(4px);
}

/* Di layar kecil dua kolom ditumpuk: judul & gambar dulu, lalu daftarnya */
@media (max-width: 860px) {
  .dservice__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .dlist__item {
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
    padding: var(--sp-2) 0;
  }
}

/* --- 20. Halaman Contact Us ----------------------------------------------- */
.contact {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-12);
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: max(300px, 47%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    var(--black-100) 100%
  );
  pointer-events: none;
}

.contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.contact__col {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 630px;
}

.contact__eyebrow {
  align-self: flex-start;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.8125rem;
}

.contact__title {
  font-size: clamp(2.5rem, 5.2vw, 4.6875rem); /* → 75px */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.contact__lede {
  max-width: 44ch;
  margin-top: var(--sp-5);
}

.contact__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact__row dt {
  font-size: 0.8125rem;
  opacity: 0.65;
}

.contact__row dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
}

.contact__row a:hover {
  color: var(--orange-20);
}

/* --- Formulir --- */
.form-card {
  flex: 1 1 420px;
  max-width: 490px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(3, 3, 3, 0.65);
  backdrop-filter: blur(22px);
}

.form-card__title {
  font-size: clamp(1.5rem, 2.43vw, 2.1875rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.field__label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.field__req {
  color: var(--orange-20);
}

/* Keadaan diam (idle) */
.field__input {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white-100);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

textarea.field__input {
  min-height: 120px;
  resize: vertical;
}

select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

select.field__input option {
  background: #121212;
  color: var(--white-100);
}

/* Keadaan aktif (sedang diisi) */
.field__input:hover {
  background: rgba(255, 255, 255, 0.19);
}

.field__input:focus {
  outline: none;
  border-color: var(--orange-20);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(248, 97, 59, 0.25);
}

/* Keadaan salah */
.field__input[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-soft);
}

.field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--error);
}

.field__error svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
}

.field[data-invalid="true"] .field__error {
  display: flex;
}

/* Pesan setelah kirim */
.form-status {
  display: none;
  gap: 0.5rem;
  padding: var(--sp-3);
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-status[data-state="success"],
.form-status[data-state="error"] {
  display: flex;
}

.form-status[data-state="success"] {
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.12);
  color: var(--success);
}

.form-status[data-state="error"] {
  border: 1px solid rgba(255, 92, 92, 0.4);
  background: var(--error-soft);
  color: var(--error);
}

.btn--submit {
  width: 100%;
  background: linear-gradient(90deg, #ee8c73 0%, #e57154 50%, #dc5634 100%);
  border: 1px solid rgba(242, 236, 228, 0.2);
  color: var(--white-100);
}

.btn--submit:hover {
  filter: brightness(1.06);
}

.btn--submit[data-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 860px) {
  .contact {
    min-height: auto;
  }

  .contact__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__col,
  .form-card {
    max-width: none;
    flex: 0 0 auto;
  }

  .form-card {
    padding: var(--sp-5);
  }
}

/* --- V10.36 Pilihan bahasa (pill kaca + bendera bulat) ------------------- */
.nl-i18n-pending body{opacity:0}
.nav__links{align-items:center}
.nl-langsel{position:relative;font-size:13px}
.nl-langsel__btn{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border:1px solid rgba(255,255,255,.25);border-radius:99px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);color:#fff;font:inherit;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s,border-color .2s}
.nl-langsel__btn:hover,.nl-langsel.is-open .nl-langsel__btn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.nl-langsel__btn:focus-visible,.nl-langsel__menu button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nl-flag{display:inline-block;width:18px;height:18px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.nl-flag svg{display:block;width:100%;height:100%}
.nl-langsel__chev,.nl-langsel__check{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nl-langsel__chev{transition:transform .25s}.nl-langsel.is-open .nl-langsel__chev{transform:rotate(180deg)}
.nl-langsel__menu{position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:200px;margin:0;padding:6px;list-style:none;border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(40,20,14,.35);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 20px 40px -12px rgba(0,0,0,.45);animation:nlLangIn .22s ease-out}
.nl-langsel__menu[hidden]{display:none}
@keyframes nlLangIn{from{opacity:0;transform:translateY(-4px)}}
.nl-langsel__menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;border-radius:11px;background:none;color:#fff;font:inherit;font-size:14px;font-weight:400;letter-spacing:0;text-align:left;cursor:pointer}
.nl-langsel__menu button>span:not(.nl-flag){flex:1;white-space:nowrap}
.nl-langsel__menu button:hover{background:rgba(255,255,255,.14)}
.nl-langsel__menu button[aria-selected="true"]{background:rgba(255,255,255,.22)}
.nl-langsel__menu button:not([aria-selected="true"]) .nl-langsel__check{visibility:hidden}
/* Di menu HP: di bawah daftar menu, dropdown membuka ke atas */
.nl-langsel--menu{align-self:flex-start;width:100%;max-width:var(--maxw);margin-inline:auto;font-size:15px}
.nl-langsel--menu .nl-langsel__btn{padding:8px 14px 8px 8px}
.nl-langsel--menu .nl-flag{width:22px;height:22px}
.nl-langsel--menu .nl-langsel__menu{left:0;right:auto;top:auto;bottom:calc(100% + 10px)}

/* --- V10.41 Loading gambar: shimmer skeleton (opsi 1) ------------------- */
.nl-imgload{background:linear-gradient(100deg,#2a2624 30%,#3d3734 50%,#2a2624 70%)!important;background-size:220% 100%!important;animation:nlShimmer 1.4s linear infinite;overflow:hidden}
.nl-imgload[data-imgload-pos]{position:relative}
.nl-imgload__img{opacity:0;transition:opacity .5s ease}
.nl-imgload__img.is-in{opacity:1}
@keyframes nlShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.nl-imgload{animation:none}.nl-imgload__img{transition:none}}

/* --- V10.38 Privacy Policy (link footer + modal) ------------------------- */
.nl-privacy-wrap{margin:6px 0 0}
.nl-privacy-wrap.is-inline{margin:0 0 0 14px;display:inline}
.nl-privacy-link{padding:0;border:0;background:none;color:inherit;font:inherit;font-size:inherit;opacity:.75;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;transition:opacity .2s}
.nl-privacy-link:hover{opacity:1}
.nl-privacy-link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.nl-privacy-open{overflow:hidden}
.nl-privacy{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.nl-privacy__scrim{position:absolute;inset:0;background:rgba(8,4,3,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.nl-privacy__box{position:relative;width:min(640px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(180deg,#2a1510,#120a08);color:#fff;box-shadow:0 40px 80px -30px #000;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.nl-privacy.is-in .nl-privacy__scrim{opacity:1}.nl-privacy.is-in .nl-privacy__box{opacity:1;transform:none}
.nl-privacy__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.nl-privacy__head h2{margin:0;font-size:28px;font-weight:400;letter-spacing:-.03em}
.nl-privacy__head p{margin:6px 0 0;font-size:12px;opacity:.6}
.nl-privacy__x{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.nl-privacy__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nl-privacy__body{overflow-y:auto;padding:18px 28px 28px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.82);overscroll-behavior:contain}
.nl-privacy__intro{margin:0 0 6px;color:#fff}
.nl-privacy__body section{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.nl-privacy__body section:last-child{border-bottom:0}
.nl-privacy__body h3{display:flex;gap:10px;align-items:baseline;margin:0 0 4px;font-size:15px;font-weight:500;color:#fff}
.nl-privacy__body h3 span{font-size:11px;color:#fa967c;font-variant-numeric:tabular-nums}
.nl-privacy__body p{margin:0}
.nl-privacy__body a{color:#fa967c}
@media(max-width:560px){.nl-privacy{padding:0;align-items:end}.nl-privacy__box{border-radius:22px 22px 0 0;max-height:88vh}.nl-privacy__head{padding:22px 20px 14px}.nl-privacy__head h2{font-size:24px}.nl-privacy__body{padding:14px 20px 24px}}
@media (prefers-reduced-motion:reduce){.nl-privacy__box,.nl-privacy__scrim{transition:none}}
.nl-privacy-wrap.is-block{display:block;margin-top:8px}
/* --- V10.38 Pemberitahuan cookie & cache (modal tengah) ------------------ */
.nl-privacy:has(.nl-privacy__box:not(.nl-cookie__box))~.nl-cookie,.nl-cookie{z-index:199}
.nl-cookie__box{width:min(460px,100%);padding:30px;text-align:center}
.nl-cookie__icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(140deg,#f8613b,#fa967c);display:grid;place-items:center}
.nl-cookie__icon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nl-cookie__box h2{margin:0 0 8px;font-size:26px;font-weight:400;letter-spacing:-.03em}
.nl-cookie__box p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)}
.nl-cookie__read{padding:0;border:0;background:none;color:#fa967c;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nl-cookie__btns{display:flex;gap:10px;margin-top:22px}
.nl-cookie__btn{flex:1;padding:13px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:none;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
.nl-cookie__btn:hover{background:rgba(255,255,255,.08)}
.nl-cookie__btn.is-pri{background:#fff;color:#111;border-color:#fff}.nl-cookie__btn.is-pri:hover{background:#f1ece8}
.nl-cookie__btn:focus-visible,.nl-cookie__read:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:560px){.nl-cookie__box{border-radius:22px 22px 0 0;padding:26px 20px 30px}.nl-cookie__btns{flex-direction:column-reverse}}
/* V10.40: link tanpa garis bawah; kotak modal hitam transparan + blur latar */
.nl-privacy-link{text-decoration:none}
.nl-privacy-link:hover{opacity:1;text-decoration:none}
.nl-privacy__scrim{background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nl-privacy__box{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(30px) saturate(1.2);backdrop-filter:blur(30px) saturate(1.2);border-color:rgba(255,255,255,.12)}
.nl-cookie__read{text-decoration:none}

/* Nonblocking cookie preferences V10.45. */
.nl-cookie-prefs{position:fixed;bottom:18px;right:18px;z-index:9998;width:min(380px,calc(100vw - 36px));padding:19px 20px;background:#201610;color:#fff;border:1px solid #ffffff25;border-radius:16px;box-shadow:0 12px 30px #0005;font:inherit}
.nl-cookie-prefs strong{display:block;font-size:15px;font-weight:650}.nl-cookie-prefs p{font-size:12px;line-height:1.6;margin:9px 0 14px;color:#eeddd2}.nl-cookie-prefs>div{display:flex;gap:7px;flex-wrap:wrap}.nl-cookie-prefs button{border:1px solid #ffffff44;background:transparent;color:#fff;border-radius:7px;padding:9px 11px;cursor:pointer;font:inherit;font-size:12px}.nl-cookie-prefs button[data-choice=all]{background:#fa7651;border-color:#fa7651;color:#24120b}.nl-cookie-prefs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* V10.46: six footer links wrap cleanly on small screens. */
@media(max-width:760px){.footer__nav{flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:12px}.footer__nav ul:last-child li:nth-child(3){order:6}}