/*
 * Dosya: assets/css/main.css
 * İçerik: Temaya özel premium animasyonlar ve efektler
 */

/* ==========================================================================
   1. Navigasyon / Header Animasyonları
   ========================================================================== */
/* Menü linklerinin altına kayarak gelen şık çizgi (Animated Underline) */
header nav a {
    position: relative;
    text-decoration: none;
}
header nav a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--brand-color, #2563eb);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
header nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ==========================================================================
   2. Hero Alanı Animasyonları
   ========================================================================== */
/* Hareketli Arkaplan Gradienti */
.bg-gradient-animate {
    background-size: 200% 200%;
    animation: gradientMove 8s ease infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* YENİ: Radius Line (Glow) Açılış Animasyonu */
.hero-glow-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2px;
    /* Çizgiyi kesik kesik yapıp boyunu uzatarak çizilme efekti yaratıyoruz */
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: drawGlowLine 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}
@keyframes drawGlowLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* YENİ: Hareketli Çoklu Dalga (Multi-Layer Wave) Animasyonu */
.wave-layer-1 {
    animation: moveWave 25s linear infinite alternate;
    transform-origin: bottom;
}
.wave-layer-2 {
    animation: moveWave 20s linear infinite alternate-reverse;
    transform-origin: bottom;
}
@keyframes moveWave {
    0% { transform: translateX(0) scaleY(1); }
    100% { transform: translateX(-50px) scaleY(1.1); }
}

/* ==========================================================================
   3. Varsayılan WordPress Ayarları
   ========================================================================== */
.prose a { color: var(--brand-color, #2563eb); text-decoration: underline; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; }
.aligncenter { display: block; margin: 0 auto; clear: both; }
.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; }

/*
 * ==========================================================================
 * YENİ: Gerçek Fırça/Kalem Efekti (Yuvarlak Çizen ve Sağ Üstten Çıkan)
 * ==========================================================================
 */
.animated-brush-path {
    /* 
       60: Fırça darbesinin uzunluğu (Ekranda görkemli ve uzun durur)
       200: Çizginin arkasından gelen devasa boşluk (İkinci bir çizginin ekrana girmesini engeller)
    */
    stroke-dasharray: 60 200;
    
    /* 14 saniyelik çok doğal, yavaş başlayıp yavaş biten fırça darbesi süresi */
    animation: brushStroke 14s ease-in-out infinite;
}

@keyframes brushStroke {
    /* Başlangıç: Çizgi ekranın sol üst köşesinden metrelerce uzakta, tamamen görünmez haldedir */
    0% { 
        stroke-dashoffset: 260; 
    }
    /* Bitiş: Çizgi sağ üst köşeden tamamen çıkar, ekranı %100 terk eder ve döngü kusursuzca başa sarar */
    100% { 
        stroke-dashoffset: -200; 
    }
}