/* Latar kanvas halaman: tampak saat overscroll elastis (macOS/iOS).
   Wajib sama dengan base brand, bukan warna kanvas prototype. */
:root{--page-bg:#FAF7F2;color-scheme:light}

/* style.css - X Ultimate (theme-xultimate), di-port dari kontrak UI (prototype layouts/xultimate.py).
   Arsitektur "The Spec Sheet": sidebar nav vertikal ber-indeks, hero tipografis + spec panel,
   band perbandingan hitam, breakdown efisiensi (count-up + bar), katalog kartu tipografis mono
   (nol foto produk), band proses/lab full-bleed, Liputan Media (logo grayscale).
   Semua selector ber-namespace .theme-xultimate. Warna aksen + reset shared dari base.css.
   Chrome khusus prototype (prototype-bar) sengaja tidak disertakan. */

/* ============ X ULTIMATE - The Spec Sheet ============ */
/* Override token font + hairline/band lokal (warna aksen sudah dari base.css) */
.theme-xultimate{
  --disp:'Space Grotesk','Segoe UI',Helvetica,Arial,sans-serif;
  --txt:'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hair:#E4E2DD; --card2:#FAFAF8; --band:#0A0A0A;
  --sec-pad:clamp(4rem,8vh,7rem); /* ritme rapat/teknis */
}
.theme-xultimate .h-disp,.theme-xultimate h2.h2{letter-spacing:-.02em}
/* eyebrow = label mono (data-sheet), bukan serif */
.theme-xultimate .eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.22em}

/* ===== shell: sidebar rail + main ===== */
.theme-xultimate .xu-layout{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
.theme-xultimate .xu-main{min-width:0}
.theme-xultimate .xu-wrap{max-width:64rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}

/* ===== sidebar nav (satu-satunya nav vertikal di 4 situs) ===== */
.theme-xultimate .xu-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  gap:1.4rem;padding:1.5rem 1.05rem;background:#fff;border-right:1px solid var(--hair)}
.theme-xultimate .xu-logo{display:inline-flex;align-items:center}
/* wordmark memanjang -> tinggi optis 44px. rasio file 1080/500 dijaga (object-fit contain) */
.theme-xultimate .xu-logo img{height:44px;width:auto;aspect-ratio:1080/500;object-fit:contain;display:block}
.theme-xultimate .xu-nav{display:flex;flex-direction:column;gap:.15rem;margin-top:.4rem}
.theme-xultimate .xu-nav a{display:flex;align-items:baseline;gap:.55rem;
  padding:.55rem .5rem .55rem .75rem;font-family:var(--mono);font-size:.82rem;font-weight:400;
  color:var(--ink);text-decoration:none;border-left:2px solid transparent;
  transition:color .2s ease-out,border-color .2s ease-out,background .2s ease-out}
.theme-xultimate .xu-nav a b{font-weight:500;font-size:.72rem;color:var(--muted);transition:color .2s ease-out}
.theme-xultimate .xu-nav a:hover,.theme-xultimate .xu-nav a:focus-visible{
  color:var(--txac);border-left-color:var(--ac);background:#F1FAFC}
.theme-xultimate .xu-nav a.xu-active{color:var(--txac);border-left-color:var(--ac)}
.theme-xultimate .xu-nav a.xu-active b{color:var(--txac)}
.theme-xultimate .xu-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.7rem}
.theme-xultimate .xu-side-foot .btn{padding:.6rem 1rem;font-size:.8125rem;width:100%}
.theme-xultimate .xu-side-foot .langbtn{align-self:flex-start}

/* ===== hero klinis (tanpa gambar full-bleed) ===== */
.theme-xultimate .xu-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.theme-xultimate .xu-hero .xu-wrap{display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(3.5rem,9vh,6rem);position:relative;z-index:1}
.theme-xultimate .xu-hero .lead{margin:1.4rem 0 2rem;max-width:34rem;color:var(--muted)}
.theme-xultimate .xu-ctas{display:flex;gap:1rem;flex-wrap:wrap}
/* right column: inset + spec panel */
.theme-xultimate .xu-panel{display:flex;flex-direction:column;gap:1.1rem}
.theme-xultimate .xu-inset{width:160px;border:1px solid var(--hair);border-radius:2px;overflow:hidden}
.theme-xultimate .xu-inset img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.theme-xultimate .xu-spec-panel{border:1px solid var(--hair);border-radius:2px;background:var(--card2);
  padding:1.15rem 1.25rem}
.theme-xultimate .xu-spec-head{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txac);padding-bottom:.7rem;border-bottom:1px solid var(--hair)}
.theme-xultimate .xu-drow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--mono);font-size:.82rem;padding:.6rem 0;border-bottom:1px solid var(--hair)}
.theme-xultimate .xu-drow:last-of-type{border-bottom:none}
.theme-xultimate .xu-drow .k{color:var(--muted)}
.theme-xultimate .xu-drow .v{color:var(--txac);font-weight:500;white-space:nowrap}
.theme-xultimate .xu-miniwrap{overflow-x:auto;margin-top:.9rem}
.theme-xultimate .minitable td strong,.theme-xultimate .minitable thead th{font-family:var(--mono)}

