/* Genel Sıfırlama ve Font Yüklemesi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    background-color: #0c0c14; /* Koyu Tema Varsayılan Arka Plan */
    min-height: 100vh;
    padding: 20px;
    color: #ededed; /* Koyu Tema Varsayılan Metin Rengi */
    position: relative;
    overflow-x: hidden;
    line-height: 1.65;
    transition: background-color 0.4s ease, color 0.4s ease; /* Tema geçiş animasyonu */
}

.main-container {
    max-width: 1100px;
    margin: 70px auto 50px auto;
    position: relative;
    z-index: 1;
}

/* Partiküller */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -10; /* Arka planda kalması için */
}

/* İkon Stilleri */
.icon-left {
    margin-right: 10px;
    color: #be96d8; /* Koyu tema vurgu */
    font-size: 0.9em;
    transition: color 0.4s ease;
}

/* Giriş Animasyonları (Geliştirilmiş) */
.animated-section {
    opacity: 0;
    transform: translateY(40px) scale(0.98); /* Hafif ölçek ekle */
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.animated-section.visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Ölçeği normale döndür */
}

/* Üst Kartlar */
.top-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.card {
    background: rgba(22, 22, 38, 0.65); /* Koyu Tema Kart Arka Planı */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 30px;
    border-radius: 12px;
    flex: 1;
    min-width: 280px;
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(190, 150, 216, 0.15); /* Koyu Tema Kart Kenarlığı */
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.3); /* Koyu Tema Kart Gölgesi */
    transition: transform 0.35s ease-out, box-shadow 0.35s ease-out, background-color 0.35s ease, border-color 0.35s ease;
}

.card:hover {
    transform: translateY(-10px) scale(1.03); /* Daha belirgin */
    box-shadow: 0 15px 40px rgba(190, 150, 216, 0.35); /* Daha belirgin gölge */
    background: rgba(30, 30, 55, 0.75); /* Hafif renk değişimi */
    border-color: rgba(190, 150, 216, 0.3);
}
.card:active { /* Kartlara tıklama efekti (isteğe bağlı) */
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 30px rgba(190, 150, 216, 0.25);
}


.info-card {
    text-align: center;
}
.info-card .info-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.info-card h1 {
    font-size: 2.2em;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    color: #ffffff; /* Koyu Tema Başlık */
    font-weight: 700;
    text-shadow: 0 0 10px rgba(190, 150, 216, 0.3);
    transition: color 0.4s ease;
}

.titles {
    position: relative;
    height: 40px;
    overflow: hidden;
    margin-top: 8px;
    width: 100%;
}
.title {
    font-size: 1.4em;
    color: #be96d8; /* Koyu Tema Vurgu */
    font-weight: 500;
    position: absolute; width: 100%; left: 0; top: 0; opacity: 0;
    animation: elegantTextFade 9s infinite;
    transition: color 0.4s ease;
}
.title1 { animation-delay: 0s; }
.title2 { animation-delay: 3s; }
.title3 { animation-delay: 6s; }
@keyframes elegantTextFade {
    0% { opacity: 0; transform: translateY(20px); } 10% { opacity: 1; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(0); } 40% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 0; }
}

.about-card {
    text-align: left;
}
.about-card h2 {
    font-size: 1.8em;
    margin-bottom: 12px;
    color: #ffffff; /* Koyu Tema Başlık */
    font-weight: 600;
    transition: color 0.4s ease;
}
.about-card p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #d8d8d8; /* Koyu Tema Paragraf */
    margin-bottom: 15px;
    transition: color 0.4s ease;
}

.compact-skills {
    padding-top: 15px;
    border-top: 1px solid rgba(190, 150, 216, 0.1);
    text-align: left;
    transition: border-color 0.4s ease;
}
.compact-skills h4 {
    font-size: 0.9em;
    color: #be96d8; /* Koyu Tema Vurgu */
    margin-bottom: 8px;
    font-weight: 600;
    transition: color 0.4s ease;
}
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.skills-list span {
    background-color: rgba(190, 150, 216, 0.1);
    color: #d0c8e0;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.75em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.skills-list span:hover {
    background-color: rgba(190, 150, 216, 0.3);
    color: #ffffff;
}
.skills-list span i {
    margin-right: 5px;
    font-size: 0.8em;
    color: #be96d8; /* Koyu Tema Vurgu */
    transition: color 0.4s ease;
}

