/* Mobil Uygulama service page: phone drawings. Every selector is scoped to .pg-mobil.
   Each backdrop is a size container, so the phones scale with it (cqw) and keep their proportions. */

/* phone screen basics (the .ui helpers expect these outside a .ui window too) */
.pg-mobil .uip { --l: #eceef2; --soft: #f6f7f9; position: absolute; }
.pg-mobil .uip b { font-weight: 600; }
.pg-mobil .uip small { display: block; font-size: .8em; color: #8a8f9c; }
.pg-mobil .uip-status { padding: 1em 2.1em .3em 2.3em; }
.pg-mobil .mb-sys { display: inline-flex; align-items: flex-end; gap: .15em; }
.pg-mobil .mb-sys i { width: .25em; height: .45em; border-radius: .1em; background: currentColor; }
.pg-mobil .mb-sys i:nth-child(2) { height: .65em; }
.pg-mobil .mb-sys i:nth-child(3) { height: .85em; }
.pg-mobil .mb-sys b { width: 1.6em; height: .8em; margin-left: .35em; border-radius: .25em; background: currentColor; }
.pg-mobil .uip-body { padding: 1.4em 1.5em 1.6em; }
.pg-mobil .mb-head { display: grid; grid-template-columns: 2em minmax(0, 1fr) 2em; align-items: center; padding: .6em 0 .4em; text-align: center; white-space: nowrap; }
.pg-mobil .mb-head b { font-size: 1.12em; }
.pg-mobil .mb-head .ic { width: 1.5em; height: 1.5em; }
.pg-mobil .mb-h { font-size: 1.02em; }
.pg-mobil .mb-big { font-family: var(--font-head); font-size: 1.75em; font-weight: 700; letter-spacing: -.02em; }
.pg-mobil .mb-cta { margin-top: auto; padding: 1.15em 1em; border-radius: .8em; font-size: .9em; }
.pg-mobil .uip .ui-btn.ghost { padding: 1.05em 1em; border-radius: .8em; font-weight: 500; }
.pg-mobil .uip .ui-search { min-width: 0; padding: .8em 1em; border: 0; border-radius: .8em; background: #f3f4f6; white-space: nowrap; overflow: hidden; }
.pg-mobil .uip .ui-chips { flex-wrap: nowrap; overflow: hidden; }
.pg-mobil .uip .ui-chips span { padding: .55em 1em; border-color: #eceef2; }
.pg-mobil .ui-ico.yellow { background: #fff6d6; color: #b07d00; }

/* booking steps and service list */
.pg-mobil .mb-steps { position: relative; display: flex; justify-content: space-between; padding: .4em .4em 0; font-size: .78em; color: #9a9eaa; }
.pg-mobil .mb-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 1.6em; height: 2px; background: #e6e7eb; }
.pg-mobil .mb-steps span { position: relative; display: grid; justify-items: center; gap: .6em; min-width: 4.4em; }
.pg-mobil .mb-steps i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #e6e7eb; }
.pg-mobil .mb-steps i::after { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #fff; }
.pg-mobil .mb-steps .on { font-weight: 600; color: var(--red); }
.pg-mobil .mb-steps .on i { background: var(--red); box-shadow: 0 0 0 .3em #fde8ea; }
.pg-mobil .mb-list { display: grid; gap: .75em; }
.pg-mobil .mb-item, .pg-mobil .mb-task { display: flex; align-items: center; gap: 1em; padding: .95em 1em; border: 1px solid #eceef2; border-radius: .9em; background: #fff; }
.pg-mobil .mb-item > span, .pg-mobil .mb-task > span:not(.ui-ico) { display: grid; flex: 1; gap: .25em; min-width: 0; font-size: .88em; white-space: nowrap; }
.pg-mobil .mb-item > .ic:first-child { width: 1.6em; height: 1.6em; color: #3b4050; }
.pg-mobil .mb-item > .ic:last-child, .pg-mobil .mb-task > .ic { color: #9a9eaa; }
.pg-mobil .mb-done { align-items: center; text-align: center; }
.pg-mobil .mb-done .mb-ok { display: grid; place-items: center; width: 4.8em; height: 4.8em; margin-top: 7em; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 .6em 1.4em -.4em rgba(215, 0, 15, .55); }
.pg-mobil .mb-ok .ic { width: 2.3em; height: 2.3em; stroke-width: 2.4; }
.pg-mobil .mb-done > b { max-width: 10em; margin-top: 1.2em; font-family: var(--font-head); font-size: 1.4em; line-height: 1.2; }
.pg-mobil .mb-done > small { max-width: 15em; font-size: .78em; line-height: 1.55; }
.pg-mobil .mb-done .ui-btn.ghost { margin-top: auto; }
.pg-mobil .mb-done .mb-cta { margin-top: 0; }

/* hero: two phones on a soft backdrop */
.pg-mobil .mb-hero { container-type: inline-size; aspect-ratio: 365 / 382; box-shadow: none; background: linear-gradient(165deg, #f0f0f2, #e2e3e7); }
.pg-mobil .mb-p1 { left: 7.5%; top: 7%; width: 22em; font-size: 1.93cqw; }
.pg-mobil .mb-p2 { left: 57%; top: 15%; width: 22em; font-size: 1.68cqw; border-color: #2a2c31; }

/* cards: a phone close-up, cropped by the frame */
.pg-mobil .svc-card .mb-card { container-type: inline-size; height: auto; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, #f1f0ee, #e3e1dd); }
.pg-mobil .mb-card.plain { background: linear-gradient(160deg, #efeff1, #dedfe3); }
.pg-mobil .mb-blur { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(7px) saturate(.9); }
.pg-mobil .mb-blur.flip { transform: scaleX(-1); }
.pg-mobil .mb-card .uip { box-shadow: 0 30px 50px -20px rgba(14, 20, 36, .45); }
.pg-mobil .mb-c1 { left: 13%; top: 4.5%; width: 22em; font-size: 3.55cqw; transform: rotate(-5deg); transform-origin: 50% 0; }
.pg-mobil .mb-c2 { left: 14%; top: 3.5%; width: 22em; font-size: 3.27cqw; }
.pg-mobil .mb-c2 .uip-body { gap: .75em; padding-top: .9em; }
.pg-mobil .mb-c3 { left: 10%; top: 4.5%; width: 22em; font-size: 3.55cqw; transform: rotate(3deg); transform-origin: 50% 0; }
.pg-mobil .mb-card .uip-body { gap: 1em; }
.pg-mobil .mb-venues { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.pg-mobil .mb-venues > span { display: grid; gap: .35em; font-size: .9em; }
.pg-mobil .mb-venues .ui-photo { height: auto; aspect-ratio: 1 / .92; margin-bottom: .4em; border-radius: .8em; }
.pg-mobil .mb-venues b { display: flex; align-items: center; justify-content: space-between; }
.pg-mobil .mb-venues b .ic { width: 1.3em; height: 1.3em; color: var(--red); }
.pg-mobil .mb-month { padding-top: .2em; text-align: center; }
.pg-mobil .mb-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .1em 0; justify-items: center; font-size: .82em; }
.pg-mobil .mb-cal small { padding-bottom: .4em; font-size: .85em; }
.pg-mobil .mb-cal span { display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 50%; }
.pg-mobil .mb-cal .on { background: var(--red); color: #fff; font-weight: 600; }
.pg-mobil .mb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.pg-mobil .mb-slots span { padding: .75em 0; border: 1px solid #e6e7eb; border-radius: .6em; font-size: .82em; text-align: center; }
.pg-mobil .mb-slots .on { border-color: var(--red); background: var(--red); color: #fff; font-weight: 600; }
.pg-mobil .mb-task { gap: 1.1em; padding: 1.1em 1.1em; }
.pg-mobil .mb-task .ui-ico { width: 2.8em; height: 2.8em; }
.pg-mobil .mb-task small { display: flex; align-items: center; gap: .4em; }
.pg-mobil .mb-task .ui-dot { width: .55em; height: .55em; }

/* detail: three steps of one flow */
.pg-mobil .mb-stage { container-type: inline-size; aspect-ratio: 565 / 300; box-shadow: none; background: linear-gradient(170deg, #f0f0f2, #e3e4e7); }
.pg-mobil .mb-flow { display: flex; justify-content: center; align-items: flex-start; gap: 3.4cqw; padding-top: 2.3cqw; }
.pg-mobil .mb-col { display: grid; justify-items: center; gap: 1.5cqw; }
.pg-mobil .mb-col .uip { position: relative; width: 22em; font-size: .99cqw; }
.pg-mobil .mb-col > b { font-size: 1.75cqw; font-weight: 600; }
.pg-mobil .mb-arrow { width: 2.8cqw; height: 2.8cqw; margin-top: 21cqw; color: var(--ink); stroke-width: 2; }
.pg-mobil .mb-pic { height: auto; aspect-ratio: 2 / 1.05; border-radius: .9em; }
.pg-mobil .mb-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.pg-mobil .mb-icons span { display: grid; place-items: center; aspect-ratio: 1.1; border: 1px solid #eceef2; border-radius: .8em; color: #6b7080; }
.pg-mobil .mb-icons .ic { width: 1.6em; height: 1.6em; }
.pg-mobil .mb-tabbar { position: relative; display: flex; justify-content: space-around; margin: auto -1.5em -1.6em; padding: 1em 0 2.2em; border-top: 1px solid #eceef2; color: #9a9eaa; }
.pg-mobil .mb-tabbar::after { content: ""; position: absolute; left: 50%; bottom: .7em; width: 34%; height: .35em; border-radius: 99px; background: #15171c; transform: translateX(-50%); }
.pg-mobil .mb-tabbar .ic { width: 1.7em; height: 1.7em; }
.pg-mobil .mb-tabbar .on { color: var(--red); }
.pg-mobil .mb-svc { display: grid; gap: .3em; padding-bottom: 1em; border: 1px solid #eceef2; border-radius: .9em; overflow: hidden; }
.pg-mobil .mb-svc .ui-photo { height: auto; aspect-ratio: 1.75; margin-bottom: .6em; border-radius: 0; }
.pg-mobil .mb-svc b, .pg-mobil .mb-svc small { padding: 0 1em; }

/* single-column layouts: keep the drawings near their desktop size */
@media (max-width: 1080px) { .pg-mobil .svc-hero .svc-visual { width: 100%; max-width: 500px; } }
@media (max-width: 900px) { .pg-mobil .svc-card { width: 100%; max-width: 420px; } }