/* Web Tasarım (/cozumler/web-tasarim/): mock website drawings. Everything is in em, like .ui. */

/* a small website: nav row, hero (copy + photo), project thumbnails */
.pg-web .ws { display: flex; flex-direction: column; min-height: 0; }
.pg-web .ws-nav { display: flex; align-items: center; gap: 2.3em; padding: 1.3em 2.4em 1.2em; }
.pg-web .ws-nav .ui-brand { margin: 0 auto 0 0; font-size: 1.4em; }
.pg-web .ws-nav > span:not(.ui-brand) { font-size: .6em; font-weight: 500; color: #4b5060; white-space: nowrap; }
.pg-web .ws-nav > .ic { width: .95em; height: .95em; color: #4b5060; }
.pg-web .ws-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); align-items: center; gap: 1.2em; padding: 0 4.6em 0 2.4em; }
.pg-web .ws-h { display: block; font-family: var(--font-head); font-size: 1.85em; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.pg-web .ws-p { margin: 1em 0 1.5em; font-size: .6em; line-height: 1.5; color: #4b5060; }
.pg-web .ws-tag { display: block; margin-bottom: .7em; font-size: .85em; font-weight: 600; color: var(--red); }
.pg-web .ws-btn { padding: .75em 1.3em; border-radius: .45em; font-size: .62em; }
.pg-web .ws-btn .ic { width: 1.25em; height: 1.25em; }
.pg-web .ws-img { height: 22em; border-radius: .35em; }
.pg-web .ws-sub { display: block; padding: 2.2em 2.4em .9em; font-size: .8em; font-weight: 700; }
.pg-web .ws-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; padding: 0 4.6em 0 2.4em; }
.pg-web .ws-thumbs img { height: 7em; border-radius: .45em; }

/* the hero composition: browser window with a phone overlapping its lower right corner */
.pg-web .wd-stage { position: relative; max-width: 50em; padding-bottom: 2.4em; font-size: 10.5px; }
.pg-web .wd-win { width: 92%; height: 37em; font-size: inherit; }
.pg-web .wd-stage > .ui-cap { margin-top: 1.4em; font-size: 11.5px; }
.pg-web .wd-phone { position: absolute; z-index: 2; right: 0; top: 13.4em; width: 13.4em; }
.pg-web .wd-phone .uip { width: 100%; font-size: .61em; border-width: .7em; border-radius: 3em; }
.pg-web .wd-phone .uip::before { display: none; }
.pg-web .wd-phone .uip-body { gap: 0; padding: 1.7em 1.5em 1.5em; }
.pg-web .wd-phone .ui-head { margin-bottom: 1.3em; }
.pg-web .wd-phone .ui-brand { margin: 0 auto 0 0; font-size: 2em; }
.pg-web .wd-phone .ui-head .ic { width: 1.8em; height: 1.8em; color: #4b5060; }
.pg-web .wd-phone .ui-photo { flex: none; height: 15.5em; border-radius: .5em; }
.pg-web .wd-phone .ws-h { margin-top: 1em; font-size: 2.15em; }
.pg-web .wd-phone .ws-p { margin: .9em 0 1.2em; font-size: .9em; }
.pg-web .wd-phone .ws-btn { align-self: flex-start; font-size: .95em; }

/* cards: the site fills the window below its bar */
/* card drawings scale with the card (desktop: 341px wide = 46em = 7.4px), so they look the same at every width */
.pg-web .svc-card { container-type: inline-size; }
.pg-web .svc-card .ui { font-size: 7.4px; font-size: calc(100cqw / 46); }
.pg-web .ui.wd-col { display: flex; flex-direction: column; }
.pg-web .ui.wd-col > :last-child { flex: 1; min-height: 0; }
.pg-web .svc-card .ws-nav { padding: 1.2em 2.2em 1.1em 4em; }
.pg-web .svc-card .ws-hero { flex: 1; min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 2em; padding: 0 0 0 4em; }
.pg-web .svc-card .ws-hero > img { align-self: stretch; height: 100%; border-radius: 0; }
.pg-web .svc-card .ws-h { font-size: 2.45em; }
.pg-web .svc-card .ws-p { margin: 1.1em 0 1.9em; font-size: .78em; }
.pg-web .svc-card .ws-btn { font-size: .8em; }
.pg-web .ws-hero.gray { background: linear-gradient(90deg, #f1f2f4, #f6f6f8); }
.pg-web .svc-card .ws-hero.gray { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1em; }
.pg-web .svc-card .ws-hero.gray .ws-h { font-size: 2.3em; }

/* card 3: a small CMS */
.pg-web .wd-cms .ui-side { padding-top: 1.4em; }
.pg-web .wd-cms .ui-brand { margin-bottom: 1.2em; }
.pg-web .wd-cms .ui-main { gap: .9em; padding: 1.6em 2.1em; }
.pg-web .wd-cms .ui-title { font-size: 1.25em; }
.pg-web .wd-ed { overflow: hidden; border: 1px solid #e1e3e8; border-radius: .6em; }
.pg-web .wd-tools { display: flex; align-items: center; gap: 1.6em; padding: .6em .9em; border-bottom: 1px solid var(--l); font-size: .85em; color: #4b5060; }
.pg-web .wd-tools > span:first-child { display: inline-flex; align-items: center; gap: .5em; margin-right: auto; }
.pg-web .wd-tools .ic { width: 1.1em; height: 1.1em; }
.pg-web .wd-tools b, .pg-web .wd-tools i, .pg-web .wd-tools u { font-family: var(--font-head); font-weight: 700; }
.pg-web .wd-ed-body { display: grid; gap: .6em; padding: .8em; }
.pg-web .wd-ed-body img { height: 7.4em; border-radius: .4em; }

/* detail: laptop + phone on a soft backdrop; the drawing scales with its own width */
.pg-web .wd-shot { aspect-ratio: 2.3; container-type: inline-size; background: radial-gradient(55% 85% at 10% 28%, rgba(14, 20, 36, .07), transparent 70%), radial-gradient(40% 60% at 92% 12%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(160deg, #f2f2f4, #e2e3e7); }
.pg-web .wd-shot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(#f7f7f8, #ececef); border-top: 1px solid rgba(255, 255, 255, .9); }
.pg-web .wd-fit { position: absolute; inset: 0; font-size: 9.6px; font-size: calc(100cqw / 86.7); }
.pg-web .wd-fit .ui { font-size: inherit; }
.pg-web .wd-laptop { position: absolute; left: 18.6%; top: 7.6%; width: 49.4%; margin: 0; }
.pg-web .wd-laptop > .ui { aspect-ratio: 1.5; }
.pg-web .wd-laptop .ws-nav { padding: 1.4em 2.6em 1.1em; }
.pg-web .wd-laptop .ws-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 0 1.6em 0 2.6em; }
.pg-web .wd-laptop .ws-img { height: 19em; }
.pg-web .wd-shot .wd-phone { left: 72.5%; right: auto; top: 21%; width: 13.1em; }

@media (max-width: 1080px) {
  .pg-web .svc-visual { max-width: 560px; }
}
@media (max-width: 620px) {
  .pg-web .wd-stage { font-size: 6.6px; }
}