/* ==========================================================
   SİTE RENK PALETİ VE YAZI TİPLERİ (DEĞİŞKENLER)
   ========================================================== */
/* :root kısmı sitenin renk deposudur. İleride bir rengi değiştirmek 
   istersen sadece buradaki kodları değiştirmen yeterli olacaktır. */
:root {
    /* Senin mevcut karanlık temanın ana renkleri */
    --bg-header: #0A3F24;     /* Üst menü, butonlar ve footer için Koyu Orman Yeşili */
    --text-white: #FFFFFF;    /* Başlıklar ve ana yazılar için Saf Beyaz Metin */
    --text-muted: #A3AF9B;    /* Alt açıklamalar için soluk yeşil/gri metin */
    
    /* Dumanlı arka plan (Mesh Gradient) için kullanılan karışım renkleri */
    --blend-charcoal: #141618; /* Derin Kömür Grisi (Ana zemin rengi) */
    --blend-slate: #1E2125;    /* Arduvaz Grisi (Butonun üzerine gelinceki renk) */
    --card-hover: #0C482C;     /* Faremizi kutucukların üzerine getirince beliren soft yeşil */
    
    /* Yazı Tipleri (Google Fonts) */
    --font-heading: 'Space Grotesk', sans-serif; /* Başlıklar için modern ve köşeli font */
    --font-body: 'Plus Jakarta Sans', sans-serif; /* Uzun yazılar için okunabilir font */
}

/* ==========================================================
   1. TEMEL AYARLAR VE SIFIRLAMA
   ========================================================== */
/* Yıldız (*) işareti sayfadaki tüm elemanları seçer ve tarayıcının 
   kendi eklediği gereksiz boşlukları sıfırlar. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Kutu boyutlarının taşmasını engeller */
}

