/* --- TEMEL AYARLAR VE RENK PALETİ --- */
:root {
    /* Varsayılan Koyu Tema Renkleri */
    --bg-color: #121212;
    --text-color: #f5f5f5;
    --header-bg: #1a1a1a;
    --border-color: #333333;
    --hover-bg: #2a2a2a;
}

/* =========================================
   GENEL SIFIRLAMA VE KAYDIRMA ÇUBUĞU (SCROLLBAR)
   ========================================= */

/* 1. Çubuğun tam sağa yapışması için varsayılan boşlukları sıfırlıyoruz */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 2. Chrome, Edge, Safari ve Opera için Özel Kaydırma Çubuğu */
::-webkit-scrollbar {
    width: 12px; /* Çubuğun kalınlığı */
}

/* Çubuğun arka planı (Koyu tema arkaplanına uyumlu) */
::-webkit-scrollbar-track {
    background: var(--bg-color); /* CSS değişkenindeki arkaplan rengini alır */
}

/* Kaydırdığımız hareketli tutamaç kısmı */
::-webkit-scrollbar-thumb {
    background: #444444; /* Temaya uygun koyu gri */
    border-radius: 10px; /* Uçlarını yumuşatır */
    border: 3px solid var(--bg-color); /* Tutamaca dış çerçeve vererek ince ve şık görünmesini sağlar */
}

/* Tutamaca fare ile üzerine gelindiğinde */
::-webkit-scrollbar-thumb:hover {
    background: #666666; /* Üzerine gelince biraz aydınlanır */
}

/* 3. Firefox İçin Kaydırma Çubuğu Desteği */
* {
    scrollbar-width: thin;
    scrollbar-color: #444444 var(--bg-color);
}

/* Açık Tema Renkleri (JS ile aktif edilecek) */
.light-theme {
    --bg-color: #ffffff;
    --text-color: #121212;
    --header-bg: #f8f9fa;
    --border-color: #e0e0e0;
    --hover-bg: #e9ecef;
}

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

body {
    /* Güçlü Sans-Serif Fontumuz */
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Ana sayfanın aşağı kaymasını engelleyip tam ekran yapmak için: */
    overflow: hidden; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- ÜST MENÜ (HEADER) TASARIMI --- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 80px;
    background-color: var(--header-bg);
    border-bottom: 0px solid var(--border-color);
    position: relative; /* Bu satır eklendi */
}

/* AÇIK TEMA (Gündüz) */
:root {
    /* ... diğer renklerin ... */
    
    /* Açık temada çizgi var ama GÖRÜNMEZ (şeffaf) olacak, böylece logoları kaydırmayacak */
    --header-border-color: transparent; 
}

/* KOYU TEMA (Gece) */
[data-theme="dark"] {
    /* ... diğer renklerin ... */
    
    /* Koyu temada o ince gri çizgi görünür olacak */
    --header-border-color: transparent; /* veya temanın gri tonu neyse o: var(--border-color) */
}

/* Görsellerin geçişlerde boyut değiştirip kaymasını engeller */
.header-left img, 
.header-center img {
    height: 40px; /* Senin tasarımında kaç kullanıyorsan o değeri gir (örn: 40px veya 50px) */
    width: auto; 
    object-fit: contain; /* Resmi kutunun içine sığdırır, en-boy oranını bozmaz */
    vertical-align: middle; /* Inline elemanların altındaki 2-3 piksellik hayalet boşluğu siler */
}

/* Ortalanmış Logo Ayarı */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Atatürk İmzası Görsel Yönetimi */
.header-left .ataturk-signature {
    height: 40px;
}

/* Sol Menü Hizalama (Bayrak ve İmza Yan Yana) */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Bayrak ile imza arasındaki boşluk */
}

/* Türk Bayrağı Boyutu */
.turkish-flag {
    height: 35px; /* İmza yüksekliğine (40px) uyumlu bir boyut */
    border-radius: 4px; /* İsteğe bağlı: Köşeleri çok hafif yumuşatır */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Bayrağa çok hafif bir derinlik katar */
}

/* Varsayılan (Koyu Tema) durumundayken, açık tema görselini gizle */
.theme-light-img {
    display: none;
}

/* Açık temaya geçildiğinde: */
.light-theme .theme-dark-img {
    display: none; /* Koyu tema görselini gizle */
}

.light-theme .theme-light-img {
    display: block; /* Açık tema görselini göster */
}

/* Görsel Logo Ayarı */
.header-center .site-logo {
    height: 60px; /* Logonun büyüklüğünü buradan kendi tasarımına göre değiştirebilirsin */
    transition: transform 0.3s ease;
}

.header-center .logo-link:hover .site-logo {
    transform: scale(1.2); /* Üzerine gelince logo hafifçe büyür */
}

/* Sağ Menü ve Butonlar */
.header-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

.top-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.top-nav a:hover {
    color: #888;
}

.site-controls {
    display: flex;
    gap: 15px;
}

/* Masaüstünde 3 nokta butonu gizli kalır */
#mobile-menu-btn {
    display: none;
    font-size: 1.2rem;
    padding: 4px 12px;
}

.icon-btn, .lang-btn {
    background: transparent;
    border: 2px solid var(--text-color);
    color: var(--text-color);
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.icon-btn:hover, .lang-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* --- ANA SAYFA 3'LÜ BÖLÜNME (SPLIT LAYOUT) --- */
.split-layout {
    display: flex;
    /* Ekran yüksekliğinden 80px'lik header'ı çıkarıyoruz */
    height: calc(100vh - 80px); 
    width: 100%;
}

.split-section {
    flex: 1; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #ffffff; 
    overflow: hidden;
    /* Çizgileri ve tıklama çerçevelerini tamamen kaldırıyoruz: */
    border: none; 
    outline: none;
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sütunun üzerine gelince biraz genişleme efekti */
.split-section:hover {
    flex: 1.15;
}

/* --- ARKAPLAN GÖRSELLERİ --- */
/* Not: Görselleri henüz eklemediğimiz için arkaplan rengi verdik, 
   görseller klasöre eklenince url() kısımlarını açabilirsin */
.coding-bg {
    background: url('../images/ui/coding-bg.jpg') center/cover no-repeat;
}

.engineering-bg {
    background: url('../images/ui/engineering-bg.jpg') center/cover no-repeat;
}

.design-bg {
    background: url('../images/ui/design-bg.jpg') center/cover no-repeat;
}

/* Görsellerin üzerine okunabilirliği artıran siyah bir tül (overlay) atıyoruz */
.content-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.65); 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

/* Mouse ile üzerine gelince siyah tül hafifçe açılsın */
.split-section:hover .content-overlay {
    background: rgba(0, 0, 0, 0.2); 
}

/* Başlık Tasarımları (Coding, Engineering vs.) */
.content-overlay h2 {
    font-size: 3.5rem;
    font-weight: 900;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.9);
    transition: transform 0.3s ease;
    text-align: center; /* Alt alta geçen kelimelerin ortalanmasını sağlar */
}

.split-section:hover .content-overlay h2 {
    transform: scale(1.08); /* Başlık hafifçe büyüsün */
}

/* --- ALT SAYFALAR (INNER PAGES) TASARIMI --- */
.inner-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    /* Kaydırma çubuğunun düzgün çalışması için */
    
    height: calc(100vh - 80px);
}

/* Kayan sayfalarda body'deki overflow: hidden özelliğini ezmek için */
body:not(:has(.split-layout)) {
    overflow: auto;
}

.page-title {
    font-size: 3.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 2px;
}

.content-section {
    margin-bottom: 70px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--border-color);
    padding-bottom: 10px;
    display: inline-block;
}

/* --- KART TASARIMLARI (GRID SİSTEMİ) --- */
.card-grid {
    display: grid;
    /* Ekran küçüldüğünde kartların otomatik alt alta geçmesini sağlar */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.card {
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #a0a0a0; /* Koyu temada okunabilir alt metin rengi */
}

.light-theme .card p {
    color: #555555; /* Açık temada okunabilir alt metin rengi */
}

/* Fareyle kartın üzerine gelindiğinde oluşan havaya kalkma efekti */
.card:hover {
    transform: translateY(-8px);
    border-color: #555; /* Çerçeve hafif belirginleşir */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.light-theme .card:hover {
    border-color: #bbb;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Engineering Hub Sayfası Eklemeleri */
.text-center {
    text-align: center;
}

.intro-text {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    color: #cccccc;
}

.light-theme .intro-text {
    color: #444444;
}

.hub-card {
    display: block; /* Kartı tamamen tıklanabilir yapar */
    text-decoration: none;
    color: inherit;
}

/* --- GALERİ TASARIMI (DESIGN & PHOTOGRAPHY) --- */
.gallery-grid {
    display: grid;
    /* Kartlardan farklı olarak daha sık bir grid, kare ögeler */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    /* Kare formatı sağlamak için en-boy oranı (opsiyonel, kapatılabilir) */
    aspect-ratio: 1 / 1; 
    cursor: pointer;
    background-color: var(--header-bg); /* Görsel yüklenmezse geçici renk */
}

/* Galeri içindeki görsellerin davranışı */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Görseli kareye sığdırmak için kırpar */
    transition: transform 0.5s ease; /* Yavaş ve şık büyüme efekti */
}

/* Üzerine gelince görselin büyümesi */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Görselin altındaki bilgi paneli (Siyah Tül Efecti) */
.gallery-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff; /* Yazı rengi hep beyaz kalmalı */
    transform: translateY(100%); /* Başlangıçta aşağıda gizli */
    transition: transform 0.3s ease;
}

/* Üzerine gelince bilgi panelinin yukarı çıkması */
.gallery-item:hover .gallery-item-info {
    transform: translateY(0);
}

.gallery-item-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.gallery-item-info p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- HAKKIMDA (ABOUT) SAYFASI TASARIMI --- */
.about-container {
    display: flex;
    align-items: center;
    gap: 50px;
    background-color: var(--hover-bg);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.about-image {
    flex: 0 0 35%; /* Fotoğraf kısmı genişliğin %35'ini alır */
}

.about-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    display: block;
}

.about-text {
    flex: 1; /* Metin kısmı kalan alanı doldurur */
}

.about-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    margin-bottom: 20px;
}

.light-theme .about-text p {
    color: #444444;
}

/* Mobil ekranlar için (Genişlik 768px'in altına düştüğünde alt alta geçsin) */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
    }
    .about-image {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* --- İLETİŞİM (CONTACT) SAYFASI TASARIMI --- */
/* --- İLETİŞİM BİLGİLERİ (FORMSUZ YAPI) --- */
.contact-info-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-info-container h2 {
    margin-bottom: 10px;
    font-size: 2rem;
}

.contact-info-container p {
    margin-bottom: 30px;
    color: var(--text-color);
    opacity: 0.8;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-3px);
    background-color: rgba(128, 128, 128, 0.05); /* Üzerine gelince çok hafif belirginleşir */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.contact-item .icon {
    font-size: 2rem;
}

.contact-item .details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.contact-item .details strong {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.contact-item .details span {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Mobil Uyumluluk */
@media (max-width: 850px) {
    .contact-container {
        flex-direction: column;
    }
    .contact-info-wrapper {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-top: 30px;
    }

    .header-left .ataturk-signature {
        height: 25px; 
    }
    
    /* Atatürk İmzasını Küçült */
    .header-left .ataturk-signature {
        height: 25px; 
    }

    /* Türk Bayrağını Mobilde Küçült */
    .turkish-flag {
        height: 22px; 
    }

    /* Ortadaki Ana Logoyu Küçült */
    .header-center .site-logo {
        height: 30px; 
    }

    /* Sağ taraftaki butonların (Tema, Dil, 3 Nokta) aralarındaki boşluğu daralt */
    .site-controls {
        gap: 8px;
    }

    /* Butonların içindeki yazıları ve çerçeve boşluklarını (padding) küçült */
    .icon-btn, .lang-btn {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* 3 Nokta menü butonunu biraz daha belirgin tutuyoruz */
    #mobile-menu-btn {
        padding: 4px 10px;
        font-size: 16px; 
    }
}

/* =========================================
   MOBİL UYUMLULUK (3 NOKTA AÇILIR MENÜ)
   ========================================= */
@media (max-width: 1450px) {
    
    /* Üst menüyü (Header) masaüstündeki gibi yan yana tutuyoruz */
    .site-header {
        padding: 0 15px; /* Kenar boşluklarını mobilde biraz kıstık */
    }

    /* 3 Nokta Butonunu mobilde görünür yapıyoruz */
    #mobile-menu-btn {
        display: block;
    }

    /* Linkleri içeren nav menüsünü gizleyip açılır pencereye çeviriyoruz */
    .top-nav {
        display: none; /* JS tıklayana kadar gizli */
        position: absolute;
        top: 80px; /* Header'ın hemen altından başlar */
        right: 15px;
        background-color: var(--header-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        flex-direction: column;
        padding: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        z-index: 1000;
        width: 150px;
    }

    /* JS butona tıkladığında bu sınıf eklenir ve menü görünür */
    .top-nav.active {
        display: flex;
    }

    .top-nav a {
        margin: 10px 0;
        text-align: right; /* Yazıları sağa yasla */
        font-size: 15px;
    }

    /* Logonun mobilde de tam ortada kalması için */
    .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* ANA SAYFA ÜÇLÜ YAPISI (SPLIT LAYOUT) ALT ALTA GEÇER */
    .split-layout {
        flex-direction: column;
        /* Ekran yüksekliğinden (100vh) 80px'lik üst menüyü çıkarıyoruz */
        height: calc(100vh - 80px); 
    }

    .split-section {
        width: 100%;
        min-height: unset; 
        flex: 1; 
        /* Alt çizgiyi kaldırdık */
        border: none; 
        outline: none;
    }

    /* METİN BOYUTLARI MOBİLE UYGUN KÜÇÜLÜR */
    .content-overlay h2 {
        font-size: 2.2rem;
    }

    .page-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }
    
    .inner-page {
        padding: 30px 15px;
        height: auto;
    }
}

/* --- TIKLANABİLİR PROJE KARTLARI --- */
.card-link {
    text-decoration: none; /* Yazıların altının çizilmesini engeller */
    color: inherit; /* Yazı renklerinin temanın renginde kalmasını sağlar */
    display: block; /* Tıklanma alanını tüm karta yayar */
}

/* --- CV BUTONLARI TASARIMI --- */
.about-actions {
    margin-top: 30px;
}

.about-actions h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: var(--text-color);
}

.cv-buttons-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Ekrana sığmazsa alt satıra geçer */
}

.cv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--text-color);
    color: var(--bg-color);
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.95rem;
}

.cv-btn:hover {
    transform: translateY(-3px);
    opacity: 0.9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.cv-btn .icon {
    font-size: 1.2rem;
}

/* Mobil Ekranda CV Butonlarının Alt Alta Dizilmesi */
@media (max-width: 768px) {
    .cv-buttons-container {
        flex-direction: column; /* Butonları alt alta dizer */
    }
    
    .cv-btn {
        width: 100%; /* Butonların tüm ekran genişliğini kaplamasını sağlar */
        justify-content: center; /* İçindeki yazıyı ortalar */
    }
    
    .about-actions {
        text-align: center;
    }
}

/* --- İÇ SAYFALAR İÇİN ATATÜRK SİLÜETİ ARKA PLANI --- */
.inner-page::before {
    content: "";
    position: fixed; /* Sayfa kaydırılsa bile silüet ekranda sabit kalır */
    top: 50%;
    left: 0; /* Tam sol kenara yapışık */
    transform: translateY(-50%); /* Dikeyde tam ortalama */
    width: 100px; /* Silüetin genişliğini kendi resmine göre buradan büyütebilirsin */
    height: 80vh; 
    background-image: url('../images/ui/siluet.png'); /* PNG dosyanın adı farklıysa burayı güncelle */
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain; /* Görüntüyü bozmadan alana sığdırır */
    z-index: -1; /* Yazıların ve kartların arkasında kalmasını sağlar */
    pointer-events: none; /* Yanlışlıkla sağ tıklama veya metin seçme gibi olayları engeller */
    opacity: 0.15; /* Gri resmin yazıları okumayı zorlaştırmaması için saydamlık. Gerekirse silebilir veya değiştirebilirsin (0.1 ile 1 arası) */
}

/* Mobil Ekranda Silüet Ayarı (Yazıları engellememesi için) */
@media (max-width: 850px) {
    .inner-page::before {
        width: 200px; /* Mobilde daha küçük görünür */
        opacity: 0.08; /* Ekrana sığmadığı için mobilde daha da silik olması okunabilirliği artırır */
    }
}