/* General Styles */    
        :root {
            /* --- 5 Ana Renk Paleti --- */
            /* 1. Ana Vurgu Rengi (Mavi) */
            --color-primary: #0d8be8;
            /* Kullanım Alanları: Sepet ikonunun arka plan rengi, odaklanma (focus) çerçevesi. */
            /* 2. Tamamlayıcı Renk (Koyu Mavi) */
            --color-secondary: #0a5075;
            /* Kullanım Alanları: Sepet badge'inin arka plan rengi, Navigasyon menüsü arka planı. */
            /* 3. Genel Metin Rengi (Koyu Gri) */
            --color-text: #373d41;
            /* Kullanım Alanları: Body metni. */
            /* 4. Bağlantı Rengi (Turuncu) */
            --color-link: #f1631c;
            /* Kullanım Alanları: Genel bağlantıların varsayılan rengi, Kampanya etiketlerinin ana arka plan rengi. */
            /* 5. Nötr Arka Plan/Ön Plan Rengi (Beyaz) */
            --color-neutral: #fff;
            /* Kullanım Alanları: Kampanya etiketlerinin yazı rengi, sepet ikonunun içindeki ikon rengi, Navigasyon menüsü metin rengi, Sepet badge'inin yazı rengi. */
            /* --- Yardımcı Renkler (Görsel Bütünlük İçin) --- */
            --background-light-blue: #eaf8ff; /* Body arka plan gradient'inin bitiş rengi */
            --color-border-light: #e7e7e8; /* Header alt kenarlığı ve sepet menüsü sol kenarlığı (eski) */
            --campaign-green: #4eb246; /* Özel yeşil kampanya rengi */
            --campaign-light-blue: #66b2ff; /* Yeni açık mavi kampanya rengi */
            /* --- Font Weight Ayarları --- */
            --font-weight-heading: 400; /* Tüm başlıklar (h1-h6) ve strong etiketleri için */
            --font-weight-description: 500; /* Açıklama yazıları (örn: "Bootstrap 4.5.3 ile oluşturulmuş profesyonel hosting menüsü...") ve genel metinler için */
            /* --- Tipografi Ayarları --- */
            --font-family-base: "Exo 2"; /* Sitenin ana yazı tipi */
            --font-size-base: 16px; /* Temel font boyutu */
            /* --- Layout Ayarları --- */
            --container-max-width: 1140px; /* Ana container'ın maksimum genişliği */
            /* --- Logo Boyut Ayarları --- */
            --logo-height-normal: 40px; /* Normal durumda logo yüksekliği */
            --logo-height-sticky: 40px; /* Sticky durumda logo yüksekliği */
            /*-------------------------------------------------------------------------------*/
            /*FOOTER*/
            /*-------------------------------------------------------------------------------*/
            --xfooter-bg-dark: #0f3654;
            --xfooter-bg-darker: #092a45;
            --xfooter-bg-darkest: #071e32;
            --xfooter-bg-lighter: #1a4b72;
            --xfooter-text: #fff;
            --xfooter-text-muted: #a3c2d9;
            --xfooter-link-text: #e6f0f9;
            --xfooter-border: #1e5785;
            --xfooter-accent: #3498db;
            /* Gradients */
            --xfooter-gradient-main: linear-gradient(135deg, var(--xfooter-bg-dark) 0%, var(--xfooter-bg-darker) 100%);
            --xfooter-gradient-secondary: linear-gradient(135deg, var(--xfooter-bg-darker) 0%, var(--xfooter-bg-darkest) 100%);
            --xfooter-gradient-bottom: linear-gradient(to right, var(--xfooter-bg-dark), var(--xfooter-bg-darker));
            /* Shadows */
            --xfooter-shadow-color: rgba(0, 0, 0, 0.2);
            --xfooter-box-shadow: 0 10px 25px var(--xfooter-shadow-color);
            /* Specific Backgrounds/Borders with opacity */
            --xfooter-contact-box-bg: rgba(9, 42, 69, 0.95);
            --xfooter-border-alpha-light: rgba(255, 255, 255, 0.1);
            /* Effects */
            --xfooter-logo-filter: brightness(0) invert(1);
            /*-------------------------------------------------------------------------------*/
}    
body {        
font-size: var(--font-size-base);        
font-weight: var(--font-weight-description);        
line-height: 1.5;        
color: var(--color-text);        
font-family: var(--font-family-base);        
overflow-x: hidden;        
-webkit-font-smoothing: antialiased;        
-moz-osx-font-smoothing: grayscale;        
background: linear-gradient(to right, var(--color-neutral), var(--background-light-blue));    
}    
h1, h2, h3, h4, h5, h6, strong {        
font-weight: var(--font-weight-heading);    
}    
p.lead {        
font-weight: var(--font-weight-description);    
}    
a {        
color: var(--color-link);        
transition: color 0.2s ease;    
}    
a:hover {        
text-decoration: none;    
}    
img {        
max-width: 100%;        
height: auto;    
}