/* ============================================================
   DIGIFANA — flow.css
   Section "Cara kerjanya" di home: heading full-width, kiri copy +
   checklist, kanan panel canvas automation (slab miring, node melayang).
   Token & primitif dari agencee.css — nggak bikin dunia baru.
   ============================================================ */

.flow-head { max-width: 780px; }
.flow-head h2 { margin-bottom: 0; }

.flow-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 46px;
  align-items: center;
  margin-top: 42px;
}
/* tab nowrap bikin min-content kolom melar → panel jadi lebih lebar dari layar. */
.flow-grid > * { min-width: 0; }

/* ---------- kolom kiri ---------- */
.flow-copy p.sec-sub { max-width: 44ch; margin-bottom: 26px; }
.flow-copy .vlist { margin: 0 0 30px; }
.flow-copy .vlist li { font-size: 14.5px; line-height: 1.55; }

/* ---------- tab: pinjem bahasa pill-nav Agencee ---------- */
.flow-tabs {
  display: inline-flex; gap: 4px; padding: 6px; margin-bottom: 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.flow-tabs::-webkit-scrollbar { display: none; }
.flow-tab {
  flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mut); white-space: nowrap;
  transition: background .2s, color .2s;
}
.flow-tab:hover { background: var(--panel-hi); color: var(--txt); }
.flow-tab[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: var(--acc); }
.flow-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- panggung 3D ---------- */
.flow-stage { position: relative; perspective: 1500px; perspective-origin: 62% 42%; }
.flow-stage::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 46px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .62), transparent 72%);
  filter: blur(12px); pointer-events: none;
}

.flow-panel {
  position: relative; z-index: 1;
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(180deg, #101010, #0b0b0b);
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -9deg)) rotateX(var(--rx, 3.4deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9);
}
.flow-stage.is-live .flow-panel { transition: none; }
/* sisi slab: pelat gelap di belakang biar panel punya ketebalan */
.flow-panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: 23px;
  background: #050505; border: 1px solid rgba(255, 255, 255, .05);
  transform: translateZ(-18px); z-index: -1;
}

/* ---------- bar atas panel ---------- */
.flow-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  transform: translateZ(20px);
}
.flow-name {
  font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--txt);
  letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flow-live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, .32); background: rgba(37, 211, 102, .1);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--good);
}
.flow-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.flow-toggle {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px; cursor: pointer;
  background: var(--panel-hi); border: 1px solid var(--line); color: var(--mut);
  font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s, border-color .2s, background .2s;
}
.flow-toggle:hover { color: var(--txt); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); }
.flow-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.flow-toggle svg { width: 12px; height: 12px; flex: none; }

