/* Hakkımızda "Yaklaşımımız" — önek .yt (konsept yaklasimimiz-konsept3.html ?y=1; tema homepage-6 About uyarlaması) */
.yt{position:relative;padding:120px 0;font-family:"Plus Jakarta Sans",sans-serif;background:#fff}
.yt .za-h{max-width:none;order:0}
.yt-g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:80px;align-items:center}
/* sol: kesik köşeli büyük foto, köşelerde logo üçgenleri */
.yt-sol{position:relative;height:clamp(520px,48vw,700px)}
.yt-ph{position:absolute;inset:0;margin:0;overflow:hidden;clip-path:polygon(0 0,calc(100% - 130px) 0,100% 130px,100% 100%,130px 100%,0 calc(100% - 130px))}
.yt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .8s,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.yt-ph img.on{opacity:1;transform:none}
.yt-sol .tr{position:absolute;width:104px;height:104px}
.yt-sol .tr.r{right:0;top:0;background:#d61116;clip-path:polygon(0 0,100% 0,100% 100%)}
.yt-sol .tr.g{left:0;bottom:0;background:#878787;clip-path:polygon(0 0,100% 100%,0 100%)}
/* sağ */
.yt .yt-lead{margin:26px 0 44px;font:600 19px/1.6 "Plus Jakarta Sans",sans-serif;color:#1b1c1f;max-width:520px}
.yt .yt-lead u{text-decoration:none;color:#d61116;background:linear-gradient(#d61116,#d61116) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.yt-tb [data-i]{transition:opacity .45s,transform .45s}
.yt .say{font:700 14px/1 "Plus Jakarta Sans",sans-serif;color:#9aa0a6}.yt .say b{color:#d61116}
.yt .sz{display:block;margin-bottom:10px;font:500 12.5px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#d61116}
.yt p{margin:0;font:400 15.5px/1.7 "Plus Jakarta Sans",sans-serif;color:#5d6268}
.yt .pr{position:relative;display:block;height:2px;background:#e3e6e9;overflow:hidden}
.yt .pr b{position:absolute;inset:0;background:#d61116;transform-origin:left;transform:scaleX(0)}
.yt [data-i].on .pr b{transform:scaleX(var(--p,0))}
.yt button{font-family:inherit;cursor:pointer}

/* 1 · temaya yakın: yatay sekmeler, altta ferah metin + foto */
.yt1 .yt-g{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:72px}
.yt1 .sk{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.yt1 .sk li{padding:0}
.yt1 .sk button{display:block;width:100%;padding:0 0 14px;background:none;border:0;text-align:left;white-space:nowrap;font:700 15px/1.2 "Plus Jakarta Sans",sans-serif;color:#9aa0a6;transition:color .3s}
.yt1 .sk li.on button,.yt1 .sk button:hover{color:#1b1c1f}
.yt1 .gv{display:grid;grid-template-columns:1fr 250px;gap:36px;align-items:stretch}
.yt1 .mt{display:grid;grid-template-rows:auto 1fr auto}
.yt1 .kb,.yt1 .mt-p{display:grid}
.yt1 .kb>*{grid-area:1/1}
.yt1 .kb b{font:800 26px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.01em;color:#1b1c1f;opacity:0;transform:translateY(8px);margin-bottom:14px}
.yt1 .kb b.on{opacity:1;transform:none}
.yt1 .mt>p{grid-row:2;grid-column:1;font-size:16px;opacity:0;transform:translateY(10px)}
.yt1 .mt>p.on{opacity:1;transform:none}
.yt1 .mt .say{grid-row:3;margin-top:22px}
.yt1 .kf{position:relative;display:grid;margin:0;height:240px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.yt1 .kf img{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06)}
.yt1 .kf img.on{opacity:1;transform:none}

/* foto: sola biraz taşar; arkasında sağ-alta kayık kırmızı katman; kaydırınca hafif parallax */
.yt-sol{margin-left:-64px}
.yt-sol::before{content:"";position:absolute;inset:0;transform:translate(16px,16px);background:#d61116;clip-path:polygon(0 0,calc(100% - 130px) 0,100% 130px,100% 100%,130px 100%,0 calc(100% - 130px))}
.yt-ph img{top:-8%;bottom:-8%;height:116%;translate:0 var(--py,0px)}
.yt-sol .tr.g{left:0}

/* giriş: foto kendi alanı girince soldan açılır, üçgenler köşelerden gelir (gir); sağ sütun kendi alanı girince sırayla yükselir (gir0) — mobilde foto üstte, metin altta olduğu için ayrı tetiklenir */
.yt.hz:not(.gir) .yt-ph,.yt.hz:not(.gir) .yt-sol::before,.yt.hz:not(.gir) .yt-sol .tr,.yt.hz:not(.gir0) .yt-sag>*:not(.za-h){visibility:hidden}
.yt.gir .yt-ph{animation:ytAc 1.1s cubic-bezier(.7,0,.2,1) both}
.yt.gir .yt-sol::before{animation:ytKt .8s .7s cubic-bezier(.2,.7,.2,1) both}
.yt.gir .yt-sol .tr.r{animation:ytTr 0.7s .9s cubic-bezier(.2,.7,.2,1) both;--tx:40px;--ty:-40px}
.yt.gir .yt-sol .tr.g{animation:ytTr 0.7s 1s cubic-bezier(.2,.7,.2,1) both;--tx:-40px;--ty:40px}
.yt.gir0 .yt-sag>*:not(.za-h){animation:ytY .8s cubic-bezier(.2,.7,.2,1) both}
.yt.gir0 .yt-sag>.z-ust{animation-delay:.2s}.yt.gir0 .yt-sag>.yt-lead{animation-delay:.35s}.yt.gir0 .yt-sag>.yt-tb{animation-delay:.5s}
@keyframes ytAc{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ytKt{from{opacity:0;transform:translate(0,0)}}
@keyframes ytTr{from{opacity:0;transform:translate(var(--tx),var(--ty))}}
@keyframes ytY{from{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.yt.gir *,.yt.gir0 *,.yt.gir .yt-sol::before{animation:none!important}}

@media (max-width:1199px){.yt-g,.yt1 .yt-g{gap:48px}.yt1 .gv{grid-template-columns:1fr 200px}}
@media (max-width:991px){
 .yt{padding:90px 0}
 .yt-g,.yt1 .yt-g{grid-template-columns:1fr;gap:44px}
 .yt-sol{height:420px;margin-left:-24px;margin-right:16px}
 .yt-ph,.yt-sol::before{clip-path:polygon(0 0,calc(100% - 80px) 0,100% 80px,100% 100%,80px 100%,0 calc(100% - 80px))}
 .yt-sol::before{transform:translate(10px,10px)}
 .yt-sol .tr{width:64px;height:64px}
 .yt .yt-lead{font-size:17px;margin:20px 0 32px}
 .yt1 .sk{gap:12px}.yt1 .sk button{white-space:normal;font-size:13px}.yt1 .gv{grid-template-columns:1fr}.yt1 .kf{height:200px}
}
.yt-sag{min-width:0}

/* küçük foto tablette basık durmasın: 576–991 metnin yanında, mobilde 4:3 */
@media (min-width:576px) and (max-width:991px){.yt1 .gv{grid-template-columns:1fr 240px;gap:28px}.yt1 .kf{height:260px}}
@media (max-width:575px){.yt1 .kf{height:auto;aspect-ratio:4/3}}
/* Markalar aynı beyaz zeminde devam ettiği için alt boşluk kısa */
@media (min-width:992px){.yt{padding-bottom:90px}}
@media (max-width:991px){.yt{padding-bottom:70px}}