/* ==========================================================================
   inka-neo — animasyonlu logo (LOGO ajanı)
   Geometri/renk orijinal SVG'lerle birebir; yalnız hareket eklenir. JS yok.
   1) Açılış (bir kez, ~1.2 sn): simge parçaları 45° eksende kayarak birleşir,
      "inka" yazısı soldan maskeyle açılır.
   2) "Bağlantı" döngüsü (header 4.5 sn, footer 7 sn, sonsuz):
        ~0.3–1.2 sn  iki sütun 45° eksende ayrılır (header'da ~2.5px), kısa bekler
        ~1.2–1.7 sn  hafif bir "tık" ile geri kilitlenir + ölçülü turkuaz parıltı
        ~1.9–2.9 sn  45° kesiklere paralel ince ışık şeridi geçer
        ~3.0–4.0 sn  köşe üçgenleri sırayla kısa yanıp söner (LED gibi)
        ~4.0–4.5 sn  tamamen durgun (dönüşüm/filtre yok → orijinalle birebir)
   3) Hover/focus: sütunlar daha geniş açılır, simge turkuaz parlar; bırakınca kilitlenir.
   Not: Chrome'da transform/filter animasyonu ETKİN olan bir SVG grubu, değer
   'none' iken bile farklı kenar yumuşatmasıyla çiziliyor (ölçüldü: ~%8 kenar
   pikseli). Bu yüzden hareket kopyada; asıl simge yalnız görünürlük değiştirir.
   will-change bilerek yok.
   ========================================================================== */

.inka-logo{
  --il-ease:cubic-bezier(.2,.7,.2,1);
  --il-dur:4.5s;      /* döngü süresi */
  --il-gecikme:1.3s;  /* açılıştan sonra ilk döngü */
  --il-ac:2.6;        /* sütun açılması (simge birimi; header'da ≈1.3px/eksen) */
  --il-parilti:.55;   /* kilitlenme parıltısı opaklığı */
  --il-led:.6;        /* LED parlaması opaklığı */
  display:inline-flex;align-items:center;line-height:0;
  color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  border-radius:6px;outline-offset:6px;
}
.inka-logo svg{display:block;height:100%;width:auto;overflow:visible}

/* Boyutlar */
.inka-logo--header{height:40px}
.inka-logo--footer{height:48px;--il-dur:7s;--il-ac:1.6;--il-parilti:.35;--il-led:.35;--il-gecikme:2s}
.inka-logo--hero{display:flex;justify-content:center;width:100%;height:100%;--il-ac:1.4}
.inka-logo--hero svg{width:100%;height:100%;max-width:100%}
@media (max-width:767.98px){.inka-logo--header{height:34px}}

/* --- 1) Açılış ---------------------------------------------------------- */
.inka-logo .il-p{
  transform-box:fill-box;
  animation:il-giris-sol .9s var(--il-ease) backwards;
}
.inka-logo .il-sag .il-p{animation-name:il-giris-sag}
.inka-logo .il-p1{animation-delay:.00s}
.inka-logo .il-p2{animation-delay:.06s}
.inka-logo .il-p3{animation-delay:.12s}
.inka-logo .il-p4{animation-delay:.04s}
.inka-logo .il-p5{animation-delay:.10s}
.inka-logo .il-p6{animation-delay:.16s}

@keyframes il-giris-sol{
  from{transform:translate(-14px,14px);opacity:0}
  35%{opacity:1}
  to{transform:none;opacity:1}
}
@keyframes il-giris-sag{
  from{transform:translate(14px,-14px);opacity:0}
  35%{opacity:1}
  to{transform:none;opacity:1}
}

/* "inka" yazısı soldan açılır */
.inka-logo .il-yazi{
  animation:il-yazi .8s var(--il-ease) .38s backwards;
}
@keyframes il-yazi{
  from{clip-path:inset(-10% 100% -10% 0);opacity:.2}
  to{clip-path:inset(-10% -10% -10% 0);opacity:1}
}

/* --- 2) Bağlantı döngüsü ------------------------------------------------ */
/* Asıl simge (.il-sabit) yalnız görünürlük değiştirir; hareketi kopya (.il-hareket)
   yapar. Böylece durgun anda asıl simgede etkin dönüşüm/filtre animasyonu olmaz. */
