/* ============================================================
   ALVIAN PERMANA · rancang.css
   ------------------------------------------------------------
   SATU berkas gaya buat seluruh situs. Semua yang boleh diutak
   atik ada di [ PANEL ] paling atas ini: warna, aksara, tebal
   garis, kecepatan gerak, kekasaran kertas. Sisanya jangan
   disentuh kecuali paham.
   Aturan rumah: sudut siku (radius 0), garis TEBAL bukan rambut,
   gak ada ungu, gak ada emas, gak ada krem.
   ============================================================ */

/* ---------- aksara, disimpen sendiri di /aksara ---------- */
@font-face{font-family:"Papan";src:url("../aksara/syne-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Papan";src:url("../aksara/syne-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Ukir";src:url("../aksara/bodoni-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cerita";src:url("../aksara/fraunces-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cerita";src:url("../aksara/fraunces-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ============================================================
   [ PANEL ]  ·  ubah disini aja
   ============================================================ */
:root{
  /* warna pokok. --dasar sama --aksen ditimpa tiap karya lewat JS */
  --tinta:      #0A0C0B;   /* hitam kehijauan, dasar situs */
  --tinta-2:    #141816;   /* satu tingkat lebih terang */
  --kapur:      #DCE2DD;   /* kertas dingin, bukan krem, bukan gading */
  --kapur-redup:#8E9A93;
  --api:        #FF3B1F;   /* aksen tetap: jingga bakar */
  --biru:       #1B5CFF;   /* aksen kedua: biru listrik */
  --dasar:      #0A0C0B;   /* warna latar karya yang lagi dibuka */
  --aksen:      #FF3B1F;   /* warna sorot karya yang lagi dibuka */

  /* aksara */
  --papan:  "Papan", "Arial Black", sans-serif;   /* judul, angka, label */
  --cerita: "Cerita", Georgia, serif;             /* badan tulisan */
  --ukir:   "Ukir", "Didot", Georgia, serif;      /* khusus tulisan yang cuma garis luar */

  /* garis: tebal, sengaja. gak ada garis setipis rambut disini */
  --garis:   2px;
  --garis-tebal: 4px;

  /* gerak */
  --pelan:  .5s cubic-bezier(.2,.9,.15,1);
  --sedang: .28s cubic-bezier(.2,.9,.15,1);
  --cepat:  .14s cubic-bezier(.3,.9,.2,1);

  /* kertas sketsa: makin gede makin kasar */
  --bintik: .22;
  --serat:  .35;

  /* jarak */
  --tepi: clamp(18px, 4vw, 72px);

  /* tumpukan */
  --z-kertas: 1; --z-isi: 10; --z-menu: 800; --z-bintik: 900; --z-atas: 1000;
}

/* ============================================================
   DASAR
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0 !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--tinta);color:var(--kapur);
  font-family:var(--cerita);font-size:clamp(15px,1.05vw,18px);line-height:1.6;
  overflow-x:hidden;
  transition:background-color var(--pelan);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--aksen);color:var(--tinta)}
:focus-visible{outline:var(--garis-tebal) solid var(--api);outline-offset:3px}

h1,h2,h3,.papan{font-family:var(--papan);font-weight:800;line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.mini{font-family:var(--papan);font-weight:700;font-size:clamp(9px,.72vw,11px);letter-spacing:.34em;text-transform:uppercase}
.serif-miring{font-style:italic}

/* ---------- kertas sketsa: serat + bintik, nempel di seluruh situs ---------- */
.kertas{
  position:fixed;inset:-2px;z-index:var(--z-kertas);pointer-events:none;opacity:var(--serat);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>\
<filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='300' height='300' filter='url(%23f)'/></svg>");
  background-size:300px 300px;
}
#bintik{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-bintik);pointer-events:none;opacity:var(--bintik);mix-blend-mode:overlay}

/* ---------- kursor buatan sendiri: silang tipis + kotak ---------- */
#kursor{position:fixed;left:0;top:0;z-index:var(--z-atas);pointer-events:none;mix-blend-mode:difference;
  width:44px;height:44px;margin:-22px 0 0 -22px;transition:opacity .3s}
#kursor i{position:absolute;background:var(--kapur)}
#kursor i:nth-child(1){left:50%;top:0;bottom:0;width:1px}
#kursor i:nth-child(2){top:50%;left:0;right:0;height:1px}
#kursor b{position:absolute;inset:16px;border:var(--garis) solid var(--kapur);transition:inset var(--cepat)}
#kursor span{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  font-family:var(--papan);font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap;color:var(--kapur);opacity:0;transition:opacity var(--cepat)}
#kursor.gede b{inset:2px}
#kursor.gede span{opacity:1}
@media (hover:none),(pointer:coarse){#kursor{display:none}}

/* ---------- tirai pindah halaman ---------- */
/* tirai pindah halaman. tiap halaman tujuan dapet gaya beda,
   dipilih lewat class di JS: .g-bilah .g-mata .g-naik .g-serong .g-sobek */
#tirai{position:fixed;inset:0;z-index:var(--z-atas);pointer-events:none;overflow:hidden}
#tirai i{position:absolute;background:var(--tinta);transition:transform .26s cubic-bezier(.7,0,.3,1),clip-path .3s cubic-bezier(.7,0,.3,1)}
#tirai.mati{display:none}

/* 1 · bilah mendatar, satu satu */
#tirai.g-bilah i{left:0;right:0;height:20.2%;transform:scaleX(0);transform-origin:left}
#tirai.g-bilah i:nth-child(1){top:0}#tirai.g-bilah i:nth-child(2){top:20%}#tirai.g-bilah i:nth-child(3){top:40%}
#tirai.g-bilah i:nth-child(4){top:60%}#tirai.g-bilah i:nth-child(5){top:80%}
#tirai.g-bilah.tutup i{transform:scaleX(1)}
#tirai.g-bilah.buka i{transform:scaleX(1);transform-origin:right}
#tirai.g-bilah.buka.jalan i{transform:scaleX(0)}
#tirai.g-bilah i:nth-child(2){transition-delay:.03s}#tirai.g-bilah i:nth-child(3){transition-delay:.06s}
#tirai.g-bilah i:nth-child(4){transition-delay:.09s}#tirai.g-bilah i:nth-child(5){transition-delay:.12s}

/* 2 · mata: lubang bulat menutup dari pinggir */
#tirai.g-mata i:first-child{inset:0;clip-path:circle(0% at 50% 50%);transition:clip-path .42s cubic-bezier(.7,0,.3,1)}
#tirai.g-mata i:not(:first-child){display:none}
#tirai.g-mata.tutup i:first-child{clip-path:circle(150% at 50% 50%)}
#tirai.g-mata.buka i:first-child{clip-path:circle(150% at 50% 50%)}
#tirai.g-mata.buka.jalan i:first-child{clip-path:circle(0% at 50% 50%)}

/* 3 · naik: papan tegak dari bawah */
#tirai.g-naik i{top:0;bottom:0;width:20.2%;transform:scaleY(0);transform-origin:bottom}
#tirai.g-naik i:nth-child(1){left:0}#tirai.g-naik i:nth-child(2){left:20%}#tirai.g-naik i:nth-child(3){left:40%}
#tirai.g-naik i:nth-child(4){left:60%}#tirai.g-naik i:nth-child(5){left:80%}
#tirai.g-naik.tutup i{transform:scaleY(1)}
#tirai.g-naik.buka i{transform:scaleY(1);transform-origin:top}
#tirai.g-naik.buka.jalan i{transform:scaleY(0)}
#tirai.g-naik i:nth-child(2){transition-delay:.04s}#tirai.g-naik i:nth-child(3){transition-delay:.08s}
#tirai.g-naik i:nth-child(4){transition-delay:.12s}#tirai.g-naik i:nth-child(5){transition-delay:.16s}

/* 4 · serong: satu papan miring lewat layar */
#tirai.g-serong i:first-child{inset:-30%;transform:translateX(-130%) skewX(-12deg)}
#tirai.g-serong i:not(:first-child){display:none}
#tirai.g-serong.tutup i:first-child{transform:translateX(0) skewX(-12deg);transition:transform .34s cubic-bezier(.7,0,.3,1)}
#tirai.g-serong.buka i:first-child{transform:translateX(0) skewX(-12deg)}
#tirai.g-serong.buka.jalan i:first-child{transform:translateX(130%) skewX(-12deg);transition:transform .38s cubic-bezier(.7,0,.3,1)}

/* 5 · sobek: pinggir robek ketemu di tengah */
#tirai.g-sobek i:nth-child(1),#tirai.g-sobek i:nth-child(2){top:0;bottom:0;width:52%}
#tirai.g-sobek i:nth-child(1){left:0;transform:translateX(-101%);clip-path:polygon(0 0,100% 0,92% 12%,100% 26%,90% 44%,100% 58%,93% 76%,100% 90%,96% 100%,0 100%)}
#tirai.g-sobek i:nth-child(2){right:0;transform:translateX(101%);clip-path:polygon(8% 0,100% 0,100% 100%,4% 100%,10% 88%,2% 72%,9% 56%,0 40%,8% 24%,2% 12%)}
#tirai.g-sobek i:nth-child(n+3){display:none}
#tirai.g-sobek.tutup i{transform:translateX(0)}
#tirai.g-sobek.buka i:nth-child(1){transform:translateX(0)}
#tirai.g-sobek.buka i:nth-child(2){transform:translateX(0)}
#tirai.g-sobek.buka.jalan i:nth-child(1){transform:translateX(-101%)}
#tirai.g-sobek.buka.jalan i:nth-child(2){transform:translateX(101%)}

/* ============================================================
   MENU ATAS
   ============================================================ */
#atas{position:fixed;top:0;left:0;right:0;z-index:var(--z-menu);display:flex;align-items:center;gap:14px;
  padding:14px var(--tepi);mix-blend-mode:difference}
#atas .cap{display:flex;align-items:center;gap:10px;font-family:var(--papan);font-weight:800;
  font-size:clamp(12px,1.1vw,16px);letter-spacing:-.02em;text-transform:uppercase}
#atas .cap img{height:clamp(26px,2.4vw,34px);width:auto}
#atas .cap .nama{white-space:nowrap}
#atas .cap i{font-style:normal;color:var(--api)}
#atas nav{margin-left:auto;display:flex;gap:clamp(10px,2vw,30px)}
#atas nav a{font-family:var(--papan);font-weight:700;font-size:clamp(9px,.78vw,11px);letter-spacing:.28em;text-transform:uppercase;
  padding:6px 0;position:relative}
#atas nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:var(--garis);background:var(--kapur);
  transition:right var(--sedang)}
#atas nav a:hover::after,#atas nav a[aria-current]::after{right:0}

/* ============================================================
   HALAMAN DEPAN
   Tata letaknya masih pakai gaya/beranda.css yang lama (mesinnya
   belum berubah). Disini cuma dirapikan: tulisan dikecilkan dan
   judul yang cuma garis luar dipindah ke aksara Ukir.
   ============================================================ */
body.beranda .bp-teks .bp-tempel h1{font-family:var(--papan);font-size:clamp(24px,4.2vw,58px);letter-spacing:-.04em;line-height:.94}
body.beranda .bp-teks .bp-tempel h1 .kilau,
body.beranda .bp-teks .bp-tempel h1 span.kilau{font-family:var(--ukir);font-weight:700;
  color:transparent !important;background:none !important;text-shadow:none !important;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1.3px var(--api);
  filter:none !important;letter-spacing:-.01em;display:inline-block}
body.beranda .bp-teks .bp-tempel p{font-family:var(--cerita);font-size:clamp(12px,1vw,15px);opacity:.78;max-width:44ch;margin-inline:auto}
body.beranda .bp-tempel .mata-kecil{font-family:var(--papan);font-weight:700;letter-spacing:.4em;font-size:9px}
body.beranda .bp-pintu-nama{font-family:var(--papan);font-weight:700;letter-spacing:.28em;font-size:clamp(10px,1vw,13px)}
body.beranda #bp-petunjuk{font-family:var(--papan);font-weight:700;letter-spacing:.3em;font-size:10px}

/* ============================================================
   GALERI · satu karya satu layar, ditaruh di dalam tetes air
   ------------------------------------------------------------
   Bentuk tetesnya dari clip-path yang gerak sendiri, isinya
   digoyang pake tapis SVG (#air) biar kayak dilihat lewat air,
   plus kilau di pinggir sama pantulan dibawahnya.
   ============================================================ */
body.galeri{background:var(--dasar);transition:background-color .6s cubic-bezier(.2,.9,.15,1)}
#gulung{height:100vh;height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory}
#gulung::-webkit-scrollbar{width:0}
.karya{position:relative;height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden;padding:0 var(--tepi)}

/* kabut warna dari karyanya sendiri */
.karya .aura{position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:0;
  background-size:cover;background-position:center;filter:blur(200px) saturate(1.7);transition:opacity .5s var(--pelan)}
.karya.aktif .aura{opacity:.45}
.karya .tirai-warna{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 48%,transparent 30%,var(--dasar) 88%)}

/* hujan tipis, ikut referensi */
.karya .hujan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.15;
  background-image:repeating-linear-gradient(102deg,transparent 0 46px,rgba(220,226,221,.5) 46px 47px,transparent 47px 96px);
  background-size:auto 220px;animation:turun 1.1s linear infinite}
