.menu-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #333;
    display: none; 
    z-index: 1001; 
    font-size: 2rem;
}


.menu-icon .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #9be2f8;
    transition: all 0.3s ease-in-out;
    border-radius: 1px;
}
* {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}
.menu-open {
    overflow: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #010711; 
    color: #f4f4f4; 
    line-height: 1.6;
}


main section {
    background-color: #010711; 
}


#preloader {
    z-index: 9999999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #010711; 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}

.spinner { 
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #00c3d1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


header {
    background: #010711;
    padding: 1rem 2rem;
    border-bottom: 1px solid #010711;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .logo a {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.1rem; 
    text-decoration: none;
    color: #9be2f8;
}

header nav ul {
    list-style: none;
    display: flex;
}
header nav ul li { margin-left: 20px; }
header nav ul li a {
    text-decoration: none;
    color: #9be2f8;
    font-weight: 600;
    transition: color 0.3s ease;
}
header nav ul li a:hover,
header nav ul li a.active {
    color: #0087b1;
}


section {
    padding: 60px 20px;
    text-align: center;
}


section h2 {
    font-family: 'VT323', monospace;
    font-size: 3rem;
    margin-bottom: 25px;
    color: #ffffff; 
}


#hero {
    background-color: #010814; 
    color: #fff;
    height: 60vh;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #00c3d1;
    border-top: 1px solid #00c3d1;

}


#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}


.hero-content {
    position: relative;
    z-index: 2; 
    color: #fff;
    height: 100%;
    width: 100%;
    
  
    pointer-events: none; 

    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-content h1, 
.hero-content p, 
.hero-content a {
    pointer-events: auto; 
}

#hero h1 {
    font-family: 'press start 2p', cursive;
    font-size: 2.0rem;
    min-height: 80px; 
    text-align: center; 
    text-shadow: 
        4px 4px 0px rgba(0, 0, 0, 0.5),
        8px 8px 0px rgba(0, 0, 0, 0.3); 
    display: inline-block;
    

    flex-shrink: 0; 
    margin: 0;
}

#hero p {
    font-family: 'Pixelify Sans', monospace;
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: 25px; 
    flex-shrink: 0; 
}

#hero .btn {
    flex-shrink: 0;
}


#particles-js canvas {
    width: 100% !important;
    height: 100% !important;
}

#projects-short .project-gallery,
#gallery-short .project-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}


.project-item {
    max-width: 300px;
    width: 100%;
    
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; 
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden !important;
    position: relative !important;
    

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Kartlar arası boşluk */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}


.project-card {
    background-color: #0e1f34; 
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
    transition: transform 0.3s ease; 
    border: 1px solid #333; 
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px); 
    border-color: #00c3d1; 
    transform: scale(1.1) !important;
}

.project-card img {
    width: 100% !important; 
    height: 220px !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    display: block !important;
    margin: 0 auto !important; 
    transition: transform 0.6s ease !important;
}


.project-info {
    padding: 20px;
    text-align: center; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.project-info h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.project-info p {
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.5; 
    margin-bottom: 20px;
}

/* BUTON TASARIMI */
.btn-small {
    margin-top: auto; 
    display: inline-block;
    background-color: #007bff; 
    color: white;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-small:hover {
    background-color: #0056b3; 
}


#page-header {
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    margin-bottom: 25px;
    color: #ffffff;
    letter-spacing: 0.1px;
}
#page-header p {
    font-family: 'poppins', sans-serif;
    font-size: 1rem;
}


/* MOBİL İÇİN */
@media screen and (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr; 
    }
}


.project-item:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

#about-short .about-container {
    display: flex;
    gap: 50px; 
    align-items: center;
    max-width: 1000px;
    margin: 40px auto;
    text-align: left;
}

#about-short .about-image { flex-basis: 40%; }

#about-short .about-image img {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #f9f9f9;
    border-bottom-color: #b3b3b3;
    border-right-color: #b3b3b3;
    box-shadow: 0 4px 0 #b3b3b3;
}

#about-short .about-text { flex-basis: 60%; }

#about-short .about-text p {
    margin-bottom: 15px;
    font-size: 1rem;
}

#gallery-short .project-gallery {
    justify-content: center; 
    gap: 20px;
    max-width: 900px;
    margin: 40px auto 0 auto;
}



