/* ==========================================================================
   bentang.co.id v3 — 20-layout
   Sumber: v3-mockup/assets/css/d.css (lulus audit, disetujui 2 Nov 2026)
   ========================================================================== */

figure { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--navy); color: var(--paper); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.on-navy :focus-visible { outline-color: var(--mint); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* Jangkar tidak boleh mendarat di bawah header tetap. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------------------------------------------------------------- header --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Padat secara bawaan: halaman tanpa hero tidak boleh menanggung scrim foto. */
  background-color: var(--paper);
  background-image: none;
  background-origin: border-box;
  background-repeat: no-repeat;
  /* tanpa border sama sekali: border 1 px membuat gradien terulang dan
     memunculkan garis tipis di bawah header saat di posisi atas */
  border: 0;
  transition: background-color 300ms var(--ease-out);
}
/* Transparan + scrim netral hanya selama header berada di atas foto hero. */
.js .has-hero .site-header:not(.is-solid) {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .46), rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, 0));
}
.site-header.is-solid {
  background-color: var(--paper);
  background-image: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.brand { display: flex; align-items: center; gap: 12px; }
/* Lambang mengikuti Varian C: putih saat header transparan di atas foto,
   berwarna asli begitu header menjadi padat setelah digulir. */
.brand img { width: 34px; height: 34px; flex-shrink: 0; }
.js .has-hero .site-header:not(.is-solid) .brand img { filter: brightness(0) invert(1); }

/* Nama merek di samping lambang: 17 px, bobot 500, putih di atas foto,
   berwarna tinta begitu header menjadi padat. */
.brand-name {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ink);
  transition: color 300ms var(--ease-out);
}
.js .has-hero .site-header:not(.is-solid) .brand-name { color: #fff; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

/* R2 — hover hanya opasitas/warna, tanpa garis tumbuh (R12). */
.nav a {
  position: relative;
  padding-block: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--body);
  transition: color 300ms var(--ease-out), opacity 200ms var(--ease-inout);
}
.nav a:hover { color: var(--ink); }

.js .has-hero .site-header:not(.is-solid) .nav a { color: #fff; opacity: .88; }
.js .has-hero .site-header:not(.is-solid) .nav a:hover { opacity: 1; }

.header-cta { flex-shrink: 0; }

/* ------------------------------------------------------------------ hero --- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(48px, 8vh, 96px);
  overflow: hidden;
  background-color: var(--navy);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* foto apa adanya: tanpa filter, tanpa tint warna */
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* scrim netral (hitam transparan) hanya agar teks terbaca; bukan tint merek */
  background-image: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 46%, rgba(0, 0, 0, 0) 78%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--on-dark); max-width: 22ch; }
.hero .sub { margin-top: 20px; color: rgba(240, 237, 230, .86); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* --------------------------------------------------------------- seksi --- */
.section { padding-block: clamp(64px, 8vh, 96px); }
.section-tight { padding-block: clamp(48px, 6vh, 72px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(32px, 4vh, 48px);
}
.section-head h2 { max-width: 24ch; }