/* ========================================================================= */

/* 1. GENEL SIFIRLAMA VE TEMEL STİLLER */

/* ========================================================================= */

:root {

    --primary-color: #7B68EE; /* Mor/Lavanta */

    --secondary-color: #6A5ACD; /* Daha koyu mor */

    --accent-color: #FF0077; /* Parlak pembe/magenta (Logo renginden ilham alındı) */

    --text-dark: #2c3e50;

    --text-light: #ecf0f1;

    --bg-dark: #212529; /* Koyu arka plan */

    --bg-light: #ffffff;

    --card-bg: #f8f9fa;

    --border-radius: 8px;

    --padding-section: 6rem 0;

    --transition: 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: 'Poppins', sans-serif;

    line-height: 1.6;

    color: var(--text-dark);

    background-color: var(--bg-light);

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



a {

    text-decoration: none;

    color: var(--primary-color);

    transition: color var(--transition);

}



a:hover {

    color: var(--secondary-color);

}



ul {

    list-style: none;

}



h1, h2, h3 {

    margin-bottom: 1rem;

    font-weight: 700;

}



.section-title {

    font-size: 2.5rem;

    text-align: center;

    margin-bottom: 4rem;

    color: var(--text-dark);

}



/* ========================================================================= */

/* 2. BUTONLAR */

/* ========================================================================= */

.btn {

    display: inline-block;

    padding: 0.75rem 1.75rem;

    border-radius: var(--border-radius);

    font-weight: 600;

    text-align: center;

    transition: var(--transition);

    cursor: pointer;

    border: 2px solid transparent;

}



.btn-primary {

    background-color: var(--primary-color);

    color: var(--text-light);

    border-color: var(--primary-color);

}



.btn-primary:hover {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--text-light);

}



.btn-secondary {

    background-color: transparent;

    color: var(--text-light);

    border-color: var(--text-light);

}



.btn-secondary:hover {

    background-color: rgba(255, 255, 255, 0.1);

    color: var(--text-light);

}



.btn-full {

    width: 100%;

    margin-top: 1rem;

}



/* ========================================================================= */

/* 3. HEADER / NAVİGASYON */

/* ========================================================================= */

#navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background-color: var(--bg-light);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    position: sticky;

    top: 0;

    z-index: 1000;

    height: 80px;

}



/* Logo Boyutu ve Konumu */

.logo-img { /* Yeni eklenen logo-img sınıfı */

    display: flex;

    align-items: center;

    gap: 0.5rem; /* Logo ve metin arasında boşluk */

}



.nav-logo {

	padding-top:30px;

	padding-bottom:30px;

    height: 150px; /* Logo boyutunu büyüt */

    width: auto;

}



.logo-text { /* Yeni eklenecek logo metni için stil */

    font-size: 1.5rem; /* Başlık font boyutu */

    font-weight: 700;

    color: var(--text-dark);

    margin: 0;

}





#nav-links {

    display: flex;

    gap: 2rem;

}



#nav-links a {

    color: var(--text-dark);

    font-weight: 600;

    padding: 0.5rem 0;

    position: relative;

}



#nav-links a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 3px;

    background-color: var(--accent-color);

    bottom: 0;

    left: 0;

    transition: width var(--transition);

}



#nav-links a:hover::after {

    width: 100%;

}



/* Hamburger Menü (Mobil) */

.hamburger {

    display: none;

    cursor: pointer;

    padding: 0.5rem;

}



.hamburger .line {

    width: 25px;

    height: 3px;

    background-color: var(--text-dark);

    margin: 5px 0;

    transition: all var(--transition);

}



@media (max-width: 992px) {

    .hamburger {

        display: block;

    }



    #nav-links {

        position: fixed;

        top: 80px; /* Navbar yüksekliği kadar aşağıda başla */

        right: 0;

        width: 100%;

        height: 100vh;

        background-color: var(--bg-dark);

        flex-direction: column;

        align-items: center;

        transform: translateX(100%);

        transition: transform 0.5s ease-in-out;

        padding-top: 2rem;

    }



    #nav-links li {

        margin: 1.5rem 0;

    }



    #nav-links a {

        color: var(--text-light);

        font-size: 1.5rem;

    }

    

    #nav-links a:hover::after {

        background-color: var(--primary-color);

    }





    .nav-active {

        transform: translateX(0);

    }



    /* Hamburger ikon animasyonu */

    .toggle .line:nth-child(2) {

        opacity: 0;

    }

    .toggle .line:nth-child(1) {

        transform: translateY(8px) rotate(45deg);

    }

    .toggle .line:nth-child(3) {

        transform: translateY(-8px) rotate(-45deg);

    }



    /* Mobil menü açıkken logo metnini gizle */

    .nav-active + .logo-text { /* Hamburger butonu sonra geldiği için böyle seçiyoruz */

        display: none;

    }

}





