/* ============================================================
   ITQON TECH LABS — KATALOG PRODUK
   Arah desain: lembar spesifikasi pabrik. Kertas beton dingin,
   tinta nyaris hitam, garis tegas, dan satu warna sinyal merah
   yang dipakai sangat hemat. Satu keluarga huruf saja (Archivo,
   sumbu lebar dipakai untuk judul rapat), plus mono untuk label.
   ============================================================ */
:root{
  /* kertas — beton dingin, sengaja tidak krem */
  --paper:#ECECE6;
  --paper-2:#E2E2DA;
  --paper-3:#D4D4CA;
  --card:#F9F9F5;

  /* tinta */
  --ink:#121213;
  --ink-2:#37373A;
  --dim:#65655F;
  --dim-2:#90908A;

  /* garis */
  --rule:#CFCFC5;
  --rule-2:#ADADA1;
  --rule-3:#121213;

  /* satu warna sinyal, tidak ada warna kedua */
  --accent:#D2361A;
  --accent-2:#A82A11;

  --f-body:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --f-disp:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,monospace;

  /* sumbu lebar Archivo: judul dirapatkan, badan normal */
  --wd-disp:76;
  --wd-mid:88;

  --gut:clamp(18px,4.2vw,72px);
  --sect:clamp(60px,8vw,120px);
  --maxw:1400px;
  --ease:cubic-bezier(.22,.8,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{
  margin:0;font-family:var(--f-disp);font-weight:800;
  font-stretch:76%;font-variation-settings:"wdth" var(--wd-disp);
  letter-spacing:-.022em;line-height:1;
}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
code,kbd{font-family:var(--f-mono)}
::selection{background:var(--accent);color:var(--card)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}

/* serat kertas */
body::before{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.page{position:relative;z-index:1}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect);position:relative}
.rule{height:1px;background:var(--rule-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:14px;z-index:300;background:var(--ink);color:var(--paper);padding:10px 18px;font-weight:600}

/* ---------- dasar tipografi ---------- */
.kicker{
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;
}
.kicker::after{content:"";height:1px;flex:1;background:var(--ink);opacity:.28;max-width:220px}
.h-sect{font-size:clamp(34px,5.4vw,68px);max-width:18ch;margin-top:20px;letter-spacing:-.03em;line-height:.94}
.lede{color:var(--dim);max-width:58ch;font-size:clamp(16px,1.3vw,18.5px);margin-top:18px}
.und{color:var(--accent)}

/* ---------- tombol ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:0;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--ink);cursor:pointer;transition:.26s var(--ease);white-space:nowrap;
}
.btn svg{width:14px;height:14px;transition:transform .26s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-dark:hover{background:var(--card)}

/* ---------- penanda status ---------- */
.st{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:0;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--ink);white-space:nowrap;
}
.st i{width:5px;height:5px;background:currentColor;flex:none}
/* sudah dipakai: paling berat, tinta penuh */
.st--live{background:var(--ink);color:var(--card);border-color:var(--ink)}
.st--live i{background:var(--accent);animation:pulse 2.8s infinite}
/* siap dipasang: garis saja */
.st--soon{background:transparent;color:var(--ink);border-color:var(--ink)}
/* segera: paling ringan */
.st--pre{background:transparent;color:var(--dim);border-color:var(--rule-2)}
.st--pre i{background:var(--rule-2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(210,54,26,.55)}70%{box-shadow:0 0 0 6px rgba(210,54,26,0)}}
@media (prefers-reduced-motion:reduce){.st--live i{animation:none}}

.mono{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.cat{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}

/* ============================ KEPALA HALAMAN ============================ */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(236,236,230,.9);backdrop-filter:blur(12px) saturate(120%);
  border-bottom:1px solid var(--ink);
}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{
  display:flex;align-items:center;gap:12px;margin-right:auto;
  font-family:var(--f-disp);font-weight:800;font-stretch:88%;font-variation-settings:"wdth" var(--wd-mid);
  font-size:19px;letter-spacing:-.012em;
}
.brand .mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:15px;font-weight:500;
}
.brand small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);display:block;line-height:1.2;margin-top:2px}
.brand b{display:block;line-height:1;font-weight:800}
.nav-links{display:flex;gap:28px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nav-links a{position:relative;padding-block:6px;transition:color .22s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.burger{display:none;background:none;border:1px solid var(--rule-2);color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 15px;cursor:pointer}

/* ============================ HERO ============================ */
.hero{position:relative;padding-block:clamp(50px,7vw,96px) clamp(40px,5vw,72px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:clamp(44px,5.4vw,74px) clamp(44px,5.4vw,74px);
  -webkit-mask-image:radial-gradient(120% 85% at 18% 0%,#000 8%,transparent 68%);
  mask-image:radial-gradient(120% 85% at 18% 0%,#000 8%,transparent 68%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero h1{
  font-size:clamp(44px,7.4vw,102px);line-height:.95;letter-spacing:-.038em;
  margin-top:26px;max-width:14ch;text-wrap:balance;
}
.hero .lede{margin-top:26px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--dim-2);margin-top:22px}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);margin-top:clamp(44px,6vw,76px)}
.stats div{padding:24px 22px 0 0;border-right:1px solid var(--rule);min-width:0}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--f-disp);font-weight:800;font-stretch:76%;font-variation-settings:"wdth" var(--wd-disp);font-size:clamp(32px,4.2vw,56px);letter-spacing:-.035em;line-height:.86;font-variant-numeric:tabular-nums}
.stats span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-top:12px;line-height:1.5}

