/* #region 1: TEMA VE RENK PALETİ */ :root { --bg-stage: #0c0e14; --bg-card: #151824; --bg-card-subtle: #1c2030; --bg-pill: rgba(255, 255, 255, 0.07); --bg-pill-hover: rgba(255, 255, 255, 0.12); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(255, 255, 255, 0.45); --accent-color: #3b5bdb; --accent-glow: rgba(59, 91, 219, 0.35); --border-soft: rgba(255, 255, 255, 0.08); --border-highlight: rgba(255, 255, 255, 0.16); --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Roboto Mono', monospace; --font-display: var(--font-sans); --font-body: var(--font-sans); --theme-overlay-opacity: 0; --theme-overlay-blend: normal; --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Global Toast & Bildirim Renk ve Gölge Tokenları */ --toast-success-bg: #10b981; --toast-success-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); --toast-error-bg: #ef4444; --toast-error-shadow: 0 8px 24px rgba(239, 68, 68, 0.45); --toast-warning-bg: #f59e0b; --toast-warning-shadow: 0 8px 24px rgba(245, 158, 11, 0.45); /* Sahne Deseni ve Atmosfer Tokenları */ --stage-pattern: none; --stage-pattern-bg: transparent; --stage-pattern-size: auto; --stage-pattern-width: 100%; --stage-pattern-height: 100%; --stage-pattern-transform: translate(-50%, -50%); --stage-pattern-opacity: 1; --stage-gradient: radial-gradient(circle at 50% 30%, rgba(35, 45, 75, 0.4) 0%, rgba(12, 14, 20, 1) 75%); } /* #endregion */ /* #region 2: CONTAINER QUERY TİPOGRAFİ SKALASI */ :root { --cq-fs-name: clamp(22px, 6.6cqw, 34px); --cq-fs-title: clamp(18px, 5cqw, 26px); --cq-fs-subtitle: clamp(12px, 3.8cqw, 18px); --cq-fs-btn: clamp(12px, 3.6cqw, 16px); --cq-fs-item-title: clamp(12px, 3.4cqw, 17px); --cq-fs-body: clamp(13px, 3.6cqw, 17px); --cq-fs-pill: clamp(11px, 3.2cqw, 15px); --cq-fs-desc: clamp(10px, 2.7cqw, 14px); --cq-fs-mono: clamp(10px, 2.5cqw, 13px); } /* #endregion */ /* #region 3: BUTON VE YÜZEY BOYUT STANDARTLARI */ :root { --card-radius: 24px; --radius-card: var(--card-radius); --radius-btn: 3cqw; --radius-item: 2.5cqw; --radius-pill: 999px; --radius-circle: 50%; --btn-icon-size: 8.5cqw; --btn-icon-svg: 4.5cqw; --btn-nav-padding: 3cqw 4cqw; --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 20px 50px -20px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.1); --shadow-avatar: 0 4px 15px rgba(0, 0, 0, 0.5); --radius-input: 12px; --z-nav: 1000; } /* #endregion */ /* #region 4: ORTAK KART VE COMPANION KONTEYNER STANDARTLARI */ :root { --card-aspect-ratio: 5 / 7; --card-height: min(85vh, 660px); --card-width: auto; --card-max-width: 92vw; --card-narrow-width: min(90vw, 420px); /* Merkezi Tema ve Yüzey Tokenları: Tüm kartlar (Profil, Trophies, Showcase) tek noktadan yönetilir */ --nook-card-bg: var(--bg-card); --nook-card-subtle: var(--bg-card-subtle); --nook-card-border: 1px solid var(--border-soft); --nook-card-radius: 24px; --nook-card-blur: 16px; --nook-card-shadow: var(--shadow-card); --card-radius: var(--nook-card-radius); --card-bg: var(--nook-card-bg); --card-border: var(--nook-card-border); --card-shadow: var(--nook-card-shadow); --stage-gap: clamp(24px, 3.5vw, 48px); --stage-min-gap: 24px; --stage-padding: clamp(20px, 3vw, 40px); /* Eşlikçi Kart (Trophies & Showcase) Tavan ve Gap Standartları */ --companion-padding-top: clamp(26px, 4.2cqh, 42px); --companion-header-gap: clamp(14px, 2.2cqh, 22px); --companion-body-gap: clamp(12px, 1.8cqh, 18px); /* Eşlikçi Kart Liste & Başarım Satırları Tokenları (.companion-row-item) */ --companion-row-bg: rgba(255, 255, 255, 0.03); --companion-row-border: 1px solid rgba(255, 255, 255, 0.07); --companion-row-border-color: rgba(255, 255, 255, 0.07); --companion-row-radius: var(--radius-btn, 10px); --companion-row-padding: 2.2cqh 3.5cqw; --companion-row-hover-bg: rgba(255, 255, 255, 0.07); --companion-row-hover-border-color: rgba(255, 255, 255, 0.16); --companion-row-hover-transform: translateY(-1px); --companion-row-active-transform: scale(0.99); /* Sürükleme / Taşınma (Drag & Drop) Tokenları */ --companion-row-drag-opacity: 0.45; --companion-row-drag-transform: scale(0.97); --companion-row-drag-bg: rgba(59, 91, 219, 0.08); --companion-row-drag-border: dashed 1px var(--accent-color); --companion-row-drag-shadow: 0 0 12px rgba(59, 91, 219, 0.35); } /* #endregion */ /* #region 5: POP-UP SİSTEMİ */ :root { /* Katman skalası: z-index sadece buradan verilir */ --z-modal: 10000; /* Temel modallar */ --z-modal-stacked: 10010; /* Başka modalın üstünden açılanlar */ --z-confirm: 10020; /* Onay / silme penceresi */ --z-toast: 10100; /* Bildirim tostu */ --z-drag: 10200; /* Sürükleme klon portalı */ /* Ortak görünüm */ --radius-modal: 20px; --modal-pad: 20px; --modal-bg: var(--bg-card); --modal-border: 1px solid var(--border-highlight); --modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); --modal-backdrop: rgba(0, 0, 0, 0.8); --modal-blur: 8px; --modal-dur: 0.2s; --modal-dur-close: 0.14s; /* Genişlikler */ --modal-w-sm: min(360px, 92vw); --modal-w-md: min(460px, 92vw); --modal-w-lg: min(520px, 92vw); /* Modal Liste & Seçici Eleman Tokenları */ --modal-item-bg: rgba(255, 255, 255, 0.03); --modal-item-border: 1px solid var(--border-soft); --modal-item-radius: 14px; --modal-item-hover-bg: rgba(59, 91, 219, 0.12); --modal-item-hover-border: var(--accent-color); /* Beta / Devam Eden İçerik Tokenları */ --modal-item-beta-bg: rgba(12, 14, 20, 0.65); --modal-item-beta-border: 1px solid rgba(255, 255, 255, 0.05); --modal-item-beta-opacity: 0.45; /* Onay / Uyarı Pop-up Tokenları (Confirm Modal) */ --confirm-icon-bg: rgba(239, 68, 68, 0.12); --confirm-icon-color: #ef4444; --confirm-icon-border: 1px solid rgba(239, 68, 68, 0.25); --confirm-btn-danger-bg: #ef4444; --confirm-btn-danger-border: 1px solid #dc2626; --confirm-btn-danger-hover: #dc2626; --confirm-btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); --confirm-btn-danger-hover-shadow: 0 6px 18px rgba(239, 68, 68, 0.45); --confirm-btn-cancel-bg: rgba(255, 255, 255, 0.08); --confirm-btn-cancel-border: 1px solid var(--border-soft); --confirm-btn-cancel-hover: rgba(255, 255, 255, 0.14); } /* #endregion */ /* #region 6: HİYERARŞİ, SHOWCASE VE ANİMASYON TOKENLARI */ :root { /* ======================================================== ALTIN, GÜMÜŞ, BRONZ HİYERARŞİ & MADALYA RENKLERİ (İstediğiniz zaman bu hex ve rgba değerlerini doğrudan değiştirebilirsiniz) ======================================================== */ /* 1. ALTIN (Champagne Gold) */ --color-tier-gold: #f59e0b; --color-tier-gold-glow: rgba(245, 158, 11, 0.45); --color-tier-gold-border: rgba(245, 158, 11, 0.75); --color-tier-gold-bg: rgba(245, 158, 11, 0.08); /* 2. PLATİN / GÜMÜŞ (Cyan/Ice Tinted Silver) */ --color-tier-silver: #94a3b8; /* veya hafif parıltılı #38bdf8 */ --color-tier-silver-glow: rgba(148, 163, 184, 0.35); --color-tier-silver-border: rgba(186, 204, 226, 0.65); --color-tier-silver-bg: rgba(148, 163, 184, 0.08); /* 3. BAKIR / BRONZ (Deep Copper) */ --color-tier-bronze: #ea580c; --color-tier-bronze-glow: rgba(234, 88, 12, 0.35); --color-tier-bronze-border: rgba(234, 88, 12, 0.60); --color-tier-bronze-bg: rgba(234, 88, 12, 0.08); /* Skeleton & Shimmer */ --skeleton-base-bg: rgba(255, 255, 255, 0.04); --skeleton-shimmer-bg: linear-gradient( 90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100% ); --skeleton-radius: 12px; /* Düzenleme ve Geçiş Tokenları */ --transition-edit-enter: 0.32s var(--ease-spring); --transition-edit-exit: 0.22s var(--ease-smooth); --transition-morph: 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); /* Mobil Sahne Dikey Düzen Tokenları (Tek Kaynak Clamp Boşluğu) */ --mobile-stage-gap: clamp(8px, 2vh, 18px); /* Vitrin Kartları Arası Dikey Gap Tokenı */ --tops-gap: clamp(14px, 2.2cqh, 20px); } /* 🌟 Dönen Işıltılı Kenarlık (Border Beam) İçin Açı Değişkeni */ @property --beam-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes beamRotate { 0% { --beam-angle: 0deg; } 100% { --beam-angle: 360deg; } } /* #endregion */