.btn, .btn-secondary, .btn-small {
    display: inline-block;
    font-family: 'VT323', monospace; 
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.1s ease-out;
    cursor: pointer;
    border-radius: 4px;
    padding: 10px 18px; 
    position: relative;
    top: 0;
    left: 0;
}
.btn:hover, .btn-secondary:hover, .btn-small:hover {
    top: 2px;
    left: 2px;
}
.btn {
    font-size: 1.5rem;
    padding: 10px 20px;
    background: #1a90a0; /* Daha koyu, profesyonel mavi */
    color: #fff;
    border: 1px solid #0b5863;
    border-bottom-color: #0cddf8; /* Gölgeler yine de parlamalı */
    border-right-color: #0cddf8;
    box-shadow: 0 4px 0 #0cddf8;
}
.btn:hover {
    box-shadow: 0 2px 0 #0cddf8;
    background: #037685; /* Hover'da koyulaştı */
    left: 0px;
}
.btn-secondary {
    font-size: 1.5rem;
    padding: 10px 20px;
    background: #e0e0e0;
    color: #333;
    border: 1px solid #f9f9f9;
    border-bottom-color: #b3b3b3;
    border-right-color: #b3b3b3;
    box-shadow: 0 4px 0 #b3b3b3;
}
.btn-secondary:hover {
    box-shadow: 0 2px 0 #b3b3b3;
    background: #d6d6d6;
}
.btn-small {
    font-size: 1.1rem;
    padding: 5px 12px;
    background: #e0e0e0;
    color: #333;
    border: 1px solid #f9f9f9;
    border-bottom-color: #b3b3b3;
    border-right-color: #b3b3b3;
    box-shadow: 0 3px 0 #b3b3b3;
}
.btn-small:hover {
    box-shadow: 0 1px 0 #b3b3b3;
    background: #d6d6d6;
    top: 1px;
    left: 1px;
}

footer {
    text-align: center;
    padding: 20px;
    background: #000004 !important;
    color: #fff;
    margin-top: 0 !important;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}


#about-details .about-container { 
    display: flex; 
    gap: 40px; 
    align-items: flex-start; 
    max-width: 1100px; 
    margin: 40px auto; 
    text-align: left; 
}

#about-details .about-image { 
    flex-basis: 40%; 
    flex-shrink: 0; 
    margin: auto;
}
#about-details .about-image img { 
    width: 100%; 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    margin: auto;
}

#about-details .about-text { 
    flex-basis: 60%; 
    flex-grow: 1; 
    margin: auto;
}

.skills-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skills-list span { background: #3498db; color: #ffffff; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; }

.likes-list { display: flex; flex-wrap: wrap; gap: 10px; }
.likes-list span { background: #3498db; color: #ffffff; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; }


#services {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    min-height: 50vh; 
}

.service-grid {
    display: grid;
    /* 4 Sütunlu ızgara yapısı */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    max-width: 1000px; 
    width: 100%;
}
.service-card {
    background: #EDEDED !important;     
    color: #f4f4f4;
    border: 5px solid #01142f;
    border-radius: 8px;
    padding: 30px; 
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.25);
}
.service-card h3 { 
    font-size: rem; 
    margin-bottom: 10px; 
    color: #010435;     
    font-family: 'VT323', monospace;
}
.service-card p { font-size: 1rem; color: #013c7b; }

.form-wrapper {
    display: flex;           
    justify-content: center; 
    align-items: flex-start; 
    gap: 50px;               
    max-width: 1200px;       
    margin: 0 auto;          
    padding: 50px 20px;
    flex-direction: column;
    text-align: left;
    width: 100%;
}
.form-wrapper label {
    display: block;     
    text-align: left; 
    margin-left: 0;     
    width: 100%;      
}

.contact-info, 
.form-wrapper {
    flex: 1;                
    width: 100%;
}

.contact-container {
    display: flex;          
    justify-content: center; 
    align-items: flex-start;
    gap: 50px;               
    max-width: 1200px;      
    margin: 0 auto;         
    padding: 50px 20px;
    align-items: flex-start;
}


.contact-info, 
.form-wrapper {
    flex: 1;                 
    width: 100%;          
}


.contact-info {
    text-align: left;
    color: #fff;
}

.info-list li {
    list-style: none;
    margin-bottom: 15px;
}


input, textarea {
    background-color: transparent; 
    border: 2px solid #008080;     
    color: white;                  
    padding: 10px;                 
    border-radius: 5px;          
    font-family: inherit;         
    margin-bottom: 15px;         
    width: 100%;                   
}

input:focus, textarea:focus {
    outline: none;                
    box-shadow: 0 0 10px #008080;  
}
.info-item {
    margin-bottom: 20px; 
    font-size: 1.1rem;   
    display: flex;      
    align-items: center;
}
#project-info {
    text-align: left;
    max-width: 800px;
    margin: 0 auto 40px auto;
}



@media (max-width: 768px) {

#projects-short .project-gallery,
#gallery-short .project-gallery {
    flex-direction: column;
    align-items: center;
}



.hero-content {
    position: relative; 
    display: flex;
    flex-direction: column;
    
    
    padding-top: 5vh; 
    
    align-items: flex-start !important; 
    padding-left: 20px !important; 
    padding-right: 20px !important;

}

#hero h1 {
    font-size: 1.2rem !important; 
    line-height: 1.3 !important;
    
   
    min-height: 90px;
    
    text-align: left !important;
    width: 90%; 
    max-width: 90%;
    
    height: auto !important; 
}

#hero p {
    text-align: left !important;
    max-width: 90% !important;
    margin-bottom: 20px !important;
}

#hero .btn {
    align-self: flex-start;
}
#hero p {
    text-align: left !important;
}

header {
    /* İkonun sağ üste sabitlenmesi için pozisyon verilir */
    position: relative; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 2rem;
    /* YENİ: Çizgi rengini temaya uygun şekilde değiştiriyoruz */
    border-bottom: 1px solid #fff;
    overflow: visible;
}

/* İKON MOBİLDE SAĞ ÜSTE SABİTLENİR */
.menu-icon {
    display: block; 
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* MENÜYÜ GİZLE VE YANA KAYAR YAP */
#nav-menu {
    transform: translateX(100%);
    position: fixed;
    top: 0;
    right: 0;
    width: 250px; 
    height: 100vh;
    background-color: #000918; 
    padding-top: 80px;
    transition: transform 0.3s ease-out;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
}

/*MENÜ AÇILINCA */
#nav-menu.open {
    transform: translateX(0); 
}

/*MENÜ LİSTESİNİ DÜZENLE */
header nav ul {
    flex-direction: column;
    padding: 0;
    margin: 0;
}
header nav ul li {
    margin: 0;
    border-bottom: 1px solid #eee;
}
header nav ul li a {
    display: block;
    padding: 15px 20px;
}

/* MENÜ AÇILINCA ÇARPMA İŞARETİ ANİMASYONU */

#menu-toggle.active .bar:nth-child(2) {
    opacity: 0; 
}

#menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); 
}

#menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); 
}
    header { flex-direction: column; padding: 1rem; }
    header nav ul { flex-direction: column; align-items: center; margin-top: 15px; }
    header nav ul li { margin: 5px 0; }
    #hero h1 { font-size: 1.5rem; } 
    #hero p { font-size: 1.2rem; }
    
    /* Hakkımda Resim/Yazı Ayarı */
    #about-short .about-container { flex-direction: column; text-align: center; }

    .service-grid {
    grid-template-columns: 1fr;
}
    
}


/*ANİMASYON KEYFRAMES */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

html, body {
    height: 100%; 
    margin: 0;
}

main {
    min-height: calc(100vh - 120px); 
}

footer {
    padding: 20px;
    background: #333;
    color: #fff;
}
table {
    width: 80%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-left: auto;
    margin-right: 0;
    color: #ccc;
    background-color: #151925; 
    border-radius: 8px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .table {
        transform: scale(0.65);    
        transform-origin: top left;  
        width: 118%;               
        margin-left: -20px;        
    }
}


.table th, .table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 3px solid #000000;
}

.table th {
    background-color: #0f121a;
    color: #fff;
    font-weight: bold;
}


/* ANA KAP (Flexbox Açıyoruz) */
.about-container {
    display: flex; /* Yan yana dizme modunu aç */
    justify-content: space-between; /* İkisini sağa ve sola yasla */
    align-items: flex-start; /* Yukarıdan hizala */
    gap: 50px; /* Ortada boşluk bırak */
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* SOL PANEL (Resim, Yazı, Yetenekler) */
.sol-panel-wrapper {
    width: 50%; /* Ekranın yarısı */
    display: flex;
    flex-direction: column; /* İçindekiler alt alta olsun */
}

/* SAĞ PANEL (Tablo) */
.education-section {
    width: 45%; /* Ekranın diğer yarısı */
    margin-top: 0 !important; /* Yukarı boşluğunu sıfırla ki hizalı olsun */
    padding: 0 !important;
}

/* Tablo Genişliği */
.table {
    width: 100%;
}


/* === GALERİ SAYFASI (KART TASARIMI) === */

#gallery-page {
    padding: 60px 20px;
    width: 100%;
    min-height: 80vh; /* Sayfa boş görünmesin */
}

