/* =========================================================
   ermait — stylesheet bersama (ermait.com & project.ermait.com)
   ========================================================= */
:root{
  --paper:#ECEEF1; --paper-2:#E1E5EB; --card:#F6F7F9;
  --ink:#151822; --ink-soft:#505769; --line:#C3C9D4; --grid:rgba(45,75,240,.06);
  --accent:#2D4BF0; --accent-ink:#FFFFFF;
  --f-display:"Syne", "Arial Black", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px, 4vw, 40px);
  --ease:cubic-bezier(.7,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1016; --paper-2:#161922; --card:#1A1D27;
    --ink:#E8EBF2; --ink-soft:#9AA1B3; --line:#2B303D; --grid:rgba(123,140,255,.07);
    --accent:#7F8FFF; --accent-ink:#0E1016; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1016; --paper-2:#161922; --card:#1A1D27;
  --ink:#E8EBF2; --ink-soft:#9AA1B3; --line:#2B303D; --grid:rgba(123,140,255,.07);
  --accent:#7F8FFF; --accent-ink:#0E1016; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 var(--f-body);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); line-height:1.02; margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
.eyebrow{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:18px; height:1px; background:currentColor}

/* ---------- navigasi ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.brand{font-family:var(--f-display); font-weight:800; font-size:1.3rem; text-decoration:none; display:flex; align-items:center; gap:.45rem; letter-spacing:-.03em}
.brand i{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; animation:pulse 2.4s var(--ease) infinite}
.brand small{font-family:var(--f-mono); font-weight:400; font-size:.7rem; color:var(--ink-soft); letter-spacing:.04em}
@keyframes pulse{50%{transform:scale(.55)}}
.nav-links{display:flex; align-items:center; gap:clamp(.6rem,2vw,1.6rem)}
.nav-links a{text-decoration:none; font-size:.92rem; position:relative; padding-block:4px}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.theme-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:transform .5s var(--ease), border-color .3s}
.theme-btn:hover{transform:rotate(180deg); border-color:var(--ink)}
.theme-btn svg{width:16px; height:16px}
@media (max-width:560px){ .nav-links .hide-sm{display:none} }

/* ---------- tombol ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.4rem; border-radius:999px;
  font:600 .95rem var(--f-body); text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease);
}
.btn::before{content:""; position:absolute; inset:0; background:var(--accent); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1}
.btn:hover{color:var(--accent-ink); border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn.ghost{background:transparent; color:var(--ink)}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ---------- animasi masuk ---------- */
.line-mask{display:block; overflow:hidden; padding-bottom:.08em}
.line-mask > span{display:block; animation:rise 1s var(--ease) both; animation-delay:calc(var(--d,0) * 90ms + 250ms)}
@keyframes rise{from{transform:translateY(105%)}}
.fade-up{animation:fadeUp .9s var(--ease) both; animation-delay:calc(var(--d,0) * 90ms + 400ms)}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}}
.rv{transition:transform 1s var(--ease)}
.rv.below{transform:translateY(36px)}

/* tirai transisi halaman */
.curtain{position:fixed; inset:0; z-index:100; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr)}
.curtain span{background:var(--accent); transform-origin:top; animation:curtainOut .7s var(--ease) both; animation-delay:calc(var(--i) * 50ms)}
@keyframes curtainOut{from{transform:scaleY(1)} to{transform:scaleY(0)}}
.leaving .curtain span{transform-origin:bottom; animation:curtainIn .55s var(--ease) both; animation-delay:calc(var(--i) * 40ms)}
@keyframes curtainIn{from{transform:scaleY(0)} to{transform:scaleY(1)}}

/* kursor khusus (hanya perangkat dengan mouse) */
.cursor{position:fixed; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--accent); pointer-events:none; z-index:90; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s; mix-blend-mode:normal; opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:84px; height:84px; margin:-42px 0 0 -42px; opacity:.92}
.cursor.big::after{content:"Lihat"; position:absolute; inset:0; display:grid; place-items:center; font:600 .78rem var(--f-body); color:var(--accent-ink)}
@media (hover:none){.cursor{display:none}}

