/* 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); } /* 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; } @supports (padding: max(0px)) { body { padding-bottom: env(safe-area-inset-bottom); } }