/* KRK Partners — motto bandı (.cta-band) ortak görünümü (28.09.2026).

   Öncesi: krk-cta-video.js her sayfada cdn.coverr.co'dan 1080p bir stok video
   çekip banda koyuyor, ayrıca başlığı daktilo efektiyle önce silip yeniden
   yazıyordu. İki sorun vardı: 12 sayfada dış kaynaklı ağır bir video, ve JS
   gecikirse boş kalan bir başlık.

   Şimdi bant tamamen CSS. Yaklaşım Avatar Investments'in hero kurgusundan
   uyarlandı (video/canvas/kütüphane yok, katmanlı degradeler), renkler ve
   ölçüler KRK paletine çevrildi.

   Bu dosya sayfaların kendi <style> bloğundan SONRA, krk-responsive.css'ten
   önce yüklenir — böylece sayfaların .cta-band zemin/padding tanımları
   korunur, buradaki katmanlar onların üzerine biner.

   İki kapsam vardır:
     .cta-band          → her bantta: akan ızgara + nefes alan ışıma
     .cta-band.motto    → yalnızca "Knowledge & Strategy & Results" bandında:
                          tek satır düzeni ve kelimeler arasında ilerleyen vurgu
   Abonelik/hesaplama bantları .motto almaz; onların alt satırı okura ne
   sunulduğunu anlatan işlevsel metindir, süs değildir. */

/* ---- Her bant: zemin katmanları -------------------------------------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate}

/* Işıma: bakışı başlığa toplar, 14 sn'de hafifçe büyüyüp soluyor. */
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 54% at 50% 38%, rgba(226,112,58,.17) 0%, rgba(226,112,58,0) 70%);
  animation:krkIsimaNefes 14s ease-in-out infinite;will-change:opacity,transform}

/* İzometrik ızgara. Çizgi saydamlığı antrasit zemine göre seçildi: Avatar
   saf siyah üzerine ~.0024 etkin alfa kullanıyor, #2b2b2b üzerinde o değer
   tümüyle kaybolurdu. Maske kenarlara doğru söndürür ki bant milimetrik
   kâğıt gibi durmasın. */
.cta-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(60deg,  rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(        rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 84px, 48px 84px, 48px 48px;
  -webkit-mask-image:radial-gradient(115% 95% at 50% 50%, #000 42%, transparent 100%);
          mask-image:radial-gradient(115% 95% at 50% 50%, #000 42%, transparent 100%);
  animation:krkIzgaraAkis 42s linear infinite;will-change:background-position}

.cta-band>.wrap{position:relative;z-index:1}

/* Kaymalar döşem ölçüsünün TAM KATI (48x84 → 96/168, 48x48 → 96); aksi
   halde döngü başa dönerken sıçrardı. Üst iki katman zıt yöne gidince örgü
   aşağı akıyormuş gibi okunur. 42 = 3 x 14, yani bant 42 sn'de tam kapanır. */
@keyframes krkIzgaraAkis{
  from{background-position:0 0, 0 0, 0 0}
  to  {background-position:96px 168px, -96px 168px, 0 96px}
}
@keyframes krkIsimaNefes{
  0%,100%{opacity:.74;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.06)}
}

/* ---- Yalnızca motto bandı -------------------------------------------- */
/* Tek satır: başlık ve buton yan yana, aradaki açıklama satırı kaldırıldı.
   flex-wrap sayesinde dar ekranda buton alta düşer; başlık sıkışmaz. */
.cta-band.motto>.wrap{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:16px 34px}
.cta-band.motto h2{margin:0}
.cta-band.motto .btn{flex:0 0 auto}

/* Vurgu üç kelime boyunca soldan sağa ilerler: kelime rengi alır, altı
   soldan büyür, sonra sağdan toplanıp sıradakine devreder. Daktilodan farkı:
   metin hiçbir an gizlenmez. Döngü 7,5 sn, kelimeler 2,5 sn arayla. */
.cta-band.motto h2 .w{position:relative;display:inline-block;color:#fff;
  animation:krkVurgu 7.5s ease-in-out infinite}
.cta-band.motto h2 .w::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left center;
  animation:krkCizgiAkis 7.5s ease-in-out infinite}
.cta-band.motto h2 .w:nth-of-type(2),
.cta-band.motto h2 .w:nth-of-type(2)::after{animation-delay:2.5s}
.cta-band.motto h2 .w:nth-of-type(3),
.cta-band.motto h2 .w:nth-of-type(3)::after{animation-delay:5s}

@keyframes krkVurgu{0%,28%{color:#f2894f}40%,100%{color:#fff}}
@keyframes krkCizgiAkis{
  0%       {transform:scaleX(0);transform-origin:left center}
  8%,28%   {transform:scaleX(1);transform-origin:left center}
  40%,100% {transform:scaleX(0);transform-origin:right center}
}

/* ---- Düşük hareket tercihi ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .cta-band::before,.cta-band::after{animation:none}
  .cta-band.motto h2 .w{animation:none;color:#fff}
  .cta-band.motto h2 .w:first-of-type{color:#f2894f}
  .cta-band.motto h2 .w::after{animation:none;transform:scaleX(0)}
}