@font-face{
  font-family:'Versailles';
  src:url('../fonts/versailles.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --cream:#fffef7;
  --paper:#faf9f2;
  --ink:#0a0a0a;
  --red:#e4212a;
  --graphite:#6b655e;
  --ash:#8b857a;
  --edge: clamp(20px, 5vw, 64px);
  --edge-color:rgba(10,10,10,0.14);
  /* Naikkan angka ini kalau video vertikal di section video hero masih
     terlihat ada bar hitam di kiri-kanan setelah video asli dipasang. */
  --yt-hero-zoom: 2.6;
  /* Treatment "moody"/editorial di video hero (murni gaya, bukan lagi buat
     legibility teks — wordmark sekarang di section terpisah tanpa video).
     Turunkan --yt-hero-grayscale (mis. 0.4) kalau warna asli video masih
     mau terasa, atau ke 0 untuk warna asli penuh. */
  --yt-hero-grayscale: 0.85;
  --yt-hero-blur: 4px;
  --yt-hero-brightness: 0.8;
  /* Kecepatan parallax section video hero: 0 = diam mengikuti scroll biasa
     (tanpa efek), 1 = ikut penuh kecepatan scroll. Makin kecil, makin
     terasa videonya "di belakang kaca"/lebih lambat dari konten lain. */
  --video-parallax: 0.22;
  /* Isi huruf "Sisi Publik" yang bolong: video hero ASLI (live, sama
     sumbernya dengan section video di bawah), diblur+dipotong bentuk
     huruf langsung lewat CSS filter+mask (bukan foto statis). */
  --wordmark-blur: 10px;
  --wordmark-brightness: 1.2;
  --wordmark-contrast: 1.05;
  --wordmark-parallax: 0.35;
  /* Sama seperti --yt-hero-zoom, video sumber kemungkinan vertikal —
     naikkan kalau masih ada bar hitam di kotak isian huruf. */
  --yt-wordmark-zoom: 3.2;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  background:var(--cream); color:var(--ink);
  font-family:'Poppins', sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.label{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; display:flex; align-items:center; gap:8px; }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; flex:none; }
.pill{ display:inline-flex; align-items:center; padding:14px 26px; border-radius:999px; font-size:0.85rem; font-weight:500; border:1px solid var(--ink); background:var(--ink); color:var(--cream); transition:transform .2s ease; }
.pill:hover{ transform:translateY(-1px); }
.pill--red{ background:var(--red); border-color:var(--red); }
.pill--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.pill--outline:hover{ background:var(--ink); color:var(--cream); }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:18px var(--edge); background:var(--cream); }
.brand-lockup{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.brand-eyebrow{ display:flex; flex-direction:column; line-height:1.3; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }
.brand-eyebrow span{ font-weight:400; color:var(--graphite); }

/* =========================================================
   BAGIAN 1a — wordmark di background POLOS (--paper, terang).
   Section normal (bukan pin/sticky) — scroll biasa seperti section lain.
   Huruf "Sisi Publik" BOLONG (isi transparan) dan keisi VIDEO HERO ASLI
   (live, sumbernya SAMA dengan iframe di section video bawahnya —
   data-yt="yL1TnKoDudg") yang diblur+dipotong bentuk huruf LANGSUNG
   lewat CSS `filter` + `mask-image` (mask-mode:alpha) pada elemen
   #wordmarkYtSlot — BUKAN canvas, BUKAN foto statis. `filter`/`mask`
   itu operasi compositing murni (bukan baca-pixel), jadi berlaku juga
   untuk iframe YouTube cross-origin — beda dari pendekatan canvas lama
   yang gagal untuk iframe. TIDAK ADA fill warna merah (kedua kata dapat
   treatment yang sama persis). Lihat syncWordmarkMask()/
   updateWordmarkParallax() di js/main.js untuk detail & knob tuning
   (--wordmark-blur/brightness/contrast/parallax, --yt-wordmark-zoom
   di :root).
   ========================================================= */
.hero-text{
  min-height:82vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8vh var(--edge); background:var(--paper); overflow:hidden;
}
.hero-eyebrow{ color:var(--graphite); margin-bottom:20px; justify-content:center; }
.wordmark-wrap{ position:relative; }
.hero-wordmark{
  font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(2.6rem, 10vw, 8.6rem);
  line-height:0.94; letter-spacing:-0.02em;
  color:var(--ink); position:relative; z-index:1;
  /* fallback: kalau JS/CSS masking tidak didukung, atau video belum siap,
     huruf tampil solid ink, tetap kebaca — tidak pernah hilang total. */
}
/* Ditambahkan oleh JS begitu video hero untuk isian huruf sudah terpasang
   DAN browser dipastikan dukung CSS mask-image (lihat initYouTubeSlots()
   di js/main.js) — sebelum itu, huruf tetap solid var(--ink) di atas. */
.hero-wordmark.video-active{ color:transparent; }
/* .accent SENGAJA tidak diberi warna apa pun di sini — biar ikut sama
   persis dengan treatment huruf lainnya (bolong + isi video), tanpa
   fill merah. Class-nya dibiarkan di HTML untuk fleksibilitas nanti. */
.hero-caption{ margin-top:24px; color:var(--graphite); font-size:clamp(1.05rem, 2.4vw, 1.7rem); font-weight:400; max-width:34ch; line-height:1.4; }
.hero-caption em{ font-family:'Versailles','Poppins',serif; font-style:italic; color:var(--red); }

/* Kotak isian huruf: posisi & ukurannya di-sync JS persis ke bounding box
   teks (syncWordmarkMask()). Video di dalamnya diblur+diburamkan lewat
   `filter`, lalu dipotong ke bentuk huruf "Sisi Publik" lewat SVG
   data-URI sebagai `mask-image` (mask-mode:alpha — WAJIB eksplisit,
   mode default/luminance TIDAK render di sejumlah browser). Mulai
   tersembunyi (opacity:0) sampai JS konfirmasi video terpasang, supaya
   tidak pernah kelihatan kotak video mentah tanpa mask. */
.wordmark-yt-slot{
  position:absolute; z-index:2; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  filter: blur(var(--wordmark-blur)) brightness(var(--wordmark-brightness)) contrast(var(--wordmark-contrast));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-mode:alpha; mask-mode:alpha;
}
.wordmark-yt-slot.is-ready{ opacity:1; }
.wordmark-yt-slot .yt-wordmark-wrap{ position:absolute; inset:-20%; overflow:hidden; will-change:transform; }
.wordmark-yt-slot .yt-wordmark-wrap iframe{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:100vw; height:56.25vw;
  min-height:220%; min-width:391vh;
  transform:translate(-50%,-50%) scale(var(--yt-wordmark-zoom));
}

/* =========================================================
   BAGIAN 1b — video full-bleed, section TERPISAH dari teks (muncul
   setelah Bagian 1a discroll lewat), dengan parallax: layer video
   dibuat lebih tinggi dari kontainernya lalu digeser oleh JS mengikuti
   scroll dengan kecepatan LEBIH LAMBAT (--video-parallax), jadi berasa
   ada kedalaman. Lihat updateVideoParallax() di js/main.js.
   ========================================================= */
.hero-video{ position:relative; height:130vh; overflow:hidden; background:#0a0a0a; }
.hero-video .parallax-layer{
  position:absolute; left:0; right:0; top:-15%; height:130%; overflow:hidden; will-change:transform;
  filter: grayscale(var(--yt-hero-grayscale)) blur(var(--yt-hero-blur)) brightness(var(--yt-hero-brightness));
}
.hero-video .parallax-layer .hero-video-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%;
}
/* Wadah iframe video: sama seperti sebelumnya, video sumber kemungkinan
   vertikal (9:16) tapi harus tampil FULL LANDSCAPE (di-zoom/di-crop) —
   atur --yt-hero-zoom di :root kalau masih ada bar hitam kiri-kanan. */
.hero-video .parallax-layer .yt-bg-wrap{ position:absolute; inset:0; overflow:hidden; }
.hero-video .parallax-layer .yt-bg-wrap iframe{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:100vw; height:56.25vw;
  min-height:130vh; min-width:231.1vh;
  transform:translate(-50%,-50%) scale(var(--yt-hero-zoom));
}
/* Gradient tipis HANYA di belakang caption kecil kiri-bawah (bukan overlay
   penuh satu layar lagi — sudah tidak perlu, karena tidak ada wordmark besar
   yang harus dilindungi kontrasnya di section ini). */
.hero-video-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:6vh var(--edge);
  background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.hero-video-caption .label{ color:rgba(255,254,247,0.8); margin-bottom:10px; }
.hero-video-lead{ color:var(--cream); font-weight:500; font-size:clamp(1.3rem,3vw,2.2rem); max-width:24ch; line-height:1.25; }

/* =========================================================
   DESKRIPSI — profile, normal scroll
   ========================================================= */
.profile{ padding:120px var(--edge) 90px; }
.profile-label{ margin-bottom:24px; }
.profile-lead{ font-weight:400; font-size:clamp(1.8rem, 4.2vw, 3.2rem); line-height:1.22; letter-spacing:-0.01em; max-width:20ch; }
.profile-sub{ margin-top:44px; max-width:46ch; margin-left:auto; color:var(--graphite); font-size:1.05rem; line-height:1.6; }
.profile-values{ margin-top:80px; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.profile-values .v-num{ color:var(--red); font-family:'Versailles','Poppins',serif; font-style:italic; font-size:2.4rem; }
.profile-values h3{ margin-top:10px; font-weight:500; font-size:1.15rem; letter-spacing:-0.005em; }
.profile-values p{ margin-top:8px; color:var(--graphite); font-size:0.92rem; line-height:1.5; max-width:28ch; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:translateY(0); }
@media (max-width:760px){ .profile-sub{ margin-left:0; } .profile-values{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   BAGIAN 2 — vertical scroll driven horizontal gallery
   ========================================================= */
.hgallery-wrap{ position:relative; }
.hgallery-inner{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ink); color:var(--cream); display:flex; flex-direction:column; }
.hgallery-head{ display:flex; justify-content:space-between; align-items:center; padding:28px var(--edge) 0; flex:none; }
.hgallery-counter{ color:var(--ash); font-size:0.85rem; letter-spacing:0.04em; }
.hgallery-track{ flex:1; display:flex; align-items:center; gap:clamp(48px, 8vw, 140px); padding:0 var(--edge); will-change:transform; }
.h-card{ flex:0 0 auto; width:min(74vw, 900px); display:grid; grid-template-columns:0.9fr 1.1fr; align-items:center; gap:40px; }
.h-card-media{ width:100%; aspect-ratio:4/5; position:relative; overflow:hidden; background:linear-gradient(200deg, #35302a, #100f0d 75%); }
.h-card-media img{ width:100%; height:100%; object-fit:cover; }
.h-card-media .yt-card-wrap{ position:absolute; inset:0; overflow:hidden; }
.h-card-media .yt-card-wrap iframe{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:100%; height:177.78%; min-width:56.25%; min-height:100%;
  transform:translate(-50%,-50%) scale(1.65);
}
.h-card-media::after{ content:attr(data-tag); position:absolute; left:16px; bottom:14px; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,254,247,0.75); z-index:2; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
.h-card-index{ color:var(--ash); margin-bottom:16px; }
.h-card-title{ font-family:'Poppins', sans-serif; font-weight:600; font-size:clamp(2.2rem, 4.4vw, 4rem); line-height:0.98; letter-spacing:-0.02em; }
.h-card-tags{ display:flex; flex-direction:column; gap:8px; margin-top:22px; }
.h-card-tags span{ font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:500; border-bottom:1px solid rgba(255,254,247,0.3); padding-bottom:4px; width:fit-content; }
.h-card-desc{ margin-top:20px; color:var(--ash); font-size:0.98rem; line-height:1.6; max-width:34ch; }
.hgallery-foot{ flex:none; display:flex; justify-content:space-between; align-items:center; padding:0 var(--edge) 30px; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ash); }
.hgallery-hint{ display:flex; align-items:center; gap:10px; }
.hgallery-hint .arrow{ display:inline-block; width:34px; height:1px; background:rgba(255,254,247,0.4); position:relative; }
.hgallery-hint .arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid rgba(255,254,247,0.6); border-bottom:1px solid rgba(255,254,247,0.6); transform:rotate(-45deg); }
@media (max-width:760px){ .h-card{ width:82vw; grid-template-columns:1fr; gap:20px; } .h-card-media{ aspect-ratio:16/10; } }

/* =========================================================
   BAGIAN 3 — runway transition: multi-speed columns + colour
   crossfade + font swap at the end
   ========================================================= */
.transition-wrap{ position:relative; height:340vh; }
.transition-inner{ position:sticky; top:0; height:100vh; overflow:hidden; background:#0a0a0a; }
.t-gridlines{ position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); pointer-events:none; }
.t-gridlines span{ border-right:1px solid rgba(128,128,128,0.18); }
.t-columns{ position:absolute; inset:0; z-index:2; }
.t-col{ position:absolute; top:0; width:min(15vw, 210px); will-change:transform; }
.t-tile{ width:100%; aspect-ratio:3/4; margin-bottom:clamp(60px, 14vh, 160px); position:relative; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.35); background:#20242b; }
.t-tile img{ width:100%; height:100%; object-fit:cover; }
/* Tile bisa VIDEO YouTube, bukan cuma foto — ganti `<img src="media/x.jpg">`
   di HTML dengan `data-yt="ID_VIDEO"` di elemen `.t-tile`-nya (kosongkan,
   tanpa img), sama seperti kartu Wi-cara/Analisis di Bagian 2. Bisa dicampur
   bebas, sebagian tile foto sebagian video, tidak harus semua sama. */
.t-tile .yt-card-wrap{ position:absolute; inset:0; overflow:hidden; }
.t-tile .yt-card-wrap iframe{
  position:absolute; top:50%; left:50%; border:0; pointer-events:none;
  width:100%; height:177.78%; min-width:56.25%; min-height:100%;
  transform:translate(-50%,-50%) scale(1.65);
}
.t-tile::after{ content:attr(data-tag); position:absolute; left:10px; bottom:8px; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.75); text-shadow:0 1px 4px rgba(0,0,0,0.6); z-index:2; }
.t-text{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--edge); }
.t-label{ margin-bottom:20px; justify-content:center; }
.t-head{
  font-family:'Versailles','Poppins',serif; font-weight:500;
  font-size:clamp(2.4rem, 6.4vw, 5.2rem); line-height:1.05; letter-spacing:-0.02em;
  transition:font-weight .3s ease;
  /* Border tipis hitam permanen di semua state warna (teks sempat mulai
     putih/krem di awal transisi Bagian 3 — border ini jaga tetap kebaca
     walau background di baliknya kebetulan ikut terang). Aman didiamkan
     di browser yang belum dukung -webkit-text-stroke: teks tetap solid
     seperti biasa, cuma tanpa border-nya. */
  -webkit-text-stroke: 1.4px var(--ink);
}
.t-head.is-accent{ font-weight:400; }
@media (max-width:760px){ .t-col{ width:26vw; } }

/* =========================================================
   HUBUNGI KAMI — icon sosmed asli + WA + form email
   ========================================================= */
.contact{ padding:110px var(--edge) 70px; max-width:1440px; margin:0 auto; }
.contact-label{ margin-bottom:24px; }
.contact-label .dot{ background:var(--red); }
.contact-head{ font-weight:400; font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.15; max-width:16ch; letter-spacing:-0.01em; }

.social-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.social-btn{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--edge-color);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.social-btn svg{ width:20px; height:20px; }
.social-btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); transform:translateY(-2px); }
.social-btn:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.contact-grid{ margin-top:64px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,72px); align-items:start; }
.contact-copy p{ color:var(--graphite); font-size:1.02rem; line-height:1.6; max-width:44ch; }
.contact-copy .contact-email-line{ margin-top:28px; display:flex; align-items:center; gap:10px; font-size:0.95rem; color:var(--ink); font-weight:500; }
.contact-copy .contact-email-line svg{ width:18px; height:18px; flex-shrink:0; color:var(--red); }

