:root{
  --bg:#f4efe8;
  --sand:#ebe3d8;
  --stone:#d9cec0;
  --ink:#262220;
  --muted:#776d64;
  --walnut:#6e4f3a;
  --gold:#b4935f;
  --line:rgba(38,34,32,.13);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Century Gothic", system-ui, sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--sand);-webkit-font-smoothing:antialiased;min-height:100vh}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg{display:block}

.kartu{width:min(460px,100%);margin:0 auto;background:var(--bg);min-height:100vh;padding:20px 20px 40px}

/* kepala */
.kepala{text-align:center;position:relative}
.sampul{height:230px;border-radius:999px 999px 0 0;overflow:hidden;margin:0 18px}
.sampul img{width:100%;height:100%;object-fit:cover;object-position:50% 88%;animation:muncul 1.6s var(--ease) both}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--bg);margin:-42px auto 0;position:relative;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.avatar svg{width:46px;height:46px;color:var(--ink)}
.kepala h1{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;margin-top:16px;letter-spacing:.01em}
.kepala h1 span{color:var(--gold)}
.sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.tag{font-family:var(--serif);font-size:22px;margin-top:14px;font-weight:300}
.tag em{color:var(--walnut)}
.sosial{display:flex;justify-content:center;gap:10px;margin-top:20px}
.sosial a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.3s}
.sosial a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sosial svg{width:18px;height:18px}

/* tautan */
.tautan{display:grid;gap:10px;margin-top:30px}
.lk{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.35);transition:transform .4s var(--ease),background .3s,border-color .3s;animation:naik .9s var(--ease) both}
.lk:nth-child(2){animation-delay:.06s}.lk:nth-child(3){animation-delay:.12s}.lk:nth-child(4){animation-delay:.18s}.lk:nth-child(5){animation-delay:.24s}
.lk:hover{transform:translateY(-2px);border-color:var(--ink);background:#fff}
.lk:active{transform:scale(.98)}
.lk-ic,.lk-thumb{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden}
.lk-ic svg{width:22px;height:22px}
.lk:not(.lk-utama) .lk-ic{border:1px solid var(--line);color:var(--walnut)}
.lk-thumb img{width:100%;height:100%;object-fit:cover}
.lk-teks{flex:1;display:flex;flex-direction:column;min-width:0}
.lk-teks b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15}
.lk-teks small{font-size:12px;color:var(--muted);margin-top:2px}
.lk-panah{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .4s var(--ease)}
.lk:hover .lk-panah{transform:rotate(45deg);color:var(--ink)}
.lk-utama{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lk-utama:hover{background:var(--walnut);border-color:var(--walnut)}
.lk-utama .lk-ic{background:var(--bg);color:var(--ink)}
.lk-utama small,.lk-utama .lk-panah,.lk-utama:hover .lk-panah{color:rgba(244,239,232,.7)}

/* proyek terbaru */
.terbaru{margin-top:42px}
.judul-bag{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.terbaru h2,.layanan h2{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1}
.judul-bag a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid currentColor;padding-bottom:3px}
.geser{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scroll-padding-inline:20px;scrollbar-width:none}
.geser::-webkit-scrollbar{display:none}
.kp{flex:0 0 42%;scroll-snap-align:start;position:relative}
.kp img{width:100%;aspect-ratio:3/4.2;object-fit:cover;border-radius:3px}
.kp:nth-child(odd) img{border-radius:999px 999px 3px 3px}
.kp span{display:block;font-family:var(--serif);font-size:17px;margin-top:8px;line-height:1.15}
.kp b{font-weight:400}
.kp small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* layanan */
.layanan{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.layanan ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.layanan li{font-size:12.5px;padding:8px 14px;border:1px solid var(--line);border-radius:999px}

/* kaki */
.kaki{text-align:center;margin-top:44px}
.kaki-logo{width:130px;height:39px;margin:0 auto;color:var(--ink)}
.kaki p{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}

@keyframes naik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes muncul{from{transform:scale(1.15)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.lk,.sampul img{animation:none}}

@media (min-width:600px){
  body{padding:40px 0;background:var(--stone)}
  .kartu{min-height:0;border-radius:28px;padding:24px 24px 40px;box-shadow:0 40px 80px -40px rgba(38,34,32,.45)}
  .geser{margin:0 -24px;padding:0 24px 6px;scroll-padding-inline:24px}
}