/* Onest — kendi dosyalarımız, Google Fonts'a istek gitmez (T-12).
   Değişken font: tek dosya 300–500 aralığını karşılar, ağırlık başına kopya yok.
   Yalnız latin ve latin-ext; Türkçe glifler latin-ext alt kümesindedir. */
@font-face{font-family:'Onest'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(/f/onest-14e7d3079b.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(/f/onest-052df74533.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* v4 — "Sinematik Koyu": koyu zemin, ince tipografi, kutu yok, tam kadraj fotoğraf, kırmızı yalnızca işaret */
:root{
  /* Tipografi ölçeği — 11 kademe. Onest için ölçüldü (x-yüksekliği 0,53em).
     Metin kademeleri sabit, ekran kademeleri akışkan. Bu listenin dışına çıkılmaz. */
  --t1:.75rem; --t2:.8125rem; --t3:.875rem; --t4:.9375rem; --t5:1rem; --t6:1.1875rem;
  --d1:clamp(1.375rem,2.6vw,1.875rem); --d2:clamp(1.5rem,2.9vw,2.25rem);
  --d3:clamp(2rem,4.2vw,3.5rem); --d4:clamp(2.5rem,6vw,5.25rem);
  --lead:clamp(1.0625rem,1.7vw,1.3125rem);
  /* Harf aralığı: büyük harfli etiket iki değer, başlık iki değer. */
  --ls-l:.14em; --ls-t:.06em; --ls-d:-.02em; --ls-h:-.01em;
  /* Geçiş: küçük geri bildirim / durum değişimi / panel. */
  --hiz-1:.18s; --hiz-2:.3s; --hiz-3:.55s;
  /* Metin ölçüsü rem cinsinden: Türkçede ch birimi %39 fazla açıyor (ölçüldü). */
  --olcu-uzun:34rem; --olcu-orta:26rem;
  --bg:#F5F4F1; --bg-2:#EDECE8;
  --line:#DCDAD4; --line-2:#C4C1BA;
  --tx:#141312; --tx-2:#45423E; --tx-3:#66635E; --tx-4:#6A675F;
  --red-tx:#C00D0D;
  --nav-bg:rgba(245,244,241,.86); --bar-bg:rgba(245,244,241,.94); --opt-bg:#FFFFFF; --logo-filter:invert(1);
  --red:#C00D0D; --red-d:#A50B0B;
  /* Koyu yüzey seti: hero ve kart künyesi her iki temada da koyu kalır,
     bu yüzden tema belirteçlerini kullanamaz. Kendi kademeleri burada. */
  --k-bg:#0E0E0E; --k-tx:#F2F1EE; --k-tx-2:#D6D3CC; --k-tx-3:#A8A49C;
  --k-line:rgba(255,255,255,.16); --k-line-2:rgba(255,255,255,.4); --k-golge:rgba(0,0,0,.7);
  --maxw:1360px; --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
/* Koyu tema opsiyondur: cihaz gece modundaysa (açık bir aydınlık tercihi yoksa) gelir. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0E; --bg-2:#131312;
    --line:#262523; --line-2:#3A3835;
    --tx:#F2F1EE; --tx-2:#BDBAB3; --tx-3:#9B978F; --tx-4:#8A8680;
    --red-tx:#F2564C;
    --nav-bg:rgba(14,14,14,.82); --bar-bg:rgba(14,14,14,.92); --opt-bg:#161615; --logo-filter:none;
    color-scheme:dark;
  }
}
/* Koyu tema: düğmeyle seçildiyse. */
:root[data-theme="dark"]{
    --bg:#0E0E0E; --bg-2:#131312;
    --line:#262523; --line-2:#3A3835;
    --tx:#F2F1EE; --tx-2:#BDBAB3; --tx-3:#9B978F; --tx-4:#8A8680;
    --red-tx:#F2564C;
    --nav-bg:rgba(14,14,14,.82); --bar-bg:rgba(14,14,14,.92); --opt-bg:#161615; --logo-filter:none;
    color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; width:100%}
body{width:100%; max-width:100%; overflow-wrap:anywhere}
/* ana içerik kendi yatay kırpıcısına sahip; ızgara/flex öğeleri içeriklerinden geniş olamaz */
main,header.nav,footer{overflow-x:clip} main *{min-width:0}
body{background:var(--bg); color:var(--tx); margin:0;
  font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400; font-size:var(--t5); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit}
:focus-visible{outline:1px solid var(--tx-2); outline-offset:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
@media(max-width:640px){ .wrap{padding:0 20px} }

.lbl,.eyebrow{font-size:var(--t1); font-weight:500; letter-spacing:var(--ls-l); line-height:1.35; text-transform:uppercase; color:var(--tx-3); margin:0}
.eyebrow .dot{color:var(--red-tx)}
h1,h2,h3{margin:0; font-weight:300; letter-spacing:var(--ls-d); line-height:1.16; text-wrap:balance}
h1{font-size:var(--d4)}
h1.sub{font-size:var(--d3)}
h2{font-size:var(--d3)}
h2.s{font-size:var(--d2)}
h3{font-size:var(--t6); font-weight:400; letter-spacing:var(--ls-h); line-height:1.3}
p{margin:0; text-wrap:pretty}
.lead{font-size:var(--lead); line-height:1.5; color:var(--tx-2); max-width:var(--olcu-uzun)}
.body-2{font-size:var(--t4); line-height:1.65; color:var(--tx-2); max-width:var(--olcu-uzun)}
.mark{display:block; width:32px; height:1px; background:var(--red)}
.rv{opacity:0; transform:translateY(18px)} .no-motion .rv{opacity:1; transform:none}

/* düğmeler: ince çizgili; kırmızı dolgu yalnızca tek ana eylemde */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 24px; border:1px solid var(--line-2); border-radius:0;
  font-size:var(--t1); font-weight:500; letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx); cursor:pointer; background:none;
  transition:border-color var(--hiz-1), background var(--hiz-1), transform var(--hiz-1) var(--ease)}
.btn:hover{border-color:var(--red)} .btn:active{transform:translateY(1px)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff} .btn-red:hover{background:var(--red-d); border-color:var(--red-d)}
.btn-ghost{border-color:var(--line-2)}
.btn-sm{padding:10px 16px; font-size:var(--t1)}
.tlink{font-size:var(--t3); color:var(--tx-2); border-bottom:1px solid var(--red); padding-bottom:2px; transition:color var(--hiz-1), border-color var(--hiz-1)}
.tlink:hover{color:var(--tx); border-color:var(--tx-2)}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:90; transition:background var(--hiz-3) var(--ease), border-color var(--hiz-3)}
.nav.solid{background:var(--bg); border-bottom:1px solid var(--line)}
.nav:not(.solid){color:var(--k-tx)} .nav:not(.solid) .nav-links{color:var(--k-tx-2)} .nav:not(.solid) .nav-links a:hover,.nav:not(.solid) .nav-links a.on{color:#fff}
.nav:not(.solid) .btn-ghost,.nav:not(.solid) .tbtn{border-color:var(--k-line-2); color:#fff} .nav:not(.solid) .burger{border-color:var(--k-line-2)} .nav:not(.solid) .burger span,.nav:not(.solid) .burger span::before,.nav:not(.solid) .burger span::after{background:#fff}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:20px 32px; display:flex; align-items:center; gap:32px}
@media(max-width:640px){ .nav-in{padding:12px 16px; gap:16px} .brand{min-width:0} .brand span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--t3)} .brand img{height:20px} .tbtn{width:40px; height:40px} .burger{width:38px; height:38px} }
.brand{display:flex; align-items:center; gap:10px; font-weight:400; letter-spacing:var(--ls-h); font-size:var(--t4)}
.brand img{height:24px; width:auto; flex:none}
.nav-links{display:flex; gap:32px; margin-left:auto; font-size:var(--t3); font-weight:400; color:var(--tx-2)}
.nav-links a{transition:color var(--hiz-1); padding-bottom:3px; border-bottom:1px solid transparent} .nav-links a:hover{color:var(--tx)} .nav-links a.on{color:var(--tx); border-bottom-color:var(--red)}
.tbtn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-2); background:none; cursor:pointer; color:inherit; transition:border-color var(--hiz-1)}
.tbtn:hover{border-color:var(--red)} .tbtn svg{width:16px; height:16px; display:block}
@media(max-width:1024px){ .tbtn{margin-left:auto} .burger{margin-left:8px!important} }
.burger{display:none; margin-left:auto; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-2); cursor:pointer}
.burger span{display:block; width:16px; height:1px; background:var(--tx); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:16px; height:1px; background:var(--tx); transition:transform var(--hiz-2) var(--ease)}
.burger span::before{top:-5px} .burger span::after{top:5px}
.burger.on span{background:transparent}
.burger.on span::before{transform:translateY(5px) rotate(45deg)} .burger.on span::after{transform:translateY(-5px) rotate(-45deg)}
.m-menu{position:fixed; inset:0; z-index:80; background:var(--bg); padding:96px 24px 32px; display:flex; flex-direction:column; gap:0;
  transform:translateY(-100%); transition:transform var(--hiz-3) var(--ease); visibility:hidden}
.m-menu.on{transform:none; visibility:visible}
.m-menu a{font-size:var(--d2); font-weight:300; letter-spacing:var(--ls-d); padding:16px 0; border-bottom:1px solid var(--line)}
.m-menu .btn{margin-top:24px; align-self:flex-start}
@media(max-width:1024px){ .nav-links,.nav .btn,.nav-cta{display:none} .burger{display:flex} }

/* hero — tam kadraj fotoğraf, yazı altta */
.hero{position:relative; min-height:86svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; clip-path:inset(0); background:var(--k-bg); color:var(--k-tx)}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden; clip-path:inset(0)}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-scrim{position:absolute; inset:0; opacity:.9; background:
  linear-gradient(180deg, rgba(14,14,14,.42) 0%, rgba(14,14,14,.08) 24%, rgba(14,14,14,.42) 48%, rgba(14,14,14,.95) 100%)}
.hero-in{position:relative; z-index:1; width:100%; padding:160px 0 0}
.hero .eyebrow{color:var(--k-tx)}
.hero h1{margin-top:20px; max-width:13em}
.hero .lead{margin-top:20px; color:var(--k-tx-2)}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:32px} .hero-cta .btn{white-space:nowrap}
.hero .tlink{color:var(--k-tx); border-color:var(--k-line-2)}
.hl{display:block; overflow:hidden; clip-path:inset(0)} .hl span{display:block} .no-motion .hl span{transform:none}
.hero-cap{position:relative; z-index:1; display:block; text-align:right; padding:24px 32px 20px; font-size:var(--t1); letter-spacing:var(--ls-l); line-height:1.35; color:var(--k-tx-3)}
.hero .eyebrow::before{background:var(--red)}
.hero .lead{color:var(--k-tx-2)}
.stats{position:relative; margin-top:48px; border-top:1px solid var(--k-line)}
.stats-in{display:flex; flex-wrap:wrap; gap:16px 40px}
.stat{display:flex; align-items:baseline; gap:8px}
.stat .n{font-size:var(--d1); font-weight:300; letter-spacing:var(--ls-d); line-height:1; font-variant-numeric:tabular-nums}
.stat .k{font-size:var(--t3); color:var(--tx-3)}
@media(max-width:820px){
  .hero-in{padding-top:96px} .hero .lead{margin-top:16px} .hero-cta{margin-top:24px} .stats{margin-top:32px} .hero-cap{display:none} .hero-in{padding-bottom:32px}
  .stats-in{gap:10px 32px} .stat .n{font-size:var(--d1)}
}
@media(max-width:1024px){ .stats{padding-bottom:64px} }

/* bölümler */
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) 0}
.sub{padding-top:clamp(56px,8vw,96px)}
.page{padding-top:clamp(120px,14vw,160px)}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(40px,5vw,64px); max-width:var(--olcu-uzun)}
.sec-head.row{max-width:none}
@media(min-width:900px){
  .sec-head.row{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end; gap:48px}
  .sec-head.row .t{min-width:0} .sec-head.row .d{padding-bottom:8px; max-width:var(--olcu-orta)}
}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:var(--t2); color:var(--tx-4); margin-bottom:24px}
.crumbs a{display:inline-flex; align-items:center; min-height:24px}
.crumbs a:hover{color:var(--tx-2)} .crumbs .sep{color:var(--tx-4)}

/* kurumsal */
.about{display:grid; gap:clamp(32px,4vw,64px); align-items:start}
@media(min-width:900px){ .about{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.about .txt{display:flex; flex-direction:column; gap:20px}
.pillars{display:flex; flex-direction:column; border-top:1px solid var(--line)}
/* tam genişlik proje fotoğrafı: metin ağırlıklı bölümlerin arasında */
.foto-bant{margin:clamp(40px,5vw,64px) 0 0} .foto-bant.yalin{margin-top:0}
.foto-bant .im{overflow:hidden; clip-path:inset(0); aspect-ratio:21/9} .foto-bant img{width:100%; height:100%; object-fit:cover}
.foto-bant .cap{display:block; margin-top:10px; font-size:var(--t1); letter-spacing:var(--ls-t); color:var(--tx-4)}
@media(max-width:560px){ .foto-bant .im{aspect-ratio:4/3} }
.about-yan{display:flex; flex-direction:column; gap:32px} .foto-bant.yan{margin-top:0} .foto-bant.yan .im{aspect-ratio:4/3}
.pillar{padding:20px 0 24px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:110px 1fr; gap:20px}
.pillar .i{font-size:var(--t1); font-weight:500; letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx-3); padding-top:4px}
.pillar p{font-size:var(--t4); color:var(--tx-2); line-height:1.6}
@media(max-width:560px){ .pillar{grid-template-columns:1fr; gap:6px} }

/* çalışma alanları — satırlar, kutu yok */
.sectors{border-top:1px solid var(--line)}
.sc{display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.05fr); gap:32px 40px; padding:32px 0; border-bottom:1px solid var(--line); align-items:center}
.sc .i{font-size:var(--t2); color:var(--red-tx); font-variant-numeric:tabular-nums; padding-top:2px; align-self:start}
.sc .c{display:flex; flex-direction:column; gap:10px}
.sc .c p{font-size:var(--t3); color:var(--tx-2); max-width:var(--olcu-orta); line-height:1.6}
.sc .go{font-size:var(--t2); color:var(--tx-3); margin-top:6px; transition:color var(--hiz-1)}
.sc:hover .go{color:var(--red-tx)}
.sc .im{aspect-ratio:16/9; overflow:hidden; clip-path:inset(0)}
.sc .im img{width:100%; height:100%; object-fit:cover; transition:transform var(--hiz-3) var(--ease)}
.sc:hover .im img{transform:scale(1.04)}
@media(max-width:900px){ .sc{grid-template-columns:1fr; gap:16px} .sc .i{display:none} .sc .im{order:-1} }