/* ---------- daftar isi ---------- */
.index{border:1px solid var(--ink);background:var(--card)}
.index-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--ink);background:var(--ink)}
.index-hd span{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--card)}
.index a{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 20px;border-bottom:1px solid var(--rule);transition:.22s var(--ease);position:relative;
}
.index a:last-child{border-bottom:0}
.index a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transition:transform .24s var(--ease)}
.index a:hover{background:var(--paper-2)}
.index a:hover::before{transform:scaleY(1)}
.index .n{font-family:var(--f-mono);font-size:11px;color:var(--dim-2);transition:color .22s var(--ease)}
.index a:hover .n{color:var(--accent)}
.index .t{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.index .d{width:8px;height:8px;border:1px solid var(--ink);flex:none}
.index .d.live{background:var(--ink)}
.index .d.soon{background:transparent}
.index .d.pre{background:transparent;border-color:var(--rule-2)}

/* ============================ LOGO KLIEN ============================ */
.logos{padding-block:30px;border-block:1px solid var(--rule-2);background:var(--paper-2)}
.logos-in{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.logos p{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);flex:none}
/* hanya untuk pembaca layar: isinya sama dengan deretan logo yang berjalan */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* deretan logo berjalan: dua jalur kembar, masing-masing digeser selebar dirinya
   sehingga jalur kedua persis menempati posisi jalur pertama — sambungannya mulus */
.marquee{
  flex:1;min-width:0;display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.marquee .track{
  display:flex;align-items:center;flex:none;
  gap:clamp(24px,3.6vw,50px);padding-right:clamp(24px,3.6vw,50px);
  animation:geser 34s linear infinite;
}
.logos:hover .track,.logos:focus-within .track{animation-play-state:paused}
@keyframes geser{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}
.logos .track li{flex:none;white-space:nowrap}
.logos li{font-family:var(--f-disp);font-weight:800;font-stretch:76%;font-variation-settings:"wdth" var(--wd-disp);font-size:17px;letter-spacing:-.01em;color:var(--ink-2);opacity:.62;transition:.3s var(--ease)}
.logos li:hover{opacity:1}
/* deretan logo dibuat abu-abu supaya tenang dan tidak berebut perhatian dengan
   judul di sebelahnya; warna aslinya baru muncul saat kursor mampir. Kontrasnya
   dinaikkan sedikit agar logo yang tulisannya putih di atas kotak berwarna
   (Kedai Kopi Gimbo, Maeil Chikin) tetap pekat, bukan jadi kotak abu-abu pudar. */
.logos img{width:auto;filter:grayscale(1) contrast(1.15);opacity:.8;transition:.3s var(--ease)}
/* Tingginya sengaja beda-beda justru supaya kelihatannya sama besar. Patokannya
   bukan tinggi kotak, melainkan luas gambar yang benar-benar tercetak: logo yang
   memanjang perlu lebih pendek, lambang persegi perlu lebih tinggi. Berkas Delta
   punya ruang kosong sekitar 7% di tiap sisinya, jadi kotaknya dilebihkan sedikit
   supaya tintanya sebesar yang lain. Kalau menambah logo baru, ikuti pola ini. */
.logos .l-aqwam{height:36px}
.logos .l-rice{height:37px}
.logos .l-delta{height:37px}
.logos .l-innoscripta{height:31px}
.logos .l-gimbo{height:50px}
.logos .l-maeil{height:48px}
.logos .l-kemenhub{height:52px}
.logos img:hover{opacity:1;filter:none}

/* ============================ SARINGAN ============================ */
.filter{position:sticky;top:72px;z-index:70;background:rgba(236,236,230,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-2);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.filter.off{transform:translateY(-102%);opacity:0;pointer-events:none}
.filter-in{display:flex;align-items:center;gap:10px;padding-block:14px;flex-wrap:wrap}
.filter-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);margin-right:4px}
.f-btn{
  background:none;border:1px solid var(--rule-2);color:var(--dim);cursor:pointer;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border-radius:0;transition:.2s var(--ease);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;flex:none;
}
.f-btn sup{font-size:9px;color:var(--dim-2);top:0}
.f-btn:hover{border-color:var(--ink);color:var(--ink)}
.f-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.f-btn[aria-pressed="true"] sup{color:rgba(236,236,230,.6)}
.f-count{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--dim-2)}

