/* ============================================================================ biYAPAYZEKA PLATFORM (app.biyapayzeka.com) — AÇIK TEMA = british.com.tr RENKLERİ biyz-app-tema v1 — 2026-09-15 Kural (Ercan 13.09/15.09): AÇIK temada YALNIZCA zemin / yazı / düğme renkleri british renkleri olur. Logo, mor→mavi gradyan, tasarım, menü, içerik AYNEN kalır. KOYU tema = bugünkü görünüm, DOKUNULMAZ. Mekanizma: iken geçerli; "koyu" iken bu dosyadan tek kural bile uygulanmaz. React bundle'a (kaynağı yok) DOKUNULMAZ — sadece index.html'e 1 css + 1 js bağlantısı eklenir. ============================================================================ */ /* ---------- 0) british paleti ---------- */ html[data-tema="acik"] { --br-bg: #FFFFFF; --br-bg2: #F8F8F8; --br-bg3: #F2F2F2; --br-panel: #E5EBF4; --br-acikmavi: #D3E6FA; --br-ink: #252525; --br-soft: #696969; --br-muted: #ABABAB; --br-navy: #031F42; --br-blue: #0071DC; --br-blue-hover: #005BB5; --br-yellow: #FFC221; --br-line: #E5EBF4; color-scheme: light; } /* ---------- 1) genel zemin ---------- */ html[data-tema="acik"], html[data-tema="acik"] body { background: var(--br-bg2) !important; color: var(--br-ink); } /* Layout kök kutusu (koyu gradyan + mor ışık lekeleri) → british açık zemin (hafif mavi ışık korunur, tasarım aynı) */ html[data-tema="acik"] #root > .MuiBox-root:first-child { background: radial-gradient(680px 460px at 12% 4%, rgba(0,113,220,.07), transparent 62%), radial-gradient(620px 460px at 88% 8%, rgba(211,230,250,.55), transparent 60%), linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%) !important; color: var(--br-ink) !important; } html[data-tema="acik"] #root > .MuiBox-root:first-child::before { background: none !important; opacity: 0 !important; } /* ---------- 2) üst çubuk (AppBar) ---------- */ html[data-tema="acik"] header.MuiAppBar-root { background: var(--br-bg) !important; color: var(--br-navy) !important; border-bottom: 1px solid var(--br-line) !important; box-shadow: 0 1px 0 var(--br-line) !important; } html[data-tema="acik"] header.MuiAppBar-root .MuiIconButton-colorInherit, html[data-tema="acik"] header.MuiAppBar-root .MuiIconButton-root { color: var(--br-navy) !important; } /* logo yazısı: "bi" beyaz → lacivert; "YAPAYZEKA" mor→mavi gradyan AYNEN kalır (şeffaf yazı + gradyan) */ html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root > .MuiBox-root > span.MuiBox-root { color: var(--br-navy) !important; } html[data-tema="acik"] header.MuiAppBar-root span.MuiBox-root[class*="css-ztr8ng"] { color: transparent !important; } /* seri / puan hapı: cam efekti → açık panel; sayılar lacivert */ html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root .MuiBox-root[class*="css-1hs7x0l"] { background: var(--br-bg3) !important; border: 1px solid var(--br-line) !important; color: var(--br-navy) !important; } html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root .MuiBox-root[class*="css-1hs7x0l"] > span.MuiBox-root { background: var(--br-line) !important; } html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root [class*="css-ypcj1d"], html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root [class*="css-1t7gtxw"] { color: var(--br-navy) !important; } /* "ELİT ÜYE" rozeti: altın → british sarı zemin + lacivert yazı */ html[data-tema="acik"] header.MuiAppBar-root .MuiToolbar-root .MuiBox-root[class*="css-1a8gjok"] { background: var(--br-yellow) !important; color: var(--br-navy) !important; border: 1px solid #E5AE00 !important; box-shadow: none !important; } /* kullanıcı adı + ok */ html[data-tema="acik"] header.MuiAppBar-root .MuiTypography-root { color: var(--br-navy) !important; } html[data-tema="acik"] header.MuiAppBar-root .MuiSvgIcon-root[data-testid="ArrowDropDownIcon"] { color: var(--br-soft) !important; } /* avatar (altın gradyan) → british mavi zemin + beyaz baş harf */ html[data-tema="acik"] header.MuiAppBar-root .MuiAvatar-root { background: var(--br-blue) !important; color: #FFFFFF !important; } /* ---------- 3) sol menü (Drawer) ---------- */ html[data-tema="acik"] .MuiDrawer-paper { background: var(--br-bg) !important; border-right: 1px solid var(--br-line) !important; } html[data-tema="acik"] .MuiDrawer-paper > .MuiBox-root, html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-10nsq71"] { background: var(--br-bg) !important; color: var(--br-ink) !important; } /* yazılar (biyz_ui_yama.js'in tam-beyaz kuralını aynı ağırlıkla, daha yüksek özgüllükle ezer) */ html[data-tema="acik"] .MuiDrawer-paper .MuiTypography-root, html[data-tema="acik"] .MuiDrawer-paper .MuiListItemText-primary { color: var(--br-ink) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiTypography-subtitle2, html[data-tema="acik"] .MuiDrawer-paper .MuiTypography-caption { color: var(--br-soft) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiTypography-noWrap[class*="css-"] { color: var(--br-soft) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiListItemText-primary[class*="noWrap"] { color: var(--br-soft) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiSvgIcon-root { color: var(--br-soft) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiDivider-root { border-color: var(--br-line) !important; } /* kartlar: "İlerlemem & Çalışmalarım" (mavi cam) / "Davet Et" (yeşil) / "Arkadaşlar" (mor) / bildirim / indir */ html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-izbv8t"] { background: var(--br-acikmavi) !important; border: 1px solid rgba(0,113,220,.25) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-izbv8t"]:hover { background: #C4DDF8 !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-izbv8t"] .MuiSvgIcon-root { color: var(--br-blue) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-izbv8t"] .MuiTypography-root:first-child { color: var(--br-navy) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-izbv8t"] .MuiTypography-root + .MuiTypography-root { color: #4F5B6B !important; } /* alt satır: açık mavi zeminde 4.5+ kontrast */ html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-7yvapv"] { background: rgba(16,185,129,.10) !important; border-color: rgba(16,185,129,.35) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-7yvapv"] .MuiSvgIcon-root { color: #10B981 !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-142loqz"] { background: rgba(139,108,255,.10) !important; border-color: rgba(139,108,255,.35) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-142loqz"] .MuiSvgIcon-root { color: #6A4BE0 !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-7yvapv"] .MuiTypography-root, html[data-tema="acik"] .MuiDrawer-paper .MuiBox-root[class*="css-142loqz"] .MuiTypography-root { color: var(--br-navy) !important; } /* liste satırları: hover / seçili */ html[data-tema="acik"] .MuiDrawer-paper .MuiListItemButton-root:hover, html[data-tema="acik"] .MuiDrawer-paper .MuiButtonBase-root:hover { background: var(--br-bg3) !important; } html[data-tema="acik"] .MuiDrawer-paper .MuiListItemButton-root.Mui-selected { background: var(--br-acikmavi) !important; } /* bot avatar çerçevesi (beyaz kenarlık) → açık çizgi */ html[data-tema="acik"] .MuiDrawer-paper .MuiAvatar-root { border-color: var(--br-line) !important; } /* "Yapay Zeka Eğitmenler" başlığındaki "bi" rozeti: mor gradyan AYNEN kalır (dokunulmaz) */ /* ---------- 4) ana içerik alanı ---------- */ html[data-tema="acik"] main { background: transparent !important; color: var(--br-ink) !important; } /* sayfa başlıkları (koyu zeminde okunmuyordu — açık temada doğal olarak okunur) */ html[data-tema="acik"] main .MuiTypography-h4, html[data-tema="acik"] main .MuiTypography-h5, html[data-tema="acik"] main .MuiTypography-h6 { color: var(--br-navy) !important; } html[data-tema="acik"] main > .MuiBox-root > .MuiTypography-body1, html[data-tema="acik"] main > .MuiBox-root > .MuiTypography-body2, html[data-tema="acik"] main .MuiTypography-body1[class*="css-3r3u29"], html[data-tema="acik"] main .MuiTypography-body1[class*="css-yj3h2k"], html[data-tema="acik"] main .MuiTypography-body2[class*="css-l6pb42"] { color: var(--br-soft) !important; } /* beyaz kartlar (Paper) aynen beyaz; kenar çizgisi british çizgi */ html[data-tema="acik"] main .MuiPaper-root.MuiPaper-rounded { background: var(--br-bg) !important; color: var(--br-ink) !important; border: 1px solid var(--br-line) !important; } html[data-tema="acik"] main .MuiPaper-root .MuiTypography-root:not(.MuiAlert-message):not([class*="Mui-error"]) { color: var(--br-ink); } html[data-tema="acik"] main .MuiPaper-root .MuiTypography-body2 { color: var(--br-soft); } /* koyu zemin için yazılmış beyaz metinler (Davet sayfası vb.) → koyu yazı */ html[data-tema="acik"] main .MuiTypography-root[style*="color: rgb(255, 255, 255)"], html[data-tema="acik"] main .MuiTypography-body1[class*="css-3r3u29"] { color: var(--br-soft) !important; } html[data-tema="acik"] body.biyz-davet main h5.MuiTypography-h5 { color: var(--br-navy) !important; } html[data-tema="acik"] body.biyz-davet main p.MuiTypography-body1 { color: var(--br-soft) !important; } html[data-tema="acik"] body.biyz-davet main .MuiTypography-root:not(.MuiAlert-message *) { color: var(--br-ink); } html[data-tema="acik"] body.biyz-davet main input { color: var(--br-ink) !important; -webkit-text-fill-color: var(--br-ink); } html[data-tema="acik"] body.biyz-davet main label { color: var(--br-soft) !important; } /* sohbet karşılama alanı */ html[data-tema="acik"] main .MuiTypography-h6[class*="css-twc4w6"], html[data-tema="acik"] main .MuiTypography-subtitle1[class*="css-1qb2bu"] { color: var(--br-navy) !important; } html[data-tema="acik"] main .MuiTypography-body2[class*="css-167pcy1"] { color: var(--br-soft) !important; } /* sohbet balonları: bot balonu beyaz → aynen; kullanıcı balonu mavi→mor gradyan AYNEN kalır (tasarım) */ html[data-tema="acik"] main .MuiBox-root[class*="css-1y6qcci"] { background: var(--br-bg) !important; border-color: var(--br-line) !important; } /* ilerleme paneli kartları (yarı saydam beyaz) → beyaz + çizgi */ html[data-tema="acik"] main .MuiBox-root[class*="css-12o3sds"], html[data-tema="acik"] main .MuiBox-root[class*="css-gpa8by"] { background: var(--br-bg) !important; border: 1px solid var(--br-line) !important; } html[data-tema="acik"] main .MuiBox-root[class*="css-1i2blvi"] { background: var(--br-bg3) !important; } html[data-tema="acik"] main .MuiTypography-root[class*="css-xn2rk5"] { color: var(--br-navy) !important; } html[data-tema="acik"] main .MuiTypography-root[class*="css-xfcve4"] { color: var(--br-soft) !important; } /* form alanları */ html[data-tema="acik"] main .MuiOutlinedInput-root { background: var(--br-bg) !important; color: var(--br-ink) !important; } html[data-tema="acik"] main .MuiOutlinedInput-notchedOutline { border-color: var(--br-line) !important; } html[data-tema="acik"] main .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--br-blue) !important; } html[data-tema="acik"] main .MuiInputLabel-root { color: var(--br-soft) !important; } html[data-tema="acik"] main .MuiInputBase-input { color: var(--br-ink) !important; -webkit-text-fill-color: var(--br-ink); } html[data-tema="acik"] main .MuiInputBase-input::placeholder { color: var(--br-muted) !important; opacity: 1; } html[data-tema="acik"] main .MuiSwitch-track { background: var(--br-muted) !important; } html[data-tema="acik"] main .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background: var(--br-blue) !important; } html[data-tema="acik"] main .MuiSwitch-switchBase.Mui-checked { color: var(--br-blue) !important; } /* fiyat ve mavi vurgular */ html[data-tema="acik"] main .MuiTypography-h4[class*="css-19r83zv"] { color: var(--br-blue) !important; } html[data-tema="acik"] main .MuiChip-filled[class*="css-"] .MuiChip-label { color: inherit; } /* alt bağlantılar (KVKK · Gizlilik · Mesafeli Satış) */ html[data-tema="acik"] main a, html[data-tema="acik"] main .MuiLink-root { color: var(--br-blue) !important; } html[data-tema="acik"] main a:hover { color: var(--br-blue-hover) !important; } /* ---------- 5) yazma kutusu (sohbet) ---------- */ /* biyz_ui_yama.js koyu gradyan + mor kenarlık verir; açık temada beyaz kutu + british çizgi/mavi odak */ html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] { background: var(--br-bg) !important; border: 1px solid #C9D6E8 !important; box-shadow: 0 10px 30px rgba(3,31,66,.10) !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"]:focus-within { border-color: var(--br-blue) !important; box-shadow: 0 0 0 3px rgba(0,113,220,.15) !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] textarea { color: var(--br-ink) !important; caret-color: var(--br-blue) !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] textarea::placeholder { color: var(--br-soft) !important; opacity: 1 !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] .MuiIconButton-root { color: var(--br-soft) !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] button[class*="css-6349j3"] { background: var(--br-bg3) !important; color: var(--br-soft) !important; border-color: var(--br-line) !important; } /* gönder düğmesi: dolu → british mavi, boş → açık gri */ html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] .MuiIconButton-root.Mui-disabled { background: var(--br-bg3) !important; color: var(--br-muted) !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] .MuiIconButton-root:not(.Mui-disabled):last-child { background: var(--br-blue) !important; color: #FFFFFF !important; } html[data-tema="acik"] .MuiBox-root[class*="css-asl37w"] .MuiIconButton-root:not(.Mui-disabled):last-child:hover { background: var(--br-yellow) !important; color: var(--br-navy) !important; } /* ---------- 6) düğmeler → british: mavi zemin/beyaz yazı, hover sarı zemin/lacivert yazı ---------- */ html[data-tema="acik"] .MuiButton-contained:not(.MuiButton-containedSuccess):not(.MuiButton-containedError):not([class*="css-"][style*="rgb(37, 211, 102)"]) { background: var(--br-blue) !important; color: #FFFFFF !important; box-shadow: none !important; background-image: none !important; } html[data-tema="acik"] .MuiButton-contained:not(.MuiButton-containedSuccess):not(.MuiButton-containedError):hover { background: var(--br-yellow) !important; color: var(--br-navy) !important; } html[data-tema="acik"] .MuiButton-contained.Mui-disabled { background: var(--br-bg3) !important; color: var(--br-muted) !important; } html[data-tema="acik"] .MuiButton-outlined { border-color: var(--br-blue) !important; color: var(--br-blue) !important; } html[data-tema="acik"] .MuiButton-outlined:hover { background: var(--br-acikmavi) !important; } html[data-tema="acik"] .MuiButton-text:not(.MuiButton-textError):not(.MuiButton-textSuccess) { color: var(--br-blue) !important; } /* WhatsApp ile Paylaş (yeşil) — marka rengi, korunur */ html[data-tema="acik"] .MuiButton-contained[class*="css-"]:has(svg[data-testid="WhatsAppIcon"]) { background: #25D366 !important; color: #FFFFFF !important; } /* MUI Chip (Herkes/Arkadaşlar seçicisi vb.): dolu mavi → british mavi */ html[data-tema="acik"] main .MuiChip-filled:not(.MuiChip-sizeSmall) { background: var(--br-blue) !important; color: #FFFFFF !important; } /* ---------- 7) pencereler / menüler (Dialog, Menu) — zaten beyaz; düğme ve çizgi uyumu ---------- */ html[data-tema="acik"] .MuiDialog-paper, html[data-tema="acik"] .MuiMenu-paper, html[data-tema="acik"] .MuiPopover-paper { background: var(--br-bg) !important; color: var(--br-ink) !important; border: 1px solid var(--br-line) !important; } html[data-tema="acik"] .MuiDialogTitle-root { color: var(--br-navy) !important; } html[data-tema="acik"] .MuiMenuItem-root:hover { background: var(--br-bg3) !important; } /* ---------- 8) giriş sayfası (/login — kendi CSS'i, MUI değil) ---------- */ html[data-tema="acik"] .lp-root { background: radial-gradient(1100px 700px at 12% -8%, rgba(0,113,220,.08), transparent 60%), radial-gradient(900px 800px at 108% 118%, rgba(124,92,252,.08), transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #F8F8F8 55%, #F2F2F2 100%) !important; } html[data-tema="acik"] .lp-frame { background: var(--br-bg) !important; border: 1px solid var(--br-line) !important; box-shadow: 0 30px 80px -30px rgba(3,31,66,.25) !important; } html[data-tema="acik"] .lp-frame::before { box-shadow: none !important; } html[data-tema="acik"] .lp-brand { background: linear-gradient(180deg, var(--br-bg2), var(--br-bg)) !important; border-color: var(--br-line) !important; } html[data-tema="acik"] .lp-panel { background: var(--br-bg) !important; } html[data-tema="acik"] .lp-logo svg path[fill="#EDECE7"] { fill: var(--br-navy) !important; } /* "bi" yazısı; ikon ve gradyan aynen */ html[data-tema="acik"] .lp-eyebrow { color: var(--br-blue-hover) !important; } html[data-tema="acik"] .lp-eyebrow::before { background: linear-gradient(90deg, var(--br-blue), transparent) !important; } html[data-tema="acik"] .lp-hero h1, html[data-tema="acik"] .lp-welcome { color: var(--br-navy) !important; } html[data-tema="acik"] .lp-hero h1 em { color: var(--br-blue) !important; } html[data-tema="acik"] .lp-hero p, html[data-tema="acik"] .lp-sub, html[data-tema="acik"] .lp-label, html[data-tema="acik"] .lp-signup { color: var(--br-soft) !important; } html[data-tema="acik"] .lp-feat { border-color: var(--br-line) !important; } html[data-tema="acik"] .lp-feat h3 { color: var(--br-ink) !important; } html[data-tema="acik"] .lp-feat p { color: var(--br-soft) !important; } html[data-tema="acik"] .lp-feat .ic { background: var(--br-acikmavi) !important; border-color: rgba(0,113,220,.3) !important; color: var(--br-blue) !important; } html[data-tema="acik"] .lp-input { background: var(--br-bg) !important; border-color: #C9D6E8 !important; color: var(--br-ink) !important; } html[data-tema="acik"] .lp-input::placeholder { color: var(--br-muted) !important; } html[data-tema="acik"] .lp-input:focus { border-color: var(--br-blue) !important; box-shadow: 0 0 0 3px rgba(0,113,220,.15) !important; background: var(--br-bg) !important; } html[data-tema="acik"] .lp-eye { color: var(--br-soft) !important; } html[data-tema="acik"] .lp-eye:hover { color: var(--br-blue) !important; } html[data-tema="acik"] .lp-forgot a { color: var(--br-soft) !important; } html[data-tema="acik"] .lp-forgot a:hover, html[data-tema="acik"] .lp-signup a { color: var(--br-blue) !important; } html[data-tema="acik"] .lp-btn { background: var(--br-blue) !important; color: #FFFFFF !important; box-shadow: 0 10px 24px -10px rgba(0,113,220,.6) !important; } html[data-tema="acik"] .lp-btn:not(:disabled):hover { background: var(--br-yellow) !important; color: var(--br-navy) !important; box-shadow: 0 12px 28px -10px rgba(255,194,33,.7) !important; } html[data-tema="acik"] .lp-alert.ok { color: #1B7F4B !important; } html[data-tema="acik"] .lp-alert.err { color: #B42318 !important; } html[data-tema="acik"] .lp-alert.info { background: var(--br-acikmavi) !important; border-color: rgba(0,113,220,.4) !important; color: var(--br-navy) !important; } html[data-tema="acik"] .lp-or { color: var(--br-soft) !important; } html[data-tema="acik"] .lp-or::before, html[data-tema="acik"] .lp-or::after { background: linear-gradient(90deg, transparent, var(--br-line), transparent) !important; } html[data-tema="acik"] .lp-soc { background: var(--br-bg2) !important; border-color: var(--br-line) !important; } html[data-tema="acik"] .lp-soc:hover { border-color: var(--br-blue) !important; background: var(--br-acikmavi) !important; } html[data-tema="acik"] .lp-foot { color: var(--br-soft) !important; } /* ---------- 9) tema düğmesi (☀/🌙) — her iki temada görünür ---------- */ .biyz-tema-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #FFFFFF; border-radius: 999px; width: 34px; height: 34px; padding: 0; margin: 0 6px 0 0; flex: 0 0 auto; transition: background .15s, border-color .15s, color .15s; font: 600 12px/1 system-ui, 'Segoe UI', sans-serif; } .biyz-tema-btn:hover { background: rgba(255,255,255,.18); } .biyz-tema-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } .biyz-tema-btn .ik-gunes { display: block; } .biyz-tema-btn .ik-ay { display: none; } html[data-tema="acik"] .biyz-tema-btn .ik-gunes { display: none; } html[data-tema="acik"] .biyz-tema-btn .ik-ay { display: block; } html[data-tema="acik"] .biyz-tema-btn { background: var(--br-bg3); border-color: var(--br-line); color: var(--br-navy); } html[data-tema="acik"] .biyz-tema-btn:hover { background: var(--br-yellow); border-color: var(--br-yellow); color: var(--br-navy); } /* sol menüdeki satır biçimi (masaüstü + mobil menü) */ .biyz-tema-btn.menu { width: auto; height: 32px; margin: 4px 16px 6px; padding: 0 12px 0 10px; border-radius: 10px; } .biyz-tema-btn.menu .biyz-tema-etiket { white-space: nowrap; } /* giriş sayfası vb. üst çubuğu olmayan sayfalar: sağ üst köşede sabit */ .biyz-tema-btn.sabit { position: fixed; top: 14px; right: 14px; z-index: 2147483000; margin: 0; width: 38px; height: 38px; background: rgba(20,27,42,.75); border-color: rgba(255,255,255,.25); box-shadow: 0 4px 14px rgba(0,0,0,.35); backdrop-filter: blur(6px); } html[data-tema="acik"] .biyz-tema-btn.sabit { background: var(--br-bg); border-color: #C9D6E8; color: var(--br-navy); box-shadow: 0 4px 14px rgba(3,31,66,.18); } /* üst çubuktaki düğme yalnız geniş ekranda (dar ekranda üst çubuk zaten dolu; menüdeki satır kullanılır) */ @media (max-width: 899px) { .biyz-tema-btn.ust { display: none !important; } }