/* Başlık Kısmı */
.gallery-header {
    text-align: center;
    margin-bottom: 60px;
}

.gallery-header h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 3px 3px 0 #000;
}

.gallery-header p {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #00c3d1; /* Neon mavi vurgu */
    letter-spacing: 2px;
}

/* Izgara (Grid) Yapısı */
.gallery-grid {
    display: grid;
    /* 3 Sütunlu Yapı: Yan yana 3 tane sığdır */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; /* Kartlar arası boşluk */
    max-width: 1600px; /* Geniş ekran limiti */
    margin: 0 auto; /* Ortala */
}

/* KART TASARIMI */
.gallery-card {
    background-color: #0b0f19; /* Çok koyu lacivert zemin */
    border: 1px solid #1f293a;
    border-radius: 15px; /* Yumuşak köşeler */
    overflow: hidden; /* Resim taşmasın */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Derinlik */
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Hover Efekti: Kart yukarı kalksın ve parlasın */
.gallery-card:hover {
    transform: translateY(-10px);
    border-color: #00c3d1; /* Kenarlık mavi olsun */
    box-shadow: 0 15px 30px rgba(0, 195, 209, 0.2); /* Mavi neon gölge */
}

/* Resim Alanı */
.img-holder {
    width: 100%;
    height: 300px; /* Resimler sabit yükseklikte olsun */
    overflow: hidden;
}

.img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya doldur, sündürme */
    transition: transform 0.5s ease;
}

/* Hover'da Resim Yakınlaşsın */
.gallery-card:hover .img-holder img {
    transform: scale(1.1);
}

/* Kart İçeriği (Yazılar) */
.card-content {
    padding: 25px;
    text-align: left;
    flex-grow: 1; /* Alt kısmı hizalamak için */
}

.card-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.card-content p {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* === MOBİL UYUMLULUK (GALERİ İÇİN) === */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2'li olsun */
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Telefonda tek sıra (alt alta) */
    }
    
    .gallery-header h2 {
        font-size: 1.8rem;
    }
}

/* === HAKKIMDA SAYFASI 3 SÜTUNLU (BÜYÜK BOYUT VERSİYONU) === */

/* Ana Kapsayıcı */
#about-details .about-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Yukarıdan hizala */
    gap: 50px; /* Sütunlar arası boşluk arttı (30 -> 60) */
    max-width: 1900px; /* Genişlik limiti arttı (1400 -> 1600) */
    width: 95%; /* Ekranın %95'ini kaplasın */
    margin: 60px auto; /* Üstten boşluk arttı */
    padding: 0 40px; /* Kenarlardan boşluk */
}

/* --- 1. SOL SÜTUN (RESİM) --- */
.col-left {
    flex: 0 0 380px; /* Genişlik: 250px -> 380px'e çıktı */
    text-align: center;
}

.col-left img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Gölgeyi de güçlendirdik */
    border: 3px solid #222; 
}

/* --- 2. ORTA SÜTUN (YAZI) --- */
.col-center {
    flex: 1; /* Kalan alanı doldur */
    text-align: left;
    padding: 0 10px;
}

.col-center h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 2rem; /* Başlık büyüdü (1.4 -> 2rem) */
    line-height: 1.2;
    color: #fff;
    margin-bottom: 30px;
    margin-top: 0;
    padding-top: 0;
    letter-spacing: 0.2px;
}

.col-center p {
    color: #ccc;
    font-size: 1.15rem; /* Yazı büyüdü (0.95 -> 1.15rem) */
    line-height: 1.7;
    margin-bottom: 30px;
}

.col-center h3 {
    font-size: 1.4rem; /* Alt başlıklar büyüdü */
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 2px solid #333;
    padding-bottom: 8px;
    display: inline-block;
}

/* Beceri Kutucuklarını da Büyütelim */
.skills-list span, .likes-list span {
    padding: 10px 18px; /* İç boşluk arttı */
    font-size: 1rem; /* Yazı büyüdü */
}