/* ============================================================
   ENTRI KATALOG — susunan bertumpuk supaya gambarnya besar
   ============================================================ */
.catalog{display:grid;gap:clamp(72px,10vw,150px);padding-top:clamp(44px,6vw,80px)}
.entry{scroll-margin-top:150px}
.entry[hidden]{display:none}

.entry-head{
  display:grid;grid-template-columns:clamp(64px,7vw,130px) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);align-items:start;
  border-top:2px solid var(--ink);padding-top:20px;
}
.entry-head .num{
  font-family:var(--f-disp);font-weight:800;font-stretch:76%;font-variation-settings:"wdth" var(--wd-disp);font-size:clamp(46px,7vw,104px);line-height:.74;
  letter-spacing:-.05em;color:var(--ink);transition:color .4s var(--ease);
  font-variant-numeric:tabular-nums;
}
.entry:hover .entry-head .num{color:var(--accent)}
.entry-titles{display:grid;gap:0;max-width:64ch}
.entry-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.entry h3{font-size:clamp(30px,4.6vw,58px);letter-spacing:-.032em;line-height:.94;text-wrap:balance}
.entry-lede{color:var(--dim);margin-top:16px;font-size:clamp(16px,1.3vw,19px);max-width:52ch}

/* ---------- pelat gambar besar ---------- */
.entry-media{margin:clamp(26px,3.4vw,48px) 0 0;position:relative;max-width:900px}
.entry-media:has(img){max-width:none}
.entry:nth-child(even) .entry-media{margin-left:auto}
.entry-media .shot{
  border:1px solid var(--ink);background:var(--card);overflow:hidden;
  container-type:inline-size;position:relative;
  box-shadow:10px 10px 0 rgba(18,18,19,.045);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.entry-media a.shot-link{display:block;position:relative}
.entry:hover .entry-media .shot{box-shadow:16px 16px 0 rgba(210,54,26,.1);transform:translate(-2px,-2px)}
.entry-media a.shot-link::after{
  content:"Lihat detail →";position:absolute;right:16px;bottom:16px;
  padding:10px 18px;background:var(--ink);color:var(--paper);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:.3s var(--ease);
}
.entry-media a.shot-link:hover::after,
.entry-media a.shot-link:focus-visible::after{opacity:1;transform:none}
.entry-media .cap{margin-top:14px}

/* ---------- kaki entri: spesifikasi menyamping ---------- */
.entry-foot{margin-top:clamp(26px,3vw,44px)}
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0;border-top:1px solid var(--ink);
}
.specs .row{
  display:block;padding:18px clamp(20px,2.2vw,34px) 22px;
  border-right:1px solid var(--rule);
}
/* kolom pertama rata dengan tepi halaman; sisanya diberi napas dari pembatas */
.specs .row:first-child{padding-left:0}
.specs .row:last-child{border-right:0;padding-right:0}
.specs dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.specs dd{font-size:15.5px;color:var(--ink-2);line-height:1.5;margin-top:9px}
.specs dd em{font-style:normal;color:var(--accent);font-weight:600}