@keyframes turun{to{background-position:0 220px}}

/* nomor besar di kiri bawah */
.karya .nomor{position:absolute;z-index:3;left:var(--tepi);bottom:calc(var(--tepi) - .1em);
  font-family:var(--ukir);font-weight:700;font-size:clamp(70px,13vw,190px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.4px var(--aksen);opacity:.28;pointer-events:none;
  transform:translateY(20px);transition:transform .5s var(--pelan),opacity .5s var(--pelan)}
.karya.aktif .nomor{transform:none}

/* ---------- tetes air ---------- */
.bingkai{position:relative;z-index:4;display:block;background:none;cursor:grab;touch-action:pan-y;
  width:min(78vw,var(--lebar,620px));aspect-ratio:1;max-height:76vh;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
  transform:translate3d(0,20px,0) scale(.96);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.15,1),opacity .45s var(--pelan),aspect-ratio .5s var(--pelan),width .5s var(--pelan)}
.karya.aktif .bingkai{opacity:1;
  transform:translate3d(calc(var(--gx,0px) + var(--dx,0px)),calc(var(--gy,0px) + var(--dy,0px)),0)
            rotate(var(--putar,0deg)) scale(1)}
.bingkai.ditarik{cursor:grabbing;transition:opacity .45s var(--pelan)}
/* pas kebuka: jadi persegi panjang seukuran gambar aslinya, diem di tempat */
.karya.buka .bingkai{aspect-ratio:auto !important;
  height:min(72vh,740px);width:calc(min(72vh,740px) * var(--rasio,1));max-width:88vw;
  cursor:zoom-out;transform:translate3d(0,0,0) scale(1)}