/* Sayfanın Ana Gövdesi (Body) */
/* Sayfanın Ana Gövdesi (Body) */
body {
    background-color: var(--blend-charcoal);
    background-image: 
        radial-gradient(at 10% 20%, #0c331a 0%, transparent 60%),
        radial-gradient(at 90% 80%, var(--bg-header) 0%, transparent 50%),
        radial-gradient(at 50% 100%, #1e1f1f 0%, transparent 40%);
    
    color: var(--text-white);
    font-family: var(--font-body);
    line-height: 1.6;
    
    /* YENİ: Arka planı büyütüp hareket (nefes) animasyonu ekliyoruz */
    background-size: 150% 150%;
    animation: nefesAlanArkaPlan 15s ease infinite alternate;
}

/* YENİ: Arka planın yavaşça yer değiştirmesini sağlayan animasyon */
@keyframes nefesAlanArkaPlan {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Tüm başlık etiketleri */
h1, h2, h3 {
    font-family: var(--font-heading); /* Başlıklara o modern fontu uygular */
    color: var(--text-white); /* Başlıkları bembeyaz yapar */
}

/* ==========================================================
   2. ÜST MENÜ VE LOGO (HEADER)
   ========================================================== */
header {
    display: flex; /* Logoyu ve menüyü aynı hizaya (yan yana) getirir */
    justify-content: space-between; /* Logoyu en sola, menüyü en sağa yaslar */
    align-items: center; /* Dikey olarak tam ortalar */
    padding: 25px 10%; /* Üst-alttan 25px, sağ-soldan %10 boşluk bırakır */
    background-color: var(--bg-header); /* Arka planı koyu orman yeşili yapar */
    box-shadow: 0 10px 15px -10px rgba(0,0,0,0.3); /* Menünün altına çok hafif bir gölge ekler */
}

/* Logo Yazısı */
header .logo h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px; /* Harfleri birbirine hafifçe yaklaştırır */
    color: var(--text-white);
}

/* Menü Linklerinin Listesi */
nav ul {
    list-style: none; /* Liste başındaki noktaları siler */
    display: flex; /* Linkleri yan yana dizer */
    gap: 35px; /* Linkler arasına boşluk koyar */
}

/* Menüdeki Tıklanabilir Linkler */
nav ul li a {
    color: var(--text-white);
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s ease; /* Renk geçişini yumuşatır */
}

/* Menü Linkinin Üzerine Fareyle Gelince */
nav ul li a:hover {
    color: #C2E8D0; /* Rengi açık yeşile döner */
}

/* ==========================================================
   3. KARŞILAMA ALANI (HERO SECTION)
   ========================================================== */
.hero-section {
    text-align: center; /* Yazıları ve arama çubuğunu ortalar */
    padding: 140px 20px; /* Üst-alttan devasa boşluk bırakır */
    background-color: transparent; /* Arka planı şeffaf yapar ki alttaki dumanlı geçiş görünsün */
    border-bottom: none; /* Çizgileri siler */
}

/* Karşılama Alanındaki Dev Başlık */
.hero-section h1 {
    font-size: 3.5rem; /* Yazı boyutu çok büyük */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px; /* Altındaki yazıyla arasına boşluk bırakır */
    letter-spacing: -1px;
}

/* Dev Başlığın Altındaki Açıklama Yazısı */
.hero-section p {
    font-size: 1.2rem;
    color: var(--text-muted); /* Rengini soluk yeşil yapar */
    max-width: 550px; /* Satırın çok uzamasını engeller */
    margin: 0 auto 40px auto; /* Ortalar ve altından boşluk bırakır */
}

/* ==========================================================
   ARAMA ÇUBUĞU (SEARCH BOX)
   ========================================================== */
.search-box {
    display: flex; /* Kutu ve butonu yan yana dizer */
    justify-content: center;
    align-items: center;
    max-width: 650px; /* Arama çubuğunun maksimum genişliği */
    margin: 0 auto; /* Ortalar */
    gap: 15px; /* Kutu ile buton arasına 15px boşluk bırakır */
}

/* Kullanıcının Yazı Yazdığı Kısım (Input) */
.search-box input {
    flex: 1; /* Kutunun olabildiğince genişlemesini sağlar */
    padding: 18px 25px; /* İç boşluklar (kutuyu büyütür) */
    border-radius: 50px; /* Kenarları tam yuvarlak yapar */
    
    /* GÜNCELLEME: Çerçeveyi daha belirgin ve uyumlu yapıyoruz */
    border: 2px solid rgba(163, 175, 155, 0.4); 

    font-size: 1.1rem;
    font-family: var(--font-body);
    
    /* ==========================================================
       HATA KAPATMA ALANI (GÜNCELLEME)
       Bu iki satır mobil sorunu kökünden çözer!
       ========================================================== */
    /* GÜNCELLEME: YAZI RENGİNİ BEYAZ YAPIYORUZ (Garantiye alalım) */
    color: #ffffff !important; 
    
    /* GÜNCELLEME: GİRİŞ KUTUSUNA KOYU ARKA PLAN VERİYORUZ */
    background-color: var(--blend-slate) !important; 
    /* ========================================================== */

    outline: none; /* Tıklanınca çıkan varsayılan çirkin çizgiyi siler */
    transition: all 0.3s ease;

    /* MOBİL FİX: Safari ve diğer tarayıcıların varsayılan gölgelerini siler */
    -webkit-appearance: none; 
    appearance: none;
}

/* GÜNCELLEME: İpucu yazısının rengini de daha uyumlu yapıyoruz */
.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.5); 
}

/* GÜNCELLEME: Tıklanınca oluşan durumu daha premium yapıyoruz */
.search-box input:focus {
    /* GÜNCELLEME: Çerçeve rengini canlı yeşil yapıyoruz */
    border-color: #2ecc71; 
    
    background-color: var(--blend-charcoal) !important; /* Odaklanınca hafifçe koyulaşır */
    color: #ffffff !important;
    
    /* GÜNCELLEME: Şık bir yeşil parlama gölgesi (Pulse/Ripple) */
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.2); 
}

