MediaWiki:Timelessbalon.css

Not: Yayımladıktan sonra değişiklikleri görmeniz için tarayıcınızın önbelleğini temizlemeniz gerekebilir.
Firefox / Safari: Shift tuşuna basılıyken Yeniden Yükle'ye tıklayın ya da Ctrl-F5 ya da Ctrl-R tıklayın (Mac için ⌘-R)
Google Chrome: Ctrl-Shift-R'ye basın. (Mac için ⌘-Shift-R)
Edge: Ctrl basılıyken Yenile'ye tıklayın ya da Ctrl-F5'e basın.
/* ==========================================================================
   📋 FENPEDIA RESPONSIVE MODAL PENCERE VE BUTON STİLLERİ (MİLİMETRİK NİZAM)
   ========================================================================== */

/* 1. Sağ Alttaki Ana Dikey Buton Grubu */
.fn-floating-btn-group {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 999999 !important;
}

/* Ortak Yuvarlak Buton Tasarımları */
.fn-floating-btn {
    display: none !important; 
    width: 45px !important;
    height: 45px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}
.fn-floating-btn:hover { transform: scale(1.1) !important; }
.fn-floating-btn.btn-visible { display: flex !important; } 

.btn-lesson { background-color: rgba(76, 175, 80, 0.9) !important; } /* Yeşil */
.btn-toc { background-color: rgba(51, 102, 204, 0.9) !important; }   /* Mavi */

/* 2. TÜM EKRANI KAPLAYAN ARKA PLAN KARARTISI (Buzlu Cam) */
.fn-modal-overlay {
    display: none; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.2) !important; 
    backdrop-filter: blur(8px) !important;           
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9999998 !important;
}

/* 3. EKRANIN TAM ORTASINDA AÇILAN MODERN PENCERE (MODAL) */
.fn-modal-content {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -46%) !important; 
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 320px !important;
    max-width: 90% !important;
    max-height: 420px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
    z-index: 9999999 !important;
}
.fn-modal-content.modal-active { display: block !important; }

/* 4. SAF VE ARINDIRILMIŞ PANEL BAŞLIK STİLLERİ (HİZALAMA GARANTİLİ) */
.fn-modal-content h2, 
.fn-modal-content h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a365d !important;
    margin: 0 0 14px 0 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    padding-top: 0 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: block !important;
}

/* İkinci alt başlıkların (Örn: RASTGELE) liste aralarında düzgün, çizgisiz durması için hizalama */
.fn-modal-body ul ~ h2, 
.fn-modal-body ul ~ h3 {
    margin-top: 18px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center !important;
}

/* 5. PANEL İÇİNDEKİ BAĞLANTI LİSTELERİ */
.fn-modal-body {
    overflow-y: auto !important;
    max-height: 320px !important;
    padding-right: 4px !important;
    width: 100% !important;
    display: block !important;
}
.fn-modal-body ul { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; }
.fn-modal-body li { padding: 10px 0 !important; font-size: 13.5px !important; border-bottom: 1px solid #f1f5f9 !important; text-align: left !important; display: block !important; width: 100% !important; }
.fn-modal-body li:last-child { border-bottom: none !important; }

.fn-modal-body li a { text-decoration: none !important; display: block !important; width: 100% !important; }
.id-toc-content .fn-modal-body li a { color: #4a5568 !important; }
.id-lesson-content .fn-modal-body li a { color: #3182ce !important; font-weight: 600 !important; }
.fn-modal-body li a:hover { color: #36c !important; }

.tocnumber, .toctext { display: inline !important; color: #4a5568 !important; }
.tocnumber { margin-right: 6px !important; font-weight: 600 !important; }
.toctoggle, .toctogglespan { display: none !important; }

/* ==========================================================================
   ⚙️ 6. SAYFA İÇİNDEKİ O İNATÇI BOŞ GRİ TOC KUTUSUNU KESİN OLARAK YOK ETME
   ========================================================================== */
.mw-body .toc, .mw-body #toc, .mw-body .mw-toc, .mw-body-content .toc, .mw-body-content #toc, #mw-content-text > .toc, #mw-content-text > #toc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mobil Ekran Parmak Hizası Ayarı */
@media screen and (max-width: 850px) {
    .fn-floating-btn-group { bottom: 20px !important; right: 20px !important; gap: 10px !important; }
}