/* CSS Variables for Dynamic Theming Based on AoT-PNASF README */

/* 1. Obsidian Gold (Varsayılan) */
:root, [data-theme="obsidian-gold"], [data-theme="custom"] {
  --bg-900: #0a0a0a;
  --bg-800: #141414;
  --bg-700: #262626;
  --accent: #d4af37;
  --accent-hover: #b5952f;
  --accent-rgb: 212, 175, 55;
  --text-main: #f5f5f5;
  --text-muted: #a3a3a3;
}

/* 2. Void Purple */
[data-theme="void-purple"] {
  --bg-900: #0d001a;
  --bg-800: #1a0033;
  --bg-700: #2a004d;
  --accent: #9d00ff;
  --accent-hover: #7a00cc;
  --accent-rgb: 157, 0, 255;
  --text-main: #f3e8ff;
  --text-muted: #d8b4fe;
}

/* 3. Blood Moon */
[data-theme="blood-moon"] {
  --bg-900: #120000;
  --bg-800: #240000;
  --bg-700: #3a0000;
  --accent: #ff1a1a;
  --accent-hover: #cc0000;
  --accent-rgb: 255, 26, 26;
  --text-main: #fee2e2;
  --text-muted: #fca5a5;
}

/* 4. Arctic Cyan */
[data-theme="arctic-cyan"] {
  --bg-900: #000b14;
  --bg-800: #001729;
  --bg-700: #002540;
  --accent: #00e6ff;
  --accent-hover: #00b3cc;
  --accent-rgb: 0, 230, 255;
  --text-main: #e0f2fe;
  --text-muted: #7dd3fc;
}

/* 5. Forest Keeper */
[data-theme="forest-keeper"] {
  --bg-900: #001205;
  --bg-800: #00240a;
  --bg-700: #003810;
  --accent: #00ff40;
  --accent-hover: #00cc33;
  --accent-rgb: 0, 255, 64;
  --text-main: #dcfce7;
  --text-muted: #86efac;
}

/* 6. Amber Fire */
[data-theme="amber-fire"] {
  --bg-900: #140800;
  --bg-800: #291000;
  --bg-700: #401a00;
  --accent: #ff8800;
  --accent-hover: #cc6d00;
  --accent-rgb: 255, 136, 0;
  --text-main: #ffedd5;
  --text-muted: #fdba74;
}

/* 7. Silver Knight */
[data-theme="silver-knight"] {
  --bg-900: #14161a;
  --bg-800: #22252a;
  --bg-700: #33373e;
  --accent: #c0c0c0;
  --accent-hover: #a0a0a0;
  --accent-rgb: 192, 192, 192;
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
}

/* 8. Neon Nexus */
[data-theme="neon-nexus"] {
  --bg-900: #050014;
  --bg-800: #0a0029;
  --bg-700: #140052;
  --accent: #ff00ff;
  --accent-hover: #cc00cc;
  --accent-rgb: 255, 0, 255;
  --text-main: #fae8ff;
  --text-muted: #f0abfc;
}

/* Tailwind Custom Overrides based on Variables */
body {
  background-color: var(--bg-900);
  color: var(--text-main);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bg-albion-900 { background-color: var(--bg-900); }
.bg-albion-800 { background-color: var(--bg-800); }
.bg-albion-700 { background-color: var(--bg-700); }
.text-albion-accent { color: var(--accent); }
.bg-albion-accent { background-color: var(--accent); }
.border-albion-accent { border-color: var(--accent); }
.hover\:bg-albion-accent_hover:hover { background-color: var(--accent-hover); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-900); 
}
::-webkit-scrollbar-thumb {
  background: var(--bg-700); 
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent); 
}

.custom-scroll::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.4);
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.8);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}



.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.animate-marquee-left {
  display: inline-block;
  animation: scroll-left 300s linear infinite;
  white-space: nowrap;
  will-change: transform;
  padding-left: 100%;
}

.marquee-container:hover .animate-marquee-left {
  animation-play-state: paused;
}