/* süreç */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:32px; border-top:1px solid var(--line); padding-top:32px}
.step{display:flex; flex-direction:column; gap:12px}
.step .n{font-size:var(--t2); color:var(--red-tx); font-variant-numeric:tabular-nums}
.step h3{font-size:var(--t6)} .step p{font-size:var(--t3); color:var(--tx-2); line-height:1.6}
@media(max-width:1024px){ .steps{grid-template-columns:repeat(3,1fr)} }
@media(max-width:700px){ .steps{grid-template-columns:1fr; gap:0; border-top:0} .step{padding:20px 0; border-top:1px solid var(--line)} }

/* projeler */
.projects{display:grid; gap:20px 20px; grid-template-columns:repeat(3,1fr)}
.projects.strip{grid-template-columns:1fr 1fr; gap:3px}
.projects.strip .pj:first-child{grid-column:span 2}
.projects.strip .pj .im{aspect-ratio:4/3} .projects.strip .pj:first-child .im{aspect-ratio:21/9}
.projects.strip .pj .m{position:absolute; left:20px; right:20px; bottom:16px; padding:0; z-index:2; text-shadow:0 1px 12px var(--k-golge)}
.projects.strip .pj .m .r{justify-content:flex-start; gap:12px}
.projects.strip .pj .sc2{color:var(--k-tx-2)} .projects.strip .pj h3{color:var(--k-tx)} .projects.strip .pj .yr{color:var(--k-tx-2)}
.projects.strip .pj .im::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,14,0) 35%, rgba(14,14,14,.88) 100%); z-index:1}
@media(max-width:900px){ .projects{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .projects,.projects.strip{grid-template-columns:1fr} .projects.strip .pj:first-child{grid-column:span 1} .projects.strip .pj:first-child .im{aspect-ratio:4/3} }
.pj{position:relative; display:block}
.pj .im{overflow:hidden; clip-path:inset(0); aspect-ratio:4/3; position:relative}
.pj img{width:100%; height:100%; object-fit:cover; transition:transform var(--hiz-3) var(--ease)}
.pj .m{padding:12px 0 0; display:flex; flex-direction:column; gap:4px}
.pj .r{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.pj h3{font-size:var(--t5); font-weight:400} .pj .yr{font-size:var(--t2); color:var(--tx-4); font-variant-numeric:tabular-nums; flex:none} .pj .sc2{font-size:var(--t3); color:var(--tx-3)}
.more-row{display:flex; justify-content:flex-start; margin-top:40px}
.pop{animation:pop var(--hiz-3) var(--ease) both} @keyframes pop{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* katalog süzgeçleri — metin, alt çizgi */
.filters{display:flex; flex-direction:column; gap:20px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.chips{display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch} .chips::-webkit-scrollbar{display:none}
.chip{flex:none; padding:6px 0; border:0; border-bottom:1px solid transparent; background:none; font-size:var(--t2); font-weight:400; color:var(--tx-3); cursor:pointer; transition:color var(--hiz-1), border-color var(--hiz-1)}
.chip:hover{color:var(--tx)} .chip.on{color:var(--tx); border-bottom-color:var(--red)}
.chip small{font-size:var(--t1); color:var(--tx-4); margin-left:6px}
.fsel{display:flex; gap:32px; flex-wrap:wrap}
.fsel select{background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--tx-2); padding:8px 0; font:inherit; font-size:var(--t5); min-width:220px; border-radius:0}
.fsel select:focus{outline:none; border-bottom-color:var(--tx-2)}
.fsel option{background:var(--opt-bg); color:var(--tx)}
.count{font-size:var(--t2); color:var(--tx-4); margin-bottom:20px; letter-spacing:var(--ls-t)}
.empty{padding:48px 0; color:var(--tx-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:var(--t4)}

/* proje sayfası */
.pj-head{display:grid; gap:32px; margin-bottom:40px} @media(min-width:900px){ .pj-head{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end; gap:64px} }
.meta{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin:0; border-top:1px solid var(--line)}
.meta div{padding:12px 0; border-bottom:1px solid var(--line); min-width:0} .meta dt{font-size:var(--t1); letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx-4)} .meta dd{font-variant-numeric:tabular-nums; margin:4px 0 0; font-size:var(--t4); font-weight:400; overflow-wrap:anywhere}
.pj-hero{overflow:hidden; aspect-ratio:21/9} .pj-hero img{width:100%; height:100%; object-fit:cover}
@media(max-width:640px){ .pj-hero{aspect-ratio:4/3} }
.pj-body{display:grid; gap:clamp(32px,5vw,80px); margin-top:clamp(32px,4vw,56px); align-items:start} @media(min-width:900px){ .pj-body{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr)} }
.gal{display:grid; grid-template-columns:1fr 1fr; gap:3px} .gal div{overflow:hidden; clip-path:inset(0); aspect-ratio:4/3} .gal div:first-child{grid-column:span 2; aspect-ratio:16/9}
.gal div:last-child:nth-child(even){grid-column:span 2; aspect-ratio:16/9}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform var(--hiz-3) var(--ease)}
.pj-tasarim{margin-top:clamp(48px,7vw,96px); padding-top:32px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:12px}
.pj-tasarim h2{font-size:var(--d2); letter-spacing:var(--ls-h)} .pj-tasarim .gal{margin-top:12px}
.pj-tasarim .body-2{color:var(--tx-2); max-width:var(--olcu-orta)}
@media(max-width:560px){ .gal{grid-template-columns:1fr} .gal div:first-child{grid-column:span 1} .gal div:last-child:nth-child(even){grid-column:span 1; aspect-ratio:4/3} }
.side{position:sticky; top:96px; display:flex; flex-direction:column; gap:32px}
.sv-list{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.sv-list a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--t4); font-weight:400; color:var(--tx-2); transition:color var(--hiz-1)}
.sv-list a:hover{color:var(--red-tx)} .sv-list a span{color:var(--tx-4); font-size:var(--t2); flex:none}
.placeholder{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; color:var(--tx-3); font-size:var(--t3); line-height:1.6}
.placeholder strong{color:var(--tx-2); font-weight:400}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(40px,6vw,80px); border-top:1px solid var(--line); padding-top:24px}
.pn a{display:flex; flex-direction:column; gap:6px; min-width:0} .pn a:last-child{text-align:right; align-items:flex-end}
.pn .k{font-size:var(--t1); letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx-4)} .pn strong{font-size:var(--t6); font-weight:400; letter-spacing:var(--ls-h)}
.cta-band{margin-top:clamp(48px,7vw,96px); border-top:1px solid var(--line); padding-top:clamp(32px,4vw,40px); display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.cta-band h2{font-size:var(--d1)} .cta-band p{font-size:var(--t3); color:var(--tx-2); margin-top:8px; max-width:var(--olcu-orta)}

/* hizmet sayfası */
.sv-hero{display:grid; gap:clamp(32px,4vw,64px); align-items:center} @media(min-width:900px){ .sv-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.sv-hero .txt{display:flex; flex-direction:column; gap:20px}
.sv-hero .im{overflow:hidden; aspect-ratio:4/3} .sv-hero .im img{width:100%; height:100%; object-fit:cover}
.sv-hero .cap{display:block; margin-top:10px; font-size:var(--t1); letter-spacing:var(--ls-t); color:var(--tx-4)}
.types{display:grid; grid-template-columns:1fr 1fr; gap:0 48px; border-top:1px solid var(--line)}
.types div{padding:20px 0 24px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; align-items:start}
.types h3{font-size:var(--t6)} .types p{font-size:var(--t3); color:var(--tx-2); line-height:1.6}
@media(max-width:900px){ .types{grid-template-columns:1fr} } @media(max-width:520px){ .types div{grid-template-columns:1fr; gap:6px} }
.proc{margin-top:40px; max-width:var(--olcu-uzun); font-size:var(--t5); line-height:1.7; color:var(--tx-2)}
.proc strong{display:flex; align-items:center; gap:16px; color:var(--tx-3); font-size:var(--t1); font-weight:500; letter-spacing:var(--ls-l); text-transform:uppercase; margin-bottom:16px}
.masonry{columns:3; column-gap:3px} .masonry img{width:100%; height:auto; display:block; margin-bottom:3px; break-inside:avoid}
@media(max-width:900px){ .masonry{columns:2} }
.chips-static{display:flex; flex-wrap:wrap; gap:10px 0; font-size:var(--t3)}
.chips-static a{display:inline-flex; align-items:center; min-height:24px; color:var(--tx-2); transition:color var(--hiz-1)} .chips-static a:hover{color:var(--red-tx)}
.chips-static a + a::before{content:"·"; color:var(--tx-4); margin:0 12px}

/* hizmet listesi */
.svc-grid{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.svc{display:grid; grid-template-columns:40px 150px minmax(0,1fr) minmax(0,1.1fr) 120px; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); align-items:center; transition:color var(--hiz-1)}
.svc .i{font-size:var(--t2); color:var(--red-tx); font-variant-numeric:tabular-nums}
.svc .im{aspect-ratio:3/2; overflow:hidden; clip-path:inset(0)} .svc .im img{width:100%; height:100%; object-fit:cover; transition:transform var(--hiz-3) var(--ease)}
.svc:hover .im img{transform:scale(1.05)}
.svc h3{font-size:var(--t6)} .svc p{font-size:var(--t3); color:var(--tx-2); line-height:1.55} .svc .k{font-size:var(--t2); color:var(--tx-3); text-align:right; transition:color var(--hiz-1)}
.svc:hover .k{color:var(--red-tx)}
@media(max-width:900px){ .svc{grid-template-columns:110px minmax(0,1fr); gap:12px 20px} .svc .i,.svc p{display:none} .svc .k{grid-column:2; text-align:left} }

/* logolar */
.logos{display:flex; flex-wrap:wrap; gap:32px 56px; align-items:center; padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.logos div{display:flex; align-items:center}
.logos img{max-height:32px; max-width:120px; width:auto; height:auto; object-fit:contain; opacity:.55; transition:opacity var(--hiz-1); filter:var(--logo-filter)}
.logos div:hover img{opacity:1}
@media(max-width:640px){ .logos{gap:24px 32px} .logos img{max-height:24px; max-width:96px} }
.note{font-size:var(--t2); color:var(--tx-4); margin-top:16px; line-height:1.5}

/* ilkeler + sss */
.grid2{display:grid; gap:clamp(32px,5vw,80px)} @media(min-width:900px){ .grid2{grid-template-columns:1fr 1fr} }
.principles{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.pr{padding:20px 0; border-bottom:1px solid var(--line)}
.pr h3{font-size:var(--t6)} .pr p{font-size:var(--t3); color:var(--tx-2); margin-top:6px; line-height:1.6}
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%; max-width:100%; text-align:left; background:none; border:0; padding:20px 0; display:grid; grid-template-columns:minmax(0,1fr) 18px; gap:16px; align-items:center; cursor:pointer; font-weight:400; font-size:var(--t5); color:var(--tx); overflow:hidden}
.fq button .q{flex:1; min-width:0} .fq button .pl{flex:none; width:20px; text-align:center; font-weight:300; font-size:var(--t6); color:var(--tx-3); transition:transform var(--hiz-2) var(--ease)}
.fq.on button .pl{transform:rotate(180deg)}
.fq .a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--hiz-2) var(--ease)}
.fq.on .a{grid-template-rows:1fr}
.fq .a p{overflow:hidden; font-size:var(--t3); color:var(--tx-2); line-height:1.65}
.fq.on .a p{padding-bottom:20px}

/* kapsam — iş kolu kartları proje kartı ızgarasını (.projects) kullanır */

/* teklif — kutu yok, alt çizgili alanlar */
.quote{border-top:1px solid var(--line); padding-top:clamp(40px,5vw,56px)}
.q-grid{display:grid; gap:clamp(32px,5vw,80px)}
@media(min-width:900px){ .q-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas:"bas form" "ilet form"; grid-template-rows:auto 1fr; row-gap:32px}
  .q-bas{grid-area:bas} .q-form{grid-area:form} .q-ilet{grid-area:ilet; align-self:start} }
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:24px}
.field label{font-size:var(--t1); font-weight:500; letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx-4)}
.field input,.field select,.field textarea{background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--tx); padding:10px 0; border-radius:0; font:inherit; font-size:var(--t5); width:100%; transition:border-color var(--hiz-1)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--tx-2); outline:none}
.field select option{background:var(--opt-bg)}
.field textarea{min-height:80px; resize:vertical}
.two{display:grid; gap:0 32px; grid-template-columns:1fr 1fr} @media(max-width:560px){ .two{grid-template-columns:1fr} }
.contact-l{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
.cl{display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--line)}
.cl .k{font-size:var(--t1); letter-spacing:var(--ls-l); text-transform:uppercase; color:var(--tx-4)} .cl .v{font-size:var(--t5); font-weight:400}

footer{border-top:1px solid var(--line); padding:40px 0 40px}
.f-in{display:flex; flex-wrap:wrap; gap:24px 40px; justify-content:space-between; align-items:center} .f-in .c{display:flex; flex-direction:column; gap:2px; text-align:right; font-size:var(--t2); color:var(--tx-4)}
.f-in .c .tel{color:var(--tx-4); opacity:.8}
.f-in img{height:20px; width:auto}
.f-links{display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; font-size:var(--t3); color:var(--tx-2)}
.f-links a{display:inline-flex; align-items:center; min-height:24px} .f-links a:hover{color:var(--red-tx)}
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line); gap:10px}
.sticky .btn{flex:1}
@media(max-width:640px){ .sticky{gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom))} .sticky .btn{padding:10px 6px; font-size:var(--t1); letter-spacing:var(--ls-t); white-space:nowrap; min-width:0} }
@media(max-width:1024px){ .sticky{display:flex} body{padding-bottom:64px}
  }
.ph{background:var(--bg-2); aspect-ratio:4/3; margin-bottom:3px; break-inside:avoid}
.gal div.ph{aspect-ratio:4/3}
@media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important} .rv{opacity:1!important; transform:none!important} .hl span{transform:none!important} }

/* v5.0 — form durumları, KVKK onayı, yasal sayfalar, teşekkür */
.field.err input,.field.err select,.field.err textarea{border-bottom-color:var(--red)}
.field .msg{font-size:var(--t2); color:var(--red-tx); margin:0; line-height:1.4}
.field label .opt{text-transform:none; letter-spacing:0; font-weight:400; color:var(--tx-4)}
.field.check{gap:8px; margin-bottom:24px}
.field label.chk{display:flex; gap:12px; align-items:flex-start; font-size:var(--t3); line-height:1.5; color:var(--tx-2); text-transform:none; letter-spacing:0; font-weight:400; cursor:pointer}
.chk input{appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none; margin:3px 0 0; border:1px solid var(--line-2); background:none; border-radius:0; cursor:pointer; display:grid; place-content:center}
.chk input:checked{border-color:var(--red); background:var(--red)} .chk input:checked::before{content:""; width:8px; height:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:translateY(-1px) rotate(-45deg)}
.chk input[aria-invalid="true"]{border-color:var(--red)} .chk input:focus-visible{outline:1px solid var(--tx-2); outline-offset:3px}
.chk a{color:var(--tx); border-bottom:1px solid var(--red)}
.btn[disabled]{opacity:.6; cursor:progress}
.fq button .pl{display:flex; align-items:center; justify-content:center; color:var(--tx-3)}
.legal-body{max-width:var(--olcu-uzun); margin-top:clamp(32px,4vw,56px); display:flex; flex-direction:column; gap:32px}
.legal-body h2{font-size:var(--t6); font-weight:400; letter-spacing:var(--ls-h); line-height:1.3} .legal-body p{font-size:var(--t4); line-height:1.65; color:var(--tx-2); margin-top:10px}
.thanks-l{margin-top:32px; display:flex; flex-direction:column; gap:16px; max-width:var(--olcu-uzun)}

