/* MJ Portal Özel CSS */
.portal-wrapper { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 40px; }
.portal-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; width: 100%;}
.portal-sidebar { flex: 0 0 320px; display: flex; flex-direction: column; gap: 20px; }

.portal-block { background: #fff; border: 1px solid #d8dee3; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
.block-header { background-color: #e6ebf1; padding: 3px 8px; border-bottom: 1px solid #d8dee3; display: flex; justify-content: space-between; align-items: center; }
.block-header h2 { font-size: 14px; font-weight: bold; margin:0; display: flex; gap: 8px; align-items: center; text-transform: uppercase; }

.quick-links { display: flex; flex-wrap: wrap; background: #fff; }
.q-link { flex: 1; min-width: 120px; text-align: center; padding: 15px 10px; border-right: 1px solid #d8dee3; color: #333; font-weight: 600; display: flex; flex-direction: column; gap: 8px; }
.q-link i { font-size: 24px; color: #1e88e5; }
.q-link:hover { background-color: #f2f4f7; text-decoration: none; }

.topic-row { display: flex; padding: 3px 8px; border-bottom: 1px solid #f0f0f0; align-items: center; }
.topic-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.t-title { font-weight: bold; font-size: 14px; color: #1e88e5; }
.topic-stats-mini { padding: 0 15px; font-size: 12px; color: #777; text-align: right; }
.topic-last-post { width: 150px; font-size: 12px; text-align: right; display: flex; flex-direction: column; }

.visual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 15px; }
.visual-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; display: block; }
.visual-card img { width: 100%; height: 100%; object-fit: cover; }
.card-gradient-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); color: #fff; padding: 20px 12px 8px 12px; font-size: 13px; font-weight: 600; }

.widget { background: #fff; border: 1px solid #d8dee3; border-radius: 4px; overflow: hidden; }
.widget-title { background-color: #e6ebf1; padding: 10px 15px; font-size: 13px; font-weight: bold; margin:0; border-bottom: 1px solid #d8dee3; }
.stats-list { list-style: none; padding: 15px; margin: 0; }
.stats-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #eee; font-size: 13px; }

.dark-widget { background: #2b3a4a; border: none; }
.dark-widget .widget-title { background: transparent; border-bottom: none; color: #fff; text-align: center; padding-top: 15px; }
.radio-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 15px 15px 15px; }
.radio-mini-grid img { width: 100%; border-radius: 8px; }

@media (max-width: 992px) {
    .portal-wrapper { flex-direction: column; }
    .portal-sidebar { width: 100%; }
}
/* Modern Hap Şeklinde Butonlar */
.header-buttons { display: flex; gap: 8px; align-items: center; }
.h-btn {
    background-color: #ffffff;
    color: #5db2ff !important;
    padding: 4px 12px;
    border-radius: 20px; /* Yuvarlak köşeler */
    font-size: 11px;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.h-btn:hover {
    background-color: #f2f4f7;
    transform: translateY(-2px); /* Yukarı kalkma efekti */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Akan Şerit (Marquee) Ana Konteyner */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

/* İçeriklerin Akmasını Sağlayan Animasyon Bloğu */
.marquee-content {
    display: inline-flex;
    gap: 15px;
    /* 30 saniyede bir tur atar, infinite ile sonsuza kadar tekrarlar */
    animation: scroll-left 70s linear infinite; 
}

/* Kullanıcı fareyle üzerine gelince animasyon dursun ki rahatça tıklayabilsin */
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* Tekil Forum Kartının Tasarımı */
.forum-slide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    max-width: 130px;
    padding: 12px 8px;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.forum-slide-card:hover {
    transform: translateY(-5px);
    border-color: #5db2ff;
    box-shadow: 0 5px 15px rgba(93, 178, 255, 0.3);
}

.forum-slide-card img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.forum-slide-card:hover img {
    transform: scale(1.1);
}

.f-title {
    font-size: 11px;
    color: #444;
    font-weight: bold;
    text-align: center;
    white-space: normal; /* Uzun başlıkları alt satıra indirir */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* En fazla 2 satır gösterir */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animasyonun Matematiği: Sola doğru %50 kaydır (İçerik 2 kere çoğaltıldığı için kusursuz döngü olur) */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- TABLET (992px altı) ---- */
@media (max-width: 992px) {
    .portal-wrapper {
        flex-direction: column;
    }
    .portal-sidebar {
        flex: 0 0 auto;
        width: 100%;
    }
    .portal-main-content {
        width: 100%;
    }
    .visual-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
}

/* ---- TABLET / KÜÇÜK EKRAN (768px altı) ---- */
@media (max-width: 768px) {
    .quick-links {
        flex-wrap: wrap;
    }
    .q-link {
        flex: 1 1 45%; /* Yan yana 2'li */
        min-width: 100px;
        border-bottom: 1px solid #d8dee3;
    }

    /* Son Konular satırlarını mobilde alt alta diz */
    .topic-row {
        flex-wrap: wrap;
        padding: 8px;
    }
    .topic-info {
        width: 100%;
        order: 1;
    }
    .topic-stats-mini {
        order: 3;
        padding: 4px 0 0 0;
        text-align: left;
        width: 100%;
    }
    .topic-last-post {
        order: 2;
        width: 100%;
        text-align: left;
        margin-top: 4px;
    }

    /* Blok başlıklarındaki butonlar sarsın */
    .block-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 8px;
    }
    .block-header h2 {
        font-size: 13px;
    }
    .marquee-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS'ta akıcı kaydırma */
        scrollbar-width: none; /* Firefox'ta scrollbar'ı gizle */
    }
    .marquee-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari'de scrollbar'ı gizle */
    }
    .marquee-content {
        animation: none !important; /* otomatik akışı durdur */
        display: inline-flex; /* yapıyı koru, elle kaydırılabilir kalsın */
    }    
}

/* ---- MOBİL (576px altı) ---- */
@media (max-width: 576px) {
    .portal-wrapper {
        margin-top: 10px;
        gap: 12px;
        padding: 0 8px; /* kenarlardan hafif boşluk, taşmayı önler */
        box-sizing: border-box;
    }
    .portal-main-content {
        width: 100%;
        gap: 12px;
    }
    .visual-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%; /* max-width:250px yerine */
    }

    /* Marquee kartlarını biraz küçült, dokunmayı kolaylaştır */
    .forum-slide-card {
        min-width: 100px;
        max-width: 100px;
        padding: 8px 6px;
    }
    .forum-slide-card img {
        width: 55px;
        height: 55px;
    }
    .f-title {
        font-size: 10px;
    }

    /* Header butonlarını dokunma dostu yap */
    .h-btn {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* İstatistik listesi biraz sıkışsın */
    .stats-list li {
        font-size: 12px;
    }

    /* Modal video oynatıcı mobilde tam ekrana yakın olsun */
    #modalContent {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* ---- ÇOK KÜÇÜK EKRANLAR (400px altı) ---- */
@media (max-width: 400px) {
    .q-link {
        flex: 1 1 100%; /* Tek sütun */
    }
    .forum-slide-card {
        min-width: 85px;
        max-width: 85px;
    }
}

/* SEKME (TAB) BUTONLARI */
.tab-switch { display: flex; gap: 15px; }
.tab-btn { cursor: pointer; font-size: 14px; font-weight: bold; opacity: 0.6; display: flex; align-items: center; gap: 6px; padding-bottom: 3px; }
.tab-btn.active { opacity: 1; border-bottom: 2px solid #fff; }

/* LOGIN WIDGET */
.quick-login-form { display: flex; flex-direction: column; gap: 8px; padding: 15px; }
.quick-login-form input { padding: 8px 10px; border: 1px solid #d8dee3; border-radius: 4px; font-size: 13px; }
.quick-login-form .h-btn { text-align: center; justify-content: center; background-color: #5db2ff; color: #fff !important; }
.quick-register-link { font-size: 11px; text-align: center; color: #777; margin-top: 4px; }

/* YÖNETİCİ KARTLARI */
.admin-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.admin-card { display: flex; align-items: center; gap: 10px; }
.admin-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.admin-name { flex: 1; font-weight: bold; font-size: 13px; color: #333; }
.admin-pm { color: #5db2ff; font-size: 16px; }

/* MİNİ ÜYE LİSTELERİ */
.mini-user-list { list-style: none; margin: 0; padding: 10px 15px; }
.mini-user-list li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px dashed #eee; }
.mini-user-list img { width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* COLLAPSIBLE */
.collapsible-toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.toggle-icon { font-size: 11px; }

.login-avatar-buyuk { text-align: center; padding-top: 15px; }
.login-avatar-buyuk img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #5db2ff; }
.login-kullanici-adi { text-align: center; font-size: 15px; margin: 8px 0 4px 0; }
.login-profil-btn { display: block; text-align: center; justify-content: center; margin: 10px 15px 15px 15px; background-color: #5db2ff; color: #fff !important; }
.remember-me { font-size: 11px; padding: 0 15px; display: flex; align-items: center; gap: 6px; }

.mchat-preview-list { list-style:none; margin:0; padding:10px 15px; display:flex; flex-direction:column; gap:6px; }
.mchat-preview-list li { font-size:12px; border-bottom:1px dashed #eee; padding-bottom:4px; }
.mchat-user { font-weight:bold; color:#5db2ff; margin-right:4px; }
.mchat-btn { display:block; text-align:center; justify-content:center; margin:10px 15px 15px; background-color:#5db2ff; color:#fff !important; }

/* AYIN EN AKTİF ÜYESİ */
.ayin-uyesi-block { background: linear-gradient(135deg, #5db2ff, #3d8fd8); }
.ayin-uyesi-icerik { display: flex; align-items: center; gap: 15px; padding: 18px; }
.ayin-uyesi-avatar img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.ayin-uyesi-bilgi { display: flex; flex-direction: column; color: #fff; }
.ayin-uyesi-etiket { font-size: 11px; opacity: 0.9; text-transform: uppercase; font-weight: bold; }
.ayin-uyesi-isim { font-size: 18px; font-weight: bold; color: #fff !important; margin: 3px 0; }
.ayin-uyesi-mesaj { font-size: 13px; opacity: 0.9; }

/* YENİ ÜYE HOŞGELDİN LİSTESİ */
.hosgeldin-list { display: flex; flex-direction: column; padding: 5px; }
.hosgeldin-row { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; }
.hosgeldin-row:last-child { border-bottom: none; }
.hosgeldin-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hosgeldin-yazi { display: flex; flex-direction: column; font-size: 13px; }
.hosgeldin-isim { font-weight: bold; color: #1e88e5; }
.hosgeldin-yazi span:last-child { color: #777; font-size: 12px; }

/* ANKET WIDGET */
.anket-icerik { padding: 15px; }
.anket-baslik { display: block; font-weight: bold; font-size: 15px; color: #333; margin-bottom: 12px; }
.anket-secenek { margin-bottom: 10px; }
.anket-secenek-ust { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin-bottom: 4px; }
.anket-bar-arka { background: #eef2f6; border-radius: 10px; height: 10px; overflow: hidden; }
.anket-bar-dolu { background: #5db2ff; height: 100%; border-radius: 10px; transition: width 0.4s ease; }
.anket-toplam-oy { display: block; text-align: right; font-size: 11px; color: #999; margin-top: 8px; }

/* BU KONUYA BİR BAK */
.eski-konu-block { background: #fff9ec; border-left: 4px solid #f5a623; }
.eski-konu-icerik { padding: 15px; display: flex; flex-direction: column; gap: 4px; }
.eski-konu-etiket { font-size: 11px; font-weight: bold; color: #f5a623; text-transform: uppercase; }
.eski-konu-baslik { font-size: 15px; font-weight: bold; color: #333; }
.eski-konu-istatistik { font-size: 12px; color: #999; }