/* Hakkımızda "Çalıştığımız markalar" — önek .zhm (konsept markalar-konsept.html ?m=7): iki ters kayan şerit, sayfa kaydırıldıkça hızlanır */
/* üst boşluk az: Yaklaşımımız ile aynı beyaz zeminde, onun alt boşluğuna ekleniyor */
.zhm{position:relative;padding:30px 0 110px;overflow:hidden;font-family:"Plus Jakarta Sans",sans-serif;background:#fff}
.zhm .za-h{max-width:none;order:0}
/* etiket üstte tam satır; başlık ve paragraf aynı satırda, paragraf başlığın üst çizgisinden başlar */
.zhm-bas{display:grid;grid-template-columns:1.25fr 1fr;column-gap:64px;align-items:start;margin-bottom:56px}
.zhm-bas .z-ust{grid-column:1/-1}
.zhm-lead{padding-top:.5em}
.zhm-lead{margin:0;font:400 17px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55;max-width:460px}
.zhm .mq{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.zhm .mq+.mq{margin-top:14px}
.zhm .mq-i{list-style:none;margin:0;padding:0;display:flex;gap:14px;width:max-content;will-change:transform}
.zhm .mq-i li{position:relative;flex:none;display:grid;place-items:center;width:230px;height:116px;background:#f3f4f6;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
/* üst sıra: kesik sol üstte */
.zhm .mq.ust .mq-i li{clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px)}
.zhm .mq-i img{max-width:62%;max-height:54%;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .35s,opacity .35s}
/* üzerine gelince: logo renklenir, altta kırmızı çizgi soldan çizilir */
.zhm .mq-i li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.zhm .mq.ust .mq-i li::after{bottom:auto;top:0}
.zhm .mq-i li:hover img{filter:none;opacity:1}
.zhm .mq-i li:hover::after{transform:none}
/* giriş */
.zhm.hz .zhm-lead,.zhm.hz .mq{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1)}
.zhm.hz .mq:nth-of-type(1){transition-delay:.15s}.zhm.hz .mq:nth-of-type(2){transition-delay:.3s}
.zhm.gir0 .zhm-lead,.zhm.gir .mq{opacity:1;transform:none}
@media (max-width:991px){.zhm{padding:20px 0 80px}.zhm-bas{grid-template-columns:1fr;gap:16px;margin-bottom:36px}.zhm-lead{padding-top:0}.zhm .mq-i li{width:170px;height:90px}}