/* ═══════════════════════════════════════════════════════════════════
   devro.click — "field report"
   Arah desain: laporan lapangan, bukan kartu pemasaran.
   Halaman ini adalah satu dokumen: film pembuka yang diputar oleh
   scroll, lalu lembar-lembar kertas tempat kerja itu dicatat.
   Palet & kontras sudah diverifikasi AAA (7:1) atau lebih baik.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Font, di-host sendiri ─────────────────────────────────────── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('/fonts/Archivo-var.woff2') format('woff2');
  font-stretch:62% 125%}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;
  font-display:swap;src:url('/fonts/Archivo-var-italic.woff2') format('woff2');
  font-stretch:62% 125%}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url('/fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url('/fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;
  font-display:swap;src:url('/fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2')}

/* ── Token ─────────────────────────────────────────────────────── */
:root{
  /* kertas (bagian terang) */
  --paper:#F4F1EA;
  --paper-2:#EAE6DC;
  --ink:#14171A;        /* 15.95:1 di paper */
  --ink-2:#4A4A46;      /*  7.89:1 di paper */
  --rule:#CFC9BA;
  --rule-2:#BCB5A4;
  --rust:#932C19;       /*  7.12:1 di paper, 6.44:1 di paper-2 */

  /* film (bagian gelap) */
  --void:#08090A;
  --void-2:#101214;
  --film-ink:#F0EBE0;   /* 16.76:1 di void */
  --film-body:#D6CFC0;  /* 12.85:1 di void */
  --film-label:#BDB6A7; /*  9.88:1 di void */
  --signal:#D9A441;     /*  8.86:1 di void */
  --rule-dark:#2A2E31;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Plex Sans',system-ui,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;

  --gut:clamp(1.25rem,4.5vw,4.5rem);
  --max:66rem;
  --sp:clamp(4.5rem,10vw,9rem);
}

/* ── Dasar ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:3.6rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .22vw,1.0625rem);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--display);font-weight:600;
  font-stretch:96%;letter-spacing:-.018em;line-height:1.06;
  margin:0;text-wrap:balance}

a{color:inherit}
img,video{max-width:100%;display:block}
code{font-family:var(--mono);font-size:.9em}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.film :focus-visible{outline-color:var(--signal)}

.skip{position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;
  font:500 .85rem/1 var(--mono);text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

/* ── Kepala ────────────────────────────────────────────────────── */
/* Melapisi halaman (fixed), bukan mendorongnya. Itu membuat film
   benar-benar berada DI BELAKANG kepala — sehingga kepala bisa masuk
   ke dalam film alih-alih memenggalnya dengan potongan terang. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--gut);
  background:var(--paper);border-bottom:1px solid var(--rule);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.hdr__mark{display:inline-flex;align-items:baseline;gap:.5rem;
  text-decoration:none}
.hdr__glyph{color:var(--rust);font-size:.7rem;transform:translateY(-.15em);
  transition:color .28s ease}
.hdr__word{font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.03em}
.hdr__nav{display:flex;gap:clamp(.9rem,2.2vw,1.7rem);margin-left:auto}
.hdr__nav a{font:500 .78rem/1 var(--mono);letter-spacing:.02em;
  text-decoration:none;color:var(--ink-2);text-transform:lowercase;
  padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s}
.hdr__nav a:hover{color:var(--ink);border-bottom-color:var(--rust)}
.hdr__mail{font:500 .78rem/1 var(--mono);text-decoration:none;
  color:var(--ink-2);padding:.35rem 0;display:inline-flex;
  align-items:center;gap:.4rem;transition:color .2s}
/* Penanda kontak memakai bentuk yang sama dengan logo (wajik), supaya
   bahasa bentuknya konsisten — bukan lingkaran yang tak berhubungan. */
