.el-cizgisi {
    position: relative;
    display: inline-block;
    z-index: 1;
    white-space: nowrap;
}

.el-cizgisi::after {
    content: '';
    position: absolute;
    bottom: -8px; 
    left: -2%; 
    width: 104%; 
    height: 20px; 
    
    /* Asimetrik Yeşil Fırça Darbesi (#92d050) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 30' preserveAspectRatio='none'%3E%3Cpath d='M5,22 C45,12 145,4 245,16' stroke='%2392d050' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round' style='filter: url(%23roughness);'/%3E%3Cdefs%3E%3Cfilter id='roughness'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    
    /* Başlangıçta sağdan tamamen kırpılmış (gizli) */
    clip-path: inset(0 100% 0 0);
}

/* JS bu sınıfı eklediğinde sonsuz animasyon başlar */
.el-cizgisi.cizildi::after {
    /* ease-in-out ile daha yumuşak bir fırça hareketi sağladık */
    animation: cizgiDongusu 4s ease-in-out infinite;
}

/* YENİ DÖNGÜ: Çizil -> Bekle -> Geriye Doğru Silin -> Bekle -> Tekrarla */
@keyframes cizgiDongusu {
    0%   { clip-path: inset(0 100% 0 0); } /* Görünmez başla */
    15%  { clip-path: inset(0 0 0 0); }    /* Çizimi tamamla */
    80%  { clip-path: inset(0 0 0 0); }    /* Ekranda okunması için uzun süre bekle */
    95%  { clip-path: inset(0 100% 0 0); } /* Fırçayı geriye doğru çekerek sil */
    100% { clip-path: inset(0 100% 0 0); } /* Kısa bir es verip başa dön */
}