/* ===================================================================== GoreWin — Ana Site Tasarım Sistemi Tüm public sayfaların ortak temeli. Renk/font/boşluk değişkenleri BURADAN yönetilir. TEMA: renkler DAİMA aşağıdaki değişkenlerden okunur. Bileşen CSS'lerinde sabit renk (#fff, #001325 ...) YAZMAYIN — aksi halde diğer temada o kural olduğu gibi kalır. Koyu tema ile açılır (bkz. includes/theme-boot.php + assets/js/theme.js); nitelik hiç yoksa cihaz tercihi (prefers-color-scheme) geçerlidir. Marka: derin lacivert #001325 + limon yeşili #D6FF41. ===================================================================== */ /* ---------- Açık tema (varsayılan) ---------- */ :root { color-scheme: light; /* Marka sabitleri — iki temada da aynı */ --navy: #001325; --navy-2: #032447; --lime: #d6ff41; --lime-2: #b6e800; --lime-ink: #06192b; /* limon zemin üstündeki yazı */ /* Zemin & yüzey */ --bg: #ffffff; --bg-soft: #f3f7fc; --surface: #ffffff; --surface-2: #f3f7fc; --surface-3: #e9eff8; --line: #e3eaf4; --line-strong: #d2dcea; /* Metin */ --text: #08182a; --text-strong: #001325; --muted: #5a6c80; --muted-2: #8494a6; /* Vurgu — limon yeşili açık zeminde YAZI olarak okunmaz; yazıda --accent-text, zeminde --accent kullanılır. */ --accent: #d6ff41; --accent-ink: #06192b; --accent-text: #4a7a00; --accent-soft: #f2ffcc; --accent-line: #dff2a4; --accent-glow: rgba(150, 200, 0, .14); /* Ana eylem butonu (koyu zemin + limon yazı = marka imzası) */ --btn-bg: #001325; --btn-fg: #d6ff41; --btn-bg-hover:#032447; /* Durum renkleri */ --ok-fg: #12805c; --ok-bg: #e6f7f0; --ok-line: #c9ebdd; --err-fg: #b91c1c; --err-bg: #fef2f2; --err-line: #fbd5d5; --warn-fg: #9a6b04; --warn-bg: #fff8e6; --warn-line:#f2e2b4; /* Ödül kademeleri (son-oduller.php ile aynı adlar) */ --tier-diamond: #22d3ee; --tier-gold: #f5b301; --tier-silver: #94a3b8; --tier-bronze: #c2803b; --tier-base: #7c8ea3; /* Koyu temada görselleri yumuşatmak için (açıkta etkisiz) */ --media-dim: none; --logo-filter: none; /* Ölçü & efekt */ --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(3, 20, 40, .06); --shadow: 0 4px 14px rgba(3, 20, 40, .07); --shadow-lg: 0 12px 32px rgba(3, 20, 40, .10); --ring: 0 0 0 3px rgba(150, 200, 0, .35); --container: 1200px; --gutter: 20px; --section-y: clamp(64px, 8vw, 118px); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-head: 'Plus Jakarta Sans', var(--font); } /* ---------- Koyu tema ---------- */ /* Cihaz tercihi (JS kapalıysa da doğru açılsın) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #001325; --bg-soft: #011c34; --surface: #04223d; --surface-2: #062b4b; --surface-3: #08355c; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); --text: #e8f1fa; --text-strong: #ffffff; --muted: #9db3c9; --muted-2: #7891ab; --accent-text: #d6ff41; --accent-soft: rgba(214, 255, 65, .12); --accent-line: rgba(214, 255, 65, .28); --accent-glow: rgba(214, 255, 65, .18); --btn-bg: #d6ff41; --btn-fg: #06192b; --btn-bg-hover:#c9ef2d; --ok-fg: #4ade80; --ok-bg: rgba(74, 222, 128, .12); --ok-line: rgba(74, 222, 128, .28); --err-fg: #fca5a5; --err-bg: rgba(248, 113, 113, .12); --err-line: rgba(248, 113, 113, .28); --warn-fg: #fcd34d; --warn-bg: rgba(252, 211, 77, .12); --warn-line:rgba(252, 211, 77, .28); --media-dim: brightness(.92) contrast(1.02); --logo-filter: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 4px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6); } } /* Kullanıcının açık seçimi (koyu cihazda bile) — yukarıdaki blok :root:not([data-theme="light"]) ile zaten korunuyor. */ /* Kullanıcının koyu seçimi (açık cihazda bile) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #001325; --bg-soft: #011c34; --surface: #04223d; --surface-2: #062b4b; --surface-3: #08355c; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); --text: #e8f1fa; --text-strong: #ffffff; --muted: #9db3c9; --muted-2: #7891ab; --accent-text: #d6ff41; --accent-soft: rgba(214, 255, 65, .12); --accent-line: rgba(214, 255, 65, .28); --accent-glow: rgba(214, 255, 65, .18); --btn-bg: #d6ff41; --btn-fg: #06192b; --btn-bg-hover:#c9ef2d; --ok-fg: #4ade80; --ok-bg: rgba(74, 222, 128, .12); --ok-line: rgba(74, 222, 128, .28); --err-fg: #fca5a5; --err-bg: rgba(248, 113, 113, .12); --err-line: rgba(248, 113, 113, .28); --warn-fg: #fcd34d; --warn-bg: rgba(252, 211, 77, .12); --warn-line:rgba(252, 211, 77, .28); --media-dim: brightness(.92) contrast(1.02); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 4px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 14px 38px rgba(0, 0, 0, .6); } /* ---------- Sıfırlama ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-strong); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; height: auto; } img { filter: var(--media-dim); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; } /* Klavye kullanıcıları için içeriğe atlama */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 10px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .skip-link:focus { left: 8px; } /* ---------- Yerleşim ---------- */ .page-shell { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; } .section--soft { background: var(--bg-soft); } .section__head { max-width: 760px; margin: 0 auto clamp(34px, 4vw, 58px); text-align: center; } .section__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; margin-bottom: 14px; } .section__sub { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); margin: 0; } /* ---------- Küçük bileşenler ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; margin-bottom: 18px; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--accent-soft); animation: gw-pulse 2.2s ease-in-out infinite; } @keyframes gw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; font-size: 14.5px; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 5px 14px rgba(3, 20, 40, .16); } .btn--primary:hover { background: var(--btn-bg-hover); } .btn--lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 5px 14px var(--accent-glow); } .btn--lime:hover { background: #c9ef2d; } .btn--ghost { background: var(--surface); color: var(--text-strong); border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-text); } /* Parlama — soldan sağa geçen ışık şeridi (ana eylem butonu dikkat çeksin). .btn zaten yuvarlak köşeli; overflow:hidden şeridi buton şekline kırpar. prefers-reduced-motion altında site.css'in genel kuralı animasyonu durdurur. */ .btn--shine { position: relative; overflow: hidden; } .btn--shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .78) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; animation: gw-shine 3.6s ease-in-out infinite; } @keyframes gw-shine { 0%, 58% { left: -60%; } 100% { left: 130%; } } .btn--sm { padding: 10px 18px; font-size: 14px; } .btn--lg { padding: 15px 28px; font-size: 15.5px; } .btn--block { width: 100%; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); } .live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex: none; } .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; opacity: .55; animation: gw-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes gw-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } /* ---------- Kaydırınca beliren animasyon ---------- */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* JS yoksa içerik gizli kalmasın */ .no-js [data-reveal] { opacity: 1; transform: none; } /* ---------- Sayfa başlığı (iç sayfalar) ---------- */ .pagehero { position: relative; padding: clamp(52px, 7vw, 96px) 0 clamp(34px, 4vw, 56px); background: var(--bg-soft); border-bottom: 1px solid var(--line); overflow: hidden; } /* Kurumsal düzende parlama yok — sayfa başlığı düz zeminde durur. */ .pagehero__glow { display: none; } .pagehero .container { position: relative; } .pagehero__title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin-bottom: 14px; } .pagehero__lead { max-width: 720px; color: var(--muted); font-size: clamp(15px, 1.7vw, 18.5px); margin: 0; } .crumb { margin-bottom: 18px; } .crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--muted); } .crumb li { display: inline-flex; align-items: center; gap: 8px; } .crumb a:hover { color: var(--accent-text); } .crumb i { font-size: 10px; opacity: .6; } /* ---------- Uzun metin sayfaları (politikalar) ---------- */ .prose { max-width: 820px; } .prose h2 { font-size: clamp(21px, 2.4vw, 27px); margin-top: 2em; } .prose h3 { font-size: clamp(17px, 2vw, 20px); margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.2em; color: var(--muted); } .prose li { margin-bottom: .5em; } .prose p { color: var(--muted); } .prose strong { color: var(--text); } .prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Hareketi azalt ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }