/* style.css - FINAL VERSION */

/* --- FONTLAR --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;700&display=swap');

/* --- TEMEL AYARLAR --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ÖNEMLİ: Varsayılan olarak (Kurumsal, İletişim vb.) sayfa kaydırılabilir olsun */
html, body {
    width: 100%;
    min-height: 100vh;
    background: #000;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden; /* Yan taşmayı engelle */
}

body {
    overflow-y: auto; /* DİKEY KAYDIRMA AÇIK */
}

/* SADECE ANA SAYFA (ID="index-page" varsa) Kaydırmayı Kilitle */
body#index-page {
    height: 100vh;
    overflow: hidden; 
}

/* --- ARKA PLAN (BLOBS) --- */
.fluid-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; overflow: hidden; background: #1a1a1a;
}
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.8;
    animation: float 10s infinite ease-in-out alternate;
    transition: all 2.5s ease-in-out;
}
.blob-1 { width: 60vw; height: 60vw; background: #ff5100; top: -10%; left: -10%; }
.blob-2 { width: 50vw; height: 50vw; background: #ff9d00; bottom: -10%; left: 20%; }
.blob-3 { width: 60vw; height: 60vw; background: #006aff; top: -10%; right: -10%; }
.blob-4 { width: 50vw; height: 50vw; background: #00c3ff; bottom: -10%; right: 20%; }
.noise-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.2; pointer-events: none;
}
@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(20px, 20px); } }

/* Ayrışma Modu (Index Animasyonu İçin) */
body.separated .blob-1, body.separated .blob-2 { left: -10% !important; right: auto !important; top: 10% !important; transform: scale(1.2); }
body.separated .blob-3, body.separated .blob-4 { left: auto !important; right: -10% !important; top: 10% !important; transform: scale(1.2); }


/* --- MASTER HEADER (SABİT ŞERİT) --- */
.site-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 90px;
    z-index: 1000;
    
    /* FLEXBOX İLE DÜZENLEME (En garantisi) */
    display: flex;
    justify-content: space-between; /* Sol ve Sağ köşelere it */
    align-items: center;
    padding: 0 40px;
    
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible;
}

/* HEADER SOL (LOGO) */
.header-left {
    flex: 0 0 auto;
    display: flex; align-items: center; z-index: 1002;
}

.header-logo-container {
    position: relative;
    transform: none; 
    top: auto; 
    left: auto;
    display: flex;
    align-items: center;
}

/* ÖNEMLİ: Varsayılan Logo Boyutu KÜÇÜK (50px) */
.main-logo-img {
    height: 50px; 
    width: auto;
    display: block;
    transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: left center;
}

/* HEADER ORTA (MENÜ) - GÜNCELLENDİ */
.header-center {
    flex: 1; /* Kalan boşluğu kapla */
    display: flex;
    justify-content: flex-start; /* ÖNEMLİ: Center yerine Flex-Start (Sola Yasla) */
    padding-left: 60px; /* Logo ile menü arasına boşluk bırak */
    z-index: 1001;
}

.top-menu ul {
    display: flex; list-style: none; gap: 40px; margin: 0; padding: 0;
}

.top-menu a {
    text-decoration: none; color: rgba(255, 255, 255, 0.7);
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
    transition: color 0.3s ease; position: relative;
}
.top-menu a:hover, .top-menu a.active { color: #fff; }
.top-menu a::after {
    content: ''; position: absolute; width: 0; height: 3px; bottom: -8px; left: 0;
    background-color: #ff9900; transition: width 0.3s ease;
}
.top-menu a:hover::after, .top-menu a.active::after { width: 100%; }

/* HEADER SAĞ (İKONLAR) */
.header-right {
    flex: 0 0 auto;
    display: flex; align-items: center; z-index: 1002;
}
.social-icons { display: flex; gap: 15px; }
.social-icons a { color: #fff; font-size: 1.2rem; transition: 0.3s; opacity: 0.8; }
.social-icons a:hover { opacity: 1; transform: translateY(-3px); color: #ff9900; }


/* --- SADECE INDEX SAYFASI İÇİN ÖZEL KURALLAR (ANİMASYON) --- */

/* 1. Başlangıç Durumu (Animasyon Öncesi) */
body#index-page:not(.separated) .header-logo-container {
    /* position: fixed;  <-- SİLDİK, ARTIK YOK */
    /* top/left ayarları <-- SİLDİK */
    z-index: 2000;
}
/* Logoyu olduğu yerde 3.6 kat büyütüyoruz (50px * 3.6 = 180px) */
body#index-page:not(.separated) .main-logo-img {
    transform: scale(3.6); /* Olduğu yerde devasa görünür */
    box-shadow: 0 10px 30px rgba(0,0,0, 0.5);
    border-radius: 5px;
}

/* Menü ve İkonlar Gizli */
body#index-page:not(.separated) .header-center,
body#index-page:not(.separated) .header-right {
    opacity: 0;
    transform: translateY(-20px);
}

/* Header Tıklanamaz */
body#index-page:not(.separated) .site-header {
    pointer-events: none;
}
/* DİĞER SAYFALARDA LOGO VE HEADER NORMAL */
body#corporate-page .header-logo-container,
body#contact-page .header-logo-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
}
body#corporate-page .main-logo-img,
body#contact-page .main-logo-img {
    height: 50px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body#corporate-page .header-center,
body#corporate-page .header-right,
body#contact-page .header-center,
body#contact-page .header-right {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
body#corporate-page .site-header,
body#contact-page .site-header {
    pointer-events: all !important;
}
/* Diğer sayfalarda header normal görünsün */
body:not(#index-page) .header-center,
body:not(#index-page) .header-right {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
body:not(#index-page) .site-header {
    pointer-events: all !important;
}

/* 2. Bitiş Durumu (Animasyon Sonrası - .separated sınıfı eklendiğinde) */
body#index-page.separated .header-logo-container {
    z-index: auto;
}
body#index-page.separated .main-logo-img {
    transform: scale(1); /* Orijinal boyutuna (50px) döner */
    box-shadow: none; 
    border-radius: 0;
}
body#index-page.separated .header-center,
body#index-page.separated .header-right {
    opacity: 1; transform: translateY(0); transition: all 1s ease 1.5s;
}
body#index-page.separated .site-header {
    pointer-events: all;
}


/* --- SAYFA İÇERİK AYARLARI --- */
/* Header altında kalmaması için üstten boşluk */
.corporate-container {
    padding-top: 150px; 
    padding-bottom: 50px;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
}
.contact-container {
    padding-top: 150px;
    display: flex; flex-direction: column; align-items: center;
}

/* Split Ekran (Index) */
.container { position: relative; width: 100%; height: 100%; }
.split { position: absolute; width: 50%; height: 100%; overflow: hidden; transition: all 1s ease; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-right: 1px solid rgba(255,255,255,0.1); }
.split.left { left: 0; } .split.right { right: 0; border-left: 1px solid rgba(255,255,255,0.1); border-right: none; }
.container.show-left .split.left { width: 95%; background: #ff9900; opacity: 1; z-index: 5; } .container.show-left .split.right { width: 5%; cursor: pointer; }
.container.show-right .split.right { width: 95%; background: #0099ff; opacity: 1; z-index: 5; } .container.show-right .split.left { width: 5%; cursor: pointer; }
.content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; opacity: 0; transform: translateY(20px); transition: 0.4s; }
body.separated .content { opacity: 1; transform: translateY(0); transition-delay: 1.5s; }
.logo-img { height: 130px; margin-bottom: 20px; } .big-title { font-size: 2rem; font-weight: 900; font-style: italic; color: #fff; line-height: 1.1; }
.btn { padding: 12px 35px; border: 2px solid #fff; border-radius: 50px; color: #fff; text-decoration: none; font-weight: 700; margin-top: 20px; }
.collapsed-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); display: flex; align-items: center; gap: 15px; opacity: 0; pointer-events: none; }
.container.show-left .split.right .collapsed-label, .container.show-right .split.left .collapsed-label { opacity: 1; pointer-events: all; transition-delay: 0.2s; }
.col-logo { height: 50px; opacity: 1; }
.back-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.3); padding: 10px 30px; border-radius: 30px; border: none; cursor: pointer; opacity: 0; pointer-events: none; z-index: 100; }
.container.show-left .back-btn, .container.show-right .back-btn { opacity: 1; pointer-events: all; }
.arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 1.5rem; background: rgba(255,255,255,0.1); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 20; }
.container.show-left .arrow-btn, .container.show-right .arrow-btn { display: none; }
.left .right-arrow { right: 30px; } .right .left-arrow { left: 30px; }

.container.show-left .split.right .content, .container.show-right .split.left .content {
    opacity: 0 !important; transition: opacity 0.1s ease !important; pointer-events: none;
}

/* MOBİL UYUM */
@media(max-width: 900px) {
    /* 1. HEADER KAPSAYICI (Tüm sayfalar için STANDART) */
    .site-header { 
        height: 70px !important;      /* Yüksekliği artırdık (Logonun sığması için) */
        padding: 0 15px !important;   
        flex-wrap: nowrap !important; /* Tek satır kuralı */
        justify-content: space-between !important;
        align-items: center !important;
        
        /* Arka Plan ve Efektler */
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        
        /* Index sayfasındaki özel durumları sıfırla */
        pointer-events: all !important; 
        position: fixed !important; 
        top: 0 !important; left: 0 !important;
        z-index: 9999 !important;
    }

    /* 2. SOL: LOGO (BÜYÜTÜLDÜ) */
    .header-left { 
        flex: 0 0 auto; 
        order: 1; 
        margin-right: 5px; 
    }
    
    /* HEM Index HEM Diğer sayfalar için geçerli logo boyutu */
    .main-logo-img { 
        height: 45px !important; /* 24px yerine 45px yaptık (Daha büyük ve okunaklı) */
        width: auto;
    }

    /* Index sayfası için ÖZEL SIFIRLAMA (Animasyonu iptal et) */
    /* Bu kod bloğu, Index'in diğer sayfalarla aynı durmasını sağlar */
    body#index-page:not(.separated) .main-logo-img {
        height: 45px !important; /* Başlangıçta da aynı boyutta olsun */
        transform: none !important; 
        box-shadow: none !important;
    }
    body#index-page:not(.separated) .header-logo-container {
        position: relative !important; 
        top: auto !important; 
        left: auto !important;
    }

    /* 3. ORTA: MENÜ */
    .header-center { 
        flex: 1; 
        order: 2; 
        width: auto !important; margin: 0 !important; padding: 0 !important;
        display: flex !important; 
        justify-content: center !important; 
        opacity: 1 !important; transform: none !important;
    }
    .top-menu ul { 
        gap: 8px !important; 
        justify-content: center;
        width: 100%;
        margin: 0 !important; padding: 0 !important;
    }
    .top-menu a {
        font-size: 0.55rem !important; /* Logo büyüdüğü için yazıdan hafif kıstık */
        font-weight: 800 !important;   
        letter-spacing: 0 !important;  
        white-space: nowrap !important;
        padding: 5px 0 !important;
    }

    /* 4. SAĞ: İKONLAR */
    .header-right { 
        display: flex !important; 
        flex: 0 0 auto; 
        order: 3;
        margin-left: 5px;
        opacity: 1 !important; transform: none !important;
    }
    .social-icons { 
        gap: 8px !important; 
    }
    .social-icons a { 
        font-size: 0.9rem !important; 
    }

    /* --- İÇERİK DÜZELTMELERİ (SAYFA İÇİ) --- */
    
    /* İletişim: Header büyüdüğü için payı artırdık */
    .contact-container {
        padding-top: 140px !important; 
        padding-bottom: 50px !important;
    }
    
    /* Kurumsal */
    .corporate-container {
        padding-top: 120px !important;
    }

    /* Split Ekran (Index) */
    .split { width: 100% !important; height: 50% !important; left: 0 !important; transition: none !important; }
    .split.left { top: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .split.right { top: 50% !important; right: auto !important; border-left: none !important; }
    .content { opacity: 1 !important; transform: translateY(0) !important; padding: 10px !important; }
    .arrow-btn, .collapsed-label, .back-btn { display: none !important; }
    .logo-img { height: 70px !important; margin-bottom: 10px !important; } /* Sayfa içi logoları */
    .big-title { font-size: 1.5rem !important; margin-bottom: 5px !important; }
    .description { display: none !important; }
    .btn { padding: 10px 20px !important; font-size: 0.8rem !important; margin-top: 10px !important; }
}
.bounce-arrow {
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.8;
    animation: bounce-horizontal 1.5s infinite;
}

@keyframes bounce-horizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
/* --- RENLED (SOL) ARKAPLAN GÖRSEL EFEKTİ --- */

/* 1. Mevcut sabit turuncu rengi iptal ediyoruz */
.container.show-left .split.left {
    background: transparent !important; /* Arkaplan şeffaf olsun ki görsel görünsün */
}

/* 2. Arkaplan Görseli Katmanı (En Arkada) */
.split.left::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* BURAYI DÜZENLE: arkaplan görselinin tam adını yaz */
    background-image: url('logo/bambu-penta.jpg'); 
    
    background-size: cover;    /* Görsel tüm alanı kaplasın */
    background-position: center; /* Ortala */
    
    /* Flu (Blur) Efekti */
    filter: blur(3px); /*arkaplanın bulanıklık seviyesi*/
    /* Blur yapınca kenarlar beyazlamasın diye görseli biraz büyütüyoruz */
    transform: scale(1.1); 
    
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 1s ease; /* Yavaşça gelsin */
    z-index: -2; /* En arkada dursun */
}

/* 3. Turuncu Renk Filtresi (Görselin Üstünde) */
.split.left::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Turuncu renk ve şeffaflık ayarı (0.56 yaptık, artırıp azaltılabilir) */
    background: rgba(255, 153, 0, 0.56); 
    
    opacity: 0; /* Başlangıçta gizli */
    transition: opacity 1s ease;
    z-index: -1; /* Görselin önünde, yazıların arkasında */
}

/* Tıklanınca (Aktif Olunca) Görsel ve Renk Ortaya Çıksın */
.container.show-left .split.left::before,
.container.show-left .split.left::after {
    opacity: 1;
}

/* --- SAĞ TARAF (ENIDES - MAVİ) İÇİN GÖRSEL EFEKTİ --- */

/* 1. Mevcut mavi arka planı İPTAL ET */
body#index-page .container.show-right .split.right {
    background: transparent !important; 
}

/* 2. Yazıları görselin üstünde kalsın diye ön plana al */
.split.right .content {
    position: relative;
    z-index: 2;
}

/* 3. Arka Plan Görseli (Flu Efektli) */
.split.right::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* BURAYA MAVİ TARAF İÇİN İSTEDİĞİN GÖRSELİN ADINI YAZ */
    background-image: url('logo/bambu-penta.jpg'); 
    
    background-size: cover;
    background-position: center;
    
    filter: blur(3px); /*arkaplanın bulanıklık seviyesi*/
    transform: scale(1.1);
    
    opacity: 0; 
    transition: opacity 1s ease;
    z-index: 0; 
}

/* 4. Mavi Renk Filtresi */
.split.right::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Mavi yarı saydam renk ve şeffaflık ayarı (0.56 yaptık, artırıp azaltılabilir)*/
    background: rgba(0, 153, 255, 0.56); 
    
    opacity: 0; 
    transition: opacity 1s ease;
    z-index: 1; 
}

/* Animasyon Tetiklenince Görünür Yap */
.container.show-right .split.right::before,
.container.show-right .split.right::after {
    opacity: 1 !important;
}