/* ---------- kanvas ---------- */
.flow-canvas {
  position: relative;
  border-radius: 0 0 21px 21px;
  aspect-ratio: 1.58;
  background:
    radial-gradient(ellipse 60% 42% at 52% -6%, rgba(255, 153, 28, .09), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    #090909;
  transform-style: preserve-3d;
}

.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(20px); }
.flow-wire { fill: none; stroke: url(#flow-wire-grad); stroke-width: 1.6; }
.flow-spark { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 11 var(--len); }
.flow-play .flow-spark { animation: flow-spark 3.2s linear var(--delay, 0s) infinite; }
@keyframes flow-spark { from { stroke-dashoffset: var(--len2); } to { stroke-dashoffset: 0; } }
.flow-joint { fill: #0b0b0b; stroke: rgba(255, 153, 28, .5); stroke-width: 1.2; }

/* ---------- node ---------- */
.fnode {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  padding: 11px 13px 12px;
  border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
  transform: translateZ(var(--z, 20px));
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .72);
  opacity: 1; transform-origin: 50% 100%;
}
.flow-canvas.is-in .fnode { animation: fnode-in .62s cubic-bezier(.16, 1, .3, 1) var(--in, 0s) both; }
@keyframes fnode-in {
  from { opacity: 0; transform: translateZ(var(--z, 20px)) translateY(14px) scale(.965); }
  to { opacity: 1; transform: translateZ(var(--z, 20px)); }
}
.fnode-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.fnode-top svg { width: 13px; height: 13px; flex: none; color: var(--mut); }
.fnode-type {
  font-size: 8.6px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fnode-name {
  font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1.28;
  color: var(--txt); letter-spacing: -0.008em; margin: 0;
}
.fnode-meta {
  margin: 5px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; line-height: 1.35; color: rgba(255, 255, 255, .5); letter-spacing: -0.01em;
}

/* varian: pemicu & agen = oranye penuh, kondisi = oranye redup, sisanya netral */
.fnode.f-hot {
  border-color: rgba(255, 153, 28, .5);
  background: linear-gradient(180deg, rgba(255, 153, 28, .16), rgba(255, 153, 28, .05));
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .78), 0 0 0 1px rgba(255, 153, 28, .1);
}
.fnode.f-hot .fnode-top svg, .fnode.f-hot .fnode-type { color: var(--acc); }
.fnode.f-hot .fnode-meta { color: rgba(255, 213, 166, .72); }
.fnode.f-warm { border-color: rgba(255, 153, 28, .26); }
.fnode.f-warm .fnode-top svg, .fnode.f-warm .fnode-type { color: rgba(255, 172, 74, .82); }
.fnode[data-depth="2"] { box-shadow: 0 22px 46px -12px rgba(0, 0, 0, .82); }

/* ---------- stack di bawah panel ---------- */
.flow-stack { margin-top: 34px; justify-content: flex-start; }
.flow-note { margin: 14px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .42); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-panel { transition: none; }
  .flow-play .flow-spark { animation: none; }
  .flow-spark { stroke-dasharray: none; opacity: .5; }
  .flow-canvas.is-in .fnode, .fnode { animation: none; opacity: 1; }
}

/* ---------- tablet ---------- */
@media (max-width: 1060px) {
  .flow-grid { grid-template-columns: 1fr; gap: 40px; }
  .flow-copy p.sec-sub { max-width: 60ch; }
  .flow-stage { perspective-origin: 50% 40%; }
  .flow-panel { transform: rotateY(-5deg) rotateX(2.6deg); }
}

/* ---------- mobile: slab lurus, node numpuk vertikal + rel cabang ---------- */
@media (max-width: 760px) {
  .flow-grid { margin-top: 32px; }
  .flow-stage { perspective: none; }
  .flow-stage::after { display: none; }
  .flow-panel { transform: none !important; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
  .flow-panel::before { display: none; }
  .flow-bar, .flow-wires, .fnode { transform: none; }
  .flow-wires { display: none; }
  .flow-canvas {
    aspect-ratio: auto; position: relative;
    display: flex; flex-direction: column; gap: 9px;
    padding: 20px 16px 20px 30px;
  }
  /* rel vertikal: tulang alurnya */
  .flow-canvas::before {
    content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; width: 1px;
    background: linear-gradient(180deg, var(--acc), rgba(255, 153, 28, .25) 45%, rgba(255, 255, 255, .1));
  }
  .fnode {
    position: relative; left: auto; top: auto; width: auto;
    opacity: 1; animation: none !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7);
  }
  /* tick ke rel */
  .fnode::before {
    content: ""; position: absolute; left: -11px; top: 22px; width: 11px; height: 1px;
    background: rgba(255, 255, 255, .18);
  }
  .fnode.f-hot::before { background: var(--acc); }
  /* tiga node terakhir = cabang: masuk ke dalam */
  .fnode[data-branch="1"] { margin-left: 18px; }
  .fnode[data-branch="1"]::before { left: -29px; width: 29px; }
  .flow-stack { margin-top: 22px; }
  /* fade cuma pas masih ada tab di kanan (dipasang JS), biar tab aktif nggak keburem */
  .flow-tabs[data-more] {
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
    mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
}