/* --- 3. SAĞ SÜTUN (TABLO) --- */
.col-right {
    flex: 0 0 700px; /* Genişlik: 350px -> 500px'e çıktı */
}

.col-right h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 22.4px; /* Tablo başlığı büyüdü */
    color: #fff;
    margin-bottom: 30px;
    margin-top: 0;
    text-align: center;
    letter-spacing: 0.2px;
}

.col-right table {
    width: 100%;
    /* Yazı boyutunu büyüttük (1.05 -> 1.15rem) */
    font-size: 1.15rem; 
    border-collapse: separate; /* Kenarlıkların yapışmasını önler (radius için) */
    border-spacing: 0;
    border-radius: 20px; /* Köşeleri yuvarladık */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Daha güçlü gölge */
}
.col-right th {
    background-color: #1c75b0; /* Mavi başlık */
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}
.col-right td {
    background-color: #001930; /* Koyu gri zemin */
    color: #ddd;
    border-bottom: 1px solid #333;
}
.col-right tr:last-child td {
    border-bottom: none;
}

/* Tablo hücrelerini ferahlat */
.col-right th, .col-right td {
    padding: 8px 8px; /* Hücre boşlukları arttı */
}


/* === MOBİL/TABLET DÜZENLEMESİ === */
/* Elemanlar büyüdüğü için "kırılma noktası"nı erkene çekiyoruz */
@media (max-width: 1300px) { 
    #about-details .about-container {
        flex-direction: column; /* Alt alta geçiş */
        align-items: flex-start;
        gap: 50px;
    }

    .col-left, .col-center, .col-right {
        width: 100%; 
        max-width: 700px; /* Mobilde çok devasa olmasınlar */
        flex: none;
        text-align: center;
    }

    .col-center { text-align: center; }
    
    .skills-list, .likes-list { justify-content: center; }

    /* Mobilde tablo başlıklarını da ortala */
    .col-right h3 { text-align: center; }
}


/* === ANASAYFA HAKKIMDA BÖLÜMÜ (GENİŞLETME) === */

/* Kapsayıcıyı Genişlet */
#about-short .about-container {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    justify-content: space-between;
    
    /* GÜNCELLEME BURADA: Genişliği artırdık */
    max-width: 1600px; /* Eskiden 1000px civarıydı, şimdi yayılacak */
    width: 90%; /* Ekranın %90'ını kaplasın */
    
    gap: 80px; /* Resimle yazı arasındaki boşluğu artırdık */
    margin: 80px auto; /* Üstten alttan boşluk */
}

/* Resim Alanı Ayarı */
#about-short .about-image {
    flex: 0 0 450px; /* Resim alanını sabitledik ve büyüttük */
    /* Mobilde resmin çok devasa olmaması için max-width verebiliriz */
}

#about-short .about-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Yazı Alanı Ayarı */
#about-short .about-text {
    flex: 1; /* Kalan tüm boşluğu yazı kaplasın */
    text-align: left;
}

#about-short .about-text p {
    font-size: 1.15rem; /* Yazıyı biraz büyüttük, okunur olsun */
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 30px;
}

/* Buton Ayarı (Varsa) */
#about-short .btn {
    padding: 12px 30px;
    font-size: 1.1rem;
}

/* === MOBİL UYUMLULUK (ANASAYFA İÇİN) === */
@media (max-width: 1100px) {
    #about-short .about-container {
        flex-direction: column; /* Mobilde alt alta geçsin */
        text-align: center;
        width: 95%;
    }

    #about-short .about-image {
        flex: none;
        width: 100%;
        max-width: 500px; /* Telefonta çok büyümesin */
        margin-bottom: 30px;
    }

    #about-short .about-text {
        text-align: center; /* Yazıları ortala */
    }
}

/* === ANASAYFA ALT BÖLÜMLERİ (GENİŞLETME) === */
/* Projeler (#projects-short) ve Galeri (#gallery-short) */

#projects-short, 
#gallery-short {
    width: 100%; /* Arka plan tam ekran olsun */
    padding: 60px 0; /* Üstten alttan biraz daha boşluk */
}

/* İçerik Taşıyıcıları (Kartların durduğu kutu) */
#projects-short .project-gallery,
#gallery-short .project-gallery {
    display: flex;
    justify-content: space-between; /* Kartları sağa sola yasla, arayı aç */
    align-items: stretch; /* Kartların boyu eşit olsun */
    flex-wrap: wrap; /* Mobilde alt alta geçebilsinler */
    object-fit: contain !important;
    
    /* BURASI ÖNEMLİ: Üstteki kısımla aynı genişlik */
    max-width: 1600px; 
    width: 90%; 
    margin: 0 auto; /* Ortala */
    gap: 40px; /* Kartlar arası boşluk */
}

