/* Entegrasyon ve Otomasyon (/cozumler/entegrasyon-otomasyon/): mock-UI details, scoped to .pg-int */

/* shared bits */
.pg-int .in-head { display: flex; align-items: center; height: 3.8em; padding: 0 2em; border-bottom: 1px solid var(--l); }
.pg-int .in-head .ui-brand { margin: 0; }
.pg-int .ui-nav.on { box-shadow: inset -.15em 0 #f6c9cd; }
.pg-int .in-green { color: #15924b; }
.pg-int .in-blue { color: #2563eb; }

/* flow canvas: nodes and wires are placed in em, so the drawing scales as one picture */
.pg-int .in-canvas { position: relative; min-width: 0; background: #f5f6f8; }
.pg-int .in-canvas > .ui-node { position: absolute; z-index: 1; height: 5em; }
.pg-int .in-canvas .ui-node > .ic { width: 1.8em; height: 1.8em; }
.pg-int .in-canvas .ui-node > div { display: grid; gap: .25em; min-width: 0; }
.pg-int .in-canvas .ui-node.hot { background: #fff8f8; }
.pg-int .in-canvas .ui-node.hot > .ic { color: var(--red); }
.pg-int .in-wires { position: absolute; left: 0; top: 0; overflow: visible; }
.pg-int .in-wires path { fill: none; stroke: #9ea3ae; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-int .in-wires path.red { stroke: var(--red); }

/* hero: one drawing that scales with its column (2cqi = 10.5px at the desktop column width) */
.pg-int .in-hero { container-type: inline-size; max-width: 600px; }
.pg-int .in-hero .ui { font-size: 10.5px; font-size: 2cqi; }
.pg-int .in-body { grid-template-columns: 12.8em minmax(0, 1fr); }
.pg-int .in-side { gap: .95em; padding-top: 1.9em; }
.pg-int .in-c1 { padding: 21.4em 1.3em 1.6em 2.1em; }
.pg-int .in-c1 .in-wires { width: 37em; height: 20em; }
.pg-int .in-step { display: grid; gap: .55em; padding: 1.3em 1.5em 1.4em; box-shadow: 0 1px 2px rgba(14, 20, 36, .05); }
.pg-int .in-step .ui-head { margin-bottom: .2em; }
.pg-int .in-step .ui-head b { margin-right: auto; font-size: 1.05em; }
.pg-int .in-step .ui-head > .ic { width: 1em; height: 1em; color: #c3c6ce; }
.pg-int .in-kv { display: grid; grid-template-columns: 11.5em 14.5em; align-items: center; gap: .45em 0; font-size: .85em; }
.pg-int .in-kv > span:not(.ui-input) { color: #5b6070; }
.pg-int .in-kv .ui-input { min-height: 2.5em; padding: .45em .8em; background: #fafafb; }
.pg-int .in-kv .ui-input .ic { width: 1em; height: 1em; color: #8a8f9c; }

/* cards */
.pg-int .in-tight { gap: .9em; }
.pg-int .in-conns { display: grid; gap: .5em; }
.pg-int .in-conn { display: flex; align-items: center; gap: .9em; padding: .65em .9em; border: 1px solid var(--l); border-radius: .7em; }
.pg-int .in-conn > div { display: grid; gap: .25em; flex: 1; min-width: 0; white-space: nowrap; }
.pg-int .in-conn .ui-ico { width: 2.5em; height: 2.5em; }
.pg-int .in-conn .ui-toggle { font-size: .8em; }
.pg-int .in-cmain { display: flex; flex-direction: column; min-width: 0; }
.pg-int .in-chead { padding: 1.5em 1.7em 1.3em; border-bottom: 1px solid var(--l); }
.pg-int .in-c2 { flex: 1; }
.pg-int .in-c2 .in-wires { width: 32em; height: 17em; }
.pg-int .in-c2 > .ui-node { height: 4.6em; padding: .7em .9em; font-size: 1em; }
.pg-int .in-c2 > .ui-node > .ic { width: 1.6em; height: 1.6em; }
.pg-int .in-c2 > .ui-node .ui-ico { width: 2.4em; height: 2.4em; }
.pg-int .in-plus { position: absolute; display: grid; place-items: center; width: 2.8em; height: 2.8em; border: 1px solid #e1e3e8; border-radius: 50%; background: #fff; color: #9a9eaa; }
.pg-int .in-sel { min-height: 0; min-width: 7em; padding: .45em .8em; font-size: .85em; color: var(--ink); }
.pg-int .in-sel .ic { width: 1em; height: 1em; color: #8a8f9c; }
.pg-int .in-log td { padding: .8em .5em; }
.pg-int .in-log td:first-child { display: flex; align-items: center; gap: .6em; font-weight: 600; color: #15924b; }
.pg-int .in-log td:last-child { text-align: right; }
.pg-int .in-st { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #22a35a; color: #fff; }
.pg-int .in-st .ic { width: 1em; height: 1em; stroke-width: 3; }
.pg-int .in-err td:first-child { color: var(--red); }
.pg-int .in-err .in-st { background: var(--red); }

/* detail: order workflow with steps and last run on the right (scales with the column) */
.pg-int .in-viz { position: relative; container-type: inline-size; }
.pg-int .in-viz .ui { font-size: 9.6px; font-size: calc(100cqi / 86.7); }
.pg-int .in-dbody { grid-template-columns: 13.8em minmax(0, 1fr) 19.6em; }
.pg-int .in-dbody .in-side { padding-bottom: 6em; }
.pg-int .in-c3 { height: 35.6em; background: #fafafb; }
.pg-int .in-dtitle { position: relative; z-index: 1; padding: 2em 1.6em 0 2.4em; }
.pg-int .in-dtitle .ui-title { font-size: 1.35em; }
.pg-int .in-dtitle .ui-btn { padding: .7em 1.3em; font-size: .95em; }
.pg-int .in-dtitle > .ic { color: #6b7080; }
.pg-int .in-c3 .in-wires { width: 53.3em; height: 35.6em; }
.pg-int .in-c3 > .ui-node { height: 5.7em; padding: 1em 1.2em; }
.pg-int .in-c3 .ui-node .ui-ico { width: 3em; height: 3em; }
.pg-int .in-c3 .ui-node .ui-ico .ic { width: 1.5em; height: 1.5em; }
.pg-int .in-c3 .ui-node > .ic { width: 2.2em; height: 2.2em; margin: 0 .4em 0 .2em; }
.pg-int .in-dside { display: grid; align-content: start; gap: 1.2em; padding: 1em 1.2em; border-left: 1px solid var(--l); background: #fafafb; }
.pg-int .in-dside .ui-panel { display: grid; gap: .9em; padding: 1.5em 1.6em; }
.pg-int .in-dside .ui-panel > b:first-child { margin-bottom: .2em; }
.pg-int .in-li { display: flex; align-items: center; gap: 1em; font-size: .95em; }
.pg-int .in-li > .ic { width: 1.6em; height: 1.6em; margin: 0 .3em; }
.pg-int .in-li .ui-ico { width: 2.2em; height: 2.2em; }
.pg-int .in-li .ui-ico .ic { width: 1.2em; height: 1.2em; }
.pg-int .in-ok { display: flex; align-items: center; gap: .6em; margin-top: .2em; font-weight: 600; color: #15924b; }
.pg-int .in-dside small { margin-top: -.5em; padding-left: 1.2em; font-size: .85em; }
.pg-int .in-dside .ui-btn { justify-content: flex-start; margin-top: .4em; font-weight: 500; background: #fafafb; }
.pg-int .in-viz > .ui-cap { position: absolute; left: 2.6%; bottom: 3%; max-width: 12.5%; margin: 0; line-height: 1.3; }

@media (max-width: 1080px) {
  .pg-int .in-hero { width: 100%; }
}
/* tablets and up: the card drawings scale with the card, so the flow never clips */
@media (min-width: 621px) {
  .pg-int .svc-card { container-type: inline-size; }
  .pg-int .svc-card .ui { font-size: min(7.4px, calc(100cqi / 46)); }
}
/* phones: the detail keeps only the canvas, big enough to read */
@media (max-width: 620px) {
  .pg-int .in-viz .ui { font-size: calc(100cqi / 53.5); }
  .pg-int .in-dbody { grid-template-columns: minmax(0, 1fr); }
  .pg-int .in-c3 { height: 30.8em; }
  .pg-int .in-dbody .in-side, .pg-int .in-dside { display: none; }
  .pg-int .in-viz > .ui-cap { position: static; max-width: none; margin-top: 10px; text-align: right; }
}