/* Arama Butonundaki Fare İmleci Ayarı */
.search-box .btn {
    cursor: pointer; /* Fare ikonunu el işaretine çevirir */
}

/* ==========================================================
   GENEL BUTON TASARIMI VE ANİMASYONU
   ========================================================== */
.btn {
    display: inline-block;
    background-color: var(--bg-header); /* Koyu yeşil buton arka planı */
    color: var(--text-white);
    padding: 16px 36px;
    text-decoration: none;
    border-radius: 50px; /* Tam yuvarlak buton */
    font-weight: 600;
    font-size: 1.1rem;
    font-family: var(--font-body);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Pürüzsüz kaygan animasyonun sırrı bu koddur */
    border: 1px solid transparent;
}

/* Fareyle butonun üzerine gelince */
.btn:hover {
    background-color: var(--blend-slate); /* Buton rengi koyu arduvaz grisi olur */
    transform: translateY(-4px); /* Buton 4 piksel havaya kalkar */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Havaya kalkınca altına gölge düşer */
}

/* Butona tıklandığı an */
.btn:active {
    transform: translateY(0); /* Buton geri aşağı iner (tıklanma hissi) */
}

/* ==========================================================
   4. KATEGORİLER VE KARTLAR (KUTUCUKLAR)
   ========================================================== */
.categories {
    padding: 80px 20px;
    text-align: center;
    background-color: transparent; /* Şeffaf yapar, alttaki dumanlı geçiş görünür */
    border-top: none; /* Sınır çizgisini siler */
}

/* "Popüler Kaynaklar" Başlığı */
.categories h2 {
    font-size: 2.2rem;
    margin-bottom: 50px;
}

/* Kartları taşıyan, yan yana dizen görünmez çerçeve */
.card-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Kartlar arası boşluk */
    flex-wrap: wrap; /* Ekrana sığmazsa alt satıra atar (Mobil uyum) */
    max-width: 1100px;
    margin: 0 auto;
}

/* ==========================================================
   KARTLARIN KENDİ TASARIMI
   ========================================================== */