/* ============================================ */
/* SETTINGS PANEL - Drawer Style               */
/* ============================================ */
.sp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999; backdrop-filter:blur(2px); }
.sp-drawer { position:fixed; top:0; right:-400px; width:380px; height:100vh; background:var(--bg-800); border-left:1px solid var(--bg-700); z-index:1000; overflow-y:auto; transition:right .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.5); }
.sp-drawer.open { right:0; }
.sp-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--bg-700); background:var(--bg-900); position:sticky; top:0; z-index:2; }
.sp-title { font-size:16px; font-weight:700; color:var(--text-main); }
.sp-close { background:transparent; border:1px solid var(--bg-700); color:var(--text-muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; transition:all .2s; }
.sp-close:hover { border-color:var(--accent); color:var(--accent); }
.sp-section { padding:16px 20px; border-bottom:1px solid var(--bg-700); }
.sp-section:last-child { border-bottom:none; }
.sp-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; font-weight:700; }
.sp-acc { color:var(--accent); }
.sp-preview { border-radius:10px; overflow:hidden; border:1px solid var(--bg-700); }
.spv-nav { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--bg-700); background:var(--bg-900); }
.spv-logo { font-size:12px; font-weight:700; color:var(--accent); }
.spv-badge { background:var(--accent); color:var(--bg-900); font-size:8px; font-weight:700; padding:1px 5px; border-radius:3px; margin-left:3px; }
.spv-ai { font-size:10px; color:#00d4aa; }
.spv-body { padding:12px; text-align:center; background:var(--bg-800); }
.spv-title { font-size:14px; font-weight:700; color:var(--text-main); margin-bottom:2px; }
.spv-sub { font-size:9px; color:var(--text-muted); margin-bottom:8px; }
.spv-search { background:var(--bg-900); border:1px solid var(--bg-700); border-radius:5px; padding:5px 10px; font-size:9px; color:var(--text-muted); }
.spv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bg-700); }
.spv-stat { padding:7px; text-align:center; background:var(--bg-900); display:flex; flex-direction:column; align-items:center; }
.spv-num { font-size:11px; font-weight:700; color:var(--accent); }
.spv-lbl { font-size:8px; color:var(--text-muted); margin-top:1px; }
.sp-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sp-tc { border-radius:8px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:all .2s; }
.sp-tc:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.sp-tc.active { border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.4); }
.sp-tc-prev { height:50px; padding:7px; display:flex; flex-direction:column; gap:3px; position:relative; }
.sp-tc-bar { height:8px; border-radius:2px; }
.sp-tc-bar2 { height:5px; border-radius:2px; width:65%; }
.sp-tc-bar3 { height:5px; border-radius:2px; width:40%; }
.sp-tc-dots { display:flex; gap:3px; position:absolute; bottom:6px; left:7px; }
.sp-tc-dot { width:5px; height:5px; border-radius:50%; }
.sp-tc-foot { padding:5px 7px 7px; }
.sp-tc-name { font-size:9px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-picker-group { display:flex; flex-direction:column; gap:4px; }
.sp-picker-label { font-size:9px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-align:center; }
.sp-picker-group input[type="color"] { width:100%; height:40px; border-radius:8px; border:2px solid var(--bg-700); cursor:pointer; background:transparent; padding:2px; }
.sp-mini-preview { border-radius:8px; padding:12px; margin-top:8px; border:2px solid; }
#spMiniTitle { font-size:13px; font-weight:700; margin-bottom:4px; }
#spMiniText { font-size:11px; margin-bottom:8px; opacity:.8; }
#spMiniBtn { font-size:11px; font-weight:700; padding:4px 12px; border-radius:5px; border:none; cursor:pointer; }
.sp-lang-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.sp-lang-btn { display:flex; align-items:center; gap:8px; background:var(--bg-900); border:1px solid var(--bg-700); border-radius:8px; padding:8px 10px; cursor:pointer; transition:all .15s; color:var(--text-muted); }
.sp-lang-btn:hover,.sp-lang-btn.active { border-color:var(--accent); color:var(--accent); }
.sp-lang-btn.active { background:rgba(var(--accent-rgb),.1); }
.sp-lang-flag { font-size:16px; flex-shrink:0; }
.sp-lang-name { font-size:11px; font-weight:600; display:block; }
.sp-lang-native { font-size:9px; color:var(--text-muted); display:block; }
.sp-srv-row { display:flex; gap:6px; flex-wrap:wrap; }
.sp-srv-btn { flex:1; min-width:70px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--bg-900); border:1px solid var(--bg-700); border-radius:8px; padding:9px 6px; cursor:pointer; font-size:10px; color:var(--text-muted); transition:all .15s; font-weight:600; }
.sp-srv-btn:hover,.sp-srv-btn.active { border-color:var(--accent); color:var(--accent); }
.sp-srv-btn.active { background:rgba(var(--accent-rgb),.1); }
.sp-srv-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.sp-btn-primary { flex:1; background:var(--accent); color:var(--bg-900); border:none; border-radius:7px; padding:9px; font-size:12px; font-weight:700; cursor:pointer; transition:all .2s; }
.sp-btn-primary:hover { opacity:.9; }
.sp-btn-secondary { background:var(--bg-900); color:var(--text-muted); border:1px solid var(--bg-700); border-radius:7px; padding:9px 14px; font-size:12px; cursor:pointer; transition:all .2s; }
.sp-btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.sp-btn-danger { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); border-radius:7px; padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; transition:all .2s; }
@media (max-width:480px) { .sp-drawer { width:100vw; right:-100vw; } }