/* --- Temel Sıfırlama ve Ayarlar --- */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Google'dan çektiğimiz font */
    line-height: 1.6; /* Daha okunaklı satır aralığı */
}

/* --- Hero Bölümü Ana Stilleri --- */
.hero {
    /* Ekranın neredeyse tamamını kapla */
    height: 90vh; 
    
    /* * Arka plan: Düz renk yerine modern bir gradient (renk geçişi) 
     * Dilerseniz "url('resim.jpg')" ile resim de koyabilirsiniz.
     */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Yazı renkleri bu arka planda beyaz olsun */
    color: white;

    /* * SİHİRLİ KISIM: FLEXBOX
     * display: flex         -> İçerideki .hero-content'i esnek bir kutuya al.
     * align-items: center   -> Dikeyde ortala.
     * justify-content: center -> Yatayda ortala.
     */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* İçerik çok sıkışmasın diye biraz boşluk */
    padding: 0 20px;
}

/* --- İçerik Kutusu Stilleri --- */
.hero-content {
    /* Tüm içerik (başlık, paragraf, düğme) ortalansın */
    text-align: center;
    max-width: 600px; /* İçerik çok genişleyip okunaksız hale gelmesin */
}

.hero-content h1 {
    font-size: 3rem; /* Büyük, çarpıcı başlık */
    margin-bottom: 1rem;
    font-weight: 700; /* Kalın */
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9; /* Tam beyaz değil, biraz soluk olsun */
}

/* --- Call-to-Action (CTA) Düğmesi --- */
.cta-button {
    display: inline-block; /* Bir link olmasına rağmen kutu gibi davranmasını sağlar */
    background-color: #ffffff; /* Arka plan beyaz */
    color: #667eea; /* Yazı rengi (gradient'in ana rengi) */
    padding: 12px 24px; /* Havadar bir düğme için iç boşluk */
    text-decoration: none; /* Link alt çizgisini kaldır */
    border-radius: 50px; /* Modern yuvarlak kenarlar */
    font-weight: bold; /* Kalın yazı */
    
    /* * SON DOKUNUŞ: GEÇİŞ (Transition)
     * Üzerine gelindiğinde (hover) olacak değişiklikler 0.3 saniyede yumuşakça olsun.
     */
    transition: all 0.3s ease;
}

/* --- Düğme Hover Efekti --- */
.cta-button:hover {
    /* Hafifçe büyüsün */
    transform: scale(1.05); 
    
    /* ve gölge eklensin */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
}