.card {
    background-color: transparent; /* Kart içi şeffaf, sadece çerçevesi var */
    padding: 40px 30px;
    border-radius: 20px; /* Yumuşak köşeler */
    border: 2px solid rgba(163, 175, 155, 0.2); /* İnce, soluk yeşil bir çerçeve */
    width: 320px;
    text-align: left; /* İçindeki yazıları sola yaslar */
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* Fareyle kartın üzerine gelince olan sihirli şeyler */
.card:hover {
    transform: translateY(-8px); /* Kart 8 piksel havaya uçar */
    box-shadow: 0 20px 40px rgba(0,0,0,0.06); /* Gölgesi büyür */
    border-color: var(--card-hover); /* Çerçevesi soft yeşil olur */
    background-color: var(--card-hover); /* Kartın İÇİ soft yeşil olur */
}

/* Kartın İçindeki İkonların Ayarı */
.card i {
    font-size: 2.5rem; /* İkon boyutu */
    color: var(--text-white); /* İkon rengi beyaz */
    margin-bottom: 25px;
    background-color: var(--bg-header); /* İkonun arkasındaki yuvarlak fon koyu yeşil */
    padding: 15px;
    border-radius: 50%; /* Fonu tam yuvarlak yapar */
    display: inline-block;
    transition: transform 0.4s ease;
}

/* Fareyle karta gelince ikonun tepkisi */
.card:hover i {
    transform: scale(1.05) rotate(-5deg); /* İkon çok hafif büyür ve sola yatar */
}

/* Kart Başlığı */
.card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

/* Kart Açıklaması */
.card p {
    color: var(--text-muted); /* Soluk renkli metin */
    font-size: 0.95rem;
    margin-bottom: 30px;
}

/* Kart İçindeki "İncele" Linki */
.card a {
    text-decoration: none;
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--bg-header); /* Altına koyu yeşil çizgi çeker */
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

/* Fare "İncele" linkine gelince */
.card a:hover {
    color: #C2E8D0; /* Açık yeşile döner */
    border-color: #C2E8D0; /* Alt çizgisi de açık yeşil olur */
}

/* ==========================================================
   5. ALT BİLGİ (FOOTER)
   ========================================================== */
footer {
    text-align: center;
    padding: 40px 20px;
    background-color: transparent; /* Şeffaf, dumanlı arka planla birleşik */
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: none; /* Çizgi yok */
}
/* ==========================================================
   MOBİL UYUMLULUK (TELEFON VE TABLETLER İÇİN)
   ========================================================== */
/* Ekran genişliği 768 piksel ve altındaysa (genelde tablet ve telefonlar) 
   buradaki kodlar devreye girer ve yukarıdaki bazı tasarımları ezer. */
@media (max-width: 768px) {
    
    /* 1. Üst Menü (Header) Ayarları */
    header {
        flex-direction: column; /* Logoyu ve menüyü yan yana değil, alt alta dizer */
        padding: 20px; /* Sağ/sol boşluklarını küçültür */
        gap: 15px; /* Logo ile altındaki menü arasına boşluk koyar */
    }

    nav ul {
        flex-wrap: wrap; /* Linkler sığmazsa zorla yan yana tutmaz, alt satıra atar */
        justify-content: center; /* Linkleri ortalar */
        gap: 15px; /* Linkler arası boşluğu daraltır */
    }

    /* 2. Karşılama Alanı (Hero) Ayarları */
    .hero-section {
        padding: 80px 20px; /* 140px olan devasa üst/alt boşluğu küçültürüz */
    }

    .hero-section h1 {
        font-size: 2.2rem; /* Başlık telefona sığsın diye boyutunu ufaltırız */
    }

    .hero-section p {
        font-size: 1rem; /* Açıklama yazısını da bir tık küçültürüz */
    }

    /* 3. Arama Çubuğu Ayarları */
    .search-box {
        flex-direction: column; /* Arama kutusunu ve butonu alt alta alır */
        width: 100%; /* Konteyneri ekranın tamamına yayar */
    }

    .search-box input {
        width: 100%; /* Arama kutusu ekranı tam kaplar */
    }

    .search-box .btn {
        width: 100%; /* Buton da kutunun altında ekranı tam kaplar (basması çok kolay olur) */
    }

    /* 4. Kategoriler ve Kartlar Ayarları */
    .categories {
        padding: 50px 20px; /* Boşlukları daraltır */
    }

    .card {
        width: 100%; /* Kartları yan yana sıkıştırmak yerine, tam ekran genişliğine yayar */
        max-width: 380px; /* Ancak tabletlerde aşırı devasa olmasını engeller */
    }
}
/* ==========================================================
   6. DERSLER SAYFASI ÖZEL TASARIMLARI
   ========================================================== */
/* Sayfa üstündeki başlık alanı */
.page-header {
    text-align: center;
    padding: 100px 20px 40px; /* Üstten 100px boşluk bırakır */
    background-color: transparent;
}

.page-header h1 {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

/* Derslerin alt alta dizildiği ana kolon */
.course-list {
    max-width: 900px; /* Çok fazla uzamasını engeller */
    margin: 0 auto 80px auto; /* Ortalar ve alttan boşluk bırakır */
    padding: 0 20px;
    display: flex;
    flex-direction: column; /* İçindekileri yan yana değil alt alta dizer! */
    gap: 20px; /* Satırlar arasına 20px boşluk koyar */
}

/* Tek bir ders satırının (kutusunun) tasarımı */
.course-item {
    background-color: transparent; /* İçi şeffaf */
    border: 2px solid rgba(163, 175, 155, 0.2); /* İnce yeşil çerçeve */
    border-radius: 15px; /* Köşeleri yuvarlar */
    padding: 25px 30px;
    display: flex; /* Yazıyı sola, butonu sağa atar */
    justify-content: space-between; 
    align-items: center; /* Dikeyde ortalar */
    transition: all 0.3s ease;
}

/* Fareyle ders satırının üzerine gelince */
.course-item:hover {
    border-color: var(--card-hover);
    background-color: var(--card-hover); /* İçi soft yeşil olur */
    transform: translateX(10px); /* Kutu 10 piksel SAĞA doğru kayar (Çok şık durur!) */
}

.course-info h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.course-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* PDF İndir Butonu Tasarımı */
.btn-download {
    background-color: var(--bg-header); /* Koyu yeşil arka plan */
    color: var(--text-white);
    padding: 12px 24px;
    border-radius: 8px; /* Daha köşeli modern buton */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px; /* İkon ile yazı arasına boşluk */
}

.btn-download:hover {
    background-color: #C2E8D0; /* Açık yeşile döner */
    color: var(--bg-header); /* Yazı koyu yeşil olur */
}

/* Dersler sayfasının telefondaki (Mobil) görünümü */
@media (max-width: 768px) {
    .course-item {
        flex-direction: column; /* Yazı ve butonu alt alta alır */
        align-items: flex-start; /* Sola yaslar */
        gap: 15px; /* Aralarına boşluk koyar */
    }
    .btn-download {
        width: 100%; /* Buton telefon ekranını tam kaplar */
        justify-content: center; /* Yazıyı ortalar */
    }
}
/* ==========================================================
   ÖZEL KAYDIRMA ÇUBUĞU (CUSTOM SCROLLBAR)
   ========================================================== */
/* Çubuğun genel genişliği */
::-webkit-scrollbar {
    width: 12px;
}

/* Çubuğun arkasındaki ray (Kömür grisi yapıyoruz) */
::-webkit-scrollbar-track {
    background: var(--blend-charcoal);
}

/* Tutup çektiğimiz asıl çubuk (Koyu orman yeşili) */
::-webkit-scrollbar-thumb {
    background-color: var(--bg-header); 
    border-radius: 10px; /* Köşelerini yuvarlatıyoruz */
    border: 3px solid var(--blend-charcoal); /* Ray ile çubuk arasına boşluk hissi verir */
}

/* Fareyle çubuğun üzerine gelince (Rengi biraz açılır) */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--card-hover); 
}
/* ==========================================================
   DAKTİLO EFEKTİ (TYPING ANIMATION)
   ========================================================== */