.entry-tags{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);
  border:1px solid var(--rule-2);border-radius:0;padding:6px 13px;transition:.22s var(--ease);
}
.entry:hover .chip{border-color:var(--rule-3);color:var(--ink-2)}

.cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--dim-2);line-height:1.6}

.more{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:5px;transition:.24s var(--ease);
}
.more svg{width:13px;height:13px;transition:transform .24s var(--ease)}
.more:hover{color:var(--accent);border-bottom-color:var(--accent)}
.more:hover svg{transform:translateX(4px)}

/* ============================ TAMPILAN LAYAR PRODUK ============================ */
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--paper-2);border-bottom:1px solid var(--rule-2)}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:var(--rule-2);flex:none}
.shot-in{aspect-ratio:16/10;overflow:hidden;background:var(--card);font-size:clamp(8px,2.4cqw,20px);line-height:1.4;display:flex;flex-direction:column;position:relative}
.shot-in>*{flex:1 1 auto;min-height:0}
.shot--tall .shot-in{aspect-ratio:16/10.4}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ============================ AJAKAN KONTAK ============================ */
.cta{
  position:relative;overflow:hidden;padding:clamp(40px,6vw,90px);
  background:var(--ink);color:var(--paper);
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(236,236,230,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(236,236,230,.5) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(85% 90% at 90% 10%,#000,transparent 72%);
  mask-image:radial-gradient(85% 90% at 90% 10%,#000,transparent 72%);
}
.cta>*{position:relative}
.cta .kicker{color:#EE7256}
.cta .kicker::after{background:rgba(236,236,230,.25)}
.cta h2{font-size:clamp(34px,5.2vw,66px);max-width:20ch;margin-top:22px;letter-spacing:-.032em;line-height:.94;text-wrap:balance}
.cta p{color:rgba(249,249,245,.7);max-width:56ch;margin-top:22px;font-size:17px}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.cta .fine{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:rgba(236,236,230,.5);margin-top:24px}

/* ============================ KAKI HALAMAN ============================ */
.foot{border-top:1px solid var(--rule-2);padding-block:clamp(44px,5vw,72px) 30px;background:var(--paper-2)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.foot h5{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);margin:0 0 18px;font-weight:600}
.foot ul{display:grid;gap:11px}
.foot li,.foot a{font-size:14.5px;color:var(--dim)}
.foot a{transition:color .22s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot-note{color:var(--dim);font-size:15px;margin-top:18px;max-width:38ch}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule-2);margin-top:clamp(36px,4vw,56px);padding-top:22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim-2)}

/* ============================ GERAK ============================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.load{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================================================
   HALAMAN DETAIL PRODUK
   ============================================================ */
.back{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);transition:.24s var(--ease)}
.back:hover{color:var(--accent)}
.back svg{width:14px;height:14px;transition:transform .24s var(--ease)}
.back:hover svg{transform:translateX(-4px)}

.dhero{position:relative;padding-block:clamp(34px,4.5vw,60px) clamp(28px,3.6vw,46px);overflow:hidden}
.dhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:clamp(44px,5.4vw,74px) clamp(44px,5.4vw,74px);
  -webkit-mask-image:radial-gradient(120% 85% at 12% 0%,#000 8%,transparent 66%);
  mask-image:radial-gradient(120% 85% at 12% 0%,#000 8%,transparent 66%);
}
.dhero-in{position:relative;display:grid;grid-template-columns:clamp(64px,7vw,130px) minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:start;margin-top:clamp(24px,3vw,42px)}
.dhero .num{font-family:var(--f-disp);font-weight:800;font-stretch:76%;font-variation-settings:"wdth" var(--wd-disp);font-size:clamp(54px,8vw,116px);line-height:.74;letter-spacing:-.05em;color:var(--accent);font-variant-numeric:tabular-nums}
.dhero h1{font-size:clamp(36px,6vw,82px);letter-spacing:-.035em;max-width:15ch;margin-top:16px;line-height:.92;text-wrap:balance}
.dhero .lede{margin-top:22px;max-width:56ch}

.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(28px,4.5vw,80px);align-items:start}

.feat{display:grid;gap:0;border-top:2px solid var(--ink)}
.feat li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.feat .fn{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--accent);padding-top:6px}
.feat b{display:block;font-family:var(--f-disp);font-weight:700;font-stretch:88%;font-variation-settings:"wdth" var(--wd-mid);font-size:21px;letter-spacing:-.02em;color:var(--ink);line-height:1.18}
.feat p{color:var(--dim);font-size:15.5px;margin-top:7px;max-width:52ch}

