/*
 * Nisantasi Oyun Stüdyosu - CSS Dosyası
 * Tema: Havacılık / Mühendislik
 * Yazar: Gemini AI
 * Not: Google Fonts veya harici görseller kullanılmamıştır.
 */

/* ==============================================
   1. Global Ayarlar ve Gövde (Body)
   ============================================== */

* {
    /* Daha sezgisel kutu modeli */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Blok 1'den forma yumuşak kaydırma için */
}

body {
    /* * Font Ailesi: Google Fonts olmadan, modern, "mühendislik" hissiyatlı
     * sistem fontları (San Francisco, Segoe UI, Helvetica Neue vb.) kullanılır.
     */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7; /* Okunabilirlik için */

    /* Tema Renkleri */
    background-color: #f4f7f6; /* Çok hafif "fırçalanmış alüminyum" grisi */
    color: #212529; /* Ana metin rengi (Koyu titanyum) */

    /* * Kısıtlamalar: Maksimum genişlik 1090px ve merkezde konumlandırma
     */
    max-width: 1090px;
    margin: 0 auto;

    /* Sayfaya "gövde" hissi vermek için hafif kenarlıklar */
    border-left: 1px solid #d4d8dc;
    border-right: 1px solid #d4d8dc;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* ==============================================
   2. Blok 1: Hero (Satış Teklifi)
   ============================================== */

header.hero {
    /* Kısıtlama: Minimum yükseklik 470px */
    min-height: 470px;

    /* Tema: Koyu "kokpit" veya "karbon fiber" arka planı */
    background-color: #0a192f; /* Koyu gece mavisi */
    color: #f0f0f0; /* Kontrastlı açık metin */

    padding: 60px 40px;

    /* İçeriği dikeyde ortalamak için */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    /* Vurgu: "Uçak kanadı" gibi alt çizgi */
    border-bottom: 5px solid #3498db;
}

header.hero h1 {
    font-size: 3rem; /* 48px */
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

header.hero p {
    font-size: 1.25rem; /* 20px */
    max-width: 650px; /* Okunabilirlik */
    margin-bottom: 35px;
    color: #d4d8dc; /* Ana beyazdan biraz daha sönük */
}

/* Blok 1: CTA (Call-to-Action) Bağlantı-Butonu */
.cta-button {
    display: inline-block;
    background-color: #3498db; /* "Jet mavisi" vurgu */
    color: #ffffff;
    padding: 15px 32px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem; /* 17.6px */
    border-radius: 4px; /* Hafif yuvarlatma */
    transition: all 0.3s ease;
    border: 2px solid #3498db;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.cta-button:hover,
.cta-button:focus {
    background-color: #2980b9; /* Hover rengi */
    border-color: #2980b9;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
    transform: translateY(-2px); /* Hafif kalkma efekti */
}

/* ==============================================
   3. Genel Bölüm (Section) Stilleri
   ============================================== */

/* Bloklar arası kontrastlı ayırma */
section {
    padding: 50px 40px;
    margin-bottom: 8px; /* Bloklar arası ince boşluk */
    border-bottom: 1px solid #d4d8dc; /* Ayırıcı */
}

/* Ana Başlıklar (H2) */
h2 {
    font-size: 2.3rem; /* 36.8px */
    color: #0a192f; /* Koyu mavi (Hero ile tutarlı) */
    margin-bottom: 30px;
    padding-bottom: 10px;
    /* "Teknik Şema" (Blueprint) stili alt çizgi */
    border-bottom: 3px solid #3498db;
    display: inline-block;
}

h3 {
    font-size: 1.5rem; /* 24px */
    color: #2c3e50;
    margin-bottom: 10px;
}

/* ==============================================
   4. Karıştırılmış Bloklar (Spesifik Stiller)
   ============================================== */

/* Blok 2: Abone Formu (Kontrast için Koyu) */
section#kayitformu {
    background-color: #2c3e50; /* Koyu arduvaz grisi */
    color: #f0f0f0;
    border-radius: 4px; /* Bu bloğu farklılaştırmak için */
    margin-left: 10px;
    margin-right: 10px;
}
section#kayitformu h2 {
    color: #ffffff;
    border-color: #e67e22; /* "Uyarı" turuncusu vurgu */
}
section#kayitformu p {
    color: #d4d8dc;
    font-size: 1.1rem;
}

/* Form Elemanları */
form {
    display: flex;
    flex-wrap: wrap; /* Mobil için */
    gap: 12px;
    margin-top: 25px;
    align-items: stretch;
}

/* Form Etiketleri (Görsel olarak gizli, ekran okuyucu için görünür) */
form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* E-posta Giriş Alanı */
input[type="email"] {
    flex: 1 1 300px; /* Esnek büyüme */
    padding: 15px 20px;
    font-size: 1.1rem;
    border: 2px solid #a0b4c8; /* Soğuk gri kenarlık */
    border-radius: 4px;
    background-color: #f4f7f6; /* Gövde arka planı */
    color: #212529;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="email"]:focus {
    outline: none;
    border-color: #3498db; /* Mavi vurgu */
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.25);
}

