/* --- DEĞİŞKENLER --- */
:root {
    --myeco-bg-page: #202125;
    --myeco-bg-card: #2C2D33; 
    --myeco-bg-review: #202125; 
    --myeco-bg-bubble: rgba(255, 255, 255, 0.04);
    --myeco-bg-input: rgba(255, 255, 255, 0.05);
    --myeco-text-main: #ffffff;
    --myeco-text-muted: #9aa0a6;
    --myeco-border: rgba(255, 255, 255, 0.08);
    --myeco-blue: #3d81fd;
    --myeco-blue-glow: rgba(61, 129, 253, 0.1);

    --myeco-c-blue: #0c83ff;
    --myeco-c-red: #ff4757;
    --myeco-c-green: #37C187;
    --myeco-c-star: #f5c518;

    /* DESTEK TALEBİ (TICKET) VE TEST ÖZEL RENKLERİ */
    --myeco-c-support: #8e44ad; 
    --myeco-c-test: #e84393; 

    /* Status Renkleri */
    --myeco-c-status-open: #2ed573;        
    --myeco-c-status-closed: #747d8c;      
    --myeco-c-status-customer: #ffa502;    
    --myeco-c-status-answered: #1e90ff;    
    --myeco-c-status-processing: #9b59b6;  

    /* Priority Renkleri */
    --myeco-c-priority-high: #ff4757;      
    --myeco-c-priority-medium: #ffa502;    
    --myeco-c-priority-low: #70a1ff;    
    
    --bg-dark: #0d1117;
    --card-bg: #161b22;
    --border-color: #30363d;
    --text-bright: #f0f6fc;
    
    --myeco-online-bg-page: #0d1117;
    --myeco-online-bg-card: #161b22;
    --myeco-online-border-color: #30363d;
    --myeco-online-text-main: #c9d1d9;
    --myeco-online-text-bright: #f0f6fc;
    --myeco-online-text-muted: #8b949e;
    --myeco-online-blue: #3d81fd;

    /* Durum Renkleri */
    --myeco-online-status-baslandi: #1e90ff;     
    --myeco-online-status-yapildi: #2ed573;      
    --myeco-online-status-onay-bekliyor: #ffa502;
    --myeco-online-status-eksik: #9b59b6;        
    --myeco-online-status-reddedildi: #ff4757;  
    --myeco-online-status-yapilmadi: #E64D48;
    --myeco-online-status-bekliyor: #a4b0be;  
    
    --myecoplatform-bg: #0b0f17;
    --myecoplatform-card: #141517;
    --myecoplatform-card-inner: #0d121c;
    --myecoplatform-border: rgba(77, 77, 81, 0.1);
    --myecoplatform-border-hover: rgba(13, 110, 253, 0.45);
    --myecoplatform-primary: #0d6efd;
    --myecoplatform-text-muted: #8b9bb4;
    
}

* { box-sizing: border-box; }

/* ============================================================
           ANA PLATFORM
           ============================================================ */
