/* ============================================================
* BlacklyBox AI Vision — Tema (Gündüz / Gece / Otomatik)
* ------------------------------------------------------------
* ile gündüz modu aktifleşir.
* Veri yoksa veya "dark" ise mevcut koyu tema (varsayılan) gelir.
* Sayfalarda iki ayrı CSS değişken şeması kullanıldığı için
* her ikisi de burada override ediliyor:
* Şema A (anasayfa, yonlendirmeler):
* --bg-dark, --bg-deep, --bg-card, --surface,
* --text-primary, --text-secondary, --text-muted,
* --card-bg, --card-border, --card-border-hover
* Şema B (dashboard-7, 2-7, fiyatlandirma, profil, sözleşme, gizlilik):
* --bg, --bg-2, --bg-3, --panel, --panel-strong, --line,
* --text, --text-2, --text-3, --border
* ============================================================ */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
/* Tema geçiş animasyonu (kullanıcı tercih ettiyse devre dışı) */
@media (prefers-reduced-motion: no-preference) {
html[data-theme] body,
html[data-theme] body * {
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
}
/* ── Şema A: Gündüz override ────────────────────────────── */
html[data-theme="light"]:root,
html[data-theme="light"] {
/* Şema A */
--bg-dark: #F4F7FB;
--bg-deep: #FFFFFF;
--bg-card: #FFFFFF;
--surface: #ECF0F5;
--text-primary: #0F172A;
--text-secondary: #4B5563;
--text-muted: #6B7280;
--card-bg: rgba(255, 255, 255, 0.92);
--card-border: rgba(15, 23, 42, 0.10);
--card-border-hover: rgba(11, 166, 140, 0.45);
/* Şema B */
--bg: #FFFFFF;
--bg-2: #F4F7FB;
--bg-3: #E7ECF2;
--panel: rgba(255, 255, 255, 0.95);
--panel-strong: #FFFFFF;
--line: rgba(15, 23, 42, 0.12);
--text: #0F172A;
--text-2: #475569;
--text-3: #64748B;
--border: rgba(15, 23, 42, 0.14);
/* Aksanları gündüze uyumlu (cyan-dim koyulaştırıldı, kontrast için) */
--cyan: #0BA68C;
--cyan-2: #14E8C9;
--cyan-glow: rgba(11, 166, 140, 0.25);
--cyan-soft: rgba(11, 166, 140, 0.10);
--cyan-primary: #0BA68C;
--cyan-subtle: #0BA68C;
--green-primary: #00B86B;
--green-glow: rgba(0, 184, 107, 0.20);
--purple-accent: #6D43E0;
--red-alert: #E11D48;
--red: #E11D48;
--orange-warning: #D97706;
--amber: #D97706;
--green: #00B86B;
--ok: #00B86B;
}
/* ── Body arka planı (sayfalar inline radial-gradient kullanıyor) ── */
html[data-theme="light"] body {
background: var(--bg-dark, #F4F7FB) !important;
background-image:
radial-gradient(800px 400px at 12% -10%, rgba(11,166,140,0.06), transparent 60%),
radial-gradient(700px 500px at 95% 20%, rgba(109,67,224,0.05), transparent 65%),
radial-gradient(500px 400px at 50% 100%, rgba(0,184,107,0.04), transparent 70%) !important;
color: var(--text-primary, #0F172A);
}
/* ── Scrollbar ─────────────────────────────────────────── */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(11,166,140,0.35); }
/* ── Şema A: hard-coded koyu yüzeyleri yumuşat ─────────── */
html[data-theme="light"] .sidebar {
background: rgba(255, 255, 255, 0.92) !important;
border-right-color: var(--card-border) !important;
}
html[data-theme="light"] .sidebar-user {
background: var(--card-bg);
border-color: var(--card-border);
}
html[data-theme="light"] .nav-item { color: var(--text-secondary); }
html[data-theme="light"] .nav-item:hover { background: rgba(11,166,140,0.08); color: var(--text-primary); }
html[data-theme="light"] .nav-item.active {
background: rgba(11,166,140,0.12);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.30);
box-shadow: inset 0 0 12px rgba(11,166,140,0.08);
}
html[data-theme="light"] .menu-toggle {
background: var(--card-bg);
border-color: var(--card-border);
color: var(--text-primary);
}
html[data-theme="light"] .stat-card,
html[data-theme="light"] .feature,
html[data-theme="light"] .plan-mini {
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}
html[data-theme="light"] .stat-card::before,
html[data-theme="light"] .plan-mini::before { background: linear-gradient(135deg, transparent 60%, rgba(11,166,140,0.04) 100%); }
html[data-theme="light"] .guarantee-banner {
background: linear-gradient(90deg, rgba(0,184,107,0.10) 0%, rgba(0,184,107,0.02) 100%);
border-color: rgba(0,184,107,0.30);
}
html[data-theme="light"] .hero-cta {
background:
radial-gradient(600px 340px at 50% 0%, rgba(11,166,140,0.10), transparent 60%),
linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
border-color: rgba(11,166,140,0.35) !important;
box-shadow: 0 24px 60px rgba(15,23,42,0.06);
}
html[data-theme="light"] .hero-cta::before {
background-image:
linear-gradient(rgba(11,166,140,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,166,140,0.06) 1px, transparent 1px) !important;
}
html[data-theme="light"] .plan-mini.featured {
background: linear-gradient(180deg, rgba(11,166,140,0.06), #FFFFFF);
border-color: rgba(11,166,140,0.45);
box-shadow: 0 0 0 1px rgba(11,166,140,0.15), 0 18px 36px rgba(11,166,140,0.10);
}
html[data-theme="light"] .plan-button {
background: rgba(15,23,42,0.04);
border-color: var(--card-border);
color: var(--text-primary);
}
html[data-theme="light"] .plan-button:hover {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.45);
color: var(--cyan-primary);
}
html[data-theme="light"] .plan-cam {
background: rgba(15,23,42,0.04);
border-color: var(--card-border);
color: var(--text-primary);
}
html[data-theme="light"] .feature-icon { background: rgba(11,166,140,0.10); color: var(--cyan-primary); }
html[data-theme="light"] .stat-icon.cyan { background: rgba(11,166,140,0.10); color: var(--cyan-primary); }
html[data-theme="light"] .stat-icon.purple { background: rgba(109,67,224,0.12); color: var(--purple-accent); }
html[data-theme="light"] .stat-icon.green { background: rgba(0,184,107,0.10); color: var(--green-primary); }
html[data-theme="light"] .stat-icon.orange { background: rgba(217,119,6,0.12); color: var(--orange-warning); }
/* ── Şema B: hard-coded koyu yüzeyleri yumuşat ─────────── */
/* dashboard-7, 2-7, fiyatlandirma, profil, sözleşme, gizlilik
* bu sayfalarda --bg, --panel vb. değişkenleri override ettik;
* ama bazı bileşenler doğrudan rgba(8,23,32,..) gibi hard-coded
* koyu rengi kullanıyor. Onları burada eşliyoruz.
*/
html[data-theme="light"] .panel,
html[data-theme="light"] .panel-strong,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-content {
background: var(--panel, #FFFFFF) !important;
color: var(--text, #0F172A);
border-color: var(--line, rgba(15,23,42,.12));
}
/* dashboard-7.html: sidebar + topbar + cards */
html[data-theme="light"] .sidebar {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(14px) saturate(140%);
}
html[data-theme="light"] .side-user,
html[data-theme="light"] .menu-btn,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .search {
background: #FFFFFF !important;
border-color: var(--line, rgba(15,23,42,.12)) !important;
color: var(--text, #0F172A);
}
html[data-theme="light"] .icon-btn { color: var(--text-2, #475569); }
html[data-theme="light"] .icon-btn:hover { color: var(--cyan, #0BA68C); border-color: rgba(11,166,140,.35) !important; }
html[data-theme="light"] .icon-btn .badge { box-shadow: 0 0 0 2px #FFFFFF; }
html[data-theme="light"] .search input { color: var(--text, #0F172A); }
html[data-theme="light"] .search input::placeholder { color: var(--text-3, #64748B); }
html[data-theme="light"] .side-link { color: var(--text-2, #475569); }
html[data-theme="light"] .side-link:hover { background: rgba(11,166,140,.06); color: var(--text, #0F172A); }
html[data-theme="light"] .side-link.active {
background: rgba(11,166,140,.10);
border-color: rgba(11,166,140,.35);
color: var(--cyan, #0BA68C);
box-shadow: inset 0 0 18px rgba(11,166,140,.05);
}
html[data-theme="light"] .card {
background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: var(--line, rgba(15,23,42,.10)) !important;
box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
html[data-theme="light"] .kpi {
background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: var(--line, rgba(15,23,42,.10)) !important;
color: var(--text, #0F172A);
}
html[data-theme="light"] .scrim { background: rgba(15, 23, 42, .55); }
html[data-theme="light"] .brand-mark::after { background: var(--bg, #FFFFFF); }
/* Avatar ve gradient bg üzerinde duran metin: koyu kalsın */
html[data-theme="light"] .avatar { color: #FFFFFF; }
/* fiyatlandirma.html / profil.php / sözleşme / gizlilik için generic */
html[data-theme="light"] .container,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .plan,
html[data-theme="light"] .feature-block,
html[data-theme="light"] .info-box,
html[data-theme="light"] .form-card,
html[data-theme="light"] .doc-content,
html[data-theme="light"] .legal-content,
html[data-theme="light"] section.card-like {
background: var(--panel, #FFFFFF);
color: var(--text, #0F172A);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background: #FFFFFF;
color: var(--text, #0F172A);
border-color: var(--line, rgba(15,23,42,.14));
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--text-3, #64748B); }
html[data-theme="light"] hr { border-color: var(--line, rgba(15,23,42,.10)); }
/* Mobile fix uyumu — koyu zemin varsayan butonları yumuşat */
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .topbar { color: var(--text-primary, #0F172A); }
/* ── fiyatlandirma.html / profil.php ortak topbar ─────── */
html[data-theme="light"] header.topbar {
background: rgba(255, 255, 255, 0.92) !important;
border-bottom: 1px solid var(--line, rgba(15,23,42,.10));
color: var(--text, #0F172A);
}
html[data-theme="light"] .topbar-link {
background: #FFFFFF;
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text-2, #475569);
}
html[data-theme="light"] .topbar-link:hover {
background: rgba(11,166,140,.08);
border-color: rgba(11,166,140,.35);
color: var(--text, #0F172A);
}
html[data-theme="light"] .sub-badge.empty {
background: rgba(15,23,42,.04);
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text-3, #64748B);
}
html[data-theme="light"] .sub-badge {
background: rgba(11,166,140,.10);
border-color: rgba(11,166,140,.35);
color: var(--cyan, #0BA68C);
}
/* fiyatlandirma — paket kartları */
html[data-theme="light"] .plan-card,
html[data-theme="light"] .plan {
background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: var(--line, rgba(15,23,42,.12)) !important;
color: var(--text, #0F172A);
box-shadow: 0 6px 18px rgba(15,23,42,.05);
}
html[data-theme="light"] .plan-card.featured,
html[data-theme="light"] .plan.featured {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(11,166,140,.10) 0%, transparent 70%),
linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: rgba(11,166,140,.45) !important;
box-shadow: 0 0 0 1px rgba(11,166,140,.18), 0 18px 36px rgba(11,166,140,.10);
}
html[data-theme="light"] .plan:hover { border-color: rgba(11,166,140,.35) !important; }
/* anasayfa — paketler iframe çerçevesi (dashboard'da #packages sekmesi) */
html[data-theme="light"] .pkg-frame-wrap {
border-color: rgba(11,166,140,.30) !important;
box-shadow: 0 24px 60px rgba(15,23,42,.06) !important;
}
/* fiyatlandirma — embed (iframe) modu: dashboard içinde gömülü pricing */
html[data-theme="light"].bb-embed body {
background:
radial-gradient(600px 340px at 50% 0%, rgba(11,166,140,0.10), transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
color: var(--text, #0F172A);
}
html[data-theme="light"].bb-embed body::before {
background-image:
linear-gradient(rgba(11,166,140,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,166,140,0.06) 1px, transparent 1px) !important;
}
html[data-theme="light"] .modal-backdrop {
background: rgba(15,23,42,.45) !important;
}
html[data-theme="light"] .modal-card {
background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: rgba(11,166,140,.30) !important;
box-shadow: 0 30px 80px rgba(15,23,42,.18), 0 0 50px rgba(11,166,140,.08) !important;
color: var(--text, #0F172A);
}
html[data-theme="light"] .contact-row {
background: rgba(11,166,140,.05);
border-color: rgba(11,166,140,.20);
color: var(--text, #0F172A);
}
html[data-theme="light"] .contact-row:hover {
background: rgba(11,166,140,.09);
border-color: rgba(11,166,140,.40);
}
/* yonlendirmeler — hero ve final CTA kartları */
html[data-theme="light"] .referral-hero {
background:
radial-gradient(600px 320px at 100% 0%, rgba(11,166,140,0.10), transparent 60%),
linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: rgba(11,166,140,.30) !important;
box-shadow: 0 20px 50px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .referral-hero::before {
background-image:
linear-gradient(rgba(11,166,140,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,166,140,0.06) 1px, transparent 1px) !important;
}
html[data-theme="light"] .hero-chip {
background: rgba(15,23,42,.04) !important;
border-color: var(--line, rgba(15,23,42,.12)) !important;
color: var(--text-2, #475569) !important;
}
html[data-theme="light"] .final-cta {
background:
radial-gradient(500px 300px at 50% 100%, rgba(11,166,140,0.10), transparent 60%),
linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: rgba(11,166,140,.40) !important;
box-shadow: 0 20px 50px rgba(15,23,42,.06) !important;
color: var(--text, #0F172A);
}
html[data-theme="light"] .step-card,
html[data-theme="light"] .benefit,
html[data-theme="light"] .help-footer {
background: var(--card-bg, #FFFFFF);
border-color: var(--card-border, rgba(15,23,42,.10));
box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}
html[data-theme="light"] .pricing-toggle,
html[data-theme="light"] .plan-cam-ctrl-row,
html[data-theme="light"] .plan-cta,
html[data-theme="light"] .plan-features li,
html[data-theme="light"] .pricing-tabs {
background: rgba(15,23,42,.04);
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text, #0F172A);
}
html[data-theme="light"] .plan-cta:hover {
background: rgba(11,166,140,.10);
border-color: var(--cyan, #0BA68C);
box-shadow: 0 0 24px rgba(11,166,140,.18);
}
html[data-theme="light"] .pricing-tab.active,
html[data-theme="light"] .pricing-toggle .on {
background: linear-gradient(95deg, var(--cyan, #0BA68C) 0%, var(--cyan-dim, #0BA68C) 100%);
color: #FFFFFF;
}
/* profil.php — form kartları */
html[data-theme="light"] .profile-card,
html[data-theme="light"] .info-row,
html[data-theme="light"] .form-row,
html[data-theme="light"] .stat-row {
background: #FFFFFF;
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text, #0F172A);
}
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-ghost {
background: rgba(15,23,42,.04);
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text, #0F172A);
}
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-ghost:hover {
background: rgba(11,166,140,.08);
border-color: rgba(11,166,140,.35);
color: var(--cyan, #0BA68C);
}
/* 2-7.php — canlı izleme paneli */
html[data-theme="light"] .feed,
html[data-theme="light"] .feed-card,
html[data-theme="light"] .stream-card,
html[data-theme="light"] .player-shell,
html[data-theme="light"] .events-list,
html[data-theme="light"] .event-item,
html[data-theme="light"] .controls,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .control-panel {
background: #FFFFFF;
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text, #0F172A);
}
html[data-theme="light"] .player-shell,
html[data-theme="light"] .video-frame,
html[data-theme="light"] video { background: #000 !important; } /* video alanı siyah kalır */
/* Yasal sayfalar (sözleşme/gizlilik) */
html[data-theme="light"] .doc-page,
html[data-theme="light"] .doc-shell,
html[data-theme="light"] .doc-toc,
html[data-theme="light"] article.doc,
html[data-theme="light"] .legal-section {
background: #FFFFFF;
border-color: var(--line, rgba(15,23,42,.12));
color: var(--text, #0F172A);
}
html[data-theme="light"] .doc-page h1,
html[data-theme="light"] .doc-page h2,
html[data-theme="light"] .doc-page h3,
html[data-theme="light"] .legal-section h1,
html[data-theme="light"] .legal-section h2,
html[data-theme="light"] .legal-section h3 {
color: var(--text, #0F172A);
}
html[data-theme="light"] .doc-page p,
html[data-theme="light"] .doc-page li,
html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li {
color: var(--text-2, #475569);
}
/* ── 2-7.php — landing/hero/karşılaştırma ───────────── */
html[data-theme="light"] .bg-base,
html[data-theme="light"] .bg-noise { opacity: 0.4; }
html[data-theme="light"] nav.nav {
background: rgba(255, 255, 255, 0.92) !important;
border-bottom: 1px solid var(--line, rgba(15,23,42,.10));
}
html[data-theme="light"] nav.nav .nav-links a { color: var(--text-2, #475569); }
html[data-theme="light"] nav.nav .nav-links a:hover {
color: var(--text, #0F172A);
background: rgba(11,166,140,.06);
}
html[data-theme="light"] .nav-cta {
background: rgba(11,166,140,.10) !important;
border-color: rgba(11,166,140,.35) !important;
color: var(--cyan, #0BA68C) !important;
}
html[data-theme="light"] .nav-cta:hover {
background: rgba(11,166,140,.18) !important;
box-shadow: 0 0 20px rgba(11,166,140,.20) !important;
}
html[data-theme="light"] .hero-eyebrow,
html[data-theme="light"] .compare-eyebrow {
background: rgba(11,166,140,.08);
color: var(--cyan, #0BA68C);
border-color: rgba(11,166,140,.30);
}
html[data-theme="light"] .hero-visual,
html[data-theme="light"] .login-card,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .cmp-card {
background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border-color: var(--line, rgba(15,23,42,.10)) !important;
color: var(--text, #0F172A);
box-shadow: 0 6px 22px rgba(15,23,42,.05);
}
html[data-theme="light"] .cmp-row {
background: rgba(15,23,42,.025);
border-color: var(--line, rgba(15,23,42,.10));
}
html[data-theme="light"] .feat,
html[data-theme="light"] .feat-icon {
background: rgba(11,166,140,.06);
color: var(--cyan, #0BA68C);
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero p,
html[data-theme="light"] .compare h2 { color: var(--text, #0F172A); }
/* Toggle butonu — paylaşımlı stil */
.bb-theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
color: inherit;
font-family: inherit;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
line-height: 1;
user-select: none;
-webkit-user-select: none;
}
.bb-theme-toggle:hover { background: rgba(20, 232, 201, 0.10); border-color: rgba(20, 232, 201, 0.35); }
.bb-theme-toggle:active { transform: scale(0.97); }
.bb-theme-toggle:focus-visible { outline: 2px solid rgba(20,232,201,0.6); outline-offset: 2px; }
.bb-theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.bb-theme-toggle[data-mode="light"] { color: #D97706; }
.bb-theme-toggle[data-mode="dark"] { color: #A7B0FF; }
.bb-theme-toggle[data-mode="auto"] { color: #14E8C9; }
html[data-theme="light"] .bb-theme-toggle {
background: #FFFFFF;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .bb-theme-toggle:hover {
background: rgba(11,166,140,0.08);
border-color: rgba(11,166,140,0.35);
}
html[data-theme="light"] .bb-theme-toggle[data-mode="light"] { color: #B45309; }
html[data-theme="light"] .bb-theme-toggle[data-mode="dark"] { color: #4F46E5; }
html[data-theme="light"] .bb-theme-toggle[data-mode="auto"] { color: #0BA68C; }
/* ── Türkçe karakter tam destek ─────────────────────────── */
html[lang="tr"] body, html[data-theme] body { font-feature-settings: "ss01" 1, "cv11" 1; }
/* ── Logo swap (Gece = beyaz logo / Gündüz = koyu logo) ── *
* Markup:
* 
← gece için (beyaz logo)
* 
← gündüz için (koyu logo)
*
* Varsayılan (data-theme="dark" veya attribute yok): bb-logo-dark görünür.
* data-theme="light" iken bb-logo-light görünür.
*/
.bb-logo { display: none !important; }
html[data-theme="dark"] .bb-logo-dark,
html:not([data-theme="light"]) .bb-logo-dark { display: block !important; }
html[data-theme="light"] .bb-logo-light { display: block !important; }
/* ──────────────────────────────────────────────────────────────────
* Ücretsiz Deneme sihirbazı — gündüz modu override
* Inline trial-* stilleri rgba(2,8,12,...) gibi sabit koyu arka planlar
* kullandığı için light mode'da okunmuyordu. Burada panellere şeffaf-beyaz
* fon, açık metin rengi ve cyan-dim aksanlar veriyoruz.
* ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .trial-stepper {
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}
html[data-theme="light"] .trial-stepper .ts-num {
background: rgba(15,23,42,0.04);
border-color: var(--card-border);
color: var(--text-muted);
}
html[data-theme="light"] .trial-stepper .ts-step.is-active .ts-num {
background: var(--gradient-cta, linear-gradient(95deg, #0BA68C 0%, #14E8C9 100%));
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 8px 24px rgba(11,166,140,0.28), 0 0 0 4px rgba(11,166,140,0.10);
}
html[data-theme="light"] .trial-stepper .ts-step.is-done .ts-num {
background: rgba(11,166,140,0.10);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.40);
}
html[data-theme="light"] .trial-stepper .ts-bar { background: var(--card-border); }
html[data-theme="light"] .trial-stepper .ts-bar.is-done {
background: linear-gradient(90deg, rgba(11,166,140,0.20), rgba(11,166,140,0.55));
}
html[data-theme="light"] .trial-card {
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}
html[data-theme="light"] .trial-card::before {
background: linear-gradient(135deg, transparent 60%, rgba(11,166,140,0.04) 100%);
}
html[data-theme="light"] .trial-card-head .tc-icon {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.32);
color: var(--cyan-primary);
}
html[data-theme="light"] .trial-video-card {
background: linear-gradient(155deg, rgba(11,166,140,0.06), rgba(11,166,140,0.02));
border-color: rgba(11,166,140,0.24);
}
html[data-theme="light"] .trial-video-card .tv-play {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.45);
color: var(--cyan-primary);
}
html[data-theme="light"] .trial-divider { color: var(--text-muted); }
html[data-theme="light"] .trial-divider::before,
html[data-theme="light"] .trial-divider::after {
background: var(--card-border);
}
/* Step 1 — 4 adım kartları */
html[data-theme="light"] .trial-step-card {
background: #FFFFFF;
border-color: var(--card-border);
box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
html[data-theme="light"] .trial-step-card:hover {
border-color: rgba(11,166,140,0.40);
box-shadow: 0 14px 32px rgba(15,23,42,0.08);
}
html[data-theme="light"] .trial-step-card .tsc-num {
background: rgba(15,23,42,0.04);
border-color: var(--card-border);
color: var(--text-muted);
}
html[data-theme="light"] .trial-step-card .tsc-icon {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.32);
color: var(--cyan-primary);
}
html[data-theme="light"] .trial-step-card.tsc-purple .tsc-icon {
background: rgba(109,67,224,0.10);
border-color: rgba(109,67,224,0.32);
color: var(--purple-accent);
}
html[data-theme="light"] .trial-step-card.tsc-orange .tsc-icon {
background: rgba(217,119,6,0.10);
border-color: rgba(217,119,6,0.32);
color: var(--orange-warning);
}
html[data-theme="light"] .trial-step-card.tsc-green .tsc-icon {
background: rgba(0,184,107,0.10);
border-color: rgba(0,184,107,0.32);
color: var(--green-primary);
}
html[data-theme="light"] .trial-step-card .tsc-text { color: var(--text-secondary); }
html[data-theme="light"] .trial-step-card .tsc-text code {
background: rgba(15,23,42,0.05);
border-color: var(--card-border);
color: var(--cyan-primary);
}
/* Step 2 — credential satırları + textarea */
html[data-theme="light"] .trial-cred-row {
background: #FFFFFF;
border-color: var(--card-border);
box-shadow: 0 4px 10px rgba(15,23,42,0.03);
}
html[data-theme="light"] .trial-cred-row:hover { border-color: rgba(11,166,140,0.32); }
html[data-theme="light"] .trial-cred-row .tcr-value { color: var(--text-primary); }
html[data-theme="light"] .trial-cred-btn {
background: rgba(11,166,140,0.08);
border-color: rgba(11,166,140,0.32);
color: var(--cyan-primary);
}
html[data-theme="light"] .trial-cred-btn:hover {
background: var(--gradient-cta, linear-gradient(95deg, #0BA68C 0%, #14E8C9 100%));
color: #FFFFFF;
border-color: transparent;
}
html[data-theme="light"] .trial-cred-btn.is-copied {
background: rgba(0,184,107,0.16);
color: var(--green-primary);
border-color: rgba(0,184,107,0.42);
}
html[data-theme="light"] .trial-info-strip {
background: rgba(217,119,6,0.06);
border-color: rgba(217,119,6,0.22);
color: var(--text-secondary);
}
html[data-theme="light"] .trial-info-strip svg { color: var(--orange-warning); }
html[data-theme="light"] .trial-textarea-wrap label { color: var(--text-muted); }
html[data-theme="light"] .trial-textarea {
background: #FFFFFF;
border-color: var(--card-border);
color: var(--text-primary);
}
html[data-theme="light"] .trial-textarea::placeholder { color: var(--text-muted); }
html[data-theme="light"] .trial-textarea:focus {
border-color: var(--cyan-primary);
box-shadow: 0 0 0 4px rgba(11,166,140,0.10);
}
/* Step 3 — özet satırları + garanti şeridi */
html[data-theme="light"] .trial-review-row {
background: #FFFFFF;
border-color: var(--card-border);
box-shadow: 0 4px 10px rgba(15,23,42,0.03);
}
html[data-theme="light"] .trial-review-row .trr-label { color: var(--text-muted); }
html[data-theme="light"] .trial-review-row .trr-value { color: var(--text-primary); }
html[data-theme="light"] .trial-review-row .trr-value.empty { color: var(--text-muted); }
html[data-theme="light"] .trial-guarantee {
background: linear-gradient(95deg, rgba(11,166,140,0.10), rgba(11,166,140,0.03));
border-color: rgba(11,166,140,0.32);
}
html[data-theme="light"] .trial-guarantee .tg-icon {
background: rgba(11,166,140,0.14);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.42);
}
html[data-theme="light"] .trial-guarantee .tg-eyebrow { color: var(--cyan-primary); }
html[data-theme="light"] .trial-guarantee .tg-text { color: var(--text-secondary); }
/* Action bar + butonlar */
html[data-theme="light"] .trial-actionbar {
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: 0 6px 16px rgba(15,23,42,0.04);
}
html[data-theme="light"] .trial-actionbar .tab-help { color: var(--text-muted); }
html[data-theme="light"] .trial-btn.tb-ghost {
background: transparent;
border-color: var(--card-border);
color: var(--text-secondary);
}
html[data-theme="light"] .trial-btn.tb-ghost:hover {
border-color: var(--text-muted);
color: var(--text-primary);
background: rgba(15,23,42,0.02);
}
html[data-theme="light"] .trial-btn.tb-primary {
background: var(--gradient-cta, linear-gradient(95deg, #0BA68C 0%, #14E8C9 100%));
color: #FFFFFF;
box-shadow: 0 8px 22px rgba(11,166,140,0.28);
}
html[data-theme="light"] .trial-btn.tb-primary:hover { box-shadow: 0 12px 30px rgba(11,166,140,0.40); }
html[data-theme="light"] .trial-btn .trial-spinner {
border-color: rgba(255,255,255,0.35);
border-top-color: #FFFFFF;
}
/* Sidebar "YENİ" rozeti — light mode'da kontrast */
html[data-theme="light"] .nav-item.nav-item-trial::after {
background: rgba(11,166,140,0.12);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.32);
}
html[data-theme="light"] .nav-item.nav-item-trial.active::after {
background: rgba(255,255,255,0.5);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.45);
}
/* Topbar trial-badge — gradient gündüzde de cyan-dim üstünde okunsun */
html[data-theme="light"] .trial-badge {
background:
linear-gradient(95deg, rgba(11,166,140,0.10) 0%, rgba(11,166,140,0.06) 50%, rgba(11,166,140,0.12) 100%);
border-color: rgba(11,166,140,0.45);
color: var(--cyan-primary);
backdrop-filter: blur(8px);
}
html[data-theme="light"] .trial-badge::before {
background: linear-gradient(110deg,
transparent 0%,
rgba(255,255,255,0.55) 35%,
rgba(255,255,255,0.85) 50%,
rgba(255,255,255,0.55) 65%,
transparent 100%);
}
html[data-theme="light"] .trial-badge::after {
background: linear-gradient(120deg, rgba(11,166,140,0.55), rgba(15,23,42,0.05) 35%, rgba(11,166,140,0.55));
opacity: .55;
}
html[data-theme="light"] .trial-badge:hover {
background: var(--gradient-cta, linear-gradient(95deg, #0BA68C 0%, #14E8C9 100%));
color: #FFFFFF;
box-shadow: 0 14px 32px rgba(11,166,140,0.30);
}
html[data-theme="light"] .trial-badge:hover .trial-badge-spark { color: #FFFFFF; }
html[data-theme="light"] .trial-badge .trial-badge-spark {
background: rgba(11,166,140,0.12);
border-color: rgba(11,166,140,0.45);
color: var(--cyan-primary);
}
html[data-theme="light"] .trial-badge .trial-badge-num {
color: var(--cyan-primary);
text-shadow: 0 0 10px rgba(11,166,140,0.35);
}
html[data-theme="light"] .trial-badge:hover .trial-badge-num {
color: #FFFFFF; text-shadow: none;
}
/* Loading + status pill */
html[data-theme="light"] .trial-loading { color: var(--text-muted); }
html[data-theme="light"] .trial-loading .trial-spinner-dark {
border-color: rgba(15,23,42,0.10);
border-top-color: var(--cyan-primary);
}
html[data-theme="light"] .trial-status-pill {
background: rgba(217,119,6,0.10);
color: var(--orange-warning);
border-color: rgba(217,119,6,0.32);
}
html[data-theme="light"] .trial-status-pill.is-active {
background: rgba(11,166,140,0.10);
color: var(--cyan-primary);
border-color: rgba(11,166,140,0.32);
}
html[data-theme="light"] .trial-status-pill.is-submitted {
background: rgba(0,184,107,0.10);
color: var(--green-primary);
border-color: rgba(0,184,107,0.32);
}
html[data-theme="light"] .trial-status-pill.is-expired {
background: rgba(225,29,72,0.10);
color: var(--red-alert);
border-color: rgba(225,29,72,0.32);
}
/* ── Profil "Aboneliğim" kartı — gündüz override ───────────────────── */
html[data-theme="light"] .pp-subscription-card::after {
background: linear-gradient(135deg, transparent 60%, rgba(11,166,140,0.04) 100%);
}
html[data-theme="light"] .pp-sub-empty .pse-icon {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.32);
color: var(--cyan-primary);
}
html[data-theme="light"] .pp-sub-cta.is-primary {
background: var(--gradient-cta, linear-gradient(95deg, #0BA68C 0%, #14E8C9 100%));
color: #FFFFFF;
box-shadow: 0 6px 16px rgba(11,166,140,0.25);
}
html[data-theme="light"] .pp-sub-cta.is-primary:hover { box-shadow: 0 10px 22px rgba(11,166,140,0.36); }
html[data-theme="light"] .pp-sub-cta.is-ghost {
background: transparent;
border-color: var(--card-border);
color: var(--text-secondary);
}
html[data-theme="light"] .pp-sub-cta.is-ghost:hover {
border-color: var(--cyan-primary);
color: var(--cyan-primary);
background: rgba(11,166,140,0.04);
}
html[data-theme="light"] .pp-sub-plan-name { color: var(--text-primary); }
html[data-theme="light"] .pp-sub-plan-name .pp-sub-cam-pill {
background: rgba(11,166,140,0.10);
border-color: rgba(11,166,140,0.32);
color: var(--cyan-primary);
}
html[data-theme="light"] .pp-sub-meta-row .psm-key { color: var(--text-muted); }
html[data-theme="light"] .pp-sub-meta-row .psm-val { color: var(--text-secondary); }
html[data-theme="light"] .pp-sub-counter {
background:
radial-gradient(120px 90px at 50% 30%, rgba(11,166,140,0.18), transparent 70%),
rgba(255,255,255,0.85);
border-color: rgba(11,166,140,0.42);
box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}
html[data-theme="light"] .pp-sub-counter::before {
background: conic-gradient(from 0deg,
rgba(11,166,140,0.0) 0deg,
rgba(11,166,140,0.55) 90deg,
rgba(11,166,140,0.0) 200deg,
rgba(11,166,140,0.55) 290deg,
rgba(11,166,140,0.0) 360deg);
}
html[data-theme="light"] .pp-sub-counter .psc-num {
color: var(--cyan-primary);
text-shadow: 0 0 18px rgba(11,166,140,0.28);
}
html[data-theme="light"] .pp-sub-counter .psc-label { color: var(--text-secondary); }
html[data-theme="light"] .pp-sub-counter.is-warning {
background:
radial-gradient(120px 90px at 50% 30%, rgba(217,119,6,0.20), transparent 70%),
rgba(255,255,255,0.85);
border-color: rgba(217,119,6,0.45);
}
html[data-theme="light"] .pp-sub-counter.is-warning::before {
background: conic-gradient(from 0deg,
rgba(217,119,6,0) 0deg,
rgba(217,119,6,0.65) 90deg,
rgba(217,119,6,0) 200deg,
rgba(217,119,6,0.65) 290deg,
rgba(217,119,6,0) 360deg);
}
html[data-theme="light"] .pp-sub-counter.is-warning .psc-num {
color: var(--orange-warning);
text-shadow: 0 0 18px rgba(217,119,6,0.32);
}
html[data-theme="light"] .pp-sub-expired-strip {
background: rgba(225,29,72,0.06);
border-color: rgba(225,29,72,0.32);
color: var(--text-secondary);
}
html[data-theme="light"] .pp-sub-trial-strip {
background: linear-gradient(95deg, rgba(11,166,140,0.10), rgba(11,166,140,0.03));
border-color: rgba(11,166,140,0.32);
color: var(--text-secondary);
}
html[data-theme="light"] .pp-sub-trial-strip .ppt-icon {
background: rgba(11,166,140,0.16);
color: var(--cyan-primary);
}
html[data-theme="light"] .pp-sub-empty .pse-title { color: var(--text-primary); }
html[data-theme="light"] .pp-sub-empty .pse-sub { color: var(--text-secondary); }