/* CepGen — Minimalist, mobil öncelikli stil katmanı. Tema değişkenleri :root[data-theme="..."] altında tanımlanır; karanlık modu ile aktive olur. */ :root, :root[data-theme="light"] { --c-bg: #f7f7f9; --c-surface: #ffffff; --c-surface-2: #fbfbfd; --c-border: #e6e6ec; --c-text: #1a1d24; --c-text-muted: #6c727f; --c-accent: #1b6ec2; --c-accent-soft: #e7f0fb; --c-positive: #22a06b; --c-negative: #d64545; --c-warn: #d68a45; --c-hero-grad: linear-gradient(135deg, #1b6ec2, #2a8edc); --c-disclaimer-bg: #fff3cd; --c-disclaimer-fg: #5b4a00; --c-disclaimer-border: #ffe69c; --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04); } :root[data-theme="dark"] { --c-bg: #0f1115; --c-surface: #181b21; --c-surface-2: #1e222a; --c-border: #2a2f3a; --c-text: #ebebef; --c-text-muted: #9aa0ad; --c-accent: #5aa9ff; --c-accent-soft: #1c2d44; --c-positive: #4ad295; --c-negative: #ff7a7a; --c-warn: #ffb168; --c-hero-grad: linear-gradient(135deg, #1f3d6d, #2a557a); --c-disclaimer-bg: #3b2f0c; --c-disclaimer-fg: #ffd966; --c-disclaimer-border: #5a4a18; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); color-scheme: dark; } :root { --r-card: 14px; } html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; } a, .btn-link { color: var(--c-accent); text-decoration: none; } a:hover { text-decoration: underline; } .btn-primary { color: #fff; background-color: var(--c-accent); border-color: var(--c-accent); } h1, h2, h3 { letter-spacing: -0.01em; color: var(--c-text); } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } .muted { color: var(--c-text-muted); } .positive { color: var(--c-positive); } .negative { color: var(--c-negative); } .warn { color: var(--c-warn); } .card-cep { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 1rem; box-shadow: var(--shadow-card); margin-bottom: 0.75rem; } .row-cep { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .row-cep + .row-cep { margin-top: 0.4rem; } .label-small { font-size: 0.78rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .value-big { font-size: 1.8rem; font-weight: 600; } .value-mid { font-size: 1.1rem; font-weight: 600; } .progress-cep { background: var(--c-border); height: 6px; border-radius: 999px; overflow: hidden; } .progress-cep > span { display: block; height: 100%; background: var(--c-accent); transition: width 200ms ease; } .progress-cep.over > span { background: var(--c-negative); } .progress-cep.warn > span { background: var(--c-warn); } .form-cep label { display: block; font-size: 0.85rem; color: var(--c-text-muted); margin: 0.25rem 0; } .form-cep input, .form-cep select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--c-border); border-radius: 10px; font-size: 1rem; background: var(--c-surface-2); color: var(--c-text); } .btn-cep { background: var(--c-accent); color: #fff; border: 0; border-radius: 10px; padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; } .btn-cep:hover { filter: brightness(0.95); } .btn-ghost { background: transparent; color: var(--c-accent); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.45rem 0.75rem; cursor: pointer; } .btn-danger-ghost { background: transparent; color: var(--c-negative); border: 1px solid var(--c-border); border-radius: 10px; padding: 0.45rem 0.75rem; cursor: pointer; } .fav-btn { background: transparent; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0.2rem 0.4rem; color: var(--c-text-muted); } .fav-btn.on { color: #f6b73c; } .chip { display: inline-block; padding: 0.2rem 0.55rem; font-size: 0.72rem; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); border: 1px solid var(--c-border); } /* Duraklatılmış takip rozeti (ANC): chip'in uyarı tonlu varyantı. */ .chip-warn { background: color-mix(in srgb, var(--c-warn) 16%, transparent); color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 40%, transparent); font-weight: 600; white-space: nowrap; } /* Bütçe kartı içinde "planlı ödeme var" chip'i — küçük, ayırıcı nokta gibi inline. */ .chip-planned { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: 0.7rem; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-weight: 600; white-space: nowrap; vertical-align: 0.05em; } /* Cashflow KPI grid'i — 2x2 mini kart düzeni. */ .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0; } .kpi-cell { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; } .kpi-cell.positive-tint { background: linear-gradient(135deg, var(--c-surface) 0%, rgba(34,197,94,0.08) 100%); } .kpi-cell.negative-tint { background: linear-gradient(135deg, var(--c-surface) 0%, rgba(239,68,68,0.08) 100%); } .kpi-cell .kpi-label { font-size: 0.72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .kpi-cell .kpi-value { font-size: 1.05rem; font-weight: 700; } .kpi-cell .kpi-sub { font-size: 0.7rem; } /* Cashflow gün başlığı + satırları. */ .cashflow-day-header { padding: 0.4rem 0.75rem; background: var(--c-surface-2); font-size: 0.72rem; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--c-border); } .cashflow-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--c-border); } .cashflow-row:last-child { border-bottom: 0; } /* Sayfa içi ince uyarı şeridi — kart değil, sadece bir bant. Kullanım: gecikmiş ödeme, eksik konfig vs. action-required mesajlar. */ .alert-strip { margin: 0 0 0.75rem; padding: 0.45rem 0.7rem; background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%); border-left: 3px solid #f59e0b; border-radius: 0 8px 8px 0; color: #92400e; font-size: 0.82rem; } .alert-strip strong { color: #78350f; } /* Disclaimer banner — YTD uyarısı tek satır, ince. Footer'ın HEMEN üstünde sticky. Footer'ın altına ERP family linkleri NavMenu.razor.css içinde .family-strip olarak. */ .disclaimer-banner { position: fixed; left: 0; right: 0; /* footer (tab-bar 64 + family-strip ~24 + safe-area) yüksekliğinin üstüne otur */ bottom: calc(64px + 24px + env(safe-area-inset-bottom, 0px)); background: var(--c-disclaimer-bg); color: var(--c-disclaimer-fg); border-top: 1px solid var(--c-disclaimer-border); border-bottom: 1px solid var(--c-disclaimer-border); font-size: 0.7rem; font-weight: 600; line-height: 1.2; padding: 0.3rem 0.7rem; text-align: center; z-index: 9; max-width: 640px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .disclaimer-banner .short { display: inline-block; background: var(--c-disclaimer-fg); color: var(--c-disclaimer-bg); padding: 0 0.35rem; border-radius: 4px; margin-right: 0.35rem; font-weight: 700; font-size: 0.65rem; vertical-align: 0.05em; } .disclaimer-banner .full-text { font-weight: 500; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: var(--c-negative); font-size: 0.85rem; } /* ---- SVG ikonlar (Icon.razor) ---- currentColor kullanır, font-size'a göre 1em x 1em. Metinle inline kullanılabilir; biraz aşağı düşmesin diye baseline'a yapışmıyor — middle. */ .ic { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .ic-button { background: transparent; border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text-muted); padding: 0.3rem 0.45rem; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .ic-button:hover { color: var(--c-text); background: var(--c-surface); } .ic-button.danger:hover { color: var(--c-negative); border-color: var(--c-negative); } /* ---- Login / Register / Forgot ekranları için polish ---- */ .auth-card { max-width: 380px; margin: 2rem auto 1rem; padding: 1.5rem 1.25rem 1.25rem; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-bottom: 1rem; } .auth-brand .auth-logo { width: 56px; height: 56px; border-radius: 18px; background: var(--c-hero-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 16px rgba(27, 110, 194, 0.25); } .auth-brand .auth-title { font-size: 1.25rem; font-weight: 700; color: var(--c-text); margin: 0; } .auth-brand .auth-sub { font-size: 0.85rem; color: var(--c-text-muted); } /* Input içinde leading icon + opsiyonel trailing button (göz aç/kapa) */ .input-wrap { position: relative; } .input-wrap > .ic { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; font-size: 1.05rem; } .input-wrap > input.with-leading { padding-left: 2.25rem !important; } .input-wrap > input.with-trailing { padding-right: 2.4rem !important; } .input-wrap .trailing-btn { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--c-text-muted); cursor: pointer; padding: 0.3rem; line-height: 0; border-radius: 6px; } .input-wrap .trailing-btn:hover { color: var(--c-text); } .auth-divider { text-align: center; color: var(--c-text-muted); font-size: 0.78rem; margin: 0.9rem 0 0.7rem; position: relative; } .auth-divider::before, .auth-divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 2.5rem); height: 1px; background: var(--c-border); } .auth-divider::before { left: 0; } .auth-divider::after { right: 0; } .auth-links { margin-top: 0.8rem; display: flex; justify-content: space-between; font-size: 0.9rem; } .auth-msg { background: var(--c-accent-soft); border: 0; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.88rem; margin-bottom: 0.75rem; color: var(--c-accent); } .auth-err { background: rgba(214, 69, 69, 0.08); border: 1px solid rgba(214, 69, 69, 0.25); color: var(--c-negative); padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.88rem; margin-bottom: 0.75rem; } .btn-cep.full { width: 100%; padding: 0.7rem 1rem; } .blazor-error-boundary { background: var(--c-negative); padding: 1rem; color: white; border-radius: 8px; } /* ============================================================ Dış kaynaklı KRİTİK uyarı (Phase V) Fiyat alarmlarının sarı banner'ından kasten ayrışır: koyu kırmızı gradyan + nabız gibi atan halka + kayan uyarı şeridi + titreyen siren. Renkler tema değişkenlerinden bağımsız — light/dark fark etmeksizin aynı "durdurucu" kırmızı, beyaz metin, AA kontrast. ============================================================ */ .crit-wrap { margin: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .crit-alert { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 0.85rem 0.9rem 0.75rem; color: #fff; background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 45%, #dc2626 100%); border: 1.5px solid #fca5a5; box-shadow: 0 10px 26px rgba(185, 28, 28, 0.45); animation: crit-pulse 1.9s ease-in-out infinite; } /* WARNING seviyesi: aynı dil, düşük şiddet (turuncu, nabız yok). */ .crit-alert.is-warning { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 45%, #ea580c 100%); border-color: #fdba74; box-shadow: 0 8px 20px rgba(194, 65, 12, 0.35); animation: none; } @keyframes crit-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(185, 28, 28, 0.40), 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 10px 26px rgba(185, 28, 28, 0.55), 0 0 0 10px rgba(239, 68, 68, 0); } } /* Üstte soldan sağa kayan ışık şeridi — "canlı/aktif" hissi. */ .crit-stripe { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, #fff 45%, #fecaca 55%, transparent); opacity: 0.9; animation: crit-sweep 2.4s linear infinite; } @keyframes crit-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .crit-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; } .crit-siren { display: inline-flex; font-size: 1.15rem; line-height: 0; animation: crit-shake 1.1s ease-in-out infinite; } @keyframes crit-shake { 0%, 70%, 100% { transform: rotate(0deg) scale(1); } 75% { transform: rotate(-11deg) scale(1.12); } 85% { transform: rotate(11deg) scale(1.12); } } .crit-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .crit-source { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 0.1rem 0.45rem; } .crit-time { margin-left: auto; font-size: 0.7rem; opacity: 0.85; font-variant-numeric: tabular-nums; } .crit-title { font-size: 1.02rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; } .crit-body { margin-top: 0.2rem; font-size: 0.86rem; line-height: 1.45; opacity: 0.95; white-space: pre-wrap; overflow-wrap: anywhere; } .crit-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; } .crit-btn { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.38rem 0.75rem; border-radius: 10px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); transition: background 150ms ease, transform 150ms ease; } .crit-btn:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-1px); color: #fff; } .crit-btn.primary { background: #fff; color: #b91c1c; border-color: #fff; } .crit-btn.primary:hover { background: #fee2e2; color: #7f1d1d; } .crit-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .crit-ackall { align-self: flex-end; font-size: 0.78rem; color: var(--c-negative); text-decoration: underline; } /* Zil ikonu: kritik uyarı varken kırmızı ve pulslu. */ .settings-link.bell.crit { color: var(--c-negative); animation: crit-bell 1.4s ease-in-out infinite; } .settings-link.bell.crit .bell-badge { background: #dc2626 !important; color: #fff !important; } @keyframes crit-bell { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-8deg); } } /* Ayarlar ekranındaki geçmiş kritik uyarı satırı (okunmuş → sakin). */ .crit-log { border-left: 4px solid var(--c-negative); } .crit-log .crit-log-src { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-negative); } @media (prefers-reduced-motion: reduce) { .crit-alert, .crit-stripe, .crit-siren, .settings-link.bell.crit { animation: none !important; } .crit-btn { transition: none; } } @supports (padding: max(0px)) { body { padding-bottom: env(safe-area-inset-bottom); } }