/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

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

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar {
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
}

.nav-logo i {
    font-size: 2rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: #2563eb;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><pattern id="antakya-logo" width="200" height="150" patternUnits="userSpaceOnUse"><g fill="rgba(255,255,255,0.05)"><path d="M20,50 L40,30 L60,40 L80,20 L100,35 L120,25 L140,40 L160,30 L180,45 L200,35 L220,50 L240,40 L260,55 L280,45 L300,60 L320,50 L340,65 L360,55 L380,70 L400,60 L420,75 L440,65 L460,80 L480,70 L500,85 L520,75 L540,90 L560,80 L580,95 L600,85 L620,100 L640,90 L660,105 L680,95 L700,110 L720,100 L740,115 L760,105 L780,120 L800,110 L820,125 L840,115 L860,130 L880,120 L900,135 L920,125 L940,140 L960,130 L980,145 L1000,135 L1020,150 L1040,140 L1060,155 L1080,145 L1100,160 L1120,150 L1140,165 L1160,155 L1180,170 L1200,160 L1220,175 L1240,165 L1260,180 L1280,170 L1300,185 L1320,175 L1340,190 L1360,180 L1380,195 L1400,185 L1420,200 L1440,190 L1460,205 L1480,195 L1500,210 L1520,200 L1540,215 L1560,205 L1580,220 L1600,210 L1620,225 L1640,215 L1660,230 L1680,220 L1700,235 L1720,225 L1740,240 L1760,230 L1780,245 L1800,235 L1820,250 L1840,240 L1860,255 L1880,245 L1900,260 L1920,250 L1940,265 L1960,255 L1980,270 L2000,260"/><circle cx="180" cy="40" r="3"/><circle cx="185" cy="35" r="2"/><circle cx="190" cy="30" r="2"/><text x="180" y="60" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.3)">1939</text><text x="100" y="180" font-family="Arial" font-size="12" font-weight="bold" fill="rgba(255,255,255,0.2)">ANTAKYA</text><text x="100" y="195" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.15)">BELEDİYESİ</text></g></pattern></defs><rect width="400" height="300" fill="url(%23antakya-logo)"/></svg>');
    opacity: 0.4;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.highlight {
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #1e3a8a;
    transform: translateY(-2px);
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.president-photo {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.president-photo i {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Stats Section */
.stats {
    padding: 4rem 0;
    background: #f1f5f9;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-item i {
    font-size: 3rem;
    color: #2563eb;
    margin-bottom: 1rem;
}

.stat-item h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: #64748b;
    font-weight: 500;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
.about {
    padding: 6rem 0;
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.about-text p {
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.values-list {
    list-style: none;
}

.values-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #64748b;
}

.values-list i {
    color: #10b981;
    font-size: 1.2rem;
}

.about-photo {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.about-photo i {
    font-size: 6rem;
    color: white;
}

/* Projects Section */
.projects {
    padding: 6rem 0;
    background: #f1f5f9;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-image {
    height: 200px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image i {
    font-size: 4rem;
    color: white;
}

.project-content {
    padding: 2rem;
}

.project-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.project-content p {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.status {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status.completed {
    background: #dcfce7;
    color: #166534;
}

.status.ongoing {
    background: #fef3c7;
    color: #92400e;
}

.status.planned {
    background: #dbeafe;
    color: #1e40af;
}

/* News Section */
.news {
    padding: 6rem 0;
    background: white;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.news-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.news-image {
    height: 200px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image i {
    font-size: 4rem;
    color: white;
}

.news-content {
    padding: 2rem;
}

.news-date {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.news-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0.5rem 0 1rem 0;
}

.news-content p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.read-more {
    color: #1e3a8a;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #0f172a;
}

/* Contact Section */
.contact {
    padding: 6rem 0;
    background: #f1f5f9;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-item i {
    font-size: 1.5rem;
    color: #2563eb;
    margin-top: 0.2rem;
}

.contact-item h4 {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.contact-item p {
    color: #64748b;
}

.social-links h4 {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: #1e3a8a;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #0f172a;
    transform: translateY(-2px);
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-form h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1e3a8a;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: #0f172a;
    color: white;
    padding: 3rem 0 1rem 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-section p {
    color: #cbd5e1;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid #1e293b;
    padding-top: 1rem;
    text-align: center;
    color: #cbd5e1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .president-photo {
        width: 200px;
        height: 200px;
    }
    
    .president-photo i {
        font-size: 5rem;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .news-card.featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Animation */
.loading {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.loading.loaded {
    opacity: 1;
    transform: translateY(0);
} 

/* About media additions */
.about-photo {
    position: relative;
    overflow: hidden;
}

.about-photo .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Timeline */
.timeline {
    margin-top: 2rem;
    position: relative;
    padding-left: 0;
}

/* Timeline override: dots before year text */
.timeline::before { display: none; }
.timeline-item { padding-left: 0; }
.timeline-item::before { display: none; }
.timeline-item h4 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.timeline-item h4::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #1e3a8a;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #e2e8f0;
    flex: 0 0 10px;
}

.timeline-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
} 

/* President photo image styling */
.president-photo .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.85);
} 

/* Timeline final overrides */
.about .timeline::before { display: none !important; }
.about .timeline-item { padding-left: 0 !important; margin-left: 0 !important; }
.about .timeline-item::before { display: none !important; }
.about .timeline-item h4 {
	position: relative;
	display: block;
	padding-left: 22px !important;
	margin: 0 0 0.25rem 0;
}
.about .timeline-item h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #1e3a8a;
	box-shadow: 0 0 0 3px #e2e8f0;
}