/* Hakkımızda "Neler yapıyoruz" konseptleri — önek .nk (neler-yapiyoruz-konsept.html) */
.nk{position:relative;padding:120px 0;font-family:"Plus Jakarta Sans",sans-serif;background:#eef0f2;overflow:hidden}
.nk h3{font-family:"Plus Jakarta Sans",sans-serif}
.nk .za-h{max-width:none;order:0}
.nk-lead{margin:0;font:400 17px/1.7 "Plus Jakarta Sans",sans-serif;color:#4a4f55;max-width:500px}
.nk-bas{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end;margin-bottom:64px}
.nk .nb{display:block;font:700 14px/1 "Plus Jakarta Sans",sans-serif;color:#d61116;letter-spacing:.04em}
.nk .ik svg{display:block;width:100%;height:100%}
.nk .ac{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.nk .ac>p{overflow:hidden;min-height:0;margin:0}
/* kesik köşedeki kırmızı üçgen */
.nk-tr{position:absolute;top:0;right:0;width:24px;height:24px;background:#d61116;clip-path:polygon(0 0,100% 0,100% 100%);z-index:2;pointer-events:none}

/* ---------- 1 · fotoğraf değiştiren liste ---------- */
.nk1{background:#141517}
.nk1 .z-ust{color:#fff}
.nk1 .za-h .w{background-image:linear-gradient(90deg,#fff 0 var(--f,0%),#3a3d42 var(--f,0%) 100%)}
.nk1 .za-h em .w{background-image:linear-gradient(90deg,#d61116 0 var(--f,0%),#5c1d20 var(--f,0%) 100%)}
.nk1 .nk-lead{color:rgba(255,255,255,.62)}
.nk1-g{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:stretch}
.nk1-sol{position:relative;min-height:520px}
.nk1-ph{position:absolute;inset:0;margin:0;overflow:hidden;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);background:#1b1c1f}
.nk1-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .8s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.nk1-ph img.on{opacity:1;transform:none}
.nk1-cap{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:14px;background:#141517;padding:18px 48px 0 0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 100%,0 100%);font:700 16px/1.2 "Plus Jakarta Sans",sans-serif;color:#fff}
.nk1-cap b{display:grid;place-items:center;width:44px;height:44px;background:#d61116;color:#fff;font:700 14px/1 "Plus Jakarta Sans",sans-serif;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.nk1-cap em{font-style:normal;font-weight:500;font-size:14px;color:rgba(255,255,255,.45)}
.nk1-cap span{transition:opacity .25s}
.nk1-cap.sw span{opacity:0}
.nk1-sag{display:flex;flex-direction:column}
.nk1-sag .za-h{margin-bottom:22px}
.nk1-l{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.nk1-l li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:0 8px;padding:24px 0 24px 22px;border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer;outline:0;transition:background .3s}
.nk1-l li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:#d61116;transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.nk1-l li .nb{padding-top:6px;color:rgba(255,255,255,.4);transition:color .3s}
.nk1-l li h3{margin:0;font:700 24px/1.25 "Plus Jakarta Sans",sans-serif;color:rgba(255,255,255,.45);transition:color .3s}
.nk1-l li p{padding-top:10px;min-height:calc(1.65em*2 + 10px);box-sizing:border-box;font:400 15.5px/1.65 "Plus Jakarta Sans",sans-serif;color:rgba(255,255,255,.62)}
.nk1-l li:hover h3{color:rgba(255,255,255,.8)}
.nk1-l li.on::before{transform:none}
.nk1-l li.on .nb{color:#d61116}
.nk1-l li.on h3{color:#fff}
.nk1-l li.on .ac{grid-template-rows:1fr}
.nk1-l li:focus-visible{background:rgba(255,255,255,.04)}
/* otomatik geçiş çizgisi */
.nk1-l .pr{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#d61116;transform:scaleX(0);transform-origin:left;pointer-events:none}
.nk1-l li.on .pr{animation:nk1pr var(--sure,5s) linear forwards;animation-play-state:paused}
.nk1.oyn:not(.dur) .nk1-l li.on .pr{animation-play-state:running}
@keyframes nk1pr{to{transform:none}}

/* madde dokunuşları: numara kutusu, ikon kutusu, aktif zemin */
.nk1-l li{grid-template-columns:52px 1fr 52px;align-items:start}
.nk1-l li::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,17,22,.13),rgba(214,17,22,0) 72%);opacity:0;transition:opacity .5s;pointer-events:none}
.nk1-l li.on::after{opacity:1}
.nk1-l li .nb{display:grid;place-items:center;width:34px;height:34px;padding:0;margin-top:-2px;box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);font-size:13px;transition:color .3s,background .3s,box-shadow .3s}
.nk1-l li.on .nb{background:#d61116;color:#fff;box-shadow:none}
.nk1-l li h3{transition:color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.nk1-l li:not(.on):hover h3{transform:translateX(6px)}
.nk1-l li:not(.on):hover{background:rgba(255,255,255,.03)}
.nk1-l li .mi{justify-self:end;width:30px;height:30px;margin:2px 6px 0 0;color:rgba(255,255,255,.28);transition:color .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.nk1-l li .mi svg{display:block;width:100%;height:100%;fill:currentColor}
.nk1-l li:not(.on):hover .mi{color:rgba(255,255,255,.6)}
.nk1-l li.on .mi{color:#d61116;transform:translateY(-2px)}
@media (max-width:575px){.nk1-l li{grid-template-columns:42px 1fr 34px}.nk1-l li .mi{width:24px;height:24px}.nk1-l li .nb{width:30px;height:30px}}

/* ---------- 2 · koyu bant + 4 sütun ---------- */
.nk2{background:#141517}
.nk2 .z-ust{color:#fff}
.nk2 .za-h .w{background-image:linear-gradient(90deg,#fff 0 var(--f,0%),#3a3d42 var(--f,0%) 100%)}
.nk2 .za-h em .w{background-image:linear-gradient(90deg,#d61116 0 var(--f,0%),#5c1d20 var(--f,0%) 100%)}
.nk2 .nk-lead{color:rgba(255,255,255,.62)}
.nk2-g{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.nk2-g article{position:relative;padding:48px 34px 52px;border-left:1px solid rgba(255,255,255,.12);transition:background .4s}
.nk2-g article:last-child{border-right:1px solid rgba(255,255,255,.12)}
.nk2-g article::before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:3px;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.nk2-g article:hover{background:rgba(255,255,255,.035)}
.nk2-g article:hover::before{transform:none}
.nk2-g .ik{display:block;width:60px;height:60px;margin-bottom:56px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nk2-g article:hover .ik{transform:translateY(-6px)}
.nk2-g .nb{margin-bottom:14px}
.nk2-g h3{margin:0 0 12px;font:700 21px/1.25 "Plus Jakarta Sans",sans-serif;color:#fff}
.nk2-g p{margin:0;font:400 15px/1.65 "Plus Jakarta Sans",sans-serif;color:rgba(255,255,255,.6)}
/* giriş: sütunlar sırayla yükselir */
.nk2-g article>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease calc(var(--i)*.12s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.12s)}
.nk2-g.on article>*{opacity:1;transform:none}
.nk2-g.on article:hover .ik{transform:translateY(-6px)}

/* ---------- 3 · büyük satırlar ---------- */
.nk3-l{border-top:1px solid #c9ced3}
.nk3-r{position:relative;display:grid;grid-template-columns:170px minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:38px 0;border-bottom:1px solid #c9ced3}
.nk3-r::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#d61116;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.nk3-r .nb{font:800 92px/.9 "Plus Jakarta Sans",sans-serif;letter-spacing:-.045em;color:#d2d6db;transition:color .35s}
.nk3-r h3{margin:0;font:800 clamp(26px,2.5vw,38px)/1.12 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#1b1c1f;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nk3-r p{margin:0;font:400 16px/1.7 "Plus Jakarta Sans",sans-serif;color:#5d6268;max-width:430px}
.nk3-r:hover::after{transform:none}
.nk3-r:hover .nb{color:#d61116}
.nk3-r:hover h3{transform:translateX(14px)}
.nk3-ph{position:fixed;left:0;top:0;z-index:30;width:300px;height:210px;pointer-events:none;opacity:0;transition:opacity .3s ease}
.nk3-ph figure{position:relative;margin:0;width:100%;height:100%;overflow:hidden;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);transform:scale(.85);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nk3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.nk3-ph img.on{opacity:1}
.nk3-ph.on{opacity:1}.nk3-ph.on figure{transform:none}
@media (hover:none),(pointer:coarse){.nk3-ph{display:none}}

/* ---------- 4 · 2×2 fotoğraflı kartlar ---------- */
.nk4-g{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.nk4-k{position:relative;height:420px;color:#fff}
.nk4-k figure{position:absolute;inset:0;margin:0;overflow:hidden;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);background:#1b1c1f}
.nk4-k figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nk4-k figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.1) 30%,rgba(20,21,23,.86) 100%);transition:background .5s}
.nk4-k .ik{position:absolute;left:32px;top:32px;z-index:2;display:block;width:60px;height:60px;padding:12px;box-sizing:border-box;background:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.nk4-a{position:absolute;left:36px;right:36px;bottom:34px;z-index:2}
.nk4-a .nb{margin-bottom:12px;color:rgba(255,255,255,.75)}
.nk4-a h3{margin:0;font:800 clamp(24px,2.2vw,32px)/1.15 "Plus Jakarta Sans",sans-serif;letter-spacing:-.018em;color:#fff}
.nk4-a p{padding-top:12px;max-width:440px;font:400 15.5px/1.6 "Plus Jakarta Sans",sans-serif;color:rgba(255,255,255,.8);transform:translateY(14px);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s}
.nk4-k:hover figure img{transform:scale(1.06)}
.nk4-k:hover figure::after{background:linear-gradient(180deg,rgba(20,21,23,.3) 0%,rgba(20,21,23,.92) 100%)}
.nk4-k:hover .ac{grid-template-rows:1fr}
.nk4-k:hover .ac p{transform:none;opacity:1}
@media (hover:none){.nk4-k .ac{grid-template-rows:1fr}.nk4-k .ac p{transform:none;opacity:1}}

/* ---------- duyarlı ---------- */
@media (max-width:1199px){
 .nk1-g{gap:56px}.nk1-l li p{min-height:calc(1.65em*3 + 10px)}
 .nk2-g{grid-template-columns:repeat(2,1fr)}.nk2-g article{border-bottom:1px solid rgba(255,255,255,.12)}.nk2-g article:nth-child(2){border-right:1px solid rgba(255,255,255,.12)}.nk2-g{border-bottom:0}
 .nk3-r{grid-template-columns:130px 1fr 1fr}.nk3-r .nb{font-size:72px}
}
@media (max-width:991px){
 .nk{padding:90px 0}
 .nk-bas{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
 .nk1-g{grid-template-columns:1fr;gap:44px}.nk1-sag{order:-1}.nk1-sol{min-height:440px}
 .nk3-r{grid-template-columns:90px 1fr;gap:10px 20px;padding:30px 0}.nk3-r .nb{font-size:56px;grid-row:span 2}.nk3-r p{grid-column:2}
 .nk4-g{grid-template-columns:1fr}.nk4-k{height:380px}
}
@media (max-width:575px){
 .nk{padding:72px 0}
 .nk-lead{font-size:16px}
 .nk1-sol{min-height:320px}.nk1-l li{padding:20px 0 20px 16px;grid-template-columns:40px 1fr}.nk1-l li h3{font-size:20px}
 .nk2-g{grid-template-columns:1fr}.nk2-g article{border-right:1px solid rgba(255,255,255,.12);padding:34px 26px 36px}.nk2-g .ik{width:52px;height:52px;margin-bottom:30px}
 .nk3-r{grid-template-columns:1fr;gap:10px}.nk3-r .nb{font-size:44px;grid-row:auto}.nk3-r p{grid-column:auto}.nk3-r:hover h3{transform:none}
 .nk4-k{height:360px}.nk4-k .ik{left:24px;top:24px;width:52px;height:52px;padding:10px}.nk4-a{left:24px;right:24px;bottom:26px}
}
@media (prefers-reduced-motion:reduce){.nk *{transition:none!important}}

/* 1 · giriş (diğer bölümlerle aynı dil ve eşik): metin sütunu ekrana girince etiket ve açıklama yükselir (gir0), liste kendi alanı girince maddeler sırayla yükselir (gir1); foto kendi alanı girince soldan açılır, etiketi soldan kayar (gir). Mobilde foto listenin altında, kendi sırası gelince açılır. Otomatik geçiş girişten sonra başlar */
.nk1.hz:not(.gir) .nk1-ph,.nk1.hz:not(.gir) .nk1-cap,.nk1.hz:not(.gir) .nk-tr,.nk1.hz:not(.gir0) .nk1-sag>*:not(.za-h):not(.nk1-l),.nk1.hz:not(.gir1) .nk1-l li{visibility:hidden}
.nk1.gir .nk1-ph{animation:nkAc 1.1s cubic-bezier(.7,0,.2,1) both}
.nk1.gir .nk1-ph img.on{animation:nkZ 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes nkZ{from{transform:scale(1.14)}}
.nk1.gir .nk1-cap{animation:nkX .7s .8s cubic-bezier(.2,.7,.2,1) both}
.nk1.gir .nk-tr{animation:nkTr .6s .9s cubic-bezier(.2,.7,.2,1) both}
.nk1.gir0 .nk1-sag>.z-ust{animation:nkY .8s .2s cubic-bezier(.2,.7,.2,1) both}
.nk1.gir0 .nk1-sag>.nk-lead{animation:nkY .8s .35s cubic-bezier(.2,.7,.2,1) both}
.nk1.gir1 .nk1-l li{animation:nkY .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0)*.1s)}
/* başlangıç çokgeni fotoğrafın kesik köşeli çokgeniyle aynı nokta sayısında (5) olmalı, yoksa tarayıcı ara kare çizmez, foto birden çıkar */
@keyframes nkAc{from{clip-path:polygon(0 0,0 0,0 0,0 100%,0 100%)}}
@keyframes nkX{from{opacity:0;transform:translateX(-24px)}}
@keyframes nkTr{from{opacity:0;transform:translate(24px,-24px)}}
@keyframes nkY{from{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.nk1.gir *,.nk1.gir0 *,.nk1.gir1 *{animation:none!important}}