/* ---------- kartu proyek ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:clamp(16px, 2.4vw, 28px)}
.card{
  text-decoration:none; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:6px; overflow:hidden; position:relative;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), opacity .4s, border-color .3s;
  transform-style:preserve-3d; will-change:transform;
}
.card:hover{box-shadow:0 30px 60px -30px rgba(10,14,40,.35); border-color:var(--ink)}
.card-art{aspect-ratio:4/3.2; background:var(--c3); display:grid; place-items:center; position:relative; overflow:hidden}
.card-art::before{ /* grid konstruksi */
  content:""; position:absolute; inset:0; opacity:.0; transition:opacity .6s var(--ease);
  background-image:linear-gradient(color-mix(in srgb, var(--c1) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c1) 18%, transparent) 1px, transparent 1px);
  background-size:20px 20px; background-position:center;
}
.card:hover .card-art::before{opacity:1}
.card-art svg,.card-art .logo-img{width:46%; transition:transform .8s var(--ease)}
.card:hover .card-art svg,.card:hover .card-art .logo-img{transform:scale(1.1) rotate(-3deg)}
.card-no{position:absolute; top:14px; left:16px; font:500 .7rem var(--f-mono); letter-spacing:.1em; color:var(--c1); opacity:.7}
.card-meta{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:18px 18px 8px}
.card-meta h3{font-size:1.35rem}
.card-meta p{color:var(--ink-soft); font-size:.9rem; margin-top:.25rem}
.card-year{font:500 .78rem var(--f-mono); color:var(--ink-soft); padding-top:.3rem}
.card-go{display:flex; align-items:center; gap:.4rem; padding:6px 18px 18px; font-size:.85rem; font-weight:600; color:var(--accent)}
.card-go svg{width:16px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .4s var(--ease)}
.card:hover .card-go svg{transform:translateX(5px)}
.card.is-out{opacity:0; transform:scale(.96)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:clamp(64px, 10vw, 120px)}
.footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:28px; color:var(--ink-soft); font-size:.85rem}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

/* =========================================================
   BERANDA (ermait.com)
   ========================================================= */
.hero{padding-block:clamp(48px, 8vw, 110px) clamp(40px, 6vw, 80px)}
.hero .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px, 5vw, 72px); align-items:center}
.hero h1{font-size:clamp(2.8rem, 8.4vw, 7rem); font-weight:800}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero-lede{max-width:46ch; color:var(--ink-soft); font-size:1.08rem; margin-top:1.6rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero-art{position:relative; aspect-ratio:1; max-width:460px; width:100%; justify-self:end}
.hero-art svg{width:100%; height:100%; overflow:visible}
.hero-art .guide{fill:none; stroke:var(--ink-soft); stroke-width:.6; stroke-dasharray:3 4; opacity:.55}
.hero-art .guide-draw{stroke-dashoffset:0; animation:guideIn 1.4s var(--ease) both}
@keyframes guideIn{from{opacity:0}}
.hero-art .mark-stroke{fill:none; stroke:var(--accent); stroke-width:22; stroke-linecap:round; stroke-dasharray:640; stroke-dashoffset:0; animation:draw 2s var(--ease) .6s both}
@keyframes draw{from{stroke-dashoffset:640}}
.hero-art .node{fill:var(--paper); stroke:var(--ink); stroke-width:1.2; animation:fadeUp .6s var(--ease) both; animation-delay:calc(1.6s + var(--d,0) * 120ms)}
.hero-art .label{font:500 7px var(--f-mono); fill:var(--ink-soft); letter-spacing:.08em; animation:guideIn .8s var(--ease) both; animation-delay:2s}
.hero-art .spin{transform-origin:100px 100px; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{justify-self:start; max-width:320px}
}

.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:18px; background:var(--paper-2)}
.marquee-track{display:flex; gap:3rem; width:max-content; animation:marq 32s linear infinite}
.marquee span{font:700 clamp(1.1rem, 2.4vw, 1.6rem) var(--f-display); white-space:nowrap; display:flex; align-items:center; gap:3rem; color:var(--ink-soft)}
.marquee span::after{content:"✦"; color:var(--accent); font-size:.8em}
@keyframes marq{to{transform:translateX(-50%)}}