.karya.buka .tetes img.l1{object-fit:cover;background:none;}
.karya.buka .tetes img.l2,.karya.buka .tetes img.l3,.karya.buka .tetes img.potong{object-fit:cover}

.halo{position:absolute;inset:-25%;z-index:-1;pointer-events:none;opacity:.35;
  filter:url(#air) blur(50px) saturate(1.35);
  -webkit-mask-image:radial-gradient(closest-side,transparent 52%,#000 66%,#000 88%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 52%,#000 66%,#000 88%,transparent 100%);
  transition:opacity .5s var(--pelan),inset .5s var(--pelan)}
.halo img{width:100%;height:100%;object-fit:cover}
.karya.buka .halo{inset:-10%;opacity:.3;
  -webkit-mask-image:radial-gradient(closest-side,transparent 60%,#000 76%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 60%,#000 76%,transparent 100%)}

.tetes{position:absolute;inset:0;overflow:hidden;
  clip-path:circle(48% at 50% 50%);
  animation:goyang 9s ease-in-out infinite alternate}
@keyframes goyang{
  35%{clip-path:polygon(50% 1%,67% 5%,82% 12%,92% 24%,98% 38%,99% 54%,94% 69%,85% 82%,72% 93%,57% 99%,42% 99%,27% 92%,15% 82%,6% 69%,1% 54%,2% 39%,9% 24%,20% 12%,34% 4%)}
  100%{clip-path:polygon(50% 2%,64% 4%,79% 11%,90% 22%,98% 36%,100% 52%,95% 68%,86% 81%,73% 91%,58% 98%,43% 99%,28% 93%,14% 84%,5% 70%,0% 55%,1% 40%,7% 26%,19% 14%,33% 6%)}}
.tetes img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  filter:url(#air);opacity:.3;transition:opacity .45s var(--pelan),filter .5s var(--pelan)}
.tetes img.l1{opacity:1}
/* salinan tajam: tengah bening, tepi ilang. jadi pelintirannya
   cuma kebaca di pinggir, persis kaca berisi air */
.tetes img.jernih{inset:15px;width:100%;height:100%;filter:none;opacity:1;
  -webkit-mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.72) 58%,transparent 84%);
  mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.72) 58%,transparent 84%);
  transition:opacity .45s var(--pelan),-webkit-mask-image .5s var(--pelan)}

/* kilau kaca di pinggir tetes */
.tetes .kilau{position:absolute;inset:0;pointer-events:none;transition:opacity .4s var(--pelan);
  background:
    radial-gradient(58% 40% at 34% 12%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(30% 22% at 76% 84%,rgba(255,255,255,.28),transparent 65%),
    radial-gradient(120% 120% at 50% 50%,transparent 52%,rgba(0,0,0,.55) 88%);
  mix-blend-mode:screen;animation:kilau-geser 11s ease-in-out infinite alternate}
@keyframes kilau-geser{100%{transform:translate3d(3%,-2%,0) scale(1.04)}}
.tetes .bibir{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.4),inset 0 22px 46px rgba(255,255,255,.26),inset 0 -30px 60px rgba(0,0,0,.5)}

/* pantulan dibawah tetes */
.pantul{position:absolute;left:12%;right:12%;top:99%;height:26%;z-index:3;pointer-events:none;
  clip-path:polygon(8% 0,92% 0,80% 100%,20% 100%);opacity:.28;transform:scaleY(-1);filter:blur(25px) saturate(1.2);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 78%);mask-image:linear-gradient(to bottom,transparent,#000 78%)}
.pantul img{width:100%;height:100%;object-fit:cover}

/* DIBUKA: tetes jadi kotak, isinya bening, goyangnya berhenti */
.karya.buka .tetes{clip-path:inset(0);animation:none}
.karya.buka .tetes img{filter:none;inset:0;width:100%;height:100%}
.karya.buka .tetes img.jernih{opacity:0}

.karya.buka .tetes .kilau{opacity:0}
.karya.buka .tetes .bibir{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.karya.buka .pantul{opacity:0}

/* lapisan numpuk biasa, muncul satu satu dengan jeda pendek */
.karya.buka .tetes img.l2{opacity:.9;transition-delay:.12s}
.karya.buka .tetes img.l3{opacity:.85;transition-delay:.26s}
.karya.buka .tetes img.potong{opacity:1;transition-delay:.4s}

.karya.buka .aura{opacity:.85}
.karya.buka .bingkai{transform:translate3d(var(--gx,0px),var(--gy,0px),0) scale(1.03)}

/* tulisan karya */
.karya .tulis{position:absolute;z-index:6;right:calc(var(--tepi) + 40px);top:50%;transform:translateY(-50%);
  width:min(30vw,340px);text-align:right;pointer-events:none}
.karya .tulis h2{font-size:clamp(20px,2.3vw,38px);letter-spacing:-.03em;overflow-wrap:anywhere;hyphens:auto}
.karya .tulis .media{margin-top:8px;color:var(--kapur-redup)}
.karya .tulis .cerita{margin-top:12px;font-size:clamp(12px,.95vw,15px);opacity:0;max-height:0;overflow:hidden;
  transition:opacity var(--sedang),max-height var(--pelan)}
.karya.buka .tulis .cerita{opacity:.9;max-height:36vh}
.karya .tulis .buka-tanda{display:inline-block;margin-top:14px;border:var(--garis) solid var(--aksen);
  padding:7px 12px;color:var(--aksen);pointer-events:auto;transition:background var(--cepat),color var(--cepat)}
.karya.buka .tulis .buka-tanda{background:var(--aksen);color:var(--tinta)}

/* rel angka di kanan */
#rel{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:var(--z-menu);
  display:flex;flex-direction:column;gap:4px;mix-blend-mode:difference}
#rel button{width:22px;height:var(--garis);background:var(--kapur);opacity:.35;transition:opacity var(--cepat),width var(--cepat)}
#rel button.on{opacity:1;width:40px}
#rel button:hover{opacity:.9}

#hitung{position:fixed;left:var(--tepi);top:50%;transform:translateY(-50%);z-index:var(--z-menu);
  font-family:var(--papan);font-weight:800;font-size:clamp(10px,.85vw,12px);letter-spacing:.3em;
  writing-mode:vertical-rl;mix-blend-mode:difference}

/* ============================================================
   HALAMAN ISI (profil, tentang, 404)
   ============================================================ */
.isi{position:relative;z-index:var(--z-isi);overflow-x:clip;padding:clamp(90px,12vh,150px) var(--tepi) clamp(60px,10vh,120px);max-width:1500px;margin:0 auto}
.judul-besar{font-size:clamp(38px,9vw,140px);overflow-wrap:anywhere;letter-spacing:-.05em;line-height:.82}
.judul-besar em{font-family:var(--ukir);font-style:normal;font-weight:700;letter-spacing:-.01em;
  -webkit-text-stroke:1.6px var(--kapur);color:transparent;display:inline-block}
.judul-besar .api{color:var(--api)}
.garis-tebal{height:var(--garis-tebal);background:var(--kapur);margin:clamp(20px,4vh,44px) 0}
.dua-kolom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(20px,5vw,70px);align-items:start}
.blok{margin-bottom:clamp(34px,7vh,80px)}
.blok h2{font-size:clamp(20px,2.4vw,34px);margin-bottom:16px}
.blok p+p{margin-top:12px}
.riwayat{display:grid;gap:0}
.riwayat li{list-style:none;display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:16px;
  padding:18px 0;border-top:var(--garis) solid rgba(220,226,221,.28)}
