/* --- Qlobal Stillər --- */
html { scroll-behavior: smooth; }

.font-sans { font-family: 'Didact Gothic', sans-serif; }

/* --- Hover Effektləri --- */
.hover-underline-animation { display: inline-block; position: relative; }
.hover-underline-animation::after { 
    content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; 
    bottom: -2px; left: 0; background-color: currentColor; 
    transform-origin: bottom right; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}
.hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }

.btn-hover-effect { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.btn-hover-effect:hover { transform: translateY(-2px) scale(1.02); }
.btn-hover-effect:active { transform: translateY(0) scale(0.98); }

/* --- FAQ Komponenti --- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-active .faq-answer { max-height: 200px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-active .faq-icon { transform: rotate(45deg); }

/* --- Slider Stilləri (Hero & Projects) --- */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; background-size: cover; background-position: center; }
.hero-slide.active { opacity: 1; }

.hero-title, .hero-description, .hero-tags { display: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
.hero-title.active, .hero-description.active, .hero-tags.active { display: block; opacity: 1; animation: fadeIn 0.5s; }
.hero-tags.active { display: flex; }

.project-track { display: flex; gap: 1.5rem; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.project-slide { min-width: 85%; height: 100%; flex-shrink: 0; position: relative; transition: opacity 0.5s ease; }
@media (min-width: 768px) { .project-slide { min-width: 60%; } .project-track { gap: 2rem; } }
.project-slide.active-slide { opacity: 1; }
.project-slide:not(.active-slide) { opacity: 0.5; }

.project-text-item { display: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
.project-text-item.active-text { display: block; opacity: 1; animation: fadeIn 0.5s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Kartlar vÉ™ Qalereya --- */
.project-card, .blog-card, .service-card { transition: all 0.3s ease-in-out; }
.project-card-image, .service-card-image { aspect-ratio: 4/3; overflow: hidden; }
.blog-card-image { aspect-ratio: 16/10; overflow: hidden; }

/* --- Bloq Kontenti --- */
.content-body p { margin-bottom: 1.5rem; line-height: 1.8; color: #4b5563; }
.content-body h3 { font-weight: bold; font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1rem; }
p {
    padding: 10px 0;
}
/* Karusel üçün əsas animasiya */
        @keyframes loop-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Siyahının tam olaraq öz uzunluğu qədər sürüşdürürük */
                transform: translateX(-100%);
            }
        }

        .animate-loop-scroll {
            /* 25s - fırlanma sürətidir. */
            animation: loop-scroll 25s linear infinite;
            will-change: transform; /* Performansı artırır və titrəməni azaldır */
        }

        /* Maus ümumi karuselin üzərinə gələndə hər iki siyahını dayandırmaq üçün */
        .group:hover .animate-loop-scroll {
            animation-play-state: paused;
        }
        .shrek {
            width: 700px;
        }