/* v5.2 — erişilebilirlik */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:fixed; top:10px; left:10px; z-index:200; font:inherit; font-size:var(--t2); font-weight:500;
  letter-spacing:var(--ls-l); text-transform:uppercase; background:var(--bg); color:var(--tx);
  border:1px solid var(--red); padding:12px 20px; cursor:pointer; border-radius:0;
  transform:translateY(-200%); transition:transform var(--hiz-1) var(--ease)}
.skip:focus{transform:none}
main:focus{outline:none}

/* v5.3 — beyan bandı: hero'dan inen cümle ve sayılar */
.beyan{border-bottom:1px solid var(--line)}
.beyan-in{padding-top:clamp(32px,5vw,56px); padding-bottom:clamp(32px,4vw,48px);
  display:grid; gap:24px 48px; grid-template-columns:minmax(0,1fr) auto; align-items:end}
.beyan-t{font-size:var(--d1); font-weight:300; letter-spacing:var(--ls-d); line-height:1.28;
  color:var(--tx); max-width:20em}
@media(max-width:860px){ .beyan-in{grid-template-columns:1fr; align-items:start} }
/* H-4 · başlık dinlenme hâlinde görünür; gizleme yalnız animasyon çalışacaksa devreye girer */
.anim-hazir .hl span{transform:translateY(105%)}

