/* ============================================================
   hero-75.css  -  hero halaman dalam, belah dua + panel foto
   ------------------------------------------------------------
   KIRI  : komposisi lembaga terpusat (mengikuti acuan image1)
           lencana bulat berdenyut, nama dinas, dua baris
           keterangan, cincin orbit samar di belakang.
   KANAN : label halaman di atas PANEL FOTO bermask, bukan
           potongan keras. Foto luruh ke kiri sehingga kedua
           sisi tetap satu bidang.
   LOGAM : emas kuningan #C8A24A, hanya pada tema biru bawaan.

   Judul halaman TETAP tidak ada di hero. Judul turun ke body
   lewat .judul-halaman, persis seperti ketentuan sebelumnya.
   ============================================================ */

.hero-kepala {
  --logam: #c8a24a;
  --logam-terang: #e7d4a0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(340px, 34vw, 460px);
  background: linear-gradient(168deg, #1e5fa0 0%, #123a63 100%);
}
/* Bawaan: warna dasar diturunkan dari --accent-strong base.css, jadi
   hero ikut berubah bila tema situs diganti. Ujung gradasi dicampur
   sedikit navy supaya ada kedalaman, tetapi tidak sampai jadi hitam. */
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
  .hero-kepala {
    background: linear-gradient(
      168deg,
      var(--accent-strong) 0%,
      color-mix(in srgb, var(--accent-strong) 56%, #0b1b2e) 100%
    );
  }
}

/* PILIHAN WARNA DASAR, dipasang di <html data-latar="...">.
   Tanpa atribut = "dinas" (aturan di atas). Kelima pilihan ini
   mengunci warna sehingga tidak lagi mengikuti tema. */
[data-latar="tipis"] .hero-kepala {
  background: linear-gradient(168deg, #1b3a5c 0%, #12263d 100%);
}
[data-latar="petrol"] .hero-kepala {
  background: linear-gradient(168deg, #12556a 0%, #0b2e3b 100%);
}
[data-latar="ungu"] .hero-kepala {
  background: linear-gradient(168deg, #3f4499 0%, #211f4e 100%);
}
[data-latar="malam"] .hero-kepala {
  background: linear-gradient(170deg, #0c1a2f 0%, #080f1c 100%);
}

/* Emas hanya cocok di tema biru bawaan. Di tema lain aksennya
   turun ke netral terang supaya tidak bertabrakan. */
[data-theme="teal"] .hero-kepala,
[data-theme="hijau"] .hero-kepala,
[data-theme="indigo"] .hero-kepala,
[data-theme="oranye"] .hero-kepala {
  --logam: rgba(255, 255, 255, 0.44);
  --logam-terang: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------
   LAPIS 0 - PANEL FOTO
   Foto duduk di sisi kanan lalu diluruhkan ke kiri memakai mask
   radial, jadi tidak ada garis potong yang keras.
   ------------------------------------------------------------ */
.hero-latar {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(58%, 820px);
  background: url("../background/background1.jpg") center/cover no-repeat;
  filter: grayscale(0.5) contrast(1.04) brightness(0.76) saturate(0.86);
  -webkit-mask-image: radial-gradient(
    122% 142% at 124% 50%,
    #000 24%,
    rgba(0, 0, 0, 0.5) 58%,
    transparent 88%
  );
  mask-image: radial-gradient(
    122% 142% at 124% 50%,
    #000 24%,
    rgba(0, 0, 0, 0.5) 58%,
    transparent 88%
  );
}

/* ------------------------------------------------------------
   LAPIS 1 - CAHAYA MEREK
   Radial saja, tidak boleh ada linear pekat di sini karena akan
   menutup foto di lapis 0.
   ------------------------------------------------------------ */
.hero-warna {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      680px 520px at 12% 4%,
      rgba(39, 131, 222, 0.62),
      transparent 64%
    ),
    radial-gradient(
      640px 500px at 62% 104%,
      rgba(47, 182, 168, 0.3),
      transparent 66%
    ),
    radial-gradient(
      900px 700px at 106% 0%,
      rgba(88, 98, 214, 0.32),
      transparent 62%
    );
}
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
  .hero-warna {
    background:
      radial-gradient(
        680px 520px at 12% 4%,
        color-mix(in srgb, var(--accent) 62%, transparent),
        transparent 64%
      ),
      radial-gradient(
        640px 500px at 62% 104%,
        color-mix(in srgb, var(--accent) 30%, transparent),
        transparent 66%
      ),
      radial-gradient(
        900px 700px at 106% 0%,
        color-mix(in srgb, var(--accent-strong) 40%, transparent),
        transparent 62%
      );
  }
}

/* ------------------------------------------------------------
   LAPIS 2 - SCRIM KETERBACAAN
   Dibuat jauh lebih ringan sejak warna dasar tidak lagi mendekati
   hitam. Scrim pekat akan menelan warna dasar yang baru dan hero
   kembali tampak hitam, jadi angka di sini terikat pada keputusan
   warna dasar; kalau dasar dikembalikan ke "malam", nilai kiri
   boleh dinaikkan lagi ke sekitar .70.
   ------------------------------------------------------------ */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      96deg,
      rgba(8, 15, 28, 0.44) 0%,
      rgba(8, 15, 28, 0.32) 42%,
      rgba(8, 15, 28, 0.16) 74%,
      rgba(8, 15, 28, 0.26) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 15, 28, 0.2) 0%,
      transparent 26%,
      transparent 70%,
      rgba(8, 15, 28, 0.3) 100%
    );
}

/* garis rambut atas & bawah, melintang penuh */
.hero-kepala::before,
.hero-kepala::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 7;
  pointer-events: none;
}
.hero-kepala::before {
  top: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
}
.hero-kepala::after {
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--logam),
    rgba(255, 255, 255, 0.28),
    transparent
  );
  opacity: 0.6;
}

