/* E-Ticaret service page: storefront drawings. Every selector is scoped to .pg-eticaret.
   The drawings scale with their own width (container units), so proportions hold on every screen. */

/* shared storefront parts */
.pg-eticaret .ec-ph { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: .6em; background: #f2f2f4; }
.pg-eticaret .ec-ph .ui-photo { width: 100%; height: 100%; padding: 8%; object-fit: contain; background: none; border-radius: 0; }
.pg-eticaret .ui-photo.flip { transform: scaleX(-1); }
.pg-eticaret .ui-photo.pink { filter: sepia(.25) saturate(2.6) hue-rotate(-60deg) brightness(.97); }
.pg-eticaret .ui-photo.gray { filter: grayscale(1) brightness(.95) contrast(1.15); }
.pg-eticaret .ui-photo.sand { filter: saturate(1.6) brightness(.97); }
.pg-eticaret .ui-photo.white { filter: saturate(.3); }
.pg-eticaret .ec-top { display: flex; flex: none; align-items: center; gap: 1em; height: 5.6em; padding: 0 3.4em 0 4.2em; border-bottom: 1px solid #f1f2f4; }
.pg-eticaret .ec-top .ui-brand { margin: 0 3.4em 0 0; font-size: 1.45em; font-weight: 700; letter-spacing: .05em; }
.pg-eticaret .ec-links { display: flex; gap: 2.3em; margin-right: auto; font-size: .76em; color: #4d5260; white-space: nowrap; }
.pg-eticaret .ec-icons { display: flex; gap: 1.25em; color: var(--ink-2); }
.pg-eticaret .ec-icons .ic { width: 1.35em; height: 1.35em; }
.pg-eticaret .ec-sys { display: inline-flex; align-items: flex-end; gap: .15em; }
.pg-eticaret .ec-sys i { width: .25em; height: .45em; border-radius: .1em; background: currentColor; }
.pg-eticaret .ec-sys i:nth-child(2) { height: .65em; }
.pg-eticaret .ec-sys i:nth-child(3) { height: .85em; }
.pg-eticaret .ec-sys b { width: 1.6em; height: .8em; margin-left: .35em; border-radius: .25em; background: currentColor; }

/* hero: product page + floating cart */
.pg-eticaret .ec-hero { container-type: inline-size; }
.pg-eticaret .ec-hero > .ui, .pg-eticaret .ec-hero > .ui-float { font-size: 2cqw; }
.pg-eticaret .ec-hero > .ui { display: flex; flex-direction: column; width: 94.5%; aspect-ratio: 380 / 308; }
.pg-eticaret .ec-pdp { display: grid; flex: 1; grid-template-columns: 3em 14.2em minmax(0, 1fr); gap: 0 .8em; min-height: 0; padding: 1.5em 1.5em 4.2em; }
.pg-eticaret .ec-thumbs { display: grid; align-content: start; gap: .85em; }
.pg-eticaret .ec-thumbs .ec-ph { aspect-ratio: 1 / 1.22; border-radius: .4em; }
.pg-eticaret .ec-thumbs .ui-photo { padding: 10%; }
.pg-eticaret .ec-main { border-radius: .4em; }
.pg-eticaret .ec-main .ui-photo { padding: 4%; }
.pg-eticaret .ec-info { display: flex; flex-direction: column; min-width: 0; padding: 1.9em 0 0 1.3em; }
.pg-eticaret .ec-name { font-size: 1.12em; font-weight: 600; white-space: nowrap; }
.pg-eticaret .ec-var { margin-top: .55em; font-size: .74em; color: #a2a6b0; }
.pg-eticaret .ec-lab { margin: 3em 0 .9em; font-size: .74em; font-weight: 500; }
.pg-eticaret .ec-sw { display: flex; gap: .75em; }
.pg-eticaret .ec-sw i { width: 1.65em; height: 1.65em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(14, 20, 36, .08); }
.pg-eticaret .ec-sw i.on { outline: 1.5px solid #cdbb98; outline-offset: .2em; }
.pg-eticaret .ec-sizes { display: flex; gap: .55em; }
.pg-eticaret .ec-sizes span { display: grid; flex: none; place-items: center; width: 2.6em; height: 2.6em; border: 1px solid #e6e7eb; border-radius: .45em; font-size: .72em; }
.pg-eticaret .ec-sizes .on { border-color: var(--ink); font-weight: 600; }
.pg-eticaret .ec-buy { display: flex; gap: .7em; margin-top: auto; }
.pg-eticaret .ec-buy .ui-btn { padding: 1.05em 1.75em; }
.pg-eticaret .ec-fav { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: .55em; background: #f3f4f6; }
.pg-eticaret .ec-cart { top: 24.5%; right: 0; display: flex; flex-direction: column; gap: 1.25em; width: 33.6%; padding: 1.4em 1.3em 1.3em; }
.pg-eticaret .ec-cart .ui-head b { font-size: .95em; }
.pg-eticaret .ec-line { display: flex; align-items: center; gap: 1em; }
.pg-eticaret .ec-line .ec-ph { flex: none; width: 4.4em; height: 5.2em; border-radius: .45em; }
.pg-eticaret .ec-line .ui-photo { padding: 10%; }
.pg-eticaret .ec-line > div { display: grid; gap: .45em; min-width: 0; font-size: .74em; }
.pg-eticaret .ec-line small { font-size: .92em; }
.pg-eticaret .ec-cart .ui-btn { margin-top: .5em; padding: .95em .6em; }

/* cards */
.pg-eticaret .svc-card { container-type: inline-size; }
.pg-eticaret .svc-card .ui { display: flex; flex-direction: column; height: auto; aspect-ratio: 1.28; font-size: 2.15cqw; }
.pg-eticaret .svc-card .ec-top { height: 5.4em; padding: 0 2.6em 0 2.8em; }
.pg-eticaret .svc-card .ec-top .ui-brand { margin-right: 4.2em; }
.pg-eticaret .svc-card .ec-links { gap: 2.2em; font-size: .68em; }
.pg-eticaret .ec-cat { display: grid; flex: 1; grid-template-columns: 11.5em minmax(0, 1fr); gap: 1.4em; min-height: 0; padding: 1.7em 1.4em 0 1.9em; }
.pg-eticaret .ec-cats { display: flex; flex-direction: column; gap: 1.35em; padding: 1em 0 0 .3em; font-size: .74em; color: #5b6070; white-space: nowrap; }
.pg-eticaret .ec-cats b { position: relative; color: var(--ink); }
.pg-eticaret .ec-cats b::before { content: ""; position: absolute; left: -1.25em; top: -.35em; bottom: -.35em; width: .3em; border-radius: 99px; background: var(--red); }
.pg-eticaret .ec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 12.6em; gap: .9em; }
.pg-eticaret .ec-grid .ec-ph { border-radius: .5em; background: #f4f4f6; }
.pg-eticaret .ec-grid .ui-photo { padding: 12%; }
.pg-eticaret .ec-pdp2 { grid-template-columns: 3.6em 18.2em minmax(0, 1fr); gap: 0 1.1em; padding: 1.5em 2em 1.5em 2.2em; }
.pg-eticaret .ec-pdp2 .ec-thumbs { gap: .75em; }
.pg-eticaret .ec-pdp2 .ec-thumbs .ec-ph { aspect-ratio: 1 / 1.05; }
.pg-eticaret .ec-pdp2 .ec-main { align-self: start; height: 28em; }
.pg-eticaret .ec-pdp2 .ec-info { padding: 1em 0 0 .7em; }
.pg-eticaret .ec-pdp2 .ec-lab { margin: 1.9em 0 .7em; }
.pg-eticaret .ec-pdp2 .ec-sizes { gap: .4em; }
.pg-eticaret .ec-pdp2 .ec-sizes span { width: 2.35em; height: 2.35em; font-size: .68em; }
.pg-eticaret .ec-pdp2 .ui-btn.block { margin-top: 1.5em; padding: .9em; font-size: .78em; }
.pg-eticaret .ec-acc { display: grid; gap: .65em; margin-top: 1.4em; }
.pg-eticaret .ec-acc span { display: flex; align-items: center; justify-content: space-between; padding: .75em .8em; border: 1px solid var(--l); border-radius: .4em; font-size: .68em; white-space: nowrap; }
.pg-eticaret .ec-acc .ic { width: 1.1em; height: 1.1em; color: #9a9eaa; }
.pg-eticaret .ec-admin { flex: 1; grid-template-columns: 12.6em minmax(0, 1fr); }
.pg-eticaret .ec-admin .ui-side { gap: .45em; padding: 1.4em .9em; }
.pg-eticaret .ec-admin .ui-brand { margin: 0 0 1.1em .45em; font-size: 1.5em; font-weight: 700; letter-spacing: .05em; }
.pg-eticaret .ec-admin .ui-nav { font-size: .85em; }
.pg-eticaret .ec-admin .ui-main { gap: .9em; padding: 1.3em 1.6em; }
.pg-eticaret .ec-mini { margin-right: auto; font-size: .9em; letter-spacing: .04em; }
.pg-eticaret .ec-admin .ui-title { font-size: 1.3em; }
.pg-eticaret .ec-admin .ui-tabs { justify-content: space-between; gap: .8em; font-size: .76em; }
.pg-eticaret .ec-admin .ui-table { font-size: .76em; }
.pg-eticaret .ec-admin .ui-table thead tr { background: var(--soft); }
.pg-eticaret .ec-admin .ui-table td { padding: .85em .6em; }

/* detail: laptop + phone on a desk */
.pg-eticaret .ec-stage { container-type: inline-size; aspect-ratio: 595 / 310; box-shadow: none; background: linear-gradient(170deg, #f0f0f2, #e4e5e8); }
.pg-eticaret .ec-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 21%; background: linear-gradient(#f6f6f7, #ececee); }
.pg-eticaret .ec-plant { position: absolute; left: 1%; bottom: 13%; width: auto; height: 64%; }
.pg-eticaret .ec-lap { position: absolute; left: 12.4%; top: 4.6%; width: 57.4%; margin: 0; font-size: 1.15cqw; }
.pg-eticaret .ec-lap > .ui { display: flex; flex-direction: column; aspect-ratio: 1.38; font-size: 1em; }
.pg-eticaret .ec-lap .ec-top { height: 4.4em; padding: 0 3em; }
.pg-eticaret .ec-lap .ec-links { gap: 2.2em; font-size: .7em; }
.pg-eticaret .ec-lap .ec-top .ui-brand { font-size: 1.3em; }
.pg-eticaret .ec-banner { position: relative; flex: none; height: 19em; overflow: hidden; background: #ece6dc; }
.pg-eticaret .ec-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pg-eticaret .ec-banner .ec-shoe { position: absolute; right: 13%; bottom: 4%; width: 44%; transform: scaleX(-1); }
.pg-eticaret .ec-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .9em; padding: 3.6em 0 0 3.4em; }
.pg-eticaret .ec-copy b { max-width: 7.4em; font-family: var(--font-head); font-size: 2.05em; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.pg-eticaret .ec-copy small { max-width: 13em; font-size: .85em; color: #6b7080; }
.pg-eticaret .ec-stage .ui-btn.ghost { gap: .7em; margin-top: .6em; padding: .8em 1.2em; border: 0; box-shadow: 0 1px 3px rgba(14, 20, 36, .08); font-size: .74em; }
.pg-eticaret .ec-tiles { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; min-height: 0; padding: 1.4em 2.4em 1.6em; }
.pg-eticaret .ec-tiles .ec-ph { align-items: end; border-radius: .55em; background: #f1efec; }
.pg-eticaret .ec-tiles .ec-ph b { position: absolute; left: .9em; top: .8em; font-size: .7em; }
.pg-eticaret .ec-tiles .ui-photo { height: 76%; padding: 4% 10% 8%; }
.pg-eticaret .ec-phone { position: absolute; left: 72.6%; top: 13%; width: 22em; font-size: .92cqw; }
.pg-eticaret .ec-phone b { font-weight: 600; }
.pg-eticaret .ec-phone small { display: block; }
.pg-eticaret .ec-ptop { display: flex; align-items: center; justify-content: space-between; padding: 1.2em 1.4em .9em; }
.pg-eticaret .ec-ptop .ui-brand { margin: 0; font-size: 1.35em; font-weight: 700; letter-spacing: .05em; }
.pg-eticaret .ec-ptop .ic { width: 1.5em; height: 1.5em; }
.pg-eticaret .ec-pban { position: relative; flex: none; height: 14em; overflow: hidden; background: #ece6dc; }
.pg-eticaret .ec-pban .ec-shoe { position: absolute; left: 4%; bottom: 2%; width: 82%; transform: scaleX(-1); }
.pg-eticaret .ec-phone .uip-body { gap: .7em; padding-top: 1.4em; }
.pg-eticaret .ec-ph-title { font-family: var(--font-head); font-size: 1.55em; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.pg-eticaret .ec-phone small { font-size: .85em; color: #6b7080; }
.pg-eticaret .ec-phone .ui-btn.ghost { align-self: flex-start; }
.pg-eticaret .ec-tiles.two { grid-template-columns: 1fr 1fr; gap: .8em; margin-top: auto; padding: 0; }
.pg-eticaret .ec-tiles.two .ec-ph { height: 8.4em; }

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