.typing-text {
    color: var(--accent-btn); /* Değişen yazıları zümrüt yeşili vurgu rengi yapar */
    border-right: 3px solid var(--accent-btn); /* Yanıp sönen imleç (kürsör) */
    padding-right: 5px;
    animation: blinkCursor 0.7s infinite normal; /* İmlecin yanıp sönme animasyonu */
}

/* İmlecin bir görünüp bir kaybolmasını sağlayan sihirli kod */
@keyframes blinkCursor {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--accent-btn); }
}
/* ==========================================================
   YUKARI ÇIK BUTONU (SCROLL TO TOP)
   ========================================================== */
.scroll-top-btn {
    position: fixed; /* Ekranı kaydırsan da sabit durur */
    bottom: 30px; /* Alttan boşluk */
    right: 30px; /* Sağdan boşluk */
    background-color: var(--accent-btn); /* Zümrüt yeşili */
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Tam yuvarlak */
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* Animasyon ayarları */
    opacity: 0; /* Başlangıçta görünmez (şeffaf) */
    visibility: hidden; /* Tıklanmasını engeller */
    transform: translateY(20px); /* Biraz aşağıda başlar */
    transition: all 0.3s ease;
    z-index: 999; /* Diğer her şeyin üstünde durmasını sağlar */
}

/* Sayfa aşağı kaydırıldığında JS tarafından bu sınıf (class) eklenecek */
.scroll-top-btn.goster {
    opacity: 1; /* Görünür yap */
    visibility: visible;
    transform: translateY(0); /* Kendi yerine oturt */
}

