/* İç sayfa başlığı + sayfa yolu (konsept) — önek .zsb */
.zsb{--zk:#d61116;--zy:#1b1c1f;position:relative;font-family:"Plus Jakarta Sans",sans-serif;color:#fff;background:var(--zy);isolation:isolate;overflow:hidden}
.zsb[hidden],.zsb-alt[hidden]{display:none!important}
.zsb::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 520px at 72% 40%,rgba(255,255,255,.07),transparent 65%),repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 16px)}
.zsb-w{position:relative;max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.zsb-h{margin:0;font:800 clamp(52px,7.4vw,112px)/.95 "Plus Jakarta Sans",sans-serif;letter-spacing:-.035em;color:#fff}
.zsb-p{margin:0;max-width:520px;font:400 18px/1.6 "Plus Jakarta Sans",sans-serif;color:rgba(255,255,255,.72)}

/* sayfa yolu: Z ayraçlı */
.zsb-bc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font:500 14px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.02em}
.zsb-bc a{color:rgba(255,255,255,.62);text-decoration:none;position:relative;transition:color .25s}
.zsb-bc a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--zk);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.zsb-bc a:hover{color:#fff}.zsb-bc a:hover::after{transform:scaleX(1)}
.zsb-bc [aria-current]{color:#fff;font-weight:700}
.zs{position:relative;width:10px;height:10px;flex:none}
.zs::before,.zs::after{content:"";position:absolute;inset:0}
.zs::before{background:#878787;clip-path:polygon(0 11%,64% 11%,0 75%)}
.zs::after{background:var(--zk);clip-path:polygon(100% 0,100% 64%,36% 64%)}

/* ---------- B1 Antet ---------- */
.v1{padding:220px 0 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 72px),calc(100% - 72px) 100%,0 100%)}
.v1 .zsb-w{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-bottom:96px}
.v1 .zsb-bc{margin-bottom:34px}
.v1 .zsb-ol{position:relative;display:block;width:100%;max-width:640px;height:14px;margin:26px 0 26px}
.v1 .zsb-ol::before,.v1 .zsb-ol::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--zk)}
.v1 .zsb-ol::before{left:0}.v1 .zsb-ol::after{right:0}
.v1 .zsb-ol i{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--zk);transform-origin:left}
.v1 .zsb-ant{flex:none;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;border:1px solid rgba(255,255,255,.22);min-width:380px;background:rgba(255,255,255,.02)}
.v1 .a-z{grid-row:1/3;display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.22)}
.v1 .a-z svg{width:34px}
.v1 .a-r{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:13px 16px;gap:10px;font-size:14px}
.v1 .a-r+.a-r{border-top:1px solid rgba(255,255,255,.22)}
.v1 .a-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.v1 .a-r b{font-weight:600}

/* ---------- B2 Yarım foto + sekme ---------- */
.v2{padding:230px 0 0;min-height:560px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
.v2 .zsb-ph{position:absolute;top:0;right:0;bottom:0;width:46%;margin:0;z-index:-1;clip-path:polygon(110px 0,100% 0,100% 100%,0 100%)}
.v2 .zsb-ph img{width:100%;height:100%;object-fit:cover}
.v2 .zsb-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(27,28,31,.75),rgba(27,28,31,0) 40%)}
.v2 .zsb-tr{position:absolute;left:-1px;bottom:0;width:120px;height:120px;z-index:2;background:var(--zk);clip-path:polygon(0 100%,100% 100%,0 0)}
.v2>.zsb-w,.v2 .zsb-tab{width:100%}.v2 .zsb-l{max-width:52%}
.v2 .zsb-p{margin-top:26px}
.v2 .zsb-tab{margin-top:64px}
.v2 .zsb-tab .zsb-bc{display:inline-flex;background:#fff;padding:22px 64px 20px 0;position:relative;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.v2 .zsb-tab .zsb-bc::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:#fff}
.v2 .zsb-tab .zsb-bc a{color:#6b6f75}.v2 .zsb-tab .zsb-bc a:hover{color:var(--zy)}
.v2 .zsb-tab .zsb-bc [aria-current]{color:var(--zy)}

/* ---------- B3 Geniş foto + kesik köşe ---------- */
.v3{min-height:620px;padding:0;display:flex;align-items:flex-end;clip-path:polygon(0 0,100% 0,100% calc(100% - 110px),calc(100% - 110px) 100%,0 100%)}
.v3::before{display:none}
.v3 .zsb-ph{position:absolute;inset:0;margin:0;z-index:-1}
.v3 .zsb-ph img{width:100%;height:100%;object-fit:cover}
.v3 .zsb-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,21,23,.9),rgba(20,21,23,.25) 55%,rgba(20,21,23,.7)),linear-gradient(90deg,rgba(20,21,23,.55),transparent 60%)}
.v3 .zsb-w{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-bottom:80px}
.v3 .zsb-bc{margin-bottom:26px}
.v3 .zsb-p{max-width:420px;padding-right:90px}
.v3 .zsb-kk{position:absolute;right:0;bottom:0;width:152px;height:152px;background:var(--zk);clip-path:polygon(100% 0,100% 28px,28px 100%,0 100%)}