.inka-logo .il-hareket{visibility:hidden}
.inka-logo .il-sabit{animation:il-sabit var(--il-dur) linear var(--il-gecikme) infinite}
.inka-logo .il-hareket{animation:il-kopya var(--il-dur) linear var(--il-gecikme) infinite}
@keyframes il-sabit{0%{visibility:visible}6%,55%{visibility:hidden}55.01%,100%{visibility:visible}}
@keyframes il-kopya{0%,5.99%{visibility:hidden}6%,55%{visibility:visible}55.01%,100%{visibility:hidden}}

/* Kopya sütunlar: ayrıl → bekle → "tık" diye kilitlen; kilitlenince ölçülü parıltı */
.inka-logo .il-hareket .il-sol{animation:il-ayril-sol var(--il-dur) linear var(--il-gecikme) infinite}
.inka-logo .il-hareket .il-sag{animation:il-ayril-sag var(--il-dur) linear var(--il-gecikme) infinite}

@keyframes il-ayril-sol{
  0%,6%{transform:none;filter:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}
  20%,26%{transform:translate(calc(var(--il-ac) * -1px),calc(var(--il-ac) * 1px));filter:none;animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  33%{transform:translate(calc(var(--il-ac) * .1px),calc(var(--il-ac) * -.1px));filter:drop-shadow(0 0 0 rgba(110,233,240,0));animation-timing-function:ease-out}
  37%{transform:none;filter:drop-shadow(0 0 2.2px rgba(110,233,240,var(--il-parilti)));animation-timing-function:ease-in-out}
  55%,100%{transform:none;filter:none}
}
@keyframes il-ayril-sag{
  0%,6%{transform:none;filter:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}
  20%,26%{transform:translate(calc(var(--il-ac) * 1px),calc(var(--il-ac) * -1px));filter:none;animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  33%{transform:translate(calc(var(--il-ac) * -.1px),calc(var(--il-ac) * .1px));filter:drop-shadow(0 0 0 rgba(110,233,240,0));animation-timing-function:ease-out}
  37%{transform:none;filter:drop-shadow(0 0 2.2px rgba(110,233,240,var(--il-parilti)));animation-timing-function:ease-in-out}
  55%,100%{transform:none;filter:none}
}

/* Işık şeridi: parçalara kırpılmış, 45° kesiklere paralel ince bant */
.inka-logo .il-isik{
  opacity:0;
  animation:il-isik var(--il-dur) cubic-bezier(.4,0,.6,1) var(--il-gecikme) infinite;
}
@keyframes il-isik{
  0%,42%{transform:translateX(0);opacity:0}
  45%{opacity:1}
  61%{opacity:1}
  64%,100%{transform:translateX(110px);opacity:0}
}

/* Köşe üçgenleri: üstteki beyaz katman sırayla kısa yanar (LED gibi) */
.inka-logo .il-led{
  opacity:0;
  filter:drop-shadow(0 0 2px #6EE9F0);
  animation:il-led1 var(--il-dur) ease-in-out var(--il-gecikme) infinite;
}
.inka-logo .il-led2{animation-name:il-led2}
.inka-logo .il-led3{animation-name:il-led3}
.inka-logo .il-led4{animation-name:il-led4}
@keyframes il-led1{0%,66%{opacity:0}69.5%{opacity:var(--il-led)}74%,100%{opacity:0}}
@keyframes il-led2{0%,71%{opacity:0}74.5%{opacity:var(--il-led)}79%,100%{opacity:0}}
@keyframes il-led3{0%,76%{opacity:0}79.5%{opacity:var(--il-led)}84%,100%{opacity:0}}
@keyframes il-led4{0%,81%{opacity:0}84.5%{opacity:var(--il-led)}89%,100%{opacity:0}}

/* --- 3) Hover / klavye odağı ------------------------------------------- */
.inka-logo .il-i{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.inka-logo .il-simge{transition:filter .45s var(--il-ease)}
.inka-logo:hover .il-sol .il-i,.inka-logo:focus-visible .il-sol .il-i{transform:translate(-3.2px,3.2px)}
.inka-logo:hover .il-sag .il-i,.inka-logo:focus-visible .il-sag .il-i{transform:translate(3.2px,-3.2px)}
.inka-logo:hover .il-simge,.inka-logo:focus-visible .il-simge{filter:drop-shadow(0 0 2.6px rgba(110,233,240,.6))}
.inka-logo:focus-visible{outline:2px solid #6EE9F0}

/* --- Hareket azaltma: tamamen statik ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  .inka-logo *{animation:none!important;transition:none!important}
  .inka-logo .il-hareket{visibility:hidden}
  .inka-logo .il-isik,.inka-logo .il-led{opacity:0}
  .inka-logo .il-i{transform:none!important}
  .inka-logo .il-simge{filter:none!important}
}