/* Fareyle üzerine gelince */
.scroll-top-btn:hover {
    background-color: var(--card-hover); /* Koyu soft yeşile döner */
    transform: translateY(-5px); /* Havaya kalkar */
}
/* ==========================================================
   KAYDIRMA ANİMASYONLARI (SCROLL REVEAL)
   ========================================================== */
/* Kartların ve listelerin ekrana gelmeden önceki gizli hali */
/* ==========================================================
   ULTRA MODERN KAYDIRMA ÇUBUĞU (MAC-STYLE)
   ========================================================== */
::-webkit-scrollbar {
    width: 8px; /* Kalın çubuğu incelttik ve zarifleştirdik */
}

::-webkit-scrollbar-track {
    background: transparent; /* Çubuğun arkasındaki o kaba gri rayı tamamen şeffaf yaptık */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(163, 175, 155, 0.3); /* Çok soft, cam gibi yarı saydam yeşil-gri */
    border-radius: 10px; /* Tam yuvarlak köşeler */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(163, 175, 155, 0.7); /* Fareyle üzerine gelince şık bir şekilde belirginleşir */
}

/* ==========================================================
   YUMUŞAK SAYFA YÜKLEME (SİYAH PATLAMAYI ENGELLEYEN KOD)
   ========================================================== */
/* Kartların ve başlıkların sayfa açıldığı an pürüzsüzce belirmesi için */
.card, .course-item, .page-header {
    animation: sayfaAcilisi 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0; /* HTML yüklenirken tamamen görünmez olurlar ki siyah patlama yapmasınlar */
}

/* Aşağıdan yukarı doğru çok zarif bir süzülme efekti */
@keyframes sayfaAcilisi {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================
   GLOBAL ARAMA MOTORU SONUÇ KUTUSU (GOOGLE STYLE)
   ========================================================== */
.search-results-dropdown {
    position: absolute; /* Arama çubuğunun tam altına yapışır */
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--blend-slate); /* Koyu arduvaz arka plan */
    border: 1px solid rgba(163, 175, 155, 0.2);
    border-radius: 15px;
    margin-top: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    max-height: 350px; /* Çok sonuç çıkarsa uzamasın diye sınır */
    overflow-y: auto; /* Taşan sonuçlar için kaydırma çubuğu */
    display: none; /* Başlangıçta gizli */
    z-index: 1000;
    text-align: left;
}

/* Javascript ile içine eklenecek olan linklerin tasarımı */
.search-results-dropdown a {
    display: block;
    padding: 18px 25px;
    color: var(--text-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Alt çizgi */
    transition: all 0.2s ease;
}

.search-results-dropdown a:hover {
    background-color: var(--card-hover); /* Üzerine gelince soft yeşil olur */
    padding-left: 35px; /* Hafif sağa kayar, çok şık durur */
    color: #C2E8D0;
}

/* Linkin altındaki küçük açıklama yazısı */
.search-results-dropdown a span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 5px;
}
/* ==========================================================
   HEDEF VURGULAMA ANİMASYONU (MODERN DALGA EFEKTİ)
   ========================================================== */
/* Javascript tarafından kutuya eklenecek olan class */
.hedef-vurgula {
    /* Animasyon 1.5 saniye sürer ve çok yumuşak bir şekilde kaybolur */
    animation: modernParlama 1.5s ease-out forwards; 
}