/* Peralihan lembut ke isi halaman, meniru Arah B. Sengaja tipis
   supaya foto latar di sisi kanan tetap terbaca sampai ke bawah. */
.hero-kabut {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 15, 28, 0.32));
}

/* ------------------------------------------------------------
   SISI KIRI
   ------------------------------------------------------------ */
.hero-kiri {
  position: relative;
  z-index: 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(44px, 5vw, 72px) clamp(24px, 3.4vw, 52px);
}

.hero-kiri-isi {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 540px;
}

/* lencana: bingkai putih rapat, lalu satu cincin emas di luarnya */
.hero-lencana {
  position: relative;
  width: clamp(80px, 7.6vw, 110px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #f7f8fa 58%, #eceff3 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.hero-lencana img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: auto;
  display: block;
}
/* Di proyek, lambang dibungkus <picture> supaya bisa menyajikan webp
   dengan cadangan svg. display:contents membuat kotak <picture>
   lenyap, sehingga <img> menjadi anak grid langsung dan width:78%
   tetap dihitung terhadap lencana, bukan terhadap <picture> yang
   lebarnya menyusut mengikuti isinya. Tanpa baris ini, ukuran
   lambang jadi tidak menentu. */
.hero-lencana picture {
  display: contents;
}

/* Satu cincin saja. Cincin ini sengaja tidak beranimasi sendiri: ia
   ikut membesar dan mengecil karena induknya, .hero-lencana, yang
   bernapas. Satu keyframe menggerakkan lencana beserta cincinnya,
   jadi keduanya dijamin seirama dan tidak mungkin saling geser. */
.hero-lencana .denyut {
  position: absolute;
  inset: -15px;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid var(--logam);
  pointer-events: none;
  opacity: 0.44;
}

.hero-nama {
  display: block;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(19px, 2.35vw, 31px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  /* Kilau berjalan. Rentang geraknya wajib tetap di dalam 100% -> 0%.
     Kalau melewati batas itu, sebagian huruf di tepi tidak terlukis
     sama sekali dan lenyap. Ini pelajaran dari bug label sebelumnya,
     jangan disederhanakan. */
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.88) 36%,
    #ffffff 45%,
    var(--logam-terang) 50%,
    #ffffff 55%,
    rgba(255, 255, 255, 0.88) 64%,
    rgba(255, 255, 255, 0.88) 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-sub {
  display: block;
  margin-top: 9px;
  font-size: clamp(12px, 1.05vw, 13.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
}
.hero-sub + .hero-sub {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.58);
}

/* garis emas pendek sebagai penanda resmi, antara teks dan tombol */
.hero-garis {
  width: 56px;
  height: 2px;
  margin: clamp(18px, 2vw, 24px) auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--logam), var(--logam-terang));
}

