/* =========================================================
   İŞLER, Saha şeridi
   Yoğun, editoryal, scroll-driven
   ========================================================= */

body.sayfa-isler{
  --ix-gap:.55rem;
  --ix-hdr:72px;
  background:var(--ink);
}
body.sayfa-isler .scroll-progress{opacity:1}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- ScrollExpand hero ---------- */
.ix-expand{
  position:relative;
  background:var(--ink);
}
.ix-expand .scroll-expand{
  height:auto;
  min-height:100svh;
}
.ix-expand__title{
  margin:0 0 .65rem;
  max-width:16ch;
  color:var(--paper);
  font-family:var(--display);
  font-size:clamp(2.35rem,5vw,4.8rem);
  font-weight:590;
  line-height:.96;
  letter-spacing:-.045em;
  text-wrap:balance;
  font-variation-settings:"SOFT" 48,"WONK" 0;
}
/* Betik yüklenmezse başlık ve açıklama yine okunabilir bir ilk ekran
   olarak kalır; JS çalıştığında aynı düğümler overlay'e taşınır. */
html:not(.js) [data-scroll-expand]{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(7rem,12vw,10rem) var(--pad) clamp(2.5rem,6vw,5rem);
  color:var(--paper);
  background:linear-gradient(rgba(7,27,34,.28),rgba(7,27,34,.88)),url("../assets/portfolio/w900/malatya-koltuk-yikama-krem-salon-takimi.webp") center/cover;
}

