/* =============================================================================
   Bluebia — style bersama untuk halaman selain homepage (/work, dst).
   Token, nav, grid latar, tombol, dan footer disalin dari public/index.html
   supaya tampil identik. Kalau token di homepage berubah, ubah juga di sini.
   ========================================================================== */

@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-500.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-tight-600.woff2) format('woff2')}

/* --- token (sama dengan homepage) --- */
:root{--bg:#0a0a0a;--fg:#fafafa;--mut:#8b8b8b;--line:#222;--blue:#21b4ec;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --cell:64px;--gl:rgba(255,255,255,.045)}
@media(max-width:560px){:root{--cell:44px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark;scroll-padding-top:4rem}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.618 'Inter Tight',system-ui,sans-serif;letter-spacing:.012em;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:#fff;color:#000;padding:.6rem 1rem;border-radius:999px;font-weight:500;transition:top .15s}.skip:focus{top:.75rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- grid garis latar: sama dengan homepage, ikut ter-scroll --- */
body::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:center top}

/* --- dasar --- */
.wrap{max-width:1200px;margin:auto;padding-inline:clamp(1.25rem,4vw,2rem)}
.sec{padding-block:clamp(4.236rem,3rem + 5vw,6.854rem);border-top:1px solid var(--line)}
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
h1,h2,h3{font-weight:500;line-height:1.1;letter-spacing:0}
h2{font-size:clamp(1.618rem,.9rem + 3vw,2.618rem)}
h3{font-size:1.272rem}
.mut{color:var(--mut)}.lead{font-size:clamp(1rem,.9rem + .5vw,1.272rem);color:var(--mut);max-width:34rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:999px;font-weight:500;font-size:.9375rem;border:1px solid #202020;background:#202020;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#2c2c2c;border-color:#2c2c2c}.btn-w{background:#fff;color:#000;border-color:#fff}.btn-w:hover{background:#d8d8d8;border-color:#d8d8d8}

/* --- nav (sama dengan homepage) --- */
header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(10,10,10,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{display:flex;align-items:center}.logo img{height:30px;width:auto}
.links{display:flex;flex:1;margin-left:clamp(1.618rem,5vw,4.236rem);gap:2rem;font-size:.9375rem;color:var(--mut)}.links a:hover{color:#fff}
.links a[aria-current=page]{color:#fff}
.nav-btn{padding:.55rem 1.1rem}
.rt{display:flex;align-items:center;gap:.5rem}.menu{display:none;padding:.55rem 1rem;font-size:.875rem}
.mm{display:none;border-top:1px solid var(--line);padding:.25rem clamp(1.25rem,4vw,2rem) 1rem}.mm.open{display:grid}.mm a{padding:.95rem 0;border-bottom:1px solid var(--line);color:var(--mut)}
.mm a[aria-current=page]{color:#fff}
.lang{display:inline-flex;border:1px solid #2a2a2a;border-radius:999px;padding:2px;font:500 .75rem var(--mono)}
.lang button{background:none;border:0;color:var(--mut);padding:.35rem .7rem;border-radius:999px;cursor:pointer}.lang button[aria-pressed=true]{background:#fff;color:#000}
.mm .lang{margin-top:.9rem;justify-self:start}
@media(max-width:760px){.links{display:none}.rt .lang{display:none}.menu{display:inline-flex}.nav-btn{padding:.55rem 1rem;font-size:.875rem}}
@media(min-width:761px){.mm.open{display:none}}

/* --- kepala halaman: grid lebih terang + cahaya biru, seperti hero homepage --- */
.phero{position:relative;isolation:isolate;overflow-x:clip;padding-top:clamp(7rem,14vh,9rem);padding-bottom:clamp(2.618rem,5vw,4.236rem)}
.phero::before{content:"";position:absolute;z-index:-1;left:30%;top:4rem;transform:translateX(-50%);width:min(40rem,100vw);height:14rem;background:radial-gradient(closest-side,rgba(33,180,236,.32),transparent);filter:blur(36px);pointer-events:none}
.phero::after{content:"";position:absolute;z-index:-1;inset:0 -50vw;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 52% 70% at 35% 40%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 52% 70% at 35% 40%,#000 10%,transparent 72%)}
.phero h1{font-size:clamp(2.4rem,1rem + 5.5vw,4.236rem);line-height:1.04;margin-top:1rem;max-width:20ch}
.phero h1 .l2{display:block;color:var(--mut)}
.phero .lead{margin-top:1.272rem}
.crumb{color:var(--mut)}.crumb:hover{color:#fff}

/* --- hero /work: sama dengan hero homepage (rata tengah, cahaya biru,
       grid terang memudar, pil liquid glass), tanpa paragraf --- */
.whero{position:relative;isolation:isolate;overflow-x:clip;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(7rem,14vh,9rem);padding-bottom:clamp(1.618rem,4vw,2.618rem)}
.whero::before{content:"";position:absolute;z-index:-1;left:50%;top:5rem;transform:translateX(-50%);width:min(46rem,100vw);height:16rem;background:radial-gradient(closest-side,rgba(33,180,236,.5),transparent);filter:blur(36px);pointer-events:none}
.whero::after{content:"";position:absolute;z-index:-1;inset:0 -50vw;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 52% 62% at 50% 34%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 52% 62% at 50% 34%,#000 10%,transparent 72%)}
.whero h1{font-size:clamp(2.4rem,.8rem + 8vw,6.854rem);line-height:1.04}
.whero h1 span{display:block}.whero h1 span+span{color:var(--mut)}
.whero .tabs{justify-content:center;margin-top:clamp(1.618rem,4vw,2.618rem)}

/* pil liquid glass — disalin dari homepage */
.pill{position:relative;display:inline-flex;gap:.75rem;align-items:center;overflow:hidden;border-radius:999px;padding:.4rem .4rem .4rem .45rem;font-size:.9375rem;color:rgba(255,255,255,.88);margin-bottom:1.618rem;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 55%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.12),inset 0 0 18px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.45);
  transition:transform .3s,box-shadow .3s,color .3s}
.pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s}
.pill:hover{color:#fff;transform:translateY(-1px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.18),inset 0 0 22px rgba(255,255,255,.1),0 14px 36px rgba(33,180,236,.25)}
.pill:hover::after{transform:translateX(120%)}
.pill b{background:rgba(33,180,236,.2);color:#8fdcf8;border-radius:999px;padding:.1rem .7rem;font-weight:500}
.pill .ar{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(255,255,255,.12)}

@keyframes rise{from{opacity:0;transform:translateY(1.618rem)}}
.up{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}

@media(max-width:560px){
  .whero h1{font-size:clamp(3rem,15vw,4.5rem)}
  .pill{font-size:.75rem;gap:.4rem;padding:.22rem;margin-bottom:1.272rem}.pill b{padding:.03rem .5rem}
  .pill .ar{width:1.25rem;height:1.25rem}.pill .ar svg{width:8px;height:8px}
}

/* --- filter kategori (gaya .tab homepage) --- */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-block:1.272rem;border-block:1px solid var(--line)}
.tab{background:none;border:1px solid #2a2a2a;border-radius:999px;padding:.4rem 1rem;font:500 .8125rem var(--mono);color:var(--mut);cursor:pointer;min-height:36px}
.tab[aria-pressed=true],.tab:hover{color:#000;background:#fff;border-color:#fff}
.count{margin-left:auto}

/* --- daftar studi kasus ---
   Kartu pertama melebar (gambar : teks = 1,618 : 1), sisanya dua kolom.
   Judul kartu = masalah calon klien; nama brand diturunkan ke bawah. */
.wk-list{display:grid;grid-template-columns:repeat(2,1fr);gap:2.618rem 1.272rem;padding-block:2.618rem}
.wk{display:flex;flex-direction:column;gap:1.272rem;color:inherit}
.wk-media{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.618/1;border-radius:18px;background:#121212;border:1px solid #1d1d1d;transition:border-color .3s}
.wk:hover .wk-media{border-color:#3a3a3a}
.wk-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wk:hover .wk-media img{transform:scale(1.04)}
.wk-media .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:4.236rem;font-weight:500;color:#2a2a2a}
.chip{position:absolute;left:1.1rem;top:.9rem;z-index:3;font:500 .6875rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ddd;border:1px solid rgba(255,255,255,.12)}
.wk-body{display:flex;flex-direction:column;gap:.5rem}
.wk-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.wk-meta .mono:first-child{color:var(--blue)}
.wk h2{font-size:clamp(1.272rem,1rem + 1vw,1.618rem);line-height:1.2;max-width:26ch}
.wk:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.wk p{color:var(--mut);font-size:.9375rem;max-width:44ch}
.wk-go{margin-top:.25rem;font-size:.9375rem;color:var(--mut);transition:color .2s}.wk:hover .wk-go{color:#fff}

.wk.lead-card{grid-column:1/-1;display:grid;grid-template-columns:1.618fr 1fr;gap:2.618rem;align-items:center}
.wk.lead-card h2{font-size:clamp(1.618rem,1rem + 2vw,2.618rem);max-width:18ch}

.empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:16px;padding:2.618rem;text-align:center;color:var(--mut)}
.note{font-size:.875rem;margin-top:.5rem;max-width:44rem}

/* --- penutup --- */
.closing{display:grid;grid-template-columns:1.618fr 1fr;gap:2.618rem;align-items:end}
.closing .cta{display:flex;flex-wrap:wrap;gap:.625rem;justify-content:flex-end}

/* --- footer (sama dengan homepage) --- */
footer{border-top:1px solid var(--line);padding-block:4.236rem 2.618rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:2rem}.cols a{display:block;color:var(--mut);font-size:.9375rem;padding:.2rem 0}.cols a:hover{color:#fff}.cols .mono{margin-bottom:.9rem}
.fine{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:4.236rem;color:var(--mut);font-size:.875rem}

/* --- bar CTA di HP: muncul setelah kepala halaman lewat, hilang di penutup --- */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:block;position:fixed;inset:auto 0 0;z-index:40;padding:.625rem clamp(1.25rem,4vw,2rem) calc(.625rem + env(safe-area-inset-bottom));
    background:rgba(10,10,10,.85);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
  .mbar.on{transform:none}
  .mbar .btn{width:100%;justify-content:center}
}

/* --- tata letak sempit --- */
@media(max-width:860px){
  .wk.lead-card{grid-template-columns:1fr;gap:1.272rem}
  .closing{grid-template-columns:1fr;align-items:start}.closing .cta{justify-content:flex-start}
}
@media(max-width:560px){
  .wk-list{grid-template-columns:1fr;gap:2.618rem}
  .count{margin-left:0;width:100%}
  .tab{padding:.5rem .9rem}
  .closing .cta .btn{flex:1 1 100%;justify-content:center}
  .fine{margin-top:2.618rem}
}

/* --- gerak --- */
.rv{opacity:0;transform:translateY(1.618rem);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}