/* Kartların Kendisi (Project Item) */
.project-item {
    flex: 1; /* Boşluğu eşit paylaşsınlar */
    /* 3 tane yan yana sığması için min/max ayarı */
    min-width: 300px; 
    max-width: 32%; /* 3'lü dizilim için %32 ideal */
    
    /* Görsel Güzelleştirme */
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Kartların üzerine gelince hafif kalksın */
.project-item:hover {
    transform: translateY(-10px);
    border-color: #00c3d1;
}

/* Resimlerin tam oturması için */
.project-item img {
    width: 100%;
    height: 250px; /* Resim yüksekliği standart olsun */
    object-fit: contain; /* Resim bozulmadan kutuyu doldursun */
    display: block;
}
.project-item h3 {
    /* Yazı her zaman en üst katta dursun */
    position: relative !important;
    z-index: 10 !important; 
    
    /* Yazının arkasını boyayalım ki resim alttan sızmasın */
    background-color: #0b0f19 !important; 
    
    /* Kenar boşluklarını sıfırla */
    margin: 0;
    padding: 15px; 
}

/* Yazı Alanı */
.project-info {
    padding: 20px;
    text-align: center;
}

.project-info h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
}

.project-info p {
    color: #ccc;
    font-size: 0.95rem;
}

/* MOBİL AYARI */
@media (max-width: 1100px) {
    #projects-short .project-gallery,
    #gallery-short .project-gallery {
        justify-content: center; /* Mobilde ortala */
        object-fit: contain !important;
    }

    .project-item {
        max-width: 100%; /* Telefonta tam genişlik */
        margin-bottom: 30px;
    }
}

/* === MODAL TASARIMI (SOL RESİM - SAĞ DETAY) === */

.modal {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.9); /* Arka plan koyuluğu */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Kenarlardan boşluk */
}

/* Ana Kutu (Beyaz/Gri Çerçeve) */
.modal-box {
    display: flex; /* Yan yana dizme komutu */
    width: 100%;
    max-width: 1200px; /* Ekran genişse çok yayılmasın */
    background-color: #0b0f19; /* Senin tema rengin */
    border: 1px solid #1f293a;
    border-radius: 12px;
    overflow: hidden; /* Taşmaları gizle */
    box-shadow: 0 0 40px rgba(0, 195, 209, 0.2); /* Mavi neon gölge */
    max-height: 85vh; /* Ekran boyunu taşmasın */
}

/* --- SOL TARA (RESİM) --- */
.modal-left {
    flex: 1.5; /* Alanın %60'ını kaplasın */
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya tam doldurur */
    display: block;
}

/* --- SAĞ TARAF (YAZI) --- */
.modal-right {
    flex: 1; /* Alanın %40'ını kaplasın */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikey ortala */
    overflow-y: auto; /* Yazı çok uzunsa sadece burası kaydırılsın */
}