.riwayat li:last-child{border-bottom:var(--garis) solid rgba(220,226,221,.28)}
.riwayat .kapan{font-family:var(--papan);font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--api);padding-top:4px}
.riwayat .apa strong{font-family:var(--papan);font-weight:800;font-size:clamp(15px,1.5vw,21px);text-transform:uppercase;letter-spacing:-.01em;display:block;margin-bottom:6px}
.riwayat .apa span{display:block;color:var(--kapur-redup);font-size:.94em}
.tempel-daftar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tempel-daftar span{border:var(--garis) solid var(--kapur);padding:7px 12px;font-family:var(--papan);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.potret{position:relative;border:var(--garis-tebal) solid var(--kapur);max-width:100%;overflow:hidden}
.potret img{width:100%}
.potret figcaption{position:absolute;left:0;bottom:0;background:var(--api);color:var(--tinta);padding:8px 12px;
  font-family:var(--papan);font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.tombol{display:inline-flex;align-items:center;gap:12px;border:var(--garis-tebal) solid var(--kapur);padding:14px 22px;
  font-family:var(--papan);font-weight:800;font-size:clamp(11px,1vw,14px);letter-spacing:.2em;text-transform:uppercase;
  transition:background var(--cepat),color var(--cepat),transform var(--cepat)}
.tombol:hover{background:var(--api);border-color:var(--api);color:var(--tinta);transform:translate(-3px,-3px)}
.tombol.penuh{background:var(--kapur);color:var(--tinta)}
.tombol.penuh:hover{background:var(--api);color:var(--tinta)}
.baris-tautan{display:grid;gap:0;margin-top:10px}
.baris-tautan a{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:18px 0;border-top:var(--garis) solid rgba(220,226,221,.28);
  font-family:var(--papan);font-weight:800;font-size:clamp(18px,2.6vw,38px);text-transform:uppercase;letter-spacing:-.02em;
  transition:padding-left var(--sedang),color var(--sedang)}
.baris-tautan a:last-child{border-bottom:var(--garis) solid rgba(220,226,221,.28)}
.baris-tautan a span{margin-left:auto;font-family:var(--cerita);font-size:13px;letter-spacing:0;text-transform:none;color:var(--kapur-redup)}
.baris-tautan a:hover{padding-left:18px;color:var(--api)}
.kaki{border-top:var(--garis) solid rgba(220,226,221,.28);margin-top:clamp(40px,8vh,90px);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:14px 26px;font-family:var(--papan);font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--kapur-redup)}

/* muncul pelan pas digulir */
[data-muncul]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--pelan),transform .9s var(--pelan)}
[data-muncul].nampak{opacity:1;transform:none}

