body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    overflow-x: hidden;
}

/* Slider Animasyonu */
.slide { 
    display: none; 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
}
.slide.active { 
    display: block; 
    opacity: 1; 
}

/* Scrollbar Tasarımı (Masaüstü için şık görünüm) */
::-webkit-scrollbar { 
    height: 8px; 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #1f2937; 
}
::-webkit-scrollbar-thumb { 
    background: #374151; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #2ecc71; 
}

/* Sürükleme İmleçleri ve Ayarları */
.drag-scroll { 
    cursor: grab; 
    overflow-x: auto; 
    user-select: none; /* Metin seçimini engeller */
    -webkit-overflow-scrolling: touch; /* Mobilde akıcı kaydırma */
    display: flex; /* Flex yapısını garantiye al */
    gap: 1.5rem; /* Gap-6 karşılığı */
    padding-bottom: 1rem;
}

.drag-scroll.active { 
    cursor: grabbing; 
    cursor: -webkit-grabbing;
}

/* ÖNEMLİ: Videoları sürüklerken resmin gelmesini engeller */
.drag-scroll img {
    pointer-events: none; 
    -webkit-user-drag: none;
}

/* --- Navbar Link Animasyonu --- */
.nav-link {
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #2ecc71; /* Yeşil Çizgi */
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}

/* Logo Gradient Efekti */
.gradient-text {
    background: linear-gradient(to right, #ffffff, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==================================
   GÖRSEL CAPTCHA SİMÜLASYON STİLLERİ
   ================================== */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.captcha-display {
    position: relative;
    width: 145px; /* Genişlik */
    height: 44px; /* Yükseklik */
    background-color: #374151; /* bg-gray-700 */
    border: 2px solid #4b5563;
    border-radius: 6px;
    overflow: hidden;
    color: #ffffff; /* Harf rengi */
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

/* Çizgiler ve Gürültü Simülasyonu */
.captcha-display::before,
.captcha-display::after {
    content: '';
    position: absolute;
    height: 1px;
    background-color: #2ecc71; /* Yeşil çizgi */
    opacity: 0.6;
}

.captcha-display::before {
    width: 100%;
    top: 50%;
    transform: rotate(3deg);
}

.captcha-display::after {
    width: 80%;
    bottom: 10px;
    left: 10%;
    transform: rotate(-5deg);
    background-color: #facc15; /* Sarı çizgi */
}

/* Harflerin Düzensiz Görünümü */
.captcha-text {
    position: relative;
    letter-spacing: 5px; /* Varsayılan boşluk */
    /* Metni hafifçe eğme */
    transform: skewX(-5deg); 
}

.captcha-text span {
    display: inline-block;
    /* Harf eğikliği */
    transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * 1px));
    /* Random boşluk simülasyonu */
    margin-right: calc(var(--m) * 1px);
}

 /* ==================================
           SAYFA ARKA PLAN VE CAPTCHA STİLLERİ
           ================================== */
        .login-bg {
            /* Sabit, tam ekran stadyum arka planı */
            background-image: url('1.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Kaydırmayla sabit kalır */
            background-color: #111827; /* Resim yüklenmezse koyu renk */
        }
        
        /* CAPTCHA Stilleri (style.css'te de olmalı) */
        .captcha-display {
            position: relative;
            width: 180px; 
            height: 44px; 
            background-color: #374151; 
            border: 2px solid #4b5563;
            border-radius: 6px;
            overflow: hidden;
            color: #ffffff; 
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1;
        }

        .captcha-display::before, .captcha-display::after {
            content: ''; position: absolute; height: 1px; background-color: #2ecc71; opacity: 0.6; width: 100%; top: 50%; transform: rotate(3deg);
        }
        .captcha-display::after {
            background-color: #facc15; transform: rotate(-5deg);
        }
        .captcha-text {
            position: relative; letter-spacing: 5px; transform: skewX(-5deg); 
        }
        .captcha-text span {
            display: inline-block; transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * 1px)); margin-right: calc(var(--m) * 1px);
        }