.hdr__mail::before{
  content:"";width:.3rem;height:.3rem;flex:none;
  background:currentColor;transform:rotate(45deg);
  transition:transform .25s ease;
}
.hdr__mail:hover{color:var(--rust)}
.hdr__mail:hover::before{transform:rotate(45deg) scale(1.45)}
@media (max-width:52rem){.hdr__mail{display:none}}
@media (max-width:34rem){.hdr__nav{display:none}}

/* Di atas film, kepala menjadi bagian dari film — bukan potongan
   terang yang memenggal layar. Ditambahkan JS hanya saat film aktif,
   jadi tanpa JS kepala tetap aman di atas kertas. */
/* Hero kini di atas kertas, jadi kepala tidak perlu mode gelap lagi.
   Kelasnya dipertahankan (dan tetap dipasang JS) supaya tidak ada
   permukaan gelap yang datang kembali tanpa disadari. */
.hdr--film{background:var(--paper);border-bottom-color:var(--rule);
  color:var(--ink)}

/* ══ FILM — pembuka: rekaman berbingkai di atas kertas ═════════ */
/* Kenapa berbingkai, bukan full-bleed: terukur, versi full-bleed
   menyisakan 96% viewport nyaris hitam dan hanya 3% berisi konten
   visual — halaman terbaca sebagai dokumen teks di ruang kosong.
   Dengan bingkai, film jadi gambar yang benar-benar dilihat. */
/* Hero sekarang di atas KERTAS, bukan void: filmnya adalah berkas cetak
   (mean luminance ~222 dari 13 sebelumnya), jadi latar gelap hanya akan
   memotongnya. Permukaan kertas membuat pembuka terbaca sebagai halaman
   pertama laporan. */
.film{background:var(--paper);color:var(--ink);position:relative;
  border-bottom:1px solid var(--rule)}
.film__track{height:250vh}
@media (max-width:48rem){.film__track{height:220vh}}

.film__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--gut) 6.5rem;
}

/* Kolom teks di kanan tidak boleh meluber keluar fold: terukur bloknya
   mencapai y=988 pada viewport 900, dan separuh kanan hero hanya berisi
   3,0% tinta sementara kiri 23,4%. Jadi: tinggi dibatasi, tipografi
   dirapatkan, dan sisi kanan diberi jangkar (meta) supaya tidak kosong. */
.film__wrap{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  /* align-items:center memusatkan sel TERTINGGI, sehingga kolom teks
     terdorong keluar fold atas DAN bawah — terukur b=971 pada viewport
     900 dan bingkai film t=-95. Jadi: stretch, lalu tiap sel memusatkan
     isinya sendiri. */
  align-items:stretch;
  max-width:78rem;width:100%;margin-inline:auto;
  max-height:min(76vh,46rem);
}
.film__side{
  display:flex;flex-direction:column;justify-content:center;min-height:0;
}
.film__frame{
  display:flex;flex-direction:column;justify-content:center;min-height:0;
}
@media (max-width:60rem){
  .film__wrap{grid-template-columns:1fr;gap:1.4rem;align-items:start;
    max-height:none}
  .film__side{max-height:none;justify-content:flex-start}
}
/* Di ponsel, film + teks tidak mungkin muat dalam satu fold bersama.
   Jadi pin dilepas: bagian ini mengalir seperti halaman biasa, dan film
   tetap diputar oleh scroll (posisi sticky dipertahankan pada bingkainya). */
@media (max-width:48rem){
  .film__track{height:auto}
  .film__stage{position:relative;height:auto;padding:4.5rem var(--gut) 3rem}
  .film__meta{position:relative;left:auto;right:auto;bottom:auto;
    transform:none;width:100%;margin-top:1.6rem}
  .beat{position:static !important;left:auto !important;top:auto !important;
    transform:none !important;width:auto !important;max-width:100%;
    text-align:left;margin:1.4rem 0 0;
    opacity:1 !important;visibility:visible !important}
  .film__beats{height:auto;position:static}
}