.section{padding-block:clamp(64px, 9vw, 120px) 0}
.section-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.4rem; margin-bottom:clamp(28px, 4vw, 48px)}
.section-head h2{font-size:clamp(2rem, 5vw, 3.6rem); font-weight:800; margin-top:.8rem; max-width:16ch}

.about{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px, 6vw, 96px)}
.about-text{display:grid; gap:1.1rem; font-size:1.12rem; max-width:60ch}
.about-text p:first-child{font-size:clamp(1.3rem, 2.4vw, 1.7rem); line-height:1.35; font-weight:500; color:var(--ink)}
.about-text p{color:var(--ink-soft)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.4rem}
.stats b{display:block; font:800 clamp(1.8rem, 4vw, 2.8rem) var(--f-display); font-variant-numeric:tabular-nums; color:var(--ink)}
.stats span{font-size:.85rem; color:var(--ink-soft)}
@media (max-width:820px){ .about{grid-template-columns:1fr} }

.services{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink)}
.service{padding:28px 24px 28px 0; border-bottom:1px solid var(--line); display:grid; gap:.8rem; align-content:start}
.service + .service{padding-left:24px; border-left:1px solid var(--line)}
.service h3{font-size:1.5rem}
.service p{color:var(--ink-soft); font-size:.96rem}
.service ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem}
.service li{font:500 .72rem var(--f-mono); letter-spacing:.04em; border:1px solid var(--line); border-radius:999px; padding:.25rem .65rem}
@media (max-width:820px){ .services{grid-template-columns:1fr} .service + .service{padding-left:0; border-left:0} }