.modal-right h3 {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.divider {
    height: 2px;
    width: 50px;
    background: #00c3d1;
    margin-bottom: 20px;
}

.main-desc {
    font-family: 'Poppins', sans-serif;
    color: #ccc;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Ekstra Bilgi Kutusu (Konum vs.) */
.extra-info {
    background: #111;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #00c3d1;
    margin-bottom: 20px;
    color: #fff;
    font-size: 0.9rem;
}

/* Modal Kapat Butonu */
.btn-modal {
    padding: 10px 20px;
    background: #00c3d1;
    border: none;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
    border-radius: 4px;
}

.btn-modal:hover {
    background: #fff;
}

/* Çarpı (X) İkonu */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

/* === MOBİL UYUMLULUK (TELEFONLAR İÇİN) === */
@media (max-width: 900px) {
    .modal-box {
        flex-direction: column; /* Yan yana değil, alt alta olsun */
        max-height: 90vh; /* Mobilde biraz daha yer kaplasın */
        overflow-y: scroll; /* Tüm kutu kaydırılabilsin */
    }

    .modal-left {
        width: 100%;
        height: 250px; /* Resme sabit yükseklik ver */
        flex: none; /* Esnekliği kapat */
    }

    .modal-right {
        padding: 20px;
        flex: none;
    }
}

/* === PROJE KARTLARI STİLİ === */

#projects-page {
    padding: 60px 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Yan Yana */
    gap: 40px;
}

.project-card {
    background-color: #0b0f19;
    border: 1px solid #1f293a;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: #00c3d1;
    box-shadow: 0 10px 30px rgba(0, 195, 209, 0.15);
}

/* Resim Alanı */
.img-wrapper {
    width: 100%;
    height: 220px; /* Sabit Yükseklik */
    overflow: hidden;
    border-bottom: 1px solid #1f293a;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .img-wrapper img {
    transform: scale(1.1); /* Resim büyüsün */
}

/* Kart Bilgi Alanı */
.card-info {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-info h3 {
    font-family: 'poppins', sans-serif;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.card-info p {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1; /* Butonu aşağı itmek için */
}

/* İncele Butonu (Görsel Amaçlı) */
.btn-detail {
    background: transparent;
    border: 1px solid #00c3d1;
    color: #00c3d1;
    padding: 8px 15px;
    border-radius: 4px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
}

.project-card:hover .btn-detail {
    background: #00c3d1;
    color: #000;
}

/* MOBİL UYUMLULUK */
@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: 1fr; /* Mobilde alt alta */
    }
}

/* === DİL SEÇENEĞİ (SADE HALİ) === */
.language-switch {
    margin-left: 25px; /* Menüden biraz daha uzaklaşsın */
    display: flex;
    align-items: center;
    gap: 8px; /* TR ile EN arası boşluk */
}

.lang-btn {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* Yazı bi tık büyüsün */
    color: #666; /* Pasif olan gri olsun */
    font-weight: 500;
    transition: all 0.3s ease;
    
    /* KUTUYU KALDIRAN KISIM: Border yok! */
    border: none; 
    background: transparent;
}

.lang-btn:hover {
    color: #fff; /* Üzerine gelince beyazlaşsın */
}

/* Aktif olan dil (Sadece rengi parlasın, kutu olmasın) */
.lang-btn.active {
    color: #00c3d1; /* Neon Mavi */
    font-weight: 700; /* Biraz daha kalın olsun */
    text-shadow: 0 0 10px rgba(0, 195, 209, 0.4); /* Hafif neon ışıltısı */
}

/* Aradaki Çizgi (|) */
.language-switch span {
    color: #444; /* Çizgi çok belirgin olmasın */
    font-size: 1rem;
}


/* === SADECE HOVER VE RESİM DÜZELTMESİ (YERLEŞİMİ BOZMAZ) === */

/* 1. Kartın Kendisi: Resim dışarı taşmasın diye "makas" vuruyoruz */
.project-item {
    /* Kartın sınırlarından taşan (büyüyen) resmi gizle */
    overflow: hidden !important; 
    
    /* Z-index ayarları için gerekli */
    position: relative !important; 
    
    /* Eğer kartın sınırları çizili değilse ekleyelim */
    border-radius: 12px;
}

/* 2. Resim Ayarı: Eksik olan animasyon kodunu buraya ekliyoruz */
.project-item img {
    /* Bu kod EKSİKTİ: Değişiklikler 0.6 saniyede, yumuşakça olsun */
    transition: transform 0.6s ease !important; 
    
    /* Resim her zaman kutuyu doldursun */
    width: 100%;
    height: 250px; /* Senin ayarın */
    object-fit: cover;
    display: block;
}

/* 3. Hover Efekti: Resim %10 büyüsün */
.project-item:hover img {
    transform: scale(1.1) !important;
}

/* 4. Başlık Ayarı: Resim büyüyünce yazının altında kalsın */
.project-item h3 {
    /* Yazı her zaman en üst katta dursun */
    position: relative !important;
    z-index: 10 !important; 
    
    /* Yazının arkasını boyayalım ki resim alttan sızmasın */
    background-color: #0b0f19 !important; 
    
    /* Kenar boşluklarını sıfırla */
    margin: 0;
    padding: 15px; 
}

/* === GALERİ FOTOĞRAFLARINI DÜZELTME (DİKEY ODAKLI) === */

#gallery-short .project-item img {
    /* 1. Resmi yukarıdan hizala ki kafa kesilmesin */
    object-position: top center !important; 
    
    /* 2. Dikey fotoğraflar için boyu biraz daha uzat (Daha ferah dursun) */
    height: 400px !important; 
    
    /* 3. Resmi kutuya yay (Kenarda siyah boşluk kalmasın) */
    object-fit: cover !important; 
}

