/* Theme Name: Sygma
Theme URI: Sohbet Teması
Author: S4S
Author URI: #
Description: Sohbet teması
Version: 1.0 */



        :root {
            --primary-dark: #1a2a3a;
            --accent-color: #e74c3c;
            --gold-color: #f1c40f;
            --soft-bg: #f4f7f9;
            --white: #ffffff;
            --text-muted: #64748b;
        }

        body { background-color: var(--soft-bg); font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
        
        /* Navbar */
        .navbar { background: linear-gradient(135deg, #1a1a1a, #1a2a3a); border-bottom: 3px solid var(--gold-color); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .navbar-brand { font-weight: 800; color: var(--gold-color) !important; letter-spacing: 1px; }

        /* Giriş Kartı */
        .login-card { 
            background: #fff; 
            border-radius: 24px; 
            padding: 30px; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
            border: 1px solid rgba(0,0,0,0.05); 
            height: 100%; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        }

        /* Başlık Alanı ve Emoji Animasyonu */
        .chat-title-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        .moving-emoji {
            font-size: 1.8rem;
            animation: bounceEmoji 2s infinite ease-in-out;
        }
        .moving-emoji.heart {
            animation: pulseHeart 1.5s infinite ease-in-out;
        }
        
        @keyframes bounceEmoji {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes pulseHeart {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* Görsel Konteyner */
        .header-image-container { 
            height: 100%; 
            width: 100%;
            display: flex;
            overflow: hidden;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }
        .header-image-container img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            object-position: center;
            display: block;
        }
        
        .btn-connect { background: linear-gradient(to right, #27ae60, #2ecc71); color: white; font-weight: bold; border: none; transition: 0.3s; border-radius: 12px; }
        .btn-connect:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(39,174,96,0.3); color: white; }
        
        .btn-old-version { background: #f1f5f9; color: #475569; font-weight: 600; border: 1px solid #e2e8f0; transition: 0.3s; border-radius: 12px; margin-top: 10px; }
        .btn-old-version:hover { background: #e2e8f0; color: #1e293b; }

        /* GÜNCELLENMİŞ İstatistik Çubuğu */
        .stat-bar { 
            background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%); 
            color: white; 
            padding: 30px 15px; 
            border-radius: 24px; 
            margin-bottom: 30px; 
            box-shadow: 0 15px 35px rgba(26, 42, 58, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
            overflow: hidden;
        }
        .stat-bar::after {
            content: "";
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(241,196,15,0.05) 0%, transparent 70%);
            pointer-events: none;
        }
        .stat-item {
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }
        .stat-item:hover { transform: translateY(-5px); }
        .stat-number {
            font-size: 1.8rem;
            font-weight: 800;
            display: block;
            background: linear-gradient(to bottom, #f1c40f, #f39c12);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 2px;
        }
        .stat-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.7);
            font-weight: 600;
        }

        /* GÜNCELLENMİŞ Uygulama İndirme Butonları */
        .download-container { margin-bottom: 40px; }
        .download-btn {
            display: flex;
            align-items: center;
            padding: 20px 25px;
            border-radius: 22px;
            text-decoration: none;
            color: #fff !important;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            position: relative;
            border: 1px solid rgba(255,255,255,0.1);
            height: 100%;
        }
        .download-btn:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        .download-btn i { 
            font-size: 2.5rem; 
            margin-right: 18px; 
            opacity: 0.9;
            transition: transform 0.3s ease;
        }
        .download-btn:hover i { transform: scale(1.1) rotate(-5deg); }
        
        .download-btn .btn-text { display: flex; flex-direction: column; line-height: 1.2; }
        .download-btn .small-text { font-size: 0.7rem; opacity: 0.8; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
        .download-btn .large-text { font-size: 1.25rem; font-weight: 800; }

        .btn-android { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
        .btn-ios { background: linear-gradient(135deg, #34495e 0%, #1a1a1a 100%); }
        .btn-mirc { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }

        .btn-android::before {
            content: "\f17b"; font-family: "Font Awesome 6 Brands";
            position: absolute; right: -10px; bottom: -15px; font-size: 5rem; opacity: 0.1;
        }
        .btn-ios::before {
            content: "\f179"; font-family: "Font Awesome 6 Brands";
            position: absolute; right: -10px; bottom: -15px; font-size: 5rem; opacity: 0.1;
        }
        .btn-mirc::before {
            content: "\f120"; font-family: "Font Awesome 6 Free";
            position: absolute; right: -10px; bottom: -15px; font-size: 5rem; opacity: 0.1;
        }

        /* İçerik Alanları */
        .content-box { background: white; border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 30px; border: 1px solid rgba(0,0,0,0.02); }
        .section-title { border-left: 5px solid var(--accent-color); padding-left: 15px; margin-bottom: 25px; font-weight: bold; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 1px; }

        /* FORUM SON KONULAR TASARIMI */
        .forum-list-container {
            background: #fff;
            border-radius: 24px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.05);
        }
        .forum-item {
            display: flex;
            align-items: center;
            padding: 16px;
            margin-bottom: 12px;
            background: #f8fafc;
            border-radius: 18px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        .forum-item:hover {
            background: #fff;
            border-color: var(--gold-color);
            transform: scale(1.01);
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        }
        .forum-status {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--gold-color);
            margin-right: 15px;
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
            animation: pulse-gold 2s infinite;
        }
        @keyframes pulse-gold {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(241, 196, 15, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
        }
        .forum-main-info { flex-grow: 1; }
        .forum-topic-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 2px;
            display: block;
        }
        .forum-sub-info {
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .forum-sub-info span i { margin-right: 4px; color: var(--gold-color); }
        .forum-meta-tags {
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
        .forum-tag {
            font-size: 0.65rem;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 6px;
            text-transform: uppercase;
            background: #e2e8f0;
            color: #475569;
        }
        .tag-hot { background: #fee2e2; color: #ef4444; }
        .tag-new { background: #dcfce7; color: #22c55e; }

        /* Komutlar */
        .command-group-title { font-size: 0.75rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 10px; margin-top: 15px; letter-spacing: 0.5px; }
        .command-item { 
            background: #ffffff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; 
            display: flex; align-items: center; justify-content: space-between; transition: all 0.2s ease; cursor: pointer;
        }
        .command-item:hover { background: #f8fafc; border-color: var(--gold-color); transform: translateY(-2px); }
        .command-info code { color: var(--accent-color); font-weight: 700; font-size: 0.85rem; padding: 0; background: none; }
        .command-info span { font-size: 0.7rem; color: #64748b; margin-top: 2px; }

        /* DJ Kartları */
        .dj-card { text-align: center; transition: 0.3s; padding: 10px; border-radius: 15px; background: #fff; }
        .dj-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .dj-avatar { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold-color); margin-bottom: 8px; }

        /* Burçlar Grid */
        .zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
        @media (max-width: 768px) { .zodiac-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 480px) { .zodiac-grid { grid-template-columns: repeat(3, 1fr); } }
        
        .zodiac-item { 
            text-align: center; padding: 15px 5px; border: 1px solid #f0f0f0; border-radius: 15px; 
            cursor: pointer; transition: 0.3s; background: #fff;
        }
        .zodiac-item:hover { background: linear-gradient(145deg, #fff, #fff9e6); border-color: var(--gold-color); transform: scale(1.08); }
        .zodiac-item i { font-size: 1.6rem; display: block; margin-bottom: 6px; }

        /* GÜNÜN SÖZÜ BÖLÜMÜ */
        .quote-box {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            padding: 25px;
            border-left: 5px solid var(--gold-color);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            margin-bottom: 30px;
        }
        .quote-box::after {
            content: "\f10d";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            right: 20px;
            bottom: 10px;
            font-size: 3rem;
            color: rgba(241, 196, 15, 0.1);
        }
        .quote-text {
            font-size: 1.1rem;
            font-style: italic;
            color: var(--primary-dark);
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .quote-author {
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* MODERN POPÜLER ODALAR KARTI */
        .popular-rooms-card { 
            background: #ffffff; 
            border-radius: 24px; 
            padding: 25px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
            border: 1px solid rgba(0,0,0,0.03);
        }
        .room-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            margin-bottom: 10px;
            border-radius: 16px;
            text-decoration: none !important;
            background: #f8fafc;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
        }
        .room-row:hover {
            background: #ffffff;
            border-color: var(--gold-color);
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .room-info-group { display: flex; align-items: center; gap: 12px; }
        .room-avatar-mini {
            width: 40px; height: 40px;
            background: var(--primary-dark);
            color: var(--gold-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .room-name-text {
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0;
            font-size: 0.95rem;
            line-height: 1;
        }
        .room-desc-text {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .room-user-count {
            background: rgba(241, 196, 15, 0.15);
            color: #d4a017;
            padding: 4px 12px;
            border-radius: 10px;
            font-weight: 800;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
        }

        /* SADELEŞTİRİLMİŞ FOOTER TASARIMI */
        .main-footer {
            background-color: #ffffff;
            color: var(--primary-dark);
            padding: 50px 0 30px;
            margin-top: 50px;
            border-top: 1px solid #eee;
        }
        .footer-brand h3 { letter-spacing: -1px; margin-bottom: 15px; }
        .footer-about-text { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; }
        .footer-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 20px; text-transform: uppercase; color: #1a1a1a; }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: 0.2s; }
        .footer-links a:hover { color: var(--accent-color); }
        
        .social-row { display: flex; gap: 10px; margin-top: 15px; }
        .social-mini { width: 32px; height: 32px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); text-decoration: none; font-size: 0.8rem; transition: 0.2s; }
        .social-mini:hover { background: var(--gold-color); color: #000; transform: translateY(-2px); }

        .footer-bottom { margin-top: 40px; padding-top: 25px; border-top: 1px solid #f0f0f0; font-size: 0.8rem; color: #94a3b8; }

        /* HIZLI BAĞLANTI FORMU STİLLERİ (Radius: 8px) */
        .footer-quick-connect .form-control, 
        .footer-quick-connect .form-select, 
        .footer-quick-connect .btn { 
            border-radius: 8px !important; 
        }

        /* Modal */
        .modal-content { border-radius: 25px; border: none; }
        .zodiac-modal-icon { font-size: 4rem; margin-bottom: 20px; text-shadow: 0 5px 15px rgba(0,0,0,0.1); }

        /* Mevcut tasarıma uyumlu ek radyo buton stilleri */
.btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd; /* Temanızın ana rengiyle değiştirebilirsiniz */
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}
.btn-outline-primary {
    border-color: #dee2e6;
    color: #6c757d;
    background: #f8f9fa;
}

/* Genişlik eşitleme için kritik düzeltmeler */
.download-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.download-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
.opacity-10 { opacity: 0.1 !important; }

/* --- MOBİL UYUMLULUK VE TAŞMA ENGELLEYİCİ GÜNCELLEMELER --- */

/* Genel Sıfırlama */
* { box-sizing: border-box; }
html, body { 
    max-width: 100%; 
    overflow-x: hidden; /* Yatay kaymayı kesin olarak engeller */
}

/* 1. İstatistik Çubuğu Düzeltmesi */
.stat-bar { 
    padding: 20px 10px; /* Mobilde padding'i azalttık */
}
.stat-item {
    padding: 10px 5px;
}
.stat-number {
    font-size: 1.4rem; /* Mobilde font küçüldü */
}

/* 2. Uygulama İndirme Butonları (Flex-wrap desteği) */
@media (max-width: 576px) {
    .download-btn {
        padding: 15px;
    }
    .download-btn i {
        font-size: 1.8rem;
        margin-right: 12px;
    }
    .download-btn .large-text {
        font-size: 1rem;
    }
}

/* 3. Forum Listesi Mobil Optimizasyonu */
.forum-item {
    flex-wrap: wrap; /* İçerik sığmazsa alt satıra geçer */
    padding: 12px;
}
.forum-meta-tags {
    width: 100%;
    flex-direction: row; /* Mobilde yan yana */
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

/* 4. Burçlar Grid (Tam uyumlu) */
.zodiac-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 10px; 
}

@media (max-width: 992px) {
    .zodiac-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 576px) {
    .zodiac-grid { 
        grid-template-columns: repeat(3, 1fr); /* En küçük ekranda 3'lü yapı */
        gap: 8px;
    }
    .zodiac-item {
        padding: 10px 5px;
    }
    .zodiac-item i {
        font-size: 1.3rem;
    }
}

/* 5. Popüler Odalar Mobil Hiza */
.room-row {
    padding: 10px;
}
.room-name-text {
    font-size: 0.85rem;
}

/* 6. Giriş Kartı ve Görsel Hiza */
@media (max-width: 991px) {
    .login-card {
        margin-bottom: 20px; /* Alt alta geldiklerinde boşluk bırakır */
    }
    .header-image-container {
        height: 250px; /* Mobilde görselin çok devleşmesini engeller */
    }
}

/* 7. Footer Taşma Koruması */
.main-footer {
    padding: 30px 15px;
    overflow: hidden;
}
.footer-quick-connect .btn {
    width: 100%; /* Mobilde buton tam genişlik */
    margin-top: 5px;
}

/* 8. Tablo ve Metin Taşmalarını Engelleme */
code, span, p, h4 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Navigasyon Mobilde Sıkışmasın */
.navbar-brand {
    font-size: 1.1rem;
}