/* v5.4 — yetkinlik katmanı */
.yet{border-top:1px solid var(--line); padding:clamp(24px,3.4vw,40px) 0;
  display:grid; gap:24px 48px; grid-template-columns:minmax(0,22rem) minmax(0,1fr); align-items:start}
.yet:last-child{border-bottom:1px solid var(--line)}
.yet-b h2{font-size:var(--d2); letter-spacing:var(--ls-d)}
.yet-b p{margin-top:12px; font-size:var(--t4); line-height:1.6; color:var(--tx-2); max-width:var(--olcu-orta)}
/* iş kolu kartları: dar sağ sütunda iki, geniş ekranda üç sütun */
.yet .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1200px){ .yet .projects{grid-template-columns:repeat(3,minmax(0,1fr))} }
.yet-n{font-size:var(--t4); color:var(--tx-3); padding-top:12px; border-top:1px solid var(--line); max-width:var(--olcu-orta)}
@media(max-width:900px){ .yet{grid-template-columns:1fr; gap:16px} }
@media(max-width:560px){ .yet .projects{grid-template-columns:1fr} }
/* K-3 · menüde dolgulu düğme yok: incelenen 25 firmanın hiçbirinde yok */
.nav-cta{font-size:var(--t3); color:inherit; text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid var(--red); transition:border-color var(--hiz-1)}
.nav-cta:hover{border-bottom-color:var(--tx)}
.nav:not(.solid) .nav-cta{color:var(--k-tx)}
/* D-4 · galeri düzeni yetkinliğe göre */
.gal-serit{display:grid; grid-template-columns:1fr 1fr; gap:3px}
.gal-serit > *:first-child{grid-column:span 2}
.gal-serit img{width:100%; aspect-ratio:16/9; object-fit:cover}
.gal-serit > *:first-child img{aspect-ratio:21/9}
.gal-serit .ph{aspect-ratio:16/9; margin:0}
.gal-detay{display:grid; grid-template-columns:repeat(4,1fr); gap:3px}
.gal-detay img{width:100%; aspect-ratio:1; object-fit:cover}
.gal-detay .ph{aspect-ratio:1; margin:0}
/* temsilî (stok) görseller: küçük kareler, 680 px kaynağı büyütmeden */
.temsili{display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:3px}
.temsili img,.temsili .ph{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; margin:0}
@media(max-width:700px){ .gal-detay{grid-template-columns:repeat(2,1fr)} .gal-serit{grid-template-columns:1fr} .gal-serit > *:first-child{grid-column:span 1} .gal-serit > *:first-child img{aspect-ratio:16/9} }

