/* ═══════════════════════════════════════════════════════════ BİLİŞİMCİ HOCAM — BH-THEME.CSS v1.0 Merkezi Tema Sistemi — 5 Tema × 3 Bölüm Yükleme: Kullanım: TEMALAR: siber | obsidian | crimson | cream | corporate BÖLÜMLER: yz (Yapay Zeka) | rk (Robotik Kodlama) | mp (Mobil Programlama) ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 1. VARSAYILAN TEMA (Siber Neon / Atölye Karanlık) ═══════════════════════════════════════════════════════════ */ :root, [data-theme=""], [data-theme="siber"] { /* ── Ortak Arkaplanlar (3 bölümde aynı) ── */ --bg1: #0a0e1a; --bg2: #0f1628; --bg3: #131929; --bg4: #1a2035; --card: #111827; --card2: #1a2340; /* ── Ortak Kenarlıklar ── */ --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.12); /* ── Ortak Metinler ── */ --text1: #e2e8f0; --text2: rgba(226,232,240,.70); --text3: rgba(226,232,240,.40); /* ── Ortak Header ── */ --header-bg: rgba(10,14,26,.95); --nav-hover: rgba(255,255,255,.06); /* ── Grid ── */ --grid: rgba(255,255,255,.022); --logo-slogan-color: rgba(226,232,240,.76); } /* ── Bölüm-Özel Renkler: Varsayılan (Siber) ── */ [data-module="yz"] { --primary: #00f5c4; --primary-rgb: 0,245,196; --secondary: #8b6fff; --accent: #ff4fa0; --nav-active: rgba(0,245,196,.08); /* Pipeline kart renkleri */ --c1: #ff4fa0; --c2: #f0a500; --c3: #5BAD6F; --c4: #3DAAA0; --c5: #2D7A90; --c6: #7c3aed; --c7: #00cfff; --c8: #f97316; /* Glow */ --glow1: rgba(255,79,160,.07); --glow2: rgba(45,122,144,.08); /* Logo gradient */ --logo-grad: linear-gradient(90deg, #7c3aed 0%, #c026d3 52%, #f472b6 100%); } [data-module="rk"] { --primary: #22c55e; --primary-rgb: 34,197,94; --secondary: #f97316; --accent: #06b6d4; --nav-active: rgba(34,197,94,.08); --c1: #6366f1; --c2: #f97316; --c3: #06b6d4; --c4: #10b981; --c5: #8b5cf6; --c6: #f59e0b; --c7: #14b8a6; --c8: #ef4444; --glow1: rgba(34,197,94,.10); --glow2: rgba(249,115,22,.07); --logo-grad: linear-gradient(90deg, #16a34a 0%, #22c55e 48%, #fb923c 100%); } [data-module="mp"] { --primary: #6366f1; --primary-rgb: 99,102,241; --secondary: #f97316; --accent: #06b6d4; --nav-active: rgba(99,102,241,.08); --c1: #6366f1; --c2: #f97316; --c3: #06b6d4; --c4: #10b981; --c5: #8b5cf6; --c6: #f59e0b; --c7: #14b8a6; --c8: #ef4444; --glow1: rgba(99,102,241,.10); --glow2: rgba(249,115,22,.07); --logo-grad: linear-gradient(90deg, #4f46e5 0%, #6366f1 52%, #22d3ee 100%); } [data-module="td"] { --primary: #f97316; --primary-rgb: 249,115,22; --secondary: #fb923c; --accent: #f59e0b; --nav-active: rgba(249,115,22,.08); --glow1: rgba(249,115,22,.10); --glow2: rgba(251,146,60,.08); --logo-grad: linear-gradient(90deg, #c2410c 0%, #f97316 52%, #fdba74 100%); } /* ═══════════════════════════════════════════════════════════ 2. OBSİDİAN TEMA ═══════════════════════════════════════════════════════════ */ [data-theme="obsidian"] { --bg1: #0d0d0d; --bg2: #141414; --bg3: #1c1c1c; --bg4: #242424; --card: #1a1a1a; --card2: #222222; --border: rgba(255,255,255,.08); --border2: rgba(255,107,53,.12); --text1: #e8e8e8; --text2: rgba(232,232,232,.70); --text3: rgba(232,232,232,.40); --header-bg: rgba(13,13,13,.96); --grid: rgba(255,255,255,.018); --logo-slogan-color: rgba(255, 226, 204, .78); } /* Obsidian: 3 bölümde aynı pipeline renkleri */ [data-theme="obsidian"][data-module="yz"], [data-theme="obsidian"][data-module="rk"], [data-theme="obsidian"][data-module="mp"], [data-theme="obsidian"][data-module="td"] { --primary: #ff6b35; --primary-rgb: 255,107,53; --secondary: #ff9500; --accent: #ffaa33; --nav-active: rgba(255,107,53,.08); --c1: #ff6b35; --c2: #ff9500; --c3: #ffaa33; --c4: #ffbb55; --c5: #ff9966; --c6: #ff8844; --c7: #ff7744; --c8: #ff6633; --glow1: rgba(255,107,53,.07); --glow2: rgba(255,149,0,.05); --logo-grad: linear-gradient(90deg, #ff8a4c 0%, #ff6b35 54%, #ffd08a 100%); } /* ═══════════════════════════════════════════════════════════ 3. CRİMSON TEMA ═══════════════════════════════════════════════════════════ */ [data-theme="crimson"] { --bg1: #0a0e1a; --bg2: #0f1628; --bg3: #131929; --bg4: #1a2035; --card: #111827; --card2: #1a2340; --border: rgba(239,68,68,.12); --border2: rgba(239,68,68,.07); --text1: #e2e8f0; --text2: rgba(226,232,240,.70); --text3: rgba(226,232,240,.40); --header-bg: rgba(10,14,26,.95); --grid: rgba(255,255,255,.022); --logo-slogan-color: rgba(255, 228, 228, .78); } /* Crimson: 3 bölümde aynı pipeline renkleri */ [data-theme="crimson"][data-module="yz"], [data-theme="crimson"][data-module="rk"], [data-theme="crimson"][data-module="mp"], [data-theme="crimson"][data-module="td"] { --primary: #ef4444; --primary-rgb: 239,68,68; --secondary: #f97316; --accent: #f87171; --nav-active: rgba(239,68,68,.08); --c1: #ef4444; --c2: #f97316; --c3: #f59e0b; --c4: #fb923c; --c5: #fdba74; --c6: #f97316; --c7: #ea580c; --c8: #c2410c; --glow1: rgba(239,68,68,.07); --glow2: rgba(249,115,22,.05); --logo-grad: linear-gradient(90deg, #f87171 0%, #ef4444 52%, #fdba74 100%); } /* ═══════════════════════════════════════════════════════════ 4. KREM TEMA (Açık) ═══════════════════════════════════════════════════════════ */ [data-theme="cream"], [data-theme="krem"] { --bg1: #f5f0e8; --bg2: #ece6d8; --bg3: #e6deca; --bg4: #ddd4bc; --card: #ffffff; --card2: #f8f4e8; --border: rgba(0,0,0,.10); --border2: rgba(0,0,0,.16); --text1: #1a1610; --text2: rgba(26,22,16,.68); --text3: rgba(26,22,16,.42); --header-bg: rgba(245,240,232,.96); --nav-hover: rgba(0,0,0,.05); --grid: rgba(0,0,0,.04); --logo-slogan-color: rgba(58, 40, 16, .72); } /* Krem × YZ: koyu vurgu renkler (açık arka plan için) */ [data-theme="cream"][data-module="yz"], [data-theme="krem"][data-module="yz"] { --primary: #5a1fc0; --primary-rgb: 90,31,192; --secondary: #7c3aed; --accent: #c4004a; --nav-active: rgba(196,0,74,.09); --c1: #c4004a; --c2: #a06600; --c3: #2e7a3c; --c4: #1a6e6a; --c5: #1a5a70; --c6: #5a1fc0; --c7: #006fa8; --c8: #b91c1c; --glow1: rgba(255,79,160,.05); --glow2: rgba(45,122,144,.04); --logo-grad: linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #db2777 100%); } /* Krem × RK */ [data-theme="cream"][data-module="rk"], [data-theme="krem"][data-module="rk"] { --primary: #16a34a; --primary-rgb: 22,163,74; --secondary: #ea580c; --accent: #2e7a3c; --nav-active: rgba(22,163,74,.09); --c1: #16a34a; --c2: #ea580c; --c3: #2e7a3c; --c4: #65a30d; --c5: #0284c7; --c6: #d97706; --c7: #0d9488; --c8: #b91c1c; --glow1: rgba(22,163,74,.08); --glow2: rgba(234,88,12,.05); --logo-grad: linear-gradient(90deg, #15803d 0%, #16a34a 52%, #ea580c 100%); } /* Krem × MP */ [data-theme="cream"][data-module="mp"], [data-theme="krem"][data-module="mp"] { --primary: #4f46e5; --primary-rgb: 79,70,229; --secondary: #ea580c; --accent: #06b6d4; --nav-active: rgba(79,70,229,.09); --c1: #4f46e5; --c2: #ea580c; --c3: #0891b2; --c4: #059669; --c5: #7c3aed; --c6: #d97706; --c7: #0d9488; --c8: #b91c1c; --glow1: rgba(79,70,229,.08); --glow2: rgba(234,88,12,.05); --logo-grad: linear-gradient(90deg, #4338ca 0%, #4f46e5 54%, #0891b2 100%); } [data-theme="cream"][data-module="td"], [data-theme="krem"][data-module="td"] { --primary: #df6418; --primary-rgb: 223,100,24; --secondary: #f39a15; --accent: #df6418; --nav-active: rgba(223,100,24,.09); --glow1: rgba(223,100,24,.08); --glow2: rgba(243,154,21,.06); --logo-grad: linear-gradient(90deg, #c2410c 0%, #df6418 56%, #f59e0b 100%); } /* ═══════════════════════════════════════════════════════════ 5. KURUMSAL TEMA (Corporate Açık) ═══════════════════════════════════════════════════════════ */ [data-theme="corporate"] { --bg1: #eef1f6; --bg2: #e3e8f0; --bg3: #d4e0ee; --bg4: #cbd5e1; --card: #ffffff; --card2: #f5f7fb; --border: rgba(37,99,235,.13); --border2: rgba(37,99,235,.07); --text1: #0d1a2e; --text2: rgba(13,26,46,.68); --text3: rgba(13,26,46,.42); --header-bg: rgba(238,241,246,.96); --nav-hover: rgba(0,0,0,.05); --grid: rgba(0,0,0,.04); --logo-slogan-color: rgba(30, 58, 90, .72); } /* Corporate: 3 bölümde aynı pipeline renkleri */ [data-theme="corporate"][data-module="yz"], [data-theme="corporate"][data-module="rk"], [data-theme="corporate"][data-module="mp"], [data-theme="corporate"][data-module="td"] { --primary: #2563eb; --primary-rgb: 37,99,235; --secondary: #16a34a; --accent: #3b82f6; --nav-active: rgba(37,99,235,.08); --c1: #2563eb; --c2: #16a34a; --c3: #3b82f6; --c4: #22c55e; --c5: #0ea5e9; --c6: #f97316; --c7: #8b5cf6; --c8: #ef4444; --glow1: rgba(37,99,235,.06); --glow2: rgba(22,163,74,.04); --logo-grad: linear-gradient(90deg, #1d4ed8 0%, #2563eb 58%, #60a5fa 100%); } /* ═══════════════════════════════════════════════════════════ 6. ORTAK TEMA STİLLERİ — Tüm temalar & bölümler ═══════════════════════════════════════════════════════════ */ /* ── Body ── */ html, body { background-color: var(--bg1) !important; color: var(--text1) !important; } /* ── Header ── */ header { background: var(--header-bg) !important; border-bottom-color: var(--border) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .4s, border-color .4s; } .header-nav a:hover, .hnav a:hover { color: var(--primary); background: var(--nav-hover); } .header-nav a.active, .header-nav a.act, .hnav a.active, .hnav a.act { color: var(--primary); background: var(--nav-active); } /* ── Linkler ── */ a:hover { color: var(--primary); } /* ── Logo icon ── */ .logo-icon { background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 0 20px rgba(var(--primary-rgb), .35); animation: pulse-glow 3s ease-in-out infinite; } .logo-main span { color: var(--primary); } /* ── Logo başlık gradient ── */ .header-logo-ad { background: var(--logo-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Tema FAB ── */ .theme-fab-btn, .tbtn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 16px rgba(var(--primary-rgb), .35); } .theme-fab-btn:hover, .tbtn:hover { box-shadow: 0 6px 28px rgba(0,0,0,.4); } /* ── Tema tray ── */ .theme-tray, .tray { background: var(--bg3); border-color: var(--border2); } .tray-opt.act, .topt.act { background: rgba(var(--primary-rgb), .12); outline: 1px solid var(--border2); } .tray-opt:hover, .topt:hover { background: var(--nav-hover, rgba(255,255,255,.06)); } /* ── İlerleme çubuğu ── */ .mod-il-fill, .progress-fill { background: linear-gradient(90deg, var(--primary), var(--secondary)) !important; } /* ── Badge ── */ .badge-dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); } .hero-badge { color: var(--primary); border-color: rgba(var(--primary-rgb), .35); background: rgba(var(--primary-rgb), .10); } /* ── Hero underline ── */ .hero-underline, .mod-hero-underline { background: linear-gradient(90deg, var(--primary), var(--secondary), transparent); } /* ── Hero orb'lar ── */ .hero-orb.orb1 { background: radial-gradient(circle, var(--glow1) 0%, transparent 65%); } .hero-orb.orb2 { background: radial-gradient(circle, var(--glow2) 0%, transparent 65%); } /* ── Subnav ── */ .subnav, .mod-subnav { background: var(--bg2); border-bottom: 1px solid var(--border); transition: background .4s, border-color .4s; } /* ── h1-glow gradient ── */ .h1-glow { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Butonlar (Hub sayfaları) ── */ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 20px rgba(var(--primary-rgb), .3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--primary-rgb), .45); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), .05); } /* ── Terminal prompt rengi ── */ .tl-p { color: var(--primary); } .tl-hi { color: var(--primary); } .tl-cursor { background: var(--primary); } /* Terminal koyu kaldığı için koyu tema renklerini parlak override et */ .terminal-body .tl-hi { color: #00f5c4; } /* ── Terminal scrollbar ── */ .terminal-body::-webkit-scrollbar-thumb { background: var(--primary); } /* ── Ticker label rengi ── */ .ticker-label { background: var(--primary); color: #fff; } /* ── Back button ── */ .back-btn:hover { border-color: var(--primary); color: var(--primary); } /* ── Section gradient başlık ── */ .pt-h1 .g, .mod-hero-h1 .grad { background: linear-gradient(110deg, var(--primary) 0%, var(--secondary) 60%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Subnav anchor ── */ .sn-anchor.active, .sn-anchor:hover { color: var(--primary); border-bottom-color: var(--primary); } /* ── Konu tamamla chip ── */ .chip-tamamla { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; } /* ── Seviye tab ── */ .lv-tab.lv-aktif { background: rgba(var(--primary-rgb), .15); color: var(--primary); border-bottom-color: var(--primary); } /* ── Step nav ── */ .step-nav-btn:hover { border-color: var(--primary); } .step-nav-btn.next { background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), rgba(var(--secondary-rgb, 249,115,22), .08)); border-color: rgba(var(--primary-rgb), .25); } /* ── Pipeline sidebar ── */ .pipe-item.pipe-active .pipe-name { color: var(--primary); } .pipe-pulse { background: var(--primary); box-shadow: 0 0 8px var(--primary); } /* ═══════════════════════════════════════════════════════════ 7. AÇIK TEMA DÜZELTMELERİ (Cream + Corporate) ═══════════════════════════════════════════════════════════ */ [data-theme="cream"] header, [data-theme="krem"] header, [data-theme="corporate"] header { box-shadow: 0 1px 10px rgba(0,0,0,.07); } [data-theme="cream"] .subnav, [data-theme="krem"] .subnav { background: rgba(245,240,232,.97); } [data-theme="corporate"] .subnav { background: rgba(238,241,246,.97); } [data-theme="cream"] .hero, [data-theme="corporate"] .hero { background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 60%, var(--bg1) 100%) !important; } [data-theme="cream"] .hero-desc, [data-theme="corporate"] .hero-desc { color: var(--text2) !important; } [data-theme="cream"] .btn-secondary, [data-theme="corporate"] .btn-secondary { background: rgba(var(--primary-rgb), .08) !important; color: var(--primary) !important; border-color: rgba(var(--primary-rgb), .45) !important; } [data-theme="cream"] .back-btn, [data-theme="corporate"] .back-btn { color: var(--text2) !important; border-color: var(--border) !important; background: rgba(0,0,0,.04) !important; } /* Açık tema logo override */ [data-theme="cream"] .logo-icon, [data-theme="corporate"] .logo-icon { background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; box-shadow: 0 2px 12px rgba(var(--primary-rgb), .35) !important; } /* ── Terminal her temada koyu kalır ── */ .hero-terminal, .terminal-body { background: #12151f !important; color: #cdd5e0 !important; } .terminal-bar { background: #1e2232 !important; } /* ═══════════════════════════════════════════════════════════ 8. SCROLLBAR (Tema uyumlu) ═══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .35); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .60); }