/* ============================================================
   PONSEL
   ============================================================ */
@media (max-width:860px){
  .dua-kolom{grid-template-columns:1fr}
  .karya .tulis{position:static;transform:none;width:100%;text-align:left;margin-top:18px;order:2}
  .karya{aspect-ratio:auto !important;object-fit:contain;grid-template-rows:auto auto;align-content:center;gap:14px;padding-top:80px;padding-bottom:70px}
  .bingkai{width:86vw;max-height:46vh}
  .karya .nomor{font-size:34vw;bottom:auto;top:64px;left:var(--tepi);opacity:.16}
  #rel{right:6px;gap:4px}
  #rel button{width:16px}
  #rel button.on{width:26px}
  #hitung{display:none}
  .pantul{display:none}
  .karya .tulis{right:auto}
}
@media (max-width:640px){
  #atas{padding:10px 14px;gap:8px}
  #atas .cap{font-size:13px}
  #atas .cap .nama{display:none}
  #atas nav{gap:9px}
  #atas nav a{font-size:9px;letter-spacing:.1em}
  #rel{right:4px}
  .karya .tulis{padding-right:22px}
}
@media (max-width:520px){
  .riwayat li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.06s !important}
  #gulung{scroll-behavior:auto}
}

/* ============================================================
   TAMBAHAN: tulisan jalan, kolom pilihan, tombol salin
   ============================================================ */
