/* UI/UX Tasarım (/cozumler/ui-ux-tasarim/): wireframe, flow and screen drawings. Everything is in em, like .ui. */

/* hero: one window with three panes (wireframe, flow, phone) */
.pg-ux .ux-win { background: #fafafb; }
.pg-ux .ux-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 1.8em; padding: 2.6em 1.6em 1.5em 1.4em; }
.pg-ux .ux-col { display: flex; flex-direction: column; min-width: 0; }
.pg-ux .ux-pane { position: relative; flex: 1; overflow: hidden; border: 1px solid #e8e9ed; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgba(14, 20, 36, .04); }
.pg-ux .ux-pane > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-ux .ux-lbl { padding-top: .9em; font-size: .78em; font-weight: 500; text-align: center; color: #3b4050; }

/* phones */
.pg-ux .ux-phone .uip { width: 100%; aspect-ratio: 9 / 19.5; font-size: .66em; border-width: .8em; border-color: #111317; }
.pg-ux .uip::before { display: none; }
.pg-ux .uip-status { padding: 1em 1.6em .2em; font-size: .8em; }
.pg-ux .uip-status i { display: inline-block; width: 1.9em; height: .9em; margin-left: .3em; border-radius: .2em; background: #15171c; vertical-align: middle; }
.pg-ux .uip-status i:first-child { width: 1.2em; background: linear-gradient(90deg, #15171c 0 22%, transparent 22% 39%, #15171c 39% 61%, transparent 61% 78%, #15171c 78%); }
.pg-ux .uip-body { gap: .85em; padding: .9em 1.4em 1.4em; }
.pg-ux .uip .ui-head .ui-brand { margin: 0 auto 0 0; font-size: 1.8em; }
.pg-ux .uip .ui-head > .ic:not(.heart) { width: 1.7em; height: 1.7em; color: #3b4050; }
.pg-ux .ux-h { display: block; font-family: var(--font-head); font-size: 2.05em; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.pg-ux .ux-p { overflow: hidden; font-size: .78em; line-height: 1.45; color: #5b6070; }
.pg-ux .ux-btn { align-self: flex-start; padding: .8em 1.4em; border-radius: .5em; font-size: .95em; }
.pg-ux .ux-btn .ic { width: 1.25em; height: 1.25em; }
.pg-ux .ux-phone .ui-photo { flex: none; height: 12.5em; border-radius: .6em; }
.pg-ux .ux-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.pg-ux .ux-phone .ux-thumbs img { height: 5.6em; border-radius: .5em; }

/* card 1: a website panel on a gray backdrop */
/* card drawings scale with the card (desktop: 341px wide = 46em = 7.4px), so they look the same at every width */
.pg-ux .svc-card { container-type: inline-size; }
.pg-ux .svc-card .ui, .pg-ux .svc-card .ui-shot { font-size: 7.4px; font-size: calc(100cqw / 46); }
.pg-ux .svc-card .ui-shot { height: 28.4em; }
.pg-ux .ux-site { position: absolute; inset: 1.7em 1.3em 2.2em; display: flex; flex-direction: column; border-radius: 1em; box-shadow: 0 1px 2px rgba(14, 20, 36, .05), 0 14px 30px -16px rgba(14, 20, 36, .3); }
.pg-ux .ws-nav { display: flex; align-items: center; gap: 2.4em; padding: 1.4em 2.2em 1.2em 2.6em; }
.pg-ux .ws-nav .ui-brand { margin: 0 auto 0 0; font-size: 1.4em; }
.pg-ux .ws-nav > span:not(.ui-brand) { font-size: .62em; font-weight: 500; color: #4b5060; white-space: nowrap; }
.pg-ux .ws-nav > .ic { width: 1em; height: 1em; color: #4b5060; }
.pg-ux .ws-hero { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.6em; padding: 0 0 1.4em 2.6em; }
.pg-ux .ws-hero > img { align-self: stretch; height: 100%; border-radius: .7em 0 0 .7em; }
.pg-ux .ws-hero .ux-h { font-size: 2.3em; }
.pg-ux .ws-hero .ux-p { margin: 1em 0 1.6em; font-size: .72em; }
.pg-ux .ws-hero .ux-btn { font-size: .8em; }

/* card 2: two tilted phones */
.pg-ux .ux-phones { background: linear-gradient(160deg, #eceef2, #dfe2e8); }
.pg-ux .ux-phones .uip { position: absolute; width: 21em; font-size: .9em; border-width: .85em; box-shadow: 0 24px 40px -18px rgba(14, 20, 36, .45); }
.pg-ux .ux-phones .uip:first-child { left: 7%; top: 12%; transform: rotate(-10deg); }
.pg-ux .ux-phones .uip:last-child { left: 53%; top: 20%; transform: rotate(5deg); }
.pg-ux .ux-phones .uip-body { gap: 1em; padding: 2em 1.8em; }
.pg-ux .ux-phones .ui-title { margin: .6em 0 0; font-size: 2em; }
.pg-ux .ux-phones .ui-chips { font-size: .85em; }
.pg-ux .ux-phones .ui-chips span { border: 0; }
.pg-ux .ux-phones .uip-body > .ui-photo { flex: none; height: 11em; border-radius: .9em; }
.pg-ux .ux-phones .uip-body > b:last-child { font-family: var(--font-head); font-size: 1.6em; font-weight: 700; line-height: 1.15; }
.pg-ux .ux-fav { display: flex; align-items: center; gap: .8em; padding: .65em 0; border-bottom: 1px solid #eceef2; }
.pg-ux .ux-fav img { flex: none; width: 4em; height: 4em; border-radius: .6em; }
.pg-ux .ux-fav > span { flex: 1; min-width: 0; overflow: hidden; font-size: .86em; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.pg-ux .ux-fav small { display: block; font-weight: 400; }
.pg-ux .ic.heart { width: 1.6em; height: 1.6em; color: var(--red); stroke-width: 1.4; }
.pg-ux .ic.heart.off { color: #b4b8c2; fill: none; }

/* card 3: project list beside a dark sidebar */
.pg-ux .ux-panel .ui-body { grid-template-columns: 13em minmax(0, 1fr); }
.pg-ux .ux-panel .ui-side { padding-top: 1.6em; }
.pg-ux .ux-panel .ui-brand { margin-bottom: 1.3em; }
.pg-ux .ux-panel .ui-nav.gap { margin-top: .9em; }
.pg-ux .ux-panel .ui-main { gap: 1em; padding: 1.7em 2em; }
.pg-ux .ux-panel .ui-title { font-size: 1.3em; }
.pg-ux .ux-panel .ui-search { min-width: 0; }
.pg-ux .ux-panel .ui-row { gap: 1.2em; padding: .65em 0; }
.pg-ux .ux-panel .ui-row img { flex: none; width: 5.2em; height: 3.8em; border-radius: .45em; }
.pg-ux .ux-panel .ui-row > span { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; }
.pg-ux .ux-panel .ui-row small { display: block; font-weight: 400; }

/* detail: Flow / Wireframe / Interface side by side; the drawing scales with its own width */
.pg-ux .ux-fit { container-type: inline-size; }
.pg-ux .ux-fit > .ui { font-size: 9.6px; font-size: calc(100cqw / 86.7); }
.pg-ux .ux-trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 2em; padding: 2.4em 2.2em 1.4em; background: #fafafb; }
.pg-ux .ux-trio .ux-pane { flex: none; height: 24em; }
.pg-ux .ux-trio .ux-lbl { font-size: .95em; }
.pg-ux .ux-mini { display: flex; flex-direction: column; }
.pg-ux .ux-mini .ui-bar { height: 1.7em; padding: 0 .9em; gap: .4em; }
.pg-ux .ux-mini .ui-bar i { width: .5em; height: .5em; }
.pg-ux .ux-mini .ws-nav { padding: 1.1em 1.4em .9em 1.6em; gap: 1.6em; }
.pg-ux .ux-mini .ws-nav .ui-brand { font-size: 1.25em; }
.pg-ux .ux-mini .ws-nav > span:not(.ui-brand) { font-size: .5em; }
.pg-ux .ux-mini .ws-hero { flex: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 1em; height: 12.6em; padding: 0 0 0 1.6em; }
.pg-ux .ux-mini .ws-hero > img { border-radius: .4em 0 0 .4em; }
.pg-ux .ux-mini .ux-h { font-size: 1.45em; }
.pg-ux .ux-mini .ux-p { margin: .8em 0 1.1em; font-size: .5em; }
.pg-ux .ux-mini .ux-btn { font-size: .55em; }
.pg-ux .ux-mini .ux-cap-bar { width: 4em; height: .35em; margin: 1.3em 0 .6em 1.6em; border-radius: .2em; background: #e3e5e9; }
.pg-ux .ux-mini .ux-thumbs { grid-template-columns: .8fr .6fr 1fr .9fr; gap: .5em; padding: 0 1.6em; }
.pg-ux .ux-mini .ux-thumbs img { height: 3.5em; border-radius: .35em; }

@media (max-width: 1080px) {
  .pg-ux .svc-hero .svc-visual { max-width: 560px; }
}