/* Ana Kart Yapısı */
        .myecoplatform-card {
            background-color: var(--myecoplatform-card);
            border: 1px solid var(--myecoplatform-border);
            border-radius: 6px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .myecoplatform-card:hover {
            border-color: var(--myecoplatform-border-hover);
        }

        .myecoplatform-card-inner {
            background-color: var(--myecoplatform-card-inner);
            border: 1px solid var(--myecoplatform-border);
            border-radius: 8px;
        }

        /* Tamamlanmamış Sipariş Kartı Vurgusu */
        .myecoplatform-course-unpaid {
            border-color: rgba(220, 53, 69, 0.4) !important;
            background: linear-gradient(180deg, rgba(220, 53, 69, 0.05) 0%, var(--myecoplatform-card) 100%);
        }

        /* Sağa-Sola Kaydırılabilir Sekme Mimarisi */
        .myecoplatform-tabs-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
            flex: 1 1 auto;
        }

        .myecoplatform-tabs-scrollbox {
            width: 100%;
            overflow-x: auto !important;
            overflow-y: hidden;
            white-space: nowrap !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            padding: 2px 0;
        }

        .myecoplatform-tabs-scrollbox::-webkit-scrollbar {
            display: none !important;
        }

        .myecoplatform-nav-pills {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 0.35rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .myecoplatform-nav-item {
            flex: 0 0 auto !important;
        }

        .myecoplatform-nav-link {
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--myecoplatform-text-muted);
            padding: 0.45rem 0.95rem;
            border-radius: 6px;
            background-color: transparent;
            border: 1px solid transparent;

            transition: all 0.15s ease;
            white-space: nowrap !important;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            text-decoration: none;
        }

        .myecoplatform-nav-link:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.05);
        }

        .myecoplatform-nav-link.active {
            color: #fff;
            background-color: var(--myecoplatform-primary);
            border-color: var(--myecoplatform-primary);
        }

        /* Sekme Kaydırma Ok Butonları */
        .myecoplatform-tab-scroll-btn {
            background-color: #171f2d;
            border: 1px solid var(--myecoplatform-border);
            color: var(--myecoplatform-text-muted);
            width: 28px;
            height: 32px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.15s ease;
            padding: 0;
        }

        .myecoplatform-tab-scroll-btn:hover {
            background-color: #202b3e;
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
        }

        .myecoplatform-tab-scroll-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* ================= ÖZEL ÇERÇEVESİZ ARAMA KUTUSU VE UYUMLU ÇARPI İKONU ================= */
        .myecoplatform-search-group {
            background-color: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding: 0.2rem 0.5rem;
            transition: border-color 0.2s ease, background-color 0.2s ease;
            position: relative;
        }

        .myecoplatform-search-group:focus-within {
            border-color: rgba(13, 110, 253, 0.5);
            background-color: rgba(0, 0, 0, 0.5);
        }

        .myecoplatform-search-icon {
            color: var(--myecoplatform-text-muted);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            padding-right: 0.35rem;
            flex-shrink: 0;
        }

        .myecoplatform-search-input {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            color: #ffffff !important;
            font-size: 0.82rem;
            padding: 0.25rem 0.25rem;
            width: 100%;
        }

        .myecoplatform-search-input::placeholder {
            color: var(--myecoplatform-text-muted);
            opacity: 0.8;
        }

        /* Özel Uyumlu Çarpı (Temizle) Butonu */
        .myecoplatform-search-clear {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            color: var(--myecoplatform-text-muted);
            font-size: 1.05rem;
            padding: 0 0.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color 0.15s ease, transform 0.15s ease;
            line-height: 1;
            flex-shrink: 0;
        }

        .myecoplatform-search-clear:hover {
            color: #ffffff;
            transform: scale(1.1);
        }

        /* Tamamlanmamış Butonu ve Badge */
        .myecoplatform-btn-unpaid {
            font-size: 0.82rem;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid rgba(220, 53, 69, 0.55);
            background-color: rgba(220, 53, 69, 0.08);
            color: #fca5a5;
            padding: 0.42rem 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            transition: all 0.18s ease-in-out;
            line-height: 1;
            text-decoration: none;
            cursor: pointer;
        }

        .myecoplatform-btn-unpaid .myecoplatform-unpaid-icon {
            font-size: 0.95rem;
            color: #ef4444;
            transition: color 0.18s ease;
            display: inline-flex;
            align-items: center;
        }

        .myecoplatform-btn-unpaid .myecoplatform-unpaid-badge {
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            background-color: #dc3545;
            color: #ffffff;
            border-radius: 50rem;
            padding: 0.22rem 0.45rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.18s ease;
        }

        .myecoplatform-btn-unpaid:hover {
            background-color: rgba(220, 53, 69, 0.18);
            border-color: #ef4444;
            color: #ffffff;
        }

        .myecoplatform-btn-unpaid.active {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #ffffff !important;
            box-shadow: 0 0 12px rgba(220, 53, 69, 0.45);
        }

        .myecoplatform-btn-unpaid.active .myecoplatform-unpaid-icon {
            color: #ffffff !important;
        }

        .myecoplatform-btn-unpaid.active .myecoplatform-unpaid-badge {
            background-color: #ffffff !important;
            color: #dc3545 !important;
        }

        /* Çizgisiz ve Şeffaf Üç Nokta Menü Butonu */
        .myecoplatform-btn-dots {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            text-decoration: none !important;
            padding: 0.25rem 0.4rem !important;
            color: var(--myecoplatform-text-muted) !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1 !important;
        }

        .myecoplatform-btn-dots:hover,
        .myecoplatform-btn-dots:focus,
        .myecoplatform-btn-dots:active {
            text-decoration: none !important;
            color: #ffffff !important;
        }

        .myecoplatform-btn-dots::after {
            display: none !important;
        }

        /* Yüksek Kontrastlı Özel Rozetler */
        .myecoplatform-badge {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 0.32rem 0.65rem;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .myecoplatform-badge-blue {
            background: rgba(61, 129, 253, 0.2);
            color: #ffffff !important;
        }

        .myecoplatform-badge-coral {
            background-color: #b71c1c;
            color: #ffffff !important;
            border: 1px solid #e53935;
        }

        .myecoplatform-badge-purple {
            background-color: #4a148c;
            color: #ffffff !important;
            border: 1px solid #7b1fa2;
        }

        .myecoplatform-badge-paid {
            background: rgba(13, 149, 105, 0.2);
            color: #6ee7b7 !important;
        }

        .myecoplatform-badge-unpaid {
            background-color: #7f1d1d;
            color: #fca5a5 !important;
            border: 1px solid #dc3545;
        }

        /* Ürün Kapak Görseli */
        .myecoplatform-img-frame {
            width: 125px;
            height: 155px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background-color: #0b1019;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
            flex-shrink: 0;
            position: relative;
        }

        .myecoplatform-img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Boş Durum Kartı */
        .myecoplatform-empty-card {
            background-color: rgba(255, 255, 255, 0.015);
            border: 1px dashed rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 2.25rem 1.25rem;
            text-align: center;
        }

        /* Tipografi Yardımcıları */
        .myecoplatform-text-muted { color: var(--myecoplatform-text-muted); }
        .myecoplatform-fs-xs { font-size: 0.72rem; }
        .myecoplatform-fs-sm { font-size: 0.82rem; }

        @media (max-width: 575.98px) {
            body { padding: 0.75rem; }
            .myecoplatform-actions-group {
                flex-direction: column;
                width: 100%;
            }
            .myecoplatform-actions-group .btn {
                width: 100%;
                justify-content: center;
            }
        }

        .myecoplatform-btn-xp {
            font-size: 0.82rem;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid rgba(245, 158, 11, 0.45);
            background-color: rgba(245, 158, 11, 0.08);
            color: #fde68a;
            padding: 0.42rem 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            transition: all 0.18s ease-in-out;
            line-height: 1;
            text-decoration: none;
            cursor: pointer;
        }

        .myecoplatform-btn-xp .myecoplatform-xp-btn-icon {
            font-size: 0.95rem;
            color: #f59e0b;
            transition: color 0.18s ease;
        }

        .myecoplatform-btn-xp .myecoplatform-xp-btn-badge {
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            background-color: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 50rem;
            padding: 0.22rem 0.45rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.18s ease;
        }

        .myecoplatform-btn-xp:hover {
            background-color: rgba(245, 158, 11, 0.18);
            border-color: #fbbf24;
            color: #ffffff;
        }

        .myecoplatform-btn-xp.active {
            background-color: #f59e0b !important;
            border-color: #f59e0b !important;
            color: #0b0f17 !important;
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
        }

        .myecoplatform-btn-xp.active .myecoplatform-xp-btn-icon {
            color: #0b0f17 !important;
        }

        .myecoplatform-btn-xp.active .myecoplatform-xp-btn-badge {
            background-color: #0b0f17 !important;
            color: #fbbf24 !important;
            border-color: #0b0f17 !important;
        }


/* ================= ARAMA VE AKSİYON ALANI (MOBİL UYUMLU) ================= */
.myecoplatform-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

/* Arama Grubu (Mobilde Kalan Alanı Kaplar, Asla Taşma Yaptırmaz) */
.myecoplatform-search-group {
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.45rem;
    min-width: 0 !important; /* Mobilde taşmayı önleyen kritik kural */
    flex: 1 1 auto;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.myecoplatform-search-group:focus-within {
    border-color: rgba(13, 110, 253, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
}

.myecoplatform-search-icon {
    color: var(--myecoplatform-text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    padding-right: 0.25rem;
    flex-shrink: 0;
}

.myecoplatform-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 0.78rem;
    padding: 0.15rem 0.2rem;
    width: 100%;
    min-width: 0;
}

.myecoplatform-search-input::placeholder {
    color: var(--myecoplatform-text-muted);
    opacity: 0.75;
}

.myecoplatform-search-clear {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--myecoplatform-text-muted);
    font-size: 0.95rem;
    padding: 0 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

/* ================= AKSİYON BUTONLARI (TAMAMLANMAMIŞ & XP MERKEZİ) ================= */
.myecoplatform-btn-unpaid,
.myecoplatform-btn-xp {
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.38rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0; /* Butonların büzüşmesini engeller */
    white-space: nowrap;
}

/* Tamamlanmamış Butonu */
.myecoplatform-btn-unpaid {
    border: 1px solid rgba(220, 53, 69, 0.55);
    background-color: rgba(220, 53, 69, 0.1);
    color: #fca5a5;
}

.myecoplatform-btn-unpaid .myecoplatform-unpaid-badge {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    background-color: #dc3545;
    color: #ffffff;
    border-radius: 50rem;
    padding: 0.18rem 0.38rem;
}

.myecoplatform-btn-unpaid.active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.myecoplatform-btn-unpaid.active .myecoplatform-unpaid-badge {
    background-color: #ffffff !important;
    color: #dc3545 !important;
}

/* XP Merkezi Butonu */
.myecoplatform-btn-xp {
    border: 1px solid rgba(245, 158, 11, 0.45);
    background-color: rgba(245, 158, 11, 0.1);
    color: #fde68a;
}

.myecoplatform-btn-xp .myecoplatform-xp-btn-badge {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    background-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 50rem;
    padding: 0.18rem 0.38rem;
}

.myecoplatform-btn-xp.active {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #0b0f17 !important;
}

.myecoplatform-btn-xp.active .myecoplatform-xp-btn-badge {
    background-color: #0b0f17 !important;
    color: #fbbf24 !important;
}

/* ================= DESKTOP (GENİŞ EKRAN) DÜZENİ ================= */
@media (min-width: 992px) {
    .myecoplatform-controls-row {
        width: auto;
    }
    .myecoplatform-search-group {
        width: 220px;
        flex: 0 0 220px;
    }
}
/* ============================================================
           MYECO DASHBOARD İZOLE CSS (TEMİZLENMİŞ)
           ============================================================ */

/* --- KATEGORİ BAŞLIK VE KONTROLLER --- */
        .myeco-dash-section {
            margin-bottom: 5px;
            position: relative;
        }

        .myeco-dash-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #30363d;
        }

        .myeco-dash-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #f0f6fc;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .myeco-dash-title i {
            color: #3d81fd;
            font-size: 1.5rem;
        }

        /* Swiper Yön Tuşları (Custom) */
        .myeco-dash-controls {
            display: flex;
            gap: 10px;
        }

        .myeco-dash-btn-nav {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #161b22;
            border: 1px solid #30363d;
            color: #c9d1d9;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
            font-size: 1.1rem;
        }

        .myeco-dash-btn-nav:hover:not(.swiper-button-disabled) {
            background: #1c2128;
            color: #f0f6fc;
            border-color: rgba(255, 255, 255, 0.15);
        }

        .myeco-dash-btn-nav.swiper-button-disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* --- SWIPER YAPILANDIRMASI --- */
        .swiper {
            width: 100%;
            padding-bottom: 10px;
        }

        .swiper-slide {
            height: auto; 
        }

        /* --- EĞİTİM KARTLARI (SADECE DIŞ KAPSAYICI KALDI) --- */
        .myeco-dash-card {
            height: 100%; 
            /* padding: 20px; Eğer kendi kart tasarımının padding'i varsa burayı kaldırabilirsin */
            display: flex;
            flex-direction: column;
            transition: transform 0.2s, box-shadow 0.2s;
            user-select: none; 
            -webkit-user-select: none;
            overflow: hidden; /* İçerik taşmalarını önlemek için eklendi */
        }

        /* --- EMPTY STATE (BOŞ DURUM KARTI - DEĞİŞTİRİLMEDİ) --- */
        .myeco-dash-empty {
            width: 100%;
            background: rgba(255, 255, 255, 0.01);
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: 0.2s;
        }

        .myeco-dash-empty:hover {
            border-color: rgba(61, 129, 253, 0.4);
            background: rgba(61, 129, 253, 0.02);
        }

        .myeco-dash-empty > i {
            font-size: 3rem;
            color: #8b949e;
            margin-bottom: 15px;
            opacity: 0.6;
        }

        .myeco-dash-empty-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #c9d1d9;
            margin-bottom: 8px;
        }

        .myeco-dash-empty-desc {
            font-size: 0.95rem;
            color: var(--myeco-dash-text-muted);
            margin-bottom: 25px;
            max-width: 500px;
        }

        .myeco-dash-empty-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap; 
            width: 100%;
        }

        .myeco-dash-btn-outline {
            background: rgba(255, 255, 255, 0.03);
            color: #8b949e;
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .myeco-dash-btn-outline i {
            font-size: 1.3rem;
            color: #3d81fd;
        }

        .myeco-dash-btn-outline:hover {
            background: rgba(61, 129, 253, 0.1);
            border-color: rgba(61, 129, 253, 0.5);
            color: #fff;
            transform: translateY(-2px);
        }

        /* --- MOBİL UYUM --- */
        @media (max-width: 768px) {
            .myeco-dash-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            .myeco-dash-controls {
                align-self: flex-end; 
            }
            .myeco-dash-empty-actions {
                flex-direction: column;
                gap: 10px;
            }
            .myeco-dash-btn-outline {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }
        }


/* =========================================
   SOSYAL CSS 
   ========================================= */

/* --- GLOBAL ELEMENTLER --- */
.myeco-hashtag { color: var(--myeco-c-blue); text-decoration: none; font-weight: 500; }
.myeco-hashtag:hover { text-decoration: underline; opacity: 0.8; }
.myeco-channel { color: var(--myeco-c-green); font-weight: 600; text-decoration: none; margin-left: 4px; }
.myeco-channel:hover { text-decoration: underline; opacity: 0.8; }
.myeco-avatar-sm { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.myeco-avatar-md { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.myeco-avatar-circle { border-radius: 50%; } 

.myeco-section-title { width: 100%; color: var(--myeco-text-muted); border-bottom: 1px solid var(--myeco-border); padding-bottom: 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

/* =========================================
   1. UNIVERSAL FEED KARTI
   ========================================= */
.myeco-feed-card {
    background-color: var(--myeco-bg-card);
    width: 100%; margin: 0 auto 30px auto;
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
    border: 1px solid rgba(255,255,255,0.02);
}

.myeco-card-header { padding: 10px 12px; display: flex; align-items: center; border-bottom: 1px solid var(--myeco-border); gap: 12px; }
.myeco-header-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.myeco-header-title { font-size: 13px; font-weight: 500; color: #fff; margin: 0; display: flex; align-items: center; gap: 8px; }
.myeco-header-subtitle { font-size: 12px; color: var(--myeco-text-muted); margin-top: 2px; }
.myeco-stars { color: var(--myeco-c-star); font-size: 13px; display: inline-flex; gap: 2px; }
.myeco-menu-trigger { color: var(--myeco-text-muted); cursor: pointer; font-size: 22px; transition: 0.2s; background: none; border: none; padding: 0; display: flex; align-items: center;margin-left: auto; align-self: flex-start; }
.myeco-menu-trigger:hover { color: #fff; }

.myeco-card-content { padding: 12px 16px; font-size: 14px; margin: 0; white-space: pre-line; }



/* =========================================
   URL PREVIEW (LİNK ÖNİZLEME)
   ========================================= */
.myeco-url-preview-wrapper {
    padding: 0 16px 16px 16px;
}
.myeco-url-preview {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.2s ease;
}
.myeco-url-preview:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.myeco-url-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: #000;
}
.myeco-url-info {
    flex: 1;
    padding: 12px 14px;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.myeco-url-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myeco-url-desc {
    font-size: 12px;
    color: var(--myeco-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.myeco-url-icon {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--myeco-text-muted);
    font-size: 20px;
    flex-shrink: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    transition: color 0.2s;
}
.myeco-url-preview:hover .myeco-url-icon {
    color: var(--myeco-c-blue);
}

/* =========================================
   STUDYROOM & DESTEK BİLEŞENLERİ
   ========================================= */
.myeco-study-banner-wrapper { padding: 12px 16px 0 16px; }
.myeco-study-banner {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    background: rgba(12, 131, 255, 0.1); border: 1px solid rgba(12, 131, 255, 0.2);
    padding: 12px 16px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease;
}
.myeco-study-banner:hover { background: rgba(12, 131, 255, 0.15); }

.myeco-study-banner.support-banner { background: rgba(142, 68, 173, 0.1); border-color: rgba(142, 68, 173, 0.2); }
.myeco-study-banner.support-banner:hover { background: rgba(142, 68, 173, 0.15); }

.myeco-study-banner.test-banner { background: rgba(232, 67, 147, 0.1); border-color: rgba(232, 67, 147, 0.2); }
.myeco-study-banner.test-banner:hover { background: rgba(232, 67, 147, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232, 67, 147, 0.1); }

.myeco-study-icon {
    background: var(--myeco-c-blue); color: #fff; width: 36px; height: 36px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.myeco-study-icon.support-icon { background: var(--myeco-c-support); }
.myeco-study-icon.test-icon { background: var(--myeco-c-test); }

.myeco-study-title { flex: 1; font-size: 15px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }

.myeco-study-chevron { color: var(--myeco-text-muted); font-size: 20px; transition: transform 0.3s ease; margin-left: auto; }
.myeco-study-banner:not(.collapsed) .myeco-study-chevron { transform: rotate(180deg); }

.myeco-study-details { padding: 16px; font-size: 14px; line-height: 1.6; color: #e0e0e0; }
.myeco-study-details p { margin-bottom: 12px; }
.myeco-study-details p:last-of-type { margin-bottom: 0; }

.myeco-ticket-meta-bar { 
    display: flex; gap: 8px; padding: 12px 16px; background: rgba(0,0,0,0.15); 
    margin-top: 12px; border-top: 1px solid var(--myeco-border); border-bottom: 1px solid var(--myeco-border);
}
.myeco-ticket-badge {
    flex: 1; font-size: 11px; font-weight: 700; padding: 6px 8px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.myeco-ticket-badge i { font-size: 14px; }
.myeco-ticket-badge.id { color: #fff; background: rgba(255,255,255,0.08); }
.myeco-ticket-badge.category { color: var(--myeco-c-blue); background: rgba(12, 131, 255, 0.15); }
.myeco-ticket-badge.priority-high { color: var(--myeco-c-priority-high); background: rgba(255, 71, 87, 0.15); }
.myeco-ticket-badge.priority-medium { color: var(--myeco-c-priority-medium); background: rgba(255, 165, 2, 0.15); }
.myeco-ticket-badge.priority-low { color: var(--myeco-c-priority-low); background: rgba(112, 161, 255, 0.15); }
.myeco-ticket-badge.status-open { color: var(--myeco-c-status-open); background: rgba(46, 213, 115, 0.15); }
.myeco-ticket-badge.status-closed { color: var(--myeco-c-status-closed); background: rgba(116, 125, 140, 0.15); }
.myeco-ticket-badge.status-customer { color: var(--myeco-c-status-customer); background: rgba(255, 165, 2, 0.15); }
.myeco-ticket-badge.status-answered { color: var(--myeco-c-status-answered); background: rgba(30, 144, 255, 0.15); }
.myeco-ticket-badge.status-processing { color: var(--myeco-c-status-processing); background: rgba(155, 89, 182, 0.15); }

.myeco-custom-file-placeholder {
    margin-top: 16px; padding: 20px; border: 1px dashed rgba(255,255,255,0.2); 
    border-radius: 12px; text-align: center; color: var(--myeco-text-muted); font-size: 13px;
}
.myeco-comment-file-placeholder {
    margin-top: 8px; padding: 12px; border: 1px dashed rgba(255,255,255,0.2); 
    border-radius: 8px; text-align: center; color: var(--myeco-text-muted); font-size: 12px;
}

/* =========================================
   BULLETPROOF MEDYA ALANLARI
   ========================================= */
.myeco-media-area { width: 100%; display: grid; gap: 2px; background: #000; overflow: hidden; }

.myeco-media-area > a {
    display: block; position: relative; width: 100%; height: 100%;
    min-height: 0; min-width: 0; overflow: hidden; text-decoration: none;
}
.myeco-media-item { width: 100%; height: 100%; object-fit: cover; display: block; border: none; }

.myeco-grid-1 { aspect-ratio: 16/9; grid-template-columns: 1fr; }
.myeco-grid-2 { aspect-ratio: 21/9; grid-template-columns: 1fr 1fr; }
.myeco-grid-3 { aspect-ratio: 16/9; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; }
.myeco-grid-3 > a:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.myeco-grid-3 > a:nth-child(2) { grid-column: 2; grid-row: 1; }
.myeco-grid-3 > a:nth-child(3) { grid-column: 2; grid-row: 2; }
.myeco-grid-4 { aspect-ratio: 16/9; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.myeco-grid-5 { aspect-ratio: 16/9; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; }

.myeco-grid-5 > a:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.myeco-grid-5 > a:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.myeco-grid-5 > a:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.myeco-grid-5 > a:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.myeco-grid-5 > a:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }

.myeco-more-layer::after {
    content: attr(data-more); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff; cursor: pointer; transition: background 0.2s;
}
.myeco-more-layer:hover::after { background: rgba(0,0,0,0.75); }

.myeco-video-box { width: 100%; aspect-ratio: 16/9; background: #000; display: flex; align-items: center; justify-content: center; }

/* =========================================
   BLOG (FEED ÖZET KUTUSU)
   ========================================= */
.myeco-blog-box { display: block; width: 100%; aspect-ratio: 16/9; position: relative; text-decoration: none; overflow: hidden; background: #000;}
.myeco-blog-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px 20px 20px 20px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); }
.myeco-blog-badge { background: var(--myeco-c-blue); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; display: inline-block; margin-bottom: 8px; }
.myeco-blog-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }

/* =========================================
   BLOG DETAY (OKUMA) GÖRÜNÜMÜ
   ========================================= */
.myeco-blog-detail-cover-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--myeco-border);
    background-color: #000;
}
.myeco-blog-detail-cover-wrapper .myeco-blog-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.myeco-blog-detail-cover { 
    width: 100%; max-height: 280px; object-fit: cover; display: block; 
}
.myeco-blog-detail-body { padding: 20px 16px 16px 16px; }
.myeco-blog-detail-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 16px 0; line-height: 1.35; }
.myeco-blog-detail-text { font-size: 15px; line-height: 1.65; color: #d1d5db; }
.myeco-blog-detail-text p { margin: 0 0 16px 0; }
.myeco-blog-detail-text p:last-child { margin-bottom: 0; }

.myeco-blog-detail-body .myeco-media-area { border-radius: 8px; margin-top: 20px; }

/* =========================================
   KART AKSİYONLARI (Beğen, Yorum, Paylaş, İstatistik)
   ========================================= */
.myeco-card-actions { padding: 10px 16px; display: flex; gap: 10px; background: rgba(0,0,0,0.1); }
.myeco-btn-action { 
    flex: 1; border: none; background: rgba(255,255,255,0.05); color: var(--myeco-text-muted); 
    padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease;
}
.myeco-btn-action:hover { color: #fff; transform: translateY(-1px); }
.myeco-btn-action i { font-size: 18px; flex-shrink: 0; }
.myeco-btn-action span:not(.myeco-count-pill) { margin-left: 6px; margin-right: 6px; }
.myeco-count-pill { font-size: 11px; background: rgba(0,0,0,0.25); padding: 1px 6px; border-radius: 5px; font-weight: 500; flex-shrink: 0; margin-left: auto; }

.myeco-btn-action.icon-only {
    flex: 0 0 auto; 
    padding: 0 14px; 
    margin-left: auto !important; 
}
.myeco-btn-action.stat-btn:hover { color: var(--myeco-text-main); background-color: rgba(255,255,255,0.1); }

/* Hover & Active Renklendirmeler */
.myeco-btn-action.like:hover, .myeco-btn-action.like.active { color: var(--myeco-c-red); background-color: rgba(255, 107, 107, 0.15); }
.myeco-btn-action.like:hover i, .myeco-btn-action.like.active i { font-weight: bold; }
.myeco-btn-action.comment:hover, .myeco-btn-action.comment.active { color: var(--myeco-c-blue); background-color: rgba(12, 131, 255, 0.15); }
.myeco-btn-action.comment:hover i, .myeco-btn-action.comment.active i { font-weight: bold; }
.myeco-btn-action.share:hover, .myeco-btn-action.share.active { color: var(--myeco-c-green); background-color: rgba(46, 213, 115, 0.15); }
.myeco-btn-action.share:hover i, .myeco-btn-action.share.active i { font-weight: bold; }


/* =========================================
   2. YORUM VE SOHBET BALONLARI (BUBBLE)
   ========================================= */
.myeco-comments-area { padding: 16px 16px 0 16px; background-color: rgba(0, 0, 0, 0.15); border-top: 1px solid var(--myeco-border); }
.myeco-comment-thread { display: flex; flex-direction: column; gap: 16px; }

.myeco-comment-item { display: flex; gap: 10px; }
.myeco-bubble { 
    background-color: var(--myeco-bg-bubble); padding: 10px 14px 8px 14px; 
    border-radius: 0 14px 14px 14px; flex: 1; min-width: 0; display: flex; flex-direction: column; 
    position: relative;
}
.myeco-bubble-black { background-color: #000; border: 1px solid rgba(255,255,255,0.05); }

.myeco-bubble-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.myeco-bubble-name { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.myeco-bubble-time { font-size: 11px; color: var(--myeco-text-muted); font-weight: 400; margin-top: 2px;}
.myeco-bubble-text { font-size: 13px; color: #e0e0e0; margin: 0; white-space: pre-wrap; padding-right: 5px;}

.myeco-bubble-divider { height: 1px; background: var(--myeco-border); margin: 8px 0; }

.myeco-bubble-actions { display: flex; align-items: center; justify-content: space-between; }
.myeco-btn-bare { background: none; border: none; color: var(--myeco-text-muted); font-size: 12px; font-weight: 500; padding: 0; cursor: pointer; transition: 0.2s; }
.myeco-btn-bare:hover { color: #fff; }
.myeco-btn-bare.active { color: rgba(255, 71, 87, 0.7); }
.myeco-like-small { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--myeco-text-muted); background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 10px; border: none; cursor: pointer; transition: 0.2s; }
.myeco-like-small.active { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--myeco-text-muted); background: rgba(255, 71, 87, 0.1); padding: 4px 8px; border-radius: 10px; border: none; cursor: pointer; transition: 0.2s; }
.myeco-like-small:hover { background: rgba(255, 71, 87, 0.2); color: #fff; }
.myeco-like-small i { color: var(--myeco-text-muted); font-size: 14px; }
.myeco-like-small.active i { color: var(--myeco-c-red); font-size: 14px; }

/* =========================================
   DAHA FAZLA YÜKLE BUTONLARI
   ========================================= */
.myeco-load-more-comments { width: 100%; margin-top: 12px; margin-bottom: 16px; }
.myeco-btn-load-comments {
    width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); 
    color: var(--myeco-text-muted); font-size: 13px; font-weight: 600; 
    cursor: pointer; transition: 0.2s; padding: 10px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.myeco-btn-load-comments:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.myeco-load-more-posts { margin: 0 auto 40px auto; width: 100%; }
.myeco-btn-load-posts {
    width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); 
    color: var(--myeco-text-muted); font-size: 14px; font-weight: 400; 
    cursor: pointer; transition: all 0.2s ease; padding: 14px; border-radius: 8px; 
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.myeco-btn-load-posts:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* =========================================
   3. YORUM TETİKLEYİCİ VE YENİ MODERN INPUT ALANI
   ========================================= */
.myeco-comment-trigger {
    padding: 14px 16px; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--myeco-text-muted); cursor: pointer; border-top: 1px solid var(--myeco-border);
    transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(0,0,0,0.1);
}
.myeco-comment-trigger:hover { background-color: rgba(0,0,0,0.25); color: #fff; }
.myeco-comment-trigger i { font-size: 18px; }
.myeco-comment-trigger[aria-expanded="true"] { display: none; }

.myeco-input-area { background: rgba(0,0,0,0.15); padding: 16px; border-top: 1px solid var(--myeco-border); display: flex; flex-direction: column; }
.myeco-textarea-wrapper {
    flex: 1; background: var(--myeco-bg-input); border-radius: 7px; padding: 6px 8px 6px 16px; 
    display: flex; align-items: flex-end; border: 1px solid rgba(255,255,255,0.05); 
    transition: border-color 0.2s, background 0.2s; min-height: 48px;
}
.myeco-textarea-wrapper:focus-within { border-color: rgba(12, 131, 255, 0.4); background: rgba(255,255,255,0.08); }

.myeco-textarea-wrapper textarea {
    flex: 1; background: transparent; border: none; color: #fff; font-size: 14px; line-height: 20px;
    outline: none; resize: none; min-height: 36px; max-height: 120px; font-family: inherit;
    padding: 8px 10px 8px 0; margin: 0;
}
.myeco-textarea-wrapper textarea::placeholder { color: var(--myeco-text-muted); }

.myeco-input-actions { display: flex; align-items: center; gap: 4px; padding-bottom: 1px; }
.myeco-btn-attach { 
    background: transparent; border: none; color: var(--myeco-text-muted); font-size: 20px; 
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: 0.2s; flex-shrink: 0;
}
.myeco-btn-attach:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.myeco-btn-cancel { 
    background: rgba(255, 255, 255, 0.1); border: none; color: var(--myeco-text-muted); font-size: 20px; 
    width: 34px; height: 34px; border-radius: 10%; display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: 0.2s; flex-shrink: 0;
}
.myeco-btn-cancel:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.myeco-btn-send {
    background-color: var(--myeco-c-blue); color: #fff; border: none;
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px;
    cursor: pointer; flex-shrink: 0; transition: transform 0.2s, background-color 0.2s;
}
.myeco-btn-send:hover { background-color: #006bce; transform: scale(1.05); }
.myeco-btn-w {
    width: 34px; height: 34px;
}

/* =========================================
   MODERN FANCYBOX OVERRIDES 
   ========================================= */
.fancybox-bg { background: rgba(15, 15, 18, 0.98); }

.fancybox-toolbar { background: transparent !important; padding: 15px; }
.fancybox-toolbar .fancybox-button {
    background: rgba(255, 255, 255, 0.1) !important; border-radius: 50%;
    color: #fff !important; transition: all 0.2s ease; margin: 0 5px;
}
.fancybox-toolbar .fancybox-button:hover { background: rgba(255, 255, 255, 0.25) !important; transform: scale(1.05); }

.fancybox-infobar { display: none !important; }

.fancybox-thumbs { background: #141517 !important; border-left: 1px solid rgba(255,255,255,0.05); }
.fancybox-thumbs__list a { background-color: var(--myeco-bg-card) !important; border-radius: 6px; overflow: hidden; }
.fancybox-thumbs__list a::before { border: 3px solid var(--myeco-c-blue) !important; border-radius: 6px; }

.fancybox-caption { background: transparent !important; padding-bottom: 40px !important; text-align: center; }
.fancybox-caption__body {
    display: inline-block; background: rgba(20, 21, 23, 0.85) !important; 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px; border-radius: 30px; color: #fff !important;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    line-height: 1.5; max-width: 80%;
}

/* --- MOBİL AYARLAR --- */
@media (max-width: 576px) {
    .myeco-mob-hide { display: none !important; }
    .myeco-btn-action span:not(.myeco-count-pill) { display: none; } 
    .myeco-btn-action { justify-content: center; gap: 5px; }
    .myeco-ticket-meta-bar { flex-wrap: wrap; }
    .myeco-ticket-badge { flex-basis: 40%; }
    .fancybox-caption__body { max-width: 95%; font-size: 13px; padding: 10px 16px; }
    .myeco-url-img { width: 80px; height: 80px; }
    .myeco-url-title { font-size: 13px; }
    .myeco-url-desc { font-size: 11px; }
}

.myeco-card-content,
.myeco-bubble-text {
white-space: normal;
}/* =========================================
   EVRENSEL İKON BUTONLARI (TAKİP/ENGEL)
   Her yerde kullanılabilir bağımsız yapı
   ========================================= */
.myeco-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    margin-left: 8px; /* Yan yana dizilimler için standart boşluk */
}

/* 1. Takip Et (Follow) */
.myeco-icon-btn.follow {
    background-color: var(--myeco-c-blue);
    color: #fff;
    border: none;
}
.myeco-icon-btn.follow:hover {
    background-color: #006bce;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(12, 131, 255, 0.3);
}

/* 2. Takibi Bırak / Takip Ediliyor (Unfollow) */
.myeco-icon-btn.unfollow {
    background-color: transparent;
    color: var(--myeco-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.myeco-icon-btn.unfollow:hover {
    background-color: rgba(255, 71, 87, 0.1);
    color: var(--myeco-c-red);
    border-color: var(--myeco-c-red);
}

/* 3. Onay Bekliyor (Pending) */
.myeco-icon-btn.pending {
    background-color: rgba(255, 165, 2, 0.1);
    color: var(--myeco-c-priority-medium);
    border: 1px solid rgba(255, 165, 2, 0.2);
}
.myeco-icon-btn.pending:hover {
    background-color: rgba(255, 165, 2, 0.2);
}

/* 4. Engelle (Block) */
.myeco-icon-btn.block {
    background-color: rgba(255, 71, 87, 0.1);
    color: var(--myeco-c-red);
    border: 1px solid rgba(255, 71, 87, 0.15);
}
.myeco-icon-btn.block:hover {
    background-color: rgba(255, 71, 87, 0.2);
    color: #fff;
    transform: scale(1.05);
}

/* 4. Engeli Kaldır (Block) */
.myeco-icon-btn.unblock {
    background-color: rgba(255, 165, 2, 0.1);
    color: var(--myeco-c-priority-medium);
    border: 1px solid rgba(255, 165, 2, 0.2);
}
.myeco-icon-btn.unblock:hover {
    background-color: rgba(255, 165, 2, 0.2);
}

/* =========================================
   KULLANICI LİSTELEME KARTLARI (Followers/Likers)
   ========================================= */
.myeco-user-list-container {
    background-color: var(--myeco-bg-card);
    width: 100%; 
    margin: 0 auto 30px auto;
    border-radius: 10px; 
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.myeco-user-list-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--myeco-border);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.1);
}

.myeco-user-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--myeco-border);
    transition: background-color 0.2s;
}
.myeco-user-item:last-child {
    border-bottom: none;
}
.myeco-user-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.myeco-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 14px;
}

.myeco-user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.myeco-user-fullname {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.myeco-user-fullname:hover { text-decoration: underline; }

.myeco-user-username {
    font-size: 13px;
    color: var(--myeco-text-muted);
    margin: 0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Liste elemanları için buton grubunu sağa yaslama alanı */
.myeco-user-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* =========================================
   TAKİP LİSTESİ HEADER (SEKMELER / TABS)
   ========================================= */
.myeco-follow-header {
    display: flex;
    border-bottom: 1px solid var(--myeco-border);
    background-color: transparent;
}

.myeco-follow-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    color: var(--myeco-text-muted);
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    position: relative;
    transition: all 0.2s ease;
}

.myeco-follow-tab:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.02);
}

/* Aktif Sekme Durumu */
.myeco-follow-tab.active {
    color: #fff;
}

/* Aktif Sekmenin Altındaki Mavi Çizgi */
.myeco-follow-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Çizgiyi tam border'ın üzerine oturtur */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Çizgi genişliği, 100% de yapılabilir */
    height: 3px;
    background-color: var(--myeco-c-blue);
    border-radius: 3px 3px 0 0;
}

/* Sayı (Count) Hapı Tasarımı */
.myeco-follow-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--myeco-text-muted);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 8px;
    font-weight: 700;
    transition: all 0.2s ease;
}

/* Aktif Sekmedeki Sayı Hapının Rengi */
.myeco-follow-tab.active .myeco-follow-tab-count {
    background: var(--myeco-c-blue);
    color: #fff;
}
/* =========================================
   PROFİL BİYOGRAFİ (HAKKIMDA) KARTI
   ========================================= */
.myeco-bio-card {
    background-color: var(--myeco-bg-card);
    width: 100%; 
    margin: 0 auto 30px auto;
    border-radius: 8px; 
    position: relative;
    transition: all 0.3s ease;
}

/* 1. BOŞ DURUM (TEŞVİK EDİCİ TASARIM) */
.myeco-bio-card.empty-state {
    border: 2px dashed rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.myeco-bio-card.empty-state:hover {
    border-color: rgba(12, 131, 255, 0.4);
    background-color: rgba(12, 131, 255, 0.02);
    transform: translateY(-2px);
}

.myeco-bio-empty-icon {
    font-size: 32px;
    color: var(--myeco-c-star); /* Sarı/Altın rengi parlama hissi verir */
    margin-bottom: 12px;
    opacity: 0.8;
}

.myeco-bio-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
}

.myeco-bio-empty-desc {
    font-size: 13px;
    color: var(--myeco-text-muted);
    line-height: 1.5;
    margin: 0 0 16px 0;
    max-width: 80%;
}

.myeco-btn-bio-add {
    background-color: rgba(12, 131, 255, 0.1);
    color: var(--myeco-c-blue);
    border: 1px solid rgba(12, 131, 255, 0.2);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.myeco-btn-bio-add:hover {
    background-color: var(--myeco-c-blue);
    color: #fff;
}

/* 2. DOLU DURUM (YAZI YAZILDIĞINDAKİ ŞIK TASARIM) */
.myeco-bio-card.filled-state {
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px 20px 24px 54px; /* Sol tarafta tırnak ikonu için boşluk bıraktık */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.myeco-bio-quote-icon {
    position: absolute;
    top: 24px;
    left: 20px;
    font-size: 24px;
    color: var(--myeco-c-blue);
    opacity: 0.4;
}

.myeco-bio-text {
    font-size: 15px;
    line-height: 1.6;
    color: #e0e0e0;
    font-style: italic; /* Özlü söz hissiyatı verir */
    margin: 0;
    font-weight: 400;
}

.myeco-btn-bio-edit {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--myeco-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.myeco-btn-bio-edit:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
/* =========================================
   2. PROFİL GÖNDERİ & FİLTRE BAR
   ========================================= */
.myeco-profile-filter-bar { width: 100%; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--myeco-border); }
.myeco-filter-left { font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; position: relative; padding-bottom: 12px; }
.myeco-filter-left::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--myeco-c-blue); border-radius: 3px 3px 0 0; }
.myeco-filter-left i { color: var(--myeco-c-blue); font-size: 20px; }
.myeco-filter-right { position: relative; padding-bottom: 12px; }
.myeco-btn-filter { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--myeco-text-muted); padding: 6px 14px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; }
.myeco-btn-filter:hover, .myeco-btn-filter.active { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.15); }

.myeco-custom-dropdown { display: none; position: absolute; top: 100%; right: 0; background-color: var(--myeco-bg-card); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 25px rgba(0,0,0,0.5); border-radius: 12px; padding: 8px; min-width: 180px; z-index: 100; margin-top: 4px; }
.myeco-dropdown-item { color: var(--myeco-text-muted); font-size: 12px; font-weight: 400; padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; text-decoration: none; cursor: pointer; }
.myeco-dropdown-item i { font-size: 18px; }
.myeco-dropdown-item:hover { background-color: rgba(255,255,255,0.05); color: #fff; }
.myeco-dropdown-item.active { background-color: rgba(12, 131, 255, 0.1); color: var(--myeco-c-blue); }

/* KANAL SEÇİMİ */


/* Ana Buton: Daha ince ve sade */
.minimal-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-radius: 5px; /* Daha köşeli/modern */
    padding: 6px 14px;
    font-size: 12px;
    transition: all 0.2s;
}
.minimal-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.15); }

/* Dropdown Menü: Sabit yükseklik ve kaydırma */
.minimal-menu {
    background-color: #2C2D33;
    border: 1px solid #334155;
    border-radius: 10px;
    width: 300px;
    max-height: 280px; /* Menü boyutu sınırı */
    overflow-y: auto;  /* Kaydırma çubuğu aktif */
    padding: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* İnce Kaydırma Çubuğu (Scrollbar) Tasarımı */
.minimal-menu::-webkit-scrollbar { width: 5px; }
.minimal-menu::-webkit-scrollbar-track { background: transparent; }
.minimal-menu::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }

/* Liste Elemanları: Daha kompakt */
.minimal-item {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #cbd5e1;
    text-decoration: none;
    margin-bottom: 2px;
}
.minimal-item:hover { background-color: rgba(255,255,255,0.05); color: #fff; }
.minimal-item.active { background-color: rgba(12, 131, 255, 0.1); color: var(--myeco-c-blue); }

/* Başlık ve Küçük Açıklama */
.item-label { font-weight: 600; font-size: 0.85rem; display: block; }
.item-sub { font-size: 0.75rem; color: #94a3b8; display: block; opacity: 0.8; }

.check-icon { font-size: 1rem; display: none; }
.active .check-icon { display: block; }

/* =========================================
ÜNİTE LİSTELEME VE KANAL YATAY MENÜ
========================================= */
.container {
width: 100%;
}
.menu-wrapper-outer {
position: relative;
display: flex;
align-items: center;
padding: 5px;

background-color: #161b22; /* Karttan ayrışan çok hafif bir arkaplan */
border: 1px solid #30363d;
border-radius: 8px;

}

.menu-container::-webkit-scrollbar {
display: none;
}


.menu-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth; 

}

.menu-wrapper {
display: flex;
gap: 10px; 
/* Üst: 4px, Sağ: 20px, Alt: 12px, Sol: 0 */
padding: 4px 20px 5px 0; /* GÜNCELLEME: En sona gelindiğinde buton duvara sıfır yapışmasın diye sağa 20px boşluk eklendi */
white-space: nowrap;
}

/* --- BUTON GÖRÜNÜMÜ --- */
.menu-button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: space-between; /* GÜNCELLEME: İçeriği iki uca dağıtır */
gap: 10px;
padding: 6px 17px;
margin: 0; 
min-width: 130px; /* GÜNCELLEME: Sağa yaslanmanın belirgin olması ve butonların simetrik durması için */
background: rgba(61, 129, 253, 0.05);
border: 1px solid rgba(61, 129, 253, 0.1);
border-radius: 8px; 
color: var(--myeco-text-muted, #9aa0a6);
font-size: 13px;
font-weight: 400;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}

.menu-button:hover {
background: rgba(61, 129, 253, 0.1);
color: #fff;
border-color: rgba(12, 131, 255, 0.4);
transform: translateY(-1px); /* Hafif yukarı zıplama efekti */
}

/* Seçili (Active) Buton Görünümü */
.menu-button.active {
background: rgba(61, 129, 253, 0.1);
border-color: rgba(12, 131, 255, 0.4);
color: var(--myeco-text-main, #0c83ff); /* Myeco mavisi */
}

/* İkon ve Sayı (Count) kapsayıcıları eklenecekse diye önlem */
.menu-button i {
font-size: 18px;
opacity: 0.8;
}
.menu-button.active i {
opacity: 1;
}

/* --- YÖN (OK) BUTONLARI --- */
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #20242B;
color: white;
border: 1px solid rgba(255,255,255,0.1); 
width: 34px; 
height: 34px;

/* GÜNCELLEME BURADA: Tam yuvarlak (daire) için %50 olmalı */
border-radius: 8px; 

font-size: 1.25rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease;
z-index: 20;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.nav-button:hover {
background-color: var(--myeco-c-blue, #0c83ff);
border-color: var(--myeco-c-blue, #0c83ff);
}

.prev-button {
left: 0.5rem;
}
.next-button {
right: 0.5rem;
}
.nav-button.hidden {
opacity: 0;
pointer-events: none;
}

/* --- BUTON İÇİ SAYI (COUNT) HAPI --- */
.menu-button-count {
background: #161b22;
color: var(--myeco-text-muted, #9aa0a6);
padding: 2px 8px;
border-radius: 5px;
font-size: 11px;
font-weight: 500;
margin-left: auto; /* GÜNCELLEME: Kalan tüm boşluğu soluna alarak öğeyi en sağa iter */
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

/* Butonun üzerine gelindiğinde (Hover) sayının rengi canlansın */
.menu-button:hover .menu-button-count {
background: var(--myeco-c-blue, #0c83ff); /* Myeco mavisi arka plan */
color: #fff;
}

/* Buton aktif (Seçili) olduğunda sayının tasarımı */
.menu-button.active .menu-button-count {
background: var(--myeco-c-blue, #0c83ff); /* Myeco mavisi arka plan */
color: #fff; /* Beyaz metin */
}


/* =========================================
   DIJITAL MATERYALLER CSS
   ========================================= */

/* VİDEO KURS */

/* =========================================
   1. ÜNİTE BAŞLIK BLOĞU 
   ========================================= */
.myecoDigitalVideo-unit-header-block {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 25px;
    margin-top: 10px;
}

.myecoDigitalVideo-unit-header-title {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.myecoDigitalVideo-unit-header-icon {
    color: var(--myeco-c-blue);
    font-size: 1.4rem;
}

.myecoDigitalVideo-unit-header-desc {
    color: var(--myeco-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.myecoDigitalVideo-unit-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.myecoDigitalVideo-custom-progress-box {
    background-color: #202125; /* Karttan ayrışan çok hafif bir arkaplan */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 20px;
}

.myecoDigitalVideo-custom-progress-box-ist {
    background-color: #161b22; /* Karttan ayrışan çok hafif bir arkaplan */
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 20px;
}

/* =========================================
   2. VİDEO KARTLARI (CSS GRID)
   ========================================= */
.myecoDigitalVideo-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.5rem; 
}



/* =========================================
           1. YENİ ÜNİTE BİLGİ KARTI (GRID İÇİ)
           ========================================= */
        .myecoDigitalVideo-unit-summary-card {
            background-color: var(--myeco-bg-bubble);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 3px solid var(--myeco-c-blue); /* Üstten şık bir mavi vurgu çizgisi */
            border-radius: 7px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
        }

        .myecoDigitalVideo-unit-summary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        .myecoDigitalVideo-unit-summary-icon {
            width: 50px;
            height: 50px;
            background-color: rgba(12, 131, 255, 0.1);
            color: var(--myeco-c-blue);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
            border: 1px solid rgba(12, 131, 255, 0.2);
        }

        .myecoDigitalVideo-unit-summary-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .myecoDigitalVideo-unit-summary-desc {
            font-size: 0.9rem;
            color: var(--myeco-text-muted);
            line-height: 1.5;
            margin-bottom: 24px;
            flex-grow: 1; /* Alt kısmı aşağı iter */
        }

        .myecoDigitalVideo-unit-summary-progress-box {
            background-color: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            padding: 16px;
            margin-top: auto;
        }

.myecoDigitalVideo-video-card {
    background-color: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.myecoDigitalVideo-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(12, 131, 255, 0.3);
    text-decoration: none;
    color: inherit;
}

/* --- THUMBNAIL VE OYNATMA İKONU --- */
.myecoDigitalVideo-video-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-color: #000;
    overflow: hidden;
}

.myecoDigitalVideo-video-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.myecoDigitalVideo-video-card:hover .myecoDigitalVideo-video-thumb-wrapper img {
    opacity: 0.5;
    transform: scale(1.05);
}

.myecoDigitalVideo-play-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background-color: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.8); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.myecoDigitalVideo-video-card:hover .myecoDigitalVideo-play-icon-bg {
    background-color: var(--myeco-c-blue);
    border-color: var(--myeco-c-blue);
    transform: translate(-50%, -50%) scale(1.1);
}

/* GÜNCELLENDİ: %50 Siyah Transparan Arkaplanlı Köşe Bilgileri */
.myecoDigitalVideo-thumb-badge {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5); /* %50 Transparan Siyah */
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
}

/* Yeni Köşe Sınıfları */
.myecoDigitalVideo-badge-top-left {
    bottom: 8px;
    left: 8px;
}

.myecoDigitalVideo-badge-top-right {
    top: 8px;
    right: 8px;
}

.myecoDigitalVideo-badge-bottom-right {
    bottom: 8px;
    right: 8px;
}

/* --- İÇERİK ALANI --- */
.myecoDigitalVideo-video-info-wrapper {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.myecoDigitalVideo-video-title {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
}

/* Yan Yana Kutu (Stat) Tasarımı */
.myecoDigitalVideo-video-stats-container {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.myecoDigitalVideo-stat-box {
    flex: 1; 
    background-color: rgba(255, 255, 255, 0.04); 
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px; 
    padding: 8px 10px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.myecoDigitalVideo-stat-box-left {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--myeco-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.myecoDigitalVideo-stat-box-left i {
    font-size: 1.1rem;
    color: #fff; 
}

.myecoDigitalVideo-stat-box-right {
    background-color: rgba(0, 0, 0, 0.35); 
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: 6px;
}

/* --- İLERLEME (PROGRESS) VE BUTON ALANI --- */
.myecoDigitalVideo-progress-action-area {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 16px;
}

.myecoDigitalVideo-status-not-started {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.myecoDigitalVideo-status-not-started-text {
    font-size: 0.8rem;
    color: #ff6b6b; 
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.myecoDigitalVideo-status-started {
    margin-bottom: 12px;
}

.myecoDigitalVideo-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.myecoDigitalVideo-progress-label {
    color: var(--myeco-text-muted);
    font-weight: 500;
}

.myecoDigitalVideo-progress-percent {
    color: var(--myeco-c-blue);
    font-weight: 700;
}

.myecoDigitalVideo-mini-progress-track {
    width: 100%;
    height: 6px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 999px;
    overflow: hidden;
}

.myecoDigitalVideo-mini-progress-fill {
    height: 100%;
    background: var(--myeco-c-blue);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(12, 131, 255, 0.5);
}

/* Aksiyon Butonları */
.myecoDigitalVideo-action-btn {
    width: 100%;
    padding: 7px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


.myecoDigitalVideo-btn-start {
    background-color: var(--myeco-c-blue);
    color: #fff;
    border: 1px solid var(--myeco-c-blue);
}
.myecoDigitalVideo-video-card:hover .myecoDigitalVideo-btn-start {
    background-color: #0a6bce; 
    border-color: #0a6bce;
}

.myecoDigitalVideo-btn-new {
    background-color: transparent;
    color: var(--myeco-c-green);
    border: 1px solid var(--myeco-c-green);
}
.myecoDigitalVideo-video-card:hover .myecoDigitalVideo-btn-new {
    background-color: rgba(55, 193, 135, 0.1);
}

.myecoDigitalVideo-btn-continue {
    background-color: transparent;
    color: var(--myeco-c-blue);
    border: 1px solid var(--myeco-c-blue);
}
.myecoDigitalVideo-video-card:hover .myecoDigitalVideo-btn-continue {
    background-color: rgba(12, 131, 255, 0.1);
}

@media (max-width: 576px) {
    .myecoDigitalVideo-video-grid {
        grid-template-columns: 1fr;
    }
}

/* Ana Kapsayıcı ve Izgara Sistemi */

.myeco-lb-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #30363d;
}

.myeco-lb-title {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.myeco-lb-subtitle {
    color: #8b949e;
    font-size: 13px;
    margin: 0;
}
.myeco-leaderboard-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            max-width: 1200px;
            margin: 0 auto;
        }

        @media (max-width: 992px) {
            .myeco-leaderboard-grid {
                grid-template-columns: 1fr;
            }
        }

        .leaderboard-card {
            background: #161b22;
border: 1px solid #30363d;
            
            border-radius: 6px;
            padding: 13px;
            position: relative;
            transition: all 0.25s ease;
        }

        .leaderboard-card:hover {
            transform: translateY(-3px);
            border-color: #3f3f46;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }

        /* Sağ Üst Alan: Sıra Rozeti ve Tooltip Butonunun Grubu */
        .lb-top-right {
            position: absolute;
            top: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .lb-rank-pill {
            background-color: #27272a;
            color: #d4d4d8;
            font-size: 0.75rem;
            font-weight: 400;
            padding: 4px 10px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .lb-avatar {
            width: 52px;
            height: 52px;
            object-fit: cover;
            border-radius: 14px;
            border: 2px solid #3f3f46;
        }

        .lb-footer-section {
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid #27272a;
        }

        .tooltip .tooltip-inner {
            background-color: #27272a;
            color: #f4f4f5;
            border: 1px solid #3f3f46;
            font-size: 0.85rem;
            padding: 8px 12px;
        }


/* ============================================================
   QUESTION CONTAINER (SORU ALANI) MERKEZİ DÜZENİ
   ============================================================ */
.question-container {
    width: 100%;
    /* Ekran ne kadar büyürse büyüsün kutu 850px'i geçmez, metinler kolay okunur */
    max-width: 850px; 
    /* Üstten 40px, alttan 60px boşluk bırakır, yatayda tam merkeze hizalar */
    margin: 40px auto 60px auto; 
    /* Daralan ekranlarda kutunun kenarlara sıfır yapışmasını engeller */
    padding: 0 20px; 
    transition: all 0.3s ease;
}

/* Mobil Görünüm (Telefonlar) */
@media (max-width: 767px) {
    .question-container {
        /* Mobilde üste yapışmaması için 25px güvenli boşluk bıraktık */
        margin: 25px auto 40px auto; 
        /* Mobilde ekranı daha verimli kullanmak için iç boşluğu biraz daralttık */
        padding: 0 15px; 
    }
    
    .myeco-card {
        border-radius: 12px; /* Mobilde de köşeleri yumuşak bıraktık ki şık dursun */
        padding: 20px 15px;
    }
}

.question-container-2 {
    width: 100%;
    /* Ekran ne kadar büyürse büyüsün kutu 850px'i geçmez, metinler kolay okunur */
    max-width: 950px; 
    /* Üstten 40px, alttan 60px boşluk bırakır, yatayda tam merkeze hizalar */
    margin: 40px auto 60px auto; 
    /* Daralan ekranlarda kutunun kenarlara sıfır yapışmasını engeller */
    padding: 0 20px; 
    transition: all 0.3s ease;
}

/* Mobil Görünüm (Telefonlar) */
@media (max-width: 767px) {
    .question-container-2 {
        /* Mobilde üste yapışmaması için 25px güvenli boşluk bıraktık */
        margin: 25px auto 40px auto; 
        /* Mobilde ekranı daha verimli kullanmak için iç boşluğu biraz daralttık */
        padding: 0 15px; 
    }
    
    .myeco-card {
        border-radius: 12px; /* Mobilde de köşeleri yumuşak bıraktık ki şık dursun */
        padding: 20px 15px;
    }
}

.question-container-3 {
    width: 100%;
    /* Ekran ne kadar büyürse büyüsün kutu 850px'i geçmez, metinler kolay okunur */
    max-width: 1000px; 
    /* Üstten 40px, alttan 60px boşluk bırakır, yatayda tam merkeze hizalar */
    margin: 40px auto 60px auto; 
    /* Daralan ekranlarda kutunun kenarlara sıfır yapışmasını engeller */
    padding: 0 20px; 
    transition: all 0.3s ease;
}

/* Mobil Görünüm (Telefonlar) */
@media (max-width: 767px) {
    .question-container-3 {
        /* Mobilde üste yapışmaması için 25px güvenli boşluk bıraktık */
        margin: 25px auto 40px auto; 
        /* Mobilde ekranı daha verimli kullanmak için iç boşluğu biraz daralttık */
        padding: 0 15px; 
    }
    
    .myeco-card {
        border-radius: 12px; /* Mobilde de köşeleri yumuşak bıraktık ki şık dursun */
        padding: 20px 15px;
    }
}

.question-container-4 {
    width: 120%;
    /* Ekran ne kadar büyürse büyüsün kutu 850px'i geçmez, metinler kolay okunur */
    max-width: 1200px; 
    /* Üstten 40px, alttan 60px boşluk bırakır, yatayda tam merkeze hizalar */
    margin: 40px auto 60px auto; 
    /* Daralan ekranlarda kutunun kenarlara sıfır yapışmasını engeller */
    padding: 0 20px; 
    transition: all 0.3s ease;
}

/* Mobil Görünüm (Telefonlar) */
@media (max-width: 767px) {
    .question-container-4 {
        /* Mobilde üste yapışmaması için 25px güvenli boşluk bıraktık */
        margin: 25px auto 40px auto; 
        /* Mobilde ekranı daha verimli kullanmak için iç boşluğu biraz daralttık */
        padding: 0 15px; 
    }
    
    .myeco-card {
        border-radius: 12px; /* Mobilde de köşeleri yumuşak bıraktık ki şık dursun */
        padding: 20px 15px;
    }
}

.myeco-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: 25px;
    position: relative;
}

/* Öncül Alanı */
.question-context {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 25px;
    border-left: 4px solid var(--myeco-blue);
    font-style: italic;
    line-height: 1.6;
    font-size: 0.95rem;
}

.question-text {
    font-size: 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 25px;
    border-left: 4px solid var(--myeco-blue);
    line-height: 1.6;
}

.question-title {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- TYPE 1: MULTIPLE CHOICE --- */
.me-q1-input {
    display: none;
}

.me-q1-label {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 64px;
    font-size: 1.1rem;
}

.me-q1-label:hover {
    border-color: var(--myeco-blue);
    background-color: #1c2128;
    transform: translateX(6px);
}

.me-q1-letter {
    width: 36px;
    height: 36px;
    background: #21262d;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-weight: 600;
    transition: 0.2s;
}

.me-q1-check {
    position: absolute;
    right: 18px;
    opacity: 0;
    color: var(--myeco-blue);
    transform: scale(0.5);
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.8rem;
}

.me-q1-input:checked + .me-q1-label {
    border-color: var(--myeco-blue);
    background: var(--myeco-blue-glow);
}

.me-q1-input:checked + .me-q1-label .me-q1-letter {
    background: var(--myeco-blue);
    border-color: var(--myeco-blue);
    color: #fff;
}

.me-q1-input:checked + .me-q1-label .me-q1-check {
    opacity: 1;
    transform: scale(1);
}

/* --- TYPE 2: SMART MATCHING --- */
/* Üst Kelime Havuzu */
/* ============================================================
           TYPE 2: VOCABULARY MATCHING
           ============================================================ */

/* Kelime Havuzu */
.me-q2-bank {
    background: var(--myeco-blue-glow);
    border: 1px dashed rgba(61, 129, 253, 0.3);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.me-q2-pill {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-bright);
    transition: 0.3s;
}
.me-q2-pill.is-used {
    opacity: 0.2;
    text-decoration: line-through;
    border-color: transparent;
}

/* Satır Mimarisi */
.me-q2-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 12px;
    transition: 0.2s;
}
.me-q2-match-row:hover {
    border-color: #4b535d;
    background: rgba(255, 255, 255, 0.04);
}

.me-q2-match-left {
    flex: 1;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-bright);
    padding-right: 20px;
}
.me-q2-match-right {
    position: relative;
}

/* Seçim Butonu */
.me-q2-blank {
    color: rgba(255, 255, 255, 0.8);

    border: 1px dashed var(--myeco-blue);
    background: rgba(61, 129, 253, 0.05);
    padding: 10px 15px;
    border-radius: 5px;
    min-width: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.me-q2-blank:hover {
    background: var(--myeco-blue-glow);
    color: #fff;
}

/* Akıllı Menü */
.me-q2-menu {
    display: none;
    position: absolute;
    z-index: 2000;
    background: #1c2128;
    border: 1px solid var(--myeco-blue);
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);

    /* Genişliğe göre genişlemesini sağlayan kısım */
    width: max-content;
    min-width: 100%; /* En az buton kadar geniş olsun */
    max-width: 350px; /* Çok uzun kelime gelirse patlamasın diye önlem */
}

.me-q2-option {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    transition: 0.2s;
    font-size: 0.95rem;

    /* Kelimenin alt satıra inmesini engeller, kutuyu esnetir */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-q2-option:last-child {
    border-bottom: none;
}
.me-q2-option.is-used-elsewhere {
    opacity: 0.3;
    font-style: italic;
}
.me-q2-option:hover {
    background: rgba(61, 129, 253, 0.5);
    color: #fff;
}

@media (max-width: 767px) {
    .myeco-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    .me-q2-match-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .me-q2-match-right,
    .me-q2-blank {
        width: 100%;
    }
    .me-q2-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin: 0;
        border-bottom: none;
    }
    .me-q2-option {
        white-space: normal;
    } /* Mobilde kelime kayabilir */
}

/* ============================================================
           TYPE 3: INLINE HTML SELECT
           Prefix: .me-q3-
           ============================================================ */

/* Cümle Satırı */
.me-q3-sentence {
    font-size: 1.1rem;
    line-height: 2.2; /* Menü araya rahat girsin diye satır arası açık */
    color: var(--text-bright);
    margin-bottom: 20px;
}

/* 1. SİHİRLİ KAPSAYICI: Cümle içinde kutu gibi değil, kelime gibi davranmasını sağlar */
.me-q3-inline-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle; /* Metinle aynı hizada tutar */
    margin: 0 4px;
}

/* 2. Tıklanabilir Buton (Cümle İçi Versiyon) */
.me-q3-blank {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    border: 1px dashed var(--myeco-blue);
    background: rgba(61, 129, 253, 0.05);
    padding: 4px 8px; /* Q2'ye göre daha ince, kelime boyutunda */
    border-radius: 5px;
    min-width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
    white-space: nowrap; /* Kelime bölünmesin */
}
.me-q3-blank:hover {
    background: var(--myeco-blue-glow);
    color: #fff;
}
.me-q3-blank i {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* 3. Açılır Menü */
.me-q3-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 2000;
    background: #1c2128;
    border: 1px solid var(--myeco-blue);
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    min-width: 100%;
    width: max-content; /* İçerik uzunsa sağa doğru esner */
    max-width: 350px;
    overflow: hidden;
    text-align: left; /* Metinler her zaman sola yaslı olsun */
    line-height: normal; /* Cümlenin satır yüksekliğini miras almasın */
}

/* Yukarı açılma durumu (Drop-up) */
.me-q3-menu.drop-up {
    top: auto;
    bottom: calc(100% + 5px);
}

.me-q3-option {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    transition: 0.2s;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.me-q3-option:last-child {
    border-bottom: none;
}
.me-q3-option:hover {
    background: rgba(61, 129, 253, 0.5);
    color: #fff;
}

@media (max-width: 767px) {
    .myeco-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    .me-q3-menu {
        position: fixed;
        top: auto !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin: 0;
        border-bottom: none;
    }
    .me-q3-option {
        white-space: normal;
    }
}

/* ============================================================
           TYPE 9: INLINE BLANKS (Cümle İçi Eşleştirme)
           ============================================================ */

.me-q9-bank {
    background: var(--myeco-blue-glow);
    border: 1px dashed rgba(61, 129, 253, 0.3);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.me-q9-pill {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-bright);
    transition: 0.3s;
}
.me-q9-pill.is-used {
    opacity: 0.2;
    text-decoration: line-through;
    border-color: transparent;
}

.me-q9-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    padding: 15px 20px;
    margin-bottom: 12px;
    transition: 0.2s;
}
.me-q29-row:hover {
    border-color: #4b535d;
    background: rgba(255, 255, 255, 0.04);
}

.me-q9-sentence {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-bright);
    cursor: pointer;
}

.me-q9-blank {
    color: var(--myeco-blue);
    font-weight: 700;
    border-bottom: 2px solid var(--myeco-blue);
    padding: 0 10px;
    min-width: 120px;
    display: inline-block;
    text-align: center;
    margin: 0 5px;
    text-decoration: none !important;
    transition: all 0.2s;
}

/* Akıllı Menü (İçeriğe Göre Esneyen Yapı) */
.me-q9-menu {
    display: none;
    position: absolute;
    z-index: 2000;
    background: #1c2128;
    border: 1px solid var(--myeco-blue);
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);

    /* Genişleme Ayarları */
    width: max-content;
    min-width: 180px;
    max-width: 350px;
    overflow: hidden;
}

.me-q9-option {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    transition: 0.2s;
    font-size: 0.95rem;

    /* Kelimenin alt satıra geçmesini önler, uzunsa '...' yapar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-q9-option:last-child {
    border-bottom: none;
}
.me-q9-option.is-used-elsewhere {
    opacity: 0.3;
    font-style: italic;
}
.me-q9-option:hover {
    background: rgba(61, 129, 253, 0.5);
    color: #fff;
}

.me-submit-btn {
    background-color: var(--myeco-blue);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 10px;
    font-weight: 700;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
}

/* Mobil Uyum (Alttan Açılır Menü) */
@media (max-width: 767px) {
    .myeco-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    .me-q9-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin: 0;
        border-bottom: none;
    }
    .me-q9-option {
        white-space: normal;
    }
}

/* ============================================================
           TYPE 6: INLINE TEXT INPUT (Focus Animasyonu + Akıllı Esneme)
           ============================================================ */

.me-q6-row {
    margin-bottom: 25px;
}

.me-q6-sentence {
    font-size: 1.1rem;
    line-height: 2.2;
    color: var(--text-bright);
}

/* Input Kutusu Temel Ayarları */
.me-q6-input {
    background-color: rgba(61, 129, 253, 0.05);
    border: none;
    border-bottom: 2px dashed var(--myeco-blue);
    color: #fff;

    font-size: 1.2rem;
    font-family: inherit;
    text-align: center;
    padding: 4px 10px;
    margin: 0 5px;

    /* Başlangıç minimum genişliği */
    min-width: 140px;
    max-width: 100%;

    border-radius: 6px 6px 0 0;
    outline: none;
    vertical-align: baseline;

    /* SİHİRLİ KISIM: Animasyonu sadece "min-width" ve renklere veriyoruz. 
               Gerçek "width" anında değişecek ki yazarken gecikme olmasın. */
    transition:
        min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s,
        border-color 0.3s,
        box-shadow 0.3s;
}

.me-q6-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Tıklanınca (Focus) Çalışacak Efektler */
.me-q6-input:focus {
    /* Tıklandığı an minimum genişlik 170px'e çıkar, bu da o şık esneme animasyonunu yaratır */
    min-width: 170px;

    background-color: rgba(61, 129, 253, 0.15);
    border-bottom-style: solid;
    box-shadow: 0 4px 15px rgba(61, 129, 253, 0.1);
}

/* JS'in Ölçüm Yapacağı Görünmez Span */
.me-q6-measuring-span {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    top: -9999px;
    left: -9999px;
}

/* Mobil Uyum (Telefonda çok uzamasını engelleriz) */
@media (max-width: 576px) {
    .me-q6-input {
        min-width: 110px;
    }
    .me-q6-input:focus {
        min-width: 130px;
    }
}

/* ============================================================
           TYPE 7: resimli
           ============================================================ */

.me-q7-bank {
    background: rgba(61, 129, 253, 0.05);
    border: 1px dashed rgba(61, 129, 253, 0.3);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.me-q7-pill {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-bright);
    transition: 0.3s;
}
.me-q7-pill.is-used {
    opacity: 0.2;
    text-decoration: line-through;
    border-color: transparent;
}

.me-q7-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* ÖNEMLİ DÜZELTME (Z-INDEX): 
           Tüm kartların varsayılan katmanı 1'dir.
        */
.me-q7-item {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.me-q7-item:hover {
    border-color: var(--myeco-blue);
    transform: translateY(-5px);
}

/* Menüsü açılan kartı HER ŞEYİN önüne getiren sınıf (JS tetikleyecek) */
.me-q7-item.is-active-card {
    z-index: 50 !important;
}

.me-q7-img-wrapper {
    width: 100%;
    height: 160px;
    position: relative;
    background-color: #1c2128;
    border-radius: 11px 11px 0 0;
    overflow: hidden;
}

.me-q7-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.me-q7-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(13, 17, 23, 0.8);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.me-q7-action {
    padding: 15px;
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

.me-q7-blank {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    border: 1px dashed var(--myeco-blue);
    background: rgba(61, 129, 253, 0.05);

    width: 100%;

    padding: 12px 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.me-q7-blank:hover {
    background: var(--myeco-blue-glow);
    color: #fff;
}

.me-q7-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* Butonun hemen altı */
    left: 15px;
    right: 15px;
    z-index: 9999;
    background: #1c2128;
    border: 1px solid var(--myeco-blue);
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* ÖNEMLİ DÜZELTME (YUKARI AÇILMA - DROP UP): 
           calc(100% + 5px) diyerek butonun tamamen üstüne çıkmasını sağladık.
        */
.me-q7-menu.drop-up {
    top: auto;
    bottom: calc(100% + 5px);
}

.me-q7-option {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    transition: 0.2s;
    font-size: 0.95rem;
}
.me-q7-option:last-child {
    border-bottom: none;
}
.me-q7-option.is-used-elsewhere {
    opacity: 0.3;
    font-style: italic;
}
.me-q7-option:hover {
    background: var(--myeco-blue);
    color: #fff;
}

.me-submit-btn {
    background-color: var(--myeco-blue);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 10px;
    font-weight: 700;
    width: 100%;
    margin-top: 25px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .myeco-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    .me-q7-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
    .me-q7-img-wrapper {
        height: 120px;
    }
    .me-q7-blank {
        padding: 10px;
        font-size: 0.9rem;
    }
    .me-q7-menu {
        position: fixed;
        top: auto !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
        margin: 0;
        border-bottom: none;
    }
}

/* ============================================================
           TYPE 8: CHOOSE & REWRITE (Cümle Seç ve Yaz)
           Prefix: .me-q8-
           ============================================================ */

/* Cümlelerin bulunduğu alan */
.me-q8-options-box {
    margin-bottom: 25px;
}

/* Okunacak Cümle Kartları */
.me-q8-sentence {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-left: 4px solid #4b535d; /* Sol tarafta şık bir vurgu çizgisi */
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-bright);
    display: flex;
    align-items: flex-start;
}

.me-q8-sentence:last-child {
    margin-bottom: 0;
}

.me-q8-letter {
    font-weight: 700;
    color: var(--myeco-blue);
    margin-right: 12px;
    user-select: none;
}

/* Yazı Alanı (Textarea) Tasarımı */
.me-q8-textarea-wrapper {
    position: relative;
}

.me-q8-textarea {
    width: 100%;
    min-height: 70px; /* Başlangıç yüksekliği */
    background-color: rgba(61, 129, 253, 0.03);
    border: 2px dashed var(--myeco-blue);
    border-radius: 8px;
    padding: 18px 20px;
    color: var(--text-bright);
    font-size: 1.05rem;
    font-family: inherit;
    line-height: 1.6;

    /* Tarayıcının sağ alt köşedeki manuel boyutlandırma ikonunu gizler */
    resize: none;
    outline: none;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        box-shadow 0.3s;
    overflow: hidden; /* Otomatik esneyeceği için scroll'u gizledik */
}

.me-q8-textarea::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Odaklanınca (Tıklanınca) Çalışacak Efekt */
.me-q8-textarea:focus {
    background-color: rgba(61, 129, 253, 0.08);
    border-style: solid;
    box-shadow: 0 5px 25px rgba(61, 129, 253, 0.15);
}

.me-submit-btn {
    background-color: var(--myeco-blue);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 10px;
    font-weight: 700;
    width: 100%;
    margin-top: 25px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .myeco-card {
        border-radius: 0;
        padding: 20px 15px;
    }
    .me-q8-sentence {
        font-size: 1rem;
        padding: 14px 15px;
    }
}

/* ============================================================
CEVAPLAR
           TYPE 1 FEEDBACK COMPONENTS
           Prefix: .me-fb-q1-
           ============================================================ */

/* Şerit Listesi */
.me-fb-q1-alt-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.me-fb-q1-alt-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--myeco-blue);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-fb-q1-word {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--myeco-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-fb-q1-word i {
    font-size: 1.35rem;
    color: #3fb950;
}

.me-fb-q1-sentence {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.5;
}

.me-fb-q1-highlight {
    color: #3fb950;
    font-weight: 600;
    border-bottom: 1px dashed rgba(63, 185, 80, 0.5);
    padding: 0 2px;
}

/* Açıklama */
.me-fb-q1-explanation {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-bright);
    margin-bottom: 25px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(61, 129, 253, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed rgba(61, 129, 253, 0.2);
}

.me-fb-q1-explanation i {
    color: var(--myeco-blue);
    font-size: 1.35rem;
    margin-top: 4px;
}

/* ============================================================
           TYPE 2 FEEDBACK COMPONENTS
           Prefix: .me-fb-q2-
           ============================================================ */

/* 2. EŞLEŞTİRME LİSTESİ (Match List) */
.me-fb-q2-match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.me-fb-q2-match-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transition: 0.2s;
}

.me-fb-q2-match-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #4b535d;
}

/* Sol Taraf: Tanım / Cümle */
.me-fb-q2-def {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.5;
    flex: 1; /* Sağdaki kelimeyi iterek tüm boşluğu kaplar */
}

/* Sağ Taraf: Eşleşen Kelime (Badge/Etiket Görünümü) */
.me-fb-q2-word {
    background: rgba(61, 129, 253, 0.1);
    border: 1px solid rgba(61, 129, 253, 0.3);
    color: var(--myeco-blue);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap; /* Kelimenin bölünmesini engeller */
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-fb-q2-word i {
    color: #3fb950; /* Kelimenin yanındaki minik onay tiki */
    font-size: 1.35rem;
}

/* 3. Açıklama */
.me-fb-q2-explanation {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 25px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(61, 129, 253, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed rgba(61, 129, 253, 0.2);
}

.me-fb-q2-explanation i {
    color: var(--myeco-blue);
    font-size: 1.1rem;
    margin-top: 4px;
}

/* 4. Buton */
.me-fb-q2-btn {
    background-color: var(--myeco-blue);
    color: #fff;
    border: none;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}
.me-fb-q2-btn:hover {
    background-color: #2b6aeb;
}

/* Mobil Uyum (Eğer ekran daralırsa kelimeyi alta at) */
@media (max-width: 576px) {
    .me-fb-q2-match-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .me-fb-q2-word {
        width: 100%; /* Mobilde buton gibi tam genişlik kaplasın */
        justify-content: space-between; /* İkonu sağa, kelimeyi sola atar */
    }
}

/* ============================================================
           TYPE 7 FEEDBACK COMPONENTS (Final Layout: 3-Col Grid)
           Prefix: .me-fb-q7-final-
           ============================================================ */

/* 1. MİNİMAL BAŞLIK (Yan yana, küçük ikon, ince alt çizgi) */
.me-fb-q7-final-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.me-fb-q7-final-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--myeco-green-glow);
    color: #3fb950;
    border-radius: 50%;
    font-size: 1.1rem;
}

.me-fb-q7-final-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
}

/* 2. KARE IZGARA (SQUARE GRID) LİSTESİ */
.me-fb-q7-final-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Image_1.png'deki gibi yan yana 3 tane sığdırır */
    gap: 15px;
    margin-bottom: 25px;
}

/* Her bir Resim Kartı (KARE ve BÜTÜNLEŞİK) */
.me-fb-q7-final-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* SİHİRLİ KOD: Kutunun tam KARE olmasını garanti eder */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.me-fb-q7-final-item:hover {
    border-color: var(--myeco-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Resim: Kırpılmadan (EZİLMEDEN) KUTUYU DOLDURUR */
.me-fb-q7-final-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kesmeden kutuya tam sığdırır */
    display: block;
}

/* Resim Üzerindeki Karartma (Gradient Overlay) ve Yazı */
.me-fb-q7-final-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; /* Alt kısımdan yukarı doğru kararır */
    background: linear-gradient(0deg, rgba(13, 17, 23, 0.95) 0%, rgba(13, 17, 23, 0.5) 50%, rgba(13, 17, 23, 0) 100%);
    display: flex;
    align-items: flex-end; /* Yazıyı alta yaslar */
    justify-content: center; /* Yazıyı yatayda ortalar */
    padding: 15px;
    text-align: center; /* Yazıyı kendi içinde ortalar */
    pointer-events: none; /* Mouse resmin üstüne geldiğinde yazıyı değil resmi algılar */
}

.me-fb-q7-final-vocab {
    max-width: 90%;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); /* Yazı net okunsun diye kalın gölge */
}

.me-fb-q7-final-tr {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-fb-q7-final-en {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* 3. Açıklama */
.me-fb-q7-final-explanation {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 25px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(61, 129, 253, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed rgba(61, 129, 253, 0.2);
}

.me-fb-q7-final-explanation i {
    color: var(--myeco-blue);
    font-size: 1.1rem;
    margin-top: 4px;
}

/* 4. Buton */
.me-fb-q7-final-btn {
    background-color: var(--myeco-blue);
    color: #fff;
    border: none;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}
.me-fb-q7-final-btn:hover {
    background-color: #2b6aeb;
}

/* Mobil */
@media (max-width: 576px) {
    .mock-modal-body {
        padding: 20px;
    }
    .me-fb-q7-final-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobilde yan yana 2 tane sığsın */
        gap: 10px;
    }
    .me-fb-q7-final-tr {
        font-size: 1rem;
    }
    .me-fb-q7-final-overlay {
        padding: 10px;
    }
}


/* CSS GRID */
        .myecoStatics-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 25px;
        }

        /* === TEKİL DERS KARTI TASARIMI === */
        .myecoStatics-stat-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .myecoStatics-stat-card2 {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 25px;
        }

        .myecoStatics-stat-card:hover {
            transform: translateY(-5px);
            border: 1px solid rgba(61, 129, 253, 0.2);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        /* Kart Üst Bölüm (Puan ve Başlık) */
        .myecoStatics-header-row {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 25px;
        }

        .myecoStatics-score-ring-wrap {
            width: 55px;
            height: 55px;
        }
        .myecoStatics-score-inner {
            width: 47px;
            height: 47px;
            background: #161b22;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            color: #fff;
        }

        .myecoStatics-lesson-info { flex: 1; min-width: 0; }
        .myecoStatics-lesson-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .myecoStatics-lesson-desc { font-size: 13px; color: #8b949e; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .myecoStatics-action-btn {
            background: transparent;
            border: none;
            color: #8b949e;
            font-size: 24px;
            cursor: pointer;
            transition: 0.2s;
            padding: 0;
            align-self: flex-start;
        }
        .myecoStatics-action-btn:hover { color: #fff; }

        /* === METRİK ROZETLERİ (Pills) === */
        .myecoStatics-metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 25px;
        }

        .myecoStatics-metric-pill {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .myecoStatics-metric-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .myecoStatics-icon-success { background: rgba(46, 160, 67, 0.15); color: #2ea043; } 
        .myecoStatics-icon-danger { background: rgba(248, 81, 73, 0.15); color: #f85149; } 
        .myecoStatics-icon-info { background: rgba(61, 129, 253, 0.15); color: #3d81fd; } 
        .myecoStatics-icon-warning { background: rgba(210, 153, 34, 0.15); color: #d29922; } 

        .myecoStatics-metric-data { display: flex; flex-direction: column; }
        .myecoStatics-metric-data .myecoStatics-m-label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;}
        .myecoStatics-metric-data .myecoStatics-m-val { font-size: 12px; font-weight: 400; color: #c9d1d9; line-height: 1.1;}

        /* === BAŞARI ORANI BARI (Footer) === */
        .myecoStatics-progress-footer {
            margin-top: auto; 
            background: #0d1117;
            margin: 0 -25px -25px -25px;
            padding: 20px 25px;
            border-top: 1px solid #30363d;
        }

        .myecoStatics-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .myecoStatics-progress-header span:first-child { font-size: 13px; font-weight: 600; color: #8b949e; }
        .myecoStatics-progress-header span:last-child { font-size: 15px; font-weight: 800; color: #fff; }

        .myecoStatics-progress-track {
            width: 100%;
            height: 8px;
            background: #21262d;
            border-radius: 4px;
            overflow: hidden;
        }
        .myecoStatics-progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 1s ease-in-out;
        }
        
        .myecoStatics-fill-red { background: linear-gradient(90deg, #f85149, #ff7b72); }
        .myecoStatics-fill-gray { background: #30363d; }

/* === KART İÇİ BOŞ DURUM (EMPTY STATE) === */
.myecoStatics-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; /* Kartın kalan tüm yüksekliğini kaplar */
    text-align: center;
    padding: 20px 0 10px 0;
}

.myecoStatics-empty-icon {
    font-size: 42px;
    color: #30363d; /* Sönük, göz yormayan ikon rengi */
    margin-bottom: 12px;
}

.myecoStatics-empty-text {
    font-size: 13px;
    color: #8b949e;
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.myecoStatics-empty-btn {
    background: rgba(61, 129, 253, 0.1);
    color: #3d81fd;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.myecoStatics-empty-btn:hover {
    background: #3d81fd;
    color: #fff;
    box-shadow: 0 5px 15px rgba(61, 129, 253, 0.3);
}

/* Boş kartın başlık ve puan halkasını hafifçe sönükleştir (Opsiyonel şıklık) */
.myecoStatics-card-empty .myecoStatics-score-ring-wrap {
    box-shadow: none;
}
.myecoStatics-card-empty .myecoStatics-score-inner {
    color: #8b949e;
}
.myecoStatics-card-empty .myecoStatics-lesson-title {
    color: #c9d1d9; /* Aktif ders kadar bembeyaz parlamasın */
}

        /* ========================================= */
        /* MOBİL UYUM                                */
        /* ========================================= */
        @media (max-width: 768px) {
            .myecoStatics-cards-grid { grid-template-columns: 1fr; }
            .myecoStatics-summary-banner { flex-direction: column; align-items: flex-start; }
            .myecoStatics-total-score { width: 100%; justify-content: space-between; }
        }

        @media (max-width: 576px) {
            .myecoStatics-metric-icon { 
                display: none; 
            }
            .myecoStatics-stat-card {
                padding: 20px;
            }
            .myecoStatics-progress-footer {
                margin: 0 -20px -20px -20px;
                padding: 15px 20px;
            }
            .myecoStatics-metrics-grid { 
                grid-template-columns: repeat(4, 1fr); 
                gap: 6px; 
            }
            .myecoStatics-metric-pill {
                padding: 10px 4px;
                justify-content: center;
            }
            .myecoStatics-metric-data {
                align-items: center;
                text-align: center;
            }
            .myecoStatics-metric-data .myecoStatics-m-label {
                font-size: 9px; 
                margin-bottom: 4px;
                letter-spacing: 0;
            }
            .myecoStatics-metric-data .myecoStatics-m-val {
                font-size: 13px; 
                word-break: break-word; 
            }
        }

/* SONUÇ GÖSTERİM CSS */
        .myeco_test_sonuc_body {
            background-color: #0f0f11;
            color: #f4f4f5;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }
        
        .myeco_test_sonuc_modal_body {
            width: 100%;

            background: #171B22;
            border: 1px solid #27272a;
            border-radius: 10px;
            padding: 24px;

        }

        /* Üst Header Kartı */
        .myeco_test_sonuc_header_card {
            background: #202024;
            border: 1px solid #2f2f35;
            border-radius: 10px;
            padding: 16px;
        }

        /* SVG Skor Dairesi */
        .myeco_test_sonuc_circle_wrapper {
            position: relative;
            width: 70px;
            height: 70px;
            margin: 0 auto;
        }
        .myeco_test_sonuc_svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .myeco_test_sonuc_bg {
            fill: none;
            stroke: #2f2f35;
            stroke-width: 6;
        }
        .myeco_test_sonuc_progress {
            fill: none;
            stroke: #38bdf8;
            stroke-width: 6;
            stroke-linecap: round;
            stroke-dasharray: 175.93; /* 2 * PI * r (r=28) */
            stroke-dashoffset: 87.96; /* %50 */
        }
        .myeco_test_sonuc_text_inside {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }


        /* Doğru / Yanlış Metrik Kutuları */
        .myeco_test_sonuc_stat_box {
            background: rgba(24, 24, 27, 0.6);
            border-radius: 10px;
            padding: 12px 8px;
            text-align: center;
            border: 1px solid #30363d;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: transform 0.2s;
        }
        .myeco_test_sonuc_stat_box:hover {
            transform: translateY(-2px);
            border-color: #3f3f46;
        }

        /* Soru Listesi */
        .myeco_test_sonuc_question_row {
            background: #202024;
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 8px;
            font-size: 0.85rem;
            border: 1px solid #2f2f35;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .myeco_test_sonuc_status_dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .myeco_test_sonuc_bg_correct { background-color: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
        .myeco_test_sonuc_bg_wrong { background-color: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }

/* APP ANA KAPSAYICI */
.myeco-ekitap-app {
    --bg-dark: #202125; 
    --card-bg: #161b22; 
    --border-color: #30363d; 
    --myeco-blue: #3d81fd; 
    --text-main: #c9d1d9;
    
    width: 100%; height: 100vh; background-color: var(--bg-dark); color: var(--text-main);
    overflow: hidden; /* Uygulama hissiyatı için dış taşmaları gizler */

    font-family: sans-serif; position: relative;
}

/* YENİ EKLENEN: İÇERİK ALANI KAYDIRMA KURALI */
.myeco-ekitap-main {
    height: calc(100vh - 55px); /* Header (55px) boyutunu tam ekrandan çıkarıyoruz */
    overflow-y: auto; /* Dikey kaydırma çubuğunu açar */
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-bottom: 80px; /* Mobilde veya en altta içerik kesilmesin diye boşluk eklendi */
}

.myeco-ekitap-app * { scrollbar-width: thin; scrollbar-color: #2a2f37 transparent; }
.myeco-ekitap-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.myeco-ekitap-app ::-webkit-scrollbar-track { background: transparent; }
.myeco-ekitap-app ::-webkit-scrollbar-thumb { background: #2a2f37; border-radius: 4px; }
.myeco-ekitap-app ::-webkit-scrollbar-thumb:hover { background: var(--myeco-blue); }

.myeco-ekitap-header { height: 55px; background: #141517; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border-color); z-index: 1000; position: relative; }

.myeco-ekitap-sidebar {
    position: fixed; top: 55px; left: -350px; width: 340px; height: calc(100vh - 115px);
    background: var(--card-bg); border-right: 1px solid var(--border-color); z-index: 1200; 
    display: flex; flex-direction: column; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 5px 0 20px rgba(0,0,0,0.5);
}
.myeco-ekitap-sidebar.myeco-ekitap-open { left: 0; }
.myeco-ekitap-sidebar-header { padding: 15px 20px; background: #1c2128; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.myeco-ekitap-sidebar-body { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 15px 0; }

.myeco-ekitap-sidebar-soru {
    position: fixed; top: 55px; left: -350px; width: 340px; height: calc(100vh - 115px);
    background: var(--card-bg); border-right: 1px solid var(--border-color); z-index: 1200; 
    display: flex; flex-direction: column; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 5px 0 20px rgba(0,0,0,0.5);
    height: calc(100vh - 55px) !important;
}
.myeco-ekitap-sidebar-soru.myeco-ekitap-open { left: 0; }



.myeco-toc-unit { margin-bottom: 12px; padding: 0 15px; }
.myeco-toc-unit-header {
    padding: 14px 18px; background: #1c2128; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-weight: 400; font-size: 14px; color: #fff; user-select: none; transition: 0.2s;
}
.myeco-toc-unit-header:hover { background: #232931; border-color: rgba(255,255,255,0.08); }
.myeco-toc-unit-header.open { background: #21262d; border-color: rgba(61, 129, 253, 0.3); }
.myeco-toc-unit-header .chevron-icon { transition: transform 0.3s ease; color: #8b949e; }
.myeco-toc-unit-header.open .chevron-icon { transform: rotate(180deg); color: var(--myeco-blue); }

.myeco-toc-unit-content { display: none; padding: 10px 5px 5px 20px; margin-left: 25px; border-left: 2px solid #21262d; }

.myeco-toc-lesson {
    padding: 12px 15px; margin-bottom: 6px; border-radius: 8px; cursor: pointer; color: #8b949e; font-size: 13.5px; 
    line-height: 1.5; transition: 0.2s; display: flex; align-items: flex-start;
    text-decoration: none; 
}
.myeco-toc-lesson i { margin-top: 3px; margin-right: 12px; flex-shrink: 0; font-size: 16px; }
.myeco-toc-lesson:hover { background: rgba(255,255,255,0.05); color: #c9d1d9; text-decoration: none; }
.myeco-toc-lesson.active { background: rgba(61, 129, 253, 0.15); color: #fff; text-decoration: none; }
.myeco-toc-lesson.active i { color: var(--myeco-blue); }

.myeco-ekitap-note-sidebar {
    position: fixed; top: 55px; right: -320px; width: 320px; height: calc(100vh - 115px);
    background: var(--card-bg); border-left: 1px solid var(--border-color); z-index: 1200; 
    display: flex; flex-direction: column; transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: -5px 0 20px rgba(0,0,0,0.5);
}
.myeco-ekitap-note-sidebar.myeco-ekitap-open { right: 0; }

.myeco-note-textarea {
    width: 100%; flex-grow: 1; background: #0d1117; color: #c9d1d9;
    border: 1px solid var(--border-color); border-radius: 6px; padding: 15px;
    resize: none; font-size: 14px; line-height: 1.6; margin-bottom: 15px;
}
.myeco-note-textarea:focus { outline: none; border-color: var(--myeco-blue); box-shadow: 0 0 0 3px rgba(61,129,253,0.2); }

.myeco-ekitap-bottom-gallery { position: fixed; bottom: 60px; left: 0; width: 100%; height: 165px; background: rgba(22, 27, 34, 0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--myeco-blue); z-index: 999; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: block; text-align: center; padding: 20px 10px; overflow-x: auto; white-space: nowrap; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.myeco-ekitap-bottom-gallery.myeco-gallery-open { transform: translateY(0); }

.myeco-gallery-thumb { display: inline-block; vertical-align: top; margin: 0 10px; text-align: center; cursor: pointer; text-decoration: none; }
.myeco-gallery-img { width: 80px; height: 110px; object-fit: cover; border: 2px solid transparent; border-radius: 6px; transition: 0.2s; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
.myeco-gallery-thumb:hover { text-decoration: none; }
.myeco-gallery-thumb:hover .myeco-gallery-img { border-color: var(--text-main); transform: translateY(-3px); }
.myeco-gallery-thumb.active .myeco-gallery-img { border-color: var(--myeco-blue); }
.myeco-gallery-label { display: block; font-size: 11px; margin-top: 6px; color: #8b949e; }
.myeco-gallery-thumb.active .myeco-gallery-label { color: var(--myeco-blue); font-weight: bold; }

.myeco-ekitap-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #141517; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; padding: 0 20px; z-index: 1000; }
.myeco-ekitap-footer-left { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: calc(50% - 130px); max-width: 350px; }
.myeco-ekitap-audio-wrapper { width: 100%; }
.myeco-ekitap-app .plyr--audio .plyr__controls {  color: var(--text-main) !important;  }
.myeco-ekitap-footer-center { display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; }

.myeco-ekitap-nav-btn { width: 40px; height: 40px; background: #1E2229;  border-radius: 8px; color: var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: 0.2s; text-decoration: none; }
.myeco-ekitap-nav-btn:hover { background: var(--myeco-blue); color: white; border-color: var(--myeco-blue); text-decoration: none; }
.myeco-ekitap-nav-btn.disabled { opacity: 0.3; pointer-events: none; }

.myeco-footer-pill { display: flex; align-items: center; background: #1E2229;  border-radius: 8px; padding: 0 5px; height: 40px; margin: 0 5px; }
.myeco-ekitap-gallery-btn { background: transparent; border: none; color: var(--text-main); padding: 0 12px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; transition: 0.2s; line-height: 1; }
.myeco-ekitap-gallery-btn i { display: flex; align-items: center; font-size: 16px; margin-bottom: 1px; }
.myeco-page-badge { display: flex; align-items: center; height: 100%; font-size: 13px; font-weight: 400; color: white; padding-right: 10px; padding-left: 5px; line-height: 1; }
.myeco-ekitap-gallery-btn:hover, .myeco-ekitap-gallery-btn.active { background: var(--myeco-blue); color: white; }

.myeco-ekitap-right-bar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 1250; transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.myeco-ekitap-right-bar.myeco-ekitap-shifted { right: 60px; }
.myeco-ekitap-right-bar.myeco-note-shifted { right: 320px; }
.myeco-ekitap-action-btn { width: 46px; height: 50px; border: none; border-radius: 12px 0 0 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: -4px 0 15px rgba(0,0,0,0.5); transition: background-color 0.2s, width 0.2s; text-decoration: none; }

.myeco-ekitap-site-nav { background: #21262d; color: #c9d1d9; }
.myeco-ekitap-site-nav:hover { background: #30363d; color: #fff; width: 50px; }

.myeco-ekitap-toolbar-toggle { background: var(--myeco-blue); color: white; }
.myeco-ekitap-toolbar-toggle:hover { background: #2b6df0; width: 50px; }
.myeco-ekitap-answer-toggle { background: #ffc107; color: #000; }
.myeco-ekitap-answer-toggle:hover { background: #ffca2c; width: 50px; }
.myeco-ekitap-note-toggle { background: #198754; color: white; }
.myeco-ekitap-note-toggle:hover { background: #157347; width: 50px; }
.myeco-ekitap-questions-toggle { background: #EF4444; color: white; }
.myeco-ekitap-questions-toggle:hover { background: #D73D3D; width: 50px; }

.myeco-ekitap-print-toggle { background: #0dcaf0; color: #000; }
.myeco-ekitap-print-toggle:hover { background: #0bacce; width: 50px; }

.myeco-ekitap-divider { width: 24px; height: 2px; background-color: var(--border-color); margin: 5px auto; border-radius: 2px; }

.myeco-ekitap-toolbar { position: fixed; right: -80px; top: 50%; transform: translateY(-50%); transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1200; }
.myeco-ekitap-toolbar.myeco-ekitap-open { right: 0; }
.myeco-ekitap-toolbar-content { width: 60px; background: var(--card-bg); border: 1px solid var(--border-color); border-right: none; border-radius: 12px 0 0 12px; display: flex; flex-direction: column; align-items: center; padding: 15px 0; gap: 12px; box-shadow: -5px 0 20px rgba(0,0,0,0.6); }
.myeco-ekitap-tool-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--text-main); border-radius: 8px; transition: 0.2s; cursor: pointer; font-size: 20px; }
.myeco-ekitap-tool-btn:hover, .myeco-ekitap-tool-btn.active { background: var(--myeco-blue); color: #ffffff !important; }

.myeco-ekitap-canvas-container { height: calc(100vh - 115px); overflow: auto; display: flex; flex-direction: column; align-items: center; position: relative; padding: 20px; transition: height 0.3s; }

#myeco-ekitap-ans-panel { position: fixed; right: 100px; top: 70px; min-width: 250px; min-height: 250px; max-width: 90vw; max-height: 90vh; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,0.8); z-index: 1300; display: flex; flex-direction: column; overflow: hidden; }

#myeco-ekitap-ans-header { background: #1c2128; padding: 10px 15px; cursor: grab; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); user-select: none; touch-action: none; }
#myeco-ekitap-ans-header:active { cursor: grabbing; }

.myeco-ekitap-ans-body { flex-grow: 1; padding: 0; background: #ffffff; display: block; position: relative; }
.myeco-ekitap-ans-body .canvas-container { margin: 0 auto; max-width: 100%; border-radius: 0; display: block; }

.myeco-ans-info-overlay {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.9);
    padding: 4px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
    pointer-events: auto; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.myeco-ans-zoom-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.myeco-ans-zoom-btn:hover { background: var(--myeco-blue); }
.myeco-ans-drag-info {
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    pointer-events: none; 
    font-weight: 500;
}

.myeco-ekitap-resize-handle { position: absolute; bottom: 0; width: 25px; height: 25px; z-index: 10; }
.myeco-ekitap-resize-right { right: 0; cursor: se-resize; background: linear-gradient(135deg, transparent 50%, #888 50%); border-bottom-right-radius: 10px; }
.myeco-ekitap-resize-left { left: 0; cursor: sw-resize; background: linear-gradient(45deg, #888 50%, transparent 50%); border-bottom-left-radius: 10px; }

@media (max-width: 768px) {
    .myeco-ekitap-footer { flex-direction: column; height: 100px; padding: 10px; justify-content: space-evenly; }
    .myeco-ekitap-footer-left { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 100%; display: flex; justify-content: center; }
    .myeco-ekitap-footer-center { width: 100%; }
    .myeco-ekitap-canvas-container { height: calc(100vh - 155px); }
    .myeco-ekitap-bottom-gallery { bottom: 100px; }
    .myeco-ekitap-note-sidebar { width: 100%; right: -100%; }
    .myeco-ekitap-right-bar.myeco-note-shifted { right: -100px !important; }
    
    #myeco-ekitap-ans-panel {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important; 
        max-height: 100vh !important; 
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    #myeco-ekitap-ans-header { cursor: default !important; } 
    
    .myeco-ekitap-ans-body { overflow-y: auto !important; overflow-x: hidden !important; cursor: default !important; }
    
    .myeco-ekitap-resize-handle { display: none !important; } 
    .myeco-ans-info-overlay { display: none !important; }
}

[data-tooltip] { position: relative; }
[data-tooltip]:hover { z-index: 99999; }
[data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; background: rgba(22, 27, 34, 0.95); backdrop-filter: blur(4px);
    color: #fff; border: 1px solid var(--myeco-blue); padding: 6px 12px; border-radius: 6px; font-size: 12px;
    font-family: Arial, sans-serif; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.myeco-ekitap-header [data-tooltip]::after { top: 50%; left: 120%; transform: translateY(-50%) translateX(-10px); }
.myeco-ekitap-header [data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.myeco-ekitap-right-bar [data-tooltip]::after { right: 120%; top: 50%; transform: translateY(-50%) translateX(10px); }
.myeco-ekitap-right-bar [data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }


@keyframes myeco-spin { to { transform: rotate(360deg); } }
.myeco-loader-text { color: #c9d1d9 !important; font-family: sans-serif !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 1px !important; margin-top: 15px !important; display: block !important; }

/* =========================================
   CANLI DERSLER CSS
   ========================================= */

.myeco-online-schedule-container {
            max-width: 850px;
            margin: 0 auto;
        }

        /* ============================================================
           ANA TAB MENÜ (EŞİT DAĞILIMLI - JUSTIFIED)
           ============================================================ */
        .myeco-online-main-tab-nav {
            display: flex;
            width: 100%;
            gap: 10px;
            border-bottom: 1px solid var(--myeco-online-border-color);
            margin-bottom: 30px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .myeco-online-main-tab-nav::-webkit-scrollbar { display: none; }

        .myeco-online-main-tab-item {
            flex: 1; 
            display: flex;
            align-items: center;
            justify-content: center; 
            gap: 8px;
            padding: 12px 4px;
            color: var(--myeco-online-text-muted);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            border-bottom: 2px solid transparent;
            transition: 0.2s;
            white-space: nowrap; 
        }

        .myeco-online-main-tab-item i { font-size: 1.25rem; }
        .myeco-online-main-tab-item:hover { color: var(--myeco-online-text-bright); }
        .myeco-online-main-tab-item.active {
            color: var(--myeco-online-blue);
            border-bottom-color: var(--myeco-online-blue);
        }

        

        /* ============================================================
           BLOK BAŞLIKLARI VE FİLTRELER
           ============================================================ */
        .myeco-online-timeline-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--myeco-online-border-color);
        }
        
        .myeco-online-timeline-section-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .myeco-online-timeline-section-title i {
            color: var(--myeco-online-blue);
            font-size: 1.3rem;
        }

        .myeco-online-title-past-color { color: rgba(255, 255, 255, 0.65) !important; }
        .myeco-online-title-past-color i { color: rgba(255, 255, 255, 0.65) !important; }

        /* Filtreler */
        .myeco-online-schedule-filters {
            display: flex;
            gap: 5px;
            background: rgba(255, 255, 255, 0.02);
            padding: 4px;
            border-radius: 8px;
            border: 1px solid var(--myeco-online-border-color);
        }
        .myeco-online-filter-btn {
            background: transparent;
            border: none;
            color: var(--myeco-online-text-muted);
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }
        .myeco-online-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
        .myeco-online-filter-btn.active { background: var(--myeco-online-blue); color: #fff; }

        /* ============================================================
           ZAMAN ÇİZELGESİ (TIMELINE) VE KARTLAR
           ============================================================ */
        .myeco-online-timeline { position: relative; }
        .myeco-online-timeline::before {
            content: ''; position: absolute; top: 10px; bottom: -20px;
            left: 70px; width: 2px; background: var(--myeco-online-border-color);
        }

        .myeco-online-timeline-item {
            position: relative; display: flex; align-items: flex-start;
            gap: 30px; margin-bottom: 20px; transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .myeco-online-timeline-item.myeco-online-is-future { opacity: 0.55; }
        .myeco-online-timeline-item.myeco-online-is-future:hover { opacity: 1; }

        .myeco-online-timeline-dot {
            position: absolute; left: 66px; top: 20px; width: 10px; height: 10px;
            border-radius: 50%; background: var(--myeco-online-border-color); z-index: 2;
            box-shadow: 0 0 0 4px var(--myeco-online-bg-page); transition: 0.2s;
        }
        .myeco-online-timeline-item.myeco-online-is-today .myeco-online-timeline-dot {
            background: var(--myeco-online-blue);
            box-shadow: 0 0 0 4px rgba(61, 129, 253, 0.15), 0 0 0 4px var(--myeco-online-bg-page);
        }

        /* Tarih Alanı */
        .myeco-online-timeline-date {
            width: 55px; background: rgba(255, 255, 255, 0.03); border-radius: 10px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 8px 0; flex-shrink: 0; z-index: 3;
        }
        .myeco-online-timeline-item.myeco-online-is-today .myeco-online-timeline-date { background: rgba(61, 129, 253, 0.1); }
        .myeco-online-date-day { font-size: 1.2rem; font-weight: 400; color: var(--myeco-online-text-bright); line-height: 1; }
        .myeco-online-timeline-item.myeco-online-is-today .myeco-online-date-day { color: var(--myeco-online-blue); }
        .myeco-online-date-month { font-size: 0.7rem; font-weight: 600; color: var(--myeco-online-text-muted); text-transform: uppercase; margin-top: 4px; }

        /* Kart İçeriği */
        .myeco-online-timeline-content {
            flex: 1; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--myeco-online-border-color);
            border-radius: 10px; padding: 12px 16px; transition: 0.2s; min-width: 0; 
        }
        .myeco-online-timeline-item.myeco-online-is-today .myeco-online-timeline-content {
            border-color: rgba(61, 129, 253, 0.4); background: rgba(61, 129, 253, 0.03); box-shadow: 0 5px 20px rgba(61, 129, 253, 0.05);
        }
        .myeco-online-timeline-content:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); }

        .myeco-online-lesson-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
        .myeco-online-lesson-info { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; font-size: 0.9rem; color: var(--myeco-online-text-muted); font-weight: 500; }
        .myeco-online-lesson-info span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
        .myeco-online-lesson-info i { font-size: 1.1rem; color: var(--myeco-online-text-bright); }
        .myeco-online-text-blue { color: var(--myeco-online-blue) !important; font-weight: 600; }
        .myeco-online-text-blue i { color: var(--myeco-online-blue) !important; }
        .myeco-online-lesson-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

        /* Durum Etiketleri */
        .myeco-online-status-badge {
            font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 5px;
            display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; transition: 0.2s;
        }
        a.myeco-online-status-badge:hover { filter: brightness(1.2); }
        .myeco-online-st-baslandi { background: rgba(30, 144, 255, 0.15); color: var(--myeco-online-status-baslandi); border: 1px solid rgba(30, 144, 255, 0.3); }
        .myeco-online-st-yapildi { background: rgba(46, 213, 115, 0.1); color: var(--myeco-online-status-yapildi); }
        .myeco-online-st-onay-bekliyor { background: rgba(255, 165, 2, 0.1); color: var(--myeco-online-status-onay-bekliyor); }
        .myeco-online-st-eksik { background: rgba(155, 89, 182, 0.1); color: var(--myeco-online-status-eksik); }
        .myeco-online-st-reddedildi { background: rgba(255, 71, 87, 0.1); color: var(--myeco-online-status-reddedildi); }
        .myeco-online-st-yapilmadi { background: rgba(230, 77, 72, 0.1); color: #CCC; }
        .myeco-online-st-bekliyor { background: rgba(255, 255, 255, 0.05); color: var(--myeco-online-status-bekliyor); }

        .myeco-online-btn-video {
            display: inline-flex; align-items: center; gap: 5px; background: transparent;
            color: var(--myeco-online-status-yapildi); border: 1px solid rgba(46, 213, 115, 0.3);
            padding: 4px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: 600; text-decoration: none; transition: 0.2s;
        }
        .myeco-online-btn-video:hover { background: rgba(46, 213, 115, 0.1); }

        /* Rapor Uyarı Kutusu */
        .myeco-online-report-alert {
            margin-top: 12px; background: rgba(255, 165, 2, 0.05); border: 1px dashed rgba(255, 165, 2, 0.3);
            border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
        }
        .myeco-online-report-alert-yazmis {
            margin-top: 12px; background: rgba(46, 213, 115, 0.05); border: 1px dashed rgba(46, 213, 115, 0.3);
            border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
        }
		.myeco-online-katilmadi-alert {
            margin-top: 12px; background: rgba(230, 77, 72, 0.1); border: 1px dashed rgba(230, 77, 72, 0.3);
            border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
        }
        .myeco-online-report-info { font-size: 0.85rem; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 500; }
        .myeco-online-report-info i { color: var(--myeco-online-status-onay-bekliyor); font-size: 1.2rem; }

        .myeco-online-report-info-yazmis { font-size: 0.85rem; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 500; }
        .myeco-online-report-info-yazmis i { color: var(--myeco-online-status-yapildi); font-size: 1.2rem; }
        
        .myeco-online-btn-report { background: var(--myeco-online-status-onay-bekliyor); color: #000; border: none; padding: 4px 12px; border-radius: 5px; font-size: 0.75rem; font-weight: 700; transition: 0.2s; text-decoration: none; white-space: nowrap; }
        .myeco-online-btn-report:hover { background: #e59400; color: #000; }

        .myeco-online-btn-load-more {
            display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--myeco-online-border-color);
            color: var(--myeco-online-text-muted); padding: 6px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; text-decoration: none;
        }
        .myeco-online-btn-load-more:hover { background: rgba(255, 255, 255, 0.05); color: #fff; border-color: rgba(255, 255, 255, 0.15); }

        /* ============================================================
           MOBİL UYUMLULUK
           ============================================================ */
        @media (max-width: 767px) {
            .myeco-online-main-tab-item {
                flex: 0 0 auto; 
            }
            .myeco-online-course-overview-card { flex-direction: column; align-items: stretch; gap: 15px; }
            .myeco-online-overview-people { flex-direction: column; align-items: flex-start; gap: 15px; }
            .myeco-online-overview-divider { display: none; }
            .myeco-online-overview-progress { max-width: 100%; border-top: 1px solid var(--myeco-online-border-color); padding-top: 15px; }
            
            .myeco-online-timeline-section-header { flex-direction: column; align-items: flex-start; gap: 15px; }
            .myeco-online-schedule-filters { width: 100%; overflow-x: auto; }
            .myeco-online-timeline::before, .myeco-online-timeline-dot { display: none; }
            
            .myeco-online-timeline-item { flex-direction: column; gap: 10px; margin-bottom: 20px; }
            .myeco-online-timeline-date { width: auto; flex-direction: row; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
            .myeco-online-date-day { font-size: 1rem; }
            .myeco-online-date-month { font-size: 0.85rem; margin-top: 0; }
            .myeco-online-timeline-content { width: 100%; padding: 15px; }
            .myeco-online-lesson-row { flex-direction: column; align-items: flex-start; gap: 12px; }
            .myeco-online-lesson-info { gap: 10px; font-size: 0.85rem; }
            .myeco-online-lesson-actions { width: 100%; flex-wrap: wrap; }
            .myeco-online-status-badge, .myeco-online-btn-video { flex: 1; justify-content: center; text-align: center; }
            .myeco-online-report-alert { flex-direction: column; align-items: stretch; }
            .myeco-online-btn-report { text-align: center; }
        }


.myeco-sidebar {
    position: fixed; 
    top: 55px; /* Sitenin üst kısmında sabit header varsa burayı ona göre (örn: 70px) değiştir */
    left: -350px; 
    width: 340px; 
    height: calc(100vh - 55px); 
    background: var(--card-bg); 
    border-right: 1px solid var(--border-color); 
    z-index: 1200; 
    display: flex; 
    flex-direction: column; 
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 5px 0 20px rgba(0,0,0,0.5);
    color: var(--text-main);
    font-family: sans-serif;
}

.myeco-sidebar.myeco-sidebar-open { left: 0; }

.myeco-sidebar-header { padding: 15px 20px; background: #1c2128; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.myeco-sidebar-body { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 0; }

/* Scrollbar (Kaydırma Çubuğu) Stili */
.myeco-sidebar-body::-webkit-scrollbar { width: 8px; }
.myeco-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.myeco-sidebar-body::-webkit-scrollbar-thumb { background: #2a2f37; border-radius: 4px; }
.myeco-sidebar-body::-webkit-scrollbar-thumb:hover { background: var(--myeco-blue); }

/* --- Menü Butonları --- */
.myeco-menu-section { padding: 0 15px; }
.myeco-menu-item {
    padding: 14px 18px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; color: var(--text-muted); font-size: 14px; 
    transition: 0.2s; display: flex; align-items: center; text-decoration: none; font-weight: 500;
}
.myeco-menu-item i { font-size: 20px; margin-right: 14px; }
.myeco-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); text-decoration: none; }
.myeco-menu-item.active { background: rgba(61, 129, 253, 0.15); color: #fff; text-decoration: none; border: 1px solid rgba(61, 129, 253, 0.3); }
.myeco-menu-item.active i { color: var(--myeco-blue); }

.myeco-sidebar-divider { height: 1px; background: var(--border-color); margin: 20px; }

/* --- Grup Bilgileri Alanı --- */
.myeco-group-info { padding: 0 20px; }
.group-info-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 15px; font-weight: 700; }

.info-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; }
.info-label { color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.info-label i { font-size: 16px; color: #8b949e; }
.info-value { font-weight: 600; }

/* --- Progress Bar --- */
.progress-section { margin-top: 25px; background: #1c2128; padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03); }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 12px; font-weight: 500; align-items: center; }
.progress-label span:first-child { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.progress-label span:first-child i { color: var(--myeco-blue); font-size: 16px; }

.myeco-progress-bar-container { width: 100%; height: 8px; background: #0d1117; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color); }
.myeco-progress-bar { height: 100%; background: linear-gradient(90deg, #3d81fd, #2b6df0); border-radius: 4px; transition: width 0.5s ease; }

 /* --- Eğitim Adı Stilleri --- */
.info-item-full { display: flex; flex-direction: column; }
.myeco-training-title { padding: 0 20px 10px 20px; }
.training-badge { display: inline-block; font-size: 10px; background: rgba(61, 129, 253, 0.2); color: var(--myeco-blue); padding: 3px 8px; border-radius: 4px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.myeco-training-title h5 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; line-height: 1.4; }

/* --- Öğrenci Listesi Stilleri --- */
.myeco-student-list-container { background: #1c2128; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); margin-top: 15px; }
.myeco-student-list { max-height: 140px; overflow-y: auto; padding-right: 5px; margin-top: 10px; }

/* Sınıf listesinin iç scroll tasarımı */
.myeco-student-list::-webkit-scrollbar { width: 4px; }
.myeco-student-list::-webkit-scrollbar-track { background: transparent; }
.myeco-student-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

.myeco-student-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.myeco-student-item:last-child { border-bottom: none; padding-bottom: 0; }

/* İsimlerin yanındaki ufak yuvarlak ikonlar */
.student-avatar { width: 28px; height: 28px; border-radius: 50%; background: #30363d; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; }
.student-name { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}

/* odeme_sonuc.php DB'den gelen Fatura HTML çıktı düzeni */
.db-fatura-ciktisi {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem;
}
@media (min-width: 576px) {
	.db-fatura-ciktisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.db-fatura-ciktisi p:nth-child(5) { grid-column: 1 / -1; } /* Fatura Adresi Tam En */
}
@media (min-width: 992px) {
	.db-fatura-ciktisi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.db-fatura-ciktisi p:nth-child(5) { grid-column: 1 / -1; }
}

.db-fatura-ciktisi p {
	display: flex;
	flex-direction: column;
	color: #e4e4e7;
	font-size: 0.875rem;
	margin: 0;
}

.db-fatura-ciktisi p b {
	font-size: 0.7rem;
	font-weight: 500;
	color: #71717a;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.2rem;
}

/* ============================================================
           MİNMAL MODAL İÇERİĞİ CSS
           ============================================================ */
        .myeco-online-minimal-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .myeco-online-detail-box {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--myeco-online-border-color);
            border-radius: 8px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
        }

        .myeco-online-detail-label {
            font-size: 0.7rem; color: var(--myeco-online-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        }
        
        .myeco-online-detail-value {
            font-size: 0.95rem; color: var(--myeco-online-text-bright); font-weight: 600; display: flex; align-items: center; gap: 6px;
        }
        
        .myeco-online-detail-value i { 
            color: var(--myeco-online-blue); font-size: 1.15rem; 
        }

        /* Durum Badge Tasarımı (Grid İçi) */
        .myeco-online-status-badge {
            font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 6px;
            display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; width: fit-content;
        }
        
        .myeco-online-st-yapildi { 
            background: rgba(46, 213, 115, 0.1); 
            color: var(--myeco-online-status-yapildi); 
            border: 1px solid rgba(46, 213, 115, 0.2); 
        }
        
        .myeco-online-st-bekliyor { 
            background: rgba(255, 255, 255, 0.05); 
            color: var(--myeco-online-status-bekliyor); 
            border: 1px solid rgba(255, 255, 255, 0.1); 
        }

        /* Video Butonu */
        .myeco-online-btn-video {
            display: inline-flex; align-items: center; gap: 6px; background: transparent;
            color: var(--myeco-online-status-yapildi); border: 1px solid rgba(46, 213, 115, 0.3);
            padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: 0.2s;
        }
        .myeco-online-btn-video:hover { background: rgba(46, 213, 115, 0.1); }

        @media (max-width: 400px) {
            .myeco-online-minimal-grid { grid-template-columns: 1fr; }
        }

/* Sayfada X Kayıt Göster seçimi için */
.dataTables_length select {
    background-color: #2b2c30; /* Koyu arka plan (kendi temana göre hex kodunu değiştirebilirsin) */
    color: #ffffff; /* Yazı rengi beyaz */
    border: 1px solid #4a4b50; /* İnce, gri bir kenarlık */
    border-radius: 4px; /* Kenarları hafif oval yap */
    padding: 4px 8px; /* İç boşluklar (kutuyu biraz büyütür) */
    margin: 0 8px; /* "Sayfada" ve "Kayıt Göster" yazıları arasına boşluk bırakır */
    outline: none; /* Tıklanınca çıkan varsayılan mavi çerçeveyi kaldırır */
}

/* Seçiciye tıklandığında (focus) kenarlık rengi değişsin */
.dataTables_length select:focus {
    border-color: #6c757d; 
}
/* Bul (Arama) kutusu için */
.dataTables_filter input {
    background-color: #2b2c30; 
    color: #ffffff; 
    border: 1px solid #4a4b50; 
    border-radius: 4px; 
    padding: 4px 12px; 
    margin-left: 10px; /* "Bul:" yazısı ile kutu arasına boşluk bırakır */
    outline: none;
    transition: border-color 0.3s ease; /* Odaklanınca rengin yumuşak değişmesi için */
}

/* Arama kutusuna tıklandığında (focus) */
.dataTables_filter input:focus {
    border-color: #17a2b8; /* Tıklanınca belirginleşmesi için mavi/turkuaz tonu (temana göre değiştir) */
    box-shadow: 0 0 5px rgba(23, 162, 184, 0.5); /* Hafif dış ışıma efekti */
}

/* DataTables Butonları (Excel, PDF, Print vb.) */
.dt-buttons .dt-button {
    background-color: #2b2c30 !important; /* İnput ile aynı koyu arka plan */
    background-image: none !important; /* DataTables'ın varsayılan gradient arka planını ezer */
    color: #ffffff !important; /* İkon/Yazı rengi beyaz */
    border: 1px solid #4a4b50 !important; /* İnput ile aynı kenarlık */
    border-radius: 4px !important; /* Hafif oval köşeler */
    padding: 6px 12px !important; /* Buton içi boşluklar */
    margin-right: 5px !important; /* Butonlar arası boşluk */
    transition: all 0.3s ease !important; /* Yumuşak geçiş efekti */
}

/* Butonların üzerine gelindiğinde (Hover) */
.dt-buttons .dt-button:hover {
    background-color: #4a4b50 !important; /* Üzerine gelince biraz daha açık gri */
    border-color: #6c757d !important;
    color: #ffffff !important;
    cursor: pointer;
}

/* Butonlara tıklandığında (Active) */
.dt-buttons .dt-button:active {
    background-color: #17a2b8 !important; /* Tıklama anında temanla uyumlu bir vurgu rengi (örneğin turkuaz/mavi) */
    border-color: #17a2b8 !important;
    box-shadow: none !important;
}