/* ---------- B4 Sade + sayfa içi menü ---------- */
.zsb.v4{padding:200px 0 118px}
.v4 .zsb-sr{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.v4 .zsb-bc{padding-bottom:12px}
.v4 .zsb-cz{display:block;position:relative;height:1px;margin-top:40px;background:rgba(255,255,255,.18)}
.v4 .zsb-cz i{position:absolute;left:0;top:-1px;height:3px;width:120px;background:var(--zk)}
.zsb-alt{position:sticky;top:0;z-index:15;margin-top:-56px;font-family:"Plus Jakarta Sans",sans-serif}
.zsb-alt .zsb-w{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;padding:0 32px;box-shadow:0 18px 40px -18px rgba(0,0,0,.25);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.zsb-sn{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.zsb-sn a{position:relative;padding:28px 14px 26px;font:600 15px/1 "Plus Jakarta Sans",sans-serif;color:#6b6f75;text-decoration:none;white-space:nowrap;transition:color .25s}
.zsb-sn a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--zk);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.zsb-sn a:hover,.zsb-sn a.on{color:#1b1c1f}.zsb-sn a.on::after{transform:scaleX(1)}
body[data-sb="4"] .za{padding-top:110px}

/* giriş */
.zsb.gir .zsb-h{animation:zsbY .9s cubic-bezier(.2,.7,.2,1) both .1s}
.zsb.gir .zsb-bc{animation:zsbF .7s ease both .35s}
.zsb.gir .zsb-p{animation:zsbY .9s cubic-bezier(.2,.7,.2,1) both .3s}
.zsb.gir.v1 .zsb-ol i{animation:zsbX 1s cubic-bezier(.7,0,.2,1) both .45s}
.zsb.gir.v1 .zsb-ant{animation:zsbF .8s ease both .55s}
.zsb.gir.v2 .zsb-ph{animation:zsbC 1.1s cubic-bezier(.7,0,.2,1) both}
.zsb.gir.v3 .zsb-ph img{animation:zsbS 1.6s cubic-bezier(.2,.7,.2,1) both}
.zsb.gir.v4 .zsb-cz i{animation:zsbX 1s cubic-bezier(.7,0,.2,1) both .4s}
@keyframes zsbY{from{opacity:0;transform:translateY(36px)}}
@keyframes zsbF{from{opacity:0}}
@keyframes zsbX{from{transform:scaleX(0)}}
@keyframes zsbC{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}
@keyframes zsbS{from{transform:scale(1.12)}}

/* duyarlı */
@media (max-width:1199px){.v1 .zsb-ant{display:none}.v2 .zsb-l{max-width:56%}}
@media (max-width:991px){
 .zsb-w{padding:0 24px}
 .v1{padding-top:180px}.v1 .zsb-w{padding-bottom:72px}
 .v2{padding-top:170px;min-height:0}.v2 .zsb-ph{position:relative;width:auto;height:260px;order:2;margin:40px 24px 0;clip-path:polygon(70px 0,100% 0,100% 100%,0 100%)}
 .v2 .zsb-l{max-width:none}.v2 .zsb-tab{order:3;margin-top:0}
 .v3{min-height:540px}.v3 .zsb-w{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:64px}.v3 .zsb-p{padding-right:60px}
 .zsb.v4{padding-top:170px}.v4 .zsb-sr{flex-direction:column;align-items:flex-start;gap:20px}
 .zsb-alt .zsb-w{padding:0 12px}.zsb-alt .zl{display:none}
}
@media (max-width:575px){
 .zsb-w{padding:0 16px}.zsb-p{font-size:16px}.zsb-bc{font-size:13px;gap:10px}
 .v1{padding-top:150px;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}.v1 .zsb-w{padding-bottom:56px}.v1 .zsb-bc{margin-bottom:24px}
 .v2{padding-top:150px}.v2 .zsb-ph{margin:32px 16px 0;height:210px}.v2 .zsb-tab .zsb-bc{padding:18px 40px 16px 0}
 .v3{min-height:480px;clip-path:polygon(0 0,100% 0,100% calc(100% - 60px),calc(100% - 60px) 100%,0 100%)}.v3 .zsb-kk{width:84px;height:84px;clip-path:polygon(100% 0,100% 18px,18px 100%,0 100%)}
 .zsb.v4{padding:150px 0 100px}.zsb-sn a{padding:22px 10px 20px;font-size:14px}
}