.jalan{display:flex;gap:0;overflow:hidden;white-space:nowrap;margin:6px 0 14px;
  font-family:var(--papan);font-weight:700;font-size:clamp(9px,.8vw,11px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--kapur-redup);border-top:var(--garis) solid rgba(220,226,221,.28);
  border-bottom:var(--garis) solid rgba(220,226,221,.28);padding:9px 0}
.jalan span{animation:jalan-kiri 22s linear infinite;padding-right:2ch}
@keyframes jalan-kiri{to{transform:translateX(-100%)}}

.tempel-daftar.pilih button{border:var(--garis) solid var(--kapur);padding:9px 13px;
  font-family:var(--papan);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  transition:background var(--cepat),color var(--cepat),transform var(--cepat)}
.tempel-daftar.pilih button:hover{transform:translate(-2px,-2px)}
.tempel-daftar.pilih button.on{background:var(--api);border-color:var(--api);color:var(--tinta)}
.pilih-hasil{margin-top:14px;color:var(--kapur-redup)}
.pilih-hasil.ada{color:var(--api)}
.baris-tautan .salin{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;padding:18px 0;
  border-top:var(--garis) solid rgba(220,226,221,.28);border-bottom:var(--garis) solid rgba(220,226,221,.28);
  font-family:var(--papan);font-weight:800;font-size:clamp(18px,2.6vw,38px);text-transform:uppercase;
  letter-spacing:-.02em;transition:padding-left var(--sedang),color var(--sedang)}
.baris-tautan .salin span{margin-left:auto;font-family:var(--cerita);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--kapur-redup)}
.baris-tautan .salin:hover{padding-left:18px;color:var(--api)}
.baris-tautan .salin.sudah{color:var(--api)}

/* sorotan yang ngikut kursor di baris profil sama kontak */
.riwayat li,.baris-tautan a,.baris-tautan .salin{position:relative;overflow:hidden}
.riwayat li::after,.baris-tautan a::after,.baris-tautan .salin::after{content:"";position:absolute;
  left:var(--sorot,50%);bottom:0;width:0;height:var(--garis);background:var(--api);
  transition:width .2s var(--cepat),left .2s var(--cepat)}
.riwayat li:hover::after,.baris-tautan a:hover::after,.baris-tautan .salin:hover::after{left:0;width:100%}
.riwayat li{transition:padding-left var(--cepat),background var(--cepat)}
.riwayat li:hover{padding-left:12px;background:rgba(220,226,221,.04)}
.potret{will-change:transform}
#brief{width:100%;background:transparent;color:var(--kapur);border:var(--garis) solid rgba(220,226,221,.5);
  padding:14px;font-family:var(--cerita);font-size:15px;resize:vertical;transition:border-color var(--cepat)}
#brief:focus{outline:none;border-color:var(--api)}

/* ============================================================
   REVISI · kursor baru, lampu sorot, lapisan dimatiin,
   foto profil nempel, halaman kontak putih
   ============================================================ */

/* ---------- kursor: titik penuh + cincin yang ketinggalan ---------- */
#kursor{width:auto;height:auto;margin:0;mix-blend-mode:difference}
#kursor i,#kursor b{display:none !important}
#kursor::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;
  background:var(--kapur);border-radius:50% !important;clip-path:circle(50% at 50% 50%);
  transition:transform var(--cepat),background var(--cepat)}
#kursor.gede::after{transform:scale(1.9);background:var(--api)}
#kursor span{top:18px}

/* ---------- lampu sorot: ekor cahaya + lingkaran utama ----------
   Tiga cara campur dipakai bareng: ekornya screen biar nambah cahaya,
   lingkaran utamanya soft-light biar ngikutin warna aslinya, terus
   satu titik kecil color-dodge buat kilau. Dua duanya ditaruh diatas
   bintik film, jadi bintik sama seratnya ikut kena sorot. */
/* jejak cahaya pakai "difference": apapun dibawahnya kebalik warnanya.
   Latar gelap jadi terang, tulisan terang jadi gelap, jadi tetep kebaca
   didalam lingkaran cahaya. Ini yang bikin rasanya kayak senter beneran. */
#jejak{position:fixed;inset:0;z-index:calc(var(--z-bintik) + 1);pointer-events:none;
  mix-blend-mode:difference;opacity:1}
#sorot{position:fixed;inset:0;z-index:calc(var(--z-bintik) + 2);pointer-events:none;
  background:
    radial-gradient(circle var(--sj,300px) at var(--sx,50%) var(--sy,50%),
      rgba(var(--sw,255,238,214),calc(.30 * var(--sk,.85))) 0%,
      rgba(var(--sw,255,238,214),calc(.12 * var(--sk,.85))) 38%,
      transparent 68%),
    radial-gradient(circle calc(var(--sj,300px) * .34) at var(--sx,50%) var(--sy,50%),
      rgba(var(--sw,255,238,214),calc(.22 * var(--sk,.85))) 0%, transparent 70%);
  mix-blend-mode:soft-light;opacity:.55}
#sorot::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle calc(var(--sj,300px) * .18) at var(--sx,50%) var(--sy,50%),
    rgba(var(--sw,255,238,214),.22) 0%,transparent 72%);
  mix-blend-mode:color-dodge}
/* di halaman putih rumusnya sama, difference bikin kertas terang jadi
   gelap dan tulisan gelap jadi terang. Kekuatannya dikecilin dikit. */
