/* =========================================
   1. CORE SETTINGS & VARIABLES
   ========================================= */
/* En üstteki import satırını değiştir: */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* --- Premium Renk Paleti (RED EDITION) --- */
    --bg-body: #000000;
    --bg-card: #0f0f0f;
    --bg-card-hover: #001314; /* Kart üzerine gelince çok hafif kırmızımsı siyah */
    
    --text-main: #ffffff;
    --text-muted: #808080;
    
    /* Premium Accent Colors - KIRMIZI TONLARI */
    --accent-bronze: #09d6e5;       /* Ana Kırmızı (Netflix Kırmızısı gibi) */
    --accent-bronze-glow: rgba(9, 229, 229, 0.4); /* Kırmızı Parlama */
    --accent-gold: #4beaff;         /* Açık Kırmızı / Vurgu */
    --accent-dark: #001a18;         /* Çok koyu kırmızı/siyah */
    
    /* --- Fizik & Animasyon --- */
    --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-base: 0.4s var(--ease-smooth);
    
    /* --- Yapısal Ayarlar --- */
    --border-radius: 16px;
    --nav-height: 70px;
    --glass-bg: rgba(0, 0, 0, 0.3);
    
    /* Çerçeve rengini de kırmızı yaptık */
    --glass-border: 1px solid rgba(9, 222, 229, 0.15); 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

/* Scrollbar Tasarımı */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { 
    background: #333; 
    border-radius: 4px; 
    transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-bronze); }

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Barlow Condensed', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding-top: calc(var(--nav-height) + 20px);
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../wallpaper3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
    z-index: -1;
    opacity: 0.65; /* Çok hafif görünür, istersen 0.1 - 0.2 arası oynayabilirsin */
}

/* ============================================
   İÇERİK KORUMA - KOPYALAMA VE SEÇİM ENGELİ
   ============================================ */

/* Tüm içeriği seçilemez yap */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Görselleri sürüklenemez yap */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Logo'ya özel koruma */
.logo-image {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Sağ tık menüsünü engelle */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Formlar ve input'lar seçilebilir olmalı */
input,
textarea,
select,
button,
[contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Link metinleri seçilemez (isteğe bağlı) */
a {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Görsel üzerine gelince kopyalama simgesi gösterme */
img::selection {
    background: transparent;
}

img::-moz-selection {
    background: transparent;
}

.bg-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse at top, rgba(9, 229, 229, 0.03), transparent 60%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)); /* Siyah katman */
    pointer-events: none;
    z-index: 0;
}

main {
    flex: 1;
    position: relative;
    z-index: 1;
}

a { text-decoration: none; color: inherit; transition: var(--transition-base); }
ul { list-style: none; }

