/* Hakkımızda "Çalışma adımlarımız" — önek .zad (Ray kartları + ok bandı; konsept calisma-adimlari-konsept4.html ?a=1) */
.zad{position:relative;font-family:"Plus Jakarta Sans",sans-serif;background:#fff;--kc:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.zad .za-h{max-width:none;order:0}
.zad-sc{height:380vh}
/* sahne üstten başlar: sabitlenince başlık ekranın %18'inin üstünde kalır, böylece anasayfa Hakkımızda ile aynı dolum formülü sabitlenmede tamamlanır */
.zad-st{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;box-sizing:border-box;padding:10vh 0 36px}
.zad-st>.bk-w{width:100%}
.zad-bas{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end;margin-bottom:36px}
.zad-lead{margin:0;font:400 17px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55;max-width:500px}
.zad-vp{position:relative;height:clamp(300px,calc(100vh - 470px),400px);overflow:hidden}
.zad-tr{display:flex;gap:28px;height:100%;padding:0 max(40px,calc((100vw - 1200px)/2));width:max-content;will-change:transform}
.zad-tr article{position:relative;width:min(760px,60vw);height:100%;flex:none;opacity:calc(1 - .45*var(--d,0))}
/* öndeki karttan uzaklaştıkça (--d 0→1, kaydırmayla kademeli): soluklaşır, metin kutusu iner, foto hafif büyür, kırmızı çizgi kısalır */
.zad-tr .tx{transform:translateY(calc(var(--d,0)*14px))}
.zad-tr figure img{transform:scale(calc(1 + .05*var(--d,0)))}
.zad-tr .tx::before{width:calc(56px - 32px*var(--d,0))}
.zad-tr figure{position:relative;margin:0;height:100%;overflow:hidden;clip-path:var(--kc)}
.zad-tr figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.zad-tr .tx{position:absolute;right:22px;bottom:22px;width:min(340px,48%);padding:22px 24px 24px;background:#fff;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);box-sizing:border-box}
.zad-tr .tx::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:#d61116;transform-origin:left}
.zad-tr .sz{display:inline-block;margin-bottom:12px;font:500 12.5px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#d61116}
.zad-tr h3{margin:0 0 10px;font:800 22px/1.25 "Plus Jakarta Sans",sans-serif;letter-spacing:-.01em;color:#1b1c1f}
.zad-tr p{margin:0;font:400 14.5px/1.65 "Plus Jakarta Sans",sans-serif;color:#5d6268}
/* ok bandı */
.zad-ok{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.zad-ok li{display:flex;align-items:center;height:52px;padding:0 18px 0 34px;background:linear-gradient(#d61116,#d61116) 0 0/0% 100% no-repeat #eef0f2;font:600 14px/1.2 "Plus Jakarta Sans",sans-serif;color:#7b8087;cursor:pointer;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%);transition:background-size .55s cubic-bezier(.6,0,.2,1),background-color .45s,color .35s}
.zad-ok li:first-child{padding-left:20px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)}
.zad-ok li:hover{color:#1b1c1f}
.zad-ok li.ok{background-color:#1b1c1f;color:#fff}
.zad-ok li.on{background-size:100% 100%;color:#fff;font-weight:800}

/* giriş: başlık bloğu ekrana girince açıklama yükselir (gir0); kart alanı ekranın alt %15'ine gelince kartlar sağdan sırayla gelir, ok bandı soldan dizilir (gir) */
.zad.hz:not(.gir0) .zad-lead,.zad.hz:not(.gir) .zad-tr article,.zad.hz:not(.gir) .zad-ok li{visibility:hidden}
.zad.gir0 .zad-lead{animation:zadY .8s .15s cubic-bezier(.2,.7,.2,1) both}
.zad.gir .zad-tr article{animation:zadX 1s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.2s + var(--i)*.12s)}
.zad.gir .zad-tr figure img{animation:zadZ 1.6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i)*.12s)}
.zad.gir .zad-tr .tx{animation:zadY .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.6s + var(--i)*.12s)}
.zad.gir .zad-tr .tx::before{animation:zadS .6s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(1s + var(--i)*.12s)}
.zad.gir .zad-ok li{animation:zadO .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.5s + var(--i)*.1s)}
@keyframes zadY{from{opacity:0;transform:translateY(22px)}}
@keyframes zadX{from{opacity:0;transform:translateX(120px)}}
@keyframes zadZ{from{transform:scale(1.14)}}
@keyframes zadS{from{transform:scaleX(0)}}
@keyframes zadO{from{opacity:0;transform:translateX(-28px)}}
@media (prefers-reduced-motion:reduce){.zad.gir *{animation:none!important}}

@media (max-width:991px){
 .zad-st{padding:10vh 0 24px}
 .zad-bas{grid-template-columns:1fr;gap:16px;margin-bottom:22px}
 .zad-lead{font-size:15.5px}
 .zad-vp{height:clamp(340px,calc(100vh - 400px),460px)}
 .zad-tr{padding:0 24px;gap:14px}
 .zad-tr article{width:82vw}
 .zad-tr h3{font-size:20px}.zad-tr p{font-size:14px}
 .zad-tr .tx{left:14px;right:14px;bottom:14px;width:auto;padding:16px 18px 18px}
 .zad-ok{margin-top:18px}
 .zad-ok li{height:44px;padding:0 10px 0 22px;font-size:11px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
 .zad-ok li:first-child{padding-left:12px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
}
@media (max-width:767px){.zad-lead{display:none}.zad-ok li:not(.on){color:transparent}}
/* kart alanı ekranda kalan yüksekliği doldurur: ok bandının altında boşluk kalmaz (taşmada min, çok uzun ekranda max + ortalama) */
.zad-st{justify-content:center}
.zad-vp{flex:1 1 auto;height:auto;min-height:300px;max-height:560px}
@media (max-width:991px){.zad-vp{min-height:340px;max-height:720px}}