/* ============================================================================ StreamJarvis / DiscordJarvis — ortak tasarım dili ---------------------------------------------------------------------------- Landing (index.html) tasarımını sayfalar arasında paylaşılabilir hâle getirir. Landing kendi token'larını inline taşır (bilinçli olarak self-contained); bu dosya AYNI değerleri kullanır ki iki yüzey birbirinden kaymasın. Kullanan sayfalar: lethe-game.html, letheadmin/*. Bootstrap'e bağımlı DEĞİLDİR — ihtiyaç duyulan ızgara/boşluk yardımcıları aşağıda kendi içinde tanımlıdır. ========================================================================== */ :root { --sp-red: #E23636; --sp-red-bright: #FF4444; --sp-blue: #1565C0; --sp-blue-bright: #42A5F5; --sp-bg: #0a0c15; --sp-surface: #111428; --sp-surface2: #181d35; --sp-text: #f0f0f0; --sp-text-sec: #94a3b8; --sp-muted: #64748b; --sp-gradient: linear-gradient(135deg, #E23636, #1565C0); --sp-gradient-bright: linear-gradient(135deg, #FF4444, #42A5F5); --discord: #5865F2; --surface: rgba(17, 20, 40, 0.5); --surface2: rgba(24, 29, 53, 0.7); --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.16); --glass-blur: blur(22px); --maxw: 1240px; --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; --radius: 14px; /* ── Eski isim eşlemeleri ──────────────────────────────────────────────── lethe-game.html içinde 24 satır içi stil eski `dashboard.css`/ `public-site.css` değişkenlerine atıf yapıyor. O dosyalar bu sayfadan kaldırıldığında değişkenler TANIMSIZ kaldı ve kenarlıklar/renkler sessizce bozuldu (tarayıcıda tespit edildi: `border: 2px solid var(--accent-red)` çözülemeyip taşmaya yol açıyordu). Eski adları marka paletine bağlıyoruz; satır içi stilleri tek tek ayıklamaktan hem daha güvenli hem geri alınabilir. */ --accent-red: var(--sp-red-bright); --accent-blue: var(--sp-blue-bright); --accent-purple: #a78bfa; --accent-pink: #f472b6; --accent-orange: #fb923c; --accent-green: var(--ok); --accent-cyan: #22d3ee; --bg-tertiary: var(--sp-surface2); --text-primary: var(--sp-text); --text-muted: var(--sp-text-sec); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--sp-bg); color: var(--sp-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Dekoratif `transform: skew(...)` kutuları sınırlayıcı kutularını viewport dışına taşırıyor. Eski public-site.css de aynı korumayı yapıyordu; o dosya kaldırılınca sayfa yatay kaymaya başlamıştı (tarayıcıda ölçüldü). YALNIZ body'ye vermek YETMEZ: kaydırma kabı olduğunda etkisiz kalır. */ html, body { overflow-x: hidden; max-width: 100%; } code, kbd, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } a { color: inherit; text-decoration: none; } /* ── Animasyonlu arka plan (landing ile aynı) ─────────────────────────────── */ .bg-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 56px 56px; animation: sj-grid 24s linear infinite; } @keyframes sj-grid { to { background-position: 56px 56px; } } .bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vw 50vh at 12% 8%, rgba(226, 54, 54, .16), transparent 62%), radial-gradient(55vw 45vh at 88% 22%, rgba(21, 101, 192, .18), transparent 60%); animation: sj-breathe 12s ease-in-out infinite; } @keyframes sj-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } } /* ── Izgara / boşluk yardımcıları (Bootstrap yerine) ──────────────────────── */ .wrap, .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .row { display: flex; flex-wrap: wrap; margin: 0 -8px; } .row > [class*="col-"] { padding: 0 8px; width: 100%; } .g-2 { margin: 0 -5px; } .g-2 > [class*="col-"] { padding: 5px; } .g-3 { margin: 0 -8px; } .g-3 > [class*="col-"] { padding: 8px; } .g-4 { margin: 0 -11px; } .g-4 > [class*="col-"] { padding: 11px; } /* Sütun genişlikleri taban kuralla AYNI özgüllükte (`.row > …`) yazılır. * * NEDEN: taban kural `.row > [class*="col-"]` 0-2-0 özgüllüktedir; tek sınıflı * `.col-lg-3` ise 0-1-0. Yani `.col-lg-3 { width:25% }` yazmak YETMEZ — taban * `width:100%` onu her koşulda EZER, medya sorgusu doğru olsa bile. Bu, Bootstrap * kaldırılırken oluştu ve ızgaranın TAMAMINI sessizce devre dışı bıraktı: her * sütun %100 genişlik alıp alt alta yığıldı (lethe-game sayfasının soldaki * içindekiler paneli de bu yüzden kaybolmuştu). Aynı özgüllükte yazılınca * kaynak sırası belirler ve modifier kazanır. */ .row > .col-6 { width: 50%; } @media (min-width: 768px) { .row > .col-md-3 { width: 25%; } .row > .col-md-4 { width: 33.3333%; } .row > .col-md-6 { width: 50%; } } @media (min-width: 992px) { .row > .col-lg-3 { width: 25%; } .row > .col-lg-4 { width: 33.3333%; } .row > .col-lg-8 { width: 66.6667%; } .row > .col-lg-9 { width: 75%; } } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .me-2 { margin-right: 8px; } .ms-3 { margin-left: 16px; } .ms-auto { margin-left: auto; } .py-5 { padding-top: 48px; padding-bottom: 48px; } .text-center { text-align: center; } .text-uppercase { text-transform: uppercase; letter-spacing: .08em; } .small { font-size: .875em; } .align-items-center { align-items: center; } .table-responsive { overflow-x: auto; } .text-secondary { color: var(--sp-text-sec); } .text-success { color: var(--ok); } .text-warning { color: var(--warn); } .text-danger { color: var(--sp-red-bright); } .text-info { color: var(--sp-blue-bright); } .text-purple { color: #a78bfa; } /* ── Navigasyon ───────────────────────────────────────────────────────────── */ .sj-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 12, 21, .72); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; } .brand img { width: 32px; height: 32px; border-radius: 9px; } .brand-text { background: var(--sp-gradient-bright); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 17px; letter-spacing: -.02em; } .nav-toggle { margin-left: auto; display: none; background: none; border: 1px solid var(--border); color: var(--sp-text); border-radius: 9px; padding: 7px 11px; cursor: pointer; font-size: 16px; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; } .nav-links > a { padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--sp-text-sec); transition: color .16s, background .16s; } .nav-links > a:hover { color: var(--sp-text); background: var(--surface2); } .nav-links > a.active { color: var(--sp-text); background: var(--surface2); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--discord); color: #fff !important; font-weight: 700; } .nav-cta:hover { filter: brightness(1.12); background: var(--discord) !important; } @media (max-width: 900px) { .nav-toggle { display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px; margin: 0; background: rgba(10, 12, 21, .97); border-bottom: 1px solid var(--border); display: none; } .nav-links.open { display: flex; } } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { padding: 130px 0 56px; } .hero h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 16px; } .hero .grad { background: var(--sp-gradient-bright); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--sp-text-sec); font-size: clamp(15px, 2vw, 18px); max-width: 760px; } .eyebrow, .eyebrow-tech { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: var(--glass-blur); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-text-sec); } .eyebrow .dot, .eyebrow-tech::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-red-bright); box-shadow: 0 0 10px var(--sp-red-bright); } .stat-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .stat-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: var(--glass-blur); font-size: 13px; font-weight: 600; color: var(--sp-text-sec); } /* ── Bölümler / kartlar ───────────────────────────────────────────────────── */ .section { padding: 40px 0; scroll-margin-top: 90px; } .section-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .section-title::before { content: ''; width: 4px; height: 1.1em; border-radius: 3px; background: var(--sp-gradient-bright); flex: none; } .card-custom, .info-box, .tip-box, .warning-box, .step-box, .rm-stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: border-color .18s, transform .18s; } .card-custom { height: 100%; } .card-custom:hover { border-color: var(--border-hover); transform: translateY(-2px); } .card-custom h5, .info-box h5, .tip-box h5, .warning-box h5 { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .info-box { border-left: 3px solid var(--sp-blue-bright); margin-bottom: 18px; } .tip-box { border-left: 3px solid var(--ok); margin-bottom: 18px; } .warning-box { border-left: 3px solid var(--warn); margin-bottom: 18px; } .step-box { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .step-number { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--sp-gradient); color: #fff; } .command-box { font-family: 'JetBrains Mono', ui-monospace, monospace; background: rgba(0, 0, 0, .38); border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; margin-top: 7px; font-size: 13.5px; color: var(--sp-blue-bright); overflow-x: auto; } .command-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .command-item { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; transition: border-color .18s, transform .18s; } .command-item:hover { border-color: var(--border-hover); transform: translateY(-2px); } .command-item code { display: inline-block; font-size: 13px; font-weight: 600; color: var(--sp-red-bright); margin-bottom: 4px; } .command-item p { font-size: 13px; color: var(--sp-text-sec); margin: 0; } /* ── İçerik bileşenleri ───────────────────────────────────────────────────── */ .animal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 9px; } .animal-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; font-size: 12.5px; } .animal-item .emoji { display: block; font-size: 22px; margin-bottom: 3px; } .rarity-table { width: 100%; border-collapse: collapse; font-size: 14px; } .rarity-table th, .rarity-table td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--border); } .rarity-table th { color: var(--sp-text-sec); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .rarity-common { color: #9ca3af; } .rarity-uncommon { color: #10b981; } .rarity-rare { color: #3b82f6; } .rarity-epic { color: #8b5cf6; } .rarity-legendary { color: #f59e0b; } .rarity-mythic { color: #f97316; } .rarity-hidden { color: #ec4899; } .rarity-eternal { color: #e11d48; } .tab-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .tab-btn { padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--sp-text-sec); font-family: inherit; font-size: 13.5px; font-weight: 600; transition: all .16s; } .tab-btn:hover { color: var(--sp-text); border-color: var(--border-hover); } .tab-btn.active { background: var(--sp-gradient); color: #fff; border-color: transparent; } .tab-content { display: none; } .tab-content.active { display: block; } /* ── İçindekiler (lethe-game sayfasının sol paneli) ─────────────────────────── * * Bağlantılar BLOK olmalı: satır içi kalırlarsa 24 başlık tek bir metin * yığınına dönüşür ve panel "bölüm listesi" olmaktan çıkar. Bootstrap * kaldırılırken `display:block` ve `position:sticky` düşmüştü. */ .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 30px; backdrop-filter: var(--glass-blur); } .toc h5 { margin: 0 0 12px; font-weight: 600; color: var(--sp-text); } .toc a { display: block; color: var(--sp-text-sec); font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); /* Yalnız derleyici dostu özellikler: renk ve dolgu kaydırması. */ transition: color .15s ease, padding-left .15s ease; } .toc a:last-child { border-bottom: none; } .toc a:hover { color: var(--sp-blue-bright); padding-left: 8px; } /* Okurken görünür kalan bölüm vurgulanır — uzun sayfada "neredeyim" sorusunun * cevabı. Kenarlık kaydırma yapmasın diye dolgu değil, sol çizgi kullanılır. */ .toc a.active { color: var(--sp-blue-bright); font-weight: 600; box-shadow: inset 2px 0 0 var(--sp-blue-bright); padding-left: 8px; } @media (min-width: 992px) { /* Sayfa boyunca yanda kalır. Üst boşluk SABİT navbar'ın (63px) altına * denk gelir. 24 başlık ekrandan taşabileceği için panel KENDİ İÇİNDE * kayar; yoksa alttaki başlıklara hiç ulaşılamazdı. */ .toc { position: sticky; top: 80px; margin-bottom: 0; max-height: calc(100vh - 100px); overflow-y: auto; } } /* Çapayla gelen başlık SABİT navbar'ın altında kalmasın — `scroll-margin` * olmadan tıklanan bölümün başlığı navbar tarafından örtülür. */ .section[id] { scroll-margin-top: 80px; } html { scroll-behavior: smooth; } /* Kullanıcı hareket azaltma istediyse ani geçiş — yumuşak kaydırma baş * dönmesi/mide bulantısı tetikleyebiliyor. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toc a { transition: none; } } .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface2); border: 1px solid var(--border); } /* Yol haritası */ .roadmap-timeline { display: grid; gap: 14px; } .roadmap-card, .roadmap-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; backdrop-filter: var(--glass-blur); } .roadmap-header { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex-wrap: wrap; } .roadmap-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--sp-muted); flex: none; } .roadmap-card.done .roadmap-dot, .roadmap-item.done .roadmap-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .roadmap-card.plan .roadmap-dot, .roadmap-item.plan .roadmap-dot { background: var(--warn); } .roadmap-title { font-size: 15.5px; font-weight: 700; } .roadmap-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); } .roadmap-features { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .roadmap-tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: var(--sp-text-sec); } .rm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .rm-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .rm-stat-lbl { font-size: 12.5px; color: var(--sp-text-sec); } .rm-version-table { width: 100%; border-collapse: collapse; font-size: 14px; } .rm-version-table th, .rm-version-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; } /* ── Butonlar ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 11px; border: 1px solid transparent; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: transform .16s, filter .16s, border-color .16s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--sp-gradient); color: #fff; } .btn-primary:hover { filter: brightness(1.12); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--sp-text); } .btn-ghost:hover { border-color: var(--border-hover); } .btn-discord { background: var(--discord); color: #fff; } .btn-discord:hover { filter: brightness(1.12); } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--border); margin-top: 56px; padding: 34px 0 26px; } .footer-content { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; } .footer-brand img { width: 28px; height: 28px; border-radius: 8px; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px; } .footer-links a { color: var(--sp-text-sec); font-size: 14px; } .footer-links a:hover { color: var(--sp-text); } .footer-copy { color: var(--sp-muted); font-size: 13px; text-align: center; margin-top: 18px; } /* ── Erişilebilirlik ──────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--sp-blue-bright); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .bg-grid, .bg-glow { animation: none; } }