/*
 * Bileşen: Gradyan Yardımcı Sınıfları
 * GÜNCELLEME: "Exclusive" elemanlar için animasyonlu gradyan çerçeve stilleri eklendi.
 */

:root {
    /* Temel gradyan renk temaları */
    --gradient-v1: linear-gradient(var(--gradient-direction, to right), var(--color-static-dark), var(--color-static-blue), var(--color-static-green), var(--color-static-white));
    --gradient-v2: linear-gradient(var(--gradient-direction, to right), var(--color-static-green), var(--color-static-blue), var(--color-static-dark), var(--color-static-white));
    
    /* YENİ: Başlıklar için özel, kontrastlı gradyan */
    --gradient-title: linear-gradient(to right, var(--color-static-blue), var(--color-static-green));
}

/* YENİ: Kenarlık animasyonu için keyframes */
@keyframes animated-gradient-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === ARKA PLAN GRADYANLARI === */
.bf-gradient-bg { background-image: var(--gradient-v1); }
.bf-gradient-bg--v2 { background-image: var(--gradient-v2); }
.bf-gradient-bg--to-right { --gradient-direction: to right; }
.bf-gradient-bg--to-bottom { --gradient-direction: to bottom; }
.bf-gradient-bg--to-top-right { --gradient-direction: to top right; }
.bf-gradient-bg--to-bottom-left { --gradient-direction: to bottom left; }
.bf-gradient-bg--angle-45 { background-image: linear-gradient(45deg, var(--color-static-dark), var(--color-static-blue), var(--color-static-green), var(--color-static-white)); }
.bf-gradient-bg--angle-135 { background-image: linear-gradient(135deg, var(--color-static-green), var(--color-static-white), var(--color-static-blue), var(--color-static-dark)); }

/* === IYILESTIRME: KENARLIK GRADYANLARI (EVRENSEL YÖNTEM) === */

.bf-gradient-border {
    padding: 2px;
    border-radius: var(--border-radius-base);
    box-sizing: border-box;
    border: none;
    height: 100%;
    background-image: var(--gradient-v2);
}

.bf-gradient-border--animated {
    background-size: 400% 400%;
    animation: animated-gradient-border 10s linear infinite;
}

.bf-gradient-border__inner-content {
    background: var(--color-background);
    color: var(--color-text-base);
    border-radius: calc(var(--border-radius-base) - 2px);
    width: 100%;
    height: 100%;
}

/* Renk ve yön varyasyonları */
.bf-gradient-border--v2 { background-image: var(--gradient-v2); }
.bf-gradient-border--to-right { --gradient-direction: to right; }
.bf-gradient-border--to-bottom { --gradient-direction: to bottom; }
.bf-gradient-border--to-top-right { --gradient-direction: to top right; }
.bf-gradient-border--angle-45::before { background: linear-gradient(45deg, var(--color-static-dark), var(--color-static-blue), var(--color-static-green), var(--color-static-white)); }