@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   ECHO AJANS — İŞLERİMİZ sayfası
   style.css'in üstüne biner: renkler, tipografi, buton ve üst çubuk
   oradan gelir. Burada yalnızca bu sayfaya ait düzen var.
   ══════════════════════════════════════════════════════════════════ */

.sayfa-isler{background:var(--ink)}

/* ══ SAYFA BAŞLIĞI ══ */
.isbas{
  /* Tam ekran: 82vh iken kalan boşluktan destenin ilk kartı
     kaydırmadan görünüyordu. */
  min-height:100dvh;display:grid;align-content:center;
  padding:calc(var(--hdr) + 40px) var(--gut) 40px
          calc(var(--col) + clamp(24px,3vw,56px));
  position:relative;
}
.isbas__in{max-width:min(620px,94%)}
.isbas h1{
  font-family:var(--ser);font-weight:300;
  font-size:clamp(30px,4.6vw,62px);line-height:1.08;letter-spacing:-.02em;
  margin-top:4px;
}
.isbas__p{
  margin-top:clamp(14px,1.8vw,22px);max-width:42ch;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.62;color:var(--text-2);
}
.isbas__ipucu{
  position:absolute;left:calc(var(--col) + clamp(24px,3vw,56px));
  bottom:clamp(26px,5vh,54px);
  font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:9px;
}
.isbas__ipucu i{width:30px;height:1px;background:currentColor;position:relative;overflow:hidden}
.isbas__ipucu i::after{content:'';position:absolute;inset:0;background:#fff;
  animation:scrub 2.4s var(--ei) infinite}

/* ══ AKIŞ — 3B sahne ══
   .akis__sahne ekrana çivilenir, .akis__ray yalnızca kaydırma mesafesi üretir. */
.akis{position:relative}
/* deste akış bölümünün içinde yapışkan durur: bölüm bitince kartlar da biter */
.akis__sahne{
  position:sticky;top:0;height:100dvh;z-index:20;
  pointer-events:none;
  display:none;                       /* JS açar */
}
body.akis-acik .akis__sahne{display:block}

/* akış açıkken düz liste gizlenir (JS zaten kartları sahneye taşır) */
body.akis-acik .akis__liste{display:none}

/* ── tek iş kartı ── */
/* --kw kartın genişliği; merkezleme onun yarısıyla yapılıyor.
   Deste düzeninde komşu kartlar da görünsün diye aktif kart ekranın
   yarısından biraz geniş. (min() daha NEGATİF olanı seçtiği için
   merkezlemede min(-320px,-37vw) gibi yazımlar kullanılmaz.) */
.akis__sahne .is{
  --kw:min(540px,44vw);   /* daha geniş olursa komşu kartlar ekran kenarında kesiliyor */
  position:absolute;top:50%;left:50%;
  width:var(--kw);margin:0;
  margin-left:calc(var(--kw) / -2);
  /* dikey merkezleme JS'teki translate3d(...,-50%,...) ile yapılıyor:
     kartın yüksekliği artık metinle birlikte değiştiği için sabit pay tutmaz */
  transform-origin:50% 50%;
  will-change:transform,opacity;
  pointer-events:none;
}
.akis__sahne .is.is--etkin .is__kutu{pointer-events:auto}

.is__kutu{display:block;position:relative;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--coal);
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
a.is__kutu{transition:border-color .35s var(--e)}
a.is__kutu:hover{border-color:var(--line-2)}

/* Görsel alanı sabit 3:2 kalır; yüklenen görsel hangi oranda olursa olsun
   tamamı kırpılmadan bu alanın içine sığdırılır. */
.is__gorsel{
  margin:0;position:relative;aspect-ratio:3/2;
  background:var(--coal-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.is__gorsel img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Metin görselin ALTINDA, kendi zemininde. Üstte dururken açık renkli
   site ve Instagram kapaklarıyla çakışıyordu; karartma da görseli bozuyordu. */
.is__metin{
  padding:clamp(15px,1.8vw,22px) clamp(17px,2.1vw,26px) clamp(17px,2.1vw,24px);
  display:grid;gap:6px;justify-items:start;
  background:var(--coal);border-top:1px solid var(--line);
}
.is__no{font-size:9px;color:var(--text-3)}
.is__baslik{
  font-family:var(--ser);font-weight:300;
  font-size:clamp(20px,2.3vw,31px);line-height:1.14;letter-spacing:-.01em;
}
.is__ozet{font-size:clamp(12.5px,1vw,14.5px);line-height:1.55;color:var(--text-2);max-width:44ch}
.is__git{
  margin-top:8px;font-size:9.5px;color:var(--blue-glow);
  display:inline-flex;align-items:center;gap:8px;
}
.is__git i{font-style:normal;transition:transform .4s var(--e)}
a.is__kutu:hover .is__git i{transform:translateX(4px)}

/* ══ KAPANIŞ ══ */
.isson{
  position:relative;z-index:30;background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(60px,11vh,130px) var(--gut) clamp(60px,11vh,130px)
          calc(var(--col) + clamp(24px,3vw,56px));
}
.isson__in{max-width:min(620px,94%)}
.isson h2{
  font-family:var(--ser);font-weight:300;
  font-size:clamp(26px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;
}
.isson__p{
  margin-top:clamp(13px,1.7vw,20px);max-width:46ch;
  font-size:clamp(13.5px,1.15vw,16.5px);line-height:1.62;color:var(--text-2);
}

/* ══════════ DÜZ LİSTE ══════════
   JS yokken, hareket azaltılmışken ve akış kapalıyken görünen hal.
   İçerik 3B akışla birebir aynı — bota farklı bir şey sunulmuyor.   */
.akis__liste{
  list-style:none;display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
  padding:0 var(--gut) clamp(50px,9vh,110px)
          calc(var(--col) + clamp(24px,3vw,56px));
}
.akis__liste .is{margin:0}
.akis__liste .is__kutu{box-shadow:none}


/* hareket azaltıldığında sahne hiç kurulmaz, liste kalır */
.duragan .akis__sahne{display:none}
.duragan .isbas__ipucu{display:none}

@media (max-width:900px){
  .isbas,.isson,.akis__liste{padding-left:var(--gut)}
  .isbas__ipucu{left:var(--gut)}
  .akis__sahne .is{--kw:min(520px,76vw)}
}
@media (max-width:520px){
  .isbas h1{font-size:clamp(26px,7vw,34px)}
  .isbas h1 br{display:none}
  .akis__sahne .is{--kw:min(460px,80vw)}
}