/* Hizmetler sayfası konseptleri (hizmetler-sayfa-konsept.html, üretici _ic/hzs-konsept.py) — önek .hzs */
.hzs{position:relative;z-index:1;font-family:"Plus Jakarta Sans",sans-serif;color:#1b1c1f;background:#fff;padding:120px 0 130px}
.hzs .za-h{max-width:none;order:0}
.hzs .mk2{position:relative;display:block;width:16px;height:16px;flex:none}
.hzs .mk2 i{position:absolute;inset:0;margin:auto;width:100%;height:78.7%}
.hzs .mk2 .g{background:#878787;clip-path:polygon(0 0,64% 0,0 100%)}
.hzs .mk2 .r{background:#d61116;clip-path:polygon(100% 0,100% 100%,36% 100%)}
.hzs .mi{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;color:#d61116}
.hzs .mi svg{width:100%;height:100%;fill:currentColor}

/* ortak giriş: etiket tam satır; başlık solda, açıklama sağda (başlığın üst çizgisinden) */
.hzs-bas{display:grid;grid-template-columns:1.2fr 1fr;column-gap:64px;align-items:start;margin-bottom:72px}
.hzs-bas .z-ust{grid-column:1/-1}
.hzs-sag{padding-top:.5em}
/* başlık altı ayraç: Hakkımızda Biz kimiz ile aynı (zumer-bk5.css .ay2); görünür olunca çizilir */
.hzs-bas .ay{grid-column:1/-1;margin-top:30px}
.hzs .ay2{display:flex;align-items:center;gap:12px}
.hzs .ay2 span{height:1px;background:#e3e6e9;flex:1}.hzs .ay2 span:first-child{flex:0 0 80px;height:3px;background:#d61116}
.hzs .ay2 span{transform-origin:left;transform:scaleX(var(--ay,0));transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.hzs .ay.on{--ay:1}
.hzs-lead{margin:0;font:400 17px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55;max-width:520px}
.hzs.hz .hzs-sag{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1)}
.hzs.hz .hzs-bas.gir .hzs-sag{opacity:1;transform:none;transition-delay:.15s}

/* ortak metin parçaları */
.hzs h3{margin:0;font:800 30px/1.15 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#1b1c1f}
.hzs p{margin:0;font:400 16px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55}
.hzs .nb{font:600 13px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;color:#d61116}
.hzs .nb em{font-style:normal;color:#9aa0a6;margin-left:6px}
.hzs-md{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hzs-md li{display:flex;align-items:center;gap:12px;font:600 15px/1.4 "Plus Jakarta Sans",sans-serif;color:#1b1c1f}
.hzs-md .mk2{width:12px;height:12px}

/* 1 · sıralı bloklar: foto + üstüne binen açık gri metin kartı */
.hzs1-l{display:grid;gap:120px}
.hzs1-r{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.hzs1-r.ters{grid-template-columns:1fr 1.1fr}
.hzs1-r.ters .hzs1-ph{order:2}
/* foto: kesik köşe, arkada kayık ince çerçeve, köşede logo üçgeni, altta etiket; içte parallax + hover yakınlaşma */
.hzs1-ph{position:relative;margin:0;height:500px}
.hzs1-ph .im{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.hzs1-r.ters .hzs1-ph .im{clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px))}
.hzs1-ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0)) scale(var(--sc,1));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hzs1-r:hover .hzs1-ph img{--sc:1.04}
.hzs1-ph .fr{position:absolute;top:28px;left:-28px;right:28px;bottom:-28px;border:1px solid #d6dade}
.hzs1-r.ters .hzs1-ph .fr{left:28px;right:-28px}
.hzs1-ph .tr{position:absolute;left:-16px;top:-16px;width:64px;height:64px;background:#d61116;clip-path:polygon(0 0,100% 0,0 100%);z-index:1}
.hzs1-r.ters .hzs1-ph .tr{left:auto;right:-16px;background:#878787;clip-path:polygon(0 0,100% 0,100% 100%)}
.hzs1-ph .et{position:absolute;left:0;bottom:0;z-index:1;display:flex;align-items:center;gap:10px;padding:14px 34px 14px 22px;background:#fff;font:600 13px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.04em;color:#1b1c1f;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.hzs1-ph .et .mk2{width:12px;height:12px}
.hzs1-r.ters .hzs1-ph .et{left:auto;right:0;padding:14px 22px 14px 34px;clip-path:polygon(16px 0,100% 0,100% 100%,0 100%)}
/* metin kartı: fotoğrafın kenarına biner; dev silik numara, üst kırmızı çizgi, sağ alt kesik + kırmızı üçgen */
.hzs1-tx{position:relative;z-index:2;display:grid;gap:20px;justify-items:start;margin-left:-72px;padding:52px 56px 58px;background:#f4f5f7;overflow:hidden}
.hzs1-r.ters .hzs1-tx{margin-left:0;margin-right:-72px}
.hzs1-tx::before{content:"";position:absolute;left:0;top:0;width:96px;height:4px;background:#d61116;transform-origin:left}
.hzs1-tx::after{content:"";position:absolute;right:0;bottom:0;z-index:1;width:30px;height:30px;background:#d61116;clip-path:polygon(100% 0,100% 100%,0 100%)}
.hzs1-tx>*{position:relative;z-index:1}
.hzs1-tx .bn{position:absolute;right:44px;bottom:-34px;z-index:0;font:800 150px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.05em;color:#e7e9ec;pointer-events:none}
.hzs1-ust{display:flex;align-items:center;gap:14px}
.hzs1-ust .cz{width:40px;height:1px;background:#c5c9ce}
.hzs1-ust .hz{font:500 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b6f75}
.hzs1-ad{display:flex;align-items:center;gap:14px}
.hzs1-ad .mi{width:30px;height:30px}
/* maddeler: beyaz kesik köşeli çipler */
.hzs1-tx .hzs-md{display:flex;flex-wrap:wrap;gap:8px}
.hzs1-tx .hzs-md li{position:relative;gap:10px;padding:11px 18px 11px 14px;background:#fff;font-size:14px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);overflow:hidden}
.hzs1-tx .hzs-md li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hzs1-tx .hzs-md li:hover::after{transform:none}
.hzs1-tx .zl{margin-top:8px}
/* giriş: foto soldan (terste sağdan) açılır, çerçeve kayar, kart yanından gelir, içerik sırayla yükselir */
.hzs.hz .hzs1-ph .im{clip-path:polygon(0 0,0 0,0 40px,0 100%,0 100%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.hzs.hz .hzs1-r.ters .hzs1-ph .im{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 100%)}
.hzs.hz .hzs1-r.gir .hzs1-ph .im{clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.hzs.hz .hzs1-r.ters.gir .hzs1-ph .im{clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px))}
.hzs.hz .hzs1-ph .fr{opacity:0;transform:translate(28px,-28px);transition:opacity .8s .5s,transform 1s cubic-bezier(.2,.7,.2,1) .5s}
.hzs.hz .hzs1-r.ters .hzs1-ph .fr{transform:translate(-28px,-28px)}
.hzs.hz .hzs1-r.gir .hzs1-ph .fr{opacity:1;transform:none}
.hzs.hz .hzs1-ph .tr{transform:scale(0);transform-origin:left top;transition:transform .6s cubic-bezier(.2,.7,.2,1) .8s}
.hzs.hz .hzs1-r.ters .hzs1-ph .tr{transform-origin:right top}
.hzs.hz .hzs1-r.gir .hzs1-ph .tr{transform:none}
.hzs.hz .hzs1-ph .et{transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.7,.2,1) .9s}
.hzs.hz .hzs1-r.gir .hzs1-ph .et{transform:none}
.hzs.hz .hzs1-tx{opacity:0;transform:translateX(48px);transition:opacity .8s .3s,transform 1s cubic-bezier(.2,.7,.2,1) .3s}
.hzs.hz .hzs1-r.ters .hzs1-tx{transform:translateX(-48px)}
.hzs.hz .hzs1-r.gir .hzs1-tx{opacity:1;transform:none}
.hzs.hz .hzs1-tx::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1) .8s}
.hzs.hz .hzs1-r.gir .hzs1-tx::before{transform:none}
.hzs.hz .hzs1-tx>:not(.bn){opacity:0;transform:translateY(20px);transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1)}
.hzs.hz .hzs1-r.gir .hzs1-tx>:not(.bn){opacity:1;transform:none}
.hzs.hz .hzs1-r.gir .hzs1-tx>:nth-child(2){transition-delay:.5s}
.hzs.hz .hzs1-r.gir .hzs1-tx>:nth-child(3){transition-delay:.58s}
.hzs.hz .hzs1-r.gir .hzs1-tx>:nth-child(4){transition-delay:.66s}
.hzs.hz .hzs1-r.gir .hzs1-tx>:nth-child(5){transition-delay:.74s}
.hzs.hz .hzs1-r.gir .hzs1-tx>:nth-child(6){transition-delay:.82s}
.hzs.hz .hzs1-tx .bn{opacity:0;transform:translateY(30px);transition:opacity 1s .6s,transform 1.2s cubic-bezier(.2,.7,.2,1) .6s}
.hzs.hz .hzs1-r.gir .hzs1-tx .bn{opacity:1;transform:none}

/* 2 · sabit dizin + kayan kartlar */
.hzs2{background:#eef0f2}
.hzs2-g{display:grid;grid-template-columns:300px 1fr;column-gap:64px;align-items:start}
.hzs2-d{align-self:stretch}
.hzs2-st{position:sticky;top:130px}
.hzs2-db{display:block;margin-bottom:18px;font:500 13px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b6f75}
.hzs2-d ol{list-style:none;margin:0;padding:0;border-top:1px solid #d6dade}
.hzs2-d li{border-bottom:1px solid #d6dade}
.hzs2-d a{position:relative;display:flex;align-items:center;gap:16px;padding:20px 0;text-decoration:none;color:#6b6f75;transition:color .3s}
.hzs2-d a b{font:700 18px/1.3 "Plus Jakarta Sans",sans-serif;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hzs2-d a .nb{color:#9aa0a6;transition:color .3s}
.hzs2-d .pr{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hzs2-d a:hover{color:#1b1c1f}.hzs2-d a:hover b{transform:translateX(6px)}
.hzs2-d a.on{color:#1b1c1f}.hzs2-d a.on .nb{color:#d61116}.hzs2-d a.on .pr{transform:none}
.hzs2-l{display:grid;gap:32px}
.hzs2-k{scroll-margin-top:130px;background:#fff;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.hzs2-k figure{position:relative;margin:0;height:300px;overflow:hidden}
.hzs2-k figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hzs2-k:hover figure img{transform:scale(1.04)}
.hzs2-k .et{position:absolute;left:0;bottom:0;padding:12px 22px 12px 40px;background:#fff;font:600 13px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.04em;color:#1b1c1f;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.hzs2-tx{display:grid;gap:20px;justify-items:start;padding:36px 44px 44px}
.hzs2-ad{display:flex;align-items:center;gap:16px;width:100%}
.hzs2-ad h3{flex:1}
.hzs2-tx .hzs-md{grid-template-columns:repeat(3,auto);column-gap:28px}
.hzs.hz .hzs2-k{opacity:0;transform:translateY(40px);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}
.hzs.hz .hzs2-k.gir{opacity:1;transform:none}
.hzs.hz .hzs2-d{opacity:0;transition:opacity .8s .2s}
.hzs.hz .hzs2-d.gir{opacity:1}

/* 3 · sekmeler + panel */
.hzs3{background:#eef0f2}
.hzs3-t{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hzs3-t button{position:relative;width:100%;display:flex;align-items:center;gap:14px;padding:20px 22px;border:0;background:#fff;text-align:left;cursor:pointer;color:#1b1c1f;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);transition:background .35s,color .35s}
.hzs3-t button b{display:block;font:700 16px/1.25 "Plus Jakarta Sans",sans-serif}
.hzs3-t button small{display:block;margin-top:4px;font:500 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#6b6f75;transition:color .35s}
.hzs3-t button::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)}
.hzs3-t button:hover::after{transform:none}
.hzs3-t button.on{background:#1b1c1f;color:#fff}
.hzs3-t button.on small{color:#a9aeb4}
.hzs3-t button.on::after{transform:none}
.hzs3-t button:focus-visible{outline:2px solid #d61116;outline-offset:3px}
.hzs3-ps{position:relative;background:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.hzs3-p{display:none;grid-template-columns:1fr 1fr;min-height:500px}
.hzs3-p.on{display:grid;animation:hzsP .6s cubic-bezier(.2,.7,.2,1)}
.hzs3-p figure{position:relative;margin:0;overflow:hidden}
.hzs3-p figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:hzsF 1.1s cubic-bezier(.2,.7,.2,1)}
.hzs3-p .tr{position:absolute;left:0;top:0;width:56px;height:56px;background:#d61116;clip-path:polygon(0 0,100% 0,0 100%)}
.hzs3-tx{display:grid;gap:22px;align-content:center;justify-items:start;padding:56px 64px}
.hzs3-tx h3{font-size:34px}
@keyframes hzsP{from{opacity:0}to{opacity:1}}
@keyframes hzsF{from{transform:scale(1.08)}to{transform:none}}
.hzs.hz .hzs3-g{opacity:0;transform:translateY(40px);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}
.hzs.hz .hzs3-g.gir{opacity:1;transform:none}

/* 4 · teknik föy */
.hzs4{background:#eef0f2;background-image:linear-gradient(rgba(27,28,31,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(27,28,31,.05) 1px,transparent 1px);background-size:32px 32px}
.hzs4-iz{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hzs4-k{display:flex;flex-direction:column;background:#fff;border:1px solid #d6dade;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.hzs4-ust{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #d6dade;font:600 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.1em;color:#6b6f75}
.hzs4-ust .mi{width:22px;height:22px;margin-right:18px}
.hzs4-k figure{margin:0;height:220px;overflow:hidden;border-bottom:1px solid #d6dade}
.hzs4-k figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .9s cubic-bezier(.2,.7,.2,1)}
.hzs4-k:hover figure img{filter:none;transform:scale(1.04)}
.hzs4-tx{display:grid;gap:18px;padding:30px 30px 26px;flex:1;align-content:start}
.hzs4-tx h3{font-size:26px}
.hzs4-tb{width:100%;border-collapse:collapse;margin-top:6px}
.hzs4-tb caption{caption-side:top;text-align:left;padding-bottom:10px;font:600 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6f75}
.hzs4-tb td,.hzs4-tb th{padding:11px 0;border-top:1px dashed #cfd3d8;vertical-align:middle}
.hzs4-tb tr:last-child td,.hzs4-tb tr:last-child th{border-bottom:1px dashed #cfd3d8}
.hzs4-tb td:first-child{width:44px;font:600 13px/1 "Plus Jakarta Sans",sans-serif;color:#d61116}
.hzs4-tb th{text-align:left;font:600 15px/1.4 "Plus Jakarta Sans",sans-serif;color:#1b1c1f}
.hzs4-tb td:last-child{width:24px}
.hzs4-tb svg{display:block;width:18px;height:18px;fill:#1b1c1f}
.hzs4-alt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-top:1px solid #d6dade;background:#f7f8f9;font:600 11px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;color:#9aa0a6}
.hzs4-alt .zl{padding-bottom:5px;letter-spacing:0;font:600 14px/1.35 "Plus Jakarta Sans",sans-serif;color:#1b1c1f}
.hzs.hz .hzs4-k{opacity:0;transform:translateY(40px) rotate(-1deg);transition:opacity .8s calc(var(--i)*.12s),transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.12s)}
.hzs.hz .hzs4-k.gir{opacity:1;transform:none}

@media (max-width:1199px){
 .hzs1-ph{height:440px}
 .hzs1-tx{padding:44px 44px 50px}.hzs1-tx .bn{font-size:120px;bottom:-26px}
 .hzs2-g{grid-template-columns:240px 1fr;column-gap:40px}
 .hzs2-tx .hzs-md{grid-template-columns:1fr}
 .hzs3-t button{padding:18px 16px;gap:10px}.hzs3-t button small{display:none}
 .hzs3-tx{padding:44px 44px}
 .hzs4-tx{padding:26px 24px 22px}
}
@media (max-width:991px){
 .hzs{padding:80px 0 90px}
 .hzs-bas{grid-template-columns:1fr;row-gap:20px;margin-bottom:48px}
 .hzs-sag{padding-top:0}
 .hzs h3{font-size:26px}
 .hzs1-l{gap:80px}
 .hzs1-r,.hzs1-r.ters{grid-template-columns:1fr}
 .hzs1-r.ters .hzs1-ph{order:0}
 .hzs1-ph{height:400px;margin-right:20px}
 .hzs1-r.ters .hzs1-ph{margin-right:0;margin-left:20px}
 .hzs1-ph .fr{top:20px;left:-20px;right:20px;bottom:-20px}
 .hzs1-r.ters .hzs1-ph .fr{left:20px;right:-20px}
 /* kart fotoğrafın hemen altında, fotoyla aynı genişlikte; etiket fotoğrafın alt kenarında kalır */
 .hzs1-tx{margin:0 20px 0 0}.hzs1-r.ters .hzs1-tx{margin:0 0 0 20px}
 .hzs.hz .hzs1-tx,.hzs.hz .hzs1-r.ters .hzs1-tx{transform:translateY(40px)}
 .hzs.hz .hzs1-r.gir .hzs1-tx,.hzs.hz .hzs1-r.ters.gir .hzs1-tx{transform:none}
 .hzs2-g{grid-template-columns:1fr}
 .hzs2-d{display:none}
 .hzs3-t{grid-template-columns:1fr 1fr}
 .hzs3-t button small{display:block}
 .hzs3-p{grid-template-columns:1fr;min-height:0}
 .hzs3-p figure{height:340px}
 .hzs3-tx h3{font-size:28px}
 .hzs4-iz{grid-template-columns:1fr}
}
@media (max-width:575px){
 .hzs{padding:64px 0 72px}
 .hzs h3,.hzs3-tx h3{font-size:24px}
 .hzs1-ph{height:280px;margin-right:16px}
 .hzs1-r.ters .hzs1-ph{margin-left:16px}
 .hzs1-ph .fr{top:16px;left:-16px;right:16px;bottom:-16px}
 .hzs1-r.ters .hzs1-ph .fr{left:16px;right:-16px}
 .hzs1-ph .tr{width:44px;height:44px;left:-8px;top:-8px}
 .hzs1-r.ters .hzs1-ph .tr{right:-8px}
 .hzs1-ph .et{padding:11px 26px 11px 16px;font-size:12px}
 .hzs1-tx{margin:0 16px 0 0;padding:34px 24px 38px}.hzs1-r.ters .hzs1-tx{margin:0 0 0 16px}
 .hzs1-tx .bn{font-size:90px;right:30px;bottom:-18px}
 .hzs2-k figure{height:220px}
 .hzs2-tx{padding:26px 22px 30px}
 .hzs3-t{gap:8px}
 .hzs3-t button{padding:14px 12px;flex-direction:column;align-items:flex-start;gap:8px}
 .hzs3-t button b{font-size:14px}.hzs3-t button small{display:none}
 .hzs3-p figure{height:240px}
 .hzs3-tx{padding:30px 22px 40px}
 .hzs4-k figure{height:180px}
 .hzs4-alt span:first-child{display:none}
}
@media (hover:none){.hzs4-k figure img{filter:none}}
@media (prefers-reduced-motion:reduce){.hzs.hz *,.hzs3-p,.hzs3-p figure img{transition:none!important;animation:none!important}}