/* ===== band perbandingan (HITAM) ===== */
.theme-xultimate .xu-band{position:relative;overflow:hidden;background:var(--band);color:#fff}
/* latar batu gelap ternetralisir (grayscale) + scrim pekat -> teks putih tetap AA */
.theme-xultimate .xu-band-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.theme-xultimate .xu-band-bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.6) contrast(1.02);opacity:.55}
.theme-xultimate .xu-band-bg::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.72)}
.theme-xultimate .xu-band .xu-wrap{position:relative;z-index:1;padding-block:clamp(4rem,9vh,7rem)}
.theme-xultimate .xu-band .eyebrow{color:var(--ac)}
.theme-xultimate .xu-band .eyebrow::before{background:var(--ac)}
.theme-xultimate .xu-band h2{color:#fff;margin-top:.7rem}
.theme-xultimate .xu-band .xu-note{color:rgba(255,255,255,.72);max-width:52ch;margin-top:.9rem}
.theme-xultimate .xu-bars{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;gap:1.6rem}
.theme-xultimate .xu-barlabel{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.8rem;margin-bottom:.55rem}
.theme-xultimate .xu-barlabel .n{color:#fff}
.theme-xultimate .xu-barlabel .xu-barval{color:var(--ac);font-weight:500}
.theme-xultimate .xu-track{height:14px;background:rgba(255,255,255,.1);border-radius:1px;overflow:hidden}
.theme-xultimate .xu-fill{display:block;height:100%;width:var(--w);background:var(--ac);
  opacity:1;transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.theme-xultimate .xu-fill.in{transform:scaleX(1)}

/* ===== breakdown efisiensi (terang) ===== */
.theme-xultimate .xu-eff .xu-effgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem);
  align-items:end;margin-top:.5rem}
.theme-xultimate .xu-eff .xu-side-media{margin-top:2.5rem;border:1px solid var(--hair);border-radius:2px;overflow:hidden;aspect-ratio:16/6}
.theme-xultimate .xu-eff .xu-side-media img{width:100%;height:100%;object-fit:cover}
.theme-xultimate .xu-stat .xu-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.theme-xultimate .xu-stat .xu-num{font-family:var(--disp);font-weight:500;line-height:1;
  font-size:clamp(2.75rem,2rem+4cqw,4.5rem);font-variant-numeric:tabular-nums;color:var(--ink);margin:.35rem 0 .8rem}
.theme-xultimate .xu-stat.hi .xu-num{color:var(--txac)}
.theme-xultimate .xu-stat .xu-unit{font-size:.4em;color:var(--muted);vertical-align:.14em;margin-left:.12em;font-weight:400;letter-spacing:.01em}
.theme-xultimate .xu-eff .xu-track{background:#EDEBE6;height:12px}
.theme-xultimate .xu-stat .xu-lbl{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-top:.7rem}

/* ===== lockup brand (kop lembar-data) ===== */
.theme-xultimate .xu-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;
  margin:0 0 clamp(2.5rem,5vw,3.75rem)}
/* wordmark besar; rasio 1080/500 dijaga, object-fit:contain -> tak pernah gepeng */
.theme-xultimate .xu-lockup-logo{height:clamp(64px,9vw,110px);width:auto;aspect-ratio:1080/500;
  object-fit:contain;display:block}
.theme-xultimate .xu-lockup-rule{width:clamp(120px,22vw,260px);height:1px;background:var(--ac);border:0}
.theme-xultimate .xu-lockup-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted)}

/* ===== katalog: kartu tipografis spec-grid (nol foto produk) ===== */
.theme-xultimate .xu-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.4rem)}
.theme-xultimate .pcard.xu-spec{background:var(--card);border:1px solid var(--hair);border-radius:2px;
  box-shadow:none;overflow:visible;position:relative}
.theme-xultimate .pcard.xu-spec::after{content:'';position:absolute;top:0;right:0;width:0;height:0;
  border-top:12px solid var(--ac);border-left:12px solid transparent}
.theme-xultimate .pcard.xu-spec:hover{transform:translateY(-3px);border-color:var(--ac)}
.theme-xultimate .xu-face{aspect-ratio:auto;position:static;overflow:visible;display:flex;
  flex-direction:column;gap:.5rem;padding:1.35rem 1.25rem;min-height:172px;justify-content:center;background:transparent}