/* ========================================================================= */

/* 4. ANA SAYFA (HERO SECTION) */

/* ========================================================================= */

#ana-sayfa {

    min-height: 80vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: var(--padding-section);

    

    /* Arka Plan Görseli */

    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('../images/hero-bg.jpg');

    background-size: cover;

    background-position: center;

    color: var(--text-light);

}



#ana-sayfa h1 {

    font-size: 3rem;

    margin-bottom: 1.5rem;

    max-width: 800px;

}



#ana-sayfa p {

    font-size: 1.25rem;

    margin-bottom: 2.5rem;

    font-weight: 300;

}



.btn-container {

    display: flex;

    gap: 1rem;

}



/* ========================================================================= */

/* 5. HAKKIMIZDA */

/* ========================================================================= */

#hakkimizda {

    padding: var(--padding-section);

}



.hakkimizda-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 3rem;

    align-items: center;

}



.hakkimizda-grid .image-wrapper {

    overflow: hidden;

    border-radius: var(--border-radius);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.hakkimizda-grid img {

    width: 100%;

    display: block;

    border-radius: var(--border-radius);

    transition: transform 0.5s ease;

}



.hakkimizda-grid img:hover {

    transform: scale(1.05);

}



.hakkimizda-grid .text p {

    font-size: 1.1rem;

    line-height: 1.8;

}



@media (max-width: 768px) {

    .hakkimizda-grid {

        grid-template-columns: 1fr;

    }

    .hakkimizda-grid .image-wrapper {

        order: -1; /* Resmi yukarı taşır */

    }

}



/* ========================================================================= */

/* 6. NEDEN BİZ */

/* ========================================================================= */

#neden-biz {

    padding: var(--padding-section);

    background-color: var(--card-bg);

}



.neden-biz-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}



.neden-biz-card {

    background-color: var(--bg-light);

    padding: 2rem;

    border-radius: var(--border-radius);

    text-align: center;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);

    transition: transform var(--transition), box-shadow var(--transition);

}



.neden-biz-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.neden-biz-card i {

    font-size: 3rem;

    color: var(--primary-color);

    margin-bottom: 1rem;

}



.neden-biz-card h3 {

    font-size: 1.4rem;

    margin-bottom: 0.75rem;

}



.neden-biz-card p {

    color: #6c757d;

}



@media (max-width: 992px) {

    .neden-biz-grid {

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    }

}



/* ========================================================================= */

/* 7. HİZMETLER */

/* ========================================================================= */

#hizmetler {

    padding: var(--padding-section);

}



.hizmetler-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.hizmet-card {

    padding: 1.5rem;

    background-color: var(--bg-light);

    border: 1px solid #e9ecef;

    border-radius: var(--border-radius);

    text-align: center;

    transition: border-color var(--transition), box-shadow var(--transition);

}



.hizmet-card:hover {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 4px var(--primary-color);

}



.hizmet-card i {

    font-size: 2rem;

    color: var(--accent-color);

    margin-bottom: 0.75rem;

}



.hizmet-card h3 {

    font-size: 1.25rem;

    margin-bottom: 0.5rem;

    color: var(--text-dark);

}



.hizmet-card p {

    color: #6c757d;

}



/* ========================================================================= */

/* 8. HİZMET ŞERİDİ (MARQUEE) */

/* ========================================================================= */

#hizmet-seridi {

    overflow: hidden;

    background-color: var(--primary-color);

    padding: 1.5rem 0;

    margin-bottom: 4rem;

    transform: rotate(-2deg); /* Hafif açılı görünüm için */

    margin-top: -3rem;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}



.marquee-container {

    width: 100%;

    white-space: nowrap;

}



.marquee {

    display: inline-block;

    padding-left: 100%;

    animation: marquee-scroll 20s linear infinite;

    color: var(--text-light);

    font-size: 1.25rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.marquee span {

    padding: 0 2rem;

}



@keyframes marquee-scroll {

    0% { transform: translate(0, 0); }

    100% { transform: translate(-100%, 0); }

}



@media (max-width: 768px) {

    #hizmet-seridi {

        transform: rotate(0);

        margin-top: 0;

    }

    .marquee {

        font-size: 1rem;

    }

}