/* v5.5 — hizmet galerisinde her karenin altında hangi projeden olduğu yazar */
.sg{margin:0; break-inside:avoid}
.masonry .sg{margin-bottom:3px}
.sg figcaption{font-size:var(--t1); letter-spacing:var(--ls-t); color:var(--tx-3); padding:6px 0 2px; line-height:1.35}

.gal-detay .sg img{aspect-ratio:1; object-fit:cover; width:100%}


/* Seçim rengi: marka kırmızısı, her iki temada okunur */
::selection{background:var(--red); color:#fff}

/* Referans duvarı: aydınlık temada firmaların kendi renkleri, koyu temada beyaz silüet.
   Renkli logoların siyah yazıları koyu zeminde okunmuyor, o yüzden iki set tutuluyor. */
.logos div.iki .dz{display:none}
.logos div.iki .rk{display:block; opacity:1; filter:none}
:root[data-theme="dark"] .logos div.iki .dz{display:block}
:root[data-theme="dark"] .logos div.iki .rk{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logos div.iki .dz{display:block}
  :root:not([data-theme="light"]) .logos div.iki .rk{display:none}
}
/* 2026-09-29 · Gemini eleştirisi hızlı düzeltmeleri: tasarım bloğu görseli, telefonda iki sütun iş kolu, önceki/sonraki alt alta */
.yet-g{display:flex; flex-direction:column; gap:16px} .yet-g figure{margin:0}
.yet-g .im{aspect-ratio:16/9; overflow:hidden; clip-path:inset(0)} .yet-g img{width:100%; height:100%; object-fit:cover}
.yet-g .cap{display:block; margin-top:12px; font-size:var(--t1); letter-spacing:var(--ls-t); color:var(--tx-4)}
.sr-only input{font-size:var(--t5)}   /* bal küpü alanı da form tabanının altına inmez (iOS yakınlaştırma kuralı) */
@media(max-width:560px){
  .projects.is-kolu, .yet .projects.is-kolu{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px}
  .projects.is-kolu .pj .sc2{font-size:var(--t2)}
  .pn{grid-template-columns:1fr; gap:24px} .pn a:last-child{text-align:left; align-items:flex-start}
}