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

html {
    scroll-behavior: smooth; /* Sayfa içi link geçişlerini pürüzsüz ve akıcı yapar */
}

/* ANA TEMİZ ZEMİN (Aşağı kaydırınca görünecek katman) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Aşağı kaydırınca görünecek olan o asil, düz, parıltısız koyu lacivert/siyah renk */
    background-color: #060814;
    color: white;
}

/* --- 1. KATMAN: AÇILIŞ EKRANI (HERO) --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Ekranın tam yüksekliği kadar yer kaplar */
    background: linear-gradient(180deg,
            #5a5a5a 0%,
            #dfe580 35%,
            #1e1f0c 100%);
    overflow: hidden;
    /* Parıltıların bu kutudan dışarı taşmasını engeller */
}

/* --- BAŞLIKTAKİ PEMBE VURGU --- */
.highlight-pink {
    color: #eeea0e; /* Letra temasındaki o tatlı neon pembe renk */
    
    /* Eğer pembe kelimenin arkasında da hafif bir parlama istersen (İsteğe bağlı): */
    text-shadow: 0 0 15px rgba(232, 96, 250, 0.2); 
    font-size: 70px;
}

/* --- VIENNA V YAZISINA ÖZEL RENK GEÇİŞİ (#e860fa ORTALI) --- */
.vienna-text {
    background: linear-gradient(
        to bottom,
        #dddf7f 30%,
        #f0f034 85%,
        #ffe602 100%
    );
    text-shadow: 0 0 15px rgba(239, 241, 64, 0.281); 
    font-size: 70px;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    display: inline-block;

    filter: drop-shadow(0 2px 12px rgba(248, 255, 183, 0.35));
}

/* --- GLOW AYARLARI (SADECE HERO İÇİNDE AKTİF) --- */
.bg-glow {
    position: absolute;
    /* fixed yerine absolute yaptık ki sayfa kayınca yukarıda kalsınlar */
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(140px);
    opacity: 0.20;
}

.bg-glow-white {
    top: 50%;
    left: 50%;
    width: 900px;
    height: 450px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgb(235, 234, 234) 0%, rgba(255, 74, 158, 0) 70%);
}

.bg-glow-blue {
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0) 80%);
    opacity: 0.4;
}

.bg-glow-white2 {
    top: -10%;
    left: -10%;
    width: 900px;
    height: 450px;
    background: radial-gradient(circle, rgb(235, 234, 234) 0%, rgba(255, 74, 158, 0) 70%);
}

.bg-glow-right-bottom {
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(235, 234, 234, 1) 0%, rgba(255, 74, 158, 0) 75%);
    opacity: 0.25;
}

.bg-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.04;
}

/* --- 2. KATMAN: AŞAĞI KAYDIRINCA GELEN DÜZ BÖLÜM --- */
.content-section {
    scroll-margin-top: 70px;
    padding: 100px 20px;
    background-color: #060814;
    /* Tamamen düz, parlama içermeyen temiz katman */
    min-height: 1000px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.container h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

/* --- TOPBAR AYARLARI --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    z-index: 1000;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    padding: 16px 0;
}

.navbar-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.navbar.scrolled {
    background-color: rgba(11, 14, 20, 0.8);
    border-bottom-color: rgba(217, 230, 39, 0.678);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* LOGO VE BUTON TASARIMLARI (DEĞİŞMEDİ) */
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translate(-25px, 2px);
}

.logo-gif {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    filter: drop-shadow(0 0 8px rgba(232, 235, 37, 0.685));
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    color: white;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
}

.brand-sub {
    color: #ecf02a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 35px;
    transform: translate(-3px, 2px);
}

.nav-item {
    color: #d1d5dbd8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-item:hover {
    color: rgb(255, 255, 255);
}

.nav-item.active {
    color: #e4f35d;
}

.dropdown-btn {
    background: none;
    border: none;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: color 0.2s;
}

.dropdown-btn:hover {
    color: white;
}

.arrow-icon {
    width: 16px;
    height: 16px;
}

.discord-btn {
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.2);
    transition: background-color 0.2s, transform 0.2s;
    transform: translate(32px, 2px);
}

.discord-btn:hover {
    background-color: #4752C4;
    transform: scale(1.02);
    transform: translate(32px, -1px);
}

.discord-icon {
    width: 20px;
    height: 20px;
}