.theme-xultimate .xu-face .xu-code{font-family:var(--mono);font-weight:500;font-size:1.35rem;
  letter-spacing:.02em;color:var(--txac)}
.theme-xultimate .xu-face .xu-pname{font-family:var(--disp);font-weight:500;font-size:1.15rem;
  line-height:1.15;color:var(--ink)}
.theme-xultimate .xu-face .xu-slot{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;
  color:var(--muted);border-top:1px solid var(--hair);padding-top:.65rem;margin-top:.2rem}

/* ===== band proses / lab full-bleed ===== */
.theme-xultimate .xu-lab{position:relative;overflow:hidden;background:#0A0A0A}
.theme-xultimate .xu-lab .xu-lab-bg{position:absolute;inset:0;z-index:0}
.theme-xultimate .xu-lab .xu-lab-bg img{width:100%;height:100%;object-fit:cover}
.theme-xultimate .xu-lab .xu-lab-bg::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.74)}
.theme-xultimate .xu-lab .xu-wrap{position:relative;z-index:1;padding-block:clamp(4rem,9vh,6.5rem)}
.theme-xultimate .xu-lab .eyebrow{color:var(--ac)}
.theme-xultimate .xu-lab .eyebrow::before{background:var(--ac)}
.theme-xultimate .xu-lab h2{color:#fff;margin-top:.7rem}
.theme-xultimate .xu-lab .lead{color:rgba(255,255,255,.82);max-width:46ch;margin-top:.9rem}
.theme-xultimate .xu-lab-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.25rem);
  margin-top:clamp(2rem,4vw,3rem)}
.theme-xultimate .xu-lab-cell{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.12)}
.theme-xultimate .xu-lab-cell img{width:100%;height:100%;object-fit:cover}
/* scrim per-cell: label putih di atas foto lab (terang) tetap AA - nol text-shadow */
.theme-xultimate .xu-lab-cell::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,10,10,.72),transparent 62%)}
.theme-xultimate .xu-lab-cell span{position:absolute;left:.7rem;bottom:.6rem;z-index:1;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.1em;color:#fff}

/* ===== liputan media (logo grayscale, TANPA eyebrow, surface terang) ===== */
.theme-xultimate .xu-press .xu-logowall{background:#fff;border-block:1px solid var(--hair);
  padding:clamp(2.25rem,4vw,3rem) 1rem;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;column-gap:clamp(2.25rem,5vw,3.25rem);row-gap:1.5rem;
  margin:clamp(1.5rem,3vw,2.25rem) 0 clamp(2.5rem,5vw,3.5rem)}
.theme-xultimate .xu-logo-img{height:40px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;
  transition:filter .2s ease-out,opacity .2s ease-out}
.theme-xultimate .xu-logo-img.is-icon{height:32px}
.theme-xultimate .xu-logo-img:hover,.theme-xultimate .xu-logo-img:focus{filter:grayscale(0);opacity:1}
.theme-xultimate .xu-logo-fallback{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;height:40px}
/* keterangan kecil di bawah minitable "Bukti Sederhana" */
.theme-xultimate .xu-mini-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;
  color:var(--muted);margin-top:.55rem}

/* ===== hero texture: molekul full-bleed faint (tetap klinis/AA) ===== */
.theme-xultimate .xu-hero-tex{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.theme-xultimate .xu-hero-tex img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.2}
.theme-xultimate .xu-hero-tex::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.9))}

/* ===== USP = daftar spec-row mono (border-left cyan, TANPA kartu shadow) ===== */
.theme-xultimate .xu-usplist{display:grid;gap:0;border-top:1px solid var(--hair)}
.theme-xultimate .xu-usprow{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.15rem 0 1.15rem 1.1rem;border-bottom:1px solid var(--hair);border-left:2px solid var(--ac)}
.theme-xultimate .xu-usp-n{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--txac)}
.theme-xultimate .xu-usprow h3{font-family:var(--disp);font-weight:500;font-size:1.05rem;color:var(--ink);margin-bottom:.25rem}
.theme-xultimate .xu-usprow p{font-size:.875rem;color:var(--muted)}