.contact-cards{ display:flex; flex-direction:column; gap:22px; }
.wa-card{ background:var(--ink); color:var(--cream); padding:40px; border-radius:2px; }
.wa-card .label{ color:var(--ash); margin-bottom:16px; }
.wa-card .card-title{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.wa-card .card-title svg{ width:22px; height:22px; color:#3ee06a; }
.wa-card .number{ display:block; font-size:clamp(1.25rem, 2.1vw, 1.6rem); font-weight:500; letter-spacing:-0.01em; margin:14px 0 24px; }

.email-card{ background:var(--paper); border:1.5px solid var(--edge-color); padding:40px; border-radius:2px; display:flex; flex-direction:column; gap:16px; }
.email-card .card-title{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.email-card .card-title svg{ width:20px; height:20px; color:var(--red); }
.email-card .field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.email-card input, .email-card textarea{
  flex:1; min-width:160px; font-family:inherit; font-size:0.92rem; color:var(--ink);
  background:var(--cream); border:1.4px solid var(--edge-color); border-radius:3px; padding:13px 14px; resize:vertical;
}
.email-card textarea{ min-height:96px; }
.email-card input::placeholder, .email-card textarea::placeholder{ color:var(--ash); }
.email-card input:focus, .email-card textarea:focus{ outline:none; border-color:var(--red); }
.email-card button{ align-self:flex-start; cursor:pointer; border:1.5px solid var(--ink); }
.email-card .form-note{ font-size:0.76rem; color:var(--ash); line-height:1.5; }
.email-card .form-status{ font-size:0.8rem; color:var(--red); font-weight:500; min-height:1.1em; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ padding:28px var(--edge); border-top:1px solid var(--edge-color); max-width:1440px; margin:40px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:0.85rem; font-weight:500; }
.footer-brand img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.footer-meta{ font-size:0.78rem; color:var(--graphite); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}