/* ------------------------------------------------------------
   SISI KANAN
   ------------------------------------------------------------ */
.hero-kanan {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  /* padding samping ditipiskan supaya label besar dapat ruang lebih */
  padding: clamp(28px, 3.2vw, 44px) clamp(18px, 2.2vw, 32px);
}
/* Tanpa garis pemisah. Batas dua sisi dibentuk oleh luruhnya panel
   foto. Bayangan halus dipasang di pembungkusnya, bukan text-shadow,
   karena teks label memakai background-clip. */
.hero-kanan-isi {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: min(100%, 640px);
  /* bayangan dilembutkan: label kini besar dan tembus pandang, dan
     bayangan pekat membuatnya tampak kotor, bukan seperti kaca */
  filter: drop-shadow(0 4px 26px rgba(0, 0, 0, 0.42));
}

.hero-remah {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.62);
}
.hero-remah a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.hero-remah a:hover {
  color: #fff;
  text-decoration: underline;
}
.hero-remah span {
  color: #fff;
}

/* Label besar bergaya kaca terukir, meniru tipografi "BLUEBIRD" pada
   acuan: ukuran besar, huruf tipis, spasi lebar, dan putih tembus
   pandang sehingga foto ikut terbaca menembus huruf. Huruf antarmuka
   dipakai, bukan mono, karena mono terlalu teknis pada ukuran ini. */
.hero-label {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  /* Batas atas 54px, bukan lebih besar. Label terpanjang di situs ini
     adalah "INFRASTRUKTUR" (13 huruf); pada 92px kata itu melewati tepi
     kanan panel dan terpotong. Spasi huruf ikut diturunkan ke .05em
     karena spasi lebar adalah penyumbang lebar terbesar pada kata
     panjang. Lihat contoh 04 di wireframe untuk buktinya. */
  font-size: clamp(28px, 3.8vw, 50px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.06;
  text-indent: 0.05em; /* mengganti spasi kanan bawaan letter-spacing */
  /* Alfa dasar sengaja rendah (.30) supaya terasa kaca. Kilau yang
     berjalan menaikkannya ke putih terang dengan puncak emas. */
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.3) 34%,
    rgba(255, 255, 255, 0.72) 44%,
    var(--logam-terang) 50%,
    rgba(255, 255, 255, 0.72) 56%,
    rgba(255, 255, 255, 0.3) 66%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-label::after {
  content: "";
  display: block;
  width: clamp(56px, 7vw, 96px);
  height: 2px;
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--logam) 0%,
    var(--logam) 34%,
    #fff3c4 50%,
    var(--logam) 66%,
    var(--logam-terang) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  animation: heroGarisJalan 3.8s linear infinite;
}

/* ------------------------------------------------------------
   GERAK - satu ambient + satu sekali jalan
   ------------------------------------------------------------ */
@keyframes heroMasuk {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroNapas {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.085);
  }
}
/* Rentang WAJIB 100% -> 0%. Di luar rentang itu gradien bergeser
   keluar kotak teks dan huruf pertama ikut hilang, karena sisa
   area tidak kebagian cat (background-repeat:no-repeat).
   Pada 100% gradien rata kanan, pada 0% rata kiri, sehingga
   sorotan berjalan dari kiri ke kanan dan teks selalu tertutup. */
