/* ===== Bagian "Pekerjaan Terbaru": kartu video + galeri ===== */
/* memakai variabel warna dari closing.css (--cl-*) */

.nw{background:#fff;padding:clamp(72px,9vw,128px) 0;position:relative}
.nw-head{padding:0 clamp(24px,8vw,140px);margin-bottom:clamp(32px,5vw,56px);max-width:1180px}
.nw-lead{margin:22px 0 0;max-width:62ch;color:var(--cl-mute);font-size:clamp(15px,1.3vw,17px);line-height:1.7}

.nw-grid{
  display:grid;grid-template-columns:1fr 1.8fr;gap:clamp(20px,3vw,40px);
  padding:0 clamp(24px,8vw,140px);align-items:start;
}
.nw-grid>*{min-width:0}

/* ---------- kartu video ---------- */
.nw-video{
  position:sticky;top:104px;margin:0;border-radius:28px;overflow:hidden;isolation:isolate;
  background:var(--cl-ink);box-shadow:0 40px 70px -40px rgba(20,23,43,.55);
}
.nw-media{position:relative;aspect-ratio:478/850;background:#000}
.nw-vid{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}

/* tombol play: tampil hanya saat video berhenti (dan JS aktif) */
.nw-play,.nw-snd{display:none}
.js .nw-play{
  position:absolute;inset:0;width:100%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(20,23,43,.05) 30%,rgba(20,23,43,.6));
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.js .nw-video.is-paused .nw-play{opacity:1;pointer-events:auto}
.nw-play-ic{
  position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:linear-gradient(120deg,var(--cl-red),var(--cl-red-2));
  box-shadow:0 18px 40px -12px rgba(192,39,45,.8);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),background .4s,box-shadow .4s;
}
.nw-play-ic svg{width:30px;height:30px;margin-left:4px}
.nw-play-ic::before{ /* cincin berdenyut */
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--cl-red-2);
  animation:nw-ping 2.2s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes nw-ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.nw-play:hover .nw-play-ic,.nw-play:focus-visible .nw-play-ic{
  transform:scale(1.1);background:linear-gradient(120deg,var(--cl-blue),var(--cl-blue-2));
  box-shadow:0 22px 46px -12px rgba(43,58,143,.85);
}

/* tombol suara (kanan bawah video) */
.js .nw-snd{
  position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;color:#fff;font:600 13px/1 var(--sans,inherit);
  background:rgba(20,23,43,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .35s,transform .35s;
}
.nw-snd svg{width:20px;height:20px;flex:none}
.nw-snd .i-on{display:none}
.nw-snd[aria-pressed="true"] .i-on{display:block}
.nw-snd[aria-pressed="true"] .i-off{display:none}
.nw-snd:hover,.nw-snd:focus-visible{background:linear-gradient(120deg,var(--cl-blue),var(--cl-blue-2));transform:translateY(-2px)}
.nw-snd[aria-pressed="true"] .nw-snd-t{display:none}

.nw-cap{display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px;color:#fff;font-size:13px}
.nw-cap b{font-size:15px;font-weight:600;line-height:1.35}
.nw-cap span{opacity:.7}

/* ---------- foto: susunan masonry ---------- */
.nw-photos{columns:3 200px;column-gap:16px}
.nw-it{
  position:relative;break-inside:avoid;margin:0 0 16px;border-radius:22px;overflow:hidden;
  background:var(--cl-bg);border:1px solid var(--cl-line);
}
.js .nw-it[data-reveal]{transition-delay:calc(var(--d,0)*60ms)}
.nw-open{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;
  cursor:zoom-in;overflow:hidden;isolation:isolate;
}
.nw-open img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.nw-open::after{ /* overlay biru bergelombang naik saat hover */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(43,58,143,.94),rgba(61,79,184,.6) 55%,rgba(61,79,184,.05));
  border-radius:50% 50% 0 0/10% 10% 0 0;transform:translateY(102%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.nw-it:hover .nw-open::after,.nw-open:focus-visible::after{transform:translateY(0)}
.nw-it:hover img{transform:scale(1.06)}
.nw-open:focus-visible{outline:3px solid var(--cl-blue-2);outline-offset:-3px}

.nw-it figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;color:#fff;
  display:flex;flex-direction:column;gap:2px;pointer-events:none;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);
}
.nw-it:hover figcaption,.nw-it:focus-within figcaption{opacity:1;transform:none}
.nw-it figcaption b{font-size:15px;font-weight:600;line-height:1.3}
.nw-it figcaption small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* layar sentuh tidak punya hover: keterangan selalu terlihat */
@media (hover:none){
  .nw-it figcaption{opacity:1;transform:none;background:linear-gradient(0deg,rgba(20,23,43,.78),transparent);padding-top:36px}
}

.nw-count{display:none}
.nw-foot{padding:40px clamp(24px,8vw,140px) 0}

@keyframes nw-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* ---------- DESKTOP: video melebar, foto jadi daftar vertikal ---------- */
@media (min-width:901px){
  .nw-grid{transition:grid-template-columns .9s cubic-bezier(.2,.8,.2,1)}
  .nw-media{transition:aspect-ratio .9s cubic-bezier(.2,.8,.2,1)}

  .nw.is-wide .nw-grid{grid-template-columns:1.15fr 1fr}
  .nw.is-wide .nw-media{aspect-ratio:1/1}
  .nw.is-wide .nw-photos{columns:1}

  /* saat susunan berganti, foto masuk satu per satu dari kanan */
  .nw.is-switching .nw-it{
    animation:nw-in .8s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--d,0)*40ms);
  }
}

/* ---------- MOBILE & TABLET: video di atas, foto digeser satu per satu ---------- */
@media (max-width:900px){
  .nw-grid{grid-template-columns:1fr}
  .nw-video{position:relative;top:auto;max-width:420px;width:100%;margin-inline:auto}

  .nw-photos{
    columns:auto;display:flex;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .nw-photos::-webkit-scrollbar{display:none}
  .nw-it{flex:0 0 100%;margin:0;aspect-ratio:4/5;scroll-snap-align:center;scroll-snap-stop:always}
  .nw-open{height:100%}
  .nw-open img{height:100%;object-fit:cover}
  /* item di luar layar tidak boleh menunggu efek reveal */
  .js .nw-photos .nw-it[data-reveal]{opacity:1;transform:none}

  .nw-count{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    margin:14px 2px 0;font-size:13px;color:var(--cl-mute);
  }
  .nw-count b{color:var(--cl-red);font-weight:700}
  .nw-count em{font-style:normal;opacity:.75}
}
@media (max-width:520px){
  .nw-it{border-radius:18px}
}

@media (prefers-reduced-motion:reduce){
  .nw-play-ic::before{animation:none}
  .nw-open img,.nw-open::after,.nw-it figcaption,.nw-grid,.nw-media{transition:none}
  .nw.is-switching .nw-it{animation:none}
}