/* Bingkai: satu garis tegas + padding, seperti lampiran laporan. */
.film__frame{
  position:relative;margin:0;
  border:1px solid var(--ink);
  padding:clamp(.35rem,.7vw,.55rem);
  background:var(--paper-2);
  /* Sisi tebal seperti lampiran laporan, bukan drop-shadow mengambang. */
  box-shadow:clamp(.5rem,1.2vw,1rem) clamp(.5rem,1.2vw,1rem) 0 var(--rule);
}
.film__media{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;
  /* Film ini digambar untuk dibaca sebagai gambar; jangan digelapkan. */
  filter:brightness(1.04) contrast(1.03);
}
/* Tidak ada scrim sama sekali. Versi sebelumnya memberi gradasi gelap di
   tepi bingkai, dan itu terbaca sebagai "bayangan CRT" yang bertabrakan
   dengan garis vektor yang tajam di sekitarnya. Filmnya sudah berkontras
   tinggi; biarkan rata. */
.film__grade{display:none}

/* HUD di BAWAH bingkai, bukan di atasnya: sebelumnya ia duduk di atas
   teks film sendiri ("SCAN ..." menimpa "PERILAKU BENAR") dan terbaca
   sebagai bug posisi. Sekarang jadi baris keterangan yang jelas. */
.film__hud{
  margin:.75rem 0 0;display:flex;align-items:baseline;gap:.5rem;
  font:400 .68rem/1.6 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
}
.film__hud .film__hint{margin-left:auto}
.film__hud-a{color:var(--ink-2);opacity:.85}
.film__frame-no{color:var(--rust);font-weight:500;letter-spacing:.1em}
.film__tot{opacity:.55;letter-spacing:.06em}
.film__reticle{
  position:absolute;top:calc(clamp(.35rem,.7vw,.55rem) + .9rem);
  right:calc(clamp(.35rem,.7vw,.55rem) + .9rem);
  width:1.1rem;height:1.1rem;
  border-top:2px solid var(--rust);border-right:2px solid var(--rust);
  opacity:.9;
}

.film__figure{display:flex;flex-direction:column;justify-content:center;
  min-height:0}
.film__side{min-width:0}
.kicker--film{color:var(--ink-2);margin-bottom:clamp(1rem,2.2vw,1.5rem)}
.kicker--film::after{background:var(--rule-2)}
.kicker--film .kicker__n{color:var(--rust)}

.film__beats{position:relative;height:0}
.beat{
  position:absolute;left:50%;transform:translate(-50%,1.2rem);
  top:calc(100% + 2.2rem);
  width:min(64rem,calc(100vw - 2 * var(--gut)));
  text-align:center;
  opacity:0;visibility:hidden;
  will-change:opacity,transform;
}

.film__meta{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(1.4rem,3.5vh,2.2rem);z-index:3;
  /* Sejajar dengan lebar .film__wrap, bukan lebar viewport: sebelumnya
     prompt melayang di gutter karena tidak terikat grid mana pun. */
  width:min(78rem,calc(100vw - 2 * var(--gut)));
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  font:400 .72rem/1.5 var(--mono);letter-spacing:.07em;
  color:var(--ink-2);
  border-top:1px solid var(--rule-2);padding-top:.85rem;
}
/* Catatan pendamping di kolom kanan: mengikat gambar ke maknanya, dan
   memberi jangkar bawah supaya kolom kanan tidak berakhir di udara. */
.film__note{
  margin:clamp(1.2rem,2.4vw,1.7rem) 0 0;padding:.85rem 0 0;
  border-top:1px solid var(--rule-2);
}
.film__note figcaption{
  margin:0;font:400 .8rem/1.62 var(--mono);color:var(--ink-2);max-width:34em;
}
.film__note-k{
  display:block;color:var(--rust);letter-spacing:.12em;
  text-transform:uppercase;font-size:.68rem;margin-bottom:.35rem;
}
.film__meta-hint{margin-left:auto;color:var(--rust);transition:opacity .3s}
@media (max-width:34rem){.film__meta-hint{display:none}}

@supports (animation-timeline:view()){
  /* biarkan JS yang mengemudikan; ini hanya pengaman tanpa JS */
}