.panel{border:1px solid var(--ink);padding:clamp(22px,2.8vw,32px);background:var(--card)}
.panel h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 18px}
.panel + .panel{margin-top:18px;background:var(--paper-2)}
.panel ul{display:grid;gap:12px}
.panel li{display:flex;gap:12px;font-size:15px;color:var(--ink-2);align-items:flex-start}
.panel li::before{content:"";width:5px;height:5px;background:var(--ink);flex:none;margin-top:9px}

/* ---------- galeri besar ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(26px,3vw,44px)}
.gcard{margin:0;cursor:zoom-in;display:grid;gap:12px}
.gcard .shot{
  border:1px solid var(--ink);background:var(--card);overflow:hidden;container-type:inline-size;
  box-shadow:8px 8px 0 rgba(18,18,19,.045);transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.gcard:hover .shot,.gcard:focus-visible .shot{box-shadow:14px 14px 0 rgba(210,54,26,.12);transform:translate(-2px,-2px)}
.gcard .shot-in{aspect-ratio:16/10}
.gcard figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--dim);line-height:1.55;display:flex;align-items:baseline;gap:10px}
.gcard figcaption::before{content:"";width:16px;height:1px;background:var(--accent);flex:none;transform:translateY(-4px)}
.gcard:hover figcaption{color:var(--ink-2)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(236,236,230,.97);backdrop-filter:blur(8px);display:none;padding:clamp(14px,3vw,48px);flex-direction:column;gap:16px}
.lb.on{display:flex}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--ink);box-shadow:14px 14px 0 rgba(18,18,19,.08)}
.lb-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}
.lb-bar .idx{color:var(--dim-2)}
.lb-btn{background:var(--card);border:1px solid var(--ink);color:var(--ink);border-radius:0;width:40px;height:40px;cursor:pointer;font-size:16px;line-height:1;transition:.2s var(--ease);flex:none}
.lb-btn:hover{border-color:var(--ink);background:var(--paper-2)}
.lb-close{position:absolute;top:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px)}

/* ============================ LAYAR KECIL ============================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:0}
  .stats div{border-bottom:1px solid var(--rule);padding-bottom:22px}
  .stats div:nth-child(2n){border-right:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .dgrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{
    position:absolute;top:72px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--rule-2);
    flex-direction:column;gap:0;padding:8px var(--gut) 18px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
  .burger{display:inline-block}
  .filter{top:72px}
  .filter-in{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .filter-in::-webkit-scrollbar{display:none}
  .f-count{display:none}
  .entry-head{grid-template-columns:1fr;gap:8px}
  .entry-head .num{font-size:clamp(40px,12vw,64px);line-height:1}
  .dhero-in{grid-template-columns:1fr}
  .specs .row{border-right:0;border-bottom:1px solid var(--rule);padding-inline:0}
  .specs .row:last-child{border-bottom:0}
  body.detail .nav-links{position:static;display:flex;flex-direction:row;gap:20px;padding:0;background:none;border:0}
  body.detail .nav-links a{padding:6px 0;border-bottom:0;font-size:11px}
}
@media (max-width:640px){
  body{font-size:16px}
  .brand{font-size:18px;gap:10px}
  .brand small{display:none}
  .brand .mark{width:30px;height:30px;font-size:13px}
  .nav-in>.btn-solid{padding:12px 15px;font-size:11px}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta{padding:32px 24px}
  .gal{grid-template-columns:1fr}
}
@media (max-width:470px){
  .nav-in>.btn-solid{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .load{opacity:1;transform:none}
}

/* ============================ GESER SAMPING: BEBERAPA TAMPILAN ============================
   Satu bingkai peramban, isinya beberapa tampilan yang bisa digeser ke samping.
   Murni CSS scroll-snap; tombol panah dan titik hanya pelengkap.
   ========================================================================================= */