.process{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px, 2vw, 24px); counter-reset:step}
.step{border-top:2px solid var(--ink); padding-top:1rem; display:grid; gap:.5rem; align-content:start}
.step .mono{color:var(--accent)}
.step h3{font-size:1.25rem}
.step p{color:var(--ink-soft); font-size:.93rem}
@media (max-width:820px){ .process{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .process{grid-template-columns:1fr} }

.cta{margin-top:clamp(64px, 9vw, 120px); background:var(--ink); color:var(--paper); border-radius:8px; padding:clamp(32px, 6vw, 72px); display:grid; gap:1.6rem; position:relative; overflow:hidden}
.cta h2{font-size:clamp(2.2rem, 6vw, 4.6rem); font-weight:800; max-width:14ch}
.cta .eyebrow{color:color-mix(in srgb, var(--paper) 60%, transparent)}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.cta .email{font:500 clamp(1rem, 2.4vw, 1.3rem) var(--f-mono); user-select:all; border-bottom:1px solid color-mix(in srgb, var(--paper) 40%, transparent); padding-bottom:.2rem}
.cta .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.cta .btn:hover{color:var(--accent-ink)}
.cta-ring{position:absolute; right:-80px; bottom:-80px; width:320px; height:320px; border:1px dashed color-mix(in srgb, var(--paper) 25%, transparent); border-radius:50%; animation:spin 30s linear infinite}
.cta-ring::after{content:""; position:absolute; top:10%; left:10%; width:14px; height:14px; border-radius:50%; background:var(--accent)}

/* =========================================================
   GALERI (project.ermait.com)
   ========================================================= */
.gal-head{padding-block:clamp(48px, 7vw, 96px) clamp(28px, 4vw, 44px); display:grid; gap:1.4rem}
.gal-head h1{font-size:clamp(3rem, 11vw, 9rem); font-weight:800; line-height:.92}
.gal-head h1 sup{font:500 clamp(.9rem, 2vw, 1.3rem) var(--f-mono); color:var(--accent); vertical-align:top; margin-left:.3rem; letter-spacing:0}
.gal-bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; border-block:1px solid var(--line); padding-block:14px; margin-bottom:clamp(24px, 3vw, 36px)}
.filters{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{font:500 .85rem var(--f-body); border:1px solid var(--line); background:transparent; color:var(--ink); padding:.45rem 1rem; border-radius:999px; cursor:pointer; transition:background .3s, color .3s, border-color .3s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip small{font-family:var(--f-mono); opacity:.6; margin-left:.3rem}
.view-note{font:500 .75rem var(--f-mono); color:var(--ink-soft); letter-spacing:.06em}

/* =========================================================
   DETAIL (project.ermait.com/<slug>)
   ========================================================= */
.d-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:24px}
.back{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-size:.9rem; font-weight:600}
.back svg{width:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .4s var(--ease)}
.back:hover svg{transform:translateX(-4px)}
.pager{display:flex; gap:.4rem}
.pager a{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:border-color .3s, background .3s}
.pager a:hover{border-color:var(--ink); background:var(--card)}
.pager svg{width:16px; fill:none; stroke:currentColor; stroke-width:2}

.d-hero{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 5vw, 64px); align-items:center; padding-bottom:clamp(40px, 6vw, 80px)}
.d-stage{background:var(--c3); border-radius:8px; aspect-ratio:1; display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid var(--line)}
.d-stage svg.logo,.d-stage .logo-img{width:56%; position:relative; z-index:1}
.d-stage .logo path,.d-stage .logo rect,.d-stage .logo ellipse,.d-stage .logo circle,.d-stage .logo line{animation:partIn .9s var(--ease) both; transform-box:fill-box; transform-origin:center}
.d-stage .logo > *:nth-child(2){animation-delay:.15s} .d-stage .logo > *:nth-child(3){animation-delay:.3s} .d-stage .logo > *:nth-child(4){animation-delay:.45s}
@keyframes partIn{from{opacity:0; transform:scale(.6)}}
.d-guides{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; transition:opacity .6s var(--ease)}
.d-guides *{fill:none; stroke:var(--c1); stroke-width:.4; opacity:.45; vector-effect:non-scaling-stroke}
.d-guides .dash{stroke-dasharray:4 4}
.d-stage.no-guides .d-guides{opacity:0}
.d-stage .coord{position:absolute; font:500 .65rem var(--f-mono); color:var(--c1); opacity:.6; letter-spacing:.06em}
.d-stage .coord.tl{top:12px; left:14px} .d-stage .coord.br{bottom:12px; right:14px}
.guide-toggle{position:absolute; bottom:12px; left:12px; z-index:2; font:500 .72rem var(--f-mono); letter-spacing:.06em; border:1px solid color-mix(in srgb, var(--c1) 40%, transparent); color:var(--c1); background:color-mix(in srgb, var(--c3) 70%, transparent); border-radius:999px; padding:.35rem .8rem; cursor:pointer}
.d-info h1{font-size:clamp(2.6rem, 7vw, 5.6rem); font-weight:800}
.d-tagline{font-size:clamp(1.15rem, 2vw, 1.4rem); color:var(--ink-soft); margin-top:1rem; max-width:32ch}
.meta{display:grid; grid-template-columns:repeat(2, 1fr); margin-top:2rem; border-top:1px solid var(--line)}
.meta div{padding:14px 12px 14px 0; border-bottom:1px solid var(--line); display:grid; gap:.2rem}
.meta dt{font:500 .68rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.meta dd{margin:0; font-weight:600}
@media (max-width:820px){ .d-hero{grid-template-columns:1fr} }

.d-block{display:grid; grid-template-columns:220px 1fr; gap:clamp(20px, 5vw, 64px); padding-block:clamp(40px, 6vw, 72px); border-top:1px solid var(--line)}
.d-block > header .eyebrow{margin-bottom:.6rem}
.d-block > header h2{font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:800}
.d-summary{font-size:clamp(1.15rem, 2vw, 1.45rem); line-height:1.5; max-width:58ch}
@media (max-width:820px){ .d-block{grid-template-columns:1fr} }

.philo{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 2vw, 20px); margin-top:2rem}
.philo article{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px; display:grid; gap:.7rem; align-content:start; transition:transform .5s var(--ease), border-color .3s}
.philo article:hover{transform:translateY(-6px); border-color:var(--c1-safe, var(--ink))}
.philo h3{font-size:1.2rem; display:flex; align-items:center; gap:.6rem}
.philo h3 i{width:12px; height:12px; border-radius:50%; background:var(--dot); flex:none}
.philo p{color:var(--ink-soft); font-size:.95rem}
@media (max-width:820px){ .philo{grid-template-columns:1fr} }