/* ========================================================================= */

/* 9. MARKALAR VE İŞ ORTAKLARI */

/* ========================================================================= */

#markalar {

    padding: 3rem 0 var(--padding-section);

    background-color: var(--card-bg);

}



.markalar-grid {

    display: flex;

    justify-content: center;

    gap: 3rem;

    text-align: center;

}



.marka-item {

    padding: 1.5rem;

    flex-basis: 30%;

}



.marka-item img {

    max-height: 80px;

    filter: grayscale(100%);

    opacity: 0.7;

    transition: filter var(--transition), opacity var(--transition);

    margin-bottom: 1rem;

}



.marka-item:hover img {

    filter: grayscale(0%);

    opacity: 1;

}



.marka-item p {

    font-size: 0.9rem;

    color: #6c757d;

}



@media (max-width: 768px) {

    .markalar-grid {

        flex-direction: column;

        gap: 1.5rem;

    }

}



/* ========================================================================= */

/* 10. BÜLTEN KAYIT (NEWSLETTER) */

/* ========================================================================= */

#bulten {

    padding: 4rem 0;

}



.bulten-container {

    background-color: var(--bg-dark);

    color: var(--text-light);

    padding: 3rem;

    border-radius: var(--border-radius);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.bulten-text h2 {

    font-size: 2rem;

    margin-bottom: 0.5rem;

}



.bulten-text p {

    opacity: 0.8;

}



.bulten-form form {

    display: flex;

    gap: 1rem;

}



.bulten-form input[type="email"] {

    padding: 0.75rem 1rem;

    border-radius: var(--border-radius);

    border: none;

    min-width: 250px;

    font-size: 1rem;

}



.bulten-form .btn-primary {

    padding: 0.75rem 2rem;

    font-size: 1rem;

}



@media (max-width: 992px) {

    .bulten-container {

        flex-direction: column;

        text-align: center;

    }

    .bulten-text {

        margin-bottom: 1.5rem;

    }

    .bulten-form form {

        flex-direction: column;

        width: 100%;

    }

    .bulten-form input[type="email"] {

        min-width: unset;

        width: 100%;

    }

}



/* ========================================================================= */

/* 11. İLETİŞİM */

/* ========================================================================= */

#iletisim {

    padding: 3rem 0 var(--padding-section);

    background-color: var(--bg-light);

}



.iletisim-grid-3-col {

    display: grid;

    grid-template-columns: 1fr 1.5fr 1fr;

    gap: 2rem;

    margin-top: 3rem;

}



.iletisim-info h3, .iletisim-map-container h3, .iletisim-form-container h3 {

    color: var(--primary-color);

    font-size: 1.5rem;

    margin-bottom: 1.5rem;

}



/* İletişim Bilgileri */