.beat__h{
  color:var(--ink);
  font-size:clamp(1.95rem,5.1vw,3.5rem);
  font-weight:640;font-stretch:92%;
  letter-spacing:-.03em;
  /* Terukur: pada rasio 1.02 kotak baris TUMPANG TINDIH 4,9px, jadi
     ascender/descender saling menabrak. Font ini punya kotak alami
     1,09em, jadi 1.1 memberi napas tanpa kehilangan kepadatan. */
  line-height:1.1;
  margin-bottom:clamp(1.35rem,3vw,2.3rem);
}
.beat__p{
  margin:0;color:var(--ink-2);font-size:clamp(.98rem,1.25vw,1.08rem);
  line-height:1.58;max-width:32em;
}
.beat__p--lead{
  font-size:clamp(1.25rem,2.5vw,1.85rem);line-height:1.42;
  font-weight:400;letter-spacing:-.012em;
  color:var(--ink);max-width:26em;
}

.film__meta{
  position:absolute;left:var(--gut);right:var(--gut);
  bottom:clamp(1.4rem,3.5vh,2.2rem);z-index:3;
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  font:400 .72rem/1.5 var(--mono);letter-spacing:.07em;
  color:var(--film-label);
  border-top:1px solid var(--rule-dark);padding-top:.85rem;
}

/* ── Rel fakta di kolom kanan hero ─────────────────────────────── */
.rail{
  margin:clamp(1.4rem,2.8vw,2rem) 0 0;
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule-2);
}
.rail__r{
  display:grid;grid-template-columns:5.4rem 1fr;gap:.9rem;
  /* Padding atas > bawah: baris berbalut dua baris sebelumnya terasa
     terjepit garis pemisah. */
  padding:.75rem 0 .95rem;border-bottom:1px solid var(--rule);
}
.rail__k{
  margin:0;padding-top:.15rem;
  font:400 .68rem/1.55 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
}
.rail__v{
  margin:0;font-size:.88rem;line-height:1.58;color:var(--ink-2);
}

/* ══ LEMBAR — bagian kertas ════════════════════════════════════ */
/* Peralihan gelap↔terang memakai SATU garis aturan, bukan gradasi
   kabur. Gradasi terdahulu terbaca sebagai artefak blur; garis tegas
   dan datar terbaca sebagai keputusan. */
.seam{
  position:relative;
  height:clamp(2.6rem,5vw,4rem);
  background:var(--paper);
  border-top:1px solid var(--void);
}
.seam::before{
  content:"";position:absolute;left:var(--gut);right:var(--gut);top:50%;
  height:1px;background:var(--rule-2);
}
.seam--out{
  background:var(--void);border-top:1px solid var(--rule-dark);
}
.seam--out::before{background:var(--rule-dark)}

.sheet{
  padding:var(--sp) var(--gut);
  max-width:var(--max);margin-inline:auto;
}
.sheet--first{padding-top:clamp(3.5rem,7vw,6rem)}
.sheet--quiet{background:var(--paper-2);
  max-width:none;
}
.sheet--quiet>*{max-width:var(--max);margin-inline:auto}

.kicker{
  font:500 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(1.6rem,3.4vw,2.6rem);
  display:flex;align-items:center;gap:.85rem;
}
/* Aturan kicker berhenti pendek dan tidak pernah melayang ke kolom
   berikutnya — ukurannya mengikuti panjang label. */
.kicker::after{content:"";flex:0 0 auto;width:2.2rem;height:1px;
  background:var(--rule-2)}
.kicker__n{color:var(--rust);font-weight:500}
.kicker--sub{margin-top:clamp(3.4rem,7vw,5rem)}

/* ── Satu sistem bingkai untuk SEMUA gambar ───────────────────── */
/* Sebelumnya tiap bagian punya bingkai sendiri-sendiri (kartu pucat,
   outline hitam tebal, kartu hitam terbalik) sehingga terbaca tidak
   konsisten. Sekarang semuanya memakai satu rumus:
   garis tinta 1px + padding + sisi tebal di kanan-bawah (seperti
   lampiran laporan yang dijilid). */