/* Gönder (Submit) Butonu */
button[type="submit"] {
    padding: 15px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #e67e22; /* "Aksiyon" turuncusu */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 0 1 auto;
}

button[type="submit"]:hover {
    background-color: #d35400; /* Koyu turuncu */
}

/* Blok 3: Ürünler */
section.products-article {
    background-color: #ffffff; /* Temiz beyaz */
}
.product-item {
    border-bottom: 1px dashed #a0b4c8; /* Teknik çizim ayıracı */
    padding: 18px 5px;
    margin-bottom: 18px;
}
.product-item:last-child {
    border-bottom: none;
}
.product-price {
    font-weight: 700;
    color: #27ae60; /* Pozitif renk (Başarı) */
    font-size: 1.3rem;
    display: block;
    margin-top: 8px;
}

/* Blok 3.1: Makale (Öne Çıkarma) */
article.blog-post {
    margin-top: 50px;
    background-color: #f8f9fa; /* Hafif kirli beyaz */
    border: 1px solid #d4d8dc;
    padding: 30px;
    border-radius: 4px;
    /* Sol kenarda "Uyarı şeridi" stili */
    border-left: 6px solid #e67e22;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}
article.blog-post h2 {
    font-size: 1.9rem;
    border-bottom: none; /* Genel H2 stilini iptal et */
    padding-bottom: 0;
    margin-bottom: 20px;
    color: #e67e22; /* Başlığı vurgu rengiyle eşleştir */
}
article.blog-post p {
    margin-bottom: 15px;
    color: #333;
    line-height: 1.8;
}

/* Blok 4: Uzmanlar & 4.1: Medya (Kontrastlı Arka Plan) */
section.team,
section.media-mentions {
    background-color: #e9f1f7; /* Hafif "şema" mavisi */
}
.team-member {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #c8d4e0;
}
.team-member:last-child {
    border-bottom: none;
}
.team-member p {
    font-style: italic;
    color: #555;
    font-size: 1.1rem;
}

/* Blok 5: Yorumlar */
section.reviews {
    background-color: #ffffff;
}
.review-item {
    /* Alıntı stili */
    border-left: 5px solid #3498db;
    padding-left: 25px;
    margin-bottom: 30px;
    background-color: #f8f9fa;
    padding: 20px 25px;
    border-radius: 0 4px 4px 0;
}
.review-item blockquote {
    font-size: 1.15rem;
    font-style: italic;
    margin-bottom: 10px;
    color: #333;
}
.review-item cite {
    font-weight: 700;
    color: #0a192f; /* Koyu vurgu */
    font-style: normal;
}

/* ==============================================
   5. Blok 6 ve 7: Lokasyon ve Footer
   ============================================== */

/* Blok 6: Lokasyon */
section.location {
    background-color: #ffffff;
    padding-bottom: 0; /* Harita ile bitişik olsun */
}
address {
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 450px;
    margin-bottom: 20px;
}
p[Email] { /* E-posta paragrafı için basit seçici */
    font-size: 1.1rem;
}
.map-container {
    margin: 30px -40px 0 -40px; /* Kenardan kenara taşır */
    line-height: 0; /* Iframe altındaki boşluğu kaldır */
}
.map-container iframe {
    /* Genişlik HTML'de 100% olarak ayarlandı */
    border: 0;
    display: block;
}

/* Blok 7: Footer (Telif Hakkı) */
footer {
    background-color: #0a192f; /* Hero ile aynı koyu tema */
    color: #a0b4c8; /* Soluk, ikincil metin */
    text-align: center;
    padding: 40px;
    margin-top: 0; /* Lokasyon bloğuna bitişik */
    font-size: 0.9rem;
}

/* ==============================================
   6. Mobil Uyum (Responsive Tasarım)
   ============================================== */

@media (max-width: 768px) {
    body {
        /* Mobil cihazlarda 1090px sınırı ve kenarlıkları kaldır */
        max-width: 100%;
        border-left: none;
        border-right: none;
    }

    /* Tüm bölümlerde kenar boşluklarını azalt */
    section,
    header.hero {
        padding: 40px 20px;
    }

    /* Başlık fontlarını küçült */
    header.hero h1 {
        font-size: 2.4rem; /* 38.4px */
    }
    header.hero p {
        font-size: 1.1rem;
    }

    h2 {
        font-size: 1.9rem; /* 30.4px */
    }
    h3 {
        font-size: 1.3rem;
    }

    /* Hero */
    header.hero {
        min-height: auto; /* Yüksekliği serbest bırak */
        align-items: center; /* Mobilde ortala */
        text-align: center;
    }

    /* Form (Elemanların alt alta gelmesi) */
    form {
        flex-direction: column;
    }
    input[type="email"],
    button[type="submit"] {
        width: 100%; /* Tam genişlik */
    }

    /* Harita (Padding'i sıfırla) */
    .map-container {
        margin: 30px -20px 0 -20px;
    }
    .map-container iframe {
        height: 350px; /* Mobil için makul yükseklik */
    }

    /* Lokasyon bloğu için alt padding */
    section.location {
        padding-bottom: 0;
    }
}