/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

/* Component Styles */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* CSS Custom Properties */
:root {
    /* Colors */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Typography */
    --font-family-primary: 'Fira Sans', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* Base Styles */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--dark-color);
    background-color: #F9F8EF;
    overflow-x: hidden; /* Prevent horizontal scrolling globally */
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 0 var(--spacing-md); */
    overflow-x: hidden; /* Prevent container overflow */
}

.grid {
    display: -ms-grid;
    display: grid;
}

.flex {
    display: -ms-flexbox;
    display: flex;
}

/* Global Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.pt-1 { padding-top: var(--spacing-sm); }
.pb-1 { padding-bottom: var(--spacing-sm); }

/* Button Base Styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.2;
}

.btn:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

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

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

/* Component Imports */
@import url('./components/banner.css');
@import url('./components/header.css');
@import url('./components/hero.css');
@import url('./components/features-section-1.css');
@import url('./components/advantages-section.css');
@import url('./components/how-it-works.css');
@import url('./components/form1.css');
@import url('./components/form2.css');
@import url('./components/form3.css');
@import url('./components/global-reviews.css');
@import url('./components/blog-global.css');
@import url('./components/footer.css');

/* Product card styles moved to individual component files */

/* All product styles moved to features-section-1.css */

/* All remaining product styles moved to features-section-1.css */

/* End of main.css - all component styles moved to respective files */

/* Page-specific Imports */
@import url('./pages/home.css');
@import url('./pages/about.css');
@import url('./pages/blog.css');
@import url('./pages/reviews.css');
@import url('./pages/category-dietitian.css');
@import url('./pages/campaigns.css');
@import url('./pages/faq.css');
/* Genel görsel optimizasyonu - Güvenli versiyon */
img {
    opacity: 1; /* Görünürlük garantisi */
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    max-width: 100%;
    height: auto;
}

img.loaded {
    opacity: 1;
}

/* Loading placeholder - sadece gerekirse */
.image-placeholder {
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(50%, #e0e0e0), color-stop(75%, #f0f0f0));
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    -webkit-animation: loading 1.5s infinite;
            animation: loading 1.5s infinite;
    border-radius: 8px;
    display: none; /* Varsayılan olarak gizli */
}

@-webkit-keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Görsel performans optimizasyonu - hafif */
img {
    will-change: auto; /* Sadece gerekirse */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

/* Responsive görsel optimizasyonu */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
}