.plate{margin:0 0 clamp(2.4rem,5vw,3.6rem)}
.plate__frame,
.film__frame{
  border:1px solid var(--ink);
  background:var(--paper-2);
  padding:clamp(.4rem,.9vw,.7rem);
  overflow:hidden;
  box-shadow:clamp(.45rem,1vw,.85rem) clamp(.45rem,1vw,.85rem) 0 var(--rule);
}
/* Varian gelap hanya membalik permukaan, rumus bingkainya sama. */
.plate--dark .plate__frame{background:var(--void);border-color:var(--ink);
  box-shadow:clamp(.45rem,1vw,.85rem) clamp(.45rem,1vw,.85rem) 0 var(--rule-2)}
.plate__img{
  width:100%;height:auto;display:block;
  /* Tepi gambar menyatu dengan kertas: gambar dibuat di palet yang sama. */
  outline:1px solid rgba(0,0,0,.06);outline-offset:-1px;
}
.plate__cap{
  display:flex;gap:.9rem;align-items:baseline;
  margin-top:.85rem;
  font:400 .78rem/1.62 var(--mono);color:var(--ink-2);
  max-width:52em;
}
.plate__num{
  flex:none;color:var(--rust);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;font-size:.72rem;
}

.h2{
  font-size:clamp(1.75rem,4.4vw,3.15rem);
  font-weight:620;font-stretch:94%;letter-spacing:-.028em;
  max-width:22em;margin-bottom:clamp(2.2rem,4.6vw,3.4rem);
}
.h2--tight{margin-bottom:clamp(.9rem,2vw,1.3rem)}
.lede{color:var(--ink-2);max-width:36em;margin:0 0 clamp(1.8rem,3.6vw,2.6rem)}
.inline{background:var(--paper);border:1px solid var(--rule-2);
  padding:.1em .45em;border-radius:2px;color:var(--ink)}

/* ── Buku besar: baris bernama, bukan kartu ───────────────────── */
.ledger{border-top:1px solid var(--rule-2)}
.ledger__row{
  display:grid;grid-template-columns:minmax(11rem,17rem) 1fr;
  gap:clamp(1rem,4vw,3.5rem);
  padding:clamp(1.5rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--rule);
}
.ledger__k{font-size:clamp(1.06rem,1.8vw,1.32rem);font-weight:600;
  letter-spacing:-.018em;line-height:1.24;color:var(--ink)}
.ledger__v{margin:0;color:var(--ink-2);max-width:44em}
@media (max-width:44rem){
  .ledger__row{grid-template-columns:1fr;gap:.55rem}
}

/* ── Kutipan ───────────────────────────────────────────────────── */
/* Satu keluarga huruf untuk seluruh halaman: display sans + mono.
   Serif italic dari draf sebelumnya dicabut — dua kritik menyebutnya
   tidak earned, dan menariknya keluar membuat sistem tipografi jujur. */
.pull{
  margin:0 0 clamp(3rem,6vw,4.5rem);
  padding:clamp(1.4rem,3vw,2rem) 0 0;
  max-width:46rem;
  border-top:2px solid var(--ink);
}
.pull__q{
  margin:0;
  font-family:var(--display);font-weight:600;font-stretch:92%;
  font-size:clamp(1.4rem,3.3vw,2.35rem);line-height:1.22;
  letter-spacing:-.026em;color:var(--ink);
}
.pull__c{
  margin-top:clamp(1rem,2vw,1.4rem);
  font:400 .74rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
}
.pull__c::before{content:"— "}

/* ── Langkah: urutan nyata, karena memang berurutan ───────────── */
.steps{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule-2);counter-reset:s}
.steps__i{
  counter-increment:s;
  position:relative;
  padding:clamp(1.6rem,3.2vw,2.3rem) 0 clamp(1.6rem,3.2vw,2.3rem)
    clamp(2.8rem,5vw,4.2rem);
  border-bottom:1px solid var(--rule);
}
/* Nomor diambil dari alur teks (absolute), bukan dari kolom grid:
   sebelumnya <p> mendarat di kolom nomor dan terpotong jadi 58px. */