body.putih #jejak{mix-blend-mode:difference;opacity:.72}
body.putih #sorot{mix-blend-mode:soft-light;opacity:.4}
body.putih #sorot::after{mix-blend-mode:overlay}

/* ---------- lapisan numpuk dimatiin ---------- */
body.lapis-mati .karya .tetes img.l2,
body.lapis-mati .karya .tetes img.l3,
body.lapis-mati .karya .tetes img.potong{display:none}

/* ---------- foto profil nempel di kiri ---------- */
.op-left,.dua-kolom > figure.potret{position:sticky;top:clamp(90px,14vh,150px);align-self:start}
/* di layar kecil fotonya jangan nempel, ikut ngalir aja sama tulisannya */
@media (max-width:860px){
  .op-left,.dua-kolom > figure.potret{position:static;top:auto}
}
.potret{transition:opacity .26s var(--pelan),transform .26s var(--pelan)}
.potret.ganti{opacity:0;transform:translateY(10px) scale(.99)}
.potret img{transition:opacity .3s var(--pelan)}

/* ---------- lega lega an di profil sama kontak ---------- */
body.dalam .isi{padding:clamp(120px,17vh,210px) var(--tepi) clamp(90px,14vh,170px);max-width:1560px}
body.dalam .dua-kolom{gap:clamp(34px,7vw,110px)}
body.dalam .blok{margin-bottom:clamp(48px,9vh,120px)}
body.dalam .blok h2{margin-bottom:22px}
body.dalam .riwayat li{padding:26px 0}
body.dalam .baris-tautan a,body.dalam .baris-tautan .salin{padding:26px 0}
body.dalam .garis-tebal{margin:clamp(28px,5vh,60px) 0}

/* ============================================================
   HALAMAN KONTAK PUTIH
   Kertas terang, bintik tebal, debu, sama vinyet gelap di pinggir.
   ============================================================ */
body.putih{background:var(--kapur);color:var(--tinta)}
body.putih #atas{mix-blend-mode:normal;color:var(--tinta)}
body.putih #atas .cap img{filter:invert(1)}
body.putih #atas nav a::after{background:var(--tinta)}
body.putih .kertas{opacity:.5;mix-blend-mode:multiply}
body.putih #bintik{opacity:.30;mix-blend-mode:multiply}
body.putih #kursor{mix-blend-mode:normal}
body.putih #kursor b{border-color:var(--tinta)}
body.putih #kursor::after{background:var(--tinta)}
body.putih .judul-besar em{-webkit-text-stroke-color:var(--tinta)}
body.putih .tempel-daftar span,body.putih .tempel-daftar.pilih button{border-color:var(--tinta)}
body.putih .tempel-daftar.pilih button.on{background:var(--api);border-color:var(--api);color:var(--kapur)}
body.putih .riwayat li,body.putih .baris-tautan a,body.putih .baris-tautan .salin,
body.putih .kaki{border-color:rgba(10,12,11,.25)}
body.putih .baris-tautan a span,body.putih .kaki,body.putih .pilih-hasil{color:#5B6560}
body.putih #brief{border-color:rgba(10,12,11,.4);color:var(--tinta)}
body.putih .tombol{border-color:var(--tinta)}
body.putih .tombol:hover{background:var(--api);border-color:var(--api);color:var(--kapur)}

/* debu: bintik bintik kecil yang ditabur, plus vinyet */
body.putih::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(10,12,11,.55),transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 14%,rgba(10,12,11,.45),transparent 60%),
    radial-gradient(2px 2px at 34% 71%,rgba(10,12,11,.4),transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 63%,rgba(10,12,11,.5),transparent 60%),
    radial-gradient(1px 1px at 51% 39%,rgba(10,12,11,.5),transparent 60%),
    radial-gradient(2.4px 2.4px at 24% 88%,rgba(10,12,11,.32),transparent 60%),
    radial-gradient(1.1px 1.1px at 91% 31%,rgba(10,12,11,.42),transparent 60%),
    radial-gradient(1.8px 1.8px at 7% 57%,rgba(10,12,11,.38),transparent 60%);
  background-size:520px 520px,730px 730px,610px 610px,840px 840px,470px 470px,900px 900px,680px 680px,560px 560px}
body.putih::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 46%,rgba(10,12,11,.34) 100%);
  mix-blend-mode:multiply}