/* --- HERO MERKEZ İÇERİK ALANI (ORANTILANDI) --- */
.hero-center-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    height: 100vh;
    padding-top: 20vh;
    /* Logonun yukarı-aşağı dengesi için en ideal oran */
    padding-bottom: 25px;
    /* En alttaki barın ekran çerçevesine tam mesafesi */
}

/* --- MERKEZDEKİ BÜYÜK LOGO (GÜNCELLENDİ) --- */
.hero-main-logo {
    width: 755px;
    height: 460px;
    border-radius: 35%;

    /* İSTEDİĞİN GİBİ: Yazıları logodan iyice uzaklaştırmak için alt boşluğu artırdık */
    margin-bottom: 35px;
    /* Yazıların yukarı sıkışmasını tamamen çözer */

    filter: drop-shadow(0 0 35px rgba(251, 255, 0, 0.65));
    animation: floatAnimation 4s ease-in-out infinite;
}

/* --- YENİLENEN UZUN İNCE ÇİZGİ TASARIMI (LETRA ETKİSİ) --- */
.hero-separator {
    display: block;
    height: 2px;
    width: 450px;
    margin: 20px auto; /* Üstten ve alttan boşluğu sağlama alıyoruz */
    border: none;
    border-radius: 9999px;
    flex-shrink: 0; /* SİHİRLİ DOKUNUŞ: Çizginin flex içinde ezilip kaybolmasını engeller */

    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(240, 250, 96, 0.3) 15%, 
        #fdff6f 50%, 
        rgba(240, 250, 96, 0.3) 85%, 
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(238, 111, 255, 0.4);
}

/* --- SUNUCU İSMİ VE YAZILAR --- */
.hero-title {
    color: white;
    font-size: 70px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; /* Kelimeleri yatayda tam ortalar */
    flex-wrap: wrap;         /* Ekran daralırsa kelime güvenle alt satıra iner */
    gap: 17px;
    margin-top: -30px;
    margin-bottom: -10px;
}

.hero-subtitle {
    color: #d1d5dbbb;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    /* Boşluğu yukarıda <hr> ile yönettiğimiz için sıfırladık */
}

/* --- LOGO SÜZÜLME ANİMASYONU --- */
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    /* Logoyu 10px yukarı kaldırır */
    100% {
        transform: translateY(0px);
    }
}
















/* --- SUNUCU ÖZELLİKLERİ BAR ALANI (DÜZELTİLDİ) --- */
.hero-features-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;

    /* SİHİRLİ DOKUNUŞ: Burayı 'margin-top: 10px;' yerine 'auto' yapıyoruz. 
       Böylece üstteki karmaşa biter, bar otomatik olarak ekranın en dibine sakince kilitlenir */
    margin-top: 43px;
    transform: translate(5px, 0px);

    z-index: 15;
}

/* Her bir özellik (İkon + Yazı) kutusu */
.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* İkon ile yazı arasındaki küçük boşluk */
    color: #cfcfcf;
    /* Orijinal tasarımdaki soft mat gri renk */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* İkonların boyutu ve rengi */
.feature-icon {
    width: 16px;
    height: 16px;
    color: rgb(236, 240, 27);
    /* İkon rengini de gri tonunda eşitliyoruz */
}

/* Aralardaki dikey uzun çizgiler (|) */
.feature-divider {
    color: #0e0d0e;
    /* Çizgilerin biraz daha koyu ve arka planda kalması için */
    font-size: 14px;
    user-select: none;
    /* Kullanıcının bu çizgiyi fareyle seçmesini engeller */
}









/* --- HERO BUTON GRUBU (ORANTILANDI) --- */
.hero-buttons-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    /* "KENDİ HİKAYENİ YAZ" metniyle butonlar arasındaki boşluk */
    z-index: 15;
}

/* Ortak Buton Tasarımı */
.hero-btn {
    text-decoration: none;
    padding: 17px 28px;
    /* Butonların iç genişlik ve yüksekliği */
    border-radius: 10px;
    /* Köşelerin yuvarlaklığı */
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* İkon ile yazı arasındaki boşluk */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* 1. Discord Butonu Tasarımı */
.discord-main-btn {
    background-color: #5865F2;
    /* Orijinal Discord Rengi */
    color: white;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.35);
    /* Hafif mavi/mor parlama gölgesi */
}