/* =========================================
   2. KEYFRAMES (ANIMASYON KÜTÜPHANESİ)
   ========================================= */

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes breathe {
    0%, 100% { border-color: rgba(9, 214, 229, 0.1); }
    50% { border-color: rgba(9, 214, 229, 0.4); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 var(--accent-bronze-glow); }
    70% { box-shadow: 0 0 0 8px rgba(9, 222, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(9, 203, 229, 0); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* =========================================
   3. NAVBAR & HEADER
   ========================================= */
.navbar {
    height: var(--nav-height);
    display: flex;
    justify-content: space-between; /* Sol ve sağ öğeleri kenara iter */
    align-items: center;
    padding: 0 5%;
    
    /* SABİTLEME AYARLARI */
    position: fixed; 
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    
    /* GÖRÜNÜM */
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(97, 194, 201, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

/* ============================================
   LOGO VE NAVBAR LOGO DÜZENLEMELERİ
   ============================================ */

/* Logo Container */
.logo {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Logo Resmi */
.logo-image {
    width: 65px;
    height: 65px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 10px rgba(9, 214, 229, 0.3));
}

/* Logo Hover Efekti */
.logo:hover .logo-image {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(9, 214, 229, 0.6));
}

/* Logo Text Container */
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* Logo Top Text (EVEN) */
.logo-top {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(9, 214, 229, 0.5);
    transition: all 0.3s ease;
}

/* Logo Bottom Text (ROLEPLAY) */
.logo-bottom {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-bronze, #09d6e5);
    letter-spacing: 4px;
    margin-top: 2px;
    transition: all 0.3s ease;
}

/* Logo Text Hover Efekti */
.logo:hover .logo-top {
    color: var(--accent-bronze, #09d6e5);
    text-shadow: 0 0 15px rgba(9, 214, 229, 0.8);
    letter-spacing: 4px;
}

.logo:hover .logo-bottom {
    color: #fff;
    letter-spacing: 5px;
}

/* Animasyonlu Glow Efekti */
@keyframes logo-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(9, 214, 229, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(9, 214, 229, 0.6));
    }
}

.logo-image {
    animation: logo-pulse 3s ease-in-out infinite;
}

/* Logo hover'da animasyonu durdur */
.logo:hover .logo-image {
    animation: none;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .logo-image {
        width: 40px;
        height: 40px;
    }
    
    .logo-top {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
    
    .logo-bottom {
        font-size: 0.55rem;
        letter-spacing: 3px;
    }
    
    .logo {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .logo-image {
        width: 35px;
        height: 35px;
    }
    
    .logo-top {
        font-size: 1rem;
    }
    
    .logo-bottom {
        font-size: 0.5rem;
        letter-spacing: 2px;
    }
}

.nav-center {
    position: absolute; /* Diğer öğelerden bağımsız hale getir */
    left: 50%;          /* Ekranın tam ortasına git */
    transform: translateX(-50%); /* Kendi genişliğinin yarısı kadar geri gel (Tam merkezleme) */
    
    display: flex;
    gap: 8px;
    background: rgba(97, 194, 201, 0.05);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(97, 201, 196, 0.1);
}

.nav-item {
    padding: 10px 28px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-smooth);
    letter-spacing: 0.5px;
}

.nav-item:hover {
    color: #fff;
    background: rgba(97, 185, 201, 0.08);
    transform: translateY(-2px);
}

.nav-item.active {
    color: #000;
    background: var(--accent-bronze);
    box-shadow: 0 5px 15px var(--accent-bronze-glow);
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 16px;
    background: rgba(97, 197, 201, 0.08);
    border: 1px solid rgba(97, 189, 201, 0.15);
    border-radius: 40px;
    cursor: pointer;
    transition: var(--transition-base);
}

.user-profile:hover {
    background: rgba(97, 197, 201, 0.15);
    border-color: var(--accent-gold);
    transform: scale(1.02);
}

.username {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.avatar {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--accent-bronze), var(--accent-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #000;
    box-shadow: 0 0 10px var(--accent-bronze-glow);
    font-weight: 600;
}

/* =========================================
   4. LAYOUT & CONTAINERS
   ========================================= */
.dashboard-container {
    max-width: 1500px; /* 1400px'den 1650px'e çıkarıldı, daha geniş */
    width: 92%;       /* Ekranın %92'sini kaplasın */
    margin: 0 auto;
    padding: 3rem 0;  /* Yan paddingler kaldırıldı, genişlik width ile sağlandı */
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: #fff;
    position: relative;
    padding-left: 0;
    opacity: 0;
    animation: fadeInLeft 0.8s var(--ease-smooth) 0.2s forwards;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-title::before {
    display: none;
}

/* ============================================
   YOUTUBE VIDEO BÖLÜMÜ - BÜYÜTÜLMÜŞ
   ============================================ */

.video-section-large {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.video-card-large {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.video-card-large:hover {
    border-color: rgba(9, 214, 229, 0.5);
    box-shadow: 0 8px 32px rgba(9, 214, 229, 0.2);
}

.video-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(0, 225, 255, 0.1);
    border-bottom: 1px solid rgba(0, 238, 255, 0.2);
}

.video-header i {
    color: #ff0000;
    font-size: 1.5rem;
}

.video-header span {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

.video-wrapper-large {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
}

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

.video-placeholder:hover img {
    transform: scale(1.05);
}

.play-button {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(0, 238, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.play-button i {
    color: #fff;
    font-size: 2rem;
    margin-left: 5px;
}

.video-placeholder:hover .play-button {
    transform: scale(1.15);
    background: rgb(0, 225, 255);
    box-shadow: 0 0 30px rgba(0, 247, 255, 0.8);
}

/* ============================================
   GALERİ BÖLÜMÜ - 3-2-3-2 DÜZENİ
   ============================================ */

.gallery-section {
    margin-bottom: 80px;
}

.gallery-grid-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Satır Düzeni */
.gallery-row {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* 3 Fotoğraflı Satır */
.gallery-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 2 Fotoğraflı Satır - Daha Büyük */
.gallery-row-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1500px; /* 900px'den 1100px'e yükseltildi */
    margin: 0 auto;
}

.gallery-row-2 .gallery-item {
    padding-bottom: 70%; /* 3 fotoğraflı satırdan daha yüksek */
}

/* Galeri Item */
.gallery-item {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 Aspect Ratio */
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover {
    border-color: rgba(9, 214, 229, 0.6);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(9, 214, 229, 0.3);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Overlay efekti */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(9, 214, 229, 0.3), rgba(9, 214, 229, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-item:hover::before {
    opacity: 1;
}

/* ============================================
   RESPONSIVE TASARIM
   ============================================ */

@media (max-width: 1024px) {
    .video-header span {
        font-size: 1rem;
    }
    
    .play-button {
        width: 70px;
        height: 70px;
    }
    
    .play-button i {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .video-section-large {
        margin-bottom: 40px;
    }
    
    .video-header {
        padding: 16px 20px;
    }
    
    .video-header span {
        font-size: 0.9rem;
    }
    
    .play-button {
        width: 60px;
        height: 60px;
    }
    
    .play-button i {
        font-size: 1.5rem;
    }
    
    /* Galeri mobilde 2 sütun */
    .gallery-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-row-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
    
    .gallery-grid-custom {
        gap: 15px;
    }
    
    .gallery-item {
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .video-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }
    
    .video-header span {
        font-size: 0.85rem;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .play-button i {
        font-size: 1.3rem;
    }
    
    /* Galeri mobilde 1 sütun */
    .gallery-row-3,
    .gallery-row-2 {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid-custom {
        gap: 12px;
    }
}

/* =========================================
   7. ACCORDION (SSS & KURALLAR)
   ========================================= */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    animation: fadeUp 1s var(--ease-smooth) 0.5s forwards;
}

.accordion-item {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid rgba(50, 182, 205, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-header {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: rgba(50, 205, 197, 0.05);
}

.accordion-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}

.accordion-header > i {
    color: var(--text-muted);
    transition: transform 0.4s var(--ease-elastic);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease-smooth), padding 0.5s;
    padding: 0 25px;
    background: rgba(8, 10, 10, 0.5);
}

.accordion-item.active {
    border-color: var(--accent-bronze);
    background: var(--bg-card-hover);
}

.accordion-item.active .accordion-header h3 {
    color: var(--accent-gold);
}

.accordion-item.active .accordion-header > i {
    transform: rotate(180deg);
    color: var(--accent-bronze);
}

.accordion-item.active .accordion-body {
    max-height: 3000px; /* 600px yerine 3000px yapıyoruz */
    padding-bottom: 25px;
    padding-top: 10px;
}

.rules-ul li {
    margin-bottom: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
    transition: 0.2s;
}

.rules-ul li:hover {
    color: var(--text-main);
    transform: translateX(5px);
}

.rules-ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--accent-bronze);
    font-size: 0.8rem;
    top: 3px;
}

/* =========================================
   8. APPLICATION DASHBOARD
   ========================================= */
.app-status-card {
    background: linear-gradient(145deg, var(--accent-dark), var(--bg-card));
    border: 1px solid rgba(50, 195, 205, 0.2);
    padding: 35px;
    border-radius: var(--border-radius);
    
    /* DEĞİŞEN KISIMLAR: Genişlik ayarı ve ortalama */
    max-width: 900px;        /* Genişliği sınırladık (İstediğin kadar düşürebilirsin: örn 800px) */
    margin: 0 auto 40px auto; /* Üst 0, Sağ-Sol Oto (Ortalar), Alt 40px boşluk */
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fadeUp 1s var(--ease-smooth) 0.4s forwards;
}

.app-status-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(50, 161, 205, 0.1), transparent 60%);
    animation: spin 10s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-left h3 {
    color: var(--text-main);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.status-badge {
    padding: 8px 25px;
    background: rgba(50, 182, 205, 0.15);
    color: var(--accent-gold);
    border: 1px solid var(--accent-bronze);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 0 15px var(--accent-bronze-glow);
}

/* .apps-grid sınıfını bul ve bununla değiştir */
.apps-grid {
    display: flex; /* Grid yerine Flex kullanıyoruz */
    flex-wrap: wrap; /* Sığmayanları alt satıra at */
    justify-content: center; /* Kartları her zaman ortala */
    gap: 25px;
    opacity: 0;
    animation: fadeUp 1s var(--ease-smooth) 0.6s forwards;
    max-width: 1200px; /* Çok yayılmasınlar */
    margin: 0 auto; /* Grid'i ortala */
}

/* .app-type-card sınıfını bul ve bununla değiştir (veya güncelle) */
.app-type-card {
    background: var(--bg-card);
    padding: 60px 20px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(50, 187, 205, 0.1);
    text-align: center;
    transition: var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* --- SABİTLEME AYARLARI --- */
    flex: 0 1 500px; /* Büyüme (0), Küçülme (1), Baz Genişlik (350px) */
    width: 100%; /* Mobilde küçülebilmesi için */
    max-width: 500px; /* Asla 350px'den geniş olmasın */
    min-width: 380px; /* Çok da küçülmesin */
}

.app-type-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(50, 195, 205, 0.05), transparent);
    transform: translateX(-100%);
    transition: 0.6s;
}

.app-type-card:hover::after {
    transform: translateX(100%);
}

.app-type-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-bronze);
    box-shadow: 0 15px 40px var(--accent-bronze-glow);
}

.app-type-card i {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    transition: 0.4s;
}

.app-type-card:hover i {
    color: var(--accent-bronze);
    transform: scale(1.2);
}

.app-type-card h4 { 
    color: var(--text-main); 
    font-size: 1.2rem; 
    margin-bottom: 10px; 
}

.app-type-card p { 
    color: var(--text-muted); 
    font-size: 0.9rem; 
    margin-bottom: 25px; 
    line-height: 1.6;
}

.btn-apply {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    border: 1px solid rgba(50, 195, 205, 0.2);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.3s;
    background: rgba(50, 174, 205, 0.05);
}

.app-type-card:hover .btn-apply {
    background: var(--accent-bronze);
    border-color: var(--accent-bronze);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--accent-bronze-glow);
}

/* =========================================
   9. FOOTER
   ========================================= */
.footer,
.footer-simple {
    background-color: #000000;
    padding: 60px 5% 30px;
    text-align: center;
    border-top: 1px solid rgba(97, 194, 201, 0.1);
    margin-top: 80px;
    position: relative;
}

.footer-logo {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 30px;
    color: #fff;
    text-transform: uppercase;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.footer-socials a {
    width: 50px; 
    height: 50px;
    background: rgba(97, 197, 201, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: 0.3s var(--ease-elastic);
    border: 1px solid rgba(97, 185, 201, 0.1);
}

.footer-socials a:hover {
    background: var(--accent-bronze);
    border-color: var(--accent-bronze);
    color: #000;
    /* transform: translateY(-5px) scale(1.1); */
    box-shadow: 0 5px 15px var(--accent-bronze-glow);
}

.footer-copy {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: left;
    margin-bottom: 40px;
}

.footer-section h3 {
    color: var(--accent-bronze);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.footer-section p,
.footer-section ul li {
    color: var(--text-muted);
    line-height: 1.8;
}

.footer-section ul li a {
    transition: 0.3s;
}

.footer-section ul li a:hover {
    color: var(--accent-bronze);
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(97, 185, 201, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.3s;
    border: 1px solid rgba(97, 189, 201, 0.1);
}

.social-links a:hover {
    background: var(--accent-bronze);
    color: #000;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(97, 180, 201, 0.1);
    padding-top: 30px;
    text-align: center;
}

/* =========================================
   10. STATS & FEATURES (REMOVED)
   ========================================= */
.features-section,
.stats-section {
    display: none;
}

/* =========================================
   11. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .top-section { 
        grid-template-columns: 1fr; 
    }
    
    .gallery-grid { 
        grid-template-columns: 1fr; 
    }
    
    .gallery-item { 
        grid-column: auto !important; 
        height: 250px !important; 
    }
    
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 20px 5%;
        gap: 20px;
    }
    
    .nav-center {
        flex-wrap: wrap;
        justify-content: center;
        background: transparent;
        border: none;
        gap: 15px;
    }
    
    .nav-item {
        padding: 8px 16px;
        font-size: 0.85rem;
        background: rgba(50, 182, 205, 0.05);
    }

    .app-status-card {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-content {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}

/* =========================================
   12. FADE UP ANIMATION CLASS
   ========================================= */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   NAVBAR GİRİŞ BUTONU VE AVATAR DÜZELTMELERİ
   ============================================ */

/* Discord ile Giriş Yap Butonu */
.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-login:hover {
    background: linear-gradient(135deg, #4752C4 0%, #3C45A5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(88, 101, 242, 0.3);
}

.btn-login i {
    font-size: 1.1rem;
}

/* Discord ile Giriş Butonu (diğer sayfalarda) */
.btn-discord-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-discord-login:hover {
    background: linear-gradient(135deg, #4752C4 0%, #3C45A5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(88, 101, 242, 0.3);
}

.btn-discord-login i {
    font-size: 1.1rem;
}

/* Kullanıcı Profil Alanı */
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-profile .username {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.user-profile .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0; /* Avatar'ın küçülmesini engelle */
}

.user-profile .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Inline boşlukları kaldır */
}

.user-profile .avatar i {
    color: #fff;
    font-size: 1.2rem;
}

/* Çıkış Butonu */
.btn-logout {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    transform: translateY(-2px);
}

/* Nav Right Container */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Responsive için */
@media (max-width: 768px) {
    .user-profile {
        padding: 6px 12px;
        gap: 8px;
    }
    
    .user-profile .username {
        display: none; /* Mobilde sadece avatar göster */
    }
    
    .user-profile .avatar {
        width: 36px;
        height: 36px;
    }
    
    .btn-login,
    .btn-discord-login {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .btn-logout {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ============================================
   BAŞVURU TAKİP KARTI
   ============================================ */

.app-track-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(9, 214, 229, 0.2);
    border-radius: 12px;
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto;
}

.track-header {
    padding: 15px 20px;
    background: rgba(9, 214, 229, 0.05);
    border-bottom: 1px solid rgba(9, 214, 229, 0.1);
}

.track-header h4 {
    color: #09d6e5;
    font-size: 0.9rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.track-body {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.track-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.track-value {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .track-body {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BAŞVURU TAKİP KARTI İYİLEŞTİRMELERİ
   ============================================ */

.app-track-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(9, 214, 229, 0.2);
    border-radius: 12px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.app-track-card:hover {
    border-color: rgba(9, 214, 229, 0.4);
    box-shadow: 0 8px 30px rgba(9, 214, 229, 0.15);
    transform: translateY(-2px);
}

.track-header {
    padding: 20px 25px;
    background: rgba(9, 214, 229, 0.08);
    border-bottom: 1px solid rgba(9, 214, 229, 0.15);
}

.track-header h4 {
    color: #09d6e5;
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.track-header h4 i {
    font-size: 1.2rem;
}

.track-body {
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 sütun sabit */
    gap: 20px;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid rgba(9, 214, 229, 0.3);
    transition: all 0.3s ease;
}

.track-info:hover {
    background: rgba(9, 214, 229, 0.05);
    border-left-color: #09d6e5;
    transform: translateX(3px);
}

.track-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.track-value {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

/* Durum Badge'i için özel stil */
.track-status {
    grid-column: span 1; /* span 2'den span 1'e düşürdük */
    border-left-color: transparent;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.track-status .track-label {
    margin-bottom: 0;
    padding-left: 15px;
}

/* Status Badge için genel stil */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    width: fit-content; /* Sadece içerik kadar genişlik */
}

.status-badge i {
    font-size: 1rem;
}

/* Status Badge Renkleri (Mevcut stillere uyumlu) */
.status-pending {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.status-approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .track-body {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        gap: 15px;
    }
    
    .track-info {
        padding: 12px;
    }
    
    .track-header h4 {
        font-size: 1rem;
    }
}