/* Kutu boyutunu asla bozmayan, sadece renk ve gölgeyle yapılan dalga efekti */
@keyframes modernParlama {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); /* Etrafında parlak yeşil bir hare başlar */
        border-color: #2ecc71; /* Çerçeve parlak yeşil olur */
        background-color: rgba(46, 204, 113, 0.1); /* Kutu içi çok soft yeşil olur */
    }
    70% {
        box-shadow: 0 0 0 20px rgba(46, 204, 113, 0); /* Hare dışarı doğru büyüyüp şeffaflaşır (Dalga/Ripple) */
        border-color: #2ecc71;
        background-color: rgba(46, 204, 113, 0.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); /* Gölgeler tamamen kaybolur */
        border-color: rgba(163, 175, 155, 0.2); /* Sitenin orijinal soluk yeşil çerçevesine döner */
        background-color: transparent; /* Orijinal şeffaf haline döner */
    }
}
/* ==========================================================
   HESAPLAYICI SAYFASI TASARIMI
   ========================================================== */
.calculator-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 40px 10%;
}

.calc-card {
    background-color: var(--blend-slate);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(163, 175, 155, 0.2);
    transition: transform 0.3s ease;
}

.calc-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-btn);
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.input-group input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--blend-charcoal);
    color: white;
    outline: none;
}

.btn-calc {
    width: 100%;
    padding: 15px;
    background-color: var(--accent-btn);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-calc:hover {
    background-color: var(--card-hover);
}

.result-box {
    margin-top: 25px;
    padding: 20px;
    background: rgba(46, 204, 113, 0.1);
    border-radius: 10px;
    border: 1px dashed var(--accent-btn);
    color: #2ecc71;
    font-weight: bold;
    text-align: center;
}
.btn-calc:active {
    transform: scale(0.95); /* Basınca hafifçe içeri göçer, hissiyatı artırır */
}
nav ul li a.active {
    color: #2ecc71 !important; /* Canlı yeşil yazı */
    border-bottom: 2px solid #2ecc71; /* Altına şık bir çizgi */
    padding-bottom: 5px;
}
/* ==========================================================
   MEGA KARİYER KARTLARI (DETAYLI TASARIM)
   ========================================================== */
.career-mega-container {
    padding: 60px 10%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mega-card {
    background-color: var(--blend-slate);
    border-radius: 30px;
    border: 1px solid rgba(163, 175, 155, 0.2);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.mega-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: #2ecc71;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.mega-card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.icon-circle {
    width: 65px;
    height: 65px;
    background: var(--accent-btn);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
}

.mega-card-header h2 {
    margin: 0;
    font-size: 2rem;
    font-family: var(--font-header);
    color: #ffffff;
}

.mega-card-content {
    padding: 50px;
}

/* Metin ve Görsel Yan Yana Dizilimi */
.info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.info-text h3 {
    color: #2ecc71;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.info-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Görsel Kutuları */
.visual-box {
    height: 200px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: rgba(255,255,255,0.2);
}

.ds-bg { background: linear-gradient(135deg, #2ecc71, #1abc9c); }
.act-bg { background: linear-gradient(135deg, #3498db, #2980b9); }
.bio-bg { background: linear-gradient(135deg, #e74c3c, #c0392b); }

.skills-section h4 {
    margin: 30px 0 15px 0;
    color: white;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.skill-tag {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.tools-list {
    margin-top: 40px;
    background: var(--blend-charcoal);
    padding: 20px 30px;
    border-radius: 15px;
    border-left: 5px solid #2ecc71;
    color: #ffffff;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
    .visual-box {
        display: none; /* Mobilde görseli gizle ki yazıya yer kalsın */
    }
    .mega-card-header {
        padding: 20px;
    }
    .mega-card-content {
        padding: 25px;
    }
}
/* ==========================================================
   İLETİŞİM FORMU TASARIMI
   ========================================================== */
.contact-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.feedback-form .input-group {
    margin-bottom: 25px;
    text-align: left;
}

.feedback-form label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.feedback-form input, 
.feedback-form select, 
.feedback-form textarea {
    width: 100%;
    padding: 15px;
    background-color: var(--blend-charcoal);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: white;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}

.feedback-form input:focus, 
.feedback-form textarea:focus {
    border-color: var(--accent-btn);
}

.feedback-form select {
    cursor: pointer;
}

.feedback-form select option {
    background-color: var(--bg-header);
}