.discord-main-btn:hover {
    background-color: #4752C4;
    /* Üzerine gelince biraz koyulaşır */
    transform: translateY(-2px);
    /* Çok hafif yukarı zıplama efekti */
    box-shadow: 0 6px 25px rgba(88, 101, 242, 0.5);
}

/* Discord Butonunun İçindeki İkon */
.btn-icon {
    width: 20px;
    height: 20px;
}

/* 2. Keşfet Butonu Tasarımı */
.explore-btn {
    background-color: rgba(255, 255, 255, 0.05);
    /* Şeffaf koyu zemin */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* İnce şık sınır çizgisi */
}

.explore-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
    /* Üzerine gelince içi biraz daha beyazlaşır */
    border-color: rgba(240, 250, 96, 0.5);
    /* Sınır çizgisi hafif pembeye döner */
    transform: translateY(-2px);
}














/* ==========================================================================
   VIENNA V - ÖZEL REVEAL PEMBE SCROLLBAR TASARIMI (HASTASI OLUNASI AYAR)
   ========================================================================== */

/* 1. Scrollbar Genel Genişliği (Eskisinden 2px daha ince yapıldı) */
::-webkit-scrollbar {
    width: 12px;               /* Tam kıvamında, zarif dikey genişlik */
    height: 12px;              
}

/* 2. Scrollbar Arka Plan Zemini */
::-webkit-scrollbar-track {
    background: #060814;       
}

