/* E-ticaret hizmet detay sayfası. Ortak parçalar (co-subnav, co-feature-showcase, ck-*, wb/wf) kendi dosyalarından gelir; burada yalnızca .ec-* ve .ec-page kapsamı. */
.ec-page{--ec-gutter:max(40px,calc((100% - 1120px)/2))}
.ec-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Geçici görsel alanları: son görselin oranını ve teknik bilgilerini gösterir. */
.ec-ph{position:relative;display:grid;place-items:center;width:100%;height:100%;background:#e8e8ed;color:#6e6e73;text-align:left;overflow:hidden;border-radius:inherit}
.ec-ph>div{max-width:min(420px,86%);padding:14px}
.ec-ph b{display:block;font-size:15px;font-weight:600;line-height:1.35;color:#2c2c30;margin-bottom:10px}
.ec-ph ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px;line-height:1.35}
.ec-ph li span{display:inline-block;min-width:104px;color:#8e8e93}
.ec-ph--phone,.ec-ph--asset,.ec-wv-slot .ec-ph{background:repeating-conic-gradient(#f1f1f4 0 25%,#fff 0 50%) 0 0/22px 22px;border:2px dashed #c7c7cc}
.ec-ph--phone{border-radius:44px}
.ec-ph--card{background:#d9d9df;place-items:end center;padding-bottom:70px}
.ec-ph--card>div{max-width:88%}
.ec-ph--phone li span,.ec-ph--narrow li span,.ec-ph--card li span,.ec-ph--asset li span{display:block;min-width:0}
.ec-ph--modal{height:auto;aspect-ratio:16/10;border-radius:18px;margin:10px 0 8px}

/* Alt menü: Kurumsal sayfadaki gibi yalnızca "Keşfedin" bağlantısı görünür. */
.ec-page .co-subnav>div>a[href="#ec-process"]{display:none}
@media(max-width:700px){.ec-page .co-subnav>div>a[href="#ec-overview"]{display:inline-block;font-size:10px;padding:6px 10px}}

/* 1 — Açılış */
/* Apple iPhone 18 Pro açılışı gibi: video menünün altındaki ekranı kaplar, başlık ve proje düğmesi videonun üstünde. */
.ec-hero{position:relative;height:calc(100svh - 54px);min-height:560px;max-height:62.5vw;overflow:hidden;background:#eeeeef}
.ec-hero-media{position:absolute;inset:0}
.ec-hero-media::after{content:"";position:absolute;inset:auto 0 0;height:44%;background:linear-gradient(0deg,#f2f2f4 0%,#f2f2f4f0 32%,#f2f2f400 100%);pointer-events:none}
.ec-hero-video{display:block;width:100%;height:100%;object-fit:cover}
.ec-hero-head{position:absolute;left:var(--ec-gutter);right:var(--ec-gutter);bottom:44px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.ec-hero-head span{display:block;font-size:clamp(21px,2vw,28px);font-weight:600;letter-spacing:-.5px;color:#1d1d1f}
.ec-hero h1{font-size:clamp(44px,5vw,72px);font-weight:600;line-height:1.05;letter-spacing:-2.6px;margin:8px 0 0;color:#1d1d1f}
.ec-br-mobile{display:none}
.ec-hero-cta{display:flex;align-items:center;gap:22px;padding:10px 10px 10px 26px;border-radius:40px;background:#ffffffb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 2px #0000000d;flex-shrink:0;margin-bottom:6px}
.ec-hero-cta span{font-size:15px;letter-spacing:0;font-weight:600;color:#1d1d1f}
.ec-hero-cta .iv-pill{font-size:15px;padding:12px 24px;min-height:44px;white-space:nowrap}
.ec-replay{position:absolute;right:var(--ec-gutter);top:22px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:#ffffffb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#444;font-size:24px;line-height:1;cursor:pointer}
.ec-replay:focus-visible{outline:2px solid #0071e3;outline-offset:4px}

/* 2 — Öne çıkanlar: Kurumsal sayfadaki slider yapısı; görsel alanı yer tutucuyla dolar. */
.ec-highlights .wv-card header{padding-bottom:0}
.ec-wv-slot .ec-ph{border-radius:20px}

/* 3 — Alışveriş adımları: soldaki seçenekler sağdaki telefon görselini değiştirir. */
.ec-journey .ck-head{margin-bottom:40px}
.ec-journey-stage{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:center;min-height:760px;padding:56px;border-radius:32px;background:#f5f5f7}
.ec-journey-options{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ec-option{border-radius:28px;transition:background .25s,padding .25s}
.ec-option button{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:28px;background:#fff;padding:13px 22px 13px 14px;font:inherit;font-size:16px;font-weight:600;color:#1d1d1f;cursor:pointer;box-shadow:0 1px 2px #0000000d}
.ec-option-icon{position:relative;width:26px;height:26px;border-radius:50%;background:#1d1d1f;flex:none}
.ec-option-icon::before,.ec-option-icon::after{content:"";position:absolute;left:7px;top:12px;width:12px;height:2px;border-radius:2px;background:#fff;transition:transform .25s}
.ec-option-icon::after{transform:rotate(90deg)}
.ec-option p{display:none;margin:0;padding:4px 22px 20px 52px;font-size:16px;line-height:1.5;color:#6e6e73}
.ec-option.is-open{background:#fff;box-shadow:0 1px 2px #0000000d}
.ec-option.is-open button{box-shadow:none;padding-bottom:8px}
.ec-option.is-open p{display:block;animation:ec-fade .3s ease both}
.ec-option.is-open .ec-option-icon::after{transform:rotate(0)}
.ec-option button:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
.ec-journey-media{justify-self:center;height:640px;aspect-ratio:460/950}
.ec-journey-media .ec-ph{animation:ec-fade .3s ease both}

/* 4 — Altyapı */
.ec-platform{background:#f5f5f7}
.ec-platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin:0 auto}
.ec-platform-grid article{background:#fff;border-radius:28px;padding:44px 44px 40px}
.ec-logo{display:block;height:34px;width:auto;margin-bottom:26px}
.ec-platform-grid h3{font-size:28px;font-weight:600;letter-spacing:-.6px;margin:0 0 10px}
.ec-platform-grid p{font-size:17px;line-height:1.5;color:#6e6e73;margin:0 0 22px}
.ec-platform-grid ul{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid #e3e3e8;display:grid;gap:14px}
.ec-platform-grid li{position:relative;padding-left:28px;font-size:15px;line-height:1.45;color:#1d1d1f}
.ec-platform-grid li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:#e8f0fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5.5 9.3 2.3 2.2L12.5 7' fill='none' stroke='%230071e3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* 5 — Ürün sunumu: web-features.php kart yapısı */
.ec-features>h2{margin-bottom:0}
.ec-section-lead{max-width:760px;margin:22px 0 48px var(--ec-gutter);font-size:19px;line-height:1.55;color:#6e6e73}

/* 6 — Sepet ve ödeme: solda metin ve kısa bilgiler, sağda kademeli iki telefon */
.ec-checkout{background:#f5f5f7}
.ec-checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ec-checkout-copy>p{font-size:19px;line-height:1.55;color:#6e6e73;margin:26px 0 40px;max-width:520px}
.ec-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;padding-top:30px;border-top:1px solid #d2d2d7}
.ec-facts dt{font-size:24px;font-weight:600;letter-spacing:-.6px;line-height:1.15;color:#1d1d1f}
.ec-facts dd{margin:6px 0 0;font-size:14px;line-height:1.4;color:#6e6e73}
.ec-checkout-devices{position:relative;height:700px}
.ec-checkout-devices .ec-ph--phone{position:absolute;width:auto;height:560px;aspect-ratio:460/950}
.ec-ph--cart{left:4%;top:0}
.ec-ph--pay{right:4%;bottom:0;z-index:1}

/* 7 — Başlangıç noktası: seçime göre değişen kutucuklar */
.ec-start-panel{border-radius:32px;background:#1d1d1f;color:#f5f5f7;padding:64px}
.ec-start-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px}
.ec-start .ec-start-head h2{color:#f5f5f7}
.ec-select{display:grid;gap:10px;min-width:min(360px,100%)}
.ec-select label{font-size:14px;font-weight:600;color:#f5f5f7}
.ec-select select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid #6e6e73;border-radius:14px;background:#1d1d1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23f5f5f7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center/14px no-repeat;color:#f5f5f7;font:inherit;font-size:16px;padding:14px 44px 14px 18px;cursor:pointer}
.ec-select select:focus-visible{outline:2px solid #2997ff;outline-offset:3px}
.ec-start-sub{font-size:21px;font-weight:600;letter-spacing:-.3px;color:#86868b;margin:0 0 26px}
.ec-start-sub strong{color:#f5f5f7}
.ec-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ec-bento article{background:#000;border-radius:24px;padding:30px 28px 32px;min-height:220px;animation:ec-fade .35s ease both}
.ec-bento-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#1d1d1f;margin-bottom:26px}
.ec-bento-icon svg{width:24px;height:24px;fill:none;stroke:#2997ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ec-bento h3{font-size:21px;font-weight:600;letter-spacing:-.3px;margin:0 0 10px;color:#f5f5f7}
.ec-bento p{font-size:15px;line-height:1.5;color:#a1a1a6;margin:0}
.ec-start-note{margin:32px 0 0;font-size:13px;color:#86868b}

/* 8 — Yönetim: farklı genişlikte kartlar, açıklama görselin altında */
.ec-manage{background:#f5f5f7;padding-left:0;padding-right:0}
.ec-manage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:0 var(--ec-gutter) 44px}
.ec-gallery-track{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:0 var(--ec-gutter);scroll-padding-inline:var(--ec-gutter);overscroll-behavior-x:contain}
.ec-gallery-track::-webkit-scrollbar{display:none}
.ec-gallery-item{flex:0 0 auto;scroll-snap-align:start}
.ec-gallery-item--wide{width:560px}
.ec-gallery-item--narrow{width:280px}
.ec-gallery-item .ec-ph{height:350px;border-radius:24px}
.ec-gallery-item p{max-width:92%;margin:18px 0 0 6px;font-size:14px;line-height:1.5;color:#6e6e73}
.ec-gallery-item p strong{color:#1d1d1f;font-weight:600}
.ec-gallery-controls{margin-top:28px}
.ec-manage-note{margin:26px var(--ec-gutter) 0;font-size:13px;color:#86868b}

/* 9 — Süreç: yatay zaman çizgisi */
.ec-timeline{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.ec-timeline li:not(:last-child)::after{content:"";position:absolute;left:58px;right:-14px;top:21px;height:2px;background:#d2d2d7}
.ec-timeline li{position:relative}
.ec-timeline span{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1d1d1f;color:#fff;font-size:16px;font-weight:600;box-shadow:0 0 0 8px #fff}
.ec-timeline h3{font-size:21px;font-weight:600;letter-spacing:-.4px;margin:26px 0 10px}
.ec-timeline p{font-size:15px;line-height:1.5;color:#6e6e73;margin:0}

/* 10 — ICON ile çalışma: web-benefits.php kart yapısı */
.ec-work .wb-card h3{font-size:26px}
.ec-ph--asset{border-radius:20px}
.ec-modal-links{display:flex;flex-wrap:wrap;gap:10px 24px}
.ec-modal-links a{color:#0071e3;font-size:17px}

/* 11 — Karşılaştırma */
.ec-compare-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.ec-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:48px 40px 40px;border-radius:32px;background:#f5f5f7}
.ec-compare-grid article{display:flex;flex-direction:column;align-items:center;text-align:center}
.ec-compare-grid img{width:min(360px,100%);height:auto;margin-bottom:22px}
.ec-compare-tag{font-size:13px;font-weight:600;color:#b64400;margin-bottom:4px}
.ec-compare-grid h3{font-size:28px;font-weight:600;letter-spacing:-.6px;margin:0 0 10px}
.ec-compare-grid article>p{max-width:340px;font-size:16px;line-height:1.5;color:#6e6e73;margin:0 0 26px}
.ec-compare-grid ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;width:min(300px,100%);text-align:left}
.ec-compare-grid li{display:flex;align-items:center;gap:12px;font-size:15px;color:#1d1d1f}
.ec-compare-grid li.is-no{color:#86868b}
.ec-mark{width:20px;height:20px;border-radius:50%;flex:none;position:relative}
.is-yes .ec-mark{background:#1d1d1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.is-no .ec-mark{border:1.5px solid #c7c7cc}
.is-no .ec-mark::after{content:"";position:absolute;left:5px;right:5px;top:8px;height:1.5px;background:#c7c7cc}
.ec-compare-actions{display:flex;align-items:center;gap:22px;margin-top:auto}
.ec-compare-actions>a:not(.iv-pill){color:#0071e3;font-size:15px}

@keyframes ec-fade{from{opacity:0}to{opacity:1}}

@media(max-width:1000px){
 .ec-journey-stage{grid-template-columns:1fr;padding:40px;min-height:0}
 .ec-journey-media{grid-row:1;height:560px}
 .ec-checkout-grid{grid-template-columns:1fr}
 .ec-timeline{grid-template-columns:1fr;gap:0}
 .ec-timeline li:not(:last-child)::after{left:21px;right:auto;top:58px;bottom:6px;width:2px;height:auto}
 .ec-timeline li{display:grid;grid-template-columns:44px 1fr;column-gap:22px;padding-bottom:30px}
 .ec-timeline span{grid-row:span 2}
 .ec-timeline h3{margin:8px 0 6px}
 .ec-bento{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .ec-page{--ec-gutter:24px}
 .ec-ph b{font-size:14px}
 .ec-ph ul{font-size:11px}
 .ec-ph li span{min-width:0;display:block}
 /* Telefonda Apple iPhone 18 Pro mobil açılışı gibi: ekran boyu alan; üstte ortalı başlık, ortada video, altta proje şeridi.
    Zemin, videonun kenar rengiyle (#e4e4e4) aynı; video kenarlardan zemine karışır. */
 .ec-hero{display:flex;flex-direction:column;height:calc(100svh - 50px);min-height:600px;max-height:none;background:#e4e4e4}
 .ec-hero-head{display:contents}
 .ec-hero-head>div:first-child{order:1;text-align:center;padding:36px 24px 0}
 .ec-hero-head span{font-size:19px;letter-spacing:-.3px}
 .ec-hero h1{font-size:34px;line-height:1.1;letter-spacing:-1.2px;margin-top:6px}
 .ec-br-mobile{display:inline}
 .ec-hero-media{order:2;position:relative;inset:auto;flex:1;min-height:0;display:flex;align-items:center}
 .ec-hero-media::after{display:none}
 .ec-hero-video{height:clamp(220px,80vw,340px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
 .ec-replay{top:auto;bottom:14px;right:16px;width:30px;height:30px;font-size:21px}
 .ec-hero-cta{order:3;margin:0;border-radius:0;justify-content:space-between;gap:12px;padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:#f5f5f7e6;box-shadow:none}
 .ec-hero-cta span{font-size:14px}
 .ec-hero-cta .iv-pill{font-size:14px;padding:10px 18px;min-height:38px;flex-shrink:0}
 .ec-journey-stage{padding:28px 18px;border-radius:26px;gap:28px}
 .ec-journey-media{height:440px}
 .ec-journey-options{width:100%}
 .ec-option{width:100%}
 .ec-option button{font-size:15px;width:100%}
 .ec-option p{font-size:15px;padding:2px 18px 18px 52px}
 .ec-platform-grid{grid-template-columns:1fr}
 .ec-platform-grid article{padding:32px 26px}
 .ec-platform-grid h3{font-size:24px}
 .ec-section-lead{margin:16px 26px 30px;font-size:17px}
 .ec-checkout-copy>p{font-size:17px;margin:18px 0 30px}
 .ec-facts{gap:24px 18px}
 .ec-facts dt{font-size:19px;letter-spacing:-.3px}
 .ec-checkout-devices{height:auto;display:flex;justify-content:center}
 .ec-checkout-devices .ec-ph--cart{display:none}
 .ec-checkout-devices .ec-ph--pay{position:relative;right:auto;bottom:auto;height:460px}
 .ec-start{padding-left:12px;padding-right:12px}
 .ec-start-panel{padding:40px 22px;border-radius:26px}
 .ec-start-head{display:block;margin-bottom:34px}
 .ec-select{margin-top:24px}
 .ec-start-sub{font-size:17px}
 .ec-bento article{min-height:0;padding:24px 22px}
 .ec-bento h3{font-size:19px}
 .ec-manage-head,.ec-compare-head{display:block}
 .ec-manage-head .ck-link,.ec-compare-head .ck-link{margin-top:16px}
 .ec-gallery-item--wide,.ec-gallery-item--narrow{width:78vw}
 .ec-gallery-item--wide .ec-ph{height:auto;aspect-ratio:16/10}
 .ec-gallery-item--narrow .ec-ph{height:auto;aspect-ratio:4/5}
 .ec-gallery-controls{margin:22px 24px 0}
 .ec-compare-grid{grid-template-columns:1fr;gap:56px;padding:36px 22px}
 .ec-compare-grid h3{font-size:24px}
}
@media(max-width:520px){.ec-bento{grid-template-columns:1fr;gap:12px}.ec-bento article{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:20px 18px}.ec-bento-icon{grid-row:span 2;width:44px;height:44px;margin:0}.ec-bento h3{font-size:18px;margin:2px 0 6px}}
@media(prefers-reduced-motion:reduce){.ec-option.is-open p,.ec-journey-media .ec-ph,.ec-bento article{animation:none}}

/* Hazırlanan görseller (et-*.webp): yer tutucuyla aynı ölçüler, zemin ve kesikli çerçeve yok */
.ec-img{display:block;width:100%;height:100%;padding:0;border:0;background:none;object-fit:contain}
.ec-picture{display:block;width:100%;height:100%}
.ec-ph--phone.ec-img{border-radius:0}
.ec-ph--modal.ec-img,.ec-ph--wide.ec-img,.ec-ph--narrow.ec-img{object-fit:cover}
.ec-ph--modal.ec-img{width:100%}
.wf-photo .ec-img--card{object-fit:cover;object-position:center 60%}
.ec-ph--modal.ec-img{height:auto;aspect-ratio:16/10;object-fit:contain;max-width:100%}