:root { --primary: #22c55e; --navy: #0f172a; --bg: #f8fafc; } body { font-family: 'Segoe UI', system-ui, sans-serif; margin: 0; background-color: var(--bg); } /* HEADER GÜNCELLEME */ .main-header { background: var(--navy); color: white; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; } .header-logo img { height: 35px; } .user-info .name { font-size: 13px; font-weight: 600; } .user-info .role { font-size: 11px; display: block; opacity: 0.7; } /* LAYOUT: MOBİLDE ALT ALTA GELİR */ .video-layout { display: grid; grid-template-columns: 320px 1fr; } /* DASHBOARD KARTLARI */ .stat-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 30px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /* MOBİL ÖZEL AYARLAR (@media query) */ @media (max-width: 768px) { .video-layout { grid-template-columns: 1fr; /* Sidebar ve Video alt alta gelir */ } .content-area { padding: 20px 15px; } h1 { font-size: 22px !important; } .stat-container { grid-template-columns: 1fr; /* İstatistikler tek sütun */ } .category-card { padding: 20px !important; } .video-sidebar { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px !important; } .video-main-content { padding: 20px 15px !important; } .btn-card { font-size: 16px !important; /* Mobilde parmakla basmak kolay olsun */ padding: 15px !important; } } /* ========================================================= DARK THEME (tek merkez, tekrarsız) Kullanım: ========================================================= */ body.theme-dark{ --bg: #0b1222; /* açık temadaki --bg override */ background-color: var(--bg); color: rgba(255,255,255,.92); } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: #fff; } /* Bootstrap text renkleri dark theme için */ body.theme-dark .text-muted { color: rgba(255,255,255,.55) !important; } body.theme-dark .text-secondary { color: rgba(255,255,255,.50) !important; } body.theme-dark .text-dark { color: rgba(255,255,255,.92) !important; } /* Bootstrap gelmese bile görünürlük (fallback) */ body.theme-dark .text-white-50 { color: rgba(255,255,255,.65) !important; } body.theme-dark .small { color: rgba(255,255,255,.70); } /* Akış satırları / kart görselliği (kurumsal cam efekt) */ body.theme-dark .flow-row{ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08) !important; border-radius: 14px; padding: 12px 14px; } body.theme-dark .flow-row:hover:not(.is-locked){ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45) !important; } body.theme-dark .is-locked{ opacity: .55; } /* =========================== VIDEO SIDEBAR / NAV UI =========================== */ .video-sidebar{ background: #0f172a; padding: 20px; border-right: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.92); } .nav-item-box{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px; margin-bottom: 8px; border-radius: 12px; text-decoration: none; color: rgba(255,255,255,.92); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: all .15s ease; } .nav-item-box span{ display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; } .nav-item-box:hover{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); transform: translateX(2px); } .nav-item-box.active{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); } .nav-item-box.locked{ opacity: .55; cursor: not-allowed; } .btn-back{ display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.70); text-decoration: none; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .btn-back:hover{ background: rgba(255,255,255,.06); } /* =========================== PROGRESS BAR FIX (Sidebar ilerleme çubuğu görünürlüğü) =========================== */ .progress-bar{ border-radius: 999px; overflow: hidden; } .progress-fill{ height: 100%; /* <-- kritik: görünmesini sağlar */ width: 0%; background: var(--primary); border-radius: inherit; transition: width .25s ease; } /* =========================== DASHBOARD CARD PROGRESS FIX (index.html kartlardaki ilerleme barı) =========================== */ /* En sık kullanılan progress kapsayıcıları */ .progress, .progress-bar, .card-progress, .module-progress{ height: 6px; border-radius: 999px; overflow: hidden; } /* İç dolgu elemanları (isim farklı olsa bile) */ .progress > div, .progress-bar > div, .card-progress > div, .module-progress > div, .progress .fill, .progress .bar, .progress .inner, .progress .progress-fill{ height: 100%; background: var(--primary); width: 0%; border-radius: inherit; transition: width .25s ease; }