.shot-bar .sbar-r{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.sdots{display:flex;align-items:center;gap:5px}
.sdot{
  width:14px;height:3px;background:var(--rule-2);border:0;padding:0;cursor:pointer;
  transition:background .25s var(--ease),width .25s var(--ease);
}
.sdot[aria-current="true"]{background:var(--accent);width:22px}
.snum{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--dim-2);
  white-space:nowrap;padding-left:3px;
}

.strip{
  display:flex;height:100%;min-height:0;
  overflow-x:auto;overflow-y:hidden;
  /* scroll-behavior sengaja dibiarkan auto. Kalau disetel smooth di sini,
     Chrome membatalkan scrollTo() dari tombol panah. Animasi halusnya diatur di JS. */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{display:none}
/* bisa diseret pakai tetikus; di layar sentuh peramban sudah menggeser sendiri */
.strip{cursor:grab}
.strip.seret{cursor:grabbing;user-select:none}
.strip img{-webkit-user-drag:none;user-select:none}
.strip>.slide{
  flex:0 0 100%;width:100%;min-width:0;height:100%;
  scroll-snap-align:start;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.strip>.slide>img{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* tangkapan layar yang jauh lebih lebar dari bingkai: jangkarkan ke kiri
   supaya logo dan menu atas tidak ikut terpotong */
.strip>.slide--wide>img{object-position:left top}
/* buang bar gulir peramban yang ikut terbawa saat capture */
.strip>.slide--trim>img{width:var(--trim,103.4%);max-width:none;object-position:left top}
/* gambar tegak: tampilkan utuh di atas latar gelap, jangan dipaksa penuh */
.slide--pad{background:#121213}
.strip>.slide--pad>img{object-fit:contain;object-position:center}

.slide .sc{
  position:absolute;left:0;bottom:0;max-width:78%;z-index:2;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;line-height:1.5;color:var(--ink-2);
  background:rgba(249,249,245,.95);border-top:1px solid var(--ink);border-right:1px solid var(--ink);
  padding:8px 14px;
}
a.slide::after{
  content:"Lihat detail →";position:absolute;right:0;bottom:0;z-index:2;
  padding:9px 16px;background:var(--ink);color:var(--paper);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:.3s var(--ease);
}
a.slide:hover::after,a.slide:focus-visible::after{opacity:1;transform:none}

.snav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:var(--card);border:1px solid var(--ink);color:var(--ink);
  opacity:0;transition:opacity .28s var(--ease),background .2s var(--ease);
}
.snav.prev{left:10px}
.snav.next{right:10px}
.snav svg{width:15px;height:15px}
.snav:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.snav[disabled]{opacity:0!important;pointer-events:none}
.shot:hover .snav,.snav:focus-visible{opacity:1}

/* tangkapan layar beresolusi kecil: jangan dilebarkan, nanti pecah */
.entry-media--sm:has(img){max-width:900px}

@media (max-width:640px){
  .snav{display:none}
  .slide .sc{font-size:9.5px;padding:6px 10px;max-width:88%}
  a.slide::after{display:none}
}