/* Grafik üst menü temaları — yalnızca .topbar arka planı */

.topbar-graphic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:12px;
  max-width:100%;
}
.topbar-graphic-opt{
  width:100%;height:70px;border:2px solid var(--border,#dde4ee);border-radius:12px;
  padding:0;cursor:pointer;position:relative;overflow:hidden;background:#0f172a;
  transition:transform .22s ease,box-shadow .22s ease,border-color .18s ease;
}
.topbar-graphic-opt:hover{
  transform:scale(1.03);
  box-shadow:0 10px 32px rgba(37,99,235,.32);
  border-color:#93c5fd;
}
.topbar-graphic-opt.selected{
  border-color:var(--primary,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.22),0 10px 28px rgba(37,99,235,.28);
}
.topbar-graphic-preview{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.topbar-graphic-preview[data-graphic-preview]{
  background:var(--tg-bg);
}
.topbar-graphic-opt span{
  position:absolute;left:0;right:0;bottom:0;padding:6px 10px;
  font-size:.68rem;font-weight:700;color:#fff;line-height:1.2;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  text-align:left;pointer-events:none;
}
.topbar-graphic-opt-none .topbar-graphic-preview{
  background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
  display:flex;align-items:center;justify-content:center;
}
.topbar-graphic-opt-none .topbar-graphic-preview::after{
  content:'Düz renk';font-size:.72rem;font-weight:700;color:#64748b;
}
.topbar-graphic-opt-none span{color:#475569;background:linear-gradient(to top,rgba(255,255,255,.9),transparent)}

.topbar[data-topbar-graphic]{
  background:var(--tg-bg,center/cover no-repeat) !important;
  background-color:var(--tg-bg-color,#0a0f1c) !important;
  box-shadow:var(--tg-shadow,0 8px 40px rgba(8,12,28,.4)) !important;
}
[data-graphic-preview="aurora"],.topbar[data-topbar-graphic="aurora"]{--tg-bg:radial-gradient(ellipse 80% 60% at 20% 0%,#22d3ee 0%,transparent 55%),radial-gradient(ellipse 70% 50% at 80% 20%,#a855f7 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 50% 100%,#10b981 0%,transparent 45%),linear-gradient(135deg,#020617,#0f172a 55%,#1e1b4b);--tg-bg-color:#020617;--tg-shadow:0 8px 40px rgba(34,211,238,.2)}
[data-graphic-preview="galaxy"],.topbar[data-topbar-graphic="galaxy"]{--tg-bg:radial-gradient(circle at 15% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 45% 60%,#fff 0 1px,transparent 2px),radial-gradient(circle at 75% 30%,#fff 0 1.5px,transparent 2.5px),radial-gradient(ellipse 90% 70% at 50% 50%,#312e81 0%,#0f172a 45%,#020617 100%);--tg-bg-color:#020617;--tg-shadow:0 8px 40px rgba(49,46,129,.35)}
[data-graphic-preview="luxury_black_marble"],.topbar[data-topbar-graphic="luxury_black_marble"]{--tg-bg:repeating-linear-gradient(125deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px),radial-gradient(ellipse 80% 50% at 30% 0%,rgba(212,175,55,.18),transparent 55%),linear-gradient(160deg,#0a0a0a,#1a1a1a 40%,#0d0d0d);--tg-bg-color:#0a0a0a;--tg-shadow:0 8px 40px rgba(212,175,55,.15)}
[data-graphic-preview="cyber_neon"],.topbar[data-topbar-graphic="cyber_neon"]{--tg-bg:linear-gradient(90deg,rgba(236,72,153,.25) 0 2px,transparent 2px 40px),linear-gradient(rgba(34,211,238,.2) 0 2px,transparent 2px 40px),linear-gradient(135deg,#0f0520,#1a0535 50%,#0a1628);--tg-bg-color:#0f0520;--tg-shadow:0 8px 40px rgba(236,72,153,.25)}
[data-graphic-preview="carbon_fiber"],.topbar[data-topbar-graphic="carbon_fiber"]{--tg-bg:repeating-linear-gradient(45deg,#111 0 4px,#1a1a1a 4px 8px),repeating-linear-gradient(-45deg,#0d0d0d 0 4px,#161616 4px 8px),linear-gradient(180deg,#1f1f1f,#0a0a0a);--tg-bg-color:#111;--tg-shadow:0 8px 32px rgba(0,0,0,.5)}
[data-graphic-preview="ocean_waves"],.topbar[data-topbar-graphic="ocean_waves"]{--tg-bg:radial-gradient(ellipse 120% 80% at 50% 120%,rgba(56,189,248,.35),transparent 55%),radial-gradient(ellipse 80% 40% at 20% 80%,rgba(14,165,233,.25),transparent 50%),linear-gradient(180deg,#0c4a6e,#0369a1 45%,#0e7490);--tg-bg-color:#0c4a6e;--tg-shadow:0 8px 40px rgba(14,165,233,.3)}
[data-graphic-preview="sunset_sky"],.topbar[data-topbar-graphic="sunset_sky"]{--tg-bg:radial-gradient(ellipse 70% 55% at 50% 100%,#f97316 0%,transparent 55%),radial-gradient(ellipse 90% 60% at 50% 0%,#7c3aed 0%,transparent 50%),linear-gradient(180deg,#4c1d95,#be185d 55%,#ea580c);--tg-bg-color:#7c2d12;--tg-shadow:0 8px 40px rgba(249,115,22,.3)}
[data-graphic-preview="forest"],.topbar[data-topbar-graphic="forest"]{--tg-bg:radial-gradient(ellipse 60% 50% at 20% 100%,rgba(34,197,94,.25),transparent 55%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(22,163,74,.2),transparent 50%),linear-gradient(160deg,#052e16,#14532d 50%,#166534);--tg-bg-color:#052e16;--tg-shadow:0 8px 40px rgba(22,163,74,.25)}
[data-graphic-preview="ice_crystal"],.topbar[data-topbar-graphic="ice_crystal"]{--tg-bg:linear-gradient(135deg,rgba(255,255,255,.25) 0 1px,transparent 1px 24px),linear-gradient(45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 18px),linear-gradient(180deg,#e0f2fe,#7dd3fc 40%,#0ea5e9);--tg-bg-color:#0c4a6e;--tg-shadow:0 8px 40px rgba(14,165,233,.28)}
[data-graphic-preview="fire"],.topbar[data-topbar-graphic="fire"]{--tg-bg:radial-gradient(ellipse 80% 60% at 50% 100%,#fbbf24 0%,#ef4444 35%,transparent 65%),linear-gradient(180deg,#450a0a,#991b1b 50%,#dc2626);--tg-bg-color:#450a0a;--tg-shadow:0 8px 40px rgba(239,68,68,.35)}
[data-graphic-preview="royal_purple"],.topbar[data-topbar-graphic="royal_purple"]{--tg-bg:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(167,139,250,.35),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 40px),linear-gradient(135deg,#2e1065,#5b21b6 50%,#4c1d95);--tg-bg-color:#2e1065;--tg-shadow:0 8px 40px rgba(124,58,237,.32)}
[data-graphic-preview="abstract_blue"],.topbar[data-topbar-graphic="abstract_blue"]{--tg-bg:radial-gradient(circle at 20% 30%,#3b82f6 0%,transparent 35%),radial-gradient(circle at 80% 70%,#06b6d4 0%,transparent 35%),radial-gradient(circle at 50% 50%,#1d4ed8 0%,transparent 50%),linear-gradient(120deg,#0f172a,#1e3a8a);--tg-bg-color:#0f172a;--tg-shadow:0 8px 40px rgba(59,130,246,.28)}
[data-graphic-preview="geometric_dark"],.topbar[data-topbar-graphic="geometric_dark"]{--tg-bg:linear-gradient(30deg,rgba(255,255,255,.04) 12.5%,transparent 12.5% 25%),linear-gradient(150deg,rgba(255,255,255,.04) 12.5%,transparent 12.5% 25%),linear-gradient(30deg,rgba(255,255,255,.04) 12.5%,transparent 12.5% 25%),linear-gradient(150deg,rgba(255,255,255,.04) 12.5%,transparent 12.5% 25%),#111827;--tg-bg-color:#111827;--tg-shadow:0 8px 32px rgba(0,0,0,.45)}
[data-graphic-preview="glass_ui"],.topbar[data-topbar-graphic="glass_ui"]{--tg-bg:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),linear-gradient(135deg,#1e293b,#334155 60%,#0f172a);--tg-bg-color:#1e293b;--tg-shadow:0 8px 40px rgba(148,163,184,.2)}
[data-graphic-preview="space_station"],.topbar[data-topbar-graphic="space_station"]{--tg-bg:radial-gradient(circle at 70% 30%,rgba(56,189,248,.15) 0%,transparent 40%),linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.95)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='10' cy='15' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='45' cy='35' r='.8' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='80' cy='20' r='1.2' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='100' cy='60' r='.7' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");--tg-bg-color:#020617;--tg-shadow:0 8px 40px rgba(56,189,248,.2)}
[data-graphic-preview="digital_circuit"],.topbar[data-topbar-graphic="digital_circuit"]{--tg-bg:linear-gradient(90deg,rgba(34,197,94,.15) 1px,transparent 1px),linear-gradient(rgba(34,197,94,.15) 1px,transparent 1px),radial-gradient(circle at 30% 50%,rgba(34,197,94,.2),transparent 40%),linear-gradient(135deg,#022c22,#0f172a);--tg-bg-color:#022c22;--tg-shadow:0 8px 40px rgba(34,197,94,.2)}
[data-graphic-preview="anime_style"],.topbar[data-topbar-graphic="anime_style"]{--tg-bg:radial-gradient(ellipse 90% 70% at 100% 0%,#fce7f3 0%,transparent 45%),radial-gradient(ellipse 80% 60% at 0% 100%,#dbeafe 0%,transparent 50%),linear-gradient(135deg,#6366f1,#ec4899 55%,#f472b6);--tg-bg-color:#4f46e5;--tg-shadow:0 8px 40px rgba(236,72,153,.28)}
[data-graphic-preview="cyberpunk_city"],.topbar[data-topbar-graphic="cyberpunk_city"]{--tg-bg:linear-gradient(180deg,rgba(250,204,21,.12) 0 2px,transparent 2px 28px),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(236,72,153,.35),transparent 55%),linear-gradient(180deg,#0f0a1a,#1e1035 40%,#0a0f1c);--tg-bg-color:#0f0a1a;--tg-shadow:0 8px 40px rgba(250,204,21,.15)}
[data-graphic-preview="japanese_sakura"],.topbar[data-topbar-graphic="japanese_sakura"]{--tg-bg:radial-gradient(circle at 15% 30%,rgba(251,207,232,.5) 0%,transparent 25%),radial-gradient(circle at 75% 60%,rgba(253,164,175,.45) 0%,transparent 22%),radial-gradient(circle at 45% 20%,rgba(252,231,243,.4) 0%,transparent 20%),linear-gradient(180deg,#831843,#9d174d 45%,#be185d);--tg-bg-color:#831843;--tg-shadow:0 8px 40px rgba(190,24,93,.25)}
[data-graphic-preview="tropical_beach"],.topbar[data-topbar-graphic="tropical_beach"]{--tg-bg:radial-gradient(ellipse 100% 40% at 50% 100%,#fde68a 0%,#fbbf24 25%,transparent 55%),linear-gradient(180deg,#0ea5e9,#38bdf8 35%,#7dd3fc 55%,#fde047);--tg-bg-color:#0284c7;--tg-shadow:0 8px 40px rgba(14,165,233,.28)}
[data-graphic-preview="mountain_landscape"],.topbar[data-topbar-graphic="mountain_landscape"]{--tg-bg:linear-gradient(180deg,#7dd3fc 0%,#bae6fd 28%,transparent 28%),linear-gradient(165deg,transparent 40%,#475569 40% 52%,#334155 52% 64%,#1e293b 64%);--tg-bg-color:#334155;--tg-shadow:0 8px 40px rgba(51,65,85,.3)}
[data-graphic-preview="rainy_city"],.topbar[data-topbar-graphic="rainy_city"]{--tg-bg:linear-gradient(115deg,rgba(148,163,184,.08) 0 2px,transparent 2px 18px),radial-gradient(ellipse 80% 50% at 50% 0%,rgba(148,163,184,.25),transparent 55%),linear-gradient(180deg,#1e293b,#0f172a 60%,#020617);--tg-bg-color:#1e293b;--tg-shadow:0 8px 40px rgba(100,116,139,.25)}
[data-graphic-preview="northern_lights"],.topbar[data-topbar-graphic="northern_lights"]{--tg-bg:radial-gradient(ellipse 80% 50% at 30% 20%,rgba(52,211,153,.45),transparent 55%),radial-gradient(ellipse 70% 45% at 70% 30%,rgba(96,165,250,.4),transparent 50%),radial-gradient(ellipse 60% 40% at 50% 60%,rgba(167,139,250,.35),transparent 45%),linear-gradient(180deg,#020617,#0f172a);--tg-bg-color:#020617;--tg-shadow:0 8px 40px rgba(52,211,153,.22)}
[data-graphic-preview="gold_luxury"],.topbar[data-topbar-graphic="gold_luxury"]{--tg-bg:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(251,191,36,.35),transparent 55%),repeating-linear-gradient(90deg,rgba(251,191,36,.08) 0 1px,transparent 1px 48px),linear-gradient(135deg,#1c1917,#292524 45%,#44403c);--tg-bg-color:#1c1917;--tg-shadow:0 8px 40px rgba(251,191,36,.2)}
[data-graphic-preview="minimal_white"],.topbar[data-topbar-graphic="minimal_white"]{--tg-bg:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06)),linear-gradient(135deg,#64748b,#94a3b8 50%,#cbd5e1);--tg-bg-color:#64748b;--tg-shadow:0 8px 32px rgba(148,163,184,.25)}

.topbar[data-topbar-graphic] .brand-block p{color:rgba(255,255,255,.88)}
.topbar[data-topbar-graphic="minimal_white"] .brand-block p{color:rgba(255,255,255,.92)}