/* ============================================================ VAKARYON — TEMA SİSTEMİ (4 tema) Kullanım: Bu dosya en SON yüklenmelidir (portal.css, pages.css, social.css ve farm.css'ten sonra). Not: "gece" temasındaki tüm değerler eskiden sabit yazılan renklerle birebir aynıdır -> mevcut görünüm değişmez. ============================================================ */ /* ---------- VARSAYILAN (GECE) ---------- */ :root { /* yüzeyler */ --p-surface-deep: #0c1322; --p-menu-1: #111a2b; --p-menu-2: #0b1120; --p-card: rgba(4, 8, 16, .35); --p-card-2: rgba(4, 8, 16, .4); --p-card-3: rgba(4, 8, 16, .45); --p-input: rgba(4, 8, 16, .55); --p-input-2: rgba(4, 8, 16, .6); --p-overlay: rgba(4, 8, 16, .74); --p-nav-bg: rgba(8, 12, 20, .8); --p-hair: rgba(255, 255, 255, .1); --p-hair-2: rgba(255, 255, 255, .12); --p-star: rgba(255, 255, 255, .85); /* metinler */ --p-text-2: #e2eaf7; --p-text-soft: #cbd5e1; --p-text-strong: #fff; /* aksan metinleri */ --p-green-text: #86efac; --p-green-text-2: #4ade80; --p-warn-text: #fbbf24; --p-red-text: #fca5a5; --p-red-text-2: #fecaca; --p-sky-text: #7dd3fc; --p-purple-text: #c084fc; --p-purple-text-2: #d8b4fe; --p-active-text: #86efac; /* arka plan ışımaları */ --p-glow-a: rgba(34, 197, 94, .12); --p-glow-b: rgba(56, 189, 248, .12); /* kaydırma çubuğu */ --p-scroll-thumb: rgba(148, 163, 184, .42); --p-scroll-track: rgba(4, 8, 16, .38); --p-scroll-hover: #22c55e; } /* Sayfa arka planı (ışımalar temaya göre) */ body { background: radial-gradient(1200px 640px at 12% -10%, var(--p-glow-a), transparent 60%), radial-gradient(1000px 560px at 100% 0%, var(--p-glow-b), transparent 55%), var(--p-bg); } /* ============================================================ 1) GECE (varsayılan) ============================================================ */ html[data-theme="gece"] { --p-bg: #080c14; --p-surface: #101827; --p-surface-2: #16203a; --p-border: rgba(148, 163, 184, .14); --p-text: #e8eefc; --p-muted: #93a4c0; --p-muted-2: #64748b; --p-accent: #22c55e; --p-sky: #38bdf8; } /* ============================================================ 2) OKYANUS (derin mavi & turkuaz) ============================================================ */ html[data-theme="okyanus"] { --p-bg: #041019; --p-surface: #08202e; --p-surface-2: #0b2937; --p-surface-deep: #061a26; --p-border: rgba(125, 211, 252, .16); --p-text: #e6f6ff; --p-muted: #8bb4c6; --p-muted-2: #5e8296; --p-accent: #06b6d4; --p-sky: #22d3ee; --p-warn: #fbbf24; --p-purple: #2dd4bf; --p-card: rgba(4, 18, 27, .42); --p-card-2: rgba(4, 18, 27, .48); --p-card-3: rgba(4, 18, 27, .52); --p-input: rgba(4, 18, 27, .55); --p-input-2: rgba(4, 18, 27, .62); --p-menu-1: #0a2331; --p-menu-2: #061a26; --p-nav-bg: rgba(4, 16, 25, .82); --p-text-2: #d3ecf7; --p-text-soft: #b9d8e6; --p-text-strong: #fff; --p-active-text: #67e8f9; --p-sky-text: #7dd3fc; --p-green-text-2: #34d399; --p-glow-a: rgba(6, 182, 212, .16); --p-glow-b: rgba(45, 212, 191, .12); --p-scroll-thumb: rgba(125, 211, 252, .42); --p-scroll-track: rgba(4, 18, 27, .45); --p-scroll-hover: #06b6d4; } /* ============================================================ 3) NEON (mor & pembe) ============================================================ */ html[data-theme="neon"] { --p-bg: #0b0614; --p-surface: #180e28; --p-surface-2: #221238; --p-surface-deep: #12091f; --p-border: rgba(216, 180, 254, .16); --p-text: #f3e9ff; --p-muted: #a78bc4; --p-muted-2: #7a6690; --p-accent: #a855f7; --p-sky: #ec4899; --p-purple: #d946ef; --p-card: rgba(11, 6, 20, .42); --p-card-2: rgba(11, 6, 20, .48); --p-card-3: rgba(11, 6, 20, .52); --p-input: rgba(11, 6, 20, .55); --p-input-2: rgba(11, 6, 20, .62); --p-menu-1: #1e1030; --p-menu-2: #140a22; --p-nav-bg: rgba(11, 6, 20, .84); --p-text-2: #e9dcff; --p-text-soft: #d6c7ea; --p-text-strong: #fff; --p-active-text: #d8b4fe; --p-sky-text: #f9a8d4; --p-glow-a: rgba(168, 85, 247, .18); --p-glow-b: rgba(236, 72, 153, .14); --p-scroll-thumb: rgba(216, 180, 254, .42); --p-scroll-track: rgba(11, 6, 20, .45); --p-scroll-hover: #a855f7; } /* ============================================================ 4) GÜNDÜZ (açık / light tema) ============================================================ */ html[data-theme="gunduz"] { --p-bg: #eef2f7; --p-surface: #ffffff; --p-surface-2: #eaf0f8; --p-surface-deep: #e3eaf5; --p-border: rgba(15, 23, 42, .12); --p-text: #0f172a; --p-muted: #556580; --p-muted-2: #6b7a92; --p-accent: #16a34a; --p-sky: #0284c7; --p-warn: #b45309; --p-purple: #7c3aed; --p-card: rgba(15, 23, 42, .035); --p-card-2: rgba(15, 23, 42, .05); --p-card-3: rgba(15, 23, 42, .06); --p-input: #ffffff; --p-input-2: rgba(15, 23, 42, .05); --p-overlay: rgba(15, 23, 42, .45); --p-nav-bg: rgba(255, 255, 255, .88); --p-menu-1: #ffffff; --p-menu-2: #f2f6fc; --p-hair: rgba(15, 23, 42, .1); --p-hair-2: rgba(15, 23, 42, .12); --p-star: rgba(15, 23, 42, .22); --p-text-2: #334155; --p-text-soft: #475569; --p-text-strong: #0f172a; --p-green-text: #15803d; --p-green-text-2: #16a34a; --p-warn-text: #b45309; --p-red-text: #b91c1c; --p-red-text-2: #991b1b; --p-sky-text: #0369a1; --p-purple-text: #7c3aed; --p-purple-text-2: #6d28d9; --p-active-text: #15803d; --p-glow-a: rgba(34, 197, 94, .1); --p-glow-b: rgba(56, 189, 248, .1); --p-scroll-thumb: rgba(15, 23, 42, .26); --p-scroll-track: rgba(15, 23, 42, .06); --p-scroll-hover: #16a34a; } /* Açık temada gölgeler yumuşasın */ html[data-theme="gunduz"] .d-action:hover, html[data-theme="gunduz"] .p-game:hover { box-shadow: 0 18px 36px rgba(15, 23, 42, .14); } html[data-theme="gunduz"] .auth-card { box-shadow: 0 20px 50px rgba(15, 23, 42, .12); } html[data-theme="gunduz"] .nav-drop { box-shadow: 0 20px 44px rgba(15, 23, 42, .18); } html[data-theme="gunduz"] .fm-box { box-shadow: 0 24px 60px rgba(15, 23, 42, .18); } html[data-theme="gunduz"] .depo-basket { box-shadow: 0 12px 30px rgba(15, 23, 42, .12); } /* Açık temada gökyüzü aydınlanır (çiftlik) */ html[data-theme="gunduz"] .sky { background: linear-gradient(180deg, #dceafe, #eaf3ff); box-shadow: inset 0 -20px 40px rgba(15, 23, 42, .06); } html[data-theme="gunduz"] .sky.w-sunny { background: linear-gradient(180deg, #cfe6ff 0%, #e6f2ff 55%, #fdf6e3 100%); } html[data-theme="gunduz"] .sky.w-cloudy { background: linear-gradient(180deg, #dfe7f1, #eef3f9); } html[data-theme="gunduz"] .sky.w-rain { background: linear-gradient(180deg, #c6d4e4, #dde7f2); } html[data-theme="gunduz"] .sky.w-storm { background: linear-gradient(180deg, #9fb0c6, #c3cfdd); } html[data-theme="gunduz"] .sky.w-snow { background: linear-gradient(180deg, #eaf1fa, #f7fbff); } html[data-theme="gunduz"] .sky-chip, html[data-theme="gunduz"] .sky-sub { color: #334155; } /* Açık temada tarla toprağı biraz aydınlanır */ html[data-theme="gunduz"] .plot { background: radial-gradient(120% 90% at 50% 130%, rgba(146, 104, 54, .35), rgba(120, 96, 62, .22)), #cbb894; } /* ============================================================ TEMA SEÇİCİ (menü içi seçenekler + profil kartları) ============================================================ */ .theme-menu-label { padding: 9px 11px 4px; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--p-muted-2); } .nd-theme { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px; color: var(--p-text-soft); text-decoration: none; font-size: 13px; font-weight: 600; transition: .15s; cursor: pointer; } .nd-theme:hover { background: rgba(148, 163, 184, .13); color: var(--p-text-strong); } .nd-theme .tt-name { flex: 1; } .nd-theme .tt-check { font-size: 13px; color: var(--p-active-text); opacity: 0; } .nd-theme.on { background: rgba(148, 163, 184, .1); } .nd-theme.on .tt-check { opacity: 1; } /* renk örneği */ .theme-sw { width: 30px; height: 18px; flex: 0 0 30px; border-radius: 6px; border: 1px solid rgba(148, 163, 184, .3); display: flex; overflow: hidden; } .theme-sw i { flex: 1; } /* profil sayfası: büyük tema kartları */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .theme-card { position: relative; text-align: left; cursor: pointer; font-family: inherit; padding: 13px; border-radius: 14px; background: linear-gradient(180deg, var(--p-surface) 0%, var(--p-surface-deep) 100%); border: 1px solid var(--p-border); color: var(--p-text); transition: .18s; } .theme-card:hover { transform: translateY(-3px); border-color: rgba(34, 197, 94, .4); } .theme-card.on { border-color: var(--p-active-text); box-shadow: 0 0 0 2px rgba(34, 197, 94, .25); } .theme-card .tc-prev { height: 54px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: flex-end; gap: 5px; padding: 7px; } .theme-card .tc-prev span { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .5); } .theme-card .tc-n { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; } .theme-card .tc-d { font-size: 11px; color: var(--p-muted); margin-top: 2px; } .theme-card .tc-on { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: rgba(34, 197, 94, .16); color: var(--p-active-text); border: 1px solid rgba(34, 197, 94, .35); opacity: 0; } .theme-card.on .tc-on { opacity: 1; }