/* 
 * Güneş Uygarlığı - Main Stylesheet
 * Shared styles for all pages with CSS variables for theming
 */

/* CSS Variables - Light Theme (default) */
:root {
    /* Colors - Solar Orange Palette */
    --color-primary: #FF6B35;
    --color-secondary: #FF8C42;
    --color-accent: #FFA500;
    --color-gold: #FFD700;
    
    /* Backgrounds */
    --bg-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --bg-body: #FFF8F0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-footer: rgba(0, 0, 0, 0.05);
    
    /* Text */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-link: #FF6B35;
    --text-gradient: linear-gradient(45deg, #FF6B35, #F7931E);
    
    /* Borders & Shadows */
    --border-radius: 12px;
    --border-radius-lg: 15px;
    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 25px rgba(255, 107, 53, 0.4);
    
    /* Menu */
    --menu-bg: #ffffff;
    --menu-hover: #FF6B35;
    --menu-text: #333333;
    --menu-text-hover: #ffffff;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --bg-body: #0f0f23;
    --bg-card: rgba(30, 30, 60, 0.95);
    --bg-header: rgba(30, 30, 60, 0.95);
    --bg-footer: rgba(0, 0, 0, 0.3);
    
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-link: #FF8C42;
    
    --menu-bg: #1a1a2e;
    --menu-text: #e5e7eb;
}

/* Base Styles - with !important to override inline styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 
    line-height: 1.6; 
    color: var(--text-primary) !important; 
    background: var(--bg-gradient) !important;
    min-height: 100vh; 
    padding: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.container { max-width: 1200px; margin: 0 auto; }

/* Header - with !important to override inline styles */
header { 
    background: var(--bg-header) !important; 
    border-radius: var(--border-radius-lg) !important; 
    padding: 15px; 
    margin-bottom: 20px; 
    box-shadow: var(--shadow-header) !important; 
    position: relative;
    transition: background 0.3s ease;
}

.nav-container {
    position: relative;
}

.logo { 
    font-size: clamp(1.8rem, 5vw, 2.5rem); 
    text-align: center; 
    margin-bottom: 10px; 
    background: var(--text-gradient); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text;
}

.hamburger { 
    display: none; 
    flex-direction: column; 
    cursor: pointer; 
    padding: 5px; 
    width: 30px; 
    position: absolute; 
    right: 15px; 
    top: 15px; 
    z-index: 1001;
}

.hamburger span { 
    width: 25px; 
    height: 3px; 
    background: var(--color-primary); 
    margin: 3px 0; 
    transition: 0.3s; 
}

.nav-menu { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    justify-content: center; 
    list-style: none; 
    background: var(--menu-bg) !important;
}

.nav-menu a { 
    color: var(--menu-text) !important;
    text-decoration: none; 
    padding: 8px 16px; 
    border-radius: 20px; 
    transition: all 0.3s; 
    font-weight: 500; 
}

.nav-menu a:hover { 
    background: var(--menu-hover) !important;
    color: var(--menu-text-hover) !important;
}

.donate-link {
    background: linear-gradient(135deg, #e53935, #d32f2f) !important;
    color: white !important;
}

.donate-link:hover {
    background: linear-gradient(135deg, #d32f2f, #c62828) !important;
}

/* Main Content */
main { 
    background: var(--bg-card) !important; 
    border-radius: var(--border-radius) !important; 
    padding: 25px; 
    margin-bottom: 20px; 
    box-shadow: var(--shadow-card) !important;
    transition: background 0.3s ease;
}

h1 { color: #D84315 !important; text-align: center; margin-bottom: 20px; }
h1[data-theme="dark"] { color: #FF8C42 !important; }

h2 { color: var(--color-primary) !important; margin: 25px 0 15px 0; text-align: center; }

/* Quick Links */
.quick-links { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; 
    margin-top: 20px; 
}

.quick-links a { 
    background: linear-gradient(135deg, #FF8C42, #FF6B35); 
    color: white; 
    padding: 20px; 
    text-decoration: none; 
    text-align: center; 
    border-radius: var(--border-radius); 
    font-weight: 600; 
    transition: all 0.3s; 
}

.quick-links a:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-hover); 
}

/* Books Note */
.books-note { 
    background: linear-gradient(135deg, #FF8C42, #FF6B35); 
    color: white; 
    padding: 15px; 
    border-radius: 10px; 
    margin: 20px 0; 
    font-weight: 600; 
    text-align: center; 
}

/* Footer */
footer { 
    background: var(--bg-footer) !important; 
    border-radius: var(--border-radius) !important; 
    padding: 25px 15px; 
    text-align: center; 
    margin-top: 30px; 
    transition: background 0.3s ease;
}

.tech-links a { 
    color: var(--text-link) !important; 
    font-weight: 600; 
    text-decoration: none; 
    margin: 0 10px; 
}

/* Welcome Text */
.welcome-text { 
    text-align: center; 
    font-size: 1.1rem; 
    margin-bottom: 30px; 
}

/* Responsive */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-menu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0; 
        background: var(--menu-bg); 
        flex-direction: column; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
        border-radius: 0 0 15px 15px; 
        padding: 10px; 
        z-index: 1000; 
    }
    .nav-menu.active { display: flex; }
    body { padding: 5px; }
}

/* Theme Toggle Button */
.theme-btn {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.3s ease;
    border-radius: 20px;
}

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

/* Utility Classes */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }

/* Theme-aware component styles - override inline hardcoded colors */
.feature-card { 
    background: var(--bg-card) !important; 
    padding: 30px; 
    border-radius: 20px; 
    text-align: center; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    transition: all 0.3s; 
    border: 2px solid var(--color-gold);
}
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); }
.feature-card h3 { color: var(--color-primary); font-size: 1.4rem; margin-bottom: 15px; }

.vision-item { 
    background: var(--bg-card) !important; 
    padding: 15px; 
    margin: 15px 0; 
    border-radius: 12px; 
    border-left: 5px solid var(--color-secondary); 
    font-weight: 600; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.vision-list { 
    background: var(--bg-card) !important; 
    padding: 30px; 
    border-radius: 20px; 
    margin: 40px 0; 
}

.example-card { 
    background: var(--bg-card) !important; 
    padding: 25px; 
    border-radius: 15px; 
    text-align: center; 
    font-size: 1.1rem; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
    transition: all 0.3s; 
}
.example-card:hover { transform: scale(1.05); }

.cta-banner { 
    background: var(--bg-gradient) !important; 
    color: white; 
    padding: 40px; 
    text-align: center; 
    border-radius: 20px; 
    margin: 40px 0; 
    box-shadow: 0 15px 40px rgba(255,107,53,0.3); 
}

.book { background: var(--bg-card) !important; }

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

.stat { 
    text-align: center; 
    padding: 20px; 
    background: var(--bg-card) !important; 
    border-radius: 15px; 
}
.stat-number { 
    display: block; 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--color-primary) !important; 
    margin-bottom: 8px; 
}

.prod-grid div { 
    background: var(--bg-gradient) !important; 
    color: white !important; 
    padding: 20px; 
    text-align: center; 
    border-radius: 12px; 
    font-weight: 600; 
}

/* Projects page */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.project-item { 
    background: var(--bg-card) !important; 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: var(--shadow-card) !important; 
    transition: all 0.3s; 
}
.project-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover) !important; }
.project-item h3 { color: var(--color-primary) !important; }
.project-item span { color: var(--color-secondary) !important; }

.consultancy { 
    background: var(--bg-gradient) !important; 
    color: white !important; 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center; 
    margin-top: 30px; 
}
.consultancy h3 { color: white !important; }