.swatches{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 2vw, 20px)}
.swatch{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--card); cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit; transition:transform .5s var(--ease)}
.swatch:hover{transform:translateY(-6px)}
.swatch-fill{height:clamp(110px, 16vw, 170px); background:var(--sw); position:relative; transform-origin:bottom; animation:grow 1s var(--ease) both; animation-delay:calc(var(--d) * 120ms + 300ms)}
@keyframes grow{from{transform:scaleY(0)}}
.swatch-body{padding:14px 16px; display:grid; gap:.2rem}
.swatch-body b{font-size:1rem}
.swatch-body span{font:500 .72rem var(--f-mono); color:var(--ink-soft); font-variant-numeric:tabular-nums; letter-spacing:.03em}
.swatch .copied{position:absolute; right:10px; top:10px; font:600 .7rem var(--f-mono); background:var(--paper); color:var(--ink); padding:.2rem .5rem; border-radius:4px; opacity:0; transition:opacity .3s}
.swatch.done .copied{opacity:1}
@media (max-width:560px){ .swatches{grid-template-columns:1fr} .swatch{display:grid; grid-template-columns:100px 1fr} .swatch-fill{height:auto; min-height:84px} }

.type-spec{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 2vw, 20px)}
.type-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px; display:grid; gap:.6rem}
.type-card .big{font-size:clamp(3rem, 7vw, 5rem); line-height:1}
.type-card .abc{color:var(--ink-soft); word-break:break-all}
@media (max-width:560px){ .type-spec{grid-template-columns:1fr} }

/* ---------- mockup ---------- */
.mocks{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(12px, 2vw, 20px)}
.mock{margin:0; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--card); position:relative}
.mock-stage{aspect-ratio:4/3; display:grid; place-items:center; position:relative; overflow:hidden; perspective:900px}
.mock figcaption{display:flex; justify-content:space-between; padding:12px 16px; font-size:.88rem; border-top:1px solid var(--line)}
.mock figcaption span{font:500 .72rem var(--f-mono); color:var(--ink-soft); letter-spacing:.06em}
/* jika jumlah mockup ganjil, mockup pertama dibuat lebar penuh */
.mock:first-child:nth-last-child(odd){grid-column:1 / -1}
.mock:first-child:nth-last-child(odd) .mock-stage{aspect-ratio:16/8}
@media (max-width:620px){ .mocks{grid-template-columns:1fr} .mock:first-child:nth-last-child(odd) .mock-stage{aspect-ratio:4/3} }
.mock .float{transition:transform 1s var(--ease)}
.mock:hover .float{transform:translateY(-8px) rotate(-1deg)}

