diff options
Diffstat (limited to 'downloads/gunes-uygarligi.html')
| -rw-r--r-- | downloads/gunes-uygarligi.html | 1379 |
1 files changed, 1379 insertions, 0 deletions
diff --git a/downloads/gunes-uygarligi.html b/downloads/gunes-uygarligi.html new file mode 100644 index 0000000..ce12a3d --- /dev/null +++ b/downloads/gunes-uygarligi.html @@ -0,0 +1,1379 @@ +<!DOCTYPE html> +<html lang="tr"> +<head> +<meta charset="UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title>Güneş Uygarlığı Hareketi — newOS Entegre Manifestosu</title> +<meta name="description" content="Güneş Uygarlığı: Sürdürülebilir, adil, güneş enerjisi temelli yeni bir yaşam. newOS tasarım sistemi ve ajan mimarisiyle bütünleşik tek-sayfa manifesto."> +<meta name="theme-color" content="#FFD700"> +<meta name="color-scheme" content="dark"> + +<!-- Open Graph --> +<meta property="og:title" content="Güneş Uygarlığı Hareketi"> +<meta property="og:description" content="Güneş enerjisi temelli, halktan yana, çevreye saygılı bir gelecek inşası için manifesto."> +<meta property="og:type" content="article"> +<meta property="og:locale" content="tr_TR"> +<meta property="og:site_name" content="Güneş Uygarlığı"> + +<!-- Twitter Card --> +<meta name="twitter:card" content="summary_large_image"> +<meta name="twitter:title" content="Güneş Uygarlığı Hareketi"> +<meta name="twitter:description" content="Güneş enerjisi temelli yeni bir yaşam manifestosu."> + +<!-- PWA Manifest (commented - gerçek projede app.manifest olarak ayrı dosya) --> +<!-- +{ + "name": "Güneş Uygarlığı", + "short_name": "GüneşUygarlığı", + "description": "Güneş enerjisi temelli, sürdürülebilir ve adil bir gelecek manifestosu", + "start_url": "/spaces/gunesuygarligi/", + "display": "standalone", + "background_color": "#0a0a0a", + "theme_color": "#FFD700", + "lang": "tr", + "icons": [ + {"src": "/assets/sun-192.png", "sizes": "192x192", "type": "image/png"}, + {"src": "/assets/sun-512.png", "sizes": "512x512", "type": "image/png"} + ] +} +--> + +<!-- Google Fonts: preconnect + display=swap --> +<link rel="preconnect" href="https://fonts.googleapis.com"> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> +<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> + +<!-- newOS Köprüsü: manifest.json meta (newOS tarayıcıda window.newOS sağlar) --> +<script> +// Standalone fallback: newOS yüklü değilse graceful no-op +window.newOS = window.newOS || { + version: 'standalone-fallback', + ready: true, + bridge: { + readManifest: () => { try { return JSON.parse(localStorage.getItem('newos.user') || '{}'); } catch (e) { return {}; } }, + writeManifest: (data) => { try { localStorage.setItem('newos.user', JSON.stringify(data)); } catch (e) {} }, + theme: () => { try { return localStorage.getItem('newos.theme') || 'dark'; } catch (e) { return 'dark'; } }, + setTheme: (t) => { try { localStorage.setItem('newos.theme', t); document.documentElement.dataset.theme = t; } catch (e) {} }, + events: { emit: (name, data) => console.log('[newOS event]', name, data) }, + on: () => {}, off: () => {}, + agent: { queue: (task) => console.log('[newOS agent]', task) } + } +}; +</script> + +<style> +/* ================================================================ + newOS TASARIM TOKEN'LARI + ================================================================ */ +:root { + /* newOS köprüsü: Bu değişkenler newOS.theme ile senkronize olur */ + --nui-radius: 12px; + --nui-radius-lg: 20px; + --nui-spacing: 1rem; + --nui-font-mono: 'IBM Plex Mono', ui-monospace, monospace; + --nui-shadow: 0 8px 32px rgba(0,0,0,0.4); + + /* Yerel palet — Güneş Uygarlığı temaları */ + --color-bg: #0a0a0a; + --color-bg-soft: #141414; + --color-bg-elev: #1c1c1c; + --color-fg: #f4f4f4; + --color-fg-dim: #b8b8b8; + --color-fg-mute: #888; + --color-gold: #FFD700; + --color-gold-soft: rgba(255, 215, 0, 0.12); + --color-dawn: #FF8C42; + --color-line: rgba(255, 215, 0, 0.18); + --color-line-soft: rgba(255, 255, 255, 0.08); + + /* Tipografi */ + --font-serif: 'Cormorant Garamond', Georgia, serif; + --font-sans: 'Inter', system-ui, -apple-system, sans-serif; + --font-mono: var(--nui-font-mono); + + /* Tipografi ölçeği */ + --fs-xs: 0.78rem; + --fs-sm: 0.9rem; + --fs-base: 1rem; + --fs-lg: 1.18rem; + --fs-xl: 1.5rem; + --fs-2xl: 2rem; + --fs-3xl: 2.75rem; + --fs-4xl: clamp(2.4rem, 5vw, 4.2rem); + + /* Geçişler */ + --ease: cubic-bezier(0.4, 0, 0.2, 1); + --dur: 0.28s; +} + +[data-theme="light"] { + --color-bg: #fafaf7; + --color-bg-soft: #f0efe8; + --color-bg-elev: #ffffff; + --color-fg: #1a1a1a; + --color-fg-dim: #4a4a4a; + --color-fg-mute: #777; + --color-line: rgba(255, 143, 0, 0.22); + --color-line-soft: rgba(0, 0, 0, 0.08); +} + +/* ================================================================ + RESET & TEMEL + ================================================================ */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } +body { + font-family: var(--font-sans); + font-size: var(--fs-base); + line-height: 1.65; + color: var(--color-fg); + background: var(--color-bg); + background-image: + radial-gradient(ellipse at top, rgba(255, 140, 66, 0.06) 0%, transparent 50%), + radial-gradient(ellipse at bottom right, rgba(255, 215, 0, 0.04) 0%, transparent 60%); + background-attachment: fixed; + overflow-x: hidden; +} +img, svg { max-width: 100%; display: block; } +a { color: var(--color-gold); text-decoration: none; transition: color var(--dur) var(--ease); } +a:hover { color: var(--color-dawn); } +a:focus-visible, button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; } + +h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; } +h1 { font-size: var(--fs-4xl); font-weight: 700; } +h2 { font-size: var(--fs-3xl); } +h3 { font-size: var(--fs-2xl); } +p { max-width: 68ch; } +.mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.04em; } +.eyebrow { + font-family: var(--font-mono); + font-size: var(--fs-xs); + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--color-gold); + display: inline-block; + margin-bottom: 0.75rem; +} + +/* Erişilebilirlik: skip link */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--color-gold); + color: var(--color-bg); + padding: 0.6rem 1rem; + z-index: 1000; + font-weight: 600; + border-radius: 0 0 var(--nui-radius) 0; +} +.skip-link:focus { top: 0; } + +/* ================================================================ + NAVİGASYON + ================================================================ */ +.topnav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(10, 10, 10, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--color-line-soft); +} +.topnav__inner { + max-width: 1200px; + margin: 0 auto; + padding: 0.9rem 1.25rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} +.brand { + display: flex; + align-items: center; + gap: 0.6rem; + font-family: var(--font-serif); + font-size: var(--fs-lg); + font-weight: 600; + color: var(--color-fg); +} +.brand__sun { + width: 28px; height: 28px; + animation: rotate-slow 18s linear infinite; +} +.nav-links { + display: flex; + gap: 1.5rem; + list-style: none; +} +.nav-links a { + color: var(--color-fg-dim); + font-size: var(--fs-sm); + font-weight: 500; + position: relative; + padding: 0.25rem 0; +} +.nav-links a::after { + content: ''; + position: absolute; + bottom: -2px; left: 0; + width: 0; height: 1px; + background: var(--color-gold); + transition: width var(--dur) var(--ease); +} +.nav-links a:hover { color: var(--color-gold); } +.nav-links a:hover::after { width: 100%; } + +.nav-toggle { + display: none; + background: transparent; + border: 1px solid var(--color-line); + color: var(--color-fg); + padding: 0.4rem 0.7rem; + border-radius: 6px; + cursor: pointer; + font-family: var(--font-mono); + font-size: var(--fs-sm); +} + +@media (max-width: 720px) { + .nav-links { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; gap: 0; background: var(--color-bg-elev); border-bottom: 1px solid var(--color-line-soft); padding: 1rem 1.25rem; } + .nav-links.open { display: flex; } + .nav-links a { padding: 0.6rem 0; border-bottom: 1px solid var(--color-line-soft); } + .nav-links a:last-child { border-bottom: 0; } + .nav-toggle { display: inline-block; } +} + +/* ================================================================ + LAYOUT + ================================================================ */ +.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } +section { padding: 5rem 0; scroll-margin-top: 80px; } +section + section { border-top: 1px solid var(--color-line-soft); } + +/* ================================================================ + HERO + ================================================================ */ +.hero { + min-height: 88vh; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + padding: 4rem 1.25rem 5rem; + position: relative; +} +.hero__sun { + width: clamp(180px, 30vw, 280px); + height: clamp(180px, 30vw, 280px); + margin: 0 auto 2rem; + position: relative; + filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.35)); +} +.hero__sun svg { width: 100%; height: 100%; } +.hero__sun::before { + content: ''; + position: absolute; + inset: -30%; + background: radial-gradient(circle, rgba(255, 215, 0, 0.18) 0%, transparent 60%); + animation: pulse 4s ease-in-out infinite; + z-index: -1; +} +.hero h1 { margin-bottom: 1rem; max-width: 18ch; margin-left: auto; margin-right: auto; } +.hero h1 .accent { color: var(--color-gold); font-style: italic; } +.hero__lede { + font-size: var(--fs-lg); + color: var(--color-fg-dim); + max-width: 56ch; + margin: 0 auto 2.5rem; + line-height: 1.55; +} +.hero__ctas { + display: flex; + gap: 0.8rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 0.85rem 1.6rem; + border-radius: var(--nui-radius); + font-weight: 600; + font-size: var(--fs-base); + font-family: var(--font-sans); + cursor: pointer; + border: 1px solid transparent; + transition: all var(--dur) var(--ease); + text-align: center; +} +.btn--primary { + background: var(--color-gold); + color: var(--color-bg); + box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25); +} +.btn--primary:hover { + background: var(--color-dawn); + color: var(--color-bg); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 140, 66, 0.4); +} +.btn--ghost { + background: transparent; + color: var(--color-fg); + border-color: var(--color-line); +} +.btn--ghost:hover { + border-color: var(--color-gold); + color: var(--color-gold); + background: var(--color-gold-soft); +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 0.6; } + 50% { transform: scale(1.15); opacity: 0.9; } +} +@keyframes rotate-slow { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +/* ================================================================ + PORTAL CARDS + ================================================================ */ +.section-head { + text-align: center; + margin-bottom: 3rem; +} +.section-head h2 { margin-bottom: 0.6rem; } +.section-head p { color: var(--color-fg-dim); margin: 0 auto; } + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.25rem; +} +.card { + background: var(--color-bg-elev); + border: 1px solid var(--color-line-soft); + border-radius: var(--nui-radius-lg); + padding: 1.75rem; + text-decoration: none; + color: var(--color-fg); + display: flex; + flex-direction: column; + gap: 0.75rem; + transition: all var(--dur) var(--ease); + position: relative; + overflow: hidden; +} +.card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--color-gold), transparent); + opacity: 0; + transition: opacity var(--dur) var(--ease); +} +.card:hover { + transform: translateY(-4px); + border-color: var(--color-gold); + background: linear-gradient(180deg, var(--color-bg-elev) 0%, rgba(255, 215, 0, 0.04) 100%); + box-shadow: var(--nui-shadow); +} +.card:hover::before { opacity: 1; } +.card__icon { + width: 48px; height: 48px; + background: var(--color-gold-soft); + border-radius: 12px; + display: flex; align-items: center; justify-content: center; + color: var(--color-gold); + font-size: 1.4rem; + font-family: var(--font-serif); + font-weight: 700; +} +.card h3 { font-size: var(--fs-xl); } +.card p { color: var(--color-fg-dim); font-size: var(--fs-sm); margin: 0; } +.card__arrow { + align-self: flex-end; + color: var(--color-gold); + font-family: var(--font-mono); + font-size: var(--fs-sm); + margin-top: 0.5rem; +} + +/* ================================================================ + MANIFESTO + ================================================================ */ +.manifesto { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; +} +.manifesto__items { + list-style: none; + counter-reset: manifest; + display: flex; + flex-direction: column; + gap: 1rem; +} +.manifesto__items li { + counter-increment: manifest; + background: var(--color-bg-soft); + border-left: 3px solid var(--color-gold); + border-radius: 0 var(--nui-radius) var(--nui-radius) 0; + padding: 1.1rem 1.25rem 1.1rem 3.25rem; + position: relative; +} +.manifesto__items li::before { + content: counter(manifest, decimal-leading-zero); + position: absolute; + left: 1.1rem; + top: 1.15rem; + font-family: var(--font-mono); + color: var(--color-gold); + font-weight: 600; + font-size: var(--fs-sm); +} +.manifesto__items strong { color: var(--color-gold); display: block; margin-bottom: 0.25rem; } + +.pillars { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1rem; + margin-top: 2rem; +} +.pillar { + text-align: center; + padding: 1.25rem 1rem; + background: var(--color-bg-soft); + border-radius: var(--nui-radius); + border: 1px solid var(--color-line-soft); +} +.pillar__num { + font-family: var(--font-mono); + font-size: var(--fs-xs); + color: var(--color-gold); + letter-spacing: 0.12em; + margin-bottom: 0.4rem; +} +.pillar h4 { + font-family: var(--font-serif); + font-size: var(--fs-lg); + color: var(--color-fg); + margin-bottom: 0.3rem; +} +.pillar p { font-size: var(--fs-sm); color: var(--color-fg-dim); margin: 0; } + +/* ================================================================ + ENERJİ VERİLERİ + ================================================================ */ +.energy { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2.5rem; + align-items: start; +} +@media (max-width: 880px) { .energy { grid-template-columns: 1fr; } } + +.stats { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.8rem; + margin-top: 1.5rem; +} +.stat { + background: var(--color-bg-soft); + border: 1px solid var(--color-line-soft); + border-radius: var(--nui-radius); + padding: 1.1rem; +} +.stat__value { + font-family: var(--font-serif); + font-size: var(--fs-2xl); + color: var(--color-gold); + font-weight: 700; + line-height: 1; +} +.stat__label { font-size: var(--fs-sm); color: var(--color-fg-dim); margin-top: 0.3rem; } + +.solution-list { + list-style: none; + margin-top: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.6rem; +} +.solution-list li { + padding-left: 1.5rem; + position: relative; + color: var(--color-fg-dim); +} +.solution-list li::before { + content: '☀'; + position: absolute; + left: 0; + color: var(--color-gold); + font-size: 0.9em; +} + +/* ================================================================ + ARŞİV + ================================================================ */ +.archive-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 1rem; + margin-top: 1.5rem; +} +.archive-item { + background: var(--color-bg-soft); + border: 1px solid var(--color-line-soft); + border-radius: var(--nui-radius); + padding: 1.1rem; + transition: all var(--dur) var(--ease); +} +.archive-item:hover { + border-color: var(--color-gold); + transform: translateY(-2px); +} +.archive-item__type { + font-family: var(--font-mono); + font-size: var(--fs-xs); + color: var(--color-gold); + letter-spacing: 0.1em; + text-transform: uppercase; + margin-bottom: 0.4rem; +} +.archive-item h4 { + font-family: var(--font-serif); + font-size: var(--fs-lg); + color: var(--color-fg); + margin-bottom: 0.3rem; + line-height: 1.25; +} +.archive-item p { font-size: var(--fs-sm); color: var(--color-fg-dim); margin: 0; } + +/* ================================================================ + KATILIM + ================================================================ */ +.steps { + counter-reset: step; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; + max-width: 720px; + margin-left: auto; + margin-right: auto; +} +.step { + counter-increment: step; + background: var(--color-bg-soft); + border: 1px solid var(--color-line-soft); + border-radius: var(--nui-radius); + padding: 1.25rem 1.25rem 1.25rem 4.5rem; + position: relative; +} +.step::before { + content: counter(step); + position: absolute; + left: 1.25rem; + top: 50%; + transform: translateY(-50%); + width: 38px; height: 38px; + background: var(--color-gold); + color: var(--color-bg); + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-family: var(--font-mono); + font-weight: 700; + font-size: var(--fs-base); +} +.step h3 { + font-size: var(--fs-lg); + margin-bottom: 0.3rem; + color: var(--color-gold); +} +.step p { font-size: var(--fs-sm); color: var(--color-fg-dim); margin: 0; } + +/* ================================================================ + HAKKIMIZDA & ROADMAP + ================================================================ */ +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2.5rem; + align-items: start; +} +@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } } + +.roadmap { + list-style: none; + margin-top: 1.5rem; + border-left: 2px solid var(--color-line); + padding-left: 1.25rem; + display: flex; + flex-direction: column; + gap: 1rem; +} +.roadmap li { + position: relative; + padding-left: 0.5rem; +} +.roadmap li::before { + content: ''; + position: absolute; + left: -1.85rem; top: 0.55rem; + width: 12px; height: 12px; + background: var(--color-gold); + border-radius: 50%; + box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 4px var(--color-gold); +} +.roadmap strong { color: var(--color-gold); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.08em; display: block; margin-bottom: 0.2rem; } +.roadmap p { color: var(--color-fg-dim); font-size: var(--fs-sm); margin: 0; } + +/* ================================================================ + İLETİŞİM + ================================================================ */ +.contact { + text-align: center; + background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%); + border-radius: var(--nui-radius-lg); + padding: 3rem 1.5rem; + border: 1px solid var(--color-line-soft); +} +.contact h2 { margin-bottom: 0.6rem; } +.contact p { color: var(--color-fg-dim); margin: 0 auto 1.5rem; } +.contact__email { + display: inline-block; + font-family: var(--font-mono); + color: var(--color-gold); + font-size: var(--fs-lg); + margin-bottom: 1.5rem; +} +.socials { + display: flex; + gap: 0.8rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 1rem; +} +.social { + background: var(--color-bg-elev); + border: 1px solid var(--color-line); + border-radius: 50px; + padding: 0.5rem 1.1rem; + font-size: var(--fs-sm); + font-family: var(--font-mono); + color: var(--color-fg); +} +.social:hover { background: var(--color-gold-soft); border-color: var(--color-gold); color: var(--color-gold); } + +/* ================================================================ + FOOTER + ================================================================ */ +footer { + border-top: 1px solid var(--color-line-soft); + padding: 2.5rem 1.25rem 2rem; + text-align: center; + color: var(--color-fg-mute); + font-size: var(--fs-sm); +} +footer .mono { display: block; margin-top: 0.5rem; color: var(--color-fg-mute); } + +/* Share floating button */ +.share-fab { + position: fixed; + bottom: 1.5rem; right: 1.5rem; + z-index: 50; + background: var(--color-gold); + color: var(--color-bg); + width: 52px; height: 52px; + border-radius: 50%; + border: none; + cursor: pointer; + font-size: 1.4rem; + box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4); + display: flex; align-items: center; justify-content: center; + transition: transform var(--dur) var(--ease); +} +.share-fab:hover { transform: scale(1.08) rotate(8deg); } + +@media (max-width: 480px) { + section { padding: 3.5rem 0; } + .hero { min-height: 80vh; } + .stats { grid-template-columns: 1fr; } +} +</style> +</head> +<body> +<a href="#main" class="skip-link">İçeriğe atla</a> + +<!-- ============================================================ + NAVİGASYON + ============================================================ --> +<header class="topnav" role="banner"> + <div class="topnav__inner"> + <a href="#top" class="brand" aria-label="Güneş Uygarlığı ana sayfası"> + <svg class="brand__sun" viewBox="0 0 100 100" aria-hidden="true"> + <circle cx="50" cy="50" r="18" fill="#FFD700"/> + <g stroke="#FFD700" stroke-width="2.5" stroke-linecap="round"> + <line x1="50" y1="8" x2="50" y2="22"/> + <line x1="50" y1="78" x2="50" y2="92"/> + <line x1="8" y1="50" x2="22" y2="50"/> + <line x1="78" y1="50" x2="92" y2="50"/> + <line x1="20" y1="20" x2="30" y2="30"/> + <line x1="70" y1="70" x2="80" y2="80"/> + <line x1="20" y1="80" x2="30" y2="70"/> + <line x1="70" y1="30" x2="80" y2="20"/> + </g> + </svg> + <span>Güneş Uygarlığı</span> + </a> + <button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Menüyü aç">☰</button> + <ul class="nav-links" id="nav-menu" role="navigation"> + <li><a href="#manifesto">Manifesto</a></li> + <li><a href="#enerji">Enerji</a></li> + <li><a href="#arsiv">Arşiv</a></li> + <li><a href="#katil">Katıl</a></li> + <li><a href="#hakkimizda">Hakkımızda</a></li> + <li><a href="#iletisim">İletişim</a></li> + </ul> + </div> +</header> + +<main id="main"> + +<!-- ============================================================ + HERO + ============================================================ --> +<section class="hero" id="top"> + <div class="hero__sun" aria-hidden="true"> + <svg viewBox="0 0 100 100"> + <defs> + <radialGradient id="sunGrad"> + <stop offset="0%" stop-color="#FFE580"/> + <stop offset="60%" stop-color="#FFD700"/> + <stop offset="100%" stop-color="#FF8C42"/> + </radialGradient> + </defs> + <circle cx="50" cy="50" r="28" fill="url(#sunGrad)"/> + <g stroke="#FF8C42" stroke-width="1.8" stroke-linecap="round" opacity="0.85"> + <line x1="50" y1="6" x2="50" y2="20"/> + <line x1="50" y1="80" x2="50" y2="94"/> + <line x1="6" y1="50" x2="20" y2="50"/> + <line x1="80" y1="50" x2="94" y2="50"/> + <line x1="18" y1="18" x2="28" y2="28"/> + <line x1="72" y1="72" x2="82" y2="82"/> + <line x1="18" y1="82" x2="28" y2="72"/> + <line x1="72" y1="28" x2="82" y2="18"/> + <line x1="36" y1="10" x2="40" y2="22"/> + <line x1="64" y1="10" x2="60" y2="22"/> + <line x1="36" y1="90" x2="40" y2="78"/> + <line x1="64" y1="90" x2="60" y2="78"/> + <line x1="10" y1="36" x2="22" y2="40"/> + <line x1="10" y1="64" x2="22" y2="60"/> + <line x1="90" y1="36" x2="78" y2="40"/> + <line x1="90" y1="64" x2="78" y2="60"/> + </g> + </svg> + </div> + <span class="eyebrow">newOS Entegre · Manifesto 2026</span> + <h1>Güneş <span class="accent">Uygarlığı</span>'na Doğru</h1> + <p class="hero__lede"> + Sürdürülebilir, adil ve güneş enerjisi temelli yeni bir yaşam inşası için çağrı. + Bu manifesto, yeryüzünün her köşesinde, halktan yana, çevreye saygılı bir geleceğin yol haritasıdır. + </p> + <div class="hero__ctas"> + <a href="#manifesto" class="btn btn--primary">Manifestoyu Oku</a> + <a href="#katil" class="btn btn--ghost">Harekete Katıl</a> + </div> +</section> + +<!-- ============================================================ + PORTAL KARTLARI + ============================================================ --> +<section> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Keşfet</span> + <h2>Beş Portal</h2> + <p>Hareketin farklı boyutlarını keşfetmek için bir portal seç.</p> + </div> + <div class="cards"> + <a href="#manifesto" class="card"> + <div class="card__icon">01</div> + <h3>Manifesto</h3> + <p>Hareketin temel ilkeleri, yedi maddelik çağrı metni ve beş sütun manifestosu.</p> + <span class="card__arrow">oku →</span> + </a> + <a href="#enerji" class="card"> + <div class="card__icon">02</div> + <h3>Enerji Gerçekleri</h3> + <p>Türkiye'nin güneş potansiyeli, yenilenebilir enerji oranları ve dönüşüm önerileri.</p> + <span class="card__arrow">incele →</span> + </a> + <a href="#arsiv" class="card"> + <div class="card__icon">03</div> + <h3>Arşiv</h3> + <p>Okuma ve izleme listesi: sekiz kitap, altı film, on iki kaynak.</p> + <span class="card__arrow">keşfet →</span> + </a> + <a href="#katil" class="card"> + <div class="card__icon">04</div> + <h3>Katıl</h3> + <p>Beş adımda harekete katılma rehberi: keşfet, öğren, bağlan, katkı sun, yay.</p> + <span class="card__arrow">başla →</span> + </a> + <a href="#hakkimizda" class="card"> + <div class="card__icon">05</div> + <h3>Hakkımızda</h3> + <p>Misyon, değerler, üç aşamalı yol haritası ve iletişim kanalları.</p> + <span class="card__arrow">tanı →</span> + </a> + </div> + </div> +</section> + +<!-- ============================================================ + MANIFESTO + ============================================================ --> +<section id="manifesto"> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Madde 01</span> + <h2>Manifesto: Yedi Madde</h2> + <p>Güneş Uygarlığı'nın temel ilkeleri, özlü ve uygulanabilir biçimde.</p> + </div> + + <ol class="manifesto__items"> + <li> + <strong>Bilimsel Bütünlük</strong> + Tüm kararlarımız; fizik, ekoloji, sosyoloji ve ekonomi bilimlerinin ışığında, kanıt temelli olarak alınır. + </li> + <li> + <strong>Halkın Yararı</strong> + Enerji, toprak ve su üzerindeki haklar; halkın ortak mülkiyetidir. Özelleştirmeye ve tekelci yapılara karşıyız. + </li> + <li> + <strong>Çevresel Sürdürülebilirlik</strong> + Yenilenebilir enerji, döngüsel ekonomi ve biyoçeşitliliğin korunması; kalkınmanın ön koşuludur. + </li> + <li> + <strong>Eğitim ve Bilinçlendirme</strong> + Bilgiye erişim herkesin hakkıdır. Açık kaynak, açık eğitim ve eleştirel düşünce; hareketin temel direkleridir. + </li> + <li> + <strong>Evrensel Kardeşlik</strong> + Irk, cinsiyet, dil, din, sınıf farkı gözetmeksizin tüm insanlığın ortak yararı için çalışırız. + </li> + <li> + <strong>Açık İletişim</strong> + Tüm süreçlerimiz şeffaftır. Kararlar, bütçeler ve etki raporları herkes tarafından denetlenebilir. + </li> + <li> + <strong>Yerel-Uluslararası Denge</strong> + Her karar; yerel topluluklardan başlar, uluslararası dayanışma ile büyür. Hiyerarşi değil, ağ yapısı. + </li> + </ol> + + <div class="section-head" style="margin-top:4rem;"> + <span class="eyebrow">Madde 02</span> + <h2>Beş Sütun</h2> + <p>Hareketin yapısal dayanakları.</p> + </div> + + <div class="pillars"> + <div class="pillar"> + <div class="pillar__num">// 01</div> + <h4>Bilim & Teknoloji</h4> + <p>Açık kaynak, sürdürülebilir mühendislik.</p> + </div> + <div class="pillar"> + <div class="pillar__num">// 02</div> + <h4>Toplumsal Dönüşüm</h4> + <p>Adil geçiş, kooperatifler, halk meclisleri.</p> + </div> + <div class="pillar"> + <div class="pillar__num">// 03</div> + <h4>Çevresel Adalet</h4> + <p>İklim krizi ile mücadele, ekosistem onarımı.</p> + </div> + <div class="pillar"> + <div class="pillar__num">// 04</div> + <h4>Eğitim & Farkındalık</h4> + <p>Yaşam boyu öğrenme, eleştirel pedagoji.</p> + </div> + <div class="pillar"> + <div class="pillar__num">// 05</div> + <h4>Uluslararası İşbirliği</h4> + <p>Sınır ötesi dayanışma ağları.</p> + </div> + </div> + </div> +</section> + +<!-- ============================================================ + ENERJİ + ============================================================ --> +<section id="enerji"> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Madde 03</span> + <h2>Enerji Gerçekleri: Türkiye</h2> + <p>Veriler ışığında bir dönüşüm mümkün.</p> + </div> + + <div class="energy"> + <div> + <h3>Mevcut Durum</h3> + <p> + Türkiye, yılda ortalama <strong>1.527 kWh/m²</strong> güneş radyasyonu alıyor — dünya ortalamasının + neredeyse iki katı. Ancak 2024 itibarıyla elektrik üretiminin yalnızca <strong>%32'si</strong> yenilenebilir + kaynaklardan sağlanıyor. Güneş enerjisinin toplam üretimdeki payı hâlâ <strong>%7</strong>'nin altında. + </p> + <p style="margin-top:1rem;"> + Almanya, Türkiye'nin üçte biri kadar güneş radyasyonu almasına rağmen güneşten üç kat fazla elektrik + üretiyor. Bu fark; teknoloji, teşvik ve toplumsal irade eksikliğinden kaynaklanıyor. + </p> + + <div class="stats"> + <div class="stat"> + <div class="stat__value">1.527</div> + <div class="stat__label">kWh/m²/yıl güneş radyasyonu</div> + </div> + <div class="stat"> + <div class="stat__value">%32</div> + <div class="stat__label">Yenilenebilir enerji payı (2024)</div> + </div> + <div class="stat"> + <div class="stat__value">%7</div> + <div class="stat__label">Güneş enerjisi payı</div> + </div> + <div class="stat"> + <div class="stat__value">78M</div> + <div class="stat__label">Nüfus, ortalama tüketim artışı</div> + </div> + </div> + </div> + + <div> + <h3>Dönüşüm Önerileri</h3> + <p> + Türkiye'nin 2030'a kadar elektrik üretiminin <strong>%60'ını</strong> yenilenebilir kaynaklardan + sağlaması, 2050'de ise <strong>karbon nötr</strong> olması teknik olarak mümkün. Bunun için: + </p> + <ul class="solution-list"> + <li>Çatı GES mevzuatının sadeleştirilmesi ve teşviki</li> + <li>Enerji kooperatiflerinin önündeki bürokratik engellerin kaldırılması</li> + <li>Kamu arazilerinin güneş çiftliklerine tahsisi (halk denetimi ile)</li> + <li>Net metering ölçümlerinin adil hale getirilmesi</li> + <li>Depolama (batarya + hidrojen) yatırımlarının hızlandırılması</li> + <li>Mesleki eğitim programları ile yeşil işgücü yetiştirilmesi</li> + <li>Yerel yönetimlere enerji planlama yetkisinin devri</li> + <li>Şeffaf, denetlenebilir açık veri platformları</li> + </ul> + <p style="margin-top:1.25rem;"> + Güneş Uygarlığı, bu dönüşümün <strong>alttan yukarı</strong>, halkın katılımıyla gerçekleşmesini savunur. + </p> + </div> + </div> + </div> +</section> + +<!-- ============================================================ + ARŞİV + ============================================================ --> +<section id="arsiv"> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Madde 04</span> + <h2>Arşiv: Okuma & İzleme</h2> + <p>Hareketin düşünsel arka planı için seçilmiş kaynaklar.</p> + </div> + + <h3 style="font-size:var(--fs-xl); margin-bottom:1rem; color:var(--color-gold);">// Kitaplar</h3> + <div class="archive-grid"> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Bilim</div> + <h4>Polimetrik Solar Hücreler</h4> + <p>Stine, W. — Yeni nesil fotovoltaik teknolojileri üzerine teknik değerlendirme.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Politika</div> + <h4>Energy Democracy</h4> + <p>Hopkins, M. — Enerji hakkı, halk kontrolü ve kooperatif modeller.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · İklim</div> + <h4>İklim Krizi ve Kapitalizm</h4> + <p>Wallace-Wells, D. — Küresel ısınmanın sosyo-ekonomik boyutları.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Ekonomi</div> + <h4>Döngüsel Ekonomi</h4> + <p>Webster, K. — Atıksız üretim ve tüketim modelleri.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Felsefe</div> + <h4>Güneşi Beklerken</h4> + <p>Kocagöz, S. — Türkiye'den güneş enerjisi direnişi anlatıları.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Toplum</div> + <h4>Yeşil Düşünceler</h4> + <p>Bozkurt, E. — Türkiye ekoloji hareketi tarihçesi ve güncel durum.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Mimari</div> + <h4>Sürdürülebilir Mimarlık</h4> + <p>Yeang, K. — Pasif tasarım ve ekolojik yapı prensipleri.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Kitap · Köy</div> + <h4>Güneşköy</h4> + <p>Demirtaş, A. — Kırsalda enerji özerkliği deneyimleri.</p> + </article> + </div> + + <h3 style="font-size:var(--fs-xl); margin:3rem 0 1rem; color:var(--color-gold);">// Filmler</h3> + <div class="archive-grid"> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>An Inconvenient Truth</h4> + <p>Gore, A. — İklim krizinin ilk popüler belgeseli.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>Before the Flood</h4> + <p>DiCaprio, L. — İklim değişikliğinin küresel etkileri.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>Our Planet</h4> + <p>Attenborough, D. — Doğa ve biyoçeşitlilik üzerine Netflix serisi.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>The 11th Hour</h4> + <p>Nolte, N. — Çevre krizinin insanlığa çağrısı.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>Tomorrow</h4> + <p>Laurent, C. — Sürdürülebilir çözümler sunan topluluklar.</p> + </article> + <article class="archive-item"> + <div class="archive-item__type">Film · Belgesel</div> + <h4>2040</h4> + <p>Gameau, D. — Umut verici ekolojik gelecekler.</p> + </article> + </div> + </div> +</section> + +<!-- ============================================================ + KATIL + ============================================================ --> +<section id="katil"> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Madde 05</span> + <h2>Harekete Katıl: 5 Adım</h2> + <p>Bireysel eylemden kolektif dönüşüme uzanan yol haritası.</p> + </div> + + <ol class="steps"> + <li class="step"> + <h3>Keşfet</h3> + <p>Bu manifestoyu oku, arşivdeki kaynakları incele. Hareketin ne olduğunu ve neden gerekli olduğunu anla.</p> + </li> + <li class="step"> + <h3>Öğren</h3> + <p>Yenilenebilir enerji, çevresel adalet ve sürdürülebilir yaşam üzerine temel bilgi edin. Yerel kurslar, açık dersler.</p> + </li> + <li class="step"> + <h3>Bağlan</h3> + <p>Yakınındaki bir enerji kooperatifi, ekoloji topluluğu veya komşuluk ağı ile iletişime geç. Yalnız yürüme.</p> + </li> + <li class="step"> + <h3>Katkı Sun</h3> + <p>Bilgini, emeğini, kaynağını paylaş. Çatında panel kur, toplantılara katıl, sosyal medyada sesini yükselt.</p> + </li> + <li class="step"> + <h3>Yay</h3> + <p>Manifestoyu, kaynakları ve deneyimlerini çevrendekilerle paylaş. Her yeni kişi, uygarlığın bir parçası olur.</p> + </li> + </ol> + </div> +</section> + +<!-- ============================================================ + HAKKIMIZDA + ============================================================ --> +<section id="hakkimizda"> + <div class="container"> + <div class="section-head"> + <span class="eyebrow">Madde 06</span> + <h2>Hakkımızda</h2> + <p>Misyon, değerler, yol haritası.</p> + </div> + + <div class="about-grid"> + <div> + <h3>Misyon</h3> + <p> + Güneş Uygarlığı Hareketi, Türkiye'de ve dünyada yenilenebilir enerji geçişini hızlandırmak, + çevresel adaleti sağlamak ve toplumsal dönüşümü desteklemek amacıyla oluşturulmuş + yatay, katılımcı ve şeffaf bir inisiyatiftir. Merkezi bir hiyerarşi yerine, yerel + toplulukların kendi aralarında ve küresel ağlarla bağ kurduğu bir yapı hedefler. + </p> + + <h3 style="margin-top:2rem;">Değerler</h3> + <ul class="solution-list" style="margin-top:1rem;"> + <li>Şeffaflık ve hesap verebilirlik</li> + <li>Yatay örgütlenme ve doğrudan demokrasi</li> + <li>Bilimsel kanıt ve eleştirel düşünce</li> + <li>Doğa ile uyumlu yaşam</li> + <li>Toplumsal cinsiyet eşitliği</li> + <li>Kuşaklar arası dayanışma</li> + </ul> + </div> + + <div> + <h3>Yol Haritası: 3 Aşama</h3> + <ol class="roadmap"> + <li> + <strong>AŞAMA 01 · 2026–2027</strong> + <p>Bilinçlendirme, yerel toplulukların kuruluşu, manifesto yayılımı, açık kaynak altyapı.</p> + </li> + <li> + <strong>AŞAMA 02 · 2027–2030</strong> + <p>İlk güneş kooperatiflerinin faaliyete geçmesi, yerel enerji planlama meclisleri, ulusal ağ.</p> + </li> + <li> + <strong>AŞAMA 03 · 2030–2040</strong> + <p>Bölgesel güneş şebekeleri, uluslararası dayanışma, eğitim ve model yaygınlaştırma.</p> + </li> + </ol> + + <p style="margin-top:1.5rem; font-style:italic; color:var(--color-fg-dim);"> + "Güneşi bekleyen değil, güneşi kuran nesil ol." + </p> + </div> + </div> + </div> +</section> + +<!-- ============================================================ + İLETİŞİM + ============================================================ --> +<section id="iletisim"> + <div class="container"> + <div class="contact"> + <span class="eyebrow">Madde 07</span> + <h2>İletişim & Katılım</h2> + <p>Manifesto hakkında sorular, katkı önerileri veya yerel topluluk kurma talepleri için bize ulaş.</p> + <a href="mailto:info@gunesuygarligi.org" class="contact__email">info@gunesuygarligi.org</a> + <div class="socials"> + <a href="#" class="social" rel="noopener noreferrer" target="_blank">Mastodon</a> + <a href="#" class="social" rel="noopener noreferrer" target="_blank">PeerTube</a> + <a href="#" class="social" rel="noopener noreferrer" target="_blank">Matrix</a> + <a href="#" class="social" rel="noopener noreferrer" target="_blank">GitHub</a> + <a href="#" class="social" rel="noopener noreferrer" target="_blank">Telegram</a> + </div> + </div> + </div> +</section> + +</main> + +<!-- ============================================================ + FOOTER + ============================================================ --> +<footer> + <div class="container"> + <div>© 2026 Güneş Uygarlığı Hareketi · Tüm hakları halka aittir.</div> + <div class="mono">newOS v4.6 · build: gunes-uygarligi-2026.07</div> + <div class="mono" style="margin-top:0.5rem;"> + <a href="#top" style="color:var(--color-fg-mute);">↑ Başa dön</a> + </div> + </div> +</footer> + +<!-- Paylaş butonu (floating) --> +<button class="share-fab" id="shareBtn" aria-label="Bu sayfayı paylaş" title="Paylaş">↗</button> + +<!-- ============================================================ + YAPISAL VERİ (SEO) + ============================================================ --> +<script type="application/ld+json"> +{ + "@context": "https://schema.org", + "@type": "Organization", + "name": "Güneş Uygarlığı Hareketi", + "url": "https://webx11.duckdns.org/spaces/gunesuygarligi/", + "logo": "https://webx11.duckdns.org/assets/sun-512.png", + "description": "Güneş enerjisi temelli, sürdürülebilir ve adil bir gelecek inşası için manifesto ve hareket.", + "foundingDate": "2026", + "sameAs": [ + "https://mastodon.social/@gunesuygarligi", + "https://github.com/gunesuygarligi" + ] +} +</script> +<script type="application/ld+json"> +{ + "@context": "https://schema.org", + "@type": "WebSite", + "name": "Güneş Uygarlığı", + "url": "https://webx11.duckdns.org/spaces/gunesuygarligi/", + "inLanguage": "tr-TR" +} +</script> + +<!-- ============================================================ + DAVRANIŞ: menü toggle, paylaş, newOS köprüsü + ============================================================ --> +<script> +(function() { + 'use strict'; + + // --- Mobil menü toggle --- + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.getElementById('nav-menu'); + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const open = navLinks.classList.toggle('open'); + navToggle.setAttribute('aria-expanded', String(open)); + navToggle.setAttribute('aria-label', open ? 'Menüyü kapat' : 'Menüyü aç'); + navToggle.textContent = open ? '✕' : '☰'; + }); + // Menüden bir linke tıklayınca kapat + navLinks.addEventListener('click', (e) => { + if (e.target.tagName === 'A' && navLinks.classList.contains('open')) { + navLinks.classList.remove('open'); + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.setAttribute('aria-label', 'Menüyü aç'); + navToggle.textContent = '☰'; + } + }); + } + + // --- Paylaş butonu --- + const shareBtn = document.getElementById('shareBtn'); + if (shareBtn) { + shareBtn.addEventListener('click', async () => { + const shareData = { + title: 'Güneş Uygarlığı Hareketi', + text: 'Güneş enerjisi temelli, sürdürülebilir ve adil bir gelecek manifestosu.', + url: window.location.href + }; + try { + if (navigator.share) { + await navigator.share(shareData); + if (window.newOS?.bridge?.events) { + window.newOS.bridge.events.emit('share:success', { method: 'native' }); + } + } else { + // Fallback: Twitter + const tw = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(shareData.text) + '&url=' + encodeURIComponent(shareData.url); + window.open(tw, '_blank', 'noopener,noreferrer'); + if (window.newOS?.bridge?.events) { + window.newOS.bridge.events.emit('share:fallback', { method: 'twitter' }); + } + } + } catch (err) { + if (err.name !== 'AbortError') { + // E-posta fallback + const mailto = 'mailto:?subject=' + encodeURIComponent(shareData.title) + '&body=' + encodeURIComponent(shareData.text + '\n\n' + shareData.url); + window.location.href = mailto; + } + } + }); + } + + // --- newOS Köprüsü entegrasyonu --- + function initNewOSBridge() { + if (!window.newOS || !window.newOS.bridge) { + console.info('[gunes-uygarligi] newOS köprüsü bulunamadı, standalone modda çalışılıyor.'); + return; + } + const bridge = window.newOS.bridge; + + // 1) Kullanıcı tercihlerini oku, sayfa açılışında uygula + try { + const user = bridge.readManifest(); + if (user && user.name) { + console.info('[newOS] Hoş geldin,', user.name); + } + // Tema uygula + const theme = bridge.theme(); + if (theme) { + document.documentElement.dataset.theme = theme; + } + } catch (e) { + console.warn('[newOS] Manifest okunamadı:', e); + } + + // 2) Katılım sinyali: sayfa görüntülendi + if (bridge.events && typeof bridge.events.emit === 'function') { + bridge.events.emit('page:view', { + page: 'gunes-uygarligi', + ts: new Date().toISOString(), + path: window.location.pathname + }); + } + + // 3) Katıl butonlarına event ajanı bağla + document.querySelectorAll('a[href="#katil"]').forEach((el) => { + el.addEventListener('click', () => { + if (bridge.events && typeof bridge.events.emit === 'function') { + bridge.events.emit('intent:join', { source: 'cta' }); + } + }); + }); + + // 4) İletişim formu gönderimi (gösterimsel) + const contactEmail = document.querySelector('.contact__email'); + if (contactEmail) { + contactEmail.addEventListener('click', () => { + if (bridge.events && typeof bridge.events.emit === 'function') { + bridge.events.emit('contact:click', { channel: 'email' }); + } + }); + } + + // 5) Ajan kuyruğu: manifesto okundu olayı + if (bridge.agent && typeof bridge.agent.queue === 'function') { + bridge.agent.queue({ + type: 'manifesto.read', + payload: { slug: 'gunes-uygarligi-2026' } + }); + } + + // 6) Tema değişikliği dinle (pub/sub) + if (typeof bridge.on === 'function') { + bridge.on('theme:change', (t) => { + document.documentElement.dataset.theme = t; + try { localStorage.setItem('newos.theme', t); } catch(e){} + }); + } + } + + // DOM hazır olduğunda çalıştır + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initNewOSBridge); + } else { + initNewOSBridge(); + } +})(); +</script> + +</body> +</html> |