/* ---------- DriftWall saha duvarı ---------- */
.ix-wall{
  position:relative;
  padding:clamp(1.75rem,3.5vw,2.5rem) 0 0;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.ix-wall__head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.65rem 1.5rem;
  margin-bottom:1rem;
}
.ix-wall__head .esik{margin:0 0 .3rem;color:var(--steam)}
.ix-wall__head h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:560;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 48,"WONK" 0;
}
.ix-wall__lead{
  margin:0;
  max-width:30ch;
  color:rgba(247,243,235,.62);
  font-size:.92rem;
  line-height:1.45;
}
.ix-wall__stage{
  position:relative;
  height:min(72svh,680px);
  margin:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
}
/* Üst/alt/yan yumuşak erime, kutu hissi yok */
.ix-wall__stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to bottom,var(--ink) 0%,transparent 18%,transparent 72%,rgba(7,27,34,.55) 88%,var(--ink) 100%),
    linear-gradient(to right,var(--ink) 0%,transparent 10%,transparent 90%,var(--ink) 100%);
}
.ix-wall__stage .drift-wall{
  width:100%;
  height:100%;
}
/* Sonraki porselen bölüme yumuşak geçiş */
.ix-wall::after{
  content:"";
  display:block;
  height:clamp(3.5rem,9vw,6rem);
  background:linear-gradient(to bottom,var(--ink) 0%,#0e2a32 35%,#d8e0dc 78%,var(--porcelain) 100%);
  pointer-events:none;
}

/* ---------- Önce / sonra ---------- */
.ix-ba{
  padding-block:clamp(1.5rem,3.5vw,2.5rem) clamp(2.5rem,5vw,4rem);
  background:var(--porcelain);
  color:var(--ink);
}
.ix-ba__head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.75rem 2rem;
  margin-bottom:1.35rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.ix-ba__head .esik{margin:0 0 .35rem;color:var(--steam-dark)}
.ix-ba__head h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.75rem,3.2vw,2.55rem);
  font-weight:560;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 48,"WONK" 0;
}
.ix-ba__lead{
  margin:0;
  max-width:26ch;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.45;
}
.ix-ba__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.82fr);
  align-items:start;
  gap:clamp(1.5rem,4.5vw,3.25rem);
}
/* Önce-sonra + saha videosu yan yana */
.ix-ba__duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.55rem,1.4vw,1rem);
  align-items:stretch;
  min-width:0;
}
.ix-ba__grid .ba{
  margin:0;
  width:100%;
  max-width:none;
  justify-self:stretch;
}
.ix-ba__grid .ba__stage{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  max-height:none;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 28px 60px -40px rgba(7,27,34,.55);
  background:var(--ink-2);
}
/* Koltuğu kadraja oturt; aşırı zoom yok */
.ix-ba .ba__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
.ix-ba__side{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-width:0;
}
.ix-ba__side-crop{
  position:relative;
  flex:1 1 auto;
  width:100%;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
  background:#0a1e26;
  box-shadow:0 28px 60px -40px rgba(7,27,34,.55);
}
/* 3:4 native/near-native klipler: cover + scale yok, tüm kadraj görünür */
.ix-ba__vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
}
.ix-ba__side figcaption{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:0 .1rem;
}
.ix-ba__side figcaption span{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.ix-ba__side figcaption b{
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
}
.ix-ba__note{
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  min-width:0;
  padding-top:.15rem;
}
.ix-ba__claim{
  margin:0;
  max-width:38ch;
  font-family:var(--display);
  font-size:clamp(1.2rem,2.1vw,1.55rem);
  font-weight:540;
  line-height:1.28;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 42,"WONK" 0;
}
.ix-ba__facts{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.ix-ba__facts li{
  display:grid;
  grid-template-columns:minmax(6.5rem,8.5rem) minmax(0,1fr);
  gap:.65rem 1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.ix-ba__facts span{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ix-ba__facts strong{
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.01em;
}
.ix-ba__aside{
  margin:0;
  max-width:36ch;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.5;
}
.ix-ba__act{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.85rem 1.35rem;
  margin-top:.15rem;
}

/* ---------- Galeri, düzenli ızgara ---------- */
.ix-gal{
  padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(2.75rem,5vw,4rem);
  background:var(--porcelain);
  color:var(--ink);
}
.ix-gal__head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.75rem 2rem;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.ix-gal__head .esik{margin:0 0 .35rem;color:var(--steam-dark)}
.ix-gal__head h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.35rem);
  font-weight:560;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 48,"WONK" 0;
}
.ix-gal__lead{
  margin:0;
  max-width:42ch;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.5;
}
.ix-gal__toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.85rem 1.5rem;
  margin-bottom:1.15rem;
}
.ix-gal__filters,
.ix-gal__types{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.ix-gal__filters button,
.ix-gal__types button{
  min-height:36px;
  padding:.4rem .85rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  color:var(--muted);
  background:var(--paper);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:color .2s,background .2s,border-color .2s;
}
.ix-gal__filters button:hover,
.ix-gal__types button:hover{
  color:var(--ink);
  border-color:rgba(7,27,34,.28);
}
.ix-gal__filters button.is-active,
.ix-gal__types button.is-active{
  color:var(--paper);
  border-color:var(--ink);
  background:var(--ink);
}
.ix-gal__count{display:none}

.ix-gal__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}
.ix-gal__item,
.arsiv__item{
  position:relative;
  display:block;
  width:100%;
  margin:0;padding:0;
  aspect-ratio:4/5;
  overflow:hidden;
  /* 49 karonun tamamı yerine yalnızca ekrandakiler boyanır. Kutu ölçüsü
     aspect-ratio + ızgaradan geldiği için kaydırma sıçraması olmaz. */
  content-visibility:auto;
  border:0;
  border-radius:.85rem;
  background:#d5ddda;
  cursor:zoom-in;
  opacity:0;
  transform:translate3d(0,18px,0);
}
.ix-gal__item.is-in,
.arsiv__item.is-in{
  opacity:1;
  transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.ix-gal__item[hidden],
.arsiv__item[hidden]{display:none}
.ix-gal__item img,
.arsiv__item img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease);
}
.ix-gal__item:hover img,
.arsiv__item:hover img{transform:none}
.ix-gal__item::after,
.arsiv__item::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,27,34,.55) 100%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.ix-gal__item:hover::after,
.arsiv__item:hover::after{opacity:1}
.ix-gal__play,
.arsiv__play{
  position:absolute;z-index:2;
  left:.65rem;top:.65rem;
  display:grid;place-items:center;
  width:32px;height:32px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#fff;
  background:rgba(7,27,34,.5);
  backdrop-filter:blur(6px);
}
.ix-gal__play svg,
.arsiv__play svg{width:11px;height:11px}
.arsiv__meta{
  position:absolute;z-index:2;
  left:.75rem;right:.75rem;bottom:.7rem;
  display:grid;gap:.15rem;
  opacity:0;
  transform:translate3d(0,6px,0);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  text-align:left;
  pointer-events:none;
}
.ix-gal__item:hover .arsiv__meta,
.arsiv__item:hover .arsiv__meta{
  opacity:1;
  transform:none;
}
.arsiv__meta small{
  color:rgba(255,255,255,.72);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.arsiv__meta b{
  color:#fff;
  font-family:var(--display);
  font-size:.95rem;
  font-weight:560;
  letter-spacing:-.02em;
  line-height:1.2;
}

@media (hover:none){
  .ix-gal__item::after,
  .arsiv__item::after,
  .arsiv__meta{display:none}
}
.ix-cta{
  padding-block:clamp(2rem,4vw,3rem);
  color:var(--paper);
  background:var(--ink);
}
.ix-cta__in{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:1.15rem 2rem;
}
.ix-cta__in > :first-child{
  flex:1 1 16rem;
  min-width:0;
}
.ix-cta h2{
  margin:0 0 .5rem;
  font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:560;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 48,"WONK" 0;
}
.ix-cta__lead{
  margin:0;
  max-width:36ch;
  color:rgba(247,243,235,.68);
  font-size:.95rem;
  line-height:1.5;
}
.ix-cta__act{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.85rem 1.1rem;
}
.ix-cta .cta-band__tel{color:rgba(247,243,235,.78)}
.ix-cta .cta-band__tel:hover{color:var(--steam)}

/* ---------- Lightbox ---------- */
.kutu{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:rgba(2,10,13,.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s;
}
.kutu.is-on{opacity:1}
.kutu[hidden]{display:none}
.kutu__ic{max-width:min(94vw,1100px);max-height:88svh}
.kutu__ic img,.kutu__ic video{
  max-width:100%;max-height:88svh;
  margin-inline:auto;border-radius:1rem;
}
.kutu__x,.kutu__ok{
  position:absolute;display:grid;place-items:center;
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#fff;background:rgba(255,255,255,.08);
  font-size:1.45rem;cursor:pointer;
}
.kutu__x{right:1rem;top:1rem}
.kutu__ok--sol{left:1rem;top:50%;translate:0 -50%}
.kutu__ok--sag{right:1rem;top:50%;translate:0 -50%}
.kutu__say{
  position:absolute;left:50%;bottom:1.2rem;
  translate:-50% 0;margin:0;
  color:rgba(255,255,255,.65);
  font-size:.72rem;font-weight:650;
}
.kutu__brand{
  position:absolute;
  left:1rem;
  bottom:1rem;
  z-index:2;
  width:2rem;
  height:2rem;
  opacity:.42;
  pointer-events:none;
  object-fit:contain;
}
body.kutu-acik{overflow:hidden}

/* ---------- Reveal fallback ---------- */
[data-ix-reveal]{opacity:1}
.js [data-ix-reveal]{opacity:0;transform:translate3d(0,22px,0)}
.js [data-ix-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}

@media (max-width:900px){
  .ix-wall__stage{height:min(58svh,480px)}
  .ix-ba__grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .ix-ba__duo{
    max-width:min(100%,36rem);
    margin-inline:auto;
  }
  .ix-ba__grid .ba{
    width:100%;
    margin-inline:0;
    justify-self:stretch;
  }
  .ix-ba__grid .ba__stage{max-height:none}
  .ix-ba__side figcaption{padding-inline:.15rem}
  .ix-ba__facts li{grid-template-columns:1fr;gap:.25rem}
  .ix-ba__claim{max-width:none}
  .ix-gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .ix-gal__toolbar{flex-direction:column;align-items:stretch}
  .ix-gal__filters,
  .ix-gal__types{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .ix-gal__filters::-webkit-scrollbar,
  .ix-gal__types::-webkit-scrollbar{display:none}
  .ix-gal__filters button,
  .ix-gal__types button{flex:none}
}
@media (max-width:520px){
  .ix-ba__duo{
    grid-template-columns:1fr;
    max-width:min(100%,20rem);
  }
  .ix-ba__side figcaption b{font-size:.9rem}
}
@media (max-width:600px){
  .ix-gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .arsiv__meta b{font-size:.82rem}
  .kutu__ok{top:auto;bottom:1rem;translate:none}
  .kutu__ok--sol{left:1rem}
  .kutu__ok--sag{right:1rem}
  .kutu__say{bottom:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  .ix-gal__item,.arsiv__item,[data-ix-reveal]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .ix-gal__item:hover img,.arsiv__item:hover img{transform:none}
  .kutu{transition:none}
}

/* Dokunmatik: bkz. css/style.css sonundaki not, hareketli katmanların
   üstündeki backdrop-filter, kare başına yeniden bulanıklık demek. */
@media (pointer: coarse), (max-width: 760px) {
  .ix-gal__play,
  .arsiv__play{
    background:rgba(7,27,34,.78);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .kutu{
    background:rgba(2,10,13,.985);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

/* Açık sayfa bölümleri: body ink zemine düşmesin; gövde okunur kalsın.
   isler.html icerik.css yüklemiyor; .yazi stilleri burada. */
body.sayfa-isler .page-sec--soft,
body.sayfa-isler .page-sec--paper{
  color:var(--ink);
  background:var(--porcelain);
}
body.sayfa-isler .page-sec--paper{background:var(--paper)}
body.sayfa-isler .page-sec--soft .yazi,
body.sayfa-isler .page-sec--paper .yazi{
  max-width:44rem;
  font-size:1.075rem;
  line-height:1.72;
  color:var(--text);
}
body.sayfa-isler .yazi > * + *{margin-top:1.15em}
body.sayfa-isler .yazi h2{
  margin-top:2.6em;
  margin-bottom:.1em;
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  font-weight:560;
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;
  font-variation-settings:"SOFT" 48,"WONK" 0;
  scroll-margin-top:6rem;
}
body.sayfa-isler .yazi h2:first-child{margin-top:0}
body.sayfa-isler .yazi p{margin:0;color:var(--text)}
body.sayfa-isler .yazi a{
  color:var(--steam-dark);
  text-decoration:none;
  border-bottom:1px solid rgba(23,142,132,.38);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
body.sayfa-isler .yazi a:hover{border-bottom-color:currentColor}

/* Generator: örnek iş kartları (calismalar indexable) */
.vaka-dosya-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
}
.vaka-dosya-kart{margin:0}
.vaka-dosya-kart__link{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  color:inherit;
  text-decoration:none;
  height:100%;
}
.vaka-dosya-kart__gorsel{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--porcelain, #f4f1eb);
}
.vaka-dosya-kart__gorsel img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
}
.vaka-dosya-kart__baslik{
  margin:0;
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.35rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
}
.vaka-dosya-kart__meta{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}