/* kartu nama */
.m-card{background:linear-gradient(160deg, var(--c3), color-mix(in srgb, var(--c3) 80%, #999))}
.bc{width:min(40%, 300px); aspect-ratio:1.75; border-radius:6px; position:absolute; box-shadow:0 24px 40px -18px rgba(0,0,0,.45); display:grid; place-items:center}
.bc.front{background:var(--c1); transform:rotate(-8deg) translate(-38%, -6%)}
.bc.front svg{width:30%}
.bc.back{background:#FBFBF9; transform:rotate(6deg) translate(40%, 10%); place-items:end start; padding:8%; color:#222}
.bc.back svg{width:18%; position:absolute; top:12%; right:9%}
.bc.back p{font:600 clamp(.5rem, 1.2vw, .78rem)/1.35 var(--f-body)}
.bc.back p small{display:block; font-weight:400; opacity:.6; font-size:.85em}

/* gelas / cup */
.m-cup{background:linear-gradient(180deg, color-mix(in srgb, var(--c2) 30%, var(--c3)), var(--c3))}
.cup{width:28%; aspect-ratio:.78; position:relative}
.cup-body{position:absolute; inset:10% 6% 0; background:var(--c3); clip-path:polygon(0 0,100% 0,88% 100%,12% 100%); box-shadow:inset -20px 0 30px rgba(0,0,0,.12); display:grid; place-items:center}
.cup-body::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.35), transparent 40%, rgba(0,0,0,.1))}
.cup-body svg{width:52%}
.cup-lid{position:absolute; top:0; left:0; right:0; height:13%; background:var(--c1); border-radius:40% 40% 8px 8px / 100% 100% 8px 8px}
.cup-sleeve{position:absolute; left:13%; right:13%; top:44%; height:26%; background:var(--c1)}
.cup-shadow{position:absolute; bottom:-6%; left:5%; right:5%; height:8%; background:rgba(0,0,0,.2); filter:blur(8px); border-radius:50%}

/* signage */
.m-sign{background:linear-gradient(180deg, #D9D6CF, #BDB8AE)}
.wall{position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,.05) 38px 40px), repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,.04) 78px 80px)}
.sign{width:34%; aspect-ratio:1; border-radius:50%; background:var(--c1); display:grid; place-items:center; position:relative; box-shadow:0 30px 40px -20px rgba(0,0,0,.5), inset 0 0 0 6px color-mix(in srgb, var(--c1) 70%, #000)}
.sign svg{width:56%}
.sign::before{content:""; position:absolute; top:-16%; left:50%; width:3px; height:16%; background:#555}

/* tote bag */
.m-tote{background:linear-gradient(135deg, color-mix(in srgb, var(--c2) 40%, #fff), color-mix(in srgb, var(--c2) 20%, #ddd))}
.tote{width:30%; aspect-ratio:.85; position:relative; margin-top:12%}
.tote-body{position:absolute; inset:0; background:#EFE9DD; border-radius:3px; display:grid; place-items:center; box-shadow:0 30px 40px -20px rgba(0,0,0,.4), inset 0 -30px 40px -30px rgba(0,0,0,.15)}
.tote-body svg{width:52%}
.tote-handle{position:absolute; top:-38%; width:26%; height:48%; border:6px solid #E3DCCD; border-bottom:0; border-radius:60px 60px 0 0}
.tote-handle.l{left:14%} .tote-handle.r{right:14%}

/* aplikasi */
.m-app{background:linear-gradient(160deg, var(--c1), color-mix(in srgb, var(--c1) 60%, #000))}
.phone{width:26%; aspect-ratio:.5; border-radius:28px; background:#0B0B0D; padding:3.2%; box-shadow:0 40px 50px -24px rgba(0,0,0,.6)}
.phone-screen{width:100%; height:100%; border-radius:22px; background:var(--c3); display:grid; grid-template-rows:auto 1fr; overflow:hidden}
.phone-bar{background:var(--c1); padding:18% 12% 10%; display:grid; justify-items:center; gap:6px}
.phone-bar svg{width:38%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.phone-bar i{width:50%; height:5px; border-radius:4px; background:rgba(255,255,255,.55)}
.phone-list{padding:10%; display:grid; gap:8px; align-content:start}
.phone-list i{height:14px; border-radius:4px; background:color-mix(in srgb, var(--c1) 14%, transparent)}
.phone-list i:nth-child(odd){width:70%}
.phone-list b{height:34px; border-radius:6px; background:var(--c2); margin-top:6px}

/* botol */
.m-bottle{background:linear-gradient(180deg, var(--c3), color-mix(in srgb, var(--c2) 40%, var(--c3)))}
.bottle{width:16%; aspect-ratio:.32; position:relative}
.bottle-cap{position:absolute; top:0; left:32%; right:32%; height:8%; background:var(--c1); border-radius:3px}
.bottle-neck{position:absolute; top:7%; left:30%; right:30%; height:12%; background:rgba(255,255,255,.55); clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.bottle-body{position:absolute; top:18%; bottom:0; left:0; right:0; border-radius:22px 22px 14px 14px; background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 45%, rgba(255,255,255,.6)); box-shadow:0 30px 40px -24px rgba(0,0,0,.4)}
.bottle-label{position:absolute; top:34%; left:0; right:0; height:30%; background:var(--c1); display:grid; place-items:center}
.bottle-label svg{width:58%}

/* truk */
.m-truck{background:linear-gradient(180deg, #D5DAE4 0 72%, #9EA4AF 72%)}
.truck{width:70%; aspect-ratio:3.4; position:relative; margin-top:8%}
.truck-box{position:absolute; left:0; top:0; width:74%; height:78%; background:#FAFAFA; border-radius:4px; display:flex; align-items:center; gap:6%; padding-left:6%; box-shadow:0 20px 30px -20px rgba(0,0,0,.4)}
.truck-box svg{width:22%}
.truck-box b{font:900 clamp(.9rem, 3vw, 2rem) var(--f-display); color:var(--c1); letter-spacing:-.02em}
.truck-box::after{content:""; position:absolute; left:0; right:0; bottom:10%; height:9%; background:var(--c2)}
.truck-cab{position:absolute; right:0; top:22%; width:24%; height:56%; background:var(--c1); border-radius:6px 22px 4px 4px}
.truck-cab::before{content:""; position:absolute; top:12%; right:10%; width:40%; height:36%; background:#BFD3EA; border-radius:3px 14px 3px 3px}
.wheel{position:absolute; bottom:0; width:12%; aspect-ratio:1; border-radius:50%; background:#222; border:5px solid #555; transform:translateY(30%)}
.wheel.a{left:10%} .wheel.b{left:54%} .wheel.c{right:4%}

/* ---------- proyek berikutnya ---------- */
.next{display:block; text-decoration:none; border-top:1px solid var(--line); padding-block:clamp(40px, 7vw, 80px); position:relative; overflow:hidden}
.next .eyebrow{margin-bottom:1rem}
.next h2{font-size:clamp(2.6rem, 10vw, 8rem); font-weight:800; display:flex; align-items:center; gap:.3em; transition:transform .8s var(--ease)}
.next h2 svg{width:.6em; flex:none; fill:none; stroke:var(--accent); stroke-width:2.2; transition:transform .8s var(--ease)}
.next:hover h2{transform:translateX(1.5rem)}
.next:hover h2 svg{transform:rotate(-45deg)}
.next-logo{position:absolute; right:var(--gutter); top:50%; width:clamp(80px, 14vw, 160px); transform:translateY(-50%) scale(.6) rotate(-20deg); opacity:0; transition:all .8s var(--ease)}
.next:hover .next-logo{opacity:1; transform:translateY(-50%) scale(1) rotate(0)}

.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 140%); background:var(--ink); color:var(--paper); padding:.7rem 1.2rem; border-radius:999px; font-size:.9rem; z-index:80; transition:transform .5s var(--ease)}
.toast.show{transform:translate(-50%, 0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  .marquee-track{animation:none}
}


/* =========================================================
   Logo berupa gambar (PNG/JPG/SVG file)
   ========================================================= */
.card-art{background:var(--lb, var(--c3))}
.card-no{color:var(--on, var(--c1))}
.card-art::before{background-image:linear-gradient(color-mix(in srgb, var(--on) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on) 16%, transparent) 1px, transparent 1px)}
.card-art .logo-img{width:66%; height:78%; object-fit:contain}
.card-year{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; text-align:right}

.d-stage{background:var(--lb, var(--c3))}
.stage-logo{width:72%; aspect-ratio:1; display:grid; place-items:center; position:relative; z-index:1; animation:logoIn 1.1s var(--ease) .2s both}
.stage-logo img{width:100%; height:100%; object-fit:contain}
@keyframes logoIn{from{opacity:0; transform:scale(.86) rotate(-4deg)}}
.d-guides *{stroke:var(--on, var(--c1))}
.d-stage .coord{color:var(--on, var(--c1))}
.guide-toggle{color:var(--on, var(--c1)); border-color:color-mix(in srgb, var(--on) 40%, transparent); background:color-mix(in srgb, var(--lb) 70%, transparent)}
.pager{align-items:center}
.pager-count{color:var(--ink-soft); margin-right:.4rem}

.draft-note{margin-top:1.4rem; padding:.8rem 1rem; border:1px dashed var(--line); border-radius:6px; color:var(--ink-soft); font-size:.88rem; max-width:62ch}
.draft-note code{font-family:var(--f-mono); font-size:.85em; color:var(--ink)}
@media (min-width:821px){ .d-block > .draft-note.span2{grid-column:2; margin-top:0} }

.swatches{grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr))}
.swatch-fill{box-shadow:inset 0 -1px 0 var(--line)}

.variants{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:clamp(12px, 2vw, 20px)}
.variant{margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--card)}
.variant > div{background:var(--vb); aspect-ratio:4/3; display:grid; place-items:center; padding:12%}
.variant img{max-height:100%; object-fit:contain; transition:transform .6s var(--ease)}
.variant:hover img{transform:scale(1.06)}
.variant figcaption{padding:10px 14px; font-size:.85rem; border-top:1px solid var(--line)}

/* mockup: permukaan mengikuti warna latar logo */
.patch{display:grid; place-items:center; background:var(--lb); border-radius:6px; padding:6%}
.patch img{width:100%; height:100%; object-fit:contain}
.bc.front{background:var(--lb)}
.bc.front img{width:62%; height:80%; object-fit:contain}
.bc.back .patch{position:absolute; top:10%; right:8%; width:28%; aspect-ratio:1; padding:4%}
.sign{background:var(--lb); overflow:visible}
.sign img{width:76%; height:76%; object-fit:contain; border-radius:50%}
.tote-body{background:#F7F5F0}
.tote-body .patch{width:66%; aspect-ratio:1}
.phone-bar{background:color-mix(in srgb, var(--c1) 85%, #000)}
.avatar{width:46%; aspect-ratio:1; border-radius:50%; background:var(--lb); display:grid; place-items:center; overflow:hidden; box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.avatar img{width:86%; height:86%; object-fit:contain}
.m-app{background:linear-gradient(160deg, var(--c1), color-mix(in srgb, var(--c1) 55%, #000))}
.m-card{background:linear-gradient(160deg, color-mix(in srgb, var(--c1) 22%, #EEE), color-mix(in srgb, var(--c1) 38%, #BBB))}
.m-tote{background:linear-gradient(135deg, color-mix(in srgb, var(--c2) 35%, #fff), color-mix(in srgb, var(--c2) 20%, #ddd))}
.mock-stage.photo{background:#E9E9E9}
.mock-stage.photo img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.mock:hover .mock-stage.photo img{transform:scale(1.04)}

.next-logo{border-radius:50%; overflow:hidden; aspect-ratio:1; display:grid; place-items:center}
.next-logo img{width:80%; height:80%; object-fit:contain}

/* foto profil di beranda */
.portrait{margin:0; position:relative; border-radius:8px; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); max-width:420px}
.portrait img{width:100%; height:100%; object-fit:cover}
.portrait figcaption{position:absolute; left:12px; bottom:12px; background:var(--paper); color:var(--ink); font:500 .72rem var(--f-mono); letter-spacing:.06em; padding:.3rem .6rem; border-radius:4px}
.roles{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.roles li{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
.roles li span{font:500 .75rem var(--f-mono); color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums}
.philo{grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr))}