/* ═══════════════════════════════════════════════════════════════════════════ TEMA SİSTEMİ — 3 tema × Açık/Koyu (Ayarlar → Site Kimliği'nden seçilir) Tüm bileşenler style.css'teki CSS değişkenlerini kullandığı için temalar yalnızca değişken ezmeleriyle çalışır; ek olarak açık modda birkaç sabit koyu arka plan (nav, dropdown, mobil menü) elle düzeltilir. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Marka ikonu: emoji + kutusuz (sade) stil ── */ .brand-mark .brand-emoji { font-size: 24px; line-height: 1; } .admin-brand .brand-mark .brand-emoji { font-size: 20px; } .brand-mark-bare { background: none !important; box-shadow: none !important; border-radius: 0; width: auto; height: auto; color: var(--text); } .brand-mark-bare .brand-emoji { font-size: 30px; } .brand-mark-bare svg { width: 32px; height: 32px; color: var(--primary); } /* ═══════════════ TEMA 1 · CYBER (Neon Gece) — AÇIK MOD ═══════════════ Koyu hâli style.css'teki :root varsayılanıdır. */ html[data-theme="cyber"][data-mode="light"] { --bg-0: #f4f4fb; --bg-1: #ffffff; --bg-2: #eef0fb; --bg-3: #e3e6f8; --surface: rgba(20, 20, 60, 0.045); --surface-strong: rgba(20, 20, 60, 0.08); --border: rgba(20, 20, 60, 0.12); --border-strong: rgba(20, 20, 60, 0.2); --text: #191932; --text-2: #3d3f66; --text-3: #6c6e94; --text-dim: #9a9cc0; --primary: #7c5cf0; --primary-2: #6d3ef0; --accent: #0891b2; --accent-2: #0e7490; --lime: #65a30d; --pink: #db2777; --gold: #b45309; --grad-primary: linear-gradient(135deg, #8b6cf5 0%, #7c3aed 50%, #06b6d4 100%); --grad-warm: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%); --grad-cyber: linear-gradient(135deg, #65a30d 0%, #0891b2 50%, #7c3aed 100%); --shadow-sm: 0 2px 8px rgba(35, 35, 80, 0.08); --shadow: 0 10px 40px rgba(35, 35, 80, 0.12); --shadow-lg: 0 24px 60px rgba(35, 35, 80, 0.16); --glow-primary: 0 0 30px rgba(124, 92, 240, 0.25); --glow-accent: 0 0 30px rgba(8, 145, 178, 0.2); } /* ═══════════════ TEMA 2 · ROYAL (Bordo & Altın) — KOYU ═══════════════ */ html[data-theme="royal"] { --bg-0: #120810; --bg-1: #1b0d17; --bg-2: #241220; --bg-3: #2e1729; --surface: rgba(255, 220, 235, 0.045); --surface-strong: rgba(255, 220, 235, 0.08); --border: rgba(255, 220, 235, 0.09); --border-strong: rgba(255, 220, 235, 0.16); --text: #faf2f6; --text-2: #dcc4d2; --text-3: #a9899c; --text-dim: #77596b; --primary: #e0a94e; --primary-2: #c98f2e; --accent: #f0719a; --accent-2: #d94f7e; --lime: #e8c766; --pink: #f472b6; --gold: #e0a94e; --grad-primary: linear-gradient(135deg, #e0a94e 0%, #c2452f 55%, #8e1d3f 100%); --grad-warm: linear-gradient(135deg, #e0a94e 0%, #f0719a 50%, #8e1d3f 100%); --grad-cyber: linear-gradient(135deg, #e8c766 0%, #f0719a 55%, #b03060 100%); --glow-primary: 0 0 40px rgba(224, 169, 78, 0.35); --glow-accent: 0 0 40px rgba(240, 113, 154, 0.3); } /* Royal arka plan ışıltıları: mor/camgöbeği yerine şarap + altın */ html[data-theme="royal"] .bg-glow span:nth-child(1) { background: #7f1d3f; } html[data-theme="royal"] .bg-glow span:nth-child(2) { background: #92610e; } html[data-theme="royal"] .bg-glow span:nth-child(3) { background: #b03060; } /* ─── ROYAL — AÇIK (şampanya & bordo) ─── */ html[data-theme="royal"][data-mode="light"] { --bg-0: #faf5ef; --bg-1: #fffdf9; --bg-2: #f5ebe0; --bg-3: #efe0d0; --surface: rgba(90, 30, 55, 0.05); --surface-strong: rgba(90, 30, 55, 0.09); --border: rgba(90, 30, 55, 0.13); --border-strong: rgba(90, 30, 55, 0.22); --text: #33121f; --text-2: #5e3347; --text-3: #8c5f72; --text-dim: #b3919f; --primary: #8e1d3f; --primary-2: #6e1030; --accent: #a16207; --accent-2: #854d0e; --lime: #7c650a; --pink: #be185d; --gold: #a16207; --grad-primary: linear-gradient(135deg, #b03060 0%, #8e1d3f 55%, #a16207 100%); --grad-warm: linear-gradient(135deg, #d69a2d 0%, #be185d 50%, #8e1d3f 100%); --grad-cyber: linear-gradient(135deg, #a16207 0%, #be185d 55%, #6e1030 100%); --shadow-sm: 0 2px 8px rgba(90, 30, 55, 0.08); --shadow: 0 10px 40px rgba(90, 30, 55, 0.12); --shadow-lg: 0 24px 60px rgba(90, 30, 55, 0.16); --glow-primary: 0 0 30px rgba(142, 29, 63, 0.22); --glow-accent: 0 0 30px rgba(161, 98, 7, 0.2); } /* ═══════════════ TEMA 3 · OCEAN (Okyanus & Zümrüt) — KOYU ═══════════════ */ html[data-theme="ocean"] { --bg-0: #04121a; --bg-1: #071b26; --bg-2: #0a2431; --bg-3: #0e2f3f; --surface: rgba(190, 245, 255, 0.045); --surface-strong: rgba(190, 245, 255, 0.08); --border: rgba(190, 245, 255, 0.09); --border-strong: rgba(190, 245, 255, 0.16); --text: #eefaf7; --text-2: #b9dcd6; --text-3: #7fa8a5; --text-dim: #547876; --primary: #34d399; --primary-2: #10b981; --accent: #38bdf8; --accent-2: #0ea5e9; --lime: #a3e635; --pink: #22d3ee; --gold: #fbbf24; --grad-primary: linear-gradient(135deg, #34d399 0%, #0ea5e9 55%, #0369a1 100%); --grad-warm: linear-gradient(135deg, #fbbf24 0%, #34d399 50%, #0ea5e9 100%); --grad-cyber: linear-gradient(135deg, #a3e635 0%, #34d399 50%, #38bdf8 100%); --glow-primary: 0 0 40px rgba(52, 211, 153, 0.35); --glow-accent: 0 0 40px rgba(56, 189, 248, 0.3); } html[data-theme="ocean"] .bg-glow span:nth-child(1) { background: #065f46; } html[data-theme="ocean"] .bg-glow span:nth-child(2) { background: #075985; } html[data-theme="ocean"] .bg-glow span:nth-child(3) { background: #155e75; } /* ─── OCEAN — AÇIK (deniz köpüğü) ─── */ html[data-theme="ocean"][data-mode="light"] { --bg-0: #f0f9f7; --bg-1: #ffffff; --bg-2: #e2f2ee; --bg-3: #d3eae5; --surface: rgba(6, 78, 74, 0.05); --surface-strong: rgba(6, 78, 74, 0.09); --border: rgba(6, 78, 74, 0.13); --border-strong: rgba(6, 78, 74, 0.22); --text: #0c2b28; --text-2: #2c534e; --text-3: #587d78; --text-dim: #8aa8a4; --primary: #047857; --primary-2: #065f46; --accent: #0369a1; --accent-2: #075985; --lime: #4d7c0f; --pink: #0e7490; --gold: #b45309; --grad-primary: linear-gradient(135deg, #059669 0%, #0284c7 55%, #075985 100%); --grad-warm: linear-gradient(135deg, #d97706 0%, #059669 50%, #0284c7 100%); --grad-cyber: linear-gradient(135deg, #4d7c0f 0%, #059669 50%, #0369a1 100%); --shadow-sm: 0 2px 8px rgba(6, 78, 74, 0.08); --shadow: 0 10px 40px rgba(6, 78, 74, 0.12); --shadow-lg: 0 24px 60px rgba(6, 78, 74, 0.16); --glow-primary: 0 0 30px rgba(4, 120, 87, 0.22); --glow-accent: 0 0 30px rgba(3, 105, 161, 0.2); } /* ═══════════════ AÇIK MOD — sabit koyu arka plan düzeltmeleri ═══════════════ style.css'te değişkene bağlı olmayan birkaç koyu yüzey; tüm temaların açık modunda okunabilir hâle getirilir. */ html[data-mode="light"] .site-nav { background: rgba(255, 255, 255, 0.82); } html[data-mode="light"] .dropdown-panel { background: rgba(255, 255, 255, 0.97); } html[data-mode="light"] .bg-glow { opacity: .5; } html[data-mode="light"] .bg-glow span { opacity: .18; } html[data-mode="light"] .brand-mark { color: #ffffff; } html[data-mode="light"] .stats-map { background: var(--bg-2); } @media (max-width: 900px) { html[data-mode="light"] .nav-links { background: rgba(255, 255, 255, 0.97); } } /* Alt-degrade örtüler: açık modda beyaza doğru */ html[data-mode="light"] .photo-cell-caption { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.92)); } html[data-mode="light"] .site-footer { background: linear-gradient(180deg, transparent, rgba(220,222,240,0.5)); } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ YAPISAL TEMA KATMANI — her tema kendi düzeni/karakteriyle gelir ║ ║ cyber = Neon Gece (mevcut serbest düzen — taban) ║ ║ royal = Klasik Butik (altın şeritli bar, büyük harf menü, köşeli) ║ ║ ocean = Modern Cam (yüzen hap navbar, pill menü, tam yuvarlak) ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════ ROYAL — KLASİK BUTİK DÜZENİ ═══════════════ */ html[data-theme="royal"] { /* Köşeli, klasik geometri — tüm kart/buton/panel radius'ları otomatik daralır */ --radius-sm: 4px; --radius: 8px; --radius-lg: 10px; --radius-xl: 14px; } /* Navbar: cam yerine dolgun kadife bar + üstte altın şerit, altta ince altın çizgi */ html[data-theme="royal"] .site-nav { background: linear-gradient(180deg, rgba(31, 12, 24, .97), rgba(22, 9, 18, .94)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(224, 169, 78, .35); } html[data-theme="royal"] .site-nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #e0a94e 18%, #f4d47c 50%, #e0a94e 82%, transparent); } html[data-theme="royal"][data-mode="light"] .site-nav { background: linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(248, 240, 229, .95)); } /* Menü: büyük harf + harf aralığı + kayan altın alt-çizgi (arka plan dolgusu yok) */ html[data-theme="royal"] .nav-link { position: relative; text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 600; border-radius: 0; padding: 10px 12px; } html[data-theme="royal"] .nav-link:hover { background: transparent; color: var(--primary); } html[data-theme="royal"] .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: linear-gradient(90deg, #e0a94e, #f4d47c); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } html[data-theme="royal"] .nav-link:hover::after { transform: scaleX(1); } /* Marka: altın çerçeveli mühür */ html[data-theme="royal"] .brand-mark { border-radius: 6px; box-shadow: 0 0 0 1px rgba(244, 212, 124, .55), 0 0 24px rgba(224, 169, 78, .35); } /* Öner butonu: köşeli altın davet */ html[data-theme="royal"] .nav-suggest-btn { --ns1: #e0a94e; --ns2: #b03060; border-radius: 6px; text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; box-shadow: 0 0 0 1px rgba(244,212,124,.4) inset, 0 6px 18px rgba(224,169,78,.35); } /* Mega menü: tam köşeli, üstte kalın altın bar, sütunlu vitrin */ html[data-theme="royal"] .dropdown-panel { border-radius: 0 0 12px 12px; border-top: 3px solid #e0a94e; background: rgba(26, 11, 21, .98); width: min(760px, 94vw); } html[data-theme="royal"][data-mode="light"] .dropdown-panel { background: rgba(255, 252, 246, .99); } html[data-theme="royal"] .dropdown-all { text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; border-bottom: 1px dashed rgba(224,169,78,.35); padding-bottom: 10px; margin-bottom: 10px; } /* Bölüm başlıkları: altındaki kısa altın cetvel çizgisiyle */ html[data-theme="royal"] .section-title { letter-spacing: .01em; } html[data-theme="royal"] .section-title::after { content: ""; display: block; width: 54px; height: 3px; margin-top: 10px; background: linear-gradient(90deg, #e0a94e, transparent); } /* Kartlar/paneller: altın tonlu çerçeve + iç kenar teli (çift çizgi hissi) */ html[data-theme="royal"] .panel, html[data-theme="royal"] .bp-card, html[data-theme="royal"] .set-card { border-color: rgba(224, 169, 78, .22); box-shadow: inset 0 0 0 1px rgba(224, 169, 78, .07), var(--shadow-sm); } /* Butonlar: köşeli, zarif */ html[data-theme="royal"] .btn { border-radius: 6px; letter-spacing: .02em; } html[data-theme="royal"] .btn-lg { border-radius: 8px; } /* Footer: çift çizgili klasik kapanış */ html[data-theme="royal"] .site-footer { border-top: 3px double rgba(224, 169, 78, .5); } /* ═══════════════ OCEAN — MODERN CAM / PİLL DÜZENİ ═══════════════ */ html[data-theme="ocean"] { /* Yumuşak, geniş yuvarlaklar — tüm bileşen geometrisi otomatik yumuşar */ --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --radius-xl: 34px; /* Yüzen bar: 14px boşluk + 72px kapsül = içerik 86px'ten başlar */ --nav-h: 86px; } /* Navbar: sayfadan AYRIK, yüzen cam kapsül */ html[data-theme="ocean"] .site-nav { inset: 14px 18px auto 18px; height: 72px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(7, 27, 38, .58); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(190, 245, 255, .08); } html[data-theme="ocean"] .nav-inner { padding: 0 22px; } html[data-theme="ocean"][data-mode="light"] .site-nav { background: rgba(255, 255, 255, .72); box-shadow: 0 12px 40px -14px rgba(6, 78, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .8); } /* Menü: hap (pill) butonlar — hover'da zümrüt dolgu */ html[data-theme="ocean"] .nav-link { border-radius: 999px; padding: 9px 16px; font-weight: 600; } html[data-theme="ocean"] .nav-link:hover { background: linear-gradient(135deg, rgba(52, 211, 153, .18), rgba(56, 189, 248, .18)); color: var(--text); } html[data-theme="ocean"] .nav-suggest-btn { --ns1: #34d399; --ns2: #38bdf8; border-radius: 999px; } /* Marka: tam yuvarlak damla */ html[data-theme="ocean"] .brand-mark { border-radius: 50%; } /* Açılır menü: kapsülün altında cam kart */ html[data-theme="ocean"] .dropdown-panel { border-radius: 26px; background: rgba(7, 27, 38, .92); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-strong); } html[data-theme="ocean"][data-mode="light"] .dropdown-panel { background: rgba(255, 255, 255, .95); } html[data-theme="ocean"] .dropdown-item { border-radius: 16px; } html[data-theme="ocean"] .dropdown-all { border-radius: 999px; } /* Bölüm başlıkları: altında yuvarlak degrade dalga çubuğu */ html[data-theme="ocean"] .section-title::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 10px; border-radius: 999px; background: linear-gradient(90deg, #34d399, #38bdf8); } /* Tüm butonlar hap */ html[data-theme="ocean"] .btn, html[data-theme="ocean"] .btn-sm, html[data-theme="ocean"] .btn-lg { border-radius: 999px; } /* Kartlar: havada süzülen cam — hover'da daha belirgin yükselme */ html[data-theme="ocean"] .bp-card, html[data-theme="ocean"] .panel { border-color: var(--border); box-shadow: 0 8px 30px -14px rgba(0, 0, 0, .45); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } html[data-theme="ocean"] .bp-card:hover { transform: translateY(-6px); border-color: rgba(52, 211, 153, .45); box-shadow: 0 24px 50px -18px rgba(14, 165, 233, .35); } html[data-theme="ocean"][data-mode="light"] .bp-card, html[data-theme="ocean"][data-mode="light"] .panel { box-shadow: 0 8px 30px -16px rgba(6, 78, 74, .25); } /* Kaydırma durumu (.scrolled): style.css'teki sabit koyu arka planı tema bazında ez */ html[data-theme="royal"] .site-nav.scrolled { background: linear-gradient(180deg, rgba(31, 12, 24, .99), rgba(22, 9, 18, .97)); border-bottom-color: rgba(224, 169, 78, .5); } html[data-theme="royal"][data-mode="light"] .site-nav.scrolled { background: linear-gradient(180deg, rgba(255, 253, 249, .99), rgba(248, 240, 229, .98)); } html[data-theme="ocean"] .site-nav.scrolled { background: rgba(7, 27, 38, .82); border-color: var(--border-strong); } html[data-theme="ocean"][data-mode="light"] .site-nav.scrolled { background: rgba(255, 255, 255, .88); } html[data-mode="light"] .site-nav.scrolled { background: rgba(255, 255, 255, .92); } /* Mobil: yüzen kapsülün altında açılan menü kapsül köşeli olsun */ @media (max-width: 900px) { html[data-theme="ocean"] { --nav-h: 78px; } html[data-theme="ocean"] .site-nav { inset: 10px 12px auto 12px; height: 64px; } html[data-theme="ocean"] .nav-links { border-radius: 0 0 26px 26px; } html[data-theme="royal"] .nav-link::after { display: none; } /* dikey listede alt çizgi gereksiz */ }