/* ===== bottom sections: bahasa spec-sheet (hairline mono) ===== */
.theme-xultimate .bgrid{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.theme-xultimate .bcard{background:var(--card2);box-shadow:none;border-radius:0;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:1.4rem 1.3rem;gap:.55rem}
.theme-xultimate a.bcard:hover{transform:none;background:#F1FAFC}
.theme-xultimate .bcard .bk{font-family:var(--mono);letter-spacing:.18em;color:var(--txac)}
.theme-xultimate .bcard h3{font-family:var(--disp);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.theme-xultimate .bcard .cap{font-family:var(--mono);font-size:.72rem}
.theme-xultimate .presslist{border-top:1px solid var(--hair)}
.theme-xultimate .pressrow{border-bottom:1px solid var(--hair);border-left:2px solid transparent;padding-left:1rem;
  transition:background .2s ease-out,border-color .2s ease-out}
.theme-xultimate .pressrow:hover{transform:none;background:#F1FAFC;border-left-color:var(--ac)}
.theme-xultimate .pr-media,.theme-xultimate .pr-period{font-family:var(--mono)}
.theme-xultimate .pr-title{font-family:var(--txt);font-weight:500;font-size:1.02rem}
.theme-xultimate .pressrow:hover .pr-title{border-color:transparent;color:var(--txac)}
.theme-xultimate .acc-q{font-family:var(--mono);font-size:.95rem;letter-spacing:.01em}
.theme-xultimate .acc-q .ic{font-family:var(--mono)}
.theme-xultimate .xu-contact .xu-wrap{position:relative;overflow:hidden;
  border:1px solid var(--hair);border-top:3px solid var(--ac);border-radius:2px;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem);background:var(--card2)}
/* botol jadi (aspirasi) di latar CTA - scrim putih kuat, teks gelap tetap AA */
.theme-xultimate .xu-contact-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.theme-xultimate .xu-contact-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.5}
.theme-xultimate .xu-contact-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(250,250,248,.95),rgba(250,250,248,.86))}
.theme-xultimate .xu-contact-inner{position:relative;z-index:1}

/* ===== artikel blog: tabel markdown ter-sanitasi (scroll internal, anti overflow) ===== */
.theme-xultimate .article-body p{margin-bottom:1.4rem}
.theme-xultimate .article-body h2,.theme-xultimate .article-body h3{font-family:var(--disp);font-weight:500;
  letter-spacing:-.01em;margin:1.8rem 0 .6rem;line-height:1.2}
.theme-xultimate .article-body h2{font-size:1.6rem}
.theme-xultimate .article-body h3{font-size:1.25rem}
.theme-xultimate .article-body ul,.theme-xultimate .article-body ol{margin:0 0 1.4rem 1.3rem}
.theme-xultimate .article-body li{margin-bottom:.4rem}
.theme-xultimate .article-body strong{color:var(--txac)}
.theme-xultimate .article-body table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;
  margin:2rem 0;font-size:.9375rem;background:var(--card);box-shadow:var(--shadow)}
.theme-xultimate .article-body th,.theme-xultimate .article-body td{padding:.7rem 1rem;
  border:1px solid var(--hair);text-align:left;font-family:var(--mono);white-space:nowrap}
.theme-xultimate .article-body thead th{background:#141210;color:#FAF7F2;letter-spacing:.03em}
.theme-xultimate .article-body thead th:last-child{color:var(--ac)}
.theme-xultimate .article-body td strong{color:var(--txac)}

/* ===== responsive (container query pada .view) ===== */
@container (max-width:760px){
  .theme-xultimate .bgrid{grid-template-columns:1fr}
  .theme-xultimate .xu-layout{grid-template-columns:minmax(0,1fr)}
  .theme-xultimate .xu-side{position:sticky;top:0;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:.6rem .8rem;padding:.6rem .85rem;border-right:none;
    border-bottom:1px solid var(--hair);z-index:30}
  .theme-xultimate .xu-nav{flex-direction:row;order:3;flex:1 1 100%;overflow-x:auto;gap:.35rem;
    margin-top:.1rem;padding-bottom:.2rem}
  .theme-xultimate .xu-nav a{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;
    padding:.3rem .5rem;font-size:.72rem}
  .theme-xultimate .xu-nav a:hover,.theme-xultimate .xu-nav a:focus-visible,
  .theme-xultimate .xu-nav a.xu-active{border-left-color:transparent;border-bottom-color:var(--ac);background:none}
  .theme-xultimate .xu-side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center;gap:.5rem}
  .theme-xultimate .xu-side-foot .btn{width:auto;padding:.45rem .9rem}
  .theme-xultimate .xu-hero .xu-wrap{grid-template-columns:1fr}
  .theme-xultimate .xu-panel{order:-1}
  .theme-xultimate .xu-eff .xu-effgrid{grid-template-columns:1fr;gap:2rem}
  .theme-xultimate .xu-cat-grid{grid-template-columns:1fr 1fr}
  .theme-xultimate .xu-lab-strip{grid-template-columns:1fr}
  .theme-xultimate .xu-logo-img{height:30px}
  .theme-xultimate .xu-logo-img.is-icon{height:26px}
  .theme-xultimate .xu-logo-fallback{height:30px}
  /* nav brand: wordmark turun proporsional di mobile (44 -> 34) */
  .theme-xultimate .xu-logo img{height:34px}
}
@container (max-width:460px){
  .theme-xultimate .xu-cat-grid{grid-template-columns:1fr}
}