/**
 * ========================================
 * FLOW THEME - COLOR UTILITIES (v2.0)
 * ========================================
 *
 * Design tokens kullanarak oluşturulmuş renk yardımcı sınıfları.
 * Tüm renk değerleri design-tokens.css'den gelir.
 *
 * KULLANIM ÖRNEĞİ:
 * <button class="btn btn-te-color">Kaydet</button>
 * <div class="bg-purple text-white">İçerik</div>
 * <a href="#" class="text-cyan">Link</a>
 */
/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.bg-gradient-purple {
    background: var(--gradient-purple);
}

.bg-gradient-cyan {
    background: var(--gradient-cyan);
}

.bg-gradient-light-purple {
    background: var(--gradient-light-purple);
}

.bg-gradient-turquaz {
    background: var(--gradient-turquaz);
}

.bg-gradient-blue {
    background: var(--gradient-blue);
}

.bg-gradient-light-blue {
    background: var(--gradient-light-blue);
}

.bg-gradient-info {
    background: var(--gradient-info);
}

.bg-gradient-green {
    background: var(--gradient-green);
}

.bg-gradient-red {
    background: var(--gradient-red);
}

.bg-gradient-violet {
    background: var(--gradient-violet);
}

.bg-gradient-te {
    background: var(--gradient-theme);
}

.bg-gradient-orange {
    background: var(--gradient-orange);
}

.bg-gradient-gold {
    background: var(--gradient-gold);
}

.bg-gradient-pink {
    background: var(--gradient-pink);
}

/* ============================================
   PURPLE COLOR
   ============================================ */

/* Text Colors */
.text-purple {
    color: var(--color-purple) !important;
}

a.text-purple:hover,
a.text-purple:focus {
    color: var(--color-purple-hover) !important;
}

/* Background Colors */
.bg-purple {
    background-color: var(--color-purple) !important;
}

/* Badges */
.badge-purple {
    background-color: var(--color-purple) !important;
    color: var(--color-white);
}

