/* ==========================================================
   İMZA PAKETİ — bizim sitelerimizin ortak hareket dili
   Kopyala-yapıştır: imza/imza.css + imza/imza.js
   Renk kullanmaz; sadece hareket. Renkleri site kendi verir:
     --imza-vurgu   (varsayılan: currentColor)
     --imza-perde   (perde arka planı)
   ========================================================== */

:root{
  --imza-vurgu:currentColor;
  --imza-perde:#0a0a0a;
  --imza-ease:cubic-bezier(.22,1,.36,1);
  --imza-hiz:.7s;
}

/* ---------- 1) AÇILIŞ PERDESİ ----------
   Sayfa hazır olana kadar duran, sonra yukarı sıyrılan katman. */
.imza-perde{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;gap:18px;
  background:var(--imza-perde);
  transition:transform .8s var(--imza-ease),opacity .5s .25s;
}
.imza-perde[hidden]{display:none}
.imza-perde.bitti{transform:translateY(-101%);opacity:0;pointer-events:none}
.imza-perde-ic{display:grid;place-items:center;gap:16px;text-align:center}
.imza-perde svg{width:76px;height:76px;overflow:visible}
/* çizgiler kendini çiziyormuş gibi */
.imza-perde svg [data-ciz]{
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  animation:imza-ciz 1s var(--imza-ease) forwards;
}
.imza-perde svg [data-ciz="2"]{animation-delay:.12s}
.imza-perde svg [data-ciz="3"]{animation-delay:.24s}
@keyframes imza-ciz{to{stroke-dashoffset:0}}
.imza-perde-ad{
  font-size:14px;letter-spacing:3px;text-transform:uppercase;opacity:0;
  animation:imza-belir .6s .5s var(--imza-ease) forwards;
}
@keyframes imza-belir{to{opacity:.85}}
.imza-perde-cizgi{
  width:120px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.12);
}
.imza-perde-cizgi i{
  display:block;height:100%;width:0;background:var(--imza-vurgu);
  animation:imza-dolu 1.1s .2s var(--imza-ease) forwards;
}
@keyframes imza-dolu{to{width:100%}}

/* ---------- 2) KAYDIRINCA BELİRME ----------
   .js yoksa hiç uygulanmaz → JS ölse bile içerik görünür kalır. */
.js .imza-gel{opacity:0;transform:translateY(26px);transition:opacity var(--imza-hiz) var(--imza-ease),transform var(--imza-hiz) var(--imza-ease)}
.js .imza-gel.ic{opacity:1;transform:none}
.js .imza-gel[data-imza-yon="sol"]{transform:translateX(-30px)}
.js .imza-gel[data-imza-yon="sag"]{transform:translateX(30px)}
.js .imza-gel[data-imza-yon="olcek"]{transform:scale(.94)}
.js .imza-gel[data-imza-yon].ic{transform:none}
/* DAR EKRANDA YANDAN GİRİŞ YOK (2026-09-28). Telefonda kartlar alt alta,
   ekran kenarına kadar uzanıyor; "sag" 30 px itilmiş bekleyen öğe sayfayı
   375 -> 385 px genişletiyordu (tarayıcı görünümü uzaklaştırıp yana
   kaydırılabilir yapıyor; ölçüldü: iklim/ a.cihaz). Aşağıdan gelir. */
@media (max-width:700px){
  .js .imza-gel[data-imza-yon="sol"],.js .imza-gel[data-imza-yon="sag"]{transform:translateY(26px)}
  .js .imza-gel[data-imza-yon].ic{transform:none}
}

/* ---------- 3) KELİME KELİME BAŞLIK ----------
   JS başlığı kelimelere böler; her kelime alttan kayarak gelir. */
.imza-kelime{display:inline-block;overflow:hidden;vertical-align:bottom;
  /* ş ç ğ gibi alt çıkıntılı harfler kırpılmasın */
  padding-bottom:.14em;margin-bottom:-.14em}
.imza-kelime > i{
  display:inline-block;font-style:inherit;
  transform:translateY(110%);
  transition:transform .85s var(--imza-ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.ic .imza-kelime > i,.imza-kelime.ic > i{transform:none}

/* ---------- 4) İMLEÇ TAKİPLİ PARLAMA (spotlight) ---------- */
.imza-spot{position:relative;isolation:isolate}
.imza-spot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--imza-vurgu) 16%,transparent),transparent 65%);
}
.imza-spot:hover::after{opacity:1}

/* ---------- 5) HAFİF EĞİLME (tilt) ---------- */
.imza-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--imza-ease)}
.imza-tilt.aktif{transition:transform .12s linear}

/* ---------- 6) MIKNATIS DÜĞME ---------- */
.imza-magnet{will-change:transform;transition:transform .45s var(--imza-ease)}

/* 7) SCROLL'A BAĞLI ÇİZGİ — KALDIRILDI (2026-09-23). Bkz. imza.js. */

/* ---------- 8) SAYAÇ ---------- */
.imza-sayac{font-variant-numeric:tabular-nums}

/* ---------- 9) SATIR SATIR ÇİZİLEN ALT ÇİZGİ ---------- */
.imza-alt{background-image:linear-gradient(var(--imza-vurgu),var(--imza-vurgu));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size .5s var(--imza-ease)}
.ic .imza-alt,.imza-alt.ic{background-size:100% 2px}

/* ---------- hareket istemeyene saygı ---------- */
@media (prefers-reduced-motion:reduce){
  .js .imza-gel{opacity:1;transform:none}
  .imza-kelime > i{transform:none}
  .imza-perde{display:none}
  .imza-spot::after{display:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}