.steps__i::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:calc(clamp(1.6rem,3.2vw,2.3rem) + .18rem);
  font:500 .8rem/1.9 var(--mono);color:var(--rust);letter-spacing:.05em;
}
.steps__t{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600;
  letter-spacing:-.02em;margin-bottom:.5rem}
.steps__d{margin:0;color:var(--ink-2);max-width:44em}

/* ── Terminal: bagian dari halaman, bukan kotak yang ditempel ──── */
/* Terminal duduk di dalam lembar kertas sebagai panel rekaman:
   latar gelap, tapi tepinya sejajar kisi halaman dan bagian atasnya
   menyatu dengan aturan seksi. Jadi ia terasa seperti lampiran. */
.term{
  background:var(--void);border:1px solid var(--ink);
  max-width:52rem;margin-top:clamp(1.6rem,3vw,2.4rem);
  box-shadow:clamp(.45rem,1vw,.85rem) clamp(.45rem,1vw,.85rem) 0 var(--rule);
}
.term__bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .9rem;border-bottom:1px solid var(--rule-dark);
  font:400 .72rem/1 var(--mono);color:var(--film-label);
}
.term__dot{width:.5rem;height:.5rem;background:var(--rust);flex:none}
.term__path{letter-spacing:.05em}
.term__clear{
  margin-left:auto;background:none;border:1px solid var(--rule-dark);
  color:var(--film-label);font:400 .7rem/1 var(--mono);
  padding:.3rem .55rem;cursor:pointer;transition:color .15s,border-color .15s;
}
.term__clear:hover{color:var(--film-ink);border-color:var(--film-label)}

.term__screen{
  padding:1.1rem 1.1rem 1.3rem;min-height:11rem;max-height:15rem;
  overflow-y:auto;font:400 .85rem/1.8 var(--mono);color:var(--film-body);
}
.term__line{white-space:pre-wrap;word-break:break-word;margin:0 0 .18rem}
.term__line b{color:var(--film-ink);font-weight:500}
.term__line .ok{color:var(--signal)}
.term__line .warn{color:var(--signal)}
.term__line .dim{color:var(--film-label)}
.term__echo{color:var(--film-ink)}

.term__form{
  display:flex;align-items:center;gap:.5rem;
  border-top:1px solid var(--rule-dark);padding:.7rem .9rem;
}
.term__ps1{font:400 .83rem/1 var(--mono);color:var(--signal);flex:none}
.term__input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font:400 .83rem/1.4 var(--mono);color:var(--film-ink);
  caret-color:var(--signal);padding:.2rem 0;
}
.term__input::placeholder{color:var(--film-label);opacity:.7}

/* ── Platform: daftar baris, tanpa kartu ──────────────────────── */
.progs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.progs__i{border-bottom:1px solid var(--rule)}
.progs__a{
  display:grid;grid-template-columns:minmax(8rem,14rem) 1fr auto;
  align-items:baseline;gap:clamp(.6rem,3vw,2.4rem);
  padding:clamp(1.1rem,2.4vw,1.5rem) 0;
  text-decoration:none;transition:padding-left .22s ease;
}
.progs__a:hover{padding-left:.6rem}
.progs__n{font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.35rem);letter-spacing:-.02em}
.progs__u{font:400 .8rem/1.5 var(--mono);color:var(--ink-2);
  word-break:break-all}
.progs__g{color:var(--rust);font-size:.95rem;
  transition:transform .22s ease}
.progs__a:hover .progs__g{transform:translate(3px,-3px)}
@media (max-width:44rem){
  .progs__a{grid-template-columns:1fr auto;gap:.25rem 1rem}
  .progs__u{grid-column:1}
}