/* Buttons */
.btn-purple {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-purple:hover,
.btn-purple:focus {
    background-color: var(--color-purple-hover);
    border-color: var(--color-purple-hover);
    color: var(--color-white);
}

.btn-outline-purple {
    color: var(--color-purple);
    border-color: var(--color-purple);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-purple:hover,
.btn-outline-purple:focus {
    background-color: var(--color-purple);
    color: var(--color-white);
    border-color: var(--color-purple);
}

/* ============================================
   CYAN COLOR
   ============================================ */

.text-cyan {
    color: var(--color-cyan) !important;
}

a.text-cyan:hover,
a.text-cyan:focus {
    color: var(--color-cyan-hover) !important;
}

.bg-cyan {
    background-color: var(--color-cyan) !important;
}

.badge-cyan {
    background-color: var(--color-cyan) !important;
    color: var(--color-white);
}

.btn-cyan {
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-cyan:hover,
.btn-cyan:focus {
    background-color: var(--color-cyan-hover);
    border-color: var(--color-cyan-hover);
    color: var(--color-white);
}

.btn-outline-cyan {
    color: var(--color-cyan);
    border-color: var(--color-cyan);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-cyan:hover,
.btn-outline-cyan:focus {
    background-color: var(--color-cyan);
    color: var(--color-white);
    border-color: var(--color-cyan);
}

/* ============================================
   BLUE COLOR
   ============================================ */

.text-blue {
    color: var(--color-blue) !important;
}

a.text-blue:hover,
a.text-blue:focus {
    color: var(--color-blue-hover) !important;
}

.bg-blue {
    background-color: var(--color-blue) !important;
}

.badge-blue {
    background-color: var(--color-blue) !important;
    color: var(--color-white);
}

.btn-blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-blue:hover,
.btn-blue:focus {
    background-color: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
    color: var(--color-white);
}

.btn-outline-blue {
    color: var(--color-blue);
    border-color: var(--color-blue);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-blue:hover,
.btn-outline-blue:focus {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

/* ============================================
   NAVY COLOR
   ============================================ */

.text-navy {
    color: var(--color-navy) !important;
}

a.text-navy:hover,
a.text-navy:focus {
    color: var(--color-navy-hover) !important;
}

.bg-navy {
    background-color: var(--color-navy) !important;
}

.badge-navy {
    background-color: var(--color-navy) !important;
    color: var(--color-white);
}

.btn-navy {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-navy:hover,
.btn-navy:focus {
    background-color: var(--color-navy-hover);
    border-color: var(--color-navy-hover);
    color: var(--color-white);
}

.btn-outline-navy {
    color: var(--color-navy);
    border-color: var(--color-navy);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
    color: var(--color-white);
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

/* ============================================
   MAGENTA COLOR
   ============================================ */

.text-magenta {
    color: var(--color-magenta) !important;
}

a.text-magenta:hover,
a.text-magenta:focus {
    color: var(--color-magenta-hover) !important;
}

.bg-magenta {
    background-color: var(--color-magenta) !important;
}

.badge-magenta {
    background-color: var(--color-magenta) !important;
    color: var(--color-white);
}

.btn-magenta {
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-magenta:hover,
.btn-magenta:focus {
    background-color: var(--color-magenta-hover);
    border-color: var(--color-magenta-hover);
    color: var(--color-white);
}

.btn-outline-magenta {
    color: var(--color-magenta);
    border-color: var(--color-magenta);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-magenta:hover,
.btn-outline-magenta:focus {
    color: var(--color-white);
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
}

/* ============================================
   RED COLOR
   ============================================ */

.text-red {
    color: var(--color-red) !important;
}

a.text-red:hover,
a.text-red:focus {
    color: var(--color-red-hover) !important;
}

.bg-red {
    background-color: var(--color-red) !important;
}

.badge-red {
    background-color: var(--color-red) !important;
    color: var(--color-white);
}

.btn-red {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-red:hover,
.btn-red:focus {
    background-color: var(--color-red-hover);
    border-color: var(--color-red-hover);
    color: var(--color-white);
}

.btn-outline-red {
    color: var(--color-red);
    border-color: var(--color-red);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-red:hover,
.btn-outline-red:focus {
    color: var(--color-white);
    background-color: var(--color-red);
    border-color: var(--color-red);
}

/* ============================================
   ORANGE COLOR
   ============================================ */

.text-orange {
    color: var(--color-orange) !important;
}

a.text-orange:hover,
a.text-orange:focus {
    color: var(--color-orange-hover) !important;
}

.bg-orange {
    background-color: var(--color-orange) !important;
}

.badge-orange {
    background-color: var(--color-orange) !important;
    color: var(--color-white);
}

.btn-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: var(--color-orange-hover);
    border-color: var(--color-orange-hover);
    color: var(--color-white);
}

.btn-outline-orange {
    color: var(--color-orange);
    border-color: var(--color-orange);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: var(--color-white);
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

/* ============================================
   GOLD COLOR
   ============================================ */

.text-gold {
    color: var(--color-gold) !important;
}

a.text-gold:hover,
a.text-gold:focus {
    color: var(--color-gold-hover) !important;
}

.bg-gold {
    background-color: var(--color-gold) !important;
}

.badge-gold {
    background-color: var(--color-gold) !important;
    color: var(--color-gray-900);
}

.btn-gold {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-gray-900);
    transition: var(--transition-base);
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    color: var(--color-gray-900);
}

.btn-outline-gold {
    color: var(--color-gold);
    border-color: var(--color-gold);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    color: var(--color-gray-900);
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

/* ============================================
   GREEN COLOR
   ============================================ */

.text-green {
    color: var(--color-green) !important;
}

a.text-green:hover,
a.text-green:focus {
    color: var(--color-green-hover) !important;
}

.bg-green {
    background-color: var(--color-green) !important;
}

.badge-green {
    background-color: var(--color-green) !important;
    color: var(--color-white);
}

.btn-green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-green:hover,
.btn-green:focus {
    background-color: var(--color-green-hover);
    border-color: var(--color-green-hover);
    color: var(--color-white);
}

.btn-outline-green {
    color: var(--color-green);
    border-color: var(--color-green);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-green:hover,
.btn-outline-green:focus {
    color: var(--color-white);
    background-color: var(--color-green);
    border-color: var(--color-green);
}

/* ============================================
   PINK COLOR
   ============================================ */

.text-pink {
    color: var(--color-pink) !important;
}

a.text-pink:hover,
a.text-pink:focus {
    color: var(--color-pink-hover) !important;
}

.bg-pink {
    background-color: var(--color-pink) !important;
}

.badge-pink {
    background-color: var(--color-pink) !important;
    color: var(--color-white);
}

.btn-pink {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-pink:hover,
.btn-pink:focus {
    background-color: var(--color-pink-hover);
    border-color: var(--color-pink-hover);
    color: var(--color-white);
}

.btn-outline-pink {
    color: var(--color-pink);
    border-color: var(--color-pink);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-pink:hover,
.btn-outline-pink:focus {
    color: var(--color-white);
    background-color: var(--color-pink);
    border-color: var(--color-pink);
}

/* ============================================
   GRAY COLOR
   ============================================ */

.text-gray {
    color: var(--color-gray-400) !important;
}

a.text-gray:hover,
a.text-gray:focus {
    color: var(--color-gray-500) !important;
}

.bg-gray {
    background-color: var(--color-gray-400) !important;
}

.badge-gray {
    background-color: var(--color-gray-400) !important;
    color: var(--color-white);
}

.btn-gray {
    background-color: var(--color-gray-400);
    border-color: var(--color-gray-400);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-gray:hover,
.btn-gray:focus {
    background-color: var(--color-gray-500);
    border-color: var(--color-gray-500);
    color: var(--color-white);
}

.btn-outline-gray {
    color: var(--color-gray-400);
    border-color: var(--color-gray-400);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-gray:hover,
.btn-outline-gray:focus {
    color: var(--color-gray-900);
    background-color: var(--color-gray-400);
    border-color: var(--color-gray-400);
}

/* ============================================
   LIGHT GRAY COLOR
   ============================================ */

.text-light-gray {
    color: var(--color-gray-100) !important;
}

a.text-light-gray:hover,
a.text-light-gray:focus {
    color: var(--color-gray-200) !important;
}

.bg-light-gray {
    background-color: var(--color-gray-100) !important;
}

.badge-light-gray {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-900);
}

.btn-light-gray {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-200);
    color: var(--color-gray-900);
    transition: var(--transition-base);
}

.btn-light-gray:hover,
.btn-light-gray:focus {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

.btn-outline-light-gray {
    color: var(--color-gray-100);
    border-color: var(--color-gray-100);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-light-gray:hover,
.btn-outline-light-gray:focus {
    color: var(--color-gray-900);
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

/* ============================================
   WHITE COLOR
   Bootstrap'ta .text-white ve .bg-white zaten var
   ============================================ */

.badge-white {
    background-color: var(--color-white) !important;
    color: var(--color-gray-900);
}

.btn-white {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-gray-900);
    transition: var(--transition-base);
}

.btn-white:hover,
.btn-white:focus {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.btn-outline-white {
    color: var(--color-white);
    border-color: var(--color-white);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-white:hover,
.btn-outline-white:focus {
    background-color: var(--color-white);
    color: var(--color-gray-900);
    border-color: var(--color-white);
}

/* ============================================
   THEME COLOR (Tema rengi)
   --te-color ve --te-hover-color meta-header.php'den gelir
   ============================================ */

/* Text Colors */
.text-te-color {
    color: var(--te-color) !important;
}

a.text-te-color:hover,
a.text-te-color:focus {
    color: var(--te-hover-color) !important;
}

/* Background Colors */
.bg-te-color {
    background-color: var(--te-color) !important;
}

.bg-te-hover-color {
    background-color: var(--te-hover-color) !important;
}

/* Badges */
.badge-te-color {
    background-color: var(--te-color) !important;
    color: var(--color-white);
}

.badge-te-hover-color {
    background-color: var(--te-hover-color) !important;
    color: var(--color-white);
}

/* Buttons - Solid */
.btn-te-color {
    background-color: var(--te-color);
    border-color: var(--te-color);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-te-color:hover,
.btn-te-color:focus {
    background-color: var(--te-hover-color);
    border-color: var(--te-hover-color);
    color: var(--color-white);
}

/* Buttons - Outline */
.btn-outline-te-color {
    color: var(--te-color);
    border-color: var(--te-color);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-te-color:hover,
.btn-outline-te-color:focus {
    background-color: var(--te-color);
    border-color: var(--te-color);
    color: var(--color-white);
}

/* Border Colors */
.border-te-color {
    border-color: var(--te-color) !important;
}

.border-te-hover-color {
    border-color: var(--te-hover-color) !important;
}

/* ============================================
   ACCENT COLOR (Vurgu rengi)
   --te-accent-color meta-header.php'den gelir
   ============================================ */

/* Text Colors */
.text-te-accent {
    color: var(--te-accent-color) !important;
}

/* Background Colors */
.bg-te-accent {
    background-color: var(--te-accent-color) !important;
}

/* Badges */
.badge-te-accent {
    background-color: var(--te-accent-color) !important;
    color: var(--color-gray-900);
}

/* Buttons - Solid */
.btn-te-accent {
    background-color: var(--te-accent-color);
    border-color: var(--te-accent-color);
    color: var(--color-gray-900);
    transition: var(--transition-base);
}

.btn-te-accent:hover,
.btn-te-accent:focus {
    background-color: var(--te-accent-color);
    border-color: var(--te-accent-color);
    color: var(--color-gray-900);
    filter: brightness(0.9);
}

/* Buttons - Outline */
.btn-outline-te-accent {
    color: var(--te-accent-color);
    border-color: var(--te-accent-color);
    background-color: transparent;
    transition: var(--transition-base);
}

.btn-outline-te-accent:hover,
.btn-outline-te-accent:focus {
    background-color: var(--te-accent-color);
    border-color: var(--te-accent-color);
    color: var(--color-gray-900);
}

/* Border Colors */
.border-te-accent {
    border-color: var(--te-accent-color) !important;
}

/* ============================================
   TRANSPARENT COLORS
   ============================================ */

.bg-transparent-50 {
    background-color: var(--color-overlay-light);
}

.bg-transparent-medium {
    background-color: var(--color-overlay-medium);
}

.bg-transparent-dark {
    background-color: var(--color-overlay-dark);
}

.bg-transparent-white {
    background-color: var(--color-overlay-white);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hover Efektleri */
.hover-te-color:hover {
    color: var(--te-color) !important;
}

.hover-primary:hover {
    color: var(--color-primary) !important;
}

.hover-scale:hover {
    transform: scale(1.02);
    transition: var(--transition-base);
}

.hover-shadow:hover {
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
}

/* Border Colors - Bootstrap'ta .border-primary ve .border-light zaten var */
.border-gray {
    border-color: var(--color-gray-300) !important;
}

/* ============================================
   SOCIAL MEDIA COLORS
   ============================================ */

/* --- FACEBOOK --- */
.bg-facebook {
    background-color: var(--color-facebook) !important;
}

.text-facebook {
    color: var(--color-facebook) !important;
}

.btn-facebook {
    background-color: var(--color-facebook);
    border-color: var(--color-facebook);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-facebook:hover,
.btn-facebook:focus {
    background-color: #2d4373;
    border-color: #2d4373;
    color: var(--color-white);
}

/* --- TWITTER (X) --- */
.bg-twitter {
    background-color: var(--color-twitter) !important;
}

.text-twitter {
    color: var(--color-twitter) !important;
}

.btn-twitter {
    background-color: var(--color-twitter);
    border-color: var(--color-twitter);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-twitter:hover,
.btn-twitter:focus {
    background-color: #333333;
    border-color: #333333;
    color: var(--color-white);
}

/* --- INSTAGRAM --- */
.bg-instagram {
    background-color: var(--color-instagram) !important;
}

.text-instagram {
    color: var(--color-instagram) !important;
}

.btn-instagram {
    background-color: var(--color-instagram);
    border-color: var(--color-instagram);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-instagram:hover,
.btn-instagram:focus {
    background-color: #305777;
    border-color: #305777;
    color: var(--color-white);
}

/* --- PINTEREST --- */
.bg-pinterest {
    background-color: var(--color-pinterest) !important;
}

.text-pinterest {
    color: var(--color-pinterest) !important;
}

.btn-pinterest {
    background-color: var(--color-pinterest);
    border-color: var(--color-pinterest);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-pinterest:hover,
.btn-pinterest:focus {
    background-color: #d1353d;
    border-color: #d1353d;
    color: var(--color-white);
}

/* --- LINKEDIN --- */
.bg-linkedin {
    background-color: var(--color-linkedin) !important;
}

.text-linkedin {
    color: var(--color-linkedin) !important;
}

.btn-linkedin {
    background-color: var(--color-linkedin);
    border-color: var(--color-linkedin);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-linkedin:hover,
.btn-linkedin:focus {
    background-color: #0b5e85;
    border-color: #0b5e85;
    color: var(--color-white);
}

/* --- TIKTOK --- */
.bg-tiktok {
    background-color: var(--color-tiktok) !important;
}

.text-tiktok {
    color: var(--color-tiktok) !important;
}

.btn-tiktok {
    background-color: var(--color-tiktok);
    border-color: var(--color-tiktok);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-tiktok:hover,
.btn-tiktok:focus {
    background-color: #111111;
    border-color: #111111;
    color: var(--color-white);
}

/* --- YOUTUBE --- */
.bg-youtube {
    background-color: var(--color-youtube) !important;
}

.text-youtube {
    color: var(--color-youtube) !important;
}

.btn-youtube {
    background-color: var(--color-youtube);
    border-color: var(--color-youtube);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-youtube:hover,
.btn-youtube:focus {
    background-color: #cc0000;
    border-color: #cc0000;
    color: var(--color-white);
}

/* --- WHATSAPP --- */
.bg-whatsapp {
    background-color: var(--color-whatsapp) !important;
}

.text-whatsapp {
    color: var(--color-whatsapp) !important;
}

.btn-whatsapp {
    background-color: var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1da851;
    border-color: #1da851;
    color: var(--color-white);
}

/* --- TELEGRAM --- */
.bg-telegram {
    background-color: var(--color-telegram) !important;
}

.text-telegram {
    color: var(--color-telegram) !important;
}

.btn-telegram {
    background-color: var(--color-telegram);
    border-color: var(--color-telegram);
    color: var(--color-white);
    transition: var(--transition-base);
}

.btn-telegram:hover,
.btn-telegram:focus {
    background-color: #006da3;
    border-color: #006da3;
    color: var(--color-white);
}