/* =========================================
   GENEL AYARLAR
   ========================================= */
html, body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #10253b; 
    color: #d1e8ff; 
    width: 100%;
    overflow-x: hidden; /* Hayati Kod: Yatay kaydırma çubuğunu ve taşmaları kesinlikle engeller */
}

header {
    background: linear-gradient(135deg, #1a3c61 0%, #3a83c7 45%, #4ea1f0 50%, #3a83c7 55%, #1a3c61 100%);
    color: white;
    text-align: center;
    padding: 25px 0;
    box-shadow: inset 0px 2px 5px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid #0b1d33;
}

nav {
    display: flex;
    justify-content: center;
    background-color: #0b1d33; 
    border-bottom: 2px solid #3a83c7;
}

nav a {
    color: #d1e8ff;
    padding: 15px 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

nav a:hover {
    background-color: #1a3c61;
    color: #ffffff;
    box-shadow: inset 0 -4px 0 #4ea1f0; 
}

main {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Karşılama Alanı - Karanlık Tema */
/* =========================================
   GELİŞTİRİLMİŞ KARŞILAMA (HERO) ALANI
   ========================================= */

.hero-alani {
    /* Merkezden yayılan fiber ışıltısı efekti */
    background: radial-gradient(circle at center, #1e3f66 0%, #17304d 100%);
    padding: 60px 30px; /* İç boşluğu artırarak alanı ferahlattık */
    border-radius: 12px;
    text-align: center;
    /* Hem dışarıya siyah gölge, hem içeriye mavi bir ışık süzmesi eklendi */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4), inset 0 0 20px rgba(78, 161, 240, 0.1); 
    margin-bottom: 40px;
    border: 1px solid #3a83c7; 
}

.hero-alani h2 {
    color: #ffffff; /* Başlık rengi beyaza döndü */
    font-size: 2.3em; /* Başlık biraz daha vurgulu hale getirildi */
    margin-top: 0;
    margin-bottom: 15px;
    /* Başlığın etrafına fiber optik ışığı gibi parlayan bir efekt eklendi */
    text-shadow: 0 0 15px rgba(78, 161, 240, 0.8); 
}

.hero-alani p {
    font-size: 1.1em;
    color: #d1e8ff;
    max-width: 650px; /* Metnin bir satırda çok uzaması engellendi (okunabilirliği artırır) */
    margin: 0 auto 30px auto; 
    line-height: 1.6; /* Satır aralıkları açıldı */
}

/* =========================================
   GELİŞTİRİLMİŞ AKSİYON BUTONU
   ========================================= */

.aksiyon-butonu {
    display: inline-block;
    padding: 15px 35px;
    /* Turuncudan koyu turuncuya şık bir renk geçişi (gradient) */
    background: linear-gradient(135deg, #ff9900, #e67e22); 
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 30px; /* Modern ve teknolojik tam yuvarlak köşeler */
    transition: all 0.3s ease;
    /* Butonun etrafına kendi renginde (turuncu) parlayan gölge eklendi */
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4); 
}

.aksiyon-butonu:hover {
    transform: translateY(-3px); /* Fareyle üzerine gelince hafifçe havaya kalkar */
    box-shadow: 0 8px 25px rgba(255, 153, 0, 0.6); /* Havaya kalkınca parlama artar */
    background: linear-gradient(135deg, #e67e22, #d35400); /* Renk tonu hafifçe koyulaşır */
}
.aksiyon-butonu:hover {
    background-color: #e68a00;
}

/* =========================================
   BUTON GRUBU VE İKİNCİL (ŞEFFAF) BUTONLAR
   ========================================= */

.buton-grubu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Butonlar arasındaki boşluk */
    margin-top: 30px;
    flex-wrap: wrap; /* Ekrana (telefona) sığmadığında otomatik olarak alt alta geçirir */
}

/* Ana butonun dış boşluğunu sıfırlıyoruz ki diğerleriyle tam hizalansın */
.buton-grubu .aksiyon-butonu {
    margin-top: 0; 
}

/* Yeni Şeffaf/Neon Çerçeveli Butonlar */
.ikincil-buton {
    display: inline-block;
    padding: 13px 25px; /* Çerçeve payı bırakılarak boyutlandırıldı */
    background: transparent; /* İçi boş (şeffaf) buton */
    color: #4ea1f0; /* Parlak mavi metin rengi */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 30px; /* Diğer butonla aynı modern yuvarlaklık */
    border: 2px solid #4ea1f0; /* Sadece dış çerçevesinde mavi renk var */
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(78, 161, 240, 0.2);
}

.ikincil-buton:hover {
    background-color: rgba(78, 161, 240, 0.1); /* Üzerine gelince içi çok hafif mavi neonla dolar */
    transform: translateY(-3px); /* Turuncu buton gibi havaya kalkar */
    box-shadow: 0 8px 20px rgba(78, 161, 240, 0.4);
    color: #ffffff; /* Yazı rengi beyaza parlar */
    border-color: #7ab8f5; /* Çerçeve daha da parlak bir mavi olur */
}

/* İstatistik Alanı */
.istatistik-alani {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #0056b3, #004494);
    color: white;
    padding: 30px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3), 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #003366;
}
.istatistik-kutu {
    text-align: center;
}
.istatistik-kutu .sayi {
    font-size: 2.5em; /* Sayıları biraz daha büyüttük */
    margin: 0 0 5px 0;
    color: #ffffff; /* Ana rengi beyaza çektik ki parlama belli olsun */
    /* Mavi renkte dışa doğru yayılan 3 katmanlı neon parlama efekti */
    text-shadow: 0 0 10px rgba(78, 161, 240, 0.8), 
                 0 0 20px rgba(78, 161, 240, 0.5), 
                 0 0 30px rgba(78, 161, 240, 0.3);
}
.istatistik-kutu h4 {
    margin: 10px 0 5px 0;
    font-size: 1.1em;
    color: #ffffff;
}

.istatistik-kutu p {
    margin: 0 auto;
    font-size: 0.9em;
    font-weight: 400;
    color: #d1e8ff;
    line-height: 1.5;
    max-width: 220px; /* Metnin çok uzayıp yan kutuya girmesini engeller */
}

/* Yan Yana Özellik Kutuları - Karanlık Tema */
.ozellikler-kapsayici {
    display: flex; 
    justify-content: space-between;
    gap: 20px; 
    margin-bottom: 30px;
}
.ozellik-kutu {
    background-color: #17304d; 
    padding: 25px 20px; /* İç boşluğu biraz artırıp ferahlattık */
    border-radius: 12px; /* Köşeleri başlık alanıyla uyumlu şekilde daha oval yaptık */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    flex: 1; 
    text-align: center;
    /* Kutunun tüm kenarlarına sönük bir mavi çizgi ekliyoruz */
    border: 1px solid #2a5a8c;
    border-top: 4px solid #2a5a8c; 
    transition: all 0.4s ease; /* Efekt süresini biraz uzatarak daha "smooth" yaptık */
}

.ozellik-kutu:hover {
    transform: translateY(-10px);
    /* Siyah gölgenin yanına, dışarı taşan mavi bir parlama ekledik */
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), 0 0 20px rgba(78, 161, 240, 0.4);
    /* Fareyle üzerine gelince kenarlıklar parlak fiber mavisine dönüşür */
    border-color: #4ea1f0;
}

.ozellik-kutu h3 {
    margin-top: 0;
    color: #ffffff; /* Siyah yerine beyaz başlık */
}

/* İçerik Kutusu Genel - Karanlık Tema */
.icerik-kutusu {
    background-color: #17304d; /* Beyaz yerine koyu arka plan */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    margin-bottom: 30px;
    border: 1px solid #2a5a8c;
}

.icerik-kutusu h2 {
    color: #4ea1f0; /* İçerik başlıkları için parlak mavi */
}

/* =========================================
   SSS (AKORDEON) ALANI - NEON TEMA
   ========================================= */

.sss-kutu {
    background-color: #17304d; /* Kutunun dış rengi */
    border: 1px solid #2a5a8c;
    border-radius: 8px; /* Köşeleri yumuşattık */
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Kutuya fareyle gelince dış çerçeve ve gölge parlar */
.sss-kutu:hover {
    border-color: #4ea1f0;
    box-shadow: 0 4px 15px rgba(78, 161, 240, 0.2);
}

.sss-kutu summary {
    font-weight: 600;
    font-size: 1.1em;
    color: #ffffff;
    padding: 18px 20px;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.3s ease;
    outline: none; /* Tıkladığınızda oluşan çirkin siyah çizgiyi kaldırır */
}

/* Soruya fareyle gelince yazı neon maviye döner */
.sss-kutu summary:hover {
    color: #4ea1f0;
}

/* Kutu AÇILDIĞINDA başlığın parlaması ve alt çizgi oluşması */
.sss-kutu[open] summary {
    color: #4ea1f0;
    text-shadow: 0 0 10px rgba(78, 161, 240, 0.5);
    border-bottom: 1px solid #2a5a8c;
    background-color: #1a3c61;
}

/* Cevap alanı tasarımı (Açıldığında iç içe geçmiş derinlik hissi verir) */
.sss-cevap {
    padding: 20px;
    color: #d1e8ff;
    line-height: 1.7;
    background-color: #10253b; /* İçeriğin zemini daha karanlık yapılarak derinlik sağlandı */
}

/* Footer (Alt Bilgi) */
footer {
    text-align: center;
    padding: 15px 10px;
    background-color: #0b1d33; 
    border-top: 1px solid #3a83c7; 
    color: #d1e8ff;
    position: relative;
    bottom: 0;
    width: 100%;
}
/* =========================================
   ALT SAYFALAR (VİDEOLAR VE TERİMLER)
   ========================================= */

/* Eğitim Videoları Alanı */
.video-kutu {
    background-color: #10253b; /* Kutunun içini ana arka planla aynı yapıp derinlik katıyoruz */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #2a5a8c;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}
.video-kutu:hover {
    border-color: #4ea1f0;
    box-shadow: 0 0 15px rgba(78, 161, 240, 0.2);
}
.video-kutu h3 {
    color: #ffffff;
    margin-top: 0;
    border-bottom: 1px solid #2a5a8c;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Videoları telefona uydurmak için (Responsive Iframe) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Geniş Ekran Oranı */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Fiber Terimleri Alanı */
.terim-kutu {
    background-color: #10253b;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4ea1f0; /* Sol tarafa parlak fiber çizgisi */
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.terim-kutu:hover {
    transform: translateX(10px); /* Üzerine gelince neon ışığı gibi parlayıp hafif sağa kayar */
    background-color: #1a3c61;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
}
.terim-kutu h3 {
    color: #4ea1f0;
    margin-top: 0;
    margin-bottom: 10px;
}
.terim-kutu p {
    margin: 0;
    color: #d1e8ff;
    line-height: 1.5;
}
/* =========================================
   İLETİŞİM FORMU - NEON TEMA
   ========================================= */

.iletisim-formu {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Kutular arası boşluk */
}

.form-grup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-grup label {
    font-weight: 600;
    color: #4ea1f0; /* Parlak mavi başlıklar */
    font-size: 0.95em;
}

/* Girdi kutularının (Input, Select, Textarea) genel tasarımı */
.form-grup input,
.form-grup select,
.form-grup textarea {
    background-color: #10253b; /* Kutuların içini karanlık yaptık */
    border: 1px solid #2a5a8c; /* İnce mavi çerçeve */
    color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    transition: all 0.3s ease;
    outline: none; /* Varsayılan çirkin tarayıcı çizgisini kaldırır */
}

/* Kutulara tıklandığında (Focus) oluşan neon parlama efekti */
.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    border-color: #4ea1f0;
    box-shadow: 0 0 15px rgba(78, 161, 240, 0.3);
    background-color: #17304d; /* Tıklanan kutunun içi hafif aydınlanır */
}

.form-grup input::placeholder,
.form-grup textarea::placeholder {
    color: #5c85b5; /* Kutu içi silik bilgilendirme yazılarının rengi */
}

/* Form içindeki Dropdown (Açılır Menü) okunun görünümü */
.form-grup select {
    cursor: pointer;
    appearance: none; /* Standart işletim sistemi görünümünü siler */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234ea1f0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

/* Butonun formun altına tam oturması için */
.aksiyon-butonu.tam-genislik {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    margin-top: 10px;
}
/* =========================================
   MÜŞTERİ YORUMLARI (SLIDER) ALANI
   ========================================= */

.yorumlar-alani {
    text-align: center;
    margin-bottom: 40px;
}

.yorumlar-alani h2 {
    color: #4ea1f0;
    margin-bottom: 5px;
}

.yorumlar-alani > p {
    color: #d1e8ff;
    margin-bottom: 25px;
}

.slider-kapsayici {
    position: relative;
    display: flex;
    align-items: center;
}

/* Yorum Kartlarının Dizildiği Şerit */
.slider-icerik {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Taşanları gizler, yatay kaydırma açar */
    scroll-snap-type: x mandatory; /* Kartların ekranda tam ortalanarak durmasını sağlar */
    scroll-behavior: smooth; /* JavaScript ile tıklandığında yumuşakça kayar */
    padding: 15px 5px; /* Kartların parlama gölgelerinin kesilmemesi için boşluk */
    scrollbar-width: none; /* Firefox'ta çubuğu gizler */
}

/* Chrome/Safari için alt kaydırma çubuğunu gizler (sadece butonlarla kontrol edilsin diye) */
.slider-icerik::-webkit-scrollbar {
    display: none;
}

/* Tekil Yorum Kutusu */
.yorum-kutu {
    flex: 0 0 100%; /* Telefondaysa tek kart ekranı kaplar */
    background-color: #17304d;
    border: 1px solid #2a5a8c;
    border-radius: 12px;
    padding: 30px 20px;
    box-sizing: border-box;
    scroll-snap-align: center; /* Kart tam ortaya oturur */
    transition: all 0.3s ease;
    text-align: center;
}

/* Bilgisayar ekranlarında yan yana 2 kart gösterecek ayar */
@media (min-width: 768px) {
    .yorum-kutu {
        flex: 0 0 calc(50% - 10px); 
    }
}

.yorum-kutu:hover {
    border-color: #ff9900; /* Yıldızlarla uyumlu turuncu parlama */
    box-shadow: 0 5px 20px rgba(255, 153, 0, 0.15);
    transform: translateY(-5px);
}

.yildizlar {
    color: #ff9900;
    font-size: 1.6em;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.yorum-metni {
    color: #d1e8ff;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.yorum-yazar {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

/* Sağ ve Sol Kaydırma Butonları */
.slider-buton {
    background-color: #1a3c61;
    color: #4ea1f0;
    border: 2px solid #2a5a8c;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2em;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-buton:hover {
    background-color: #4ea1f0;
    color: white;
    border-color: #4ea1f0;
    box-shadow: 0 0 15px rgba(78, 161, 240, 0.5);
}

.slider-buton.sol {
    left: -15px; /* Kutusunun dışına taşırarak tam merkezde tutar */
}

.slider-buton.sag {
    right: -15px;
}
/* =========================================
   MOBİL UYUMLULUK (RESPONSIVE TASARIM) KODLARI
   ========================================= */

@media (max-width: 768px) {
    /* 1. Menüyü Alt Alta Diz */
    nav {
        flex-direction: column; /* Yan yana dizilimi iptal edip yukarıdan aşağıya dizer */
    }
    nav a {
        text-align: center;
        padding: 12px;
        border-bottom: 1px solid #1a3c61; /* Linkler arasına ince çizgi çeker */
    }
    nav a:last-child {
        border-bottom: none; /* Son linkin altındaki çizgiyi kaldırır */
    }

    /* 2. İstatistikleri Alt Alta Diz */
    .istatistik-alani {
        flex-direction: column;
        gap: 25px; /* Kutular alt alta geldiğinde aralarına boşluk bırakır */
        padding: 20px;
    }

    /* 3. Özellik Kutularını Alt Alta Diz */
    .ozellikler-kapsayici {
        flex-direction: column;
    }
    
    /* 4. Telefondaki Taşmaları Önlemek İçin Ana Alanı Daralt */
    main {
        padding: 0 15px;
    }

    /* 5. Büyük Başlıkları Telefona Göre Küçült */
    .hero-alani h2 {
        font-size: 1.5em;
    }
}

/* =========================================
   KAYDIRMA ANİMASYONLARI (SCROLL REVEAL)
   ========================================= */

.kaydirma-animasyonu {
    opacity: 0; /* Başlangıçta tamamen şeffaf (görünmez) */
    transform: translateY(50px); /* Kendi konumundan 50 piksel aşağıda başlar */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8 saniyede yumuşakça yerine gelir */
}

/* JavaScript bu 'aktif' sınıfını eklediğinde öge görünür olur */
.kaydirma-animasyonu.aktif {
    opacity: 1;
    transform: translateY(0); /* Kendi orijinal konumuna oturur */
}
/* =========================================
   SABİT (YÜZÜCÜ) BUTONLAR - WHATSAPP & YUKARI ÇIK
   ========================================= */

.sabit-butonlar {
    position: fixed;
    bottom: 25px;
    right: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999; /* Butonların tüm içeriklerin (resimlerin, yazıların) üstünde kalmasını sağlar */
}

/* Her iki butonun ortak ayarları */
.whatsapp-butonu, .yukari-cik-butonu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%; /* Tam yuvarlak yapar */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
    border: none;
    outline: none;
}

/* WhatsApp Butonu Tasarımı (Neon Yeşil) */
.whatsapp-butonu {
    background-color: #25D366;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}
.whatsapp-butonu:hover {
    transform: scale(1.1); /* Fareyle gelince hafifçe büyür */
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.8);
    background-color: #20b858;
}

/* Yukarı Çık Butonu Tasarımı (Neon Mavi) */
.yukari-cik-butonu {
    background-color: #10253b;
    border: 2px solid #4ea1f0;
    color: #4ea1f0;
    box-shadow: 0 0 15px rgba(78, 161, 240, 0.3);
    /* Başlangıçta gizli (şeffaf ve aşağıda) durur */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* JS tarafından eklendiğinde yavaşça beliren animasyon */
.yukari-cik-butonu.goster {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yukari-cik-butonu:hover {
    background-color: #4ea1f0;
    color: white;
    box-shadow: 0 0 25px rgba(78, 161, 240, 0.8);
}
/* =========================================
   MİNİ TEST ALANI - NEON TEMA
   ========================================= */

.mini-test-alani {
    text-align: center;
    margin-bottom: 50px;
    /* Kutunun iç zeminini hafifçe farklı bir lacivert yaptık ki öne çıksın */
    background: linear-gradient(145deg, #10253b, #152d47);
    border: 2px dashed #2a5a8c; /* Kesik çizgili şık dış hat */
}

.test-kapsayici {
    margin-top: 30px;
    min-height: 180px;
    position: relative;
}

/* Sorular ve sonuç ekranı başlangıçta gizlidir */
.test-soru, .test-sonuc {
    display: none;
    animation: asagidanGel 0.5s ease-out; /* Görünürken aşağıdan yumuşakça gelir */
}

/* JavaScript ile 'aktif' sınıfı eklendiğinde görünür olur */
.test-soru.aktif, .test-sonuc.aktif {
    display: block;
}

.test-secenekler {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap; /* Telefonda butonları alt alta atar */
}

/* Test Şıklarının (Butonların) Tasarımı */
.test-buton {
    background-color: transparent;
    color: #4ea1f0;
    border: 2px solid #4ea1f0;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

.test-buton:hover {
    background-color: #4ea1f0;
    color: white;
    box-shadow: 0 0 15px rgba(78, 161, 240, 0.5);
    transform: translateY(-3px);
}

/* Test Sonuç Kutusu (Turuncu Neon Konsept) */
.test-sonuc {
    background-color: #1a3c61;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #ff9900;
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.2);
}

.test-sonuc h3 {
    color: #ff9900;
    font-size: 1.8em;
    margin-top: 0;
    text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
}

.test-sonuc p {
    font-size: 1.1em;
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Yumuşak geçiş animasyonu */
@keyframes asagidanGel {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   AÇILIŞ ANİMASYONU (PRELOADER)
   ========================================= */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ekranın %100'ünü kaplar */
    background-color: #0a1726; /* Sitenin zemininden bir tık daha koyu derin bir lacivert */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Menü ve butonlar dahil her şeyin üstünde olmasını sağlar */
    transition: opacity 0.8s ease, visibility 0.8s ease; /* Kaybolurken yumuşakça saydamlaşır */
}

/* JavaScript ile 'gizle' sınıfı eklendiğinde preloader görünmez olur */
.preloader.gizle {
    opacity: 0;
    visibility: hidden;
}

/* Dönen Işık Kümesi (Spinner) Tasarımı */
.fiber-isik {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid transparent;
    /* Çemberin üstü mavi, altı turuncu dönerek siber bir hissiyat verir */
    border-top-color: #4ea1f0;
    border-bottom-color: #ff9900;
    box-shadow: 0 0 20px rgba(78, 161, 240, 0.6), inset 0 0 20px rgba(255, 153, 0, 0.4);
    animation: donmeEfekti 1s linear infinite; /* Durmaksızın döner */
    margin-bottom: 20px;
}

/* "Işık Hızına Geçiliyor..." Yazısı */
.preloader p {
    color: #4ea1f0;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(78, 161, 240, 0.5);
    animation: nefesAlma 1.5s ease-in-out infinite; /* Yazı ritmik olarak parlayıp söner */
}

/* Animasyonların Anahtarları (Keyframes) */
@keyframes donmeEfekti {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes nefesAlma {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* =========================================
   İNTERAKTİF KARŞILAŞTIRMA TABLOSU
   ========================================= */

.tablo-alani {
    text-align: center;
    margin-bottom: 50px;
}

.tablo-alani h2 {
    color: #4ea1f0;
}

/* Tablonun telefonda ekrandan taşmasını engeller ve yatay kaydırma çubuğu ekler */
.tablo-sarmalayici {
    overflow-x: auto; 
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.kiyas-tablosu {
    width: 100%;
    border-collapse: collapse; /* Hücreler arasındaki çift çizgileri tek çizgiye indirir */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    min-width: 600px; /* Telefonlarda tablonun çok sıkışmasını engeller */
}

/* Tüm tablo hücrelerinin (Başlık ve İçerik) genel ayarları */
.kiyas-tablosu th, .kiyas-tablosu td {
    padding: 18px 15px;
    border: 1px solid #2a5a8c;
    color: #d1e8ff;
    transition: background-color 0.3s ease;
}

/* Tablonun en üst (Başlık) satırı */
.kiyas-tablosu th {
    background-color: #1a3c61;
    color: #4ea1f0;
    font-weight: 700;
    font-size: 1.1em;
}

/* Satırların üzerine gelince (Hover) oluşan yatay parlama */
.kiyas-tablosu tbody tr:hover td {
    background-color: #17304d;
}

/* --- FİBER SÜTUNU ÖZEL VURGULARI (NEON) --- */

.fiber-sutun-baslik {
    background-color: #ff9900 !important; 
    color: #10253b !important;
    text-shadow: none;
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.5);
    border-color: #ff9900 !important;
}

.fiber-sutun-hucre {
    font-weight: 700;
    color: #ff9900 !important;
    background-color: rgba(255, 153, 0, 0.05); /* Fiber sütununun zeminini çok hafif turuncu yapar */
}

/* Satırın üzerine gelindiğinde, Fiber hücresinin daha fazla parlaması */
.kiyas-tablosu tbody tr:hover .fiber-sutun-hucre {
    background-color: rgba(255, 153, 0, 0.15);
    box-shadow: inset 0 0 15px rgba(255, 153, 0, 0.2);
}

/* =========================================
   GECE / GÜNDÜZ MODU BUTONU VE GÜNDÜZ TEMASI
   ========================================= */

/* Menüdeki Tema Butonunun Tasarımı */
.tema-butonu {
    background: transparent;
    border: 1px solid #4ea1f0;
    color: #4ea1f0;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin-left: 15px;
    transition: all 0.3s ease;
}

.tema-butonu:hover {
    background: #4ea1f0;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(78, 161, 240, 0.5);
}

/* --- GÜNDÜZ MODU (.light-mode) AKTİF OLDUĞUNDA DEĞİŞECEK YERLER --- */

body.light-mode {
    background-color: #f4f7f6; /* Ferah açık gri/beyaz zemin */
    color: #333333; /* Koyu gri okunabilir metinler */
}

/* Kutuların içini beyaz, çerçevelerini açık gri yapıyoruz */
body.light-mode .icerik-kutusu, 
body.light-mode .sss-kutu, 
body.light-mode .yorum-kutu,
body.light-mode .test-sonuc {
    background-color: #ffffff;
    border-color: #d1d9e6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Başlıkları koyu lacivert yapıyoruz ki belli olsunlar */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode .sayi,
body.light-mode .yorum-yazar {
    color: #10253b; 
}

/* Paragraf metinleri */
body.light-mode p, 
body.light-mode .yorum-metni, 
body.light-mode .sss-cevap {
    color: #555555;
}

/* SSS cevapları ve terim kutularının zemini çok hafif gri */
body.light-mode .sss-cevap, 
body.light-mode .terim-kutu {
    background-color: #f8fafd;
    border-color: #d1d9e6;
}

/* Karşılaştırma tablosunun gündüz modu renkleri */
body.light-mode .kiyas-tablosu th {
    background-color: #e2e8f0;
    color: #10253b;
}

body.light-mode .kiyas-tablosu td {
    border-color: #d1d9e6;
    color: #333333;
}

/* =========================================
   CANLI ARAMA ÇUBUĞU - NEON TEMA
   ========================================= */

.arama-kutusu {
    margin: 25px 0 40px 0;
    display: flex;
    justify-content: center;
}

.arama-kutusu input {
    width: 100%;
    max-width: 600px;
    padding: 16px 25px;
    border-radius: 30px; /* Modern yuvarlak hatlar */
    border: 2px solid #2a5a8c;
    background-color: #10253b;
    color: #ffffff;
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    outline: none;
    text-align: center; /* Yazıyı ortadan başlatır */
}

/* Kutunun içine tıklanınca oluşan neon parlama */
.arama-kutusu input:focus {
    border-color: #4ea1f0;
    box-shadow: 0 0 20px rgba(78, 161, 240, 0.4);
    background-color: #17304d;
}

.arama-kutusu input::placeholder {
    color: #5c85b5;
}

/* Gündüz Modu İçin Arama Çubuğu Ayarları */
body.light-mode .arama-kutusu input {
    background-color: #ffffff;
    border-color: #d1d9e6;
    color: #333333;
}

body.light-mode .arama-kutusu input:focus {
    border-color: #4ea1f0;
    box-shadow: 0 0 20px rgba(78, 161, 240, 0.2);
}