/* =====================================================
   Renalar — Product Shot System
   Replika UI aplikasi Renalar (AppShell + Dashboard +
   AI Report + Sumber Data + Konfigurasi) untuk marketing site.
   Semua ukuran memakai em → skala seluruh shot cukup
   dengan mengubah font-size pada .shot
   ===================================================== */

/* reset aturan tabel dari site.css agar tidak bocor ke dalam shot */
.shot table{min-width:0;font-size:inherit}
.shot th,.shot td{padding:0;border-bottom:0;vertical-align:middle}
/* site.css/premium.css punya aturan GLOBAL (.stats, thead th, .meta) yang ikut
   mengenai isi mockup. Dinetralkan di sini agar chrome marketing tidak bocor. */
.shot thead th{background:transparent}
.shot .stats{border:0;border-radius:0;background:transparent;overflow:visible}

.shot{
  font-size:10px;                       /* skala master */
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  box-shadow:0 30px 60px -30px rgba(17,26,54,.38), 0 4px 14px -8px rgba(17,26,54,.18);
  overflow:hidden;
  line-height:1.45;
  position:relative;
  isolation:isolate;
}
.shot--sm{font-size:8.6px}
.shot--dark-frame{border-color:rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}

/* ── Chrome browser ── */
.shot__chrome{
  display:flex;align-items:center;gap:.7em;
  padding:.9em 1.2em;background:#EDEFF2;border-bottom:1px solid var(--hairline);
}
.shot__dots{display:flex;gap:.45em}
.shot__dots i{width:.85em;height:.85em;border-radius:50%;background:#CBD1D9;display:block}
.shot__dots i:nth-child(1){background:#F0837A}
.shot__dots i:nth-child(2){background:#F2C05C}
.shot__dots i:nth-child(3){background:#7FCF8B}
.shot__url{
  flex:1;margin-left:.5em;background:#fff;border:1px solid var(--hairline);
  border-radius:99em;padding:.35em 1em;font-size:1.05em;color:var(--text-subtle);
  display:flex;align-items:center;gap:.5em;max-width:26em;
}
.shot__url b{color:var(--text-secondary);font-weight:600}

/* ── App layout ── */
.shot__app{display:flex;align-items:stretch;background:var(--surface-card)}
.shot__viewport{position:relative;overflow:hidden}
.shot__viewport::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(247,248,249,0),rgba(247,248,249,.92) 62%,#F7F8F9);
}
.shot__viewport--tall{height:47em}
.shot__viewport--mid{height:38em}

/* ── Sidebar ── */
.shot__side{
  width:16.4em;flex-shrink:0;background:#fff;border-right:1px solid var(--hairline);
  padding:1.6em 1.2em;display:flex;flex-direction:column;
}
/* Memakai berkas logo asli (assets/logo.svg), bukan bentuk tiruan.
   Ukurannya dalam em agar ikut berskala bersama mockup. */
.shot__wordmark{display:flex;align-items:center;padding:0 .4em 1.4em}
.shot__wordmark img{width:8.2em;height:auto;display:block}
.shot__switch{
  display:flex;align-items:center;gap:.7em;padding:.75em .85em;margin-bottom:1.4em;
  border:1px solid var(--hairline);border-radius:.8em;background:var(--surface-card);
}
.shot__switch i{
  width:2.2em;height:2.2em;border-radius:.55em;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1em;font-style:normal;
  flex-shrink:0;
}
.shot__switch b{font-size:1.05em;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot__switch .cv{flex-shrink:0}
.shot__mlabel{
  font-size:.9em;font-weight:700;letter-spacing:.12em;color:var(--text-subtle);
  padding:0 .7em .7em;text-transform:uppercase;
}
.shot__nav{display:flex;flex-direction:column;gap:.2em}
.shot__nav a{
  display:flex;align-items:center;gap:.8em;padding:.75em .85em;border-radius:.7em;
  font-size:1.1em;font-weight:600;color:var(--grey-500);
}
.shot__nav a svg{width:1.45em;height:1.45em;flex-shrink:0}
.shot__nav a.is-on{background:var(--blue-100);color:var(--blue-700)}
.shot__side-foot{margin-top:auto;padding:1.2em .7em 0;font-size:.9em;color:var(--text-subtle)}

/* ── Topbar ── */
.shot__main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.shot__top{
  height:4.4em;background:rgba(255,255,255,.92);border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:space-between;padding:0 1.9em;flex-shrink:0;
}
.shot__top h4{font-family:var(--font-display);font-size:1.5em;font-weight:700;margin:0}
.shot__topr{display:flex;align-items:center;gap:1.1em;color:var(--text-muted)}
.shot__topr svg{width:1.5em;height:1.5em}
.shot__bell{position:relative;display:flex}
.shot__bell::after{
  content:"";position:absolute;top:-.1em;right:-.1em;width:.6em;height:.6em;
  border-radius:50%;background:var(--error);
}
.shot__user{display:flex;align-items:center;gap:.55em;border:1px solid var(--hairline);background:#fff;border-radius:99em;padding:.3em .7em .3em .3em}
.shot__ava{
  width:2.6em;height:2.6em;border-radius:50%;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1em;flex-shrink:0;
}
.shot__user b{display:block;font-size:1.05em;font-weight:700;line-height:1.15;color:var(--text-primary)}
.shot__user span{display:block;font-size:.9em;color:var(--text-subtle)}
/* Avatar juga berupa <span> di dalam .shot__user, sehingga ikut terkena
   aturan display:block di atas — spesifisitasnya (0,1,1) mengalahkan
   .shot__ava (0,1,0). Akibatnya display:flex batal dan hurufnya
   menempel di kiri-atas. Dua kelas di sini (0,2,0) mengembalikannya. */
.shot__user .shot__ava{display:flex;font-size:1em;color:var(--blue-700)}

/* ── Konten ── */
.shot__body{padding:1.9em;display:flex;flex-direction:column;gap:1.7em}
.shot__sec{display:flex;flex-direction:column;gap:1em}
.shot__sec > h5{font-family:var(--font-display);font-size:1.3em;font-weight:700;margin:0}

/* Filter bar */
.shot__filter{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.shot__seg{display:inline-flex;background:var(--grey-100);border:0;border-radius:.6em;padding:.25em;gap:.2em}
.shot__seg span{padding:.45em 1em;border-radius:.45em;font-size:1em;font-weight:600;color:var(--text-muted)}
.shot__seg span.is-on{background:#fff;color:var(--grey-900);box-shadow:0 1px 2px rgba(0,0,0,.06)}
/* Tabs dev: garis bawah, item aktif bergaris biru */
.shot__tabs{display:flex;gap:.35em;border-bottom:1px solid var(--hairline)}
.shot__tabs span{padding:.65em 1em;font-size:1em;font-weight:600;color:var(--text-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.shot__tabs span.is-on{color:var(--blue-700);border-bottom-color:var(--blue-500)}
.shot__pill{
  display:inline-flex;align-items:center;gap:.45em;background:#fff;border:1px solid var(--hairline);
  border-radius:.7em;padding:.5em .8em;font-size:1em;font-weight:600;color:var(--text-secondary);
  line-height:1;white-space:nowrap;
}
.shot__linkbtn{margin-left:auto;font-size:1em;font-weight:700;color:var(--blue-500)}

/* Big Insight */
.shot__insight{
  background:var(--surface-dark);color:#fff;border-radius:1.1em;padding:1.8em;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:1.6em 1.6em;position:relative;overflow:hidden;
}
.shot__insight .eb{
  font-size:.9em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-300);
}
.shot__insight .hl{
  font-family:var(--font-display);font-size:1.6em;font-weight:600;line-height:1.35;
  margin-top:.55em;max-width:34ch;
}
/* Big Insight head & CTA (mengikuti komponen BigInsight di aplikasi) */
.shot__ihead{display:flex;align-items:center;justify-content:space-between;gap:1em}
.shot__ihead .ebwrap{display:inline-flex;align-items:center;gap:.7em}
.shot__ihead .eb{display:inline-flex;align-items:center;gap:.55em}
.shot__ihead .eb::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--blue-500);display:block}
.shot__ihide{
  display:inline-flex;align-items:center;gap:.45em;padding:.45em .85em;border-radius:.55em;
  background:rgba(255,255,255,.10);color:#fff;font-size:.95em;font-weight:600;white-space:nowrap;
}
.shot__ihide svg{width:1.1em;height:1.1em}
.shot__irow{display:flex;align-items:center;gap:1.8em;flex-wrap:wrap;margin-top:1.1em}
.shot__irow .hl{flex:1 1 24em;margin-top:0}
.shot__ibtn{
  display:inline-flex;align-items:center;gap:.5em;flex-shrink:0;margin-left:auto;
  background:var(--blue-500);color:#fff;font-weight:600;font-size:1.05em;
  padding:.7em 1.15em;border-radius:.55em;white-space:nowrap;
}
.shot__ibtn svg{width:1.15em;height:1.15em}
.sbadge--brand{background:var(--blue-100);color:var(--blue-700)}
.sbadge--info{background:#E8EFFD;color:#1D4ED8}
.shot__hstats{display:flex;gap:2em;margin-top:1.4em;flex-wrap:wrap}
.shot__hstats div .k{font-size:.85em;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.shot__hstats div .v{font-family:var(--font-display);font-size:1.55em;font-weight:700;margin-top:.15em}
.shot__hstats .neg .v{color:#FCA5A5}
.shot__hstats .warn .v{color:#FCD34D}

/* Panel & grid */
.shot__grid{display:grid;gap:1.1em;min-width:0}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g21{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.shot__panel{
  background:#fff;border:1px solid var(--hairline);border-radius:1em;padding:1.3em;
  box-shadow:0 6px 18px -14px rgba(31,41,55,.25);min-width:0;
}
.shot__panel > .ph{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;
  font-size:1.1em;font-weight:700;margin:0 0 1em;padding-bottom:.85em;
  border-bottom:1px solid var(--hairline);
}
.ph .tt{display:flex;flex-direction:column;gap:.2em;min-width:0}
.ph .tt em{font-style:normal;font-size:.78em;font-weight:400;color:var(--text-muted);line-height:1.35}

/* Badges */
.sbadge{
  display:inline-flex;align-items:center;gap:.4em;font-size:.92em;font-weight:700;
  padding:.25em .8em;border-radius:99em;white-space:nowrap;
}
.sbadge--pos{background:var(--success-tint);color:var(--success-text)}
.sbadge--neu{background:var(--grey-100);color:var(--grey-700)}
.sbadge--neg{background:var(--error-tint);color:var(--error-text)}
.sbadge--warn{background:var(--warning-tint);color:var(--warning-text)}
.sbadge--ai{background:var(--blue-100);color:var(--blue-700)}
.sbadge svg{width:1.1em;height:1.1em}

/* Gauge */
.shot__gauge{display:flex;align-items:center;gap:1em}
.shot__gauge svg{width:7.6em;height:auto;display:block;flex-shrink:0}
.shot__gauge .gnum{font-family:var(--font-display);font-weight:700}
.shot__gauge .gside{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.shot__gauge .sub{font-size:.86em;color:var(--text-muted);margin-top:.45em;line-height:1.4}

/* Metric card */
.smetric{background:#fff;border:1px solid var(--hairline);border-radius:1em;padding:1.2em}
.smetric .l{display:flex;align-items:flex-start;justify-content:space-between;gap:.4em;min-width:0}
.smetric .l span{font-size:.92em;font-weight:600;color:var(--text-muted);min-width:0;line-height:1.35}
.smetric .l i{
  width:2em;height:2em;border-radius:.55em;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.smetric .l i svg{width:1.15em;height:1.15em}
.smetric .v{font-family:var(--font-display);font-size:2.2em;font-weight:700;margin-top:.35em;line-height:1}
.smetric .d{
  margin-top:.55em;display:flex;align-items:center;gap:.45em;row-gap:.3em;flex-wrap:wrap;
  font-size:.9em;color:var(--text-subtle);min-width:0;
}

/* Sentiment bar */
.sbar{display:flex;height:.75em;border-radius:99em;overflow:hidden;background:var(--grey-100)}
.sbar i{display:block;height:100%}
.sbar .p{background:var(--dataviz-positive)}
.sbar .n{background:var(--dataviz-neutral)}
.sbar .g{background:var(--dataviz-negative)}

.sactor{display:flex;flex-direction:column;gap:.85em}
.sactor .row{display:flex;justify-content:space-between;font-size:1em;margin-bottom:.35em}
.sactor .row b{font-weight:600}
.sactor .row span{color:var(--text-muted)}

/* Distribution bars */
.sdist .h{font-size:.92em;font-weight:700;color:var(--text-muted);letter-spacing:.06em;margin-bottom:.8em;text-transform:uppercase}
.sdist .r{margin-bottom:.75em}
.sdist .r .t{display:flex;justify-content:space-between;font-size:1em;margin-bottom:.3em}
.sdist .r .t b{font-weight:700}
.sdist .track{height:.65em;background:var(--grey-100);border-radius:99em;overflow:hidden}
.sdist .track i{display:block;height:100%;border-radius:99em;background:var(--blue-500)}
.sdist .track i.alt{background:#7C3AED}

/* Donut legend */
.sdonut{display:flex;align-items:center;gap:1.6em;flex-wrap:wrap}
.sdonut svg{width:12em;height:12em;display:block;flex-shrink:0}
.sdonut .lg{display:flex;flex-direction:column;gap:.6em;font-size:1em;min-width:9em}
.sdonut .lg div{display:flex;align-items:center;gap:.6em}
.sdonut .lg i{width:.8em;height:.8em;border-radius:.2em;display:block}
.sdonut .lg b{margin-left:auto;font-weight:700}
.sdonut .ctr{font-family:var(--font-display);font-weight:700}

/* Heatmap */
.sheat{width:100%;border-collapse:collapse;font-size:1em;table-layout:fixed}
.sheat th:first-child,.sheat td:first-child{width:46%}
.sheat th{
  font-size:.85em;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);
  font-weight:700;padding:.3em .4em;text-align:center;
}
.sheat th:first-child{text-align:left}
.sheat td{padding:.28em .3em}
.sheat td:first-child{font-size:.98em;color:var(--text-secondary)}
.sheat td i{
  display:block;border-radius:.45em;padding:.45em 0;text-align:center;
  font-style:normal;font-weight:700;font-size:.95em;
}

/* List rows */
.srow{
  display:flex;align-items:center;gap:.9em;padding:.85em 0;
  border-bottom:1px solid var(--hairline);
}
.srow:last-child{border-bottom:0}
.srow .t{flex:1;min-width:0}
.srow .t b{display:block;font-size:1.02em;font-weight:600;line-height:1.4}
.srow .t span{display:block;font-size:.92em;color:var(--text-subtle);margin-top:.25em}
.sitem{border:1px solid var(--hairline);border-radius:.8em;padding:1em;margin-bottom:.7em}
.sitem:last-child{margin-bottom:0}
.sitem b{display:block;font-size:1.05em;font-weight:700}
.sitem p{font-size:.95em;color:var(--text-muted);margin-top:.4em;line-height:1.55}

/* Chips (konfigurasi) */
.schips{display:flex;flex-wrap:wrap;gap:.5em}
/* Chip = komponen Tag aplikasi: abu netral, tanpa pembeda warna per jenis. */
.schip{
  display:inline-flex;align-items:center;font-size:.98em;font-weight:500;padding:.4em .85em;
  border-radius:99em;border:1px solid transparent;color:var(--grey-700);background:var(--grey-100);
}

/* ── Filter bar (mengikuti komponen FilterBar aplikasi) ── */
.shot__flabel{display:inline-flex;align-items:center;gap:.45em;font-size:.9em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.shot__flabel svg{width:1.2em;height:1.2em}
.shot__pill svg{width:1.15em;height:1.15em;color:var(--text-subtle)}
.cv{width:1.05em;height:1.05em;color:var(--text-subtle);flex-shrink:0;margin-left:.1em}
.shot__ekspor{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5em;background:#fff;
  border:1px solid var(--hairline);border-radius:.7em;padding:.5em .9em;font-size:1em;
  font-weight:600;color:var(--text-secondary);
}
.shot__ekspor svg{width:1.15em;height:1.15em;color:var(--text-subtle)}

/* ── Comms Actions ── */
.psub{font-size:.95em;color:var(--text-muted);margin:0;line-height:1.5}
.ph + .psub{margin-top:-.65em}
.scact{border:1px solid var(--hairline);border-radius:.8em;padding:.9em 1em;margin-bottom:.7em}
.scact:last-child{margin-bottom:0}
.scact .hd{display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.scact .hd b{font-size:1.02em;font-weight:600}
.scact p{font-size:.95em;color:var(--text-muted);margin:.45em 0 0;line-height:1.55}
.scact .lnk{display:inline-flex;align-items:center;gap:.3em;margin-top:.6em;font-size:.85em;font-weight:700;letter-spacing:.03em;color:var(--blue-700)}
.scact .lnk svg{width:1em;height:1em}

/* ── Judul section dengan ikon ── */
.shot__sechead{display:flex;align-items:center;gap:.6em}
.shot__sechead h5{font-family:var(--font-display);font-size:1.3em;font-weight:700;margin:0}
.shot__sechead > svg{width:1.5em;height:1.5em;color:var(--blue-600);flex-shrink:0}
.shot__sechead .sp{margin-left:auto}

/* ── Akordion laporan (AI Report) ── */
.sacc{background:#fff;border:1px solid var(--hairline);border-radius:1em;box-shadow:0 6px 18px -14px rgba(31,41,55,.25);overflow:hidden}
.sacc__head{display:flex;align-items:center;gap:.8em;padding:1.1em 1.3em}
.sacc__head b{display:block;font-size:1.1em;font-weight:700}
.sacc__head .sub{display:flex;align-items:center;gap:.4em;font-size:.92em;color:var(--text-muted);margin-top:.25em}
.sacc__head .sub svg{width:1em;height:1em}
.sacc__head > svg{width:1.3em;height:1.3em;color:var(--text-subtle);margin-left:auto;flex-shrink:0}
.sacc__body{border-top:1px solid var(--hairline);background:var(--grey-100);padding:1.2em;display:flex;flex-direction:column;gap:1.1em}

/* ── Split panel: Narasi | → | Evidence ── */
.ssplit__head{display:grid;grid-template-columns:1fr auto 1fr;gap:1em;padding-bottom:.7em;border-bottom:1px solid var(--hairline);margin-bottom:.9em}
.eyb{font-size:.85em;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ssplit__row{display:grid;grid-template-columns:1fr auto 1fr;gap:1em;align-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:.7em;padding:.9em;margin-bottom:.6em}
.ssplit__row:last-child{margin-bottom:0}
.ssplit__row > svg{width:1.2em;height:1.2em;color:var(--text-faint)}
.ssplit__row .l b{display:block;font-size:1.02em;font-weight:700;line-height:1.4}
.ssplit__row .tgl{display:inline-block;margin-top:.5em;font-size:.85em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.ev{border-radius:.55em;padding:.7em}
.ev--pos{background:var(--success-tint)}
.ev--neg{background:var(--error-tint)}
.ev .eyb{color:var(--text-muted);display:block;margin-bottom:.4em}
.ev q{font-style:normal;color:var(--grey-700);font-size:.95em;line-height:1.5;display:block}
.ev a{display:inline-block;margin-top:.35em;color:var(--blue-700);font-weight:600;font-size:.9em}

/* ── Feed (Sumber Data) ── */
.sfeedhead{display:flex;align-items:center;gap:.6em}
.sfeedhead h5{font-family:var(--font-display);font-size:1.25em;font-weight:700;margin:0}
.sfeedhead > svg{width:1.4em;height:1.4em;flex-shrink:0}
.ssearch{margin-left:auto;display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--hairline);
  border-radius:.6em;padding:.45em .8em;font-size:.95em;color:var(--text-subtle);min-width:14em}
.ssearch svg{width:1.1em;height:1.1em}
.snews__row{display:flex;align-items:flex-start;gap:1em;padding:.95em 1.1em;border-bottom:1px solid var(--hairline)}
.snews__row:last-child{border-bottom:0}
.snews__row .t{flex:1;min-width:0}
.snews__row .t b{display:block;font-size:1.02em;font-weight:600;line-height:1.45;margin-top:.35em}
/* premium.css punya .meta global (KAPITAL + spasi lebar) yang bocor ke dalam shot. */
.shot .meta{font-family:var(--font-sans);font-weight:400;letter-spacing:normal;text-transform:none}
.snews__row .t{display:flex;flex-direction:column;align-items:flex-start}
.snews__row .meta{display:block;font-size:.9em;color:var(--text-muted);margin-top:.35em;
  letter-spacing:normal;text-transform:none;font-weight:400}
.snews__row .meta a{color:var(--blue-700);font-weight:600}
.ssoc__card{display:flex;gap:.8em;border:1px solid var(--hairline);border-radius:.7em;padding:.85em;margin-bottom:.7em}
.ssoc__card:last-child{margin-bottom:0}
.savatar{width:2.6em;height:2.6em;border-radius:50%;background:var(--blue-500);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:1em;flex-shrink:0}
.ssoc__card .bd{flex:1;min-width:0}
.ssoc__card .top{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-size:.98em}
.ssoc__card .top b{font-weight:700}
.ssoc__card .top .tm{color:var(--text-faint);font-size:.92em}
.ssoc__card .top .sp{margin-left:auto}
.ssoc__card p{font-size:.95em;color:var(--grey-700);margin:.5em 0 0;line-height:1.55}
.ssoc__card .stats{display:flex;align-items:center;gap:1.1em;margin-top:.6em;font-size:.9em;color:var(--text-muted)}
.ssoc__card .stats svg{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.3em}
.ssoc__card .stats .gh{margin-left:auto;font-weight:600;color:var(--text-secondary)}
.spage{display:flex;align-items:center;gap:.6em;border-top:1px solid var(--hairline);margin-top:.9em;padding-top:.9em;font-size:.92em;color:var(--text-muted)}
.spage .btns{margin-left:auto;display:flex;gap:.5em}
.spage .btns span{display:inline-flex;align-items:center;gap:.35em;background:#fff;border:1px solid var(--hairline);
  border-radius:.55em;padding:.4em .8em;font-weight:600;color:var(--text-secondary)}
.spage .btns svg{width:1em;height:1em}

/* ── Wizard konfigurasi ── */
.sstephead{display:flex;align-items:center;gap:.6em}
.sstephead h5{font-family:var(--font-display);font-size:1.4em;font-weight:700;margin:0}
.ssub{font-size:.98em;color:var(--text-muted);margin:.5em 0 0;line-height:1.55;max-width:58ch}
.sgen{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--hairline);
  border-radius:.6em;padding:.55em 1em;font-size:1em;font-weight:600;color:var(--text-secondary);margin-top:1em}
.sgen svg{width:1.15em;height:1.15em}
.scount{font-size:.92em;color:var(--text-muted);margin:.9em 0 .6em}
.schip .x{margin-left:.45em;font-weight:700;opacity:.55}

/* Stepper */
.sstep{display:flex;align-items:center;gap:.8em;margin-bottom:1.4em}
.sstep div{display:flex;align-items:center;gap:.55em;font-size:1em;font-weight:600;color:var(--text-subtle)}
.sstep div i{
  width:1.9em;height:1.9em;border-radius:50%;background:var(--grey-200);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:.9em;
}
.sstep div.done i{background:var(--success);color:#fff}
.sstep div.on{color:var(--blue-700)}
.sstep div.on i{background:var(--blue-500);color:#fff}
.sstep hr{flex:1;border:0;border-top:1px solid var(--hairline-strong);min-width:1.2em}

/* Table (sumber data) */
.stable{width:100%;border-collapse:collapse;font-size:1em;table-layout:fixed}
.stable thead th{
  font-size:.82em;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);
  font-weight:700;text-align:left;padding:.6em;background:var(--surface-card);
  border-bottom:1px solid var(--hairline);
}
.stable td{padding:.75em .6em;border-bottom:1px solid var(--hairline);vertical-align:middle}
.stable td:first-child{padding-left:1.1em}
.stable thead th:first-child{padding-left:1.1em}
.stable .sbadge{font-size:.86em;padding:.25em .6em}
.stable tbody tr:last-child td{border-bottom:0}
.stable .ttl{font-weight:600;line-height:1.4}
.stable .meta{font-size:.9em;color:var(--text-subtle);margin-top:.2em}

/* =====================================================
   Frame presentasi di landing page
   ===================================================== */
.showcase{position:relative}
.showcase--tilt .shot{
  transform:perspective(2200px) rotateY(-7deg) rotateX(2.5deg) scale(1.01);
  transform-origin:left center;
  transition:transform .6s var(--ease-out);
}
.showcase--tilt:hover .shot{transform:perspective(2200px) rotateY(-3deg) rotateX(1deg) scale(1.02)}
.showcase__glow{
  position:absolute;inset:-12% -8% -18% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 46% at 60% 40%,rgba(2,70,240,.45),transparent 70%),
             radial-gradient(38% 40% at 22% 78%,rgba(246,85,166,.32),transparent 72%);
  filter:blur(14px);
}

/* Kartu mengambang di atas shot */
.float{
  position:absolute;background:#fff;border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 20px 40px -20px rgba(17,26,54,.55);padding:12px 14px;font-size:12px;
  display:flex;align-items:center;gap:10px;z-index:2;
}
.float b{font-family:var(--font-display);font-size:15px;font-weight:700;display:block;line-height:1.1}
.float span{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}
.float i{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.float i svg{width:16px;height:16px}
.float--a{left:-26px;top:26%}
.float--b{right:-22px;bottom:16%}

/* =====================================================
   Tur produk — tab
   ===================================================== */
.tour__tabs{
  display:flex;gap:6px;padding:6px;background:var(--surface-card);
  border:1px solid var(--hairline);border-radius:var(--radius-full);
  width:fit-content;max-width:100%;overflow-x:auto;margin:0 auto 32px;
}
.tour__tab{
  border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text-muted);
  padding:9px 20px;border-radius:var(--radius-full);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.tour__tab:hover{color:var(--text-primary)}
.tour__tab[aria-selected="true"]{background:#fff;color:var(--blue-700);box-shadow:var(--shadow-card)}
.tour__panels{position:relative}
.tour__panel[hidden]{display:none}
.tour__panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;
  animation:tourIn .45s var(--ease-out) both}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour__copy h3{font-size:26px;margin-bottom:12px}
.tour__copy p{font-size:15px;color:var(--text-muted)}

@media (max-width:1100px){
  .shot{font-size:8.4px}
  .showcase--tilt .shot{transform:none}
}
@media (max-width:960px){
  .tour__panel{grid-template-columns:1fr;gap:28px}
  .tour__panel .showcase{order:2}
  .float--a{left:-10px}
  .float--b{right:-10px}
}
/* Di layar sempit sidebar disembunyikan agar isi dashboard tetap terbaca */
@media (max-width:760px){
  .shot{font-size:7.4px}
  .shot__side{display:none}
  .shot__viewport--tall{height:44em}
  .shot__viewport--mid{height:40em}
  .shot__body{padding:1.4em;gap:1.4em}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g21{grid-template-columns:minmax(0,1fr)}
  .sdonut{gap:1em}
  .float{display:none}
  /* Tabel sumber data: sisakan kolom yang benar-benar terbaca di layar sempit */
  .stable th:nth-child(2),.stable td:nth-child(2),
  .stable th:nth-child(4),.stable td:nth-child(4){display:none}
  .stable th:nth-child(1){width:60% !important}
  .stable th:nth-child(3){width:18% !important}
  .stable th:nth-child(5){width:22% !important}
}
@media (max-width:480px){
  .shot{font-size:6.6px}
  .shot__url{display:none}
}

/* ── Tambahan penyelarasan dev ── */
.sbnum{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:.3em;font-size:.88em;font-weight:700}
.sbnum span:nth-child(1){color:#10B981;text-align:left}
.sbnum span:nth-child(2){color:#6B7280;text-align:center}
.sbnum span:nth-child(3){color:#DC2626;text-align:right}
.sheat td .sub2{display:block;font-size:.86em;color:var(--text-subtle);margin-top:.15em}
.srek{border:1px solid var(--hairline);border-radius:.8em;padding:.9em 1em;margin-bottom:.7em;background:#fff}
.srek:last-child{margin-bottom:0}
.srek__h{display:flex;align-items:center;gap:.5em;margin-bottom:.7em}
.srek__h .cv{margin-left:auto}
.scur{display:inline-flex;align-items:center;gap:.4em;font-size:.9em;color:var(--text-muted);margin-bottom:.5em}
.scur svg{width:1em;height:1em;color:var(--blue-600)}
.tt2{display:flex;flex-direction:column;gap:.15em}
.tt2 h5{font-family:var(--font-display);font-size:1.3em;font-weight:700;margin:0}
.shot__sechead .sp{margin-left:auto}
/* MetricCard dev: label huruf kapital kecil */
.smetric .l span{text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-subtle);font-size:.85em}
.smetric .l{min-height:2.5em}
/* Avatar dev: palet pastel, bukan biru pekat */
.savatar{background:#E8EFFD;color:#1D4ED8}
.savatar.av2{background:#FEF3E2;color:#B45309}
.savatar.av3{background:#D1FAE5;color:#047857}
.ssoc__card .plat{width:1.25em;height:1.25em;flex-shrink:0}
.ssoc__card .stats .g{font-size:1.05em;margin-right:.25em;line-height:1}
/* Wizard berdiri sendiri (tanpa AppShell) */
.swiz__top{height:4.4em;background:#fff;border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:1em;padding:0 2.4em;flex-shrink:0}
.swiz__top img{width:8.2em;height:auto;display:block}
.swiz__prog{margin-left:auto;font-size:1em;color:var(--text-muted)}
.swiz__cancel{font-size:1em;font-weight:600;color:var(--text-secondary)}
.swiz__wrap{max-width:50em;margin:2.2em auto;padding:0 1.9em;display:flex;flex-direction:column;gap:1.6em}
.saddrow{display:flex;gap:.6em;margin-top:1em}
.saddrow .inp{flex:1;border:1px solid var(--hairline);border-radius:.6em;padding:.6em .85em;
  font-size:1em;color:var(--text-subtle);background:#fff}
.snav{display:flex;align-items:center;border-top:1px solid var(--hairline);margin-top:1.2em;padding-top:1.2em}
.snav .back{font-size:1em;font-weight:600;color:var(--text-muted)}
.snav .next{margin-left:auto;display:inline-flex;align-items:center;gap:.45em;background:var(--blue-500);
  color:#fff;font-weight:600;font-size:1em;padding:.6em 1.2em;border-radius:.6em}
.snav .next svg{width:1.1em;height:1.1em}
/* Stepper dev: langkah selesai & berjalan sama-sama biru, konektor tebal */
.sstep div.done i{background:var(--blue-500);color:#fff}
.sstep div.done{color:var(--grey-900)}
.sstep div.on{color:var(--grey-900)}
.sstep hr{border-top:2px solid var(--grey-200)}
.sstep hr.pass{border-top-color:var(--blue-500)}
.snews__row .gh2{display:inline-flex;align-self:flex-end;align-items:center;gap:.35em;margin-top:.5em;font-size:.9em;font-weight:600;color:var(--text-secondary)}
.snews__row .gh2 svg{width:1.05em;height:1.05em}

.shot__gauge .sgen{margin-top:.55em;padding:.4em .75em;font-size:.9em}
.shot__panel > .ph{font-size:1.05em}
.sactor{gap:.7em}