/* Genel Ayarlar ve Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Sayfa içi linklere tıklandığında yumuşak kaydırma */
}

body {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #ffffff; /* Beyaz arka plan */
    color: #333333; /* Koyu gri metin */
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header ve Navigasyon */
header {
    background-color: #ffffff;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
    position: fixed; /* Üstte sabit kalması için */
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: #333333;
    text-decoration: none;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

/* Menüdeki linklere daha belirgin bir hover efekti */
nav a {
    text-decoration: none;
    color: #555555;
    font-weight: 500;
    padding-bottom: 5px; /* Alt çizgi için boşluk */
    border-bottom: 2px solid transparent; /* Gizli alt çizgi */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

nav a:hover {
    color: #764ba2; /* Ana renklerimizden biri */
    border-bottom-color: #764ba2; /* Üzerine gelince alt çizgi belirsin */
}

/* Dil Değiştirme Stilleri */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language-switcher a {
    text-decoration: none;
    color: #888888;
    font-weight: bold;
    padding: 0.2rem;
}

.language-switcher a.active {
    color: #007aff;
}

.language-switcher span {
    color: #dddddd;
}

/* Bölümler (Sections) */
main {
    padding-top: 80px; /* Sabit header'ın içeriği örtmemesi için boşluk */
}

section {
    padding: 5rem 0;
    text-align: center;
}

#about {
    background-color: #f8f8f8; 
}

/* Anasayfa Karşılama Alanı (Hero) */
.hero {
    padding: 6rem 0;
    text-align: center;
    color: white; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.cta-button {
    display: inline-block;
    background-color: #007aff;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

/* Daha Cesur Başlıklar */
h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -1px;
}

.hero h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #000000;
}

/* Uygulamalar Bölümü Stilleri */
#apps .section-intro {
    max-width: 600px;
    margin: -1rem auto 3rem auto;
    font-size: 1.1rem;
    color: #666;
}

.company-feature {
    text-align: center;
    margin-bottom: 4rem;
}

.company-logo {
    max-width: 300px;
    margin-bottom: 1rem;
}

.app-showcase {
    display: flex;
    align-items: center;
    gap: 3rem;
    text-align: left;
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-showcase:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.app-visual {
    flex-basis: 40%;
}

.app-visual img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.app-details {
    flex-basis: 60%;
}

.app-details h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.app-details p {
    margin-bottom: 2rem;
}

.app-store-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.app-store-button:hover {
    transform: scale(1.05);
}

/* İletişim Bölümü ve Formu Stilleri */
/* İletişim Bilgisi Stilleri */
.contact-info {
    margin-top: 2rem;
}

.email-link {
    font-size: 1.5rem; /* E-posta adresini daha belirgin yapalım */
    font-weight: 500;
    color: #764ba2; /* Ana renklerimizden biri */
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.email-link:hover {
    border-bottom-color: #764ba2; /* Üzerine gelince alt çizgi belirsin */
    background-color: #f0f2f5; /* Hafif bir arka plan rengi */
    border-radius: 8px;
}

/* Footer */
footer {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding: 2rem 0;
}

/* Kaydırma Animasyonu Stilleri */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobil Cihazlar için Ayar */
/* =================================
   MOBİL MENÜ (HAMBURGER) STİLLERİ
   ================================= */

/* Mobil Menü Butonu (Hamburger İkonu) */
.mobile-nav-toggle {
    display: none; /* Masaüstünde varsayılan olarak gizli */
}

/* Navigasyon ve Dil Değiştiriciyi Saran Kapsayıcı */
.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
}


/* =================================
   MOBİL VE TABLET GÖRÜNÜMÜ (768px ve altı)
   ================================= */
@media (max-width: 768px) {
    /* --- MENÜ AYARLARI --- */

    /* Hamburger ikonunu görünür yap */
    .mobile-nav-toggle {
        display: block;
        position: absolute;
        z-index: 2000;
        right: 1.5rem;
        top: 1.5rem; /* Dikey olarak ortalandı */
        background: transparent;
        border: 0;
        padding: 0.5em;
        width: 2rem;
        aspect-ratio: 1;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    /* Menü açıkken ikonu çarpı (X) yap */
    .mobile-nav-toggle[aria-expanded="true"] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e");
    }

    /* Sağdan kayarak açılacak menü paneli */
    .nav-wrapper {
        position: fixed;
        inset: 0 0 0 30%; /* Panelin genişliği ekranın %70'i olacak */
        flex-direction: column;
        justify-content: center; /* İçerikleri dikeyde ortala */
        gap: 3rem;
        padding: min(20rem, 15vh) 2rem;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px); /* Arka planı bulanıklaştır (iOS stili) */
        
        /* Menüyü başlangıçta ekranın sağına taşı ve gizle */
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }
    
    /* Menü açık durumdayken (JavaScript ile eklenecek) */
    .nav-wrapper[data-visible="true"] {
        transform: translateX(0%); /* Menüyü görünür yap */
    }

    /* Menü linklerini alt alta diz ve büyüt */
    nav ul {
        flex-direction: column; 
        text-align: center;
        gap: 2.5rem; 
    }
    nav a {
        font-size: 1.3rem; /* Yazıları daha okunabilir yap */
    }

    /* --- DİĞER MOBİL İYİLEŞTİRMELER --- */

    .app-showcase {
        flex-direction: column;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    section {
        padding: 4rem 1rem;
    }
    .contact-form {
        padding: 1.5rem;
    }
}