/* Markalar sayfası (markalar.html, üretici _ic/markalar.py) — önek .ms; konsept markalar-sayfa-konsept.html ?k=1 */
.ms{position:relative;z-index:1;font-family:"Plus Jakarta Sans",sans-serif;color:#1b1c1f;background:#fff;padding:120px 0 130px}
.ms .za-h{max-width:none;order:0}
.ms .mk2{position:relative;display:block;width:16px;height:16px;flex:none}
.ms .mk2 i{position:absolute;inset:0;margin:auto;width:100%;height:78.7%}
.ms .mk2 .g{background:#878787;clip-path:polygon(0 0,64% 0,0 100%)}
.ms .mk2 .r{background:#d61116;clip-path:polygon(100% 0,100% 100%,36% 100%)}

/* ortak giriş: etiket tam satır; başlık solda, açıklama + rakamlar sağda (başlığın üst çizgisinden başlar) */
.ms-bas{display:grid;grid-template-columns:1.2fr 1fr;column-gap:64px;align-items:start;margin-bottom:64px}
.ms-bas .z-ust{grid-column:1/-1}
.ms-sag{padding-top:.5em}
.ms-lead{margin:0;font:400 17px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55;max-width:500px}
.ms-say{list-style:none;margin:32px 0 0;padding:0;display:flex}
.ms-say li{padding:0 28px;border-left:1px solid #dfe2e6}
.ms-say li:first-child{padding-left:0;border-left:0}
.ms-say b{display:block;font:800 40px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#1b1c1f}
.ms-say span{display:block;margin-top:8px;font:500 14px/1.3 "Plus Jakarta Sans",sans-serif;color:#6b6f75}

/* giriş animasyonu: her içerik grubu kendi alanı ekranın alt %15'ine girince (.gir) açılır */
.ms.hz .ms-sag{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1)}
.ms.hz .ms-bas.gir .ms-sag{opacity:1;transform:none;transition-delay:.15s}

/* marka kartları: gri zeminde 4×3 kesik köşeli beyaz kartlar */
.ms1{background:#eef0f2}
.ms1-iz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ms1-iz li{position:relative;height:220px;background:#fff;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);display:grid;place-items:center;overflow:hidden}
.ms1-iz .nb{position:absolute;left:22px;top:20px;font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:#9aa0a6;letter-spacing:.04em}
.ms1-iz img{max-width:52%;max-height:40%;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .35s,opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.ms1-iz b{position:absolute;left:22px;bottom:20px;font:700 15px/1.2 "Plus Jakarta Sans",sans-serif;color:#1b1c1f}
.ms1-iz li::before{content:"";position:absolute;right:0;bottom:0;width:30px;height:30px;background:#d61116;clip-path:polygon(100% 0,100% 100%,0 100%);transform:translate(100%,100%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ms1-iz li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ms1-iz li:hover img{filter:none;opacity:1;transform:scale(1.05)}
.ms1-iz li:hover::before{transform:none}
.ms1-iz li:hover::after{transform:none}
.ms.hz .ms1-iz li{opacity:0;transform:translateY(32px);transition:opacity .7s calc(var(--i)*.05s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.05s)}
.ms.hz .ms1-iz.gir li{opacity:1;transform:none}

/* 2 · vitrin paneli + liste */

@media (max-width:1199px){.ms1-iz li{height:190px}}
@media (max-width:991px){
 .ms{padding:80px 0 90px}
 .ms-bas{grid-template-columns:1fr;row-gap:20px;margin-bottom:40px}
 .ms-sag{padding-top:0}
 .ms1-iz{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:575px){
 .ms{padding:64px 0 72px}
 .ms-say li{padding:0 18px}.ms-say b{font-size:32px}
 .ms1-iz{grid-template-columns:1fr 1fr;gap:10px}.ms1-iz li{height:150px}
 .ms1-iz .nb{left:16px;top:14px}.ms1-iz b{left:16px;bottom:14px;font-size:14px}
}
/* dokunmatikte üzerine gelme yok: logolar renkli */
@media (hover:none){.ms1-iz img{filter:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ms.hz *{transition:none!important}}

/* başlık altı ayraç: Hakkımızda Biz kimiz ile aynı (zumer-bk5.css .ay2); görünür olunca çizilir (BK_JS .ay.on) */
.ms-bas .ay{grid-column:1/-1;margin-top:30px}
.ms .ay2{display:flex;align-items:center;gap:12px}
.ms .ay2 .mk2{position:relative;display:block;width:16px;height:16px;flex:none}
.ms .ay2 .mk2 i{position:absolute;inset:0;margin:auto;width:100%;height:78.7%}
.ms .ay2 .mk2 .g{background:#878787;clip-path:polygon(0 0,64% 0,0 100%)}
.ms .ay2 .mk2 .r{background:#d61116;clip-path:polygon(100% 0,100% 100%,36% 100%)}
.ms .ay2 span{height:1px;background:#d3d7dc;flex:1;transform-origin:left;transform:scaleX(var(--ay,0));transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.ms .ay2 span:first-child{flex:0 0 80px;height:3px;background:#d61116}
.ms .ay.on{--ay:1}