/* ============================================
   MS International UG - Ortak Renk Paleti
   Kurumsal Mavi Tema
   ============================================ */

:root {
    /* Ana Renkler - Kurumsal Mavi */
    --primary-color: #3C6C8C;
    --primary-dark: #2C4F6C;
    --primary-light: #4A9AC0;
    
    --secondary-color: #3C6C8C;
    --secondary-dark: #2C4F6C;
    --secondary-light: #4A9AC0;
    
    /* Gradient Renkler */
    --gradient-primary: linear-gradient(135deg, #3C6C8C 0%, #2C4F6C 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #2C4F6C 0%, #3C6C8C 100%);
    
    /* CTA Buton Rengi */
    --cta-color: #F5A623;
    --cta-dark: #D8921A;
    --cta-light: #FFB84D;
    
    /* Nötr Renkler */
    --white: #ffffff;
    --black: #000000;
    --light-gray: #F3F6FA;
    --gray: #6c757d;
    --dark-gray: #333333;
    --text-dark: #333333;
    
    /* Durum Renkleri */
    --success: #28a745;
    --success-light: #d4edda;
    --info: #17a2b8;
    --info-light: #d1ecf1;
    --warning: #ffc107;
    --warning-light: #fff3cd;
    --danger: #dc3545;
    --danger-light: #f8d7da;
    
    /* Şeffaflık Değerleri */
    --opacity-light: rgba(255, 255, 255, 0.9);
    --opacity-medium: rgba(255, 255, 255, 0.15);
    --opacity-dark: rgba(255, 255, 255, 0.2);
    --opacity-primary: rgba(60, 108, 140, 0.95);
    --opacity-shadow: rgba(0, 0, 0, 0.1);
    --opacity-shadow-dark: rgba(0, 0, 0, 0.15);
    --opacity-shadow-darker: rgba(0, 0, 0, 0.2);
    
    /* Metin Renkleri */
    --text-primary: var(--primary-color);
    --text-secondary: var(--secondary-color);
    --text-dark: #333333;
    --text-light: var(--gray);
    --text-white: var(--white);
    
    /* Arka Plan Renkleri */
    --bg-primary: var(--primary-color);
    --bg-secondary: var(--secondary-color);
    --bg-light: var(--light-gray);
    --bg-white: var(--white);
    
    /* Border Renkleri */
    --border-primary: var(--primary-color);
    --border-light: #dee2e6;
    --border-dark: var(--dark-gray);
}

/* ============================================
   Bootstrap Primary Renk Override
   ============================================ */
:root {
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 60, 108, 140;
    --bs-primary-dark: var(--primary-dark);
    --bs-primary-light: var(--primary-light);
}

/* Primary renk sınıfları */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

/* CTA Butonlar */
.btn-cta {
    background-color: var(--cta-color);
    border-color: var(--cta-color);
    color: var(--white);
    font-weight: 600;
}

.btn-cta:hover {
    background-color: var(--cta-dark);
    border-color: var(--cta-dark);
    color: var(--white);
}

/* ============================================
   Gradient Arka Planlar
   ============================================ */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

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

/* ============================================
   Navbar Özel Renkler
   ============================================ */
.navbar-modern {
    background: var(--white) !important;
    border-bottom: 1px solid rgba(60, 108, 140, 0.1);
}

.navbar-nav .nav-link {
    color: var(--text-dark) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(60, 108, 140, 0.1);
}

.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
    background-color: rgba(60, 108, 140, 0.15);
}

.dropdown-menu {
    background: var(--white) !important;
    border: 1px solid rgba(60, 108, 140, 0.1);
}

.dropdown-item {
    color: var(--text-dark) !important;
}

.dropdown-item:hover {
    background-color: rgba(60, 108, 140, 0.1);
    color: var(--primary-color) !important;
}

/* ============================================
   Kart ve Bileşen Renkleri
   ============================================ */
.card.border-primary {
    border-color: var(--primary-color) !important;
}

.card.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* ============================================
   İkon Renkleri
   ============================================ */
.bi.text-primary {
    color: var(--primary-color) !important;
}

/* ============================================
   Alert Renkleri
   ============================================ */
.alert-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--text-dark);
}

.alert-warning {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--text-dark);
}

.alert-danger {
    background-color: var(--danger-light);
    border-color: var(--danger);
    color: var(--text-dark);
}

.alert-success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--text-dark);
}

/* ============================================
   Buton Renkleri
   ============================================ */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

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

/* ============================================
   Gölge Renkleri
   ============================================ */
.shadow {
    box-shadow: 0 0.125rem 0.25rem var(--opacity-shadow) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem var(--opacity-shadow) !important;
}

.shadow-lg {
    box-shadow: 0 2px 20px var(--opacity-shadow) !important;
}

/* ============================================
   Arka Plan Renkleri
   ============================================ */
body {
    background-color: var(--light-gray);
    color: var(--text-dark);
}

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

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

/* ============================================
   Metin Renkleri
   ============================================ */
body, p, h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
}

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

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

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

/* CTA Buton Stilleri - Büyük butonlar turuncu */
.btn-primary.btn-lg {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    color: var(--white) !important;
    font-weight: 600;
    padding: 0.75rem 2rem;
}

.btn-primary.btn-lg:hover {
    background-color: var(--cta-dark) !important;
    border-color: var(--cta-dark) !important;
    color: var(--white) !important;
}

.btn-cta,
.btn-cta.btn-lg {
    background-color: var(--cta-color);
    border-color: var(--cta-color);
    color: var(--white);
    font-weight: 600;
}

.btn-cta:hover,
.btn-cta.btn-lg:hover {
    background-color: var(--cta-dark);
    border-color: var(--cta-dark);
    color: var(--white);
}