/* 3. Normal Durum: Çok koyu olmayan, asil bir koyu pembe tonu */
::-webkit-scrollbar-thumb {
    /* Yukarıdan aşağıya soft koyu-orta pembe geçişi */
    background: linear-gradient(180deg, #becc42 0%, #b3d12b 100%); 
    border-radius: 9999px;     
    border: 2px solid #060814; /* Çubuğun formunu koruyan şık iç boşluk */
    
    /* Çubuğun kendi içine hafif, gizemli bir pembe dokunuş */
    box-shadow: inset 0 0 4px rgba(211, 221, 67, 0.253); 
    transition: all 0.2s ease-in-out;
}

/* 4. Hover Durumu: Fare üzerine geldiğinde parıl parıl parlayan neon pembe */
::-webkit-scrollbar-thumb:hover {
    /* Parlak neon pembe geçişi */
    background: linear-gradient(180deg, #e4f35e 0%, #d9db3c 100%); 
    
    /* Dışarıya doğru patlayan efsanevi neon ışığı efekti */
    box-shadow: 0 0 14px rgba(213, 216, 62, 0.85),
                inset 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Firefox Desteği */
@supports (scrollbar-color: auto) {
    html {
        scrollbar-width: thin; 
        scrollbar-color: #ebee3c #060814;
    }
}













/* ==========================================================================
   VIENNA V - MODERN FOOTER TASARIMI (LETRA STİLİ)
   ========================================================================== */

.main-footer {
    background-color: #060814; /* Aşağı kaydırınca gelen asil düz koyu zemin */
    border-top: 2px solid rgba(253, 237, 14, 0.404); /* Üst kısma çok ince tatlı bir pembe sınır çizgisi */
    padding-top: 60px;
    padding-bottom: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 80px;
    padding-bottom: 40px;
}

/* Sütun Ayarları */
.footer-column {
    flex: 1;
    min-width: 180px;
}

/* Logo Sütunu Genişlik Ayarı */
.footer-column.brand-column {
    flex: 1.5;
    min-width: 260px;
}

/* Footer Logo Tasarımı */
.footer-logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo-gif {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 6px;
    filter: drop-shadow(0 0 6px rgba(239, 243, 30, 0.5));
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.f-brand-name {
    color: white;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.f-brand-sub {
    color: #fde508; /* Konsept Sarı */
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 1px;
}

/* Tanıtım Yazısı */
.footer-description {
    color: #9ca3af; /* Soft mat gri yazı */
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 320px;
}

/* Sütun Başlıkları */
.footer-title {
    color: white;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

/* Link Listeleri */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #9ca3af; /* Orijinal gri tonu */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* İkon kullandıysak aradaki boşluk */
}

/* Sosyal medya ikonları için küçük ayar */
.footer-links a i {
    font-size: 14px;
    width: 16px;
}

/* HOVER EFFECT - Üzerine Gelince Canlanma */
.footer-links a:hover {
    color: #edf04d; /* Üzerine gelince Letra pembesine döner */
    padding-left: 4px; /* Çok hafif sağa kayma hareketi ile premium his verir */
}

/* ==========================================================================
   FOOTER ALT TELİF ALANI (COPYRIGHT)
   ========================================================================== */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Gönderdiğin görseldeki o çok ince çizgiyi ekledik */
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright, .footer-managed {
    color: #4b5563; /* Görseldeki gibi daha sönük, arka planda duran asil gri */
    font-size: 12px;
    font-weight: 500;
}

/* Kalp İkonu Parlaması */
.heart-icon {
    color: #ff00c8;
    display: inline-block;
    text-shadow: 0 0 6px rgba(255, 0, 200, 0.6);
}

/* Mobil Cihazlar İçin Uyum (Responsive) */
@media (max-width: 768px) {
    .footer-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}



















/* ==========================================================================
   VIENNA V - DISCORD CTA ALANI TASARIMI
   ========================================================================== */

.discord-cta-section {
    background-color: #060814; /* Tamamen düz temiz zemin */
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cta-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Ana Büyük Discord Kartı */
.discord-card {
    background-color: rgba(15, 23, 42, 0.4); /* Şık yarı şeffaf koyu kart zemini */
    border: 1px solid rgba(250, 240, 96, 0.2); /* Vienna V hafif pembe kenarlık border'ı */
    border-radius: 24px; /* Görseldeki gibi oval modern köşeler */
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Kartın Arkasına Çok Hafif Bir Pembe Parlama Dokunuşu (Göz Yormaz) */
.discord-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(250, 235, 96, 0.08) 0%, rgba(3, 3, 3, 0) 70%);
    pointer-events: none;
}

/* --- SOL TARAF: İÇERİK ALANI --- */
.cta-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Üstteki Küçük Discord Rozeti */
.discord-badge {
    background-color: rgba(88, 101, 242, 0.12);
    color: #5865F2;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    border: 1px solid rgba(88, 101, 242, 0.2);
}

/* Başlık ve Pembe Vurgu */
.cta-heading {
    color: white;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.cta-highlight {
    color: #f8f52b; /* Letra neon pembe rengimiz */
    text-shadow: 0 0 15px rgba(240, 250, 96, 0.3);
}

/* Açıklama Metni */
.cta-text {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 440px;
}

/* Discord'a Katıl Butonu */
.cta-discord-btn {
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.35);
    transition: all 0.2s ease-in-out;
}

.cta-discord-btn:hover {
    background-color: #4752C4;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(88, 101, 242, 0.5);
}

/* --- SAĞ TARAF: SAHTE KANAL LİSTESİ --- */
.cta-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 440px;
}

/* Her Bir Kanal Satırı */
.discord-channel-row {
    background-color: rgba(6, 8, 20, 0.5); /* İç kanalların hafif koyu zemini */
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.discord-channel-row:hover {
    transform: translateX(4px); /* Üzerine gelince sağa doğru esner */
    border-color: rgba(225, 245, 42, 0.25); /* Kenarlığı hafifçe pembeleşir */
}

/* Yuvarlak İkon Kutuları */
.channel-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Görseldeki gibi ikonların farklı soft renk fonları */
.hash-bg { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.voice-bg { background-color: rgba(16, 185, 129, 0.1); color: #10b981; }
.announce-bg { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Kanal Yazı Detayları */
.channel-info h4 {
    color: #e5e7eb;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.channel-info p {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

/* Mavi "YENİ" Rozeti */
.channel-badge.current-new {
    background-color: #5865F2;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: auto; /* Sağa tam yaslar */
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.4);
}

/* Mobil Uyum Düzenlemesi (Responsive) */
@media (max-width: 968px) {
    .discord-card {
        flex-direction: column;
        padding: 40px 30px;
        gap: 40px;
    }
    .cta-left {
        align-items: center;
        text-align: center;
    }
    .cta-text {
        max-width: 100%;
    }
    .cta-right {
        max-width: 100%;
    }
}

/* 🚀 ANA SAYFA İLE BAĞLANTIYI TAMAMEN KOPARAN YENİ DIŞ KATMAN */
.discover-page-wrapper {
    background-color: #191d33; /* Letra keşfet sayfasındaki o derin, pürüzsüz koyu lacivert tonu */
    width: 100%;
    min-height: 600px; /* İstediğin o 500-600px yükseklikteki devasa bağımsız alan hissi */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Üst taraftaki içeriklerden tamamen ayrı bir dünya hissi yaratmak için ince bir gölge */
    box-shadow: inset 0 20px 30px -20px rgba(0, 0, 0, 0.7); 
}

/* İçerideki section'ın arka planını temizleyip esnetiyoruz */
.discord-cta-section {
    background: transparent !important; /* Dış katmanın rengini kullansın diye sıfırladık */
    padding: 40px 20px;
    width: 100%;
}








/* ==========================================================================
   VIENNA V - CONTENT SECTION VE SİSTEM KARTLARI TASARIMI
   ========================================================================== */

.content-section {
    background-color: #03050c; /* Arka planı derinleştiren mat ana siyah/koyu ton */
    padding: 100px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.content-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 90px; /* Üst sayaçlar ile alt alan arasındaki o şık boşluk */
}

/* --- ÜST ALAN: İSTATİSTİK SAYAÇ KARTLARI (GRID) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-card {
    background-color: rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(250, 247, 96, 0.342); /* Üzerine gelince Vienna pembesi kenarlık parlaması */
}

/* Sayaçların Sayı ve Etiketleri */
.stat-number {
    color: white;
    font-size: 36px;
    font-weight: 800;
    margin: 14px 0 6px 0;
    letter-spacing: 0.5px;
}

.stat-label {
    color: #6b7280;
    font-size: 13.5px;
    font-weight: 500;
}

/* --- ALT ALAN: ASİMETRİK GENEL GRID --- */
.about-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 60px;
    align-items: center;
}

/* Sol Taraf: Tanıtım Yazıları */
.about-info-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-badge {
    background: rgba(223, 233, 132, 0.274);
    color: #faf760;
    border: 1px solid rgba(240, 243, 45, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.about-title {
    color: white;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

/* "Nedir?" Yazısını Letra Mavisi / Vienna Pembesi Geçişli Yapar */
.about-gradient-text {
    background: linear-gradient(to right, #3b82f6, #e6f51a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-desc {
    color: #9ca3af;
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 480px;
}

/* Sağ Taraf: 4'lü Özellik Kart Blokları */
.features-grid-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card {
    background-color: rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.08);
}

.f-card-title {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin: 16px 0 10px 0;
}

.f-card-desc {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

/* --- ORTAK KULLANILAN RENKLİ İKON DAİRELERİ --- */
.stat-icon-wrapper, .f-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px; /* Modern karemsi-oval köşeler */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Görseldeki Orijinal Letra Renk Kimlikleri */
.s-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.s-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.s-yellow { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.s-red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.s-purple { background: rgba(221, 130, 233, 0.1); color: #7e1da5; }
.s-aqua { background: rgba(139, 233, 236, 0.1); color: #03e9fa; }

/* --- RESPONSIVE TASARIM (MOBİL UYUM) --- */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .about-main-grid { grid-template-columns: 1fr; gap: 50px; }
    .about-info-left { align-items: center; text-align: center; }
    .about-desc { max-width: 100%; }
}

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
    .features-grid-right { grid-template-columns: 1fr; }
}



















/* ==========================================================================
   VIENNA V - WIKI KATEGORİLERİ TASARIMI
   ========================================================================== */

.wiki-categories-section {
    background-color: #070913; /* Keşfet alanı gibi pürüzsüz derin koyu lacivert/siyah */
    padding: 90px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.wiki-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* --- BAŞLIK ALANI --- */
.wiki-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wiki-main-title {
    color: white;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* "Kategorileri" Kelimesini Mavi-Pembe Gradyan Yapar */
.wiki-gradient-text {
    background: linear-gradient(to right, #f3f63b, #44ddf8,#f7fa60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wiki-subtitle-text {
    color: #6b7280; /* Görseldeki soft mat gri tonu */
    font-size: 15px;
    line-height: 1.6;
    max-width: 550px;
}

/* --- GRID VE KART YAPILARI --- */
.wiki-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Yan yana tam 2 eşit sütun */
    gap: 24px;
}

.wiki-card {
    background-color: rgba(15, 23, 42, 0.25); /* İçerik kartı zemin rengi */
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* İçerikleri dikeyde ortalar */
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* Kart Hover Efekti */
.wiki-card:hover {
    transform: translateY(-2px);
    border-color: rgba(221, 241, 37, 0.418); /* Kenarlıklar hafifçe pembe parlar */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.wiki-card-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

/* Bilgi Metinleri */
.wiki-card-info h3 {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wiki-card-info p {
    color: #4b5563; /* Açıklamaların o sönük asil gri tonu */
    font-size: 13px;
    line-height: 1.5;
    padding-right: 15px;
}

/* Sağ Traftaki Sayı Rozetleri (Badge) */
.wiki-count-badge {
    background-color: rgba(30, 41, 59, 0.5); /* Görseldeki gibi soft koyu kapsül fona sahip */
    color: #86878a;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.02);
    align-self: center; /* Sağda tam ortada çakılı durması için */
}

/* --- İKON KUTULARI VE ARKA PLAN IŞIKLARI --- */
.wiki-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0; /* İkon kutusunun daralmasını önler */
}

/* Letra Renk Paleti ve Glow (Görseldeki gibi ikonların arkasına hafif neon parlama verdik) */
.w-blue { 
    background: rgba(59, 130, 246, 0.15); color: #3b82f6; 
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.w-green { 
    background: rgba(16, 185, 129, 0.15); color: #10b981; 
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}
.w-yellow { 
    background: rgba(245, 158, 11, 0.15); color: #f59e0b; 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}
.w-red { 
    background: rgba(239, 68, 68, 0.15); color: #ef4444; 
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

/* --- MOBIL UYUM --- */
@media (max-width: 968px) {
    .wiki-grid {
        grid-template-columns: 1fr; /* Mobilde kartlar alt alta tek sıra olur */
        gap: 16px;
    }
    .wiki-main-title { font-size: 32px; }
}

















/* ==========================================================================
   VIENNA V - PREMIUM MODERN DROPDOWN TASARIMI
   ========================================================================== */

/* Dropdown'ın bağlı olduğu ana liste elemanı */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Tetikleyici Link (Wiki Yazısı) */
.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Küçük Ok İkonu ve Animasyonu */
.dropdown-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

/* 🚀 YENİ NESİL MODERN MENÜ KUTUSU */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px); /* Topbardan hafif aşağıda süzülerek başlar */
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    
    /* Premium Cam Efekti (Glassmorphism) */
    background: linear-gradient(145deg, rgba(26, 22, 44, 0.9), rgba(20, 24, 46, 0.95)); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Şık Gradyan Kenarlık İllüzyonu */
    border: 1px solid rgba(241, 245, 16, 0.582);
    border-radius: 16px;
    
    padding: 12px;
    min-width: 200px;
    list-style: none;
    margin: 0;
    
    /* Gizleme Elementleri */
    opacity: 0;
    visibility: hidden;
    
    /* Derinlik katan gölge ve soft pembe neon parlama */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 
                0 0 30px rgba(251, 255, 42, 0.05);
                
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

/* Fareyle üzerine gelindiğinde tetiklenen yumuşak açılış efekti */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Fareyle üzerine gelindiğinde ok ikonunun ters dönmesi */
.nav-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
    color: #fad60b;
}

/* Menünün üstündeki boşlukta farenin kaybolmasını önleyen görünmez köprü */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

/* 🚀 MENÜ İÇİNDEKİ BAĞLANTILARIN (LİNKLERİN) STİLİ */
.dropdown-menu li {
    position: relative;
    margin-bottom: 4px;
}

.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.dropdown-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    color: #a3aed0 !important; /* Soft okunabilir gri */
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

/* 🚀 HOVER EFEKTİ: Linkin üzerine gelindiğinde */
.dropdown-menu li a:hover {
    color: #ffffff !important;
    /* Vienna pembesinden çok hafif şeffaf bir arka plan */
    background: rgba(245, 241, 31, 0.226) !important;
    padding-left: 22px !important; /* Sağa doğru pürüzsüz esneme hareketi */
}

/* Linkin solunda beliren küçük gizli dikey neon çizgi */
.dropdown-menu li a::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, #f1ff2a, #f1ff2a);
    border-radius: 4px;
    opacity: 0;
    transition: all 0.25s ease;
}

.dropdown-menu li a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1); /* Çizgi yukarıdan aşağı doğru uzayarak belirir */
}