:root {
    /* Varsayılan: Dark (Koyu) Tema */
    --bg: #0f172a;
    --card: #1e293b;
    --text: var(--custom-font-color, #90ee90);
    --muted: #4ade80;
    --primary: #22c55e;
    --primary-hover: #4f46e5;
    --border: #334155;
    --accent: #f43f5e;
    --success: #22c55e;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --font-size: var(--custom-font-size, 16px);
}

[data-theme="light"] {
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --border: #e2e8f0;
    --accent: #ef4444;
}

[data-theme="blue"] { --bg: #0c4a6e; --card: #075985; --text: #f0f9ff; --muted: #bae6fd; --primary: #38bdf8; --primary-hover: #0ea5e9; --border: #0369a1; }
[data-theme="purple"] { --bg: #4c1d95; --card: #5b21b6; --text: #f5f3ff; --muted: #ddd6fe; --primary: #a78bfa; --primary-hover: #8b5cf6; --border: #6d28d9; }
[data-theme="green"] { --bg: #064e3b; --card: #065f46; --text: #ecfdf5; --muted: #a7f3d0; --primary: #34d399; --primary-hover: #10b981; --border: #047857; }
[data-theme="orange"] { --bg: #7c2d12; --card: #9a3412; --text: #fff7ed; --muted: #fed7aa; --primary: #fb923c; --primary-hover: #f97316; --border: #c2410c; }
[data-theme="midnight"] { --bg: #000000; --card: #111111; --text: #90ee90; --muted: #4ade80; --primary: #22c55e; --primary-hover: #16a34a; --border: #333333; }
[data-theme="forest"] { --bg: #14532d; --card: #166534; --text: #f0fdf4; --muted: #bbf7d0; --primary: #4ade80; --primary-hover: #22c55e; --border: #15803d; }
[data-theme="ocean"] { --bg: #1e3a8a; --card: #1e40af; --text: #eff6ff; --muted: #bfdbfe; --primary: #60a5fa; --primary-hover: #3b82f6; --border: #1d4ed8; }
[data-theme="sunset"] { --bg: #450a0a; --card: #7f1d1d; --text: #fef2f2; --muted: #fecaca; --primary: #f87171; --primary-hover: #ef4444; --border: #991b1b; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; transition: background-color 0.3s, border-color 0.3s; }
body { background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; font-size: var(--font-size); }

.container { max-width: 1200px; margin: 0 auto; padding: 20px; width: 100%; }

header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 40px; padding: 25px; background: var(--card); 
    border-radius: 20px; border: 1px solid var(--border); 
    box-shadow: var(--shadow); flex-wrap: wrap; gap: 20px;
}

.logo h1 { 
    font-size: 28px; font-weight: 800; 
    background: linear-gradient(135deg, var(--primary), var(--accent)); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
    letter-spacing: -1px;
}

.controls-bar {
    display: flex; gap: 15px; flex-wrap: wrap; align-items: center;
    background: var(--card); padding: 15px 25px; border-radius: 15px;
    border: 1px solid var(--border); margin-bottom: 30px; box-shadow: var(--shadow);
}

select, input { 
    padding: 10px 15px; border-radius: 10px; background: var(--bg); 
    color: var(--text); border: 1px solid var(--border); outline: none;
    font-size: 14px; font-weight: 500;
}

.search-box { width: 100%; margin-bottom: 30px; }
.search-box input { 
    width: 100%; padding: 18px 30px; border-radius: 50px; 
    border: 2px solid var(--border); background: var(--card); 
    color: var(--text); font-size: 18px; box-shadow: var(--shadow-lg);
}
.search-box input:focus { border-color: var(--primary); }

.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
.site-card { 
    background: var(--card); padding: 25px; border-radius: 20px; 
    border: 1px solid var(--border); display: flex; flex-direction: column; 
    justify-content: space-between; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow); position: relative;
}
.site-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }

.site-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.site-info p { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.site-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.btn { 
    padding: 12px 20px; border-radius: 12px; border: none; cursor: pointer; 
    font-weight: 700; font-size: 14px; transition: all 0.2s; 
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); transform: scale(1.02); }
.btn-vote { background: var(--success); color: white; }
.btn-malicious { background: var(--accent); color: white; }
.btn-small { padding: 8px 15px; font-size: 12px; }

.floating-menu { position: fixed; right: 25px; bottom: 25px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.floating-btn { 
    width: 55px; height: 55px; border-radius: 50%; background: var(--primary); 
    color: white; display: flex; align-items: center; justify-content: center; 
    box-shadow: var(--shadow-lg); cursor: pointer; border: none; font-size: 20px;
}

.ad-card { 
    grid-column: 1 / -1; background: linear-gradient(135deg, var(--card), var(--bg));
    border: 2px dashed var(--primary); border-radius: 20px; padding: 30px;
    text-align: center; display: flex; align-items: center; justify-content: center;
    min-height: 120px; color: var(--muted); font-weight: 600;
}

@media (max-width: 768px) {
    header { flex-direction: column; text-align: center; padding: 20px; }
    .site-grid { grid-template-columns: 1fr; }
    .controls-bar { justify-content: center; }
}