/* ── CV ────────────────────────────────────────────────────────── */
.cv{border-top:1px solid var(--rule-2)}
.cv__row{
  display:grid;grid-template-columns:minmax(6rem,9rem) 1fr;
  gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,1.9rem) 0;border-bottom:1px solid var(--rule);
}
.cv__when{font:400 .74rem/1.9 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.cv__t{font-size:clamp(1.04rem,1.8vw,1.28rem);font-weight:600;
  letter-spacing:-.018em;margin-bottom:.4rem}
.cv__d{margin:0;color:var(--ink-2);max-width:44em}
@media (max-width:38rem){.cv__row{grid-template-columns:1fr;gap:.4rem}}

.cv__dl{margin:clamp(2.2rem,4.5vw,3rem) 0 0}
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font:500 .84rem/1 var(--mono);letter-spacing:.03em;
  padding:1rem 1.5rem;
  transition:background .2s;
}
.btn:hover{background:var(--rust)}
.btn__g{transition:transform .25s ease}
.btn:hover .btn__g{transform:translateY(3px)}

/* ── Kaki ──────────────────────────────────────────────────────── */
/* Kaki gelap = sampul belakang berkas. Bukan potongan mendadak: diberi
   garis tinta di atasnya sebagai sambungan dari halaman kertas. */
.foot{background:var(--void);color:var(--film-body);
  border-top:2px solid var(--ink);
  padding:clamp(3.5rem,8vw,5.5rem) var(--gut) clamp(1.6rem,3vw,2.2rem)}
.foot__top{max-width:var(--max);margin-inline:auto;
  padding-bottom:clamp(2.4rem,5vw,3.4rem);
  border-bottom:1px solid var(--rule-dark)}
.foot__q{margin:0 0 .8rem;font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:-.028em;line-height:1.1;
  color:var(--film-ink);max-width:20em}
.foot__mail{
  display:inline-block;font:500 clamp(.95rem,2vw,1.18rem)/1 var(--mono);
  color:var(--signal);text-decoration:none;
  border-bottom:1px solid var(--rule-dark);padding-bottom:.3rem;
  transition:border-color .2s}
.foot__mail:hover{border-bottom-color:var(--signal)}
.foot__bar{
  max-width:var(--max);margin-inline:auto;padding-top:clamp(1.4rem,3vw,2rem);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:baseline;
  font:400 .74rem/1.7 var(--mono);color:var(--film-label);
}
.foot__links{display:flex;gap:1.3rem;margin-left:auto}
.foot__links a{color:var(--film-label);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.foot__links a:hover{color:var(--film-ink);border-bottom-color:var(--signal)}
.foot__note{flex-basis:100%;opacity:.75}
@media (max-width:44rem){.foot__links{margin-left:0}}

/* ── Reveal: konten tetap terlihat bila JS mati ─────────────────── */
.js .rv{opacity:0;transform:translateY(1rem)}
.js .rv.on{opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1)}

/* ══ PITA SINEMATIK — footage AI, teks di atasnya ═══════════════
   Ini footage AI, bukan diagram: dipakai HANYA sebagai suasana.
   Alasannya terukur — model video AI merusak tipografi (tercatat:
   "UKURAN" dirender "1AKURAN"), jadi semua teks tetap digambar
   sebagai vektor, dan klip AI tidak pernah memuat tulisan.
   Grade-nya diverifikasi: luminance rata-rata 27-40 dari 255, jadi
   teks terang di atasnya tetap >10:1. */
.band{
  position:relative;overflow:hidden;background:var(--void);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.band__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  filter:brightness(1.02) contrast(1.04);
}
/* Scrim rata, bukan gradasi hiasan: fungsinya menahan kontras, dan
   diukur bersama klip (klip mean 27-40 -> di layar tetap >10:1). */
