/* ============================================================
   CUBIQ — mockup perangkat: ponsel potret dan tablet lanskap.

   SATU TOMBOL SKALA. Setiap ukuran di dalam bingkai ditulis dalam
   `em`, dan hanya font-size perangkatnya yang di-clamp terhadap
   lebar layar. Jadi seluruh mockup mengecil utuh dan proporsional
   di ponsel, tanpa satu pun media query untuk isinya.

   Isi layar memakai token --app-* (selalu gelap), bukan token
   halaman: aplikasi Cubiq memang hanya punya mode gelap.
   ============================================================ */

.shot{display:flex;justify-content:center;perspective:1400px}
.phone,.tablet{--bez:#0A0B0E;background:var(--bez);position:relative;flex:none;
  box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--app-line) 60%,transparent)}
.phone .screen,.tablet .screen{background:var(--app-ink);color:var(--app-text);
  font-family:'Rubik',system-ui,sans-serif;overflow:hidden;position:relative}

/* stiker kubus, dipakai di kedua perangkat */
.face{display:grid;grid-template-columns:repeat(3,1fr);gap:.15em;flex:none}
.face i{aspect-ratio:1;border-radius:.12em}
.face .k{background:var(--kuning)} .face .h{background:var(--hijau)}
.face .m{background:var(--merah)} .face .b{background:var(--biru)}
.face .j{background:var(--jingga)} .face .p{background:#F2F3F5}
.face .x{background:var(--app-ink-3)}

/* ------------------------------ ponsel ------------------------------ */
.phone{font-size:clamp(9.4px,2.7vw,12.4px);width:25.4em;padding:.7em;border-radius:2.6em;
  transform:rotate(-1.4deg);transition:transform .5s var(--turn)}
.shot:hover .phone{transform:rotate(0deg) translateY(-6px)}
.phone .screen{border-radius:2em;min-height:44em;display:flex;flex-direction:column}
.phone .screen::before{content:"";position:absolute;top:.55em;left:50%;translate:-50% 0;
  width:6.4em;height:1.5em;background:var(--bez);border-radius:1em;z-index:3}

.s-top{display:flex;align-items:center;justify-content:space-between;padding:2.7em 1.3em .9em;
  border-bottom:1px solid var(--app-line)}
.wm{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:1.6em;letter-spacing:-.02em}
.wm i{color:var(--kuning);font-style:normal}
.off{font-family:'JetBrains Mono',monospace;font-size:.82em;color:var(--jingga);
  border:1px solid color-mix(in srgb,var(--jingga) 55%,transparent);border-radius:999px;padding:.3em .8em}

.s-body{padding:1.2em 1.3em;display:grid;gap:1em;flex:1;align-content:start}
.s-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.8em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--app-muted)}
.s-chips{display:flex;gap:.45em}
.s-chips span{flex:1;text-align:center;font-size:.85em;padding:.5em .2em;border-radius:.6em;
  background:var(--app-ink-2);color:var(--app-muted);border:1px solid var(--app-line)}
.s-chips .ok{color:var(--hijau);border-color:color-mix(in srgb,var(--hijau) 55%,transparent)}
.s-chips .now{color:#16181D;background:var(--kuning);border-color:var(--kuning);font-weight:600}

.s-move{background:var(--app-ink-2);border:1px solid var(--app-line);border-radius:1.1em;
  padding:1.1em;display:flex;gap:1em;align-items:center}
.s-move .txt{flex:1;min-width:0}
.s-move .lbl{font-size:.82em;color:var(--app-muted)}
.s-move .alg{font-family:'JetBrains Mono',monospace;font-size:1.65em;font-weight:700;
  color:var(--kuning);letter-spacing:.04em;margin:.15em 0 .3em}
.s-move .hint{font-size:.85em;color:var(--app-muted);line-height:1.45}
.s-move .face{width:6.4em}

.s-bar{height:.5em;border-radius:999px;background:var(--app-ink-3);overflow:hidden}
.s-bar i{display:block;height:100%;width:38%;background:var(--kuning);border-radius:999px}
.s-ask{background:var(--app-ink-2);border:1px solid var(--app-line);border-radius:1.1em;padding:.95em 1.1em}
.s-ask b{font-size:.95em;color:var(--hijau);display:block}
.s-ask p{font-size:.82em;color:var(--app-muted);margin-top:.35em;line-height:1.45}
.s-ask .in{margin-top:.7em;border:1px solid var(--app-line);border-radius:.6em;padding:.55em .7em;
  font-size:.8em;color:var(--app-muted);background:var(--app-ink)}

.s-tab{margin-top:auto;display:flex;background:var(--app-ink-2);border-top:1px solid var(--app-line);
  padding:.7em .4em 1.1em}
.s-tab b{flex:1;display:grid;justify-items:center;gap:.3em;font-size:.72em;font-weight:500;color:var(--app-muted)}
.s-tab b i{width:1.9em;height:1.9em;border:.17em solid currentColor;border-radius:.5em}
.s-tab b.on{color:var(--kuning)}
.s-tab b.on i{rotate:90deg}

/* ------------------------------ tablet ------------------------------ */
.tablet{font-size:clamp(5.4px,1.35vw,10.6px);width:62em;padding:1.4em;border-radius:2em;
  transform:rotate(1deg);transition:transform .5s var(--turn)}
.showcase .shot:hover .tablet{transform:rotate(0deg) translateY(-6px)}
/* 16/10, bukan 4/3: isi layarnya berhenti sekitar dua pertiga tinggi, dan
   sisa ruang kosong di bawahnya terbaca sebagai mockup yang belum jadi. */
.tablet .screen{border-radius:1em;aspect-ratio:16/10;display:flex}

.t-rail{width:15em;border-right:1px solid var(--app-line);padding:1.4em 1.1em;display:grid;
  gap:.45em;align-content:start;background:var(--app-ink-2)}
.t-rail .wm{font-size:1.9em;margin-bottom:.5em}
.t-rail b{font-size:1.05em;font-weight:500;color:var(--app-muted);padding:.65em .8em;border-radius:.6em}
.t-rail b.on{background:var(--app-ink-3);color:var(--app-text);
  box-shadow:inset .22em 0 0 var(--kuning)}
.t-rail .tag{font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--app-muted);
  padding:1.2em .8em 0}

.t-main{flex:1;padding:1.6em 1.6em 1.2em;display:grid;align-content:start;gap:1.1em;min-width:0}
.t-main h4{font-family:'Chakra Petch',sans-serif;font-size:2.1em;font-weight:700;line-height:1.1}
.t-main .lead{font-size:1.05em;color:var(--app-muted);max-width:44ch;line-height:1.5}
.t-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.t-alg{background:var(--app-ink-2);border:1px solid var(--app-line);border-radius:.9em;padding:1em;
  display:grid;gap:.6em;justify-items:start}
.t-alg .face{width:5.2em}
.t-alg .alg{font-family:'JetBrains Mono',monospace;font-size:1.05em;font-weight:700;color:var(--kuning)}
.t-alg span{font-size:.95em;color:var(--app-muted);line-height:1.4}
.t-note{border:1px dashed var(--app-line);border-radius:.9em;padding:.9em 1.1em;font-size:1em;
  color:var(--app-muted);display:flex;gap:.7em;align-items:center}
.t-note b{color:var(--hijau);font-family:'JetBrains Mono',monospace;font-size:.9em;flex:none}