/* ============================================================
   CARA NGUBAH TETES DI HALAMAN GALERI
   ------------------------------------------------------------
   1. BENTUK TETESNYA (titik titik sudutnya)
      Cari ".tetes{ ... clip-path:polygon( ... ) }" diatas.
      Isinya pasangan angka "x% y%", dibaca searah jarum jam
      mulai dari puncak. Nambah pasangan = nambah sudut,
      ngurangin = makin membulat. Contoh cepat:
        segi enam  : polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)
        bulat licin: circle(50% at 50% 50%)
      Bentuk pas lagi goyang diatur di "@keyframes goyang".
      Isinya harus JUMLAH TITIK YANG SAMA, kalau beda gak mau
      berubah mulus. Lama goyangnya di "animation:goyang 9s".

   2. PELINTIRAN AIRNYA
      Ada di galeri.html, cari <filter id="air">.
        baseFrequency  : kecil = ombak lebar, besar = ombak rapat
        numOctaves     : 1 halus, 3 kasar berpasir
        scale (26)     : seberapa jauh piksel digeser. 0 = datar
        <animate values> : goyangan pelan bolak balik, dur="14s"
      Bagian tengah sengaja bening: lihat ".tetes img.jernih",
      angka di mask-image (34% 58% 84%) yang nentuin seberapa
      lebar daerah beningnya.

   3. PELINTIRAN DI LUAR TETES
      ".halo" diatas. "inset:-14%" = seberapa jauh keluar,
      "blur(6px)" ketajamannya, dan mask-image nya yang bikin
      cuma cincin luar yang kelihatan.

   4. GARIS HUJAN
      ".karya .hujan". Sudut 102deg, jarak 46px sama 96px,
      "animation:turun 1.1s" kecepatannya. opacity:.3 tebalnya.

   5. BINTIK SAMA SERAT KERTAS
      Di [ PANEL ] paling atas berkas ini: --bintik sama --serat.
      Kecepatan kedipnya di skrip/mesin.js, ATUR.bintik.

   6. KACA SAMA KILAUNYA
      ".tetes .kilau" titik cahayanya, ".tetes .bibir" garis tepi
      dalemnya. ".pantul" bayangan dibawah tetes.

   7. LAMPU SOROT
      ATUR.sorot di skrip/mesin.js: jari (lebar), kuat (terang),
      jejak (panjang ekor), hangat/dingin (warna).
   ============================================================ */

/* ============================================================
   TETES KANVAS · halaman galeri
   ------------------------------------------------------------
   Tetes CSS yang lama disembunyiin, gantinya satu kanvas yang
   nggambar hujan, riak, sama tetes berisi karya. Tombol .bingkai
   tetep ada tapi tembus pandang, biar masih bisa diklik sama
   dipencet pakai papan ketik. Setelan bentuknya di skrip/tetes.js
   ============================================================ */
#tetesPanggung{position:fixed;inset:0;z-index:2;pointer-events:none}
#tetesKanvas{width:100%;height:100%;display:block}

/* pas ketutup: yang kelihatan cuma tetes di kanvas. Tombolnya
   tetep ada tapi tembus pandang, biar masih bisa diklik. */
body.pakai-tetes .karya .tetes,
body.pakai-tetes .karya .halo,
body.pakai-tetes .karya .pantul,
body.pakai-tetes .karya .hujan{opacity:0 !important}
body.pakai-tetes .bingkai{background:none;filter:none;opacity:1 !important;
  width:min(52vmin,520px);height:min(52vmin,520px);aspect-ratio:auto !important;
  transform:none !important}

/* pas DIBUKA: tetesnya ilang, gambar aslinya muncul utuh, kotak,
   seukuran perbandingan aslinya. */
body.pakai-tetes .karya.buka .tetes{opacity:1 !important;clip-path:inset(0);animation:none}
body.pakai-tetes .karya.buka .tetes img{filter:none;inset:0;width:100%;height:100%;object-fit:cover}
body.pakai-tetes .karya.buka .tetes img.jernih{opacity:0}
body.pakai-tetes .karya.buka .tetes .kilau{opacity:0}
body.pakai-tetes .karya.buka .bingkai{
  height:min(72vh,760px);width:calc(min(72vh,760px) * var(--rasio,1));
  max-width:88vw;max-height:72vh;cursor:zoom-out}
body.pakai-tetes #tetesPanggung{transition:opacity .45s cubic-bezier(.2,.9,.15,1)}
body.pakai-tetes.karya-kebuka #tetesPanggung{opacity:0}
body.pakai-tetes .karya .tulis{z-index:6}
body.pakai-tetes .karya .aura{opacity:.28}
body.pakai-tetes .karya.buka .aura{opacity:.5}

/* ---------- gelembung lensa yang ninggalin jejak dibelakang kursor ---------- */
.lens{position:fixed;z-index:2147482900;pointer-events:none;
  border-radius:50% !important;clip-path:circle(50% at 50% 50%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#kursorCincin{position:fixed;left:0;top:0;z-index:2147482950;pointer-events:none;
  width:38px;height:38px;margin:-19px 0 0 -19px;will-change:transform;
  border:2px solid var(--kapur);border-radius:50% !important;clip-path:circle(50% at 50% 50%);
  opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s;mix-blend-mode:difference}
#kursorCincin.big{opacity:.9;transform:scale(1)}
body.putih #kursorCincin{border-color:var(--tinta)}
@media (hover:none),(pointer:coarse){.lens,#kursorCincin{display:none}}

/* ============================================================
   CARA NGUBAH TETES KANVAS (galeri)
   ------------------------------------------------------------
   Semua angkanya ada di [ PANEL ] paling atas skrip/tetes.js:
     besar     ukuran tetes, kali sisi terpendek layar
     mekar     ukuran pas karyanya dibuka
     cincin    jumlah cincin pembias. banyak = halus tapi berat
     lengkung  kekuatan bengkokan. 1.2-1.5 tengahnya kebaca,
               2 keatas pinggirnya nglinter tapi tengahnya buyar
     maksZoom  batas pembesaran di titik tengah
     goyang    keriput pinggiran tetes
     hujan     jarak antar garis hujan, kecil = lebat
     kecepatan kecepatan hujan
     riak      lingkaran riak dibawah, true/false
     jatuh     percepatan tetes pas jatuh keluar layar
   Warna hujannya ngikut warna aksen tiap karya, otomatis.
   Jejak gelembung dikursor ada di ATUR.lensa (skrip/mesin.js).
   ============================================================ */