/* SaaS Geliştirme (/cozumler/saas-gelistirme/): mock-UI details, scoped to .pg-saas */

/* shared bits: a white top bar above a dark sidebar */
.pg-saas .sa-top { display: flex; align-items: center; gap: 1.1em; height: 3.9em; padding: 0 1.6em; border-bottom: 1px solid var(--l); }
.pg-saas .sa-top .ui-brand { margin: 0 auto 0 0; }
.pg-saas .sa-top > .ic { color: #3b4050; }
.pg-saas .sa-m { width: 2.3em; height: 2.3em; font-size: .95em; color: var(--ink); background: #e3e5ea; }
.pg-saas .sa-u { width: 2.3em; height: 2.3em; color: #5b6070; }
.pg-saas .ui-side.dark { padding-top: 1.6em; }
.pg-saas .ui-side.dark .ui-nav.on::before { display: block; }
.pg-saas .ui-check.sa-todo { color: #6b7080; }
.pg-saas .ui-check.sa-todo i { position: relative; }
.pg-saas .ui-check.sa-todo i::after { content: ""; width: .3em; height: .3em; border-radius: 50%; background: #d4d6dc; }
.pg-saas .sa-h { display: block; font-family: var(--font-head); font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; }
.pg-saas .sa-h small { display: block; margin-top: .35em; font-family: var(--font); font-size: .6em; font-weight: 400; }

/* hero: one drawing that scales with its column (2cqi = 10.5px at the desktop column width) */
.pg-saas .sa-hero { container-type: inline-size; max-width: 600px; }
.pg-saas .sa-stage { position: relative; font-size: 10.5px; font-size: 2cqi; padding-bottom: 1.4em; }
.pg-saas .sa-stage .ui { font-size: 1em; }
.pg-saas .sa-win { width: 46.6em; }
.pg-saas .sa-win .ui-body { grid-template-columns: 12.6em minmax(0, 1fr); }
.pg-saas .sa-win .ui-side { gap: .95em; padding-bottom: 2em; }
.pg-saas .sa-win .ui-main { gap: 1.15em; padding: 2em 1.8em 2.2em 2.1em; }
.pg-saas .sa-win .ui-head { margin-bottom: .2em; }
.pg-saas .sa-col { width: 18.2em; }
.pg-saas .sa-list { display: grid; gap: .55em; }
.pg-saas .sa-ws { display: flex; align-items: center; gap: .9em; padding: .85em .8em .85em .9em; border: 1px solid var(--l); border-radius: .8em; background: #fff; box-shadow: 0 1px 2px rgba(14, 20, 36, .04); }
.pg-saas .sa-ws > div { display: grid; gap: .3em; flex: 1; min-width: 0; white-space: nowrap; }
.pg-saas .sa-ws small { font-size: .78em; }
.pg-saas .sa-ws > .ic { width: 1.1em; height: 1.1em; color: #8a8f9c; }
.pg-saas .sa-ws .ui-ico { width: 3.1em; height: 3.1em; }
.pg-saas .sa-form { top: 13.2em; right: 0; display: grid; gap: .75em; width: 17.8em; padding: 1.7em 1.5em 1.6em; }
.pg-saas .sa-form .sa-h { font-size: 1.2em; }
.pg-saas .sa-form > small { margin: -.3em 0 .3em; font-size: .7em; line-height: 1.35; }
.pg-saas .sa-form .ui-input { min-height: 2.8em; font-size: .8em; }
.pg-saas .sa-form .ui-btn { margin-top: .5em; font-size: .85em; }
.pg-saas .sa-hero .ui-cap { margin-top: -.6em; }

/* cards */
.pg-saas .svc-card .ui-body { grid-template-columns: 13.4em minmax(0, 1fr); }
.pg-saas .svc-card .ui-main { padding: 1.8em 1.8em 1.4em; }
.pg-saas .svc-card .ui-check { padding: .65em 0; }
.pg-saas .sa-tight { gap: .8em; }
.pg-saas .sa-tight .ui-row { padding: .55em 0; }
.pg-saas .ui-row > div small { font-size: .82em; }
.pg-saas .sa-tabs .on { color: var(--ink); box-shadow: inset 0 -.18em var(--ink); }
.pg-saas .sa-indigo { background: #e7e9ff; color: #4f46e5; }
.pg-saas .sa-settings { gap: .25em; }
.pg-saas .sa-sh { display: flex; align-items: center; gap: .75em; margin: 0 0 .6em; padding: 0 .75em; font-size: 1.05em; color: #fff; white-space: nowrap; }
.pg-saas .sa-opts { display: grid; gap: .55em; }
.pg-saas .sa-opt { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .85em 1em; border: 1px solid var(--l); border-radius: .7em; font-size: .9em; font-weight: 500; white-space: nowrap; }
.pg-saas .sa-opt .ic { width: 1.1em; height: 1.1em; color: #5b6070; }
.pg-saas .sa-opt .ui-toggle { font-size: .9em; }

/* detail: sign-up -> setup -> use, three screens on a soft backdrop (scales with the column) */
.pg-saas .sa-viz { container-type: inline-size; }
.pg-saas .sa-viz .sa-flow { display: flex; align-items: stretch; gap: 1.6em; font-size: 9.6px; font-size: calc(100cqi / 86.7); padding: 3.2em 3.8em 3.6em; border: 1px solid #e3e4e8; border-radius: 1.4em; background: linear-gradient(160deg, #f3f4f6, #e7e8ec); box-shadow: none; }
.pg-saas .sa-step { display: grid; grid-template-rows: auto 1fr; flex: 1; gap: 1.4em; min-width: 0; }
.pg-saas .sa-lbl { font-size: 1.15em; text-align: center; color: #6b7080; }
.pg-saas .sa-arrow { align-self: center; width: 1.9em; height: 1.9em; margin-top: 2.8em; color: var(--ink); }
.pg-saas .sa-scr { display: flex; flex-direction: column; gap: .85em; padding: 2em 2em 1.8em; border-radius: 1em; background: #fff; box-shadow: 0 1px 2px rgba(14, 20, 36, .05), 0 14px 30px -18px rgba(14, 20, 36, .3); }
.pg-saas .sa-scr .ui-brand { margin: 0 0 .6em; font-size: 1.35em; }
.pg-saas .sa-scr .ui-input { min-height: 2.9em; font-size: .85em; }
.pg-saas .sa-scr .ui-btn { margin-top: auto; padding: .95em 1em; }
.pg-saas .sa-scr .ui-check { padding: .5em 0; font-size: .95em; }
.pg-saas .sa-brandrow { display: flex; align-items: flex-start; justify-content: space-between; }
.pg-saas .sa-brandrow .ic { width: 1.1em; height: 1.1em; color: #5b6070; }
.pg-saas .sa-mini { display: grid; grid-template-columns: 38% minmax(0, 1fr); flex: 1; min-height: 14em; margin-top: .4em; overflow: hidden; border: 1px solid var(--l); border-radius: .6em; box-shadow: 0 8px 20px -14px rgba(14, 20, 36, .35); }
.pg-saas .sa-mside { display: grid; align-content: start; gap: .5em; padding: 1em .6em; background: #1f232b; }
.pg-saas .sa-mside span { position: relative; display: flex; align-items: center; gap: .5em; padding: .35em .4em; border-radius: .35em; color: #aeb3bf; }
.pg-saas .sa-mside .ic { width: 1em; height: 1em; }
.pg-saas .sa-mside .bar { height: .4em; background: rgba(255, 255, 255, .18); }
.pg-saas .sa-mside .on { background: rgba(255, 255, 255, .08); color: var(--red); }
.pg-saas .sa-mside .on .bar { background: var(--red); }
.pg-saas .sa-mside .on::before { content: ""; position: absolute; left: -.6em; top: .2em; bottom: .2em; width: .22em; background: var(--red); }
.pg-saas .sa-mmain { display: grid; align-content: start; gap: .7em; padding: .9em .9em 1em; }
.pg-saas .sa-mhead { display: flex; align-items: center; justify-content: space-between; }
.pg-saas .sa-mhead .ui-av { width: 2.2em; height: 2.2em; }
.pg-saas .sa-mrow { display: flex; align-items: center; gap: .7em; margin: .3em 0 .5em; }
.pg-saas .sa-mrow > span:last-child { display: grid; flex: 1; gap: .45em; }
.pg-saas .sa-mrow .ui-ico { width: 2.8em; height: 2.8em; }
.pg-saas .sa-mmain .bar { height: .5em; }

@media (max-width: 1080px) {
  .pg-saas .sa-hero { width: 100%; }
}
/* phones: the three screens stack, read top to bottom */
@media (max-width: 620px) {
  .pg-saas .sa-viz .sa-flow { flex-direction: column; align-items: stretch; gap: 1em; font-size: calc(100cqi / 40); padding: 2.2em 2.4em 2.6em; }
  .pg-saas .sa-arrow { align-self: center; margin: 0; transform: rotate(90deg); }
  .pg-saas .sa-step { gap: .9em; }
  .pg-saas .sa-scr { min-height: 0; }
  .pg-saas .sa-scr .ui-btn { margin-top: .4em; }
}