/* Mobilde çok uzun olmasın diye ayar */
@media (max-width: 768px) {
    #gallery-short .project-item img {
        height: 300px !important;
    }
}

/* === SAKİN VE TOPARLAYICI AYAR === */

.contact-wrapper {
    display: flex !important;
    justify-content: center !important; /* Sayfanın ortasında dursun */
    align-items: flex-start !important; /* İkisini de TEPEDEN hizala (Aşağı kaçmasın) */
    gap: 30px !important;               /* Aralarını azalttım, birbirine yakın olsunlar */
    max-width: 950px !important;
    margin: 40px auto !important;
}

/* Sol ve Sağ Taraf */
.contact-info, 
.contact-form-area {
    flex: 1 !important;
    width: 50% !important;
}

/* Sol Taraf (Bilgi Kutusu) */
.contact-info {
    /* Yüksekliği içerik kadar olsun, zorla uzatmasın */
    height: auto !important; 
}

/* BUTON AYARI (Kaçmasın diye tam genişlik) */
.submit-btn {
    width: 100% !important; /* Formun altına tam otursun */
    margin-top: 15px !important;
    display: block !important;
    
    /* Stil yine havalı kalsın */
    background: transparent !important;
    border: 2px solid #00c3d1 !important;
    color: #00c3d1 !important;
    border-radius: 8px !important; /* Çok yuvarlak olmasın, forma uysun */
    padding: 12px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.submit-btn:hover {
    background: #00c3d1 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 195, 209, 0.4) !important;
}

/* Mobil */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column !important;
        align-items: center !important;
    }
    .contact-info, .contact-form-area {
        width: 100% !important;
    }
}

/* === FİNAL İLETİŞİM AYARI: MİLİMETRİK HİZA === */

/* 1. Ana Taşıyıcı: Tepeden Hizala */
.contact-page {
    padding: 60px 20px !important;
    background: #000 !important;
    min-height: 80vh !important; /* Yüksekliği artırdık */
    align-items: center !important; /* Tepeden hizala */
}
.contact-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Tepeden başlat */
    gap: 50px !important;
    max-width: 1000px !important;
    margin: 50px auto !important;
}

/* 2. Sol Kutu (Referans Noktası) */
.contact-info {
    flex: 1 !important;
    background: #010711 !important;
    padding: 30px !important; /* İç boşluk 30px */
    border-radius: 12px;
    border: 1px solid #00c3d1;
    display: flex; /* İçeriği yönetmek için Flexbox'ı etkinleştir */
    flex-direction: column; /* İçeriğin yukarıdan aşağıya akmasını sağla */
    justify-content: center; /* Dikey Eksen (Yükseklik) üzerinde içeriği ortala */
    align-items: flex-start;
}

/* 3. Sağ Kutu (Form Alanı) - HİZA AYARI BURADA */
.contact-form-area {
    flex: 1.5 !important; /* Form biraz daha geniş olsun */
    
    /* Kritik Hamle: Sol kutunun iç boşluğu (30px) kadar yukarıdan boşluk bırakıyoruz */
    /* Böylece "Mesaj Gönder" yazısı "İletişim Bilgileri" ile aynı hizaya iniyor */
    padding-top: 30px !important; 
    
    background: transparent !important;
    border: none !important;
}

/* 4. Başlıkları Eşitle */
.contact-info h2,
.contact-form-area h2 {
    color: #fff !important;
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid #00c3d1; /* Alt çizgi */
    display: inline-block;
    padding-bottom: 10px;
    line-height: 1.2 !important; /* Satır yüksekliğini sabitle */
}

/* 5. Buton Ayarı (Senin görseldeki beyaz butonu ezelim) */
.submit-btn {
    width: 100% !important; /* Tam genişlik */
    padding: 15px !important;
    margin-top: 20px !important;
    
    /* Havalı Stil */
    background: transparent !important;
    color: #00c3d1 !important;
    border: 2px solid #00c3d1 !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.submit-btn:hover {
    background: #00c3d1 !important; /* Üstüne gelince mavi ol */
    color: #000 !important;
}
.contact-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;   /* Yüksekliği eşitleyen kısım */
    gap: 40px;
}


/* Mobil */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .contact-form-area {
        padding-top: 0 !important; /* Mobilde boşluğa gerek yok */
    }
}