.band__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,9,10,.62) 0%,rgba(8,9,10,.30) 40%,
    rgba(8,9,10,.52) 70%,rgba(8,9,10,.86) 100%);
}
.band__inner{
  position:relative;z-index:2;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(4.5rem,11vw,8.5rem) var(--gut);
}
.band__kicker{
  margin:0 0 clamp(.9rem,2vw,1.3rem);
  font:500 .72rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--signal);
}
.band__h{
  color:var(--film-ink);
  font-size:clamp(1.6rem,3.9vw,2.9rem);
  font-weight:620;font-stretch:94%;letter-spacing:-.026em;line-height:1.14;
  max-width:24em;margin:0 0 clamp(1rem,2.2vw,1.5rem);
}
.band__p{
  margin:0;color:var(--film-body);
  font-size:clamp(.98rem,1.25vw,1.1rem);line-height:1.62;max-width:34em;
}
@media (max-width:44rem){
  .band__vid{opacity:.9}
  .band__inner{padding:clamp(3.4rem,15vw,5rem) var(--gut)}
}
@media (prefers-reduced-motion:reduce){
  .band__vid{display:none}
  .band__scrim{background:var(--void)}
}


/* Pita murni: footage tanpa teks. Klipnya terlalu terang untuk teks
   (p95 117-119 -> 3,9:1), jadi permukaannya diratakan dulu dan hanya
   satu label kecil di tepi bawah. */
.band--silent{min-height:clamp(14rem,32vw,26rem)}
.band__scrim--flat{background:rgba(8,9,10,.46)}
.band__tag{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);
  bottom:clamp(1.1rem,2.6vw,1.7rem);margin:0;
  font:400 .74rem/1.6 var(--mono);letter-spacing:.05em;
  color:var(--film-label);max-width:44em;
}
.band__tag-k{
  color:var(--signal);letter-spacing:.17em;text-transform:uppercase;
  margin-right:.5rem;
}
@media (max-width:44rem){.band__tag{position:relative;left:auto;bottom:auto;
  padding:0 var(--gut) clamp(1.2rem,4vw,1.8rem)}}


/* Pita kata: footage AI + frasa yang muncul kata demi kata mengikuti
   scroll. Inilah animasinya — sebelumnya pita ini hanya slab mati
   (terukur range 21, detail 0.35), jadi kata-katanya yang membawa
   gerakan, bukan videonya. */
.band--word{min-height:clamp(20rem,44vw,34rem)}
.band--word .band__scrim{background:
  linear-gradient(180deg,rgba(8,9,10,.80) 0%,rgba(8,9,10,.48) 45%,
                  rgba(8,9,10,.72) 100%)}
.band__inner--center{text-align:center;padding-block:clamp(4.5rem,11vw,8rem)}
.band__word{
  margin:0 0 clamp(1.2rem,2.4vw,1.8rem);
  display:flex;flex-wrap:wrap;gap:clamp(.5rem,1.6vw,1.2rem);
  justify-content:center;align-items:baseline;
}
.band__w{
  color:var(--film-ink);
  font-family:var(--display);font-weight:640;font-stretch:92%;
  font-size:clamp(2.4rem,8.4vw,6.4rem);
  letter-spacing:-.038em;line-height:1;
  opacity:.14;
  transform:translateY(.16em);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1);
}
.band__w.on{opacity:1;transform:none}
.band__p--center{margin-inline:auto;text-align:center;max-width:40em}
@media (prefers-reduced-motion:reduce){
  .band__w{opacity:1;transform:none}
}

/* ── Hormati preferensi gerak ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .rv{opacity:1;transform:none}
  .film__media{display:none}
  .beat{opacity:1 !important;visibility:visible !important;
    transform:none !important;position:relative !important;
    left:auto !important;top:auto !important;text-align:left;
    margin:1.6rem 0 0}
  .film__beats{height:auto}
  .rail{display:none}
  .film__track{height:auto}
  .film__stage{position:relative;height:auto;padding:6rem var(--gut) 3rem}
  .film__meta{position:relative;left:auto;right:auto;bottom:auto;
    transform:none;width:100%;margin-top:2rem}
  .film__hintrow{display:none}
}