/*
 * Kulüp çizimleri — includes/kulup/cizimler.php'nin SVG'leri için stil + hareket.
 * Tüm seçiciler ".kl-cz" önekli (ana siteye sızmaz). Yalnız transform / opacity / stroke-dashoffset canlanır.
 * Taban stiller "duran kare"dir: hareket kapalıyken (prefers-reduced-motion) her şey eksiksiz görünür,
 * jetonlar ve halkalar gizli kalır. Sarı/altın yok: marka mavisi #2F6BFF + gök #5DB3F0.
 *
 * Sahne döngüsü 12 sn (yüzde = saniye / 12):
 *   0.0  fikir kıvılcımı · 0.5–1.4 jeton → ajan · 1.4 ajan parlar · 2.0–2.8 jeton → editör
 *   3.0–5.4 kod satırları yazılır (gecikmeler PHP'de) · 5.7–6.5 jeton → tarayıcı
 *   6.6–7.9 tarayıcı + telefon kurulur · 8.3 yeşil tik · kod 10.6'dan, cihazlar sonraki turun 2.2'sinden
 *   itibaren aynı sırayla silinir (dalga) — sahne hiç tamamen boşalmaz.
 * Boş durumlar 8 sn döngü.
 */

.kl-cz { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- çerçeveler, yüzeyler ---------- */
.kl-cz-cer { fill: #131B30; stroke: rgba(142, 162, 255, .35); stroke-width: 1.5; }
.kl-cz-bar { fill: #18213A; }
.kl-cz-ayr { stroke: #2C3854; stroke-width: 1; }
.kl-cz-nk { stroke: rgba(142, 162, 255, .45); stroke-width: 1.1; }
.kl-cz-url { fill: #131B30; stroke: rgba(142, 162, 255, .2); stroke-width: 1; }
.kl-cz-sekme { fill: #131B30; }
.kl-cz-oyuk { stroke: #0D1325; stroke-width: 7; }
.kl-cz-centik { fill: #18213A; stroke: rgba(142, 162, 255, .3); stroke-width: 1; }
.kl-cz-dugum { fill: #131B30; stroke: rgba(142, 162, 255, .35); stroke-width: 1.5; }

/* ---------- akış yolları + jetonlar ---------- */
.kl-cz-bag { stroke: rgba(142, 162, 255, .35); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 5;
  animation: kl-cz-ak 2.8s linear infinite; }
.kl-cz-ok { stroke: rgba(142, 162, 255, .55); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kl-cz-jt, .kl-cz-jh, .kl-cz-jz { stroke-linecap: round; stroke-dasharray: .5 200; stroke-dashoffset: 3; opacity: 0;
  animation: 12s cubic-bezier(.55, 0, .35, 1) infinite both; }
.kl-cz-jt { stroke: #F3F5FA; stroke-width: 4.2; }
.kl-cz-jh { stroke: #5DB3F0; stroke-width: 13; stroke-opacity: .34; }
.kl-cz-jz { stroke: #5DB3F0; stroke-width: 2.2; stroke-opacity: .6; stroke-dasharray: 10 200; animation-delay: .09s; }
.kl-cz-j1 { animation-name: kl-cz-j1; }
.kl-cz-j2 { animation-name: kl-cz-j2; }
.kl-cz-j3 { animation-name: kl-cz-j3; }

/* varış halkaları (L.flow fRing) */
.kl-cz-halka { stroke: #5DB3F0; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: 12s cubic-bezier(.2, .6, .3, 1) infinite; }
.kl-cz-h1 { animation-name: kl-cz-h1; }
.kl-cz-h2 { animation-name: kl-cz-h2; }
.kl-cz-h3 { animation-name: kl-cz-h3; }
.kl-cz-h4 { animation-name: kl-cz-h4; }
.kl-cz-h5 { stroke: #4ADE80; animation-name: kl-cz-h5; }

/* ---------- fikir düğümü ---------- */
.kl-cz-amp { stroke: #F3F5FA; stroke-linecap: round; stroke-linejoin: round; }
.kl-cz-cam { fill: #5DB3F0; opacity: .22; animation: kl-cz-cam 12s ease-in-out infinite; }
.kl-cz-isin { stroke: #5DB3F0; stroke-width: 1.6; stroke-linecap: round; opacity: .55; transform-box: fill-box; transform-origin: center;
  animation: kl-cz-isin 12s ease-in-out infinite; }

/* ---------- ajan (L.agent) ---------- */
.kl-cz-yor { stroke: rgba(142, 162, 255, .09); stroke-width: 1; }
.kl-cz-yor-k { stroke: rgba(142, 162, 255, .16); stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: kl-cz-don 90s linear infinite; }
.kl-cz-isik { opacity: .8; transform-box: fill-box; transform-origin: center; animation: kl-cz-isik 12s ease-in-out infinite; }
.kl-cz-isik-b { animation: kl-cz-nefes 5s ease-in-out infinite alternate; }
.kl-cz-zemin { fill: rgba(47, 107, 255, .1); stroke: rgba(93, 179, 240, .35); stroke-width: 1.2; transform-box: fill-box; transform-origin: center;
  animation: kl-cz-gol 6s ease-in-out infinite alternate; }
.kl-cz-suz { animation: kl-cz-suz 6s ease-in-out infinite alternate; }
.kl-cz-ag { fill: #131B30; stroke: #F3F5FA; }
.kl-cz-ag-c { stroke: #F3F5FA; stroke-linecap: round; }
.kl-cz-vizor { fill: #070A12; stroke: rgba(93, 179, 240, .4); stroke-width: 1.4; }
.kl-cz-goz { fill: #5DB3F0; transform-box: fill-box; transform-origin: center; animation: kl-cz-kirp 5.4s ease-in-out infinite; }
.kl-cz-rozet { fill: #131B30; stroke: rgba(93, 179, 240, .6); stroke-width: 1.6; }
.kl-cz-rozet-i { fill: #5DB3F0; opacity: .16; animation: kl-cz-rozet 12s ease-in-out infinite; }
.kl-cz-rozet-c { stroke: #5DB3F0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- kod editörü (L.codeWindow) ---------- */
.kl-cz-no { fill: #2C3854; }
.kl-cz-ln { stroke: #2C3854; stroke-width: 3; stroke-linecap: round; }
.kl-cz-k1 { fill: #5DB3F0; }
.kl-cz-k2 { fill: #8EA2FF; }
.kl-cz-k3 { fill: rgba(182, 190, 208, .55); }
.kl-cz-k4 { fill: #4ADE80; }
.kl-cz-k5 { fill: #F472B6; }
.kl-cz-s1 { stroke: #5DB3F0; }
.kl-cz-s2 { stroke: #8EA2FF; }
.kl-cz-s3 { stroke: rgba(182, 190, 208, .55); }
.kl-cz-s4 { stroke: #4ADE80; }
.kl-cz-s5 { stroke: #F472B6; }
.kl-cz-sekme-y { opacity: .7; }
.kl-cz-yaz { stroke-width: 4.5; stroke-linecap: round; animation: kl-cz-yaz 12s ease-out infinite both; }
.kl-cz-imlec, .kl-cz-imyan { stroke: #F3F5FA; stroke-width: 1.6; stroke-linecap: round; }
.kl-cz-imlec { opacity: 0; animation: kl-cz-imlec 12s linear infinite; }  /* dolgu yok: gecikmede gizli kalır */
.kl-cz-imyan { animation: kl-cz-yan 1.1s step-end infinite; }
.kl-cz-imson { animation: kl-cz-imson 12s linear infinite; }

/* ---------- cihaz iskeletleri (L.lineDevice) ---------- */
.kl-cz-sk-logo { fill: #5DB3F0; }
.kl-cz-sk-ttl { fill: rgba(243, 245, 250, .8); }
.kl-cz-sk-txt { fill: rgba(182, 190, 208, .35); }
.kl-cz-sk-txt2 { fill: rgba(182, 190, 208, .22); }
.kl-cz-sk-hero { fill: rgba(47, 107, 255, .14); stroke: rgba(93, 179, 240, .35); stroke-width: 1; }
.kl-cz-sk-img { fill: rgba(142, 162, 255, .07); stroke: rgba(142, 162, 255, .25); stroke-width: 1; }
.kl-cz-sk-card { fill: rgba(243, 245, 250, .03); stroke: rgba(142, 162, 255, .22); stroke-width: 1; }
.kl-cz-sk-bos { stroke: rgba(142, 162, 255, .4); stroke-width: 1; stroke-dasharray: 3 3; }
.kl-cz-sk-arti { stroke: rgba(142, 162, 255, .6); stroke-width: 1.4; stroke-linecap: round; }
.kl-cz-sk-dot { stroke: rgba(93, 179, 240, .75); stroke-width: 1.2; }
.kl-cz-kur { animation: kl-cz-kur 12s cubic-bezier(.2, .7, .3, 1) infinite both; }

/* yeşil tik */
.kl-cz-onay { transform-box: fill-box; transform-origin: center; animation: kl-cz-onay 12s cubic-bezier(.3, .7, .4, 1.2) infinite both; }
.kl-cz-onay-z { fill: #4ADE80; }
.kl-cz-onay-c { stroke: #070A12; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  animation: kl-cz-tik 12s ease-out infinite both; }

/* ---------- boş durumlar ---------- */
.kl-cz-ekran { fill: #0C1222; stroke: #2C3854; stroke-width: 1; }
.kl-cz-ucgen { fill: #F3F5FA; }
.kl-cz-iz { fill: rgba(243, 245, 250, .14); }
.kl-cz-nokta { fill: #F3F5FA; }
.kl-cz-b-oynat { transform-box: fill-box; transform-origin: center; animation: kl-cz-b-oynat 8s ease-in-out infinite; }
.kl-cz-b-ilerle { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.6); animation: kl-cz-b-ilerle 8s cubic-bezier(.45, 0, .55, 1) infinite; }
.kl-cz-b-nokta { transform: translateX(50.4px); animation: kl-cz-b-nokta 8s cubic-bezier(.45, 0, .55, 1) infinite; }
.kl-cz-b-kur { animation: kl-cz-b-kur 8s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-hucre { stroke: #2C3854; stroke-width: 1; }
.kl-cz-bugun { stroke: rgba(93, 179, 240, .7); stroke-width: 1.2; }
.kl-cz-b-dol { transform-box: fill-box; transform-origin: center; animation: kl-cz-b-dol 8s cubic-bezier(.3, .7, .4, 1.15) infinite both; }
.kl-cz-balon { fill: #131B30; stroke: rgba(142, 162, 255, .35); stroke-width: 1.5; stroke-linejoin: round; }
.kl-cz-balon-m { fill: rgba(47, 107, 255, .2); stroke: rgba(93, 179, 240, .55); stroke-width: 1.5; stroke-linejoin: round; }
.kl-cz-b-balon { transform-box: fill-box; transform-origin: 0 100%; animation: kl-cz-b-balon 8s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-b-sag { transform-box: fill-box; transform-origin: 100% 100%; }
.kl-cz-b-zipla { fill: #8EA2FF; opacity: .8; animation: kl-cz-b-zipla 1.2s ease-in-out infinite both; }

/* ---------- kare dizileri ---------- */
@keyframes kl-cz-ak { to { stroke-dashoffset: -7; } }
@keyframes kl-cz-don { to { transform: rotate(360deg); } }
@keyframes kl-cz-suz { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes kl-cz-gol { to { transform: scaleX(.86); opacity: .6; } }
@keyframes kl-cz-kirp { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes kl-cz-nefes { from { opacity: .55; transform: scale(.94); } to { opacity: .95; transform: scale(1.03); } }
@keyframes kl-cz-yan { 50% { opacity: 0; } }

@keyframes kl-cz-j1 { 0%, 4.2% { stroke-dashoffset: 3; opacity: 0; } 5.4%, 10.6% { opacity: 1; } 11.7%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes kl-cz-j2 { 0%, 16.7% { stroke-dashoffset: 3; opacity: 0; } 17.9%, 22.3% { opacity: 1; } 23.3%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes kl-cz-j3 { 0%, 47.5% { stroke-dashoffset: 3; opacity: 0; } 48.7%, 53.2% { opacity: 1; } 54.2%, 100% { stroke-dashoffset: -100; opacity: 0; } }

@keyframes kl-cz-h1 { 0%, 1.2% { opacity: 0; transform: scale(1); } 2.4% { opacity: .7; } 8.4%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes kl-cz-h2 { 0%, 11.7% { opacity: 0; transform: scale(1); } 12.6% { opacity: .9; } 18.3%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes kl-cz-h3 { 0%, 23.3% { opacity: 0; transform: scale(1); } 24.4% { opacity: .75; } 30.8%, 100% { opacity: 0; transform: scale(1.06); } }
@keyframes kl-cz-h4 { 0%, 54.2% { opacity: 0; transform: scale(1); } 55.3% { opacity: .75; } 60.8%, 100% { opacity: 0; transform: scale(1.07); } }
@keyframes kl-cz-h5 { 0%, 69.2% { opacity: 0; transform: scale(1); } 70.4% { opacity: .8; } 76.7%, 100% { opacity: 0; transform: scale(1.9); } }

@keyframes kl-cz-cam { 0% { opacity: .08; } 2.5% { opacity: .6; } 10%, 88% { opacity: .22; } 100% { opacity: .08; } }
@keyframes kl-cz-isin { 0% { opacity: .2; transform: scale(.86); } 2.5% { opacity: 1; transform: scale(1.06); }
  10%, 88% { opacity: .55; transform: scale(1); } 100% { opacity: .2; transform: scale(.86); } }
@keyframes kl-cz-isik { 0%, 11.7% { opacity: .6; transform: scale(.95); } 14.5% { opacity: 1; transform: scale(1.04); }
  24%, 88% { opacity: .8; transform: scale(1); } 100% { opacity: .6; transform: scale(.95); } }
@keyframes kl-cz-rozet { 0%, 11.7% { opacity: .16; } 13.5%, 19% { opacity: .75; } 24%, 100% { opacity: .16; } }

/* kod parçası / cihaz bloğu / tik: kendi gecikmesinde belirir, ~7.6 sn kalır, aynı sırayla silinir (dalga) */
@keyframes kl-cz-yaz { 0% { opacity: 0; transform: translateX(-3px); } 1.1%, 63.3% { opacity: 1; transform: none; } 66.7%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-imlec { 0%, 1.99% { opacity: 1; } 2%, 100% { opacity: 0; } }
@keyframes kl-cz-imson { 0%, 44.9% { opacity: 0; } 45%, 88.3% { opacity: 1; } 88.4%, 100% { opacity: 0; } }
@keyframes kl-cz-kur { 0% { opacity: 0; transform: translateY(4px); } 3%, 63.3% { opacity: 1; transform: none; } 66.7%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-onay { 0% { opacity: 0; transform: scale(.3); } 2.5% { opacity: 1; transform: scale(1.12); }
  4.5%, 45% { opacity: 1; transform: scale(1); } 48.3%, 100% { opacity: 0; transform: scale(.85); } }  /* cihazlar silinmeden önce gider */
@keyframes kl-cz-tik { 0%, 1.5% { stroke-dashoffset: 1; } 5%, 100% { stroke-dashoffset: 0; } }

/* boş durumlar (8 sn) */
@keyframes kl-cz-b-oynat { 0%, 100% { transform: scale(1); } 3% { transform: scale(.92); } 7% { transform: scale(1.06); } 11% { transform: scale(1); } }
@keyframes kl-cz-b-ilerle { 0%, 6% { transform: scaleX(0); opacity: 1; } 78%, 88% { transform: scaleX(1); opacity: 1; } 95%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes kl-cz-b-nokta { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 6% { transform: translateX(0); }
  78%, 88% { transform: translateX(84px); opacity: 1; } 95%, 100% { transform: translateX(84px); opacity: 0; } }
@keyframes kl-cz-b-kur { 0% { opacity: 0; transform: translateY(4px); } 5%, 72% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-b-dol { 0% { opacity: 0; transform: scale(.5); } 5%, 72% { opacity: 1; transform: scale(1); } 78%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kl-cz-b-balon { 0% { opacity: 0; transform: translateY(5px) scale(.94); } 5%, 76% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-b-zipla { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .kl-cz * { animation: none !important; }
}

/* =====================================================================================
 * Satış sayfası çizimleri (kulupCizimAdim / kulupCizimProje / kulupCizimKitle) — kl-cz-y-*
 * Sade: ince çizgi, parıltı yok denecek kadar az. Ortak 9 sn döngü; her öğe kendi gecikmesinde
 * belirir, aynı sırayla silinir. Taban stiller duran karedir (hareket kapalıyken eksiksiz).
 * ===================================================================================== */
.kl-cz-s6 { stroke: rgba(243, 245, 250, .75); }
.kl-cz-s7 { stroke: rgba(182, 190, 208, .32); }
.kl-cz-y-no { stroke: #2C3854; }
.kl-cz-y-nok { stroke: rgba(142, 162, 255, .42); stroke-width: 1.4; stroke-dasharray: .1 5; }
.kl-cz-y-yol { stroke: #5DB3F0; stroke-width: 1.6; }
.kl-cz-y-ince { stroke: rgba(142, 162, 255, .45); stroke-width: 1.1; }
.kl-cz-y-pill { stroke: #2C3854; stroke-width: 1; }
.kl-cz-y-sec { fill: rgba(93, 179, 240, .08); stroke: rgba(93, 179, 240, .55); stroke-width: 1; }
.kl-cz-y-sec2 { stroke: rgba(93, 179, 240, .55); stroke-width: 1.2; }
.kl-cz-y-gok { fill: #5DB3F0; }
.kl-cz-y-chip { stroke: rgba(142, 162, 255, .16); }
.kl-cz-y-chip0 { stroke: rgba(142, 162, 255, .05); }
.kl-cz-y-tik { stroke: #070A12; }
.kl-cz-y-yesil { stroke: rgba(74, 222, 128, .55); stroke-width: 1.2; }
.kl-cz-y-bildirim { fill: #18213A; stroke: rgba(74, 222, 128, .35); stroke-width: 1; }
.kl-cz-y-ipucu { fill: #18213A; stroke: rgba(142, 162, 255, .35); stroke-width: 1; }
.kl-cz-y-ok-i { fill: #F3F5FA; stroke: #070A12; stroke-width: 1; }
.kl-cz-y-vurgu { fill: rgba(93, 179, 240, .07); }
.kl-cz-y-gorsel { fill: rgba(142, 162, 255, .07); }
.kl-cz-y-av1 { fill: rgba(93, 179, 240, .12); stroke: rgba(93, 179, 240, .7); stroke-width: 1.1; }
.kl-cz-y-av2 { fill: rgba(142, 162, 255, .12); stroke: rgba(142, 162, 255, .7); stroke-width: 1.1; }
.kl-cz-y-av3 { fill: rgba(244, 114, 182, .1); stroke: rgba(244, 114, 182, .6); stroke-width: 1.1; }
.kl-cz-y-av4 { fill: rgba(74, 222, 128, .1); stroke: rgba(74, 222, 128, .6); stroke-width: 1.1; }
.kl-cz-y-dl { stroke: rgba(142, 162, 255, .16); }
.kl-cz-y-dg { stroke: rgba(93, 179, 240, .16); }
.kl-cz-y-dy { stroke: rgba(74, 222, 128, .18); }
.kl-cz-y-taban { stroke: #131B30; }
.kl-cz-y-ayr2 { stroke: rgba(44, 56, 84, .6); stroke-width: 1; }
.kl-cz-y-izgara { stroke: rgba(44, 56, 84, .8); stroke-width: 1; stroke-dasharray: 2 4; }
.kl-cz-y-cubuk { fill: rgba(142, 162, 255, .26); }
.kl-cz-y-cubuk2 { fill: #5DB3F0; }
.kl-cz-y-spark { stroke: rgba(93, 179, 240, .75); stroke-width: 1.2; }
.kl-cz-y-spark2 { stroke: rgba(74, 222, 128, .75); stroke-width: 1.2; }
.kl-cz-y-halkaiz { stroke: #2C3854; stroke-width: 6; }
.kl-cz-y-dilim { stroke-width: 6; stroke-linecap: butt; }
.kl-cz-y-d1 { stroke: #5DB3F0; }
.kl-cz-y-d2 { stroke: #8EA2FF; }
.kl-cz-y-hucre { stroke: rgba(142, 162, 255, .12); stroke-linecap: butt; }
.kl-cz-y-sekil { fill: #131B30; stroke: rgba(243, 245, 250, .82); stroke-width: 1.4; }
.kl-cz-y-sac { fill: rgba(243, 245, 250, .6); }
.kl-cz-y-sekil2 { fill: #131B30; stroke: rgba(142, 162, 255, .4); stroke-width: 1.1; }
.kl-cz-y-kalem { stroke: rgba(182, 190, 208, .55); stroke-width: 1.2; }
.kl-cz-y-zemin { stroke: rgba(142, 162, 255, .18); stroke-width: 1; }
.kl-cz-y-disli { fill: #131B30; stroke: rgba(93, 179, 240, .7); stroke-width: 1.2; }

/* hareket sınıfları (gecikme SVG'de) */
.kl-cz-y-kur { animation: kl-cz-y-kur 9s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-y-kart { animation: kl-cz-y-kart 9s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-y-pop { transform-box: fill-box; transform-origin: center; animation: kl-cz-y-pop 9s cubic-bezier(.3, .7, .4, 1.2) infinite both; }
.kl-cz-y-vur { animation: kl-cz-y-vur 9s ease-out infinite both; }
.kl-cz-y-bil { animation: kl-cz-y-bil 9s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-y-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: kl-cz-y-bar 9s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-y-ciz { stroke-dasharray: 1; animation: kl-cz-y-ciz 9s cubic-bezier(.45, 0, .3, 1) infinite both; }
.kl-cz-y-halka { stroke: #5DB3F0; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: kl-cz-y-halka 9s cubic-bezier(.2, .6, .3, 1) infinite both; }
.kl-cz-y-h2 { animation-name: kl-cz-y-halka2; }
.kl-cz-y-hy { stroke: #4ADE80; }
.kl-cz-y-jt, .kl-cz-y-jh { stroke-dasharray: .5 200; stroke-dashoffset: 3; opacity: 0; animation: kl-cz-y-j 9s cubic-bezier(.55, 0, .35, 1) infinite both; }
.kl-cz-y-jt { stroke: #F3F5FA; stroke-width: 3; }
.kl-cz-y-jh { stroke: #5DB3F0; stroke-width: 9; stroke-opacity: .25; }
.kl-cz-y-imlec { transform-box: fill-box; transform-origin: 0 0; animation: kl-cz-y-imlec 9s ease-in-out infinite both; }
.kl-cz-y-nabiz { stroke: #5DB3F0; stroke-width: 1.1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: kl-cz-y-nabiz 2.6s ease-out infinite; }
.kl-cz-y-don { transform-box: fill-box; transform-origin: center; animation: kl-cz-y-don 24s linear infinite; }
.kl-cz-y-eskiz { opacity: 0; animation: kl-cz-y-eskiz 9s ease-in-out infinite; }
.kl-cz-y-net { animation: kl-cz-y-net 9s cubic-bezier(.2, .7, .3, 1) infinite both; }
.kl-cz-y-isin { stroke: #5DB3F0; stroke-width: 1.4; opacity: .45; animation: kl-cz-y-isin 9s ease-in-out infinite both; }
.kl-cz-y-cam { fill: #5DB3F0; opacity: .14; animation: kl-cz-y-cam 9s ease-in-out infinite both; }

@keyframes kl-cz-y-kur { 0% { opacity: 0; transform: translateY(3px); } 5%, 70% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-y-kart { 0% { opacity: 0; transform: translateY(10px); } 7%, 70% { opacity: 1; transform: none; } 77%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes kl-cz-y-pop { 0% { opacity: 0; transform: scale(.5); } 4% { opacity: 1; transform: scale(1.08); } 7%, 44% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(1); } }
@keyframes kl-cz-y-vur { 0% { opacity: 0; } 5%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes kl-cz-y-bil { 0% { opacity: 0; transform: translateY(6px); } 5%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-y-bar { 0% { opacity: 1; transform: scaleY(0); } 9%, 70% { opacity: 1; transform: scaleY(1); } 76%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes kl-cz-y-ciz { 0% { opacity: 1; stroke-dashoffset: 1; } 12%, 70% { opacity: 1; stroke-dashoffset: 0; } 76%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes kl-cz-y-halka { 0% { opacity: 0; transform: scale(1); } 2% { opacity: .6; } 14%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes kl-cz-y-halka2 { 0% { opacity: 0; transform: scale(1); } 2% { opacity: .6; } 14%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes kl-cz-y-j { 0% { opacity: 0; stroke-dashoffset: 3; } 2%, 11% { opacity: 1; } 13%, 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes kl-cz-y-imlec { 0% { opacity: 0; transform: translate(22px, 18px); } 5% { opacity: 1; } 12% { transform: none; } 13.5% { transform: scale(.86); }
  15%, 42% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-y-nabiz { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes kl-cz-y-don { to { transform: rotate(360deg); } }
@keyframes kl-cz-y-eskiz { 0%, 30% { opacity: 1; } 36%, 93% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes kl-cz-y-net { 0% { opacity: 0; transform: translateY(3px); } 5%, 47% { opacity: 1; transform: none; } 53%, 100% { opacity: 0; transform: none; } }
@keyframes kl-cz-y-isin { 0% { opacity: .3; } 5% { opacity: 1; } 18%, 100% { opacity: .3; } }
@keyframes kl-cz-y-cam { 0% { opacity: .1; } 5% { opacity: .4; } 18%, 100% { opacity: .1; } }

@media (prefers-reduced-motion: reduce) {
  .kl-cz * { animation: none !important; }
}

/* =====================================================================================
 * Kulüp evreni (satış sayfası kahramanı, kulupCizimEvren) — kl-cz-ev-*
 * TEK SEFERLİK giriş: her öğe kendi gecikmesinde bir kez belirir/çizilir ve öyle kalır (fill-mode both).
 * Renkler SVG özniteliklerinde: bu dosya yüklenmese de çizim eksiksiz görünür (yalnız hareketsiz).
 * Bekleme: ana yolda 16 sn'lik tek jeton + fikir düğümünde çok hafif nefes. Neon/dönen gezegen/parçacık yok.
 * ===================================================================================== */
.kl-cz-ev-gir { transform-box: fill-box; transform-origin: center; animation: kl-cz-ev-gir .55s cubic-bezier(.2, .7, .3, 1.12) both; }
.kl-cz-ev-cik { animation: kl-cz-ev-cik .45s cubic-bezier(.2, .7, .3, 1) both; }
.kl-cz-ev-sol { animation: kl-cz-ev-sol .8s ease-out both; }
.kl-cz-ev-ciz { stroke-dasharray: 1 2; animation: kl-cz-ev-ciz 1.3s cubic-bezier(.45, 0, .25, 1) both; }
.kl-cz-ev-akis { animation: kl-cz-ev-akis .55s cubic-bezier(.3, 0, .2, 1) both; }
.kl-cz-ev-tur { animation: kl-cz-ev-tur 16s linear infinite both; }
.kl-cz-ev-nefes { transform-box: fill-box; transform-origin: center; animation: kl-cz-ev-nefes 4.5s ease-in-out infinite alternate both; }
.kl-cz-ev-hale { transform-box: fill-box; transform-origin: center; animation: kl-cz-ev-hale 4.5s ease-in-out infinite alternate both; }

@keyframes kl-cz-ev-gir { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes kl-cz-ev-cik { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes kl-cz-ev-sol { from { opacity: 0; } to { opacity: 1; } }
@keyframes kl-cz-ev-ciz { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }  /* 1.05: yuvarlak uç başlangıçta nokta bırakmasın */
@keyframes kl-cz-ev-akis { from { stroke-dashoffset: 106; } to { stroke-dashoffset: 0; } }  /* 106: 17. nokta da başlangıçtan önce saklı */
@keyframes kl-cz-ev-tur { 0% { opacity: 0; stroke-dashoffset: 0; } 3%, 97% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes kl-cz-ev-nefes { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes kl-cz-ev-hale { from { opacity: 0; transform: scale(1); } to { opacity: .45; transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .kl-cz * { animation: none !important; }
}