@keyframes heroKilau {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@keyframes heroGarisJalan {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
.hero-kiri-isi > *,
.hero-kanan-isi > * {
  animation: heroMasuk 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Lencana: masuk sekali, lalu bernapas terus. Jeda .9s itu wajib,
   karena heroMasuk dan heroNapas sama-sama menganimasikan transform.
   Selama masa jeda, heroNapas belum ikut campur sehingga animasi
   masuk tetap utuh; sesudahnya barulah napas mengambil alih. */
.hero-kiri-isi .hero-lencana {
  animation:
    heroMasuk 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both,
    heroNapas 4.8s ease-in-out 0.9s infinite;
}
/* nama lembaga: masuk sekali, lalu kilau berjalan terus. heroMasuk
   menggarap opacity dan transform, heroKilau menggarap
   background-position, jadi keduanya tidak berebut properti yang sama
   dan tidak perlu jeda seperti pada lencana. Durasinya 7,5s, sengaja
   beda dari label yang 6,5s, supaya keduanya tidak berkedip serentak. */
.hero-kiri-isi .hero-nama {
  animation:
    heroMasuk 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both,
    heroKilau 7.5s linear infinite;
}
.hero-sub {
  animation-delay: 0.18s;
}
.hero-garis {
  animation-delay: 0.22s;
}
/* label: masuk sekali, lalu kilau kaca berjalan terus */
.hero-kanan-isi .hero-label {
  animation:
    heroMasuk 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both,
    heroKilau 6.5s linear infinite;
}

/* parallax halus pada panel foto; --mx/--my disetel assets/hero.js */
@media (hover: hover) and (pointer: fine) {
  .hero-latar {
    transform: translate3d(
        calc(var(--mx, 0) * -8px),
        calc(var(--my, 0) * -5px),
        0
      )
      scale(1.06);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kiri-isi > *,
  .hero-kanan-isi > *,
  .hero-kiri-isi .hero-lencana,
  .hero-kiri-isi .hero-nama,
  .hero-kanan-isi .hero-label {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-kiri-isi .hero-nama {
    background-image: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
  .hero-kanan-isi .hero-label {
    background-image: none;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62);
    color: rgba(255, 255, 255, 0.62);
  }
  .hero-latar {
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   JUDUL HALAMAN DI BODY
   ------------------------------------------------------------ */
.judul-halaman {
  padding: clamp(38px, 4.6vw, 60px) 0 clamp(18px, 2.2vw, 28px);
}
.judul-cap {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 6px 14px;
}
.judul-cap:empty {
  display: none;
}
.judul-halaman h1 {
  margin: 16px 0 0;
  max-width: 940px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.judul-teks {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  line-height: 1.65;
  color: var(--ink2);
}
.judul-teks:empty {
  display: none;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--ink2);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-meta svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  color: var(--accent);
}

/* ------------------------------------------------------------
   PONSEL - dua sisi menumpuk, panel foto jadi pita bawah
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .hero-kepala {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-kiri {
    padding: clamp(32px, 7vw, 44px) 22px;
  }
  .hero-latar {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 190px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 46%);
    mask-image: linear-gradient(180deg, transparent, #000 46%);
  }
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(8, 15, 28, 0.2) 0%,
      rgba(8, 15, 28, 0.06) 40%,
      rgba(8, 15, 28, 0.42) 100%
    );
  }
  .hero-kanan {
    min-height: 170px;
    padding: 26px 22px;
  }
  .hero-kabut {
    height: 56px;
  }
  /* label diturunkan di layar sempit supaya label terpanjang tetap
     muat tanpa memaksa hero menjadi tinggi */
  .hero-label {
    font-size: clamp(22px, 7.4vw, 34px);
    letter-spacing: 0.05em;
  }
  .hero-label::after {
    margin-top: 12px;
    width: 56px;
  }
  .judul-halaman {
    padding: clamp(28px, 6vw, 40px) 0 12px;
  }
}