/* 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); } /* Disclaimer banner — her sayfanın altında, alt sekme barının üstünde sticky. */ .disclaimer-banner { position: fixed; left: 0; right: 0; bottom: calc(64px + 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.8rem; padding: 0.4rem 0.75rem; text-align: center; z-index: 9; max-width: 640px; margin: 0 auto; font-weight: 600; } .disclaimer-banner .short { display: inline-block; background: var(--c-disclaimer-fg); color: var(--c-disclaimer-bg); padding: 0 0.4rem; border-radius: 4px; margin-right: 0.4rem; font-weight: 700; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: var(--c-negative); font-size: 0.85rem; } .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); } }