/* ═══════════════════════════════════════════════════════════════════════ TEMA SİSTEMİ — tekrar.dijitalegitim 5 tema × (aydınlık + karanlık) = 10 görünüm Tema referansları: • blue → Mavi/indigo (mevcut, varsayılan) • amber → Güneş — parlak sarı/turuncu, oyunsu çocuk teması • green → Orman — koyu zeytin yeşili, doğa/macera teması • ocean → Pastel — yumuşak sarı-yeşil, kid-friendly pastel • violet → Mor/Oyun — saf beyaz + mor, oyunlaştırma teması Kullanım: ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1. MAVI TEMA — Mevcut varsayılan, temiz mavi/indigo ─────────────────────────────────────────────────────────────────────── */ html[data-theme="blue"], html:not([data-theme]) { --primary: #3157f6; --primary-dark: #2447d7; --bg: #eef3ff; --panel: #ffffff; --panel-2: #f7f9ff; --text: #1f2a44; --muted: #667491; --line: #d7e2ff; --shadow: 0 18px 46px rgba(48,72,126,.08); --bg-soft: #f4f7fb; --surface: #ffffff; --surface-2: #f7f9ff; --success: #1f9d6d; --warning: #f59e0b; --danger: #d64545; --shadow-soft: 0 18px 40px rgba(27,67,120,.10); --radius: 24px; } /* ─────────────────────────────────────────────────────────────────────── 2. AMBER / GÜNEŞ — Görsel 1 Parlak sarı-turuncu, oyunsu, sıcak çocuk eğitim teması Referans: sarı arka plan, turuncu CTAlar, beyaz kartlar, illüstrasyonlar ─────────────────────────────────────────────────────────────────────── */ html[data-theme="amber"] { --primary: #E8920A; --primary-dark: #C47200; --bg: #FFF7DE; --panel: #ffffff; --panel-2: #FFFCF2; --text: #2C1800; --muted: #7A5220; --line: #F5DFA0; --shadow: 0 18px 46px rgba(180,100,0,.10); --bg-soft: #FFF3CA; --surface: #ffffff; --surface-2: #FFFCF2; --success: #2A9A40; --warning: #E8920A; --danger: #e05050; --shadow-soft: 0 18px 40px rgba(180,100,0,.12); --radius: 28px; } html[data-theme="amber"] body { background: linear-gradient(180deg,#FFF7DE 0%,#FFF2C8 100%); } html[data-theme="amber"] body.coach-chat-body { background: radial-gradient(circle at top,#FFFBF0 0,#FFF5D0 46%,#FFF0B8 100%); } html[data-theme="amber"] .coach-avatar, html[data-theme="amber"] .avatar-dot, html[data-theme="amber"] .companion-avatar { background: linear-gradient(180deg,#FFB830 0%,#F59A10 52%,#E8920A 100%); box-shadow: 0 14px 28px rgba(232,146,10,.28); } html[data-theme="amber"] .user-bubble { background: linear-gradient(135deg,#FFB830 0%,#E8920A 100%); color: #fff; } html[data-theme="amber"] .btn-primary, html[data-theme="amber"] .action-button.primary { background: linear-gradient(135deg,#F5A820 0%,#E8920A 100%); } html[data-theme="amber"] .coach-stage { background: rgba(255,255,255,.96); border-color: #F5DFA0; } html[data-theme="amber"] .coach-log { background: linear-gradient(180deg,#FFFCF5 0%,#FFF8E8 100%); } html[data-theme="amber"] .bot-bubble { border-color: #F5DFA0; } html[data-theme="amber"] .chat-card { border-color: #F5DFA0; box-shadow: 0 12px 28px rgba(180,100,0,.07); } html[data-theme="amber"] .bubble-action span { background: #FFF4CC; border-color: #F0CC6A; color: #2C1800; } html[data-theme="amber"] .bubble-action:hover span { background: #FFE899; border-color: #E0AA30; } html[data-theme="amber"] .bubble-action.primary span { background: #FFE060; border-color: #D4940A; color: #5A2800; font-weight: 700; } html[data-theme="amber"] .chat-card-tag, html[data-theme="amber"] .feedback-chip, html[data-theme="amber"] .coach-eyebrow, html[data-theme="amber"] .coach-chip { background: #FFE89A; color: #8A4800; } html[data-theme="amber"] .concept-hero-card, html[data-theme="amber"] .unit-card, html[data-theme="amber"] .reading-card, html[data-theme="amber"] .step-card, html[data-theme="amber"] .history-card, html[data-theme="amber"] .status-card, html[data-theme="amber"] .result-card, html[data-theme="amber"] .suggestion-list-card { background: #FFFCF4; border-color: #EDD090; } html[data-theme="amber"] .unit-concept-btn { border-color: #F0D080; background: #fff; } html[data-theme="amber"] .unit-concept-btn:hover { background: #FFF4CC; border-color: #E0A830; } html[data-theme="amber"] .unit-concept-btn.is-selected { background: #FFE860; border-color: #D4940A; color: #5A2800; } html[data-theme="amber"] .plan-divider-card { background: linear-gradient(135deg,#FFE899 0%,#FFFCF2 100%); border-color: #E0B040; } html[data-theme="amber"] .plan-divider-inner { color: #7A4000; } html[data-theme="amber"] .reading-hints, html[data-theme="amber"] .concept-plan-summary { background: #FFF4CC; border-left-color: #E8920A; color: #5A3000; } html[data-theme="amber"] .steps-strip .active { background: #FFE060; color: #8A4800; border-color: #D4940A; } html[data-theme="amber"] .clean-admin-nav a.active { background: #FFE060; border-color: #D4940A; color: #8A4800; } html[data-theme="amber"] .messenger-hero-panel, html[data-theme="amber"] .auth-hero-panel { background: linear-gradient(135deg,#D47000 0%,#E8920A 48%,#FFB830 100%); } html[data-theme="amber"] .result-all-done { background: #E8F8E0; color: #1A6020; } html[data-theme="amber"] .result-next-btn { background: #FFE060; border-color: #D4940A; color: #5A2800; } html[data-theme="amber"] .related-concept-btn, html[data-theme="amber"] .suggestion-btn { border-color: #F0D080; background: #fff; color: #2C1800; } html[data-theme="amber"] .related-concept-btn:hover, html[data-theme="amber"] .suggestion-btn:hover { background: #FFF4CC; border-color: #E0A830; } /* ─────────────────────────────────────────────────────────────────────── 3. GREEN / ORMAN — Görsel 2 Koyu zeytin yeşili, doğa/macera, toprak tonları Referans: ordu yeşili, toprak kahvesi, heksagonal rozet hissi ─────────────────────────────────────────────────────────────────────── */ html[data-theme="green"] { --primary: #4E7224; --primary-dark: #38561A; --bg: #EBF0D8; --panel: #F8FCF0; --panel-2: #F2F7E6; --text: #1A2A08; --muted: #5A6E38; --line: #C8D8A0; --shadow: 0 18px 46px rgba(40,70,10,.10); --bg-soft: #E4ECC8; --surface: #F8FCF0; --surface-2: #F2F7E6; --success: #4E7224; --warning: #C47828; --danger: #C84040; --shadow-soft: 0 18px 40px rgba(40,70,10,.12); --radius: 20px; } html[data-theme="green"] body { background: linear-gradient(180deg,#EBF0D8 0%,#E2EAC8 100%); } html[data-theme="green"] body.coach-chat-body { background: radial-gradient(circle at top,#F2F6E2 0,#E8EDD0 46%,#DDE8C4 100%); } html[data-theme="green"] .coach-avatar, html[data-theme="green"] .avatar-dot, html[data-theme="green"] .companion-avatar { background: linear-gradient(180deg,#7AAA3A 0%,#5E8A26 52%,#4E7224 100%); box-shadow: 0 14px 28px rgba(78,114,36,.28); border-radius: 14px; } html[data-theme="green"] .user-bubble { background: linear-gradient(135deg,#7AAA3A 0%,#4E7224 100%); } html[data-theme="green"] .btn-primary, html[data-theme="green"] .action-button.primary { background: linear-gradient(135deg,#6A9830 0%,#4E7224 100%); } html[data-theme="green"] .coach-stage { background: rgba(248,252,240,.96); border-color: #C8D8A0; } html[data-theme="green"] .coach-log { background: linear-gradient(180deg,#F5FAE8 0%,#EFF5DA 100%); } html[data-theme="green"] .bot-bubble { border-color: #C8D8A0; } html[data-theme="green"] .chat-card { border-color: #C8D8A0; } html[data-theme="green"] .bubble-action span { background: #E8F0C8; border-color: #A8C068; color: #1A2A08; } html[data-theme="green"] .bubble-action:hover span { background: #D8E8A8; border-color: #7AA040; } html[data-theme="green"] .bubble-action.primary span { background: #C4DC80; border-color: #5E8A26; color: #1A3800; font-weight: 700; } html[data-theme="green"] .chat-card-tag, html[data-theme="green"] .feedback-chip, html[data-theme="green"] .coach-eyebrow, html[data-theme="green"] .coach-chip { background: #D8ECA0; color: #2E5010; } html[data-theme="green"] .concept-hero-card, html[data-theme="green"] .unit-card, html[data-theme="green"] .reading-card, html[data-theme="green"] .step-card, html[data-theme="green"] .history-card, html[data-theme="green"] .status-card, html[data-theme="green"] .result-card, html[data-theme="green"] .suggestion-list-card { background: #F5FAE8; border-color: #BAD090; } html[data-theme="green"] .unit-concept-btn { border-color: #B8D080; background: #F8FCF0; } html[data-theme="green"] .unit-concept-btn:hover { background: #E8F0C8; border-color: #80A840; } html[data-theme="green"] .unit-concept-btn.is-selected { background: #C4DC80; border-color: #5E8A26; color: #1A3800; } html[data-theme="green"] .plan-divider-card { background: linear-gradient(135deg,#D8ECA0 0%,#F2F7E6 100%); border-color: #98C050; } html[data-theme="green"] .plan-divider-inner { color: #284010; } html[data-theme="green"] .reading-hints, html[data-theme="green"] .concept-plan-summary { background: #DFF0A8; border-left-color: #5E8A26; color: #1A3000; } html[data-theme="green"] .steps-strip .active { background: #C4DC80; color: #284010; border-color: #5E8A26; } html[data-theme="green"] .clean-admin-nav a.active { background: #C4DC80; border-color: #5E8A26; color: #284010; } html[data-theme="green"] .messenger-hero-panel, html[data-theme="green"] .auth-hero-panel { background: linear-gradient(135deg,#284010 0%,#4E7224 48%,#80A840 100%); } html[data-theme="green"] .result-all-done { background: #C4DC80; color: #1A3800; } html[data-theme="green"] .related-concept-btn, html[data-theme="green"] .suggestion-btn { border-color: #B8D080; background: #F8FCF0; color: #1A2A08; } html[data-theme="green"] .related-concept-btn:hover, html[data-theme="green"] .suggestion-btn:hover { background: #E8F0C8; border-color: #80A840; } /* ─────────────────────────────────────────────────────────────────────── 4. OCEAN / PASTEL KIDDY — Görsel 3 Çok yumuşak sarı-yeşil, pastel, çocuk dostu Referans: açık sarımsı arka plan, yumuşak renk geçişleri, pastel kartlar ─────────────────────────────────────────────────────────────────────── */ html[data-theme="ocean"] { --primary: #66AA1A; --primary-dark: #4E8A10; --bg: #F8FAE8; --panel: #ffffff; --panel-2: #FDFEF6; --text: #202808; --muted: #607040; --line: #D8ECA0; --shadow: 0 18px 46px rgba(60,80,10,.08); --bg-soft: #F2F8D8; --surface: #ffffff; --surface-2: #FDFEF6; --success: #66AA1A; --warning: #E8B020; --danger: #D84040; --shadow-soft: 0 18px 40px rgba(60,80,10,.10); --radius: 22px; } html[data-theme="ocean"] body { background: linear-gradient(180deg,#F8FAE8 0%,#F4F8DC 100%); } html[data-theme="ocean"] body.coach-chat-body { background: radial-gradient(circle at top,#FDFEF6 0,#F8FAE8 46%,#F2F6D8 100%); } html[data-theme="ocean"] .coach-avatar, html[data-theme="ocean"] .avatar-dot, html[data-theme="ocean"] .companion-avatar { background: linear-gradient(180deg,#90CC40 0%,#70B820 52%,#66AA1A 100%); box-shadow: 0 14px 28px rgba(102,170,26,.26); } html[data-theme="ocean"] .user-bubble { background: linear-gradient(135deg,#90CC40 0%,#66AA1A 100%); color: #fff; } html[data-theme="ocean"] .btn-primary, html[data-theme="ocean"] .action-button.primary { background: linear-gradient(135deg,#78BE28 0%,#66AA1A 100%); } html[data-theme="ocean"] .coach-stage { background: rgba(255,255,255,.96); border-color: #D8ECA0; } html[data-theme="ocean"] .coach-log { background: linear-gradient(180deg,#FDFEF8 0%,#F8FAE8 100%); } html[data-theme="ocean"] .bot-bubble { border-color: #D8ECA0; } html[data-theme="ocean"] .chat-card { border-color: #D8ECA0; } html[data-theme="ocean"] .bubble-action span { background: #EEF8C8; border-color: #B0D860; color: #202808; } html[data-theme="ocean"] .bubble-action:hover span { background: #DCEEA0; border-color: #80C030; } html[data-theme="ocean"] .bubble-action.primary span { background: #D4EE88; border-color: #5A9A18; color: #1A3800; font-weight: 700; } html[data-theme="ocean"] .chat-card-tag, html[data-theme="ocean"] .feedback-chip, html[data-theme="ocean"] .coach-eyebrow, html[data-theme="ocean"] .coach-chip { background: #DDEEA0; color: #2E5010; } html[data-theme="ocean"] .concept-hero-card, html[data-theme="ocean"] .unit-card, html[data-theme="ocean"] .reading-card, html[data-theme="ocean"] .step-card, html[data-theme="ocean"] .history-card, html[data-theme="ocean"] .status-card, html[data-theme="ocean"] .result-card, html[data-theme="ocean"] .suggestion-list-card { background: #FDFEF8; border-color: #C8E480; } html[data-theme="ocean"] .unit-concept-btn { border-color: #C0E060; background: #fff; } html[data-theme="ocean"] .unit-concept-btn:hover { background: #EEF8C8; border-color: #88C030; } html[data-theme="ocean"] .unit-concept-btn.is-selected { background: #D4EE88; border-color: #5A9A18; color: #1A3800; } html[data-theme="ocean"] .plan-divider-card { background: linear-gradient(135deg,#DDF0A0 0%,#FDFEF6 100%); border-color: #A0CC50; } html[data-theme="ocean"] .plan-divider-inner { color: #2A5010; } html[data-theme="ocean"] .reading-hints, html[data-theme="ocean"] .concept-plan-summary { background: #E8F8B8; border-left-color: #66AA1A; color: #1A3000; } html[data-theme="ocean"] .steps-strip .active { background: #D4EE88; color: #2A5010; border-color: #66AA1A; } html[data-theme="ocean"] .clean-admin-nav a.active { background: #D4EE88; border-color: #66AA1A; color: #2A5010; } html[data-theme="ocean"] .messenger-hero-panel, html[data-theme="ocean"] .auth-hero-panel { background: linear-gradient(135deg,#2E6008 0%,#66AA1A 48%,#90CC40 100%); } html[data-theme="ocean"] .result-all-done { background: #D4EE88; color: #1A3800; } html[data-theme="ocean"] .related-concept-btn, html[data-theme="ocean"] .suggestion-btn { border-color: #C0E060; background: #fff; color: #202808; } html[data-theme="ocean"] .related-concept-btn:hover, html[data-theme="ocean"] .suggestion-btn:hover { background: #EEF8C8; border-color: #88C030; } /* ─────────────────────────────────────────────────────────────────────── 5. VIOLET / OYUN — Görsel 4 Neredeyse saf beyaz, mor/lila, oyunlaştırma, minimal & clean Referans: beyaz bg, mor avatar/badge, pastel pembe-mavi-sarı kart tintleri ─────────────────────────────────────────────────────────────────────── */ html[data-theme="violet"] { --primary: #7050CC; --primary-dark: #5638AA; --bg: #F5F3FE; --panel: #ffffff; --panel-2: #FAF9FF; --text: #180E34; --muted: #7060A0; --line: #DDD4F4; --shadow: 0 18px 46px rgba(80,50,150,.08); --bg-soft: #EFEBFE; --surface: #ffffff; --surface-2: #FAF9FF; --success: #2A9A50; --warning: #E0900A; --danger: #D84040; --shadow-soft: 0 18px 40px rgba(80,50,150,.10); --radius: 24px; } html[data-theme="violet"] body { background: linear-gradient(180deg,#F5F3FE 0%,#EDE9FE 100%); } html[data-theme="violet"] body.coach-chat-body { background: radial-gradient(circle at top,#FAF9FF 0,#F2F0FE 46%,#ECEAFE 100%); } html[data-theme="violet"] .coach-avatar, html[data-theme="violet"] .avatar-dot, html[data-theme="violet"] .companion-avatar { background: linear-gradient(180deg,#9A7AE8 0%,#8060D8 52%,#7050CC 100%); box-shadow: 0 14px 28px rgba(112,80,204,.26); } html[data-theme="violet"] .user-bubble { background: linear-gradient(135deg,#9A7AE8 0%,#7050CC 100%); } html[data-theme="violet"] .btn-primary, html[data-theme="violet"] .action-button.primary { background: linear-gradient(135deg,#8A68DC 0%,#7050CC 100%); } html[data-theme="violet"] .coach-stage { background: rgba(255,255,255,.98); border-color: #DDD4F4; box-shadow: 0 20px 50px rgba(80,50,150,.07); } html[data-theme="violet"] .coach-log { background: linear-gradient(180deg,#FDFCFF 0%,#F8F6FF 100%); } html[data-theme="violet"] .bot-bubble { border-color: #DDD4F4; } html[data-theme="violet"] .chat-card { border-color: #DDD4F4; } html[data-theme="violet"] .bubble-action span { background: #F0ECFF; border-color: #C4B4F0; color: #180E34; } html[data-theme="violet"] .bubble-action:hover span { background: #E4DCFF; border-color: #9880D8; } html[data-theme="violet"] .bubble-action.primary span { background: #DDD0FF; border-color: #6840C0; color: #18086A; font-weight: 700; } html[data-theme="violet"] .chat-card-tag, html[data-theme="violet"] .feedback-chip, html[data-theme="violet"] .coach-eyebrow, html[data-theme="violet"] .coach-chip { background: #EAE0FF; color: #5638AA; } html[data-theme="violet"] .concept-hero-card, html[data-theme="violet"] .unit-card, html[data-theme="violet"] .reading-card, html[data-theme="violet"] .step-card, html[data-theme="violet"] .history-card, html[data-theme="violet"] .status-card, html[data-theme="violet"] .result-card, html[data-theme="violet"] .suggestion-list-card { background: #FAF9FF; border-color: #D0C4F0; } html[data-theme="violet"] .unit-concept-btn { border-color: #CCC0EC; background: #fff; } html[data-theme="violet"] .unit-concept-btn:hover { background: #F0ECFF; border-color: #A090D8; } html[data-theme="violet"] .unit-concept-btn.is-selected { background: #DDD0FF; border-color: #6840C0; color: #18086A; } html[data-theme="violet"] .plan-divider-card { background: linear-gradient(135deg,#EAE0FF 0%,#FAF9FF 100%); border-color: #B0A0E0; } html[data-theme="violet"] .plan-divider-inner { color: #4020A0; } html[data-theme="violet"] .reading-hints, html[data-theme="violet"] .concept-plan-summary { background: #EDE5FF; border-left-color: #8060D8; color: #180E34; } html[data-theme="violet"] .steps-strip .active { background: #DDD0FF; color: #4020A0; border-color: #7050CC; } html[data-theme="violet"] .clean-admin-nav a.active { background: #DDD0FF; border-color: #7050CC; color: #4020A0; } html[data-theme="violet"] .messenger-hero-panel, html[data-theme="violet"] .auth-hero-panel { background: linear-gradient(135deg,#3A1888 0%,#7050CC 48%,#9A7AE8 100%); } html[data-theme="violet"] .result-all-done { background: #DDF4E4; color: #1A6040; } html[data-theme="violet"] .result-next-btn { background: #DDD0FF; border-color: #6840C0; color: #18086A; } html[data-theme="violet"] .related-concept-btn, html[data-theme="violet"] .suggestion-btn { border-color: #CCC0EC; background: #fff; color: #180E34; } html[data-theme="violet"] .related-concept-btn:hover, html[data-theme="violet"] .suggestion-btn:hover { background: #F0ECFF; border-color: #A090D8; } /* ═══════════════════════════════════════════════════════════════════════ KARANLIK MOD — TEMEL KATMAN (tüm temalar için ortak) ═══════════════════════════════════════════════════════════════════════ */ html[data-dark="1"] { --bg: #0e111b; --panel: #161c2e; --panel-2: #1b2236; --text: #e2e8f4; --muted: #8a9cc8; --line: #28344e; --shadow: 0 18px 46px rgba(0,0,0,.42); --bg-soft: #121725; --surface: #161c2e; --surface-2: #1b2236; --shadow-soft: 0 18px 40px rgba(0,0,0,.38); } html[data-dark="1"] body { background: #0e111b; color: var(--text); } html[data-dark="1"] body.coach-chat-body { background: radial-gradient(circle at top,#141929 0,#0f1520 46%,#0d1117 100%); } html[data-dark="1"] .coach-stage { background: rgba(22,28,46,.97); border-color: #28344e; } html[data-dark="1"] .coach-log { background: linear-gradient(180deg,#131827 0%,#0f1520 100%); } html[data-dark="1"] .coach-compose { background: rgba(18,23,37,.97); border-top-color: #28344e; } html[data-dark="1"] .coach-compose-inner { background: #161c2e; border-color: #28344e; } html[data-dark="1"] #messageInput { background: #1b2236; border-color: #2e3c58; color: var(--text); } html[data-dark="1"] #messageInput::placeholder { color: #5a6e96; } html[data-dark="1"] .bot-bubble { background: #1b2236; color: #d6e4f5; border-color: #28344e; } html[data-dark="1"] .hero-card, html[data-dark="1"] .lesson-card, html[data-dark="1"] .embedded-chat-card { background: linear-gradient(180deg,#1b2236 0%,#161c2e 100%); } html[data-dark="1"] .chat-card { background: #1b2236; border-color: #28344e; box-shadow: 0 12px 30px rgba(0,0,0,.24); } html[data-dark="1"] .chat-card-body { color: #9bb0cc; } html[data-dark="1"] .chat-card-title { color: #e2e8f4; } html[data-dark="1"] .action-hub { background: transparent; border-color: transparent; box-shadow: none; } html[data-dark="1"] .action-hub-title { color: #5a6e96; } html[data-dark="1"] .bubble-action span { background: #1e2840; border-color: #2e3c58; color: #c8d8f0; } html[data-dark="1"] .bubble-action:hover span { background: #26324e; border-color: #3a4e72; color: #e2e8f4; } html[data-dark="1"] .bubble-action.primary span { background: #1e3060; border-color: #3a5ab0; color: #a8c4f5; } html[data-dark="1"] .concept-hero-card, html[data-dark="1"] .unit-card, html[data-dark="1"] .reading-card, html[data-dark="1"] .step-card, html[data-dark="1"] .history-card, html[data-dark="1"] .status-card, html[data-dark="1"] .result-card, html[data-dark="1"] .suggestion-list-card { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .unit-concept-btn { background: #1b2236; border-color: #2e3c58; color: #c8d8f0; } html[data-dark="1"] .unit-concept-btn:hover { background: #212e48; border-color: #3a4e72; } html[data-dark="1"] .related-concept-btn, html[data-dark="1"] .suggestion-btn { background: #1b2236; border-color: #2e3c58; color: #c8d8f0; } html[data-dark="1"] .related-concept-btn:hover, html[data-dark="1"] .suggestion-btn:hover { background: #212e48; border-color: #3a4e72; } html[data-dark="1"] .rcb-hint { color: #6a82b0; } html[data-dark="1"] .coach-plan-box { background: linear-gradient(180deg,#161c2e 0%,#1b2236 100%); border-color: #2e3c58; color: #9bb0cc; } html[data-dark="1"] .coach-plan-box strong { color: #d6e4f5; } html[data-dark="1"] .plan-divider-card { background: linear-gradient(135deg,#162040 0%,#1e2845 100%); border-color: #2e3c58; } html[data-dark="1"] .reading-hints, html[data-dark="1"] .concept-plan-summary { background: #162040; color: #9bb0cc; } html[data-dark="1"] .reading-card-header .reading-tag { background: #1e2845; } html[data-dark="1"] .reading-summary { color: #d6e4f5; } html[data-dark="1"] .step-card-text strong { color: #d6e4f5; } html[data-dark="1"] .step-card-text p { color: #6a82b0; } html[data-dark="1"] .hi-title { color: #d6e4f5; } html[data-dark="1"] .hi-icon { background: #1e2845; color: #6a82b0; } html[data-dark="1"] .history-item { border-bottom-color: #28344e; } html[data-dark="1"] .status-bar, html[data-dark="1"] .status-track, html[data-dark="1"] .str-bar { background: #1e2845; } html[data-dark="1"] .status-last { background: #162040; } html[data-dark="1"] .status-last strong, html[data-dark="1"] .status-today strong, html[data-dark="1"] .status-weak strong { color: #d6e4f5; } html[data-dark="1"] .result-all-done { background: #162e24; color: #5ec494; } html[data-dark="1"] .result-next-btn { background: #1e3060; border-color: #3a5ab0; color: #a8c4f5; } html[data-dark="1"] .info-box.good { background: #0e2a1e; border-color: #1e5038; } html[data-dark="1"] .info-box.warn { background: #2a1a10; border-color: #5a3018; } html[data-dark="1"] .info-box strong { color: #c0d4e8; } html[data-dark="1"] .question-box { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .option-btn { background: #1b2236; border-color: #28344e; color: #c8d8f0; } html[data-dark="1"] .option-btn span { background: #1e2845; color: #a8c4f5; } html[data-dark="1"] .result-item.correct { background: #0e2a1e; border-color: #1e5038; } html[data-dark="1"] .result-item.wrong { background: #2a1010; border-color: #5a2018; } html[data-dark="1"] .media-dialog { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .media-dialog-header { border-bottom-color: #28344e; } html[data-dark="1"] .media-dialog-header h3 { color: #d6e4f5; } html[data-dark="1"] .activity-overlay { background: rgba(8,12,22,.72); } html[data-dark="1"] .activity-overlay-shell { background: #161c2e; } html[data-dark="1"] .activity-overlay-topbar { background: #161c2e; border-bottom-color: #28344e; } html[data-dark="1"] .activity-overlay-title { color: #d6e4f5; } html[data-dark="1"] .activity-overlay-body { background: #0f1520; } html[data-dark="1"] .overlay-panel { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .overlay-panel .question-title { color: #d6e4f5; } html[data-dark="1"] .overview-card, html[data-dark="1"] .mini-insight-card, html[data-dark="1"] .mini-stat, html[data-dark="1"] .kpi-card, html[data-dark="1"] .request-card, html[data-dark="1"] .status-metric { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .overview-card p, html[data-dark="1"] .mini-insight-card span { color: #6a82b0; } html[data-dark="1"] .overview-card-primary { background: linear-gradient(135deg,#1a2442 0%,#161c2e 100%); } html[data-dark="1"] .simple-topbar, html[data-dark="1"] .clean-topbar { background: rgba(22,28,46,.90); border-color: rgba(40,52,78,.80); } html[data-dark="1"] .modern-auth-card, html[data-dark="1"] .messenger-auth-card { background: rgba(22,28,46,.98); border-color: #28344e; } html[data-dark="1"] .modern-auth-card h1, html[data-dark="1"] .messenger-auth-top h2 { color: #e2e8f4; } html[data-dark="1"] .modern-auth-card .muted, html[data-dark="1"] .messenger-auth-top p { color: #8a9cc8; } html[data-dark="1"] .auth-field-modern label { color: #a8bcd8; } html[data-dark="1"] .auth-field-modern input, html[data-dark="1"] .auth-field-modern textarea { background: #1b2236; border-color: #2e3c58; color: #e2e8f4; } html[data-dark="1"] .auth-field-modern input:focus, html[data-dark="1"] .auth-field-modern textarea:focus { border-color: var(--primary); background: #212e48; box-shadow: 0 0 0 4px rgba(49,87,246,.14); } html[data-dark="1"] .compact-demo-box { background: #1b2236; border-color: #2e3c58; } html[data-dark="1"] .demo-box { background: #1b2236; border-color: #2e3c58; } html[data-dark="1"] .flash.error { background: #2a1010; border-color: #5a2018; color: #e08080; } html[data-dark="1"] .flash.success { background: #0e2a1e; border-color: #1e5038; color: #5ec494; } html[data-dark="1"] .quiz-inline-warning { background: #2a1a10; border-color: #5a3018; color: #e0a060; } html[data-dark="1"] .inline-error { background: #2a1010; border-color: #5a2018; color: #e08080; } html[data-dark="1"] .embedded-frame { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .input, html[data-dark="1"] textarea, html[data-dark="1"] select { background: #1b2236; border-color: #2e3c58; color: #e2e8f4; } html[data-dark="1"] .admin-table th { color: #6a82b0; } html[data-dark="1"] .admin-table td, html[data-dark="1"] .admin-table th { border-bottom-color: #1e2845; } html[data-dark="1"] .kpi-card .label { color: #6a82b0; } html[data-dark="1"] .kpi-card .value { color: #e2e8f4; } html[data-dark="1"] .status-visual-block { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .status-completion-track, html[data-dark="1"] .status-progress-line { background: #1e2845; } html[data-dark="1"] .bulk-dropzone { border-color: #2e3c58; background: linear-gradient(180deg,#1b2236 0%,#161c2e 100%); } html[data-dark="1"] .bulk-dropzone:hover { border-color: #4a64a0; } html[data-dark="1"] .bulk-dropzone-inner strong { color: #d6e4f5; } html[data-dark="1"] .bulk-dropzone-inner p { color: #6a82b0; } html[data-dark="1"] .bulk-help-box { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .bulk-help-box code { background: #0e111b; color: #a8c4f5; } html[data-dark="1"] .request-note { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .request-card-head h3 { color: #d6e4f5; } html[data-dark="1"] .help-panel-inner { background: #161c2e; border-color: #28344e; } html[data-dark="1"] .help-panel-inner ul { color: #8a9cc8; } html[data-dark="1"] .mini-label { background: #1e2845; color: #a8c4f5; } html[data-dark="1"] .mini-label.pastel-label { background: #2a1e45; color: #b090e8; } html[data-dark="1"] .chat-card-footnote { background: #2a1010; color: #e08080; } html[data-dark="1"] .review-choice-card { background: linear-gradient(180deg,#2a1e0e 0%,#1b2236 100%); border-color: #5a3a18; } html[data-dark="1"] .review-choice-card .chat-card-body { color: #c0906a; } html[data-dark="1"] .hero-chat-chip { background: rgba(255,255,255,.14); } html[data-dark="1"] .hero-chat-chip.right { background: #1e2845; color: #a8c4f5; } html[data-dark="1"] .login-body, html[data-dark="1"] .messenger-auth-page { background: #0e111b; } html[data-dark="1"] .pill { background: #1e2845; color: #a8c4f5; } html[data-dark="1"] .chip-button { background: #1b2236; border-color: #28344e; color: #c8d8f0; } html[data-dark="1"] .chip-button:hover { background: #212e48; } html[data-dark="1"] .history-item { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .history-item p { color: #6a82b0; } html[data-dark="1"] .active-step-helper { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .active-step-helper p { color: #8a9cc8; } html[data-dark="1"] .minimal-home-hero { background: rgba(22,28,46,.95); border-color: #28344e; } html[data-dark="1"] .resume-line, html[data-dark="1"] .resume-chip { background: #1b2236; border-color: #28344e; color: #a8bcd8; } html[data-dark="1"] .steps-strip span { background: #1b2236; border-color: #28344e; color: #8a9cc8; } html[data-dark="1"] .learning-graph-card { background: #1b2236; border-color: #28344e; } html[data-dark="1"] .graph-node.not_started { background: #2e3c58; } html[data-dark="1"] .btn-secondary { background: #1b2236; border-color: #28344e; color: #c8d8f0; } html[data-dark="1"] .btn-secondary:hover { background: #212e48; } /* ═══════════════════════════════════════════════════════════════════════ TEMA + KARANLIK MOD — tema-özgü accent renkleri ═══════════════════════════════════════════════════════════════════════ */ /* MAVI KARANLIK */ html[data-theme="blue"][data-dark="1"], html:not([data-theme])[data-dark="1"] { --primary: #4d6ffe; --primary-dark: #3a5be8; } html[data-theme="blue"][data-dark="1"] .bubble-action.primary span, html:not([data-theme])[data-dark="1"] .bubble-action.primary span { background: #1e3060; border-color: #4d6ffe; color: #a8c4ff; } html[data-theme="blue"][data-dark="1"] .unit-concept-btn.is-selected, html:not([data-theme])[data-dark="1"] .unit-concept-btn.is-selected { background: #1e3060; border-color: #4d6ffe; color: #a8c4ff; } /* AMBER KARANLIK */ html[data-theme="amber"][data-dark="1"] { --primary: #F5A823; --primary-dark: #D48808; --line: #3A2800; } html[data-theme="amber"][data-dark="1"] body { background: #180E00; } html[data-theme="amber"][data-dark="1"] body.coach-chat-body { background: radial-gradient(circle at top,#221400 0,#1A0E00 46%,#130900 100%); } html[data-theme="amber"][data-dark="1"] .coach-stage { background: rgba(24,14,0,.97); border-color: #3A2800; } html[data-theme="amber"][data-dark="1"] .coach-log { background: linear-gradient(180deg,#221400 0%,#1A0E00 100%); } html[data-theme="amber"][data-dark="1"] .user-bubble { background: linear-gradient(135deg,#FFB830 0%,#E8920A 100%); color: #fff; } html[data-theme="amber"][data-dark="1"] .bubble-action span { background: #281800; border-color: #5A3800; color: #E8C880; } html[data-theme="amber"][data-dark="1"] .bubble-action:hover span { background: #342200; border-color: #8A5800; } html[data-theme="amber"][data-dark="1"] .bubble-action.primary span { background: #2A1E00; border-color: #F5A823; color: #FFDF60; } html[data-theme="amber"][data-dark="1"] .unit-concept-btn { background: #221400; border-color: #4A3000; color: #E8C880; } html[data-theme="amber"][data-dark="1"] .unit-concept-btn:hover { background: #281800; } html[data-theme="amber"][data-dark="1"] .unit-concept-btn.is-selected { background: #2A1E00; border-color: #F5A823; color: #FFDF60; } html[data-theme="amber"][data-dark="1"] .bot-bubble { background: #221400; border-color: #3A2800; color: #E8D4A0; } html[data-theme="amber"][data-dark="1"] .chat-card { background: #221400; border-color: #3A2800; } html[data-theme="amber"][data-dark="1"] .chat-card-body { color: #A08050; } html[data-theme="amber"][data-dark="1"] .concept-hero-card, html[data-theme="amber"][data-dark="1"] .unit-card, html[data-theme="amber"][data-dark="1"] .reading-card, html[data-theme="amber"][data-dark="1"] .step-card, html[data-theme="amber"][data-dark="1"] .history-card, html[data-theme="amber"][data-dark="1"] .status-card, html[data-theme="amber"][data-dark="1"] .result-card, html[data-theme="amber"][data-dark="1"] .suggestion-list-card { background: #221400; border-color: #3A2800; } html[data-theme="amber"][data-dark="1"] .plan-divider-card { background: linear-gradient(135deg,#2A1E00 0%,#221400 100%); border-color: #5A3800; } html[data-theme="amber"][data-dark="1"] .plan-divider-inner { color: #FFDF60; } html[data-theme="amber"][data-dark="1"] .reading-hints, html[data-theme="amber"][data-dark="1"] .concept-plan-summary { background: #2A1E00; border-left-color: #F5A823; color: #C09040; } /* GREEN / ORMAN KARANLIK */ html[data-theme="green"][data-dark="1"] { --primary: #6A9830; --primary-dark: #508020; --line: #1A2E08; } html[data-theme="green"][data-dark="1"] body { background: #0C1400; } html[data-theme="green"][data-dark="1"] body.coach-chat-body { background: radial-gradient(circle at top,#141E04 0,#0E1800 46%,#0A1200 100%); } html[data-theme="green"][data-dark="1"] .coach-stage { background: rgba(14,20,4,.97); border-color: #1A2E08; } html[data-theme="green"][data-dark="1"] .coach-log { background: linear-gradient(180deg,#141E04 0%,#0E1800 100%); } html[data-theme="green"][data-dark="1"] .user-bubble { background: linear-gradient(135deg,#7AAA3A 0%,#4E7224 100%); } html[data-theme="green"][data-dark="1"] .bubble-action span { background: #141E04; border-color: #2E4A10; color: #A0C860; } html[data-theme="green"][data-dark="1"] .bubble-action:hover span { background: #1A2E08; border-color: #4E7224; } html[data-theme="green"][data-dark="1"] .bubble-action.primary span { background: #162808; border-color: #6A9830; color: #B0E060; } html[data-theme="green"][data-dark="1"] .unit-concept-btn { background: #141E04; border-color: #2E4A10; color: #A0C860; } html[data-theme="green"][data-dark="1"] .unit-concept-btn.is-selected { background: #162808; border-color: #6A9830; color: #B0E060; } html[data-theme="green"][data-dark="1"] .bot-bubble { background: #141E04; border-color: #1A2E08; color: #B0D880; } html[data-theme="green"][data-dark="1"] .chat-card { background: #141E04; border-color: #1A2E08; } html[data-theme="green"][data-dark="1"] .chat-card-body { color: #708040; } html[data-theme="green"][data-dark="1"] .concept-hero-card, html[data-theme="green"][data-dark="1"] .unit-card, html[data-theme="green"][data-dark="1"] .reading-card, html[data-theme="green"][data-dark="1"] .step-card, html[data-theme="green"][data-dark="1"] .history-card, html[data-theme="green"][data-dark="1"] .status-card, html[data-theme="green"][data-dark="1"] .result-card, html[data-theme="green"][data-dark="1"] .suggestion-list-card { background: #141E04; border-color: #1A2E08; } html[data-theme="green"][data-dark="1"] .plan-divider-card { background: linear-gradient(135deg,#162808 0%,#141E04 100%); border-color: #2E4A10; } html[data-theme="green"][data-dark="1"] .plan-divider-inner { color: #B0E060; } html[data-theme="green"][data-dark="1"] .reading-hints, html[data-theme="green"][data-dark="1"] .concept-plan-summary { background: #162808; border-left-color: #6A9830; color: #90B850; } /* OCEAN / PASTEL KIDDY KARANLIK */ html[data-theme="ocean"][data-dark="1"] { --primary: #78B828; --primary-dark: #609818; --line: #182808; } html[data-theme="ocean"][data-dark="1"] body { background: #0C1400; } html[data-theme="ocean"][data-dark="1"] body.coach-chat-body { background: radial-gradient(circle at top,#141E02 0,#0E1800 46%,#0A1200 100%); } html[data-theme="ocean"][data-dark="1"] .coach-stage { background: rgba(14,20,2,.97); border-color: #182808; } html[data-theme="ocean"][data-dark="1"] .coach-log { background: linear-gradient(180deg,#141E02 0%,#0E1800 100%); } html[data-theme="ocean"][data-dark="1"] .user-bubble { background: linear-gradient(135deg,#90CC40 0%,#66AA1A 100%); color: #fff; } html[data-theme="ocean"][data-dark="1"] .bubble-action span { background: #141E02; border-color: #2C4808; color: #A8D060; } html[data-theme="ocean"][data-dark="1"] .bubble-action:hover span { background: #182808; border-color: #4E8010; } html[data-theme="ocean"][data-dark="1"] .bubble-action.primary span { background: #142600; border-color: #78B828; color: #C0E870; } html[data-theme="ocean"][data-dark="1"] .unit-concept-btn { background: #141E02; border-color: #2C4808; color: #A8D060; } html[data-theme="ocean"][data-dark="1"] .unit-concept-btn.is-selected { background: #142600; border-color: #78B828; color: #C0E870; } html[data-theme="ocean"][data-dark="1"] .bot-bubble { background: #141E02; border-color: #182808; color: #C0E080; } html[data-theme="ocean"][data-dark="1"] .chat-card { background: #141E02; border-color: #182808; } html[data-theme="ocean"][data-dark="1"] .chat-card-body { color: #708040; } html[data-theme="ocean"][data-dark="1"] .concept-hero-card, html[data-theme="ocean"][data-dark="1"] .unit-card, html[data-theme="ocean"][data-dark="1"] .reading-card, html[data-theme="ocean"][data-dark="1"] .step-card, html[data-theme="ocean"][data-dark="1"] .history-card, html[data-theme="ocean"][data-dark="1"] .status-card, html[data-theme="ocean"][data-dark="1"] .result-card, html[data-theme="ocean"][data-dark="1"] .suggestion-list-card { background: #141E02; border-color: #182808; } html[data-theme="ocean"][data-dark="1"] .plan-divider-card { background: linear-gradient(135deg,#142600 0%,#141E02 100%); border-color: #2C4808; } html[data-theme="ocean"][data-dark="1"] .plan-divider-inner { color: #C0E870; } html[data-theme="ocean"][data-dark="1"] .reading-hints, html[data-theme="ocean"][data-dark="1"] .concept-plan-summary { background: #142600; border-left-color: #78B828; color: #90C040; } /* VIOLET / OYUN KARANLIK */ html[data-theme="violet"][data-dark="1"] { --primary: #9070E0; --primary-dark: #7050CC; --line: #22143E; } html[data-theme="violet"][data-dark="1"] body { background: #0E0A1C; } html[data-theme="violet"][data-dark="1"] body.coach-chat-body { background: radial-gradient(circle at top,#160E28 0,#100A1E 46%,#0C0618 100%); } html[data-theme="violet"][data-dark="1"] .coach-stage { background: rgba(18,12,30,.97); border-color: #22143E; } html[data-theme="violet"][data-dark="1"] .coach-log { background: linear-gradient(180deg,#160E28 0%,#100A1E 100%); } html[data-theme="violet"][data-dark="1"] .user-bubble { background: linear-gradient(135deg,#9A7AE8 0%,#7050CC 100%); } html[data-theme="violet"][data-dark="1"] .bubble-action span { background: #180E30; border-color: #2E2050; color: #C0A8FF; } html[data-theme="violet"][data-dark="1"] .bubble-action:hover span { background: #200E3C; border-color: #5040A0; } html[data-theme="violet"][data-dark="1"] .bubble-action.primary span { background: #200A50; border-color: #9070E0; color: #D0B8FF; } html[data-theme="violet"][data-dark="1"] .unit-concept-btn { background: #180E30; border-color: #2E2050; color: #C0A8FF; } html[data-theme="violet"][data-dark="1"] .unit-concept-btn.is-selected { background: #200A50; border-color: #9070E0; color: #D0B8FF; } html[data-theme="violet"][data-dark="1"] .bot-bubble { background: #180E30; border-color: #22143E; color: #C0B0E8; } html[data-theme="violet"][data-dark="1"] .chat-card { background: #180E30; border-color: #22143E; } html[data-theme="violet"][data-dark="1"] .chat-card-body { color: #8070A8; } html[data-theme="violet"][data-dark="1"] .concept-hero-card, html[data-theme="violet"][data-dark="1"] .unit-card, html[data-theme="violet"][data-dark="1"] .reading-card, html[data-theme="violet"][data-dark="1"] .step-card, html[data-theme="violet"][data-dark="1"] .history-card, html[data-theme="violet"][data-dark="1"] .status-card, html[data-theme="violet"][data-dark="1"] .result-card, html[data-theme="violet"][data-dark="1"] .suggestion-list-card { background: #180E30; border-color: #22143E; } html[data-theme="violet"][data-dark="1"] .plan-divider-card { background: linear-gradient(135deg,#200A50 0%,#180E30 100%); border-color: #2E2050; } html[data-theme="violet"][data-dark="1"] .plan-divider-inner { color: #C090FF; } html[data-theme="violet"][data-dark="1"] .reading-hints, html[data-theme="violet"][data-dark="1"] .concept-plan-summary { background: #200A50; border-left-color: #9070E0; color: #A080C8; } /* ═══════════════════════════════════════════════════════════════════════ YUMUŞAK GEÇİŞ ANİMASYONU ═══════════════════════════════════════════════════════════════════════ */ html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color .22s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important; } /* ═══════════════════════════════════════════════════════════════════════ TEMA-ÖZEL ARKA PLAN BLOBLAR ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="amber"] .bg-blob-1{background:radial-gradient(circle,rgba(245,168,35,.15) 0%,transparent 70%)} html[data-theme="amber"] .bg-blob-2{background:radial-gradient(circle,rgba(240,130,20,.10) 0%,transparent 70%)} html[data-theme="amber"] .bg-blob-3{background:radial-gradient(circle,rgba(255,200,80,.08) 0%,transparent 70%)} html[data-theme="green"] .bg-blob-1{background:radial-gradient(circle,rgba(78,114,36,.13) 0%,transparent 70%)} html[data-theme="green"] .bg-blob-2{background:radial-gradient(circle,rgba(122,170,58,.10) 0%,transparent 70%)} html[data-theme="green"] .bg-blob-3{background:radial-gradient(circle,rgba(160,200,80,.07) 0%,transparent 70%)} html[data-theme="ocean"] .bg-blob-1{background:radial-gradient(circle,rgba(102,170,26,.13) 0%,transparent 70%)} html[data-theme="ocean"] .bg-blob-2{background:radial-gradient(circle,rgba(144,204,64,.10) 0%,transparent 70%)} html[data-theme="ocean"] .bg-blob-3{background:radial-gradient(circle,rgba(200,232,120,.07) 0%,transparent 70%)} html[data-theme="violet"] .bg-blob-1{background:radial-gradient(circle,rgba(112,80,204,.12) 0%,transparent 70%)} html[data-theme="violet"] .bg-blob-2{background:radial-gradient(circle,rgba(154,122,232,.09) 0%,transparent 70%)} html[data-theme="violet"] .bg-blob-3{background:radial-gradient(circle,rgba(200,160,255,.07) 0%,transparent 70%)} /* Karanlık modda bloblar biraz daha belirgin */ html[data-dark="1"] .bg-blob-1{opacity:.45} html[data-dark="1"] .bg-blob-2{opacity:.35} html[data-dark="1"] .bg-blob-3{opacity:.25} html[data-dark="1"] .bg-blob-1{background:radial-gradient(circle,rgba(77,111,254,.18) 0%,transparent 70%)} html[data-dark="1"] .bg-blob-2{background:radial-gradient(circle,rgba(90,140,255,.14) 0%,transparent 70%)} html[data-dark="1"] .bg-blob-3{background:radial-gradient(circle,rgba(160,110,255,.10) 0%,transparent 70%)} /* ═══════════════════════════════════════════════════════════════════════ 6. CAM / 3D GLASSMORPHISM TEMA Aydınlık: ışıklı, frosted cam, derin gradient arka plan Karanlık: derin gece, neon aksan, koyu cam ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="glass"] { --primary: #6c63ff; --primary-dark: #5548ee; --bg: #dde8ff; --panel: rgba(255,255,255,.65); --panel-2: rgba(255,255,255,.45); --text: #180e3a; --muted: #6a60a0; --line: rgba(108,99,255,.22); --shadow: 0 20px 60px rgba(80,60,180,.14); --bg-soft: rgba(255,255,255,.50); --surface: rgba(255,255,255,.65); --surface-2: rgba(255,255,255,.45); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow-soft: 0 16px 48px rgba(80,60,180,.12); --radius: 26px; } html[data-theme="glass"] body { background: linear-gradient(135deg,#c9d8ff 0%,#e4d8ff 40%,#d8eeff 70%,#c8f0ff 100%); background-attachment: fixed; } html[data-theme="glass"] body.coach-chat-body { background: radial-gradient(ellipse at 20% 0%, rgba(120,100,255,.30) 0%, transparent 50%), radial-gradient(ellipse at 80% 10%, rgba(100,180,255,.25) 0%, transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(200,140,255,.20) 0%, transparent 55%), linear-gradient(160deg,#ccd8ff 0%,#e0d8ff 35%,#d4eeff 65%,#c8f4ff 100%); background-attachment: fixed; } html[data-theme="glass"] .bg-blob-1{background:radial-gradient(circle,rgba(108,99,255,.22) 0%,transparent 70%)} html[data-theme="glass"] .bg-blob-2{background:radial-gradient(circle,rgba(100,180,255,.18) 0%,transparent 70%)} html[data-theme="glass"] .bg-blob-3{background:radial-gradient(circle,rgba(200,140,255,.14) 0%,transparent 70%)} /* Cam efekti — panel/kart */ html[data-theme="glass"] .coach-stage { background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 1.5px solid rgba(255,255,255,.80); box-shadow: 0 24px 64px rgba(80,60,180,.14), inset 0 1px 0 rgba(255,255,255,.90); } html[data-theme="glass"] .coach-log { background: transparent; } html[data-theme="glass"] .coach-compose { background: rgba(255,255,255,.70); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1.5px solid rgba(255,255,255,.65); } html[data-theme="glass"] .coach-compose-inner { background: rgba(255,255,255,.60); border-color: rgba(108,99,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="glass"] .bot-bubble { background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255,255,255,.80); box-shadow: 0 8px 24px rgba(80,60,180,.08), inset 0 1px 0 rgba(255,255,255,.90); } html[data-theme="glass"] .user-bubble { background: linear-gradient(135deg, rgba(108,99,255,.90), rgba(85,72,238,.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(108,99,255,.30); } html[data-theme="glass"] .chat-card { background: rgba(255,255,255,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.75); box-shadow: 0 12px 32px rgba(80,60,180,.09), inset 0 1px 0 rgba(255,255,255,.85); } html[data-theme="glass"] .action-hub { background: transparent; } html[data-theme="glass"] .bubble-action span { background: rgba(255,255,255,.68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.75); box-shadow: 0 2px 10px rgba(80,60,180,.07), inset 0 1px 0 rgba(255,255,255,.90); } html[data-theme="glass"] .bubble-action:hover span { background: rgba(255,255,255,.85); border-color: rgba(108,99,255,.40); box-shadow: 0 6px 20px rgba(108,99,255,.18); transform: translateY(-2px); } html[data-theme="glass"] .bubble-action.primary span { background: linear-gradient(135deg,rgba(108,99,255,.88),rgba(85,72,238,.92)); border-color: transparent; box-shadow: 0 6px 20px rgba(108,99,255,.32); } html[data-theme="glass"] .btn-primary, html[data-theme="glass"] .action-button.primary { background: linear-gradient(135deg,#7c73ff,#6c63ff); box-shadow: 0 6px 20px rgba(108,99,255,.28); } html[data-theme="glass"] .coach-avatar, html[data-theme="glass"] .avatar-dot, html[data-theme="glass"] .companion-avatar { background: linear-gradient(180deg,#9c94ff 0%,#7c73ff 52%,#6c63ff 100%); box-shadow: 0 14px 28px rgba(108,99,255,.30); } html[data-theme="glass"] .concept-hero-card, html[data-theme="glass"] .unit-card, html[data-theme="glass"] .reading-card, html[data-theme="glass"] .step-card, html[data-theme="glass"] .history-card, html[data-theme="glass"] .status-card, html[data-theme="glass"] .result-card, html[data-theme="glass"] .suggestion-list-card { background: rgba(255,255,255,.60); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255,255,255,.72); } html[data-theme="glass"] .unit-concept-btn { background: rgba(255,255,255,.60); border-color: rgba(108,99,255,.22); } html[data-theme="glass"] .unit-concept-btn:hover { background: rgba(255,255,255,.80); } html[data-theme="glass"] .unit-concept-btn.is-selected { background: rgba(108,99,255,.18); border-color: #6c63ff; color: #3a1ea8; } html[data-theme="glass"] .chat-card-tag, html[data-theme="glass"] .feedback-chip, html[data-theme="glass"] .coach-eyebrow, html[data-theme="glass"] .coach-chip { background: rgba(108,99,255,.14); color: #4c40c8; } html[data-theme="glass"] .plan-divider-card { background: rgba(108,99,255,.12); border-color: rgba(108,99,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html[data-theme="glass"] .plan-divider-inner { color: #3a1ea8; } html[data-theme="glass"] .reading-hints, html[data-theme="glass"] .concept-plan-summary { background: rgba(108,99,255,.10); border-left-color: #6c63ff; } html[data-theme="glass"] .toolbar-btn { background: rgba(255,255,255,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255,255,255,.75); } html[data-theme="glass"] .messenger-hero-panel, html[data-theme="glass"] .auth-hero-panel { background: linear-gradient(135deg, rgba(60,40,180,.85) 0%, rgba(108,99,255,.90) 48%, rgba(140,120,255,.85) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-theme="glass"] .steps-strip .active { background: rgba(108,99,255,.16); color: #3a1ea8; border-color: rgba(108,99,255,.40); } html[data-theme="glass"] .clean-admin-nav a.active { background: rgba(108,99,255,.16); border-color: rgba(108,99,255,.40); color: #3a1ea8; } html[data-theme="glass"] .related-concept-btn, html[data-theme="glass"] .suggestion-btn { background: rgba(255,255,255,.60); border-color: rgba(108,99,255,.22); } /* ── CAM / 3D KARANLIK ── */ html[data-theme="glass"][data-dark="1"] { --primary: #a08aff; --primary-dark: #8870f0; --bg: #0c0a1e; --panel: rgba(30,22,60,.75); --panel-2: rgba(24,16,50,.65); --text: #e8e0ff; --muted: #9080c8; --line: rgba(160,138,255,.22); --shadow: 0 20px 60px rgba(0,0,0,.50); --bg-soft: rgba(20,14,48,.70); --surface: rgba(30,22,60,.75); --surface-2: rgba(24,16,50,.65); } html[data-theme="glass"][data-dark="1"] body { background: #0c0a1e; } html[data-theme="glass"][data-dark="1"] body.coach-chat-body { background: radial-gradient(ellipse at 15% 0%, rgba(108,60,255,.28) 0%, transparent 50%), radial-gradient(ellipse at 85% 5%, rgba(40,100,255,.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 95%, rgba(180,60,255,.18) 0%, transparent 55%), linear-gradient(160deg,#0c0a1e 0%,#120d2e 40%,#0e1428 70%,#0a0c1e 100%); background-attachment: fixed; } html[data-theme="glass"][data-dark="1"] .bg-blob-1{background:radial-gradient(circle,rgba(108,60,255,.22) 0%,transparent 70%);opacity:.60} html[data-theme="glass"][data-dark="1"] .bg-blob-2{background:radial-gradient(circle,rgba(40,100,255,.18) 0%,transparent 70%);opacity:.50} html[data-theme="glass"][data-dark="1"] .bg-blob-3{background:radial-gradient(circle,rgba(180,60,255,.15) 0%,transparent 70%);opacity:.40} html[data-theme="glass"][data-dark="1"] .coach-stage { background: rgba(20,14,44,.70); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1.5px solid rgba(160,138,255,.20); box-shadow: 0 24px 64px rgba(0,0,0,.45), inset 0 1px 0 rgba(160,138,255,.18); } html[data-theme="glass"][data-dark="1"] .coach-log { background: transparent; } html[data-theme="glass"][data-dark="1"] .coach-compose { background: rgba(16,10,36,.80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top-color: rgba(160,138,255,.18); } html[data-theme="glass"][data-dark="1"] .coach-compose-inner { background: rgba(24,16,52,.70); border-color: rgba(160,138,255,.20); } html[data-theme="glass"][data-dark="1"] #messageInput { background: rgba(14,10,30,.60); border-color: rgba(160,138,255,.22); color: #e8e0ff; } html[data-theme="glass"][data-dark="1"] .bot-bubble { background: rgba(30,20,60,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(160,138,255,.22); color: #d8ccff; box-shadow: 0 8px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(160,138,255,.18); } html[data-theme="glass"][data-dark="1"] .user-bubble { background: linear-gradient(135deg,rgba(108,60,255,.90),rgba(86,48,220,.95)); box-shadow: 0 8px 24px rgba(108,60,255,.35); } html[data-theme="glass"][data-dark="1"] .chat-card { background: rgba(24,16,50,.68); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(160,138,255,.20); box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(160,138,255,.14); } html[data-theme="glass"][data-dark="1"] .chat-card-body { color: #9880c8; } html[data-theme="glass"][data-dark="1"] .chat-card-title { color: #e8e0ff; } html[data-theme="glass"][data-dark="1"] .bubble-action span { background: rgba(30,20,58,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(160,138,255,.22); color: #c8bcf0; } html[data-theme="glass"][data-dark="1"] .bubble-action:hover span { background: rgba(40,28,72,.85); border-color: rgba(160,138,255,.45); } html[data-theme="glass"][data-dark="1"] .bubble-action.primary span { background: linear-gradient(135deg,rgba(108,60,255,.88),rgba(86,48,220,.92)); border-color: transparent; } html[data-theme="glass"][data-dark="1"] .concept-hero-card, html[data-theme="glass"][data-dark="1"] .unit-card, html[data-theme="glass"][data-dark="1"] .reading-card, html[data-theme="glass"][data-dark="1"] .step-card, html[data-theme="glass"][data-dark="1"] .history-card, html[data-theme="glass"][data-dark="1"] .status-card, html[data-theme="glass"][data-dark="1"] .result-card, html[data-theme="glass"][data-dark="1"] .suggestion-list-card { background: rgba(24,16,50,.68); border-color: rgba(160,138,255,.20); } html[data-theme="glass"][data-dark="1"] .unit-concept-btn { background: rgba(20,14,44,.65); border-color: rgba(160,138,255,.20); color: #c8bcf0; } html[data-theme="glass"][data-dark="1"] .unit-concept-btn.is-selected { background: rgba(108,60,255,.20); border-color: #a08aff; color: #e0d4ff; } html[data-theme="glass"][data-dark="1"] .plan-divider-card { background: rgba(108,60,255,.14); border-color: rgba(160,138,255,.28); } html[data-theme="glass"][data-dark="1"] .plan-divider-inner { color: #c8a8ff; } html[data-theme="glass"][data-dark="1"] .btn-secondary { background: rgba(24,16,50,.70); border-color: rgba(160,138,255,.22); color: #c8bcf0; } html[data-theme="glass"][data-dark="1"] .toolbar-btn { background: rgba(24,16,50,.72); border-color: rgba(160,138,255,.22); color: #c8bcf0; } html[data-theme="glass"][data-dark="1"] .reading-hints, html[data-theme="glass"][data-dark="1"] .concept-plan-summary { background: rgba(108,60,255,.12); border-left-color: #a08aff; color: #b0a0e0; } html[data-theme="glass"][data-dark="1"] .overview-card, html[data-theme="glass"][data-dark="1"] .mini-stat, html[data-theme="glass"][data-dark="1"] .kpi-card { background: rgba(24,16,50,.68); border-color: rgba(160,138,255,.20); } html[data-theme="glass"][data-dark="1"] .modern-auth-card, html[data-theme="glass"][data-dark="1"] .messenger-auth-card { background: rgba(20,14,44,.88); border-color: rgba(160,138,255,.22); } html[data-theme="glass"][data-dark="1"] .login-body, html[data-theme="glass"][data-dark="1"] .messenger-auth-page { background: #0c0a1e; } html[data-theme="glass"][data-dark="1"] .coach-avatar, html[data-theme="glass"][data-dark="1"] .avatar-dot, html[data-theme="glass"][data-dark="1"] .companion-avatar { background: linear-gradient(180deg,#b090ff 0%,#9070f0 52%,#7050d8 100%); box-shadow: 0 14px 28px rgba(108,60,255,.35); } html[data-theme="glass"][data-dark="1"] .steps-strip span { background: rgba(20,14,44,.65); border-color: rgba(160,138,255,.20); color: #9080c8; } html[data-theme="glass"][data-dark="1"] .steps-strip .active { background: rgba(108,60,255,.18); color: #d0c0ff; border-color: rgba(160,138,255,.40); } html[data-theme="glass"][data-dark="1"] .activity-overlay { background: rgba(8,4,20,.72); } html[data-theme="glass"][data-dark="1"] .activity-overlay-shell { background: rgba(16,10,36,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-theme="glass"][data-dark="1"] .activity-overlay-topbar { background: rgba(12,8,28,.85); border-bottom-color: rgba(160,138,255,.20); } html[data-theme="glass"][data-dark="1"] .activity-overlay-title { color: #e8e0ff; } html[data-theme="glass"][data-dark="1"] .activity-overlay-body { background: rgba(10,6,24,.80); }