.iletisim-info ul {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.iletisim-info ul li {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

}



.iletisim-info ul li i {

    font-size: 1.5rem;

    color: var(--accent-color);

    margin-top: 0.2rem;

}



.iletisim-info strong {

    font-weight: 700;

    display: block;

    margin-bottom: 0.2rem;

}



/* Harita */

.iletisim-map-container iframe {

    width: 100%;

    height: 450px;

    border: 3px solid var(--card-bg);

    border-radius: var(--border-radius);

}



/* İletişim Formu */

.form-group {

    margin-bottom: 1rem;

}



.form-group label {

    display: block;

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.iletisim-form-container input[type="text"],

.iletisim-form-container input[type="email"],

.iletisim-form-container input[type="tel"],

.iletisim-form-container textarea {

    width: 100%;

    padding: 0.75rem;

    border: 1px solid #ced4da;

    border-radius: var(--border-radius);

    font-size: 1rem;

    transition: border-color var(--transition), box-shadow var(--transition);

}



.iletisim-form-container input:focus,

.iletisim-form-container textarea:focus {

    border-color: var(--primary-color);

    outline: none;

    box-shadow: 0 0 0 0.2rem rgba(123, 104, 238, 0.25);

}



.iletisim-form-container textarea {

    resize: vertical;

    min-height: 120px;

}



@media (max-width: 1200px) {

    .iletisim-grid-3-col {

        grid-template-columns: 1fr 1fr;

    }

    .iletisim-map-container {

        grid-column: span 2; /* Haritayı iki sütun genişliğinde yap */

    }

}



@media (max-width: 768px) {

    .iletisim-grid-3-col {

        grid-template-columns: 1fr;

    }

    .iletisim-map-container {

        grid-column: span 1;

    }

}





/* ========================================================================= */

/* 12. FOOTER */

/* ========================================================================= */

footer {

    background-color: var(--bg-dark);

    color: var(--text-light);

    padding: 2rem 0;

    font-size: 0.9rem;

    /* Eski text-align: center; kaldırıldı, container flex ile merkezlenecek */

}



/* Footer içeriğini bir sütun içine alıp kenarlardan boşluk bırakmak için */

footer .container {

    max-width: 600px; /* Diğer container ile aynı genişlik */

    margin: 0 auto; /* Ortala */

    padding: 0 1.5rem; /* Yan boşluklar */

    display: flex;

    flex-direction: column;

    align-items: center; /* İçeriği yatayda ortala */

    justify-content: center;

    gap: 0.75rem; /* Öğeler arasına boşluk ekler */

    text-align: center; /* Metinleri de ortala */

}



.footer-social-icons {

    margin-bottom: 0.5rem; 

}



.footer-social-icons a {

    color: var(--text-light);

    font-size: 1.5rem;

    margin: 0 0.5rem;

    opacity: 0.7;

    transition: color var(--transition), opacity var(--transition);

}



.footer-social-icons a:hover {

    color: var(--accent-color);

    opacity: 1;

}



footer p {

    margin: 0; 

}



/* ========================================================================= */

/* 13. WHATSAPP & BACK-TO-TOP BUTONLARI */

/* ========================================================================= */

.whatsapp-float {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background-color: #25D366;

    color: var(--text-light);

    border-radius: 50px;

    padding: 0.8rem 1rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 1rem;

    font-weight: 600;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    z-index: 999;

    transition: all 0.3s ease;

}



.whatsapp-float i {

    font-size: 1.5rem;

}



.whatsapp-float:hover {

    background-color: #128C7E;

    color: var(--text-light);

    transform: translateY(-2px);

}



.whatsapp-float span {

    display: block; /* Mobil görünümde metni gizlemek isterseniz 'none' yapabilirsiniz */

}



.back-to-top-btn {

    position: fixed;

    bottom: 90px;

    right: 20px;

    width: 45px;

    height: 45px;

    background-color: var(--primary-color);

    color: var(--text-light);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.2rem;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

    z-index: 998;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;

}



.back-to-top-btn.visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.back-to-top-btn:hover {

    background-color: var(--secondary-color);

    color: var(--text-light);

}



/* ========================================================================= */

/* 14. KAYDIRMA ANİMASYONU STİLLERİ */

/* ========================================================================= */

.reveal-on-scroll {

    opacity: 0;

    transform: translateY(50px);

    transition: opacity 1s ease, transform 1s ease;

}



.reveal-on-scroll.visible {

    opacity: 1;

    transform: translateY(0);

}



/* ========================================================================= */

/* 15. RESPONSIVE DÜZENLEMELER */

/* ========================================================================= */

@media (max-width: 992px) {

    #ana-sayfa h1 {

        font-size: 2.5rem;

    }



    .section-title {

        font-size: 2rem;

        margin-bottom: 3rem;

    }



    #neden-biz, #hizmetler, #hakkimizda {

        padding: 4rem 0;

    }

}



@media (max-width: 768px) {

    #ana-sayfa {

        padding: 8rem 1rem;

    }

    

    #ana-sayfa h1 {

        font-size: 2rem;

    }



    #ana-sayfa p {

        font-size: 1rem;

    }



    .btn-container {

        flex-direction: column;

        gap: 0.75rem;

        width: 100%;

        padding: 0 2rem;

    }



    .btn {

        width: 100%;

    }



    .container {

        padding: 0 1rem;

    }



    .whatsapp-float span {

        display: none; /* Mobilde sadece ikon kalsın */

    }



    /* Mobilde logo ve metni yan yana tutmak için */

    .logo-img {

        flex-direction: row;

        gap: 0.5rem;

    }

    .logo-img .nav-logo {

        height: 40px; /* Mobil için logo boyutunu ayarla */

    }

    .logo-img .logo-text {

        font-size: 1.2rem; /* Mobil için metin boyutunu ayarla */

    }

}