/* Sosyal Medya İkonları */
.social-card {
    margin: 25px auto 45px auto;
    max-width: 100%;
    text-align: center;
}
.social-icons {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 25px;
}
.social-icons li a {
    color: #a0a0b0; /* Koyu Tema Sosyal İkon */
    font-size: 2.1em;
    transition: transform 0.3s ease, color 0.3s ease;
}
.social-icons li a:hover {
    transform: scale(1.25) translateY(-4px);
}
.social-icons li a:hover .fa-instagram { color: #E1306C; }
.social-icons li a:hover .fa-youtube   { color: #FF0000; }
.social-icons li a:hover .fa-twitch    { color: #9146FF; }
.social-icons li a:hover .fa-steam     { color: #1b2838; }
.social-icons li a:hover .fa-github    { color: #c8b1e8; }
.social-icons li a:hover .fa-linkedin-in { color: #0A66C2; }
.social-icons li a:hover .fa-twitter   { color: #1DA1F2; }
.social-icons li a:hover .fa-discord   { color: #5865F2; }

/* Projeler Bölümü */
.projects-section {
    margin-top: 50px;
    text-align: center;
}
.projects-section h2 {
    font-size: 2.3em;
    margin-bottom: 30px;
    color: #ffffff; /* Koyu Tema Başlık */
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}
.projects-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.project-card {
    background: rgba(22, 22, 38, 0.7); /* Koyu Tema Proje Kart Arka Planı */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(190, 150, 216, 0.12); /* Koyu Tema Proje Kart Kenarlığı */
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); /* Koyu Tema Proje Kart Gölgesi */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out, background-color 0.3s ease-out;
    height: auto;
    min-height: 380px;
}
.project-card:hover {
    transform: translateY(-10px) scale(1.02); /* Daha belirgin */
    box-shadow: 0 12px 35px rgba(190, 150, 216, 0.28); /* Daha belirgin gölge */
    border-color: rgba(190, 150, 216, 0.25);
}
.project-card:active { /* Kartlara tıklama efekti (isteğe bağlı) */
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 30px rgba(190, 150, 216, 0.20);
}
.project-image-container {
    width: 100%;
    height: 190px;
    overflow: hidden;
    position: relative;
}
.project-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease-out;
}
.project-card:hover .project-image-container img {
    transform: scale(1.08);
}
.project-info {
    padding: 20px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.project-info h3 {
    font-size: 1.45em;
    margin-bottom: 8px;
    color: #f8f8f8; /* Koyu Tema Proje Başlığı */
    font-weight: 600;
    transition: color 0.4s ease;
}
.project-info p {
    font-size: 0.92em;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #c8c8d8; /* Koyu Tema Proje Paragrafı */
    flex-grow: 1;
    transition: color 0.4s ease;
}
.project-tags {
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.project-tags span {
    background-color: rgba(190, 150, 216, 0.15);
    color: #be96d8; /* Koyu Tema Vurgu */
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.project-status {
    font-size: 0.78em;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 5px;
    align-self: flex-start;
    margin-top: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.project-status.active { background-color: rgba(130, 221, 240, 0.2); color: #82ddf0; }
.project-status.completed { background-color: rgba(144, 238, 144, 0.2); color: #90ee90; }
.project-status.ongoing { background-color: rgba(255, 165, 0, 0.2); color: #ffa500; }

/* Uptime Bölümü */
.uptime-section {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: rgba(22, 22, 38, 0.6); /* Koyu Tema Bölüm Arka Planı */
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(190, 150, 216, 0.1); /* Koyu Tema Bölüm Kenarlığı */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); /* Koyu Tema Bölüm Gölgesi */
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.uptime-section h2 {
    font-size: 2.2em;
    margin-bottom: 15px;
    color: #ffffff; /* Koyu Tema Başlık */
    font-weight: 700;
    transition: color 0.4s ease;
}
.uptime-section p {
    font-size: 1.1em;
    color: #d8d8d8; /* Koyu Tema Paragraf */
    margin-bottom: 25px;
    transition: color 0.4s ease;
}
.uptime-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #82ddf0; /* Koyu Tema Buton Arka Planı */
    color: #0c0c14; /* Koyu Tema Buton Metni */
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(130, 221, 240, 0.3);
}
.uptime-button:hover {
    background-color: #6ac7db;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 15px rgba(130, 221, 240, 0.5);
}
.uptime-button:active { /* Buton tıklama efekti */
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 1px 4px rgba(130, 221, 240, 0.2);
}
.uptime-button i { font-size: 1.1em; }

/* İletişim Bölümü */
.contact-section {
    margin-top: 60px;
    text-align: center;
    background: rgba(22, 22, 38, 0.7); /* Koyu Tema Bölüm Arka Planı */
    backdrop-filter: blur(10px);
    padding: 35px 45px;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0,0,0,0.25); /* Koyu Tema Bölüm Gölgesi */
    border: 1px solid rgba(190, 150, 216, 0.08); /* Koyu Tema Bölüm Kenarlığı */
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.contact-section h2 {
    font-size: 2.1em;
    margin-bottom: 15px;
    color: #ffffff; /* Koyu Tema Başlık */
    font-weight: 700;
    transition: color 0.4s ease;
}
.contact-section p {
    font-size: 1.1em;
    color: #d8d8d8; /* Koyu Tema Paragraf */
    line-height: 1.7;
    margin-bottom: 25px;
    transition: color 0.4s ease;
}
.contact-email-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #82ddf0; /* Koyu Tema Link Rengi */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15em;
    padding: 12px 22px;
    border: 1.5px solid #82ddf0; /* Koyu Tema Link Kenarlığı */
    border-radius: 8px;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 8px rgba(130, 221, 240, 0.3);
}
.contact-email-link:hover {
    background-color: #82ddf0;
    color: #0c0c14;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 4px 15px rgba(130, 221, 240, 0.5);
}
.contact-email-link:active { /* Buton tıklama efekti */
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 1px 4px rgba(130, 221, 240, 0.2);
}

/* Scroll to Top Butonu */
#scrollToTopBtn {
    display: none; /* JavaScript ile yönetilecek */
    opacity: 0; /* JavaScript ile yönetilecek */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #be96d8; /* Koyu Tema Buton Arka Planı */
    color: #0c0c14; /* Koyu Tema Buton Metni */
    cursor: pointer;
    padding: 10px 13px;
    border-radius: 50%;
    font-size: 1.3em;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
#scrollToTopBtn:hover {
    background-color: #a880c0;
    transform: translateY(-3px);
}
#scrollToTopBtn:active { /* Buton tıklama efekti */
    transform: translateY(0px) scale(0.95);
}

/* === Tema Değiştirme Butonu === */
#themeToggleBtn {
    position: fixed;
    bottom: 30px;
    left: 30px; 
    z-index: 99;
    border: none;
    outline: none;
    background-color: #be96d8; /* Koyu tema için scrolltotop ile aynı */
    color: #0c0c14;
    cursor: pointer;
    padding: 10px 12px; 
    border-radius: 50%;
    font-size: 1.3em; 
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

#themeToggleBtn:hover {
    background-color: #a880c0;
    transform: translateY(-3px);
}
#themeToggleBtn:active {
    transform: translateY(0px) scale(0.95);
}


/* === Açık Tema Stilleri (Güncellenmiş Renkler) === */
body.light-mode {
    background-color: #E9EDF0; /* YENİ Açık Tema Ana Arka Plan (Daha Az Parlak) */
    color: #343A40; /* YENİ Açık Tema Ana Metin Rengi */
}

/* Açık Tema İkon Rengi */
body.light-mode .icon-left {
    color: #607D8B; /* YENİ Açık tema için farklı bir vurgu rengi */
}

/* Açık Tema Kart Stilleri */
body.light-mode .card {
    background: #FDFEFE; /* YENİ Kart Arka Planı */
    border-color: #DDE2E6; /* YENİ Kart Kenarlığı */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* Hafif gölge */
    backdrop-filter: none; 
    -webkit-backdrop-filter: none;
}
body.light-mode .card:hover {
    background: #FFFFFF;
    border-color: rgba(96, 125, 139, 0.4); /* Açık tema vurgu rengiyle uyumlu */
    box-shadow: 0 8px 28px rgba(96, 125, 139, 0.15);
}
body.light-mode .card:active {
    box-shadow: 0 4px 20px rgba(96, 125, 139, 0.1);
}


/* Açık Tema Info Card Başlıkları */
body.light-mode .info-card h1 {
    color: #2c3e50; 
    text-shadow: none;
}
body.light-mode .titles .title {
    color: #607D8B; /* YENİ Açık tema vurgu */
}

/* Açık Tema About Card */
body.light-mode .about-card h2 {
    color: #2c3e50;
}
body.light-mode .about-card p {
    color: #495057; /* Biraz daha koyu ve okunaklı */
}

/* Açık Tema Yetenekler */
body.light-mode .compact-skills {
    border-top-color: #DDE2E6;
}
body.light-mode .compact-skills h4 {
    color: #607D8B; /* YENİ Açık tema vurgu */
}
body.light-mode .skills-list span {
    background-color: rgba(96, 125, 139, 0.1);
    color: #4A5C65;
}
body.light-mode .skills-list span:hover {
    background-color: rgba(96, 125, 139, 0.2);
    color: #2c3e50;
}
body.light-mode .skills-list span i {
    color: #607D8B; /* YENİ Açık tema vurgu */
}

/* Açık Tema Sosyal İkonlar */
body.light-mode .social-icons li a {
    color: #495057; /* Daha belirgin ikonlar */
}
body.light-mode .social-icons li a:hover .fa-github { color: #212529; }


/* Açık Tema Projeler */
body.light-mode .projects-section h2 {
    color: #2c3e50;
}
body.light-mode .project-card {
    background: #FDFEFE; /* YENİ */
    border-color: #DDE2E6; /* YENİ */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.light-mode .project-card:hover {
    border-color: rgba(96, 125, 139, 0.3);
    box-shadow: 0 8px 28px rgba(96, 125, 139, 0.12);
}
body.light-mode .project-card:active {
    box-shadow: 0 4px 20px rgba(96, 125, 139, 0.08);
}
body.light-mode .project-info h3 {
    color: #343A40;
}
body.light-mode .project-info p {
    color: #525d6d;
}
body.light-mode .project-tags span {
    background-color: rgba(96, 125, 139, 0.12);
    color: #607D8B;
}
body.light-mode .project-status.active { background-color: rgba(58, 141, 222, 0.15); color: #3A8DDE; }
body.light-mode .project-status.completed { background-color: rgba(61, 153, 112, 0.15); color: #3D9970; }
body.light-mode .project-status.ongoing { background-color: rgba(211, 142, 26, 0.18); color: #D38E1A; }


/* Açık Tema Uptime & İletişim Bölümleri */
body.light-mode .uptime-section,
body.light-mode .contact-section {
    background: #F8F9FA; /* Kartlardan biraz farklı, ana gövdeye yakın */
    border-color: #DDE2E6;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}
body.light-mode .uptime-section h2,
body.light-mode .contact-section h2 {
    color: #2c3e50;
}
body.light-mode .uptime-section p,
body.light-mode .contact-section p {
    color: #495057;
}
body.light-mode .uptime-button {
    background-color: #3A8DDE; /* YENİ Daha yumuşak mavi */
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(58, 141, 222, 0.3);
}
body.light-mode .uptime-button:hover {
    background-color: #317ABF;
    box-shadow: 0 4px 15px rgba(58, 141, 222, 0.4);
}
body.light-mode .uptime-button:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 1px 4px rgba(58, 141, 222, 0.2);
}

body.light-mode .contact-email-link {
    color: #3A8DDE;
    border-color: #3A8DDE;
    box-shadow: 0 2px 8px rgba(58, 141, 222, 0.3);
}
body.light-mode .contact-email-link:hover {
    background-color: #3A8DDE;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(58, 141, 222, 0.4);
}
body.light-mode .contact-email-link:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 1px 4px rgba(58, 141, 222, 0.2);
}

/* Açık Tema Scroll to Top ve Tema Butonu */
body.light-mode #scrollToTopBtn,
body.light-mode #themeToggleBtn {
    background-color: #607D8B; /* YENİ Açık tema vurgu */
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
body.light-mode #scrollToTopBtn:hover,
body.light-mode #themeToggleBtn:hover {
    background-color: #546E7A;
}
body.light-mode #scrollToTopBtn:active,
body.light-mode #themeToggleBtn:active {
    transform: translateY(0px) scale(0.95);
}


/* Responsive Ayarlamalar */
@media (max-width: 992px) { /* Tablet */
    .main-container { max-width: 95%; margin-top: 60px; padding-left: 15px; padding-right: 15px; }
    .projects-container { grid-template-columns: 1fr; }
    .project-card { min-width: auto; }

    .top-cards { gap: 18px; }
    .card { padding: 18px 25px; min-height: 260px; }
    .info-card h1 { font-size: 2em; }
    .title { font-size: 1.3em; }
    .about-card h2 { font-size: 1.75em; }
    .about-card p { font-size: 1.02em; margin-bottom: 12px; }
    .compact-skills { padding-top: 10px; }
    .compact-skills h4 { font-size: 0.85em; margin-bottom: 6px; }
    .skills-list span { font-size: 0.7em; padding: 3px 7px; }
    .social-icons { gap: 18px 22px; }
    .social-icons li a { font-size: 2em; }
    .projects-section h2 { font-size: 2.1em; }
}

@media (max-width: 768px) { /* Mobil */
    .main-container { margin-top: 50px; }
    .top-cards { flex-direction: column; gap: 15px; }
    .card { min-height: auto; }
    .info-card h1 { font-size: 1.8em; margin-bottom: 12px; }
    .title { font-size: 1.2em; height: 35px; }
    .about-card h2 { font-size: 1.6em; margin-bottom: 10px; }
    .about-card p { font-size: 1em; margin-bottom: 10px; }
    .compact-skills { padding-top: 8px; }
    .skills-list { gap: 5px 8px; }
    .social-icons li a { font-size: 1.9em; }
    .projects-section h2 { font-size: 2em; margin-bottom: 25px; }
    .project-image-container { height: 180px; }
    .project-info h3 { font-size: 1.35em; margin-bottom: 8px; }
    .project-info p { font-size: 0.88em; margin-bottom: 10px; }
    .uptime-section h2 { font-size: 2em; margin-bottom: 12px; }
    .uptime-section p { font-size: 1em; margin-bottom: 20px; }
    .uptime-button { font-size: 1em; padding: 10px 20px; }
    .contact-section h2 { font-size: 1.9em; margin-bottom: 12px; }
    .contact-section p { font-size: 1.05em; margin-bottom: 20px; }
    .contact-email-link { font-size: 1.1em; padding: 10px 18px; }
    #scrollToTopBtn { bottom: 20px; right: 20px; padding: 8px 11px; font-size: 1.2em; }
    #themeToggleBtn { bottom: 20px; left: 20px; padding: 8px 10px; font-size: 1.2em;}
}

@media (max-width: 480px) { /* Küçük Mobil Ekranlar */
    .main-container { padding-left: 10px; padding-right: 10px; }
    .info-card h1 { font-size: 1.7em; }
    .title { font-size: 1.1em; height: 35px; }
    .about-card h2 { font-size: 1.5em; }
    .skills-list { gap: 4px 6px; }
    .skills-list span { font-size: 0.65em; }
    .project-info h3 { font-size: 1.3em; }
    .project-info p { font-size: 0.85em; }
    .project-tags span { font-size: 0.7em; }
    .project-status { font-size: 0.75em; padding: 3px 8px;}
    .uptime-button { font-size: 0.95em; padding: 9px 18px; }
    .contact-email-link { font-size: 1em; padding: 9px 16px; }
}