#hero {
    /* Yüksekliği artırmak için alt dolguyu (padding) artırıyoruz */
    padding: 4rem 0 18rem 0; 
    position: relative;
    overflow: hidden;
    background-color: var(--bg-dark-blue);
}

/* Navigasyon Menüsü */
.navbar {
    position: relative;
    z-index: 10;
}

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

/* Logo ve "Creative House" Yazısı */
.logo-container {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.logo-container .logo-img {
    width: 160px; /* Logo boyutunu ayarlayabilirsiniz */
    height: auto;
}
.logo-container .tagline {
    color: #a0a0a0;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-top: 5px;
}

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

/* 2. Menüdeki yazı puntosunu büyütüyoruz */
.nav-menu a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 1.1rem; /* 0.9rem'den artırıldı */
    padding: 10px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-menu a:hover, .nav-menu a.active {
    background-color: #fff;
    color: var(--bg-dark-blue);
}
/* İki Sütunlu Hero İçeriği */
.hero-content {
    margin-top: 6rem;
    position: relative;
    z-index: 5;
}

.hero-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 100px;
}

.hero-left {
    flex-basis: 50%;
}
.hero-right {
    flex-basis: 45%;
    padding-top: 5px;
}

/* -- FONT DÜZENLEMELERİ -- */
.hero-left p {
    font-family: var(--font-main); /* Font serif'ten sans-serif'e değiştirildi */
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.25; /* Satır aralığı tasarıma göre ayarlandı */
    letter-spacing: 0.5px;
    color: var(--text-color);
    margin-bottom: 2rem;
}
.hero-right p {
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.7;
    color: #fff; /* Daha açık bir metin rengi */
    margin-bottom: 1.5rem;
}
.hero-right p:first-of-type {
    margin-bottom: 0; /* Paragraf ile çizgi arasındaki boşluğu kontrol etmek için */
}
.hero-right p:first-of-type::after {
    content: '';
    display: block;
    width: 60px; /* Çizgi genişliği */
    height: 4px; /* Çizgi kalınlığı */
    background-color: var(--primary-color); /* Sarı renk */
    margin: 2rem 0; /* Çizginin üst ve alt boşluğu */
}


.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #111; /* Yazı rengi */
    padding: 5px 15px;
    text-decoration: none;
    font-family: var(--font-main);
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
}

.cta-button:hover {
    background-color: #fff;
    color: #111;
}


/* Arka Plan "SoArtic" Logo Stili */
.hero-bg-logo {
    position: absolute;
    /* Logonun daha fazla kırpılması için 'bottom' değerini artırıyoruz */
    bottom: -12vw; 
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}
.hero-bg-logo img {
    width: 100%;
    display: block;
}














/* ==================================================================== */
/* Mobil Uyumluluk (Responsive) Stilleri - TÜM ELEMANLAR GÖRÜNÜR HALDE */
/* ==================================================================== */

@media (max-width: 768px) {

    /* 1. Hero alanının boşluklarını mobil için yeniden ayarlıyoruz */
    #hero {
        padding: 2rem 1.5rem 7rem 1.5rem; /* Alttaki logoya yer açmak için alt boşluk artırıldı */
    }

    /* 2. Navbar'ı mobil için yeniden düzenliyoruz (Logo ve menü alt alta) */
    /* Navbar'ı mobil için yeniden düzenliyoruz (Logo solda, menü ikonu sağda) */
    .navbar .container {
        flex-direction: row; /* Dikey hizalamayı yatay yapar */
        justify-content: space-between; /* Logoyu sola, ikonu sağa iter */
        align-items: center; /* Dikey olarak ortalar */
    }
    
    .logo-container .logo-img {
        width: 140px; /* Logo boyutu */
    }


    /* 4. Hero içeriğini mobil için düzenliyoruz */
    .hero-content {
        margin-top: 4rem;
    }
    .hero-container {
        flex-direction: column; /* Sütunları alt alta diz */
        text-align: left; /* Metinleri sola hizala */
        gap: 2.5rem; /* Yazı blokları arası boşluk */
        margin-bottom: 20px;
    }

    /* 5. Sağdaki yazı alanını GÖSTERİYORUZ */
    .hero-right {
        display: block; 
    }

    .hero-left, .hero-right {
        flex-basis: 100%; /* Her iki alan da tam genişliği kaplasın */
    }

    /* 6. Yazı boyutlarını mobil için ayarlıyoruz */
    /* NOT: HTML'de H1 yerine P etiketi kullandığınız için seçici bu şekildedir */
    .hero-left p {
        font-size: 1.7rem;
        line-height: 1.3;
        text-align: left;
        margin-bottom: 5px;
        line-height: 1.3;

    }

    .hero-right p {
        font-size: 0.95rem; /* Sağdaki paragraf yazısı */
    }
    
    .cta-button {
        align-self: flex-start; /* Butonu sola hizala */
          padding: 5px 15px;
          font-weight: 700;
          font-size: 12px;
    }

    /* 7. Arka plandaki büyük logoyu GÖSTERİYORUZ */
    .hero-bg-logo {
        display: block; 
        bottom: -10vw; /* Mobil dikey ekrana göre kırpma oranını ayarlıyoruz */
    }
}