/* ═══════════════════════════════════════════════════════════════════════
Antlaşma — Site CSS
Reset, Typography, Layout ve Utility sınıfları
Tokens.css'e bağımlıdır.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
Bootstrap 5.3 Bridge (v69)
Bootstrap'in --bs-* CSS değişkenlerini bizim tasarım token'larımıza
yönlendirir. Bu sayede .table, .card, .modal, .form-control, .dropdown-menu,
.list-group, .page-link, .alert vb. TÜM Bootstrap komponentleri:
• Light mode'da → beyaz/açık tema (default davranış korunur)
• Dark mode'da → bizim slate paletimizle otomatik renk değiştirir
_Host.cshtml içinde data-bs-theme="dark" zaten set ediliyor; bu blok
yalnızca varsayılan Bootstrap dark paletini bizim premium paletimizle
override eder.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Body */
--bs-body-bg: var(--bg-base);
--bs-body-color: var(--text-body);
--bs-emphasis-color: var(--text-heading);
--bs-secondary-color: var(--text-subtle);
--bs-tertiary-color: var(--text-disabled);
--bs-secondary-bg: var(--bg-surface-2);
--bs-tertiary-bg: var(--bg-surface-3);
--bs-border-color: var(--border);
--bs-border-color-translucent: var(--border-subtle);
--bs-link-color: var(--primary);
--bs-link-hover-color: var(--primary-hover);
/* Table */
--bs-table-color: var(--text-body);
--bs-table-bg: transparent;
--bs-table-border-color: var(--border-subtle);
--bs-table-striped-bg: var(--bg-surface-2);
--bs-table-hover-bg: var(--bg-surface-2);
--bs-table-hover-color: var(--text-heading);
--bs-table-active-bg: var(--accent-soft);
--bs-table-active-color: var(--text-heading);
/* Form */
--bs-form-control-bg: var(--bg-surface);
--bs-form-control-color: var(--text-body);
/* Card / Modal */
--bs-card-bg: var(--bg-surface);
--bs-card-color: var(--text-body);
--bs-card-border-color: var(--border);
--bs-card-cap-bg: var(--bg-surface-2);
--bs-card-cap-color: var(--text-heading);
--bs-modal-bg: var(--bg-surface);
--bs-modal-color: var(--text-body);
--bs-modal-border-color: var(--border);
--bs-modal-header-border-color: var(--border-subtle);
--bs-modal-footer-border-color: var(--border-subtle);
/* Dropdown */
--bs-dropdown-bg: var(--bg-surface);
--bs-dropdown-color: var(--text-body);
--bs-dropdown-border-color: var(--border);
--bs-dropdown-link-color: var(--text-body);
--bs-dropdown-link-hover-bg: var(--bg-surface-2);
--bs-dropdown-link-hover-color: var(--text-heading);
--bs-dropdown-link-active-bg: var(--accent-soft);
--bs-dropdown-link-active-color: var(--primary);
--bs-dropdown-header-color: var(--text-subtle);
/* List group */
--bs-list-group-bg: var(--bg-surface);
--bs-list-group-color: var(--text-body);
--bs-list-group-border-color: var(--border);
--bs-list-group-action-color: var(--text-body);
--bs-list-group-action-hover-bg: var(--bg-surface-2);
--bs-list-group-action-hover-color: var(--text-heading);
--bs-list-group-active-bg: var(--primary);
--bs-list-group-active-color: var(--text-on-accent);
--bs-list-group-active-border-color: var(--primary);
/* Pagination */
--bs-pagination-bg: var(--bg-surface);
--bs-pagination-color: var(--text-body);
--bs-pagination-border-color: var(--border);
--bs-pagination-hover-bg: var(--bg-surface-2);
--bs-pagination-hover-color: var(--text-heading);
--bs-pagination-active-bg: var(--primary);
--bs-pagination-active-color: var(--text-on-accent);
--bs-pagination-active-border-color: var(--primary);
--bs-pagination-disabled-bg: var(--bg-surface);
--bs-pagination-disabled-color: var(--text-disabled);
/* Nav / Navbar / Tabs */
--bs-nav-link-color: var(--text-body);
--bs-nav-link-hover-color: var(--primary);
--bs-nav-tabs-border-color: var(--border);
--bs-nav-tabs-link-active-bg: var(--bg-surface);
--bs-nav-tabs-link-active-color: var(--text-heading);
--bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg-surface);
--bs-navbar-color: var(--text-body);
--bs-navbar-hover-color: var(--primary);
--bs-navbar-active-color: var(--primary);
--bs-navbar-brand-color: var(--text-heading);
/* Accordion */
--bs-accordion-bg: var(--bg-surface);
--bs-accordion-color: var(--text-body);
--bs-accordion-border-color: var(--border);
--bs-accordion-button-bg: var(--bg-surface);
--bs-accordion-button-color: var(--text-heading);
--bs-accordion-button-active-bg: var(--accent-soft);
--bs-accordion-button-active-color: var(--primary);
/* Breadcrumb */
--bs-breadcrumb-divider-color: var(--text-subtle);
--bs-breadcrumb-item-active-color: var(--text-subtle);
}
/* Bootstrap 5.3 native dark mode override — bizim paletimizi kullansın */
[data-bs-theme="dark"] {
--bs-body-bg: var(--bg-base);
--bs-body-color: var(--text-body);
--bs-emphasis-color: var(--text-heading);
--bs-secondary-color: var(--text-subtle);
--bs-tertiary-color: var(--text-disabled);
--bs-secondary-bg: var(--bg-surface-2);
--bs-tertiary-bg: var(--bg-surface-3);
--bs-border-color: var(--border);
--bs-border-color-translucent: var(--border-subtle);
--bs-table-color: var(--text-body);
--bs-table-bg: transparent;
--bs-table-border-color: var(--border-subtle);
--bs-table-striped-bg: var(--bg-surface-2);
--bs-table-striped-color: var(--text-body);
--bs-table-hover-bg: var(--bg-surface-2);
--bs-table-hover-color: var(--text-heading);
--bs-table-active-bg: var(--accent-soft);
--bs-table-active-color: var(--text-heading);
--bs-form-control-bg: var(--bg-surface);
--bs-form-control-color: var(--text-body);
--bs-card-bg: var(--bg-surface);
--bs-card-color: var(--text-body);
--bs-card-border-color: var(--border);
--bs-card-cap-bg: var(--bg-surface-2);
--bs-card-cap-color: var(--text-heading);
--bs-modal-bg: var(--bg-surface);
--bs-modal-color: var(--text-body);
--bs-modal-border-color: var(--border);
--bs-dropdown-bg: var(--bg-surface);
--bs-dropdown-color: var(--text-body);
--bs-dropdown-border-color: var(--border);
--bs-dropdown-link-color: var(--text-body);
--bs-dropdown-link-hover-bg: var(--bg-surface-2);
--bs-dropdown-link-hover-color: var(--text-heading);
--bs-list-group-bg: var(--bg-surface);
--bs-list-group-color: var(--text-body);
--bs-list-group-border-color: var(--border);
--bs-pagination-bg: var(--bg-surface);
--bs-pagination-color: var(--text-body);
--bs-pagination-border-color: var(--border);
--bs-pagination-hover-bg: var(--bg-surface-2);
--bs-pagination-hover-color: var(--text-heading);
--bs-pagination-disabled-bg: var(--bg-surface);
--bs-pagination-disabled-color: var(--text-disabled);
--bs-accordion-bg: var(--bg-surface);
--bs-accordion-color: var(--text-body);
--bs-accordion-border-color: var(--border);
--bs-accordion-button-bg: var(--bg-surface);
--bs-accordion-button-color: var(--text-heading);
/* Bootstrap'in .table-light / .table-dark gibi sabit-renkli varyantlarını
dark mode'da bizim paletimize çekiyoruz — aksi halde tablo başlıkları
hâlâ beyaz arkaplan + siyah text çıkar (Patron'un "beyaz tablo" sorunu). */
--bs-table-light-bg: var(--bg-surface-2);
--bs-table-light-color: var(--text-heading);
--bs-table-light-border-color: var(--border);
--bs-table-dark-bg: var(--bg-surface-3);
--bs-table-dark-color: var(--text-heading);
--bs-table-dark-border-color: var(--border-strong);
--bs-table-warning-bg: var(--warning-soft);
--bs-table-warning-color: var(--warning);
--bs-table-warning-border-color: var(--warning-soft);
--bs-table-success-bg: var(--success-soft);
--bs-table-success-color: var(--success);
--bs-table-success-border-color: var(--success-soft);
--bs-table-danger-bg: var(--danger-soft);
--bs-table-danger-color: var(--danger);
--bs-table-danger-border-color: var(--danger-soft);
--bs-table-info-bg: var(--info-soft);
--bs-table-info-color: var(--info);
--bs-table-info-border-color: var(--info-soft);
--bs-table-active-bg: var(--accent-soft);
--bs-table-active-color: var(--text-heading);
}
/* ─── Bootstrap thead.table-light / thead.table-dark direct overrides ───
Bootstrap bu class'ları --bs-table-* değişkenleri yerine doğrudan
inline-vari renklerle stillendirir (5.3'ün eski uyumluluk katmanı).
Bu nedenle dark mode'da bunları zorla bizim paletimize çekiyoruz.
`:where()` ile spesifite şişirmiyoruz; `!important` Bootstrap'in
`--bs-table-bg` cascadingini geçmek için gerekli. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table > .table-light,
[data-bs-theme="dark"] .table > thead.table-light,
[data-bs-theme="dark"] .table > tbody > tr.table-light,
[data-bs-theme="dark"] .table > thead.table-light > tr > th {
--bs-table-color: var(--text-heading);
--bs-table-bg: var(--bg-surface-2);
--bs-table-border-color: var(--border);
color: var(--text-heading) !important;
background-color: var(--bg-surface-2) !important;
}
[data-bs-theme="dark"] .table-dark,
[data-bs-theme="dark"] .table > .table-dark,
[data-bs-theme="dark"] .table > thead.table-dark,
[data-bs-theme="dark"] .table > tbody > tr.table-dark,
[data-bs-theme="dark"] .table > thead.table-dark > tr > th {
--bs-table-color: var(--text-heading);
--bs-table-bg: var(--bg-surface-3);
--bs-table-border-color: var(--border-strong);
color: var(--text-heading) !important;
background-color: var(--bg-surface-3) !important;
}
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table > tbody > tr.table-warning,
[data-bs-theme="dark"] .table > tbody > tr.table-warning > td {
--bs-table-color: var(--warning);
--bs-table-bg: var(--warning-soft);
--bs-table-border-color: var(--border-subtle);
color: var(--warning) !important;
background-color: var(--warning-soft) !important;
}
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table > tbody > tr.table-success,
[data-bs-theme="dark"] .table > tbody > tr.table-success > td {
--bs-table-color: var(--success);
--bs-table-bg: var(--success-soft);
--bs-table-border-color: var(--border-subtle);
color: var(--success) !important;
background-color: var(--success-soft) !important;
}
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table > tbody > tr.table-danger,
[data-bs-theme="dark"] .table > tbody > tr.table-danger > td {
--bs-table-color: var(--danger);
--bs-table-bg: var(--danger-soft);
--bs-table-border-color: var(--border-subtle);
color: var(--danger) !important;
background-color: var(--danger-soft) !important;
}
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table > tbody > tr.table-info,
[data-bs-theme="dark"] .table > tbody > tr.table-info > td {
--bs-table-color: var(--info);
--bs-table-bg: var(--info-soft);
--bs-table-border-color: var(--border-subtle);
color: var(--info) !important;
background-color: var(--info-soft) !important;
}
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table > tbody > tr.table-secondary,
[data-bs-theme="dark"] .table > tbody > tr.table-secondary > td {
--bs-table-color: var(--text-body);
--bs-table-bg: var(--bg-surface-2);
--bs-table-border-color: var(--border-subtle);
color: var(--text-body) !important;
background-color: var(--bg-surface-2) !important;
}
/* Bootstrap .alert-light, .bg-light, .text-dark gibi sabit-renk yardımcıları
dark mode'da görünmez yazı/beyaz arkaplan üretiyor. Override ediyoruz. */
[data-bs-theme="dark"] .bg-light {
background-color: var(--bg-surface-2) !important;
color: var(--text-heading) !important;
}
[data-bs-theme="dark"] .bg-white {
background-color: var(--bg-surface) !important;
color: var(--text-body) !important;
}
[data-bs-theme="dark"] .text-dark {
color: var(--text-heading) !important;
}
[data-bs-theme="dark"] .text-muted {
color: var(--text-subtle) !important;
}
[data-bs-theme="dark"] .text-black {
color: var(--text-heading) !important;
}
[data-bs-theme="dark"] .alert-light {
background-color: var(--bg-surface-2);
color: var(--text-body);
border-color: var(--border);
}
[data-bs-theme="dark"] .border-light {
border-color: var(--border) !important;
}
[data-bs-theme="dark"] .shadow-sm,
[data-bs-theme="dark"] .shadow {
box-shadow: var(--shadow-md) !important;
}
/* Form elemanları: Bootstrap 5.3 native dark zaten çoğunu yapar, ama
placeholder ve focus state'i bizim accent'a çekelim. */
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
color: var(--text-disabled);
opacity: 1;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
[data-bs-theme="dark"] .form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
}
/* Input-group-text sabit gri default Bootstrap'ten geliyor */
[data-bs-theme="dark"] .input-group-text {
background-color: var(--bg-surface-2);
color: var(--text-body);
border-color: var(--border);
}
/* Bootstrap badge'leri (badge-secondary vb. sabit renk olabilenler) */
[data-bs-theme="dark"] .badge.bg-light {
background-color: var(--bg-surface-2) !important;
color: var(--text-heading) !important;
}
[data-bs-theme="dark"] .badge.text-dark {
color: var(--text-heading) !important;
}
/* Close button (modal X) Bootstrap'in default'ta siyah; dark'ta görünmez */
[data-bs-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* ═══════════════════════════════════════════════════════════════════════
/Bootstrap Bridge sonu
═══════════════════════════════════════════════════════════════════════ */
/* ── Base ─────────────────────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
font-size: 16px; /* Base 16px */
}
body {
font-family: var(--font-sans);
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-color: var(--bg-base);
color: var(--text-body);
line-height: var(--leading-normal);
font-size: var(--text-base);
transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
color: var(--primary-hover);
}
/* ── Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
color: var(--text-heading);
margin-top: 0;
margin-bottom: var(--space-4);
}
.section-title, h1, h2 {
font-weight: 700;
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
}
h3, h4 {
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
}
h1 { font-size: var(--text-4xl); }
@media (min-width: 768px) { h1 { font-size: var(--text-5xl); } }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
.section-eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-2);
display: block;
}
.lead {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--text-body);
}
.text-subtle { color: var(--text-subtle); }
.text-disabled { color: var(--text-disabled); }
/* ── Layout & Spacing ─────────────────────────────────────────────────── */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding-x);
padding-right: var(--container-padding-x);
}
.container-narrow {
max-width: var(--container-narrow);
}
section {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
@media (min-width: 768px) {
section {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
section.section-hero {
padding-top: var(--space-16);
padding-bottom: var(--space-12);
}
@media (min-width: 768px) {
section.section-hero {
padding-top: var(--space-32);
padding-bottom: var(--space-24);
}
}
/* ── Touch Targets & Mobile ───────────────────────────────────────────── */
input, textarea, select {
font-size: max(16px, var(--text-base)); /* iOS zoom fix */
}
* {
-webkit-tap-highlight-color: transparent;
}
/* ── Accessibility ────────────────────────────────────────────────────── */
*:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 9999;
padding: 0.75rem 1.25rem;
background: var(--primary);
color: var(--text-on-accent);
border-radius: var(--radius-md);
font-weight: 600;
}
.skip-link:focus {
top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Transition Utilities ─────────────────────────────────────────────── */
.page-transition-enter {
opacity: 0;
}
.page-transition-enter-active {
opacity: 1;
transition: opacity var(--duration-normal) var(--ease-out);
}
/* ── Bootstrap Essential Overrides (Global Forms & Tables) ────────────── */
table.table {
width: 100%;
color: var(--text-body);
}
.table th, .table td {
padding: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.table th {
font-weight: 600;
color: var(--text-heading);
text-align: left;
}
/* ── Utilities ────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-100 { width: 100%; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
/* ── Navbar ───────────────────────────────────────────────────────────── */
.navbar {
background-color: var(--bg-surface) !important;
border-bottom: 1px solid var(--border) !important;
transition: background-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
}
.navbar-brand {
color: var(--text-heading) !important;
}
.navbar .nav-link {
color: var(--text-body) !important;
font-weight: 500;
transition: color var(--duration-fast) var(--ease-out);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
color: var(--primary) !important;
}
.navbar-toggler {
border-color: var(--border-strong);
}
.navbar-logo {
height: 40px;
width: 40px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: var(--text-lg);
}
/* ── Ripple Effect ─────────────────────────────────────────────────────── */
.ripple-circle {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
/* ── Blazor Error UI ───────────────────────────────────────────────────── */
#blazor-error-ui {
background: var(--bg-surface);
color: var(--text-body);
border-top: 3px solid var(--danger);
box-shadow: var(--shadow-lg);
display: none;
left: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 2000;
padding: var(--space-3) var(--space-4);
align-items: center;
justify-content: space-between;
}
#blazor-error-ui .reload {
background-color: var(--primary);
color: #fff;
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-3);
text-decoration: none;
font-weight: 500;
font-size: var(--text-sm);
margin-left: var(--space-2);
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
/* ── UI Polish Utility Helpers ─────────────────────────────────────────── */
.text-accent {
color: var(--accent) !important;
}
.bg-accent {
background-color: var(--accent) !important;
color: var(--text-on-accent) !important;
}
.bg-accent-soft {
background-color: var(--accent-soft) !important;
color: var(--accent) !important;
}
.border-accent {
border-color: var(--accent) !important;
}
.btn-pill {
border-radius: 50px;
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
transition: all var(--duration-fast) var(--ease-out);
border: 1px solid var(--border);
background-color: var(--bg-surface);
color: var(--text-subtle);
}
.btn-pill:hover {
background-color: var(--bg-surface-2);
color: var(--text-heading);
}
.btn-accent-active {
background-color: var(--accent) !important;
color: var(--text-on-accent) !important;
border-color: var(--accent) !important;
}
.btn-pill-inactive {
background-color: var(--bg-surface) !important;
color: var(--text-subtle) !important;
border-color: var(--border) !important;
}
/* ── Sticky Save Bar ──────────────────────────────────────────────────── */
.sticky-save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-surface);
border-top: 1px solid var(--border-strong);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
z-index: 1080; /* FIX: chat-widget ve topbar'ın üstünde kalsın */
animation: slideUp var(--duration-normal) var(--ease-out);
}
/* FIX: bar açıkken içerik sonu görünür kalsın — Settings sayfası gövdesine ek nefes */
.has-sticky-save-bar, .admin-content { scroll-padding-bottom: 7rem; }
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ── Settings Grid Card hover border ──────────────────────────────────── */
.setting-card {
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.setting-card:hover {
border-color: var(--border-strong) !important;
box-shadow: var(--shadow-md);
}
/* ── Cloud Topbar Reset ────────────────────────────────────────────────── */
.cloud-topbar {
margin: 0 !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--border) !important;
background: var(--bg-surface) !important;
box-shadow: none !important;
}
/* ── Button Overrides (B2B SaaS Amber Theme) ────────────────────────── */
.btn-primary {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: var(--text-on-primary) !important;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
color: var(--text-on-primary) !important;
}
.btn-primary:focus-visible {
box-shadow: 0 0 0 2px var(--border-focus) !important;
}
.btn-outline-primary {
color: var(--accent) !important;
border-color: var(--accent) !important;
background-color: transparent !important;
transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--text-on-accent) !important;
}
.btn-outline-primary:focus-visible {
box-shadow: 0 0 0 2px var(--border-focus) !important;
}
/* ── Custom Theme Overrides ─────────────────────────────────────────── */
.bg-theme-surface {
background-color: var(--bg-surface) !important;
}
.card-title {
color: var(--text-heading) !important;
}
.navbar-nav {
gap: 0.5rem !important;
}
.navbar .nav-link {
white-space: nowrap !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.navbar .dropdown-toggle {
font-size: 0.8rem !important;
}
@media (min-width: 992px) and (max-width: 1200px) {
.nav-premium-text {
display: none !important;
}
.nav-premium .premium-icon {
margin-right: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PREMIUM LAYER (v69) — "Refined Industrial Luxury"
Bu blok dosyanın sonunda; önceki kuralları kasıtlı override eder.
Class isimleri değişmedi — markup'a dokunulmadı.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Atmosfer: zemin ışıması + ince grain ────────────────────────────────── */
/* v70 — SAKİN ZEMİN
Kaldırılanlar ve gerekçeleri:
· background-attachment: fixed → her scroll'da tam sayfa repaint tetikler.
Uzun ihale tablolarında ve mobilde gözle görülür jank yapar.
· mesh gradient katmanları → sürekli compositing maliyeti, görsel gürültü.
Kurumsal bir veri ekranında zemin "fark edilmemelidir"; dikkat içerikte kalmalı. */
body {
font-family: var(--font-sans);
letter-spacing: -0.011em;
background-color: var(--bg-base);
}
/* v70 — GRAIN KATMANI KALDIRILDI
Neden: tam ekran `position: fixed` + `mix-blend-mode: overlay` katmanı, her
karede GPU compositing gerektirir ve scroll performansını düşürür. Ayrıca
grain dekoratif GÜRÜLTÜDÜR — gün boyu tabloya bakan bir kullanıcının gözünü
yorar; "huzurlu kullanım" hedefiyle doğrudan çelişir.
Yan fayda: grain yüzünden `.page, main, header...` öğelerine zorlanan
`z-index: 1` de kalktı. O kural gereksiz stacking context yaratıyor ve
modal/dropdown katmanlarında sonradan çözülmesi zor çakışmalar üretiyordu. */
/* ── Premium Tipografi ──────────────────────────────────────────────────── */
h1, h2, h3, .hero-title, .section-title, .cta-banner h2, .auction-card-title,
.admin-header h1, .admin-header h2, .page-header h1, .page-header h2 {
font-family: var(--font-display);
font-optical-sizing: auto;
font-weight: 600;
letter-spacing: var(--tracking-tight);
}
h1, .hero-title, .section-title {
font-weight: 600;
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
}
h4, h5, h6 { font-family: var(--font-sans); }
/* Sayılar (fiyatlar) tablo-hizalı — auction platformu için kritik */
.stat-card-value, .auction-card-price .value, .hero-stat-value,
.price, [data-numeric] {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.section-eyebrow, .hero-eyebrow {
font-family: var(--font-sans);
}
/* ── Premium Buton Sistemi (amber-only spec) ────────────────────────────── */
.btn {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.005em;
border-radius: var(--radius-md);
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(0); }
.btn-lg {
padding: 0.8rem 1.6rem;
font-size: var(--text-base);
border-radius: var(--radius-lg);
}
.btn-sm { border-radius: var(--radius-sm); }
/* PRIMARY — değerli metal: altın gradient + glow */
.btn-primary {
background-image: var(--accent-gradient) !important;
background-color: var(--accent) !important;
border: 1px solid var(--accent-active) !important;
color: var(--text-on-accent) !important;
box-shadow: var(--shadow-sm), var(--shadow-inset-top);
}
.btn-primary:hover, .btn-primary:focus {
background-image: var(--accent-gradient) !important;
border-color: var(--accent-active) !important;
color: var(--text-on-accent) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-glow), var(--shadow-inset-top);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* SECONDARY — cam / nötr yüzey (mavi default'u eziyoruz) */
.btn-secondary, .btn-light, .btn-outline-secondary {
background-color: var(--bg-surface) !important;
background-image: none !important;
border: 1px solid var(--border-strong) !important;
color: var(--text-heading) !important;
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover,
.btn-secondary:focus, .btn-light:focus, .btn-outline-secondary:focus {
background-color: var(--bg-surface-2) !important;
border-color: var(--accent) !important;
color: var(--text-heading) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* OUTLINE-PRIMARY — altın çerçeve */
.btn-outline-primary {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
background-image: var(--accent-gradient) !important;
border-color: var(--accent-active) !important;
color: var(--text-on-accent) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-glow);
}
/* GHOST — minimal */
.btn-ghost, .btn-link {
background: transparent !important;
border: 1px solid transparent !important;
color: var(--text-body) !important;
box-shadow: none !important;
text-decoration: none !important;
}
.btn-ghost:hover, .btn-link:hover {
background-color: var(--accent-soft) !important;
color: var(--accent) !important;
}
/* SUCCESS / DANGER / DARK — status butonları (tutarlı, solid) */
.btn-success {
background-color: var(--success) !important;
border: 1px solid var(--success) !important;
color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
filter: brightness(1.06); transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-danger {
background-color: var(--danger) !important;
border: 1px solid var(--danger) !important;
color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
filter: brightness(1.06); transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-dark {
background-color: var(--bg-surface-3) !important;
border: 1px solid var(--border-strong) !important;
color: var(--text-heading) !important;
}
.btn-dark:hover, .btn-dark:focus { transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* ── Navbar: cam efekti ─────────────────────────────────────────────────── */
.navbar {
background-color: var(--glass-bg) !important;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border) !important;
transition: background-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
border-bottom-color: var(--border) !important;
}
.navbar-brand { font-family: var(--font-display); font-weight: 600; }
.navbar-logo {
background-image: var(--accent-gradient);
box-shadow: var(--shadow-glow);
font-family: var(--font-sans);
}
/* ── Kart genel (Bootstrap .card premium) ───────────────────────────────── */
.card {
border-radius: var(--radius-lg) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.card.shadow-sm { box-shadow: var(--shadow-md) !important; }
/* ── Form alanları premium ──────────────────────────────────────────────── */
.form-control, .form-select {
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
background-color: var(--bg-surface);
color: var(--text-body);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.form-control:focus, .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
background-color: var(--bg-surface);
color: var(--text-body);
}
/* ── Badge premium ──────────────────────────────────────────────────────── */
.badge {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--radius-full);
padding: 0.32em 0.7em;
}
/* ── Seçim rengi + scrollbar ────────────────────────────────────────────── */
::selection { background: var(--accent-soft-hover); color: var(--text-heading); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
border: 2px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); background-clip: content-box; }
/* ── Sayfa giriş animasyonu (yalnızca public hero — panellerde flash riski yok) ── */
@media (prefers-reduced-motion: no-preference) {
.hero .hero-eyebrow { animation: sac-rise var(--duration-slow) var(--ease-out) both; }
.hero .hero-title { animation: sac-rise var(--duration-slow) var(--ease-out) 80ms both; }
.hero .hero-subtitle{ animation: sac-rise var(--duration-slow) var(--ease-out) 160ms both; }
.hero .hero-cta { animation: sac-rise var(--duration-slow) var(--ease-out) 240ms both; }
@keyframes sac-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTRAST SAFETY & EKSİK DASHBOARD SINIFLARI (v69)
───────────────────────────────────────────────────────────────────────────
Markup'ta kullanılan ama hiçbir CSS'te tanımlı OLMAYAN ~42 custom class
burada tanımlanıyor. Hepsi tema-adaptif: her iki modda da garantili kontrast.
Amaç: "açık üstüne açık" / "koyu üstüne koyu" yazı sorunlarını kökten bitirmek.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Eksik metin yardımcıları (tema-adaptif) ────────────────────────────── */
.text-heading, .text-theme-heading, .dashboard-text-heading, .topbar-title { color: var(--text-heading) !important; }
.text-body, .text-theme-body, .dashboard-text-body { color: var(--text-body) !important; }
.text-theme-muted, .dashboard-text-subtle, .text-subtle-color, .card-subtitle-custom { color: var(--text-subtle) !important; }
/* Renkli istatistik sayıları — kart yüzeyinde her iki modda okunur */
.text-dash-stat-1 { color: var(--accent) !important; }
.text-dash-stat-2 { color: var(--info) !important; }
.text-dash-stat-3 { color: var(--success) !important; }
.text-dash-stat-4 { color: var(--support-accent) !important; }
/* ── KPI / Dashboard kartları ───────────────────────────────────────────── */
.kpi-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kpi-card .card-body { padding: var(--space-5); }
/* Toplam hacim kartı — premium koyu vurgu kartı (HER İKİ MODDA koyu → text-white güvenli) */
.total-volume-card {
background: linear-gradient(140deg, #211f26 0%, #0b0a0d 100%) !important;
border: 1px solid var(--border-strong) !important;
border-top: 3px solid var(--accent) !important;
position: relative; overflow: hidden;
}
.total-volume-card::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 80% at 100% 0%, rgba(240,180,41,0.12) 0%, transparent 60%);
}
.total-volume-card .card-body { position: relative; z-index: 1; }
.total-volume-card .text-white { color: #ffffff !important; }
.total-volume-subtitle { color: rgba(255,255,255,0.72) !important; font-weight: 600; }
.total-volume-desc { color: rgba(255,255,255,0.52) !important; }
/* ── Stat alt-parçaları ─────────────────────────────────────────────────── */
.stat-value { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.stat-icon {
width: 44px; height: 44px; border-radius: var(--radius-md);
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-lg);
}
/* ── Avatar daireleri ───────────────────────────────────────────────────── */
/* :where() = 0 spesifite → markup'taki bg-primary/bg-success utility'leri kazanır.
Ama bg utility YOKSA bu koyu nötr zemin devreye girer → beyaz yazı güvenli. */
:where(.avatar-circle, .avatar-box, .avatar-large, .avatar-small, .avatar, .support-avatar) {
background-color: #3d3a45;
color: #ffffff;
}
.avatar-circle, .avatar-box, .support-avatar {
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full); font-weight: 700; flex-shrink: 0;
}
.avatar-circle, .support-avatar { width: 44px; height: 44px; font-size: var(--text-lg); }
.avatar-box { width: 48px; height: 48px; font-size: var(--text-lg); }
.avatar-large { width: 64px; height: 64px; font-size: var(--text-2xl); border-radius: var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.avatar-small { width: 32px; height: 32px; font-size: var(--text-sm); border-radius: var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.support-avatar { background-color: var(--support-accent); } /* tek başına: mor daire + beyaz */
/* Accent gradient chip — koyu-altın gradient (beyaz yazı okunur, sabit) */
.bg-gradient-accent, .user-avatar-box {
background-image: linear-gradient(135deg, #b8780a 0%, #6b4404 100%) !important;
color: #ffffff !important;
}
/* ── Rol / durum rozetleri (soft zemin + renkli yazı = her iki modda okunur) ─ */
.badge-system-admin { background: var(--danger-soft); color: var(--danger); }
.badge-seller { background: var(--success-soft); color: var(--success); }
.badge-buyer { background: var(--info-soft); color: var(--info); }
.badge-trader { background: var(--accent-soft); color: var(--accent); }
.badge-support { background: rgba(147,51,234,0.12); color: var(--support-accent); }
.badge-pro,
.badge-recommended,
.badge-current { background: var(--accent-soft); color: var(--accent); }
.badge-live { background: var(--success-soft); color: var(--success); }
.badge-neutral,
.badge-status,
.badge-field { background: var(--bg-surface-2); color: var(--text-body); border: 1px solid var(--border); }
.badge-sm, .badge-small-text { font-size: var(--text-xs); padding: 0.28em 0.6em; }
.badge-icon-container {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--radius-sm);
background: var(--accent-soft); color: var(--accent);
}
/* Tüm bu rozetler ortak pill görünümü alsın */
.badge-system-admin, .badge-seller, .badge-buyer, .badge-trader, .badge-support,
.badge-pro, .badge-recommended, .badge-current, .badge-live, .badge-neutral, .badge-status, .badge-field {
display: inline-flex; align-items: center; gap: 0.3em;
font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.01em;
padding: 0.32em 0.7em; border-radius: var(--radius-full);
}
/* ── Flexbox Sticky Footer ── */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#main-content {
flex: 1 0 auto;
padding-bottom: var(--space-24); /* Add extra padding at the bottom of the main content so floating buttons don't get stuck under the footer */
}
/* ── Footer — premium koyu bant (HER İKİ MODDA koyu → text-white güvenli) ── */
.footer {
flex-shrink: 0;
background: linear-gradient(180deg, #161519 0%, #0b0a0d 100%);
border-top: 1px solid var(--border-strong);
padding: var(--space-16) 0 var(--space-10);
margin-top: auto;
position: relative;
z-index: 10;
}
.footer, .footer p, .footer li, .footer .small, .footer small { color: rgba(255,255,255,0.62); }
.footer h5, .footer h6 { color: #ffffff; }
.footer h5 { font-family: var(--font-display); }
.footer-link-hover { transition: color var(--duration-fast) var(--ease-out); }
.footer-link-hover:hover { color: white !important; text-decoration: none; }
.footer .navbar-logo { background-image: var(--accent-gradient); }
.footer hr { border-color: rgba(255,255,255,0.12); }
/* ── Topbar / sidebar yardımcıları ──────────────────────────────────────── */
.topbar-title { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); }
/* Bildirim çanı — tema-adaptif (light modda görünür) */
.notif-bell-btn { color: var(--text-body) !important; }
.notif-bell-btn:hover { color: var(--accent) !important; }
/* Mobil sidebar toggle — yüzen premium buton */
.mobile-sidebar-toggle {
display: none;
position: fixed; top: 14px; left: 14px; z-index: 1100;
width: 44px; height: 44px; border-radius: var(--radius-md);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--border); color: var(--text-heading);
align-items: center; justify-content: center; font-size: var(--text-lg);
box-shadow: var(--shadow-md); cursor: pointer;
}
.sidebar-overlay {
display: none; position: fixed; inset: 0; z-index: 1015;
background: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
@media (max-width: 991.98px) {
.mobile-sidebar-toggle { display: inline-flex; }
.sidebar-overlay.show { display: block; }
}
.logout-btn { width: 42px; height: 42px; }
/* ── KONTRAST SERTLEŞTİRME — kalan kenar durumlar ───────────────────────── */
/* Light modda: text-white yalnızca koyu/renkli zeminde güvenli. Aşağıdaki
bilinen-açık konteynerlerde text-white'ı nötralize ediyoruz (defansif). */
.navbar:not(.scrolled) .text-white,
.cloud-topbar .text-white,
.topbar .text-white { color: var(--text-heading) !important; }
/* btn-info üzerine text-white (açık camgöbeği zeminde zayıf kontrast) → koyu yazı */
.btn-info { color: var(--text-on-accent) !important; }
.btn-info.text-white { color: #06283d !important; }
/* Dark modda Bootstrap'in solid renkli zeminlerinde yazı netliği garantisi */
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-secondary,
[data-bs-theme="dark"] .bg-info,
[data-bs-theme="dark"] .bg-success,
[data-bs-theme="dark"] .bg-danger,
[data-bs-theme="dark"] .bg-dark { color: #ffffff; }
[data-bs-theme="dark"] .bg-warning { color: #1a1407; }
/* Dark modda: yanlışlıkla koyu yazı utility'leri açık zemine düşerse netle */
[data-bs-theme="dark"] .text-body-secondary { color: var(--text-subtle) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
v70 — Dark-mode Bootstrap Utility Köprüsü
───────────────────────────────────────────────────────────────────────────
Denetim bulgusu: razor'da ~370 adet bg-light(129)/text-dark(106)/bg-white(41)
kullanımı var ve Bootstrap 5.3 data-bs-theme bunları FLIP ETMEZ (literal
utility'lerdir) → gece modunda beyaz kutular/okunmaz metin. Hepsini tek tek
düzeltmek yerine bu köprü dark altında token'lara remap eder. Yeni kod
token/utility-doğru yazıldıkça köprü zamanla küçülür.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .bg-light { background-color: var(--bg-surface-2) !important; }
[data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; }
[data-theme="dark"] .text-dark { color: var(--text-heading) !important; }
[data-theme="dark"] .border-light { border-color: var(--border) !important; }
[data-theme="dark"] .table-light > * { background-color: var(--bg-surface-2) !important; color: var(--text-body) !important; }
/* bg-light içindeki ikincil metinler dark'ta da okunur kalsın */
[data-theme="dark"] .bg-light .text-muted,
[data-theme="dark"] .bg-white .text-muted { color: var(--text-subtle) !important; }
/* badge'lerde text-dark kombinasyonu (bg-warning text-dark) zaten koyu zemin
istemiyor — onları köprüden muaf tut.
DARK-BADGE-001: kural yalnızca AÇIK zeminli rozetlere uygulanır. Önceden bütün .badge.text-dark'ı yakalıyordu;
karanlık temada koyulaşan bg-light rozetlerine de koyu yazı basıp okunmaz yapıyordu (ihale sayfasındaki "Satıcı"). */
[data-theme="dark"] .badge.text-dark:is(.bg-warning, .bg-info) { color: var(--text-on-accent) !important; }
/* GLOBAL-FX v1: para birimi seçici rozeti + bilgilendirici çeviri */
.fx-badge { font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: var(--text-heading); }
.fx-badge-sm { display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:6px;
background: var(--accent-soft); color: var(--accent); font-weight:700; }
.fx-indicative { font-style: italic; opacity: .85; }
/* --- Custom Dark Theme Fixes for Create Auction UI --- */
[data-theme="dark"] .create-auction-section-box .form-control[type="file"]::file-selector-button,
[data-bs-theme="dark"] .create-auction-section-box .form-control[type="file"]::file-selector-button {
background-color: var(--bs-primary);
color: white;
border: none;
padding: 0.375rem 0.75rem;
margin-inline-end: 1rem;
border-radius: 4px;
cursor: pointer;
}
[data-theme="dark"] .create-auction-section-box .form-control[type="file"],
[data-bs-theme="dark"] .create-auction-section-box .form-control[type="file"] {
background-color: var(--bg-surface-2, #1a1d20) !important;
border-color: var(--border-color, #495057) !important;
color: var(--text-primary, #f8f9fa) !important;
}
[data-theme="dark"] .create-auction-section-box .input-group .btn-outline-secondary,
[data-bs-theme="dark"] .create-auction-section-box .input-group .btn-outline-secondary {
background-color: var(--bg-surface-2, #1a1d20) !important;
color: var(--text-primary, #f8f9fa) !important;
border-color: var(--border-color, #495057) !important;
}
[data-theme="dark"] .create-auction-section-box .input-group .btn-outline-secondary:hover,
[data-bs-theme="dark"] .create-auction-section-box .input-group .btn-outline-secondary:hover {
background-color: var(--bs-primary) !important;
color: #fff !important;
}
/* FIX: .main-pt MainLayout'ta kullanılıyor ama tanımsızdı → fixed-top navbar
public sayfalarda form/başlık üstünü kapatıyordu. Navbar ~72px + nefes payı. */
.main-pt { padding-top: 96px; }
@media (max-width: 991px) { .main-pt { padding-top: 84px; } }
/* ═══════════════════════════════════════════════════════════════════════════
v70 — CAM YÜZEY (backdrop-filter) KOŞULLU DEVRE DIŞI
───────────────────────────────────────────────────────────────────────────
`backdrop-filter` arkasındaki her pikseli yeniden örnekler; scroll sırasında
ve üst üste binen cam yüzeylerde ölçülebilir maliyet üretir. Masaüstünde
sorun değil, mobilde ve düşük donanımda hissedilir.
ÇÖZÜM: Efekt masaüstünde KORUNUR (marka kimliği), aşağıdaki üç durumda
kapatılır ve yerine opak bir yüzey konur — görünüm bozulmaz, yalnızca
bulanıklık gider:
· dar ekran (mobil/tablet)
· kullanıcı saydamlık azaltma tercihi belirtmişse
· kullanıcı hareket azaltma tercihi belirtmişse (aynı ailede bir tercih)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.glass, .glass-panel, .navbar-glass, .modal-content,
.premium-card, .sidebar-glass, [class*="glass"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--bg-surface);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass, .glass-panel, .navbar-glass, .modal-content,
.premium-card, .sidebar-glass, [class*="glass"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--bg-surface);
}
}
/* ═══ UI-FIX-001: TIKLANABİLİR İLAN KARTI ═══════════════════════════════════
Kartın tamamı tıklanabilir yapıldı (Index.razor, Ihaleler.razor).
Kart ile SARILMADI çünkü içinde zaten bağlantılar var ve iç içe
geçersiz HTML'dir; bunun yerine role="link" + tabindex + onclick kullanıldı.
Bu kurallar o yaklaşımın eksik parçalarını tamamlar:
- imleç değişmezse kullanıcı tıklanabilir olduğunu anlamaz
- klavye odağı görünmezse erişilebilirlik iddiası boş kalır
- iç bağlantılar üstte kalmalı ki kendi hedeflerine gitsinler
════════════════════════════════════════════════════════════════════════ */
.auction-card--clickable { cursor: pointer; }
.auction-card--clickable:focus-visible {
outline: 2px solid var(--bs-primary, #ffc107);
outline-offset: 2px;
}
.auction-card--clickable a { position: relative; z-index: 2; }
/* MOBILE-WEB-001: Antlaşma mobil uygulamasının içindeki web ekranı — uygulamanın kendi üst çubuğu ve
menüsü olduğu için sitenin üst menüsü, alt bilgisi ve yüzen düğmeleri gizlenir. */
html.in-app #mainNav, html.in-app footer.footer { display: none !important; }
html.in-app .main-pt { padding-top: 12px !important; }
/* MOBILE-WEB-002: uygulama içi web ekranında panelin kendi üst çubuğu, yan menüsü ve çerez kutusu gizlenir
(gezinmeyi uygulama yapar; uygulama içinde yalnızca zorunlu çerezler kullanılır, isteğe bağlı çerez yazılmaz). */
html.in-app .cloud-topbar, html.in-app .topbar, html.in-app .mobile-sidebar-toggle, html.in-app #mainSidebar,
html.in-app .sidebar-overlay, html.in-app #cookie-consent { display: none !important; }
html.in-app .admin-content, html.in-app .dashboard-main-content { padding-left: 12px !important; padding-right: 12px !important; }
html.in-app body, html.in-app .app-container { overflow-x: hidden; }
/* PANEL-RESP-001: telefonda panel üst çubuğu satıra sığmıyor, sayfayı yana genişletiyordu */
@media (max-width: 767.98px) {
.app-container { overflow-x: hidden; }
.cloud-topbar { flex-wrap: wrap; gap: .5rem; padding-left: 56px !important; }
.cloud-topbar .topbar-brand small, .cloud-topbar .user-identity, .cloud-topbar .istanbul-clock { display: none !important; }
.cloud-topbar .topbar-actions { gap: .4rem !important; flex-wrap: wrap; }
.cloud-topbar .topbar-actions > a.btn { padding: .35rem .7rem !important; font-size: .82rem; }
.cloud-topbar .user-cloud-widget { padding-right: .25rem !important; }
.cloud-topbar .user-cloud-widget .avatar-circle { margin-right: 0 !important; }
}
/* AUCTION-PAUSE-001: ihale arası duyuru bandı — okunaklı, yüksek kontrast */
.launch-banner { background: #10151a; color: #f3f5f7; border-bottom: 3px solid #F0B429; padding: .9rem 0; font-size: 1rem; line-height: 1.55; }
.launch-banner .container { max-width: 1100px; }
.launch-banner i { color: #F0B429; font-size: 1.1rem; }
.launch-banner b { color: #ffffff; font-weight: 700; }
.launch-banner.on-home { margin-top: 96px; }
@media (max-width: 991px) { .launch-banner.on-home { margin-top: 84px; } .launch-banner { font-size: .95rem; } }
a.launch-banner-cta, a.launch-banner-cta:visited { background: #F0B429; color: #10151a !important; font-weight: 800; border-radius: 99px; padding: .4rem 1.1rem; text-decoration: none; white-space: nowrap; opacity: 1; }
a.launch-banner-cta:hover { background: #ffc94d; color: #10151a !important; }
html.in-app .launch-banner.on-home { margin-top: 0; }
body:has(.launch-banner.on-home) .ihale-hero { padding-top: 32px; }
/* AUCTION-PAUSE-001: ana sayfa açılış öncesi paneli */
.prelaunch { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem 1.6rem; box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.prelaunch-kicker { color: #F0B429; font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }
.prelaunch-title { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin: 0 0 .9rem; }
.prelaunch-steps { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--text-body); font-size: 1rem; line-height: 1.5; }
.prelaunch-steps b { color: var(--text-heading); }
/* AUCTION-PAUSE-001: Duyurular — açılış bilgisi */
.launch-info { background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid #F0B429; border-radius: 18px; padding: 1.5rem; }
.launch-info-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin: .6rem 0 .3rem; }
.launch-info-head p, .launch-info-foot { color: var(--text-body); font-size: 1rem; line-height: 1.55; }
.launch-info-foot { margin: 1rem 0 0; }
.launch-info-foot a { font-weight: 700; }
a.pp-btn.launch-btn, a.pp-btn.launch-btn:visited { background: #F0B429; border-color: #F0B429; color: #10151a !important; font-weight: 800; }
a.pp-btn.launch-btn:hover { background: #ffc94d; border-color: #ffc94d; color: #10151a !important; }
a.pp-btn.launch-btn i { color: #10151a; }
.launch-news-card { height: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem 1.25rem; }
.launch-news-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(240,180,41,.14); color: #F0B429; font-size: 1.1rem; margin-bottom: .6rem; }
.launch-news-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--text-heading); margin: 0 0 .4rem; }
.launch-news-card p { color: var(--text-body); font-size: .95rem; line-height: 1.55; margin: 0; }
.launch-news-card a { font-weight: 700; }
/* ══ FEEDBACK-001: Tavsiye ve Şikâyet ══════════════════════════════════════ */
.fb-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .fb-kinds { grid-template-columns: 1fr; } }
.fb-kind { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; padding: 1.25rem 1.3rem; border-radius: 18px;
background: var(--bg-surface); border: 2px solid var(--border); color: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.fb-kind:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.fb-kind.on { border-color: #F0B429; box-shadow: 0 0 0 4px rgba(240,180,41,.16); }
.fb-kind-ic { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.fb-kind-ic.tip { background: rgba(163,196,132,.18); color: #6f9a4e; }
.fb-kind-ic.bad { background: rgba(220,90,70,.14); color: #c4523f; }
.fb-kind-t { font-size: 1.2rem; font-weight: 800; color: var(--text-heading); }
.fb-kind-d { font-size: .95rem; line-height: 1.5; color: var(--text-body); }
.fb-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.6rem 1.7rem; box-shadow: 0 12px 32px rgba(0,0,0,.06); }
@media (max-width: 640px) { .fb-card { padding: 1.2rem 1.1rem; } }
.fb-label { display: block; font-weight: 700; font-size: .95rem; color: var(--text-heading); margin: 1rem 0 .4rem; }
.fb-input { border-radius: 12px; padding: .7rem .9rem; font-size: 1rem; }
.fb-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.fb-chip { border: 1px solid var(--border); background: var(--bg-surface-2, var(--bg-surface)); color: var(--text-body); border-radius: 999px; padding: .45rem .95rem; font-size: .92rem; font-weight: 600; cursor: pointer; }
.fb-chip.on { background: #F0B429; border-color: #F0B429; color: #10151a; }
.fb-count { text-align: right; font-size: .8rem; color: var(--text-subtle); margin-top: .25rem; }
.fb-muted { color: var(--text-subtle); font-weight: 400; }
.fb-privacy { font-size: .88rem; color: var(--text-subtle); margin: 1rem 0; line-height: 1.5; }
.fb-privacy i { color: #F0B429; margin-right: .3rem; }
.pp-btn.fb-submit { background: #F0B429; border-color: #F0B429; color: #10151a; font-weight: 800; padding: .8rem 1.6rem; font-size: 1.02rem; }
.pp-btn.fb-submit:hover { background: #ffc94d; color: #10151a; }
.pp-btn.fb-submit:disabled { opacity: .6; }
.fb-done { text-align: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 2.4rem 1.5rem; }
.fb-done-ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(163,196,132,.2); color: #6f9a4e; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.fb-done h2 { font-weight: 800; color: var(--text-heading); }
.fb-done p { font-size: 1.02rem; color: var(--text-body); }
/* ══ SEO-GUIDES-001: rehberler ══════════════════════════════════════════ */
.guide-card { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--bg-surface); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); border-color: #F0B429; }
.guide-card-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(240,180,41,.14); color: #F0B429; font-size: 1.15rem; margin-bottom: .3rem; }
.guide-card-k { font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.guide-card-t { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); line-height: 1.3; }
.guide-card-d { font-size: .95rem; color: var(--text-body); line-height: 1.5; flex: 1; }
.guide-card-go { font-weight: 700; color: #c48f12; margin-top: .3rem; }
.guide-crumb { font-size: .9rem; color: var(--text-subtle); margin-bottom: 1rem; }
.guide-crumb a { color: inherit; }
.guide-body { font-size: 1.06rem; line-height: 1.75; color: var(--text-body); }
.guide-body h2 { font-size: 1.35rem; font-weight: 800; color: var(--text-heading); margin: 1.8rem 0 .6rem; }
.guide-body ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.guide-body li { margin-bottom: .35rem; }
.guide-body b { color: var(--text-heading); }
.guide-note { background: rgba(240,180,41,.10); border-left: 4px solid #F0B429; border-radius: 10px; padding: .75rem 1rem; font-size: .97rem; }
.guide-cta { margin-top: 1.8rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border); font-weight: 600; }
.guide-cta a { color: #c48f12; font-weight: 800; }
.guide-more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.guide-more h2 { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); }
.guide-more a { font-weight: 600; }
/* SEO-GROWTH-002: rehberde alt başlık, sıralı adımlar ve görünür güncelleme tarihi */
.guide-body h3 { font-size: 1.12rem; font-weight: 800; color: var(--text-heading); margin: 1.3rem 0 .45rem; }
.guide-body ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.guide-updated { font-size: .88rem; color: var(--text-subtle); margin: -.5rem 0 1.2rem; }
/* FRONT-FOOTER-001: alt bilgi sosyal simgeleri (koyu zeminde açık simge) */
.ft-social { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #f3f5f7; background: transparent; text-decoration: none; transition: background .15s, border-color .15s; }
.ft-social:hover, .ft-social:focus-visible { background: rgba(255,255,255,.1); border-color: #F0B429; color: #F0B429; }
/* FRONT-LEAN-001: açılış bandı tek satır, sade */
.launch-banner { padding: .55rem 0; font-size: .92rem; }
/* FRONT-BOOT-001: uygulama bağlanana kadar boş ekran yerine marka iskeleti */
#boot-shell { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; background: var(--bg-body, #f6f7f9); }
#boot-shell .bs-bar { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-bottom: 1px solid rgba(0,0,0,.06); font: 800 1.15rem system-ui, sans-serif; color: #10151a; }
#boot-shell .bs-bar img { width: 28px; height: 28px; }
#boot-shell .bs-line { height: 3px; width: 30%; background: #F0B429; animation: bsmove 1.1s ease-in-out infinite; }
@keyframes bsmove { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
[data-theme="dark"] #boot-shell { background: #0f1317; } [data-theme="dark"] #boot-shell .bs-bar { color: #f3f5f7; border-color: rgba(255,255,255,.08); }
/* HOME-DEDUP-001: ana sayfa slider'ı masaüstünde alçak */
@media (min-width: 992px) { #mainHeroDisplay { --hero-ar: 3 / 1; } }
/* ═══════════════════════════════════════════════════════════════════════════
Antlaşma — Homepage · "Refined Industrial Luxury"
Hero · canlı ihaleler · kategori · trust · CTA · testimonials
Class isimleri v68 ile birebir. Tokens.css'e bağımlı.
═══════════════════════════════════════════════════════════════════════════ */
/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 640px;
color: var(--text-heading);
overflow: hidden;
display: flex;
align-items: center;
padding-top: var(--space-20);
padding-bottom: var(--space-16);
}
/* katmanlı ışıma — altın halo */
.hero::before {
content: "";
position: absolute;
top: -30%;
left: 50%;
transform: translateX(-50%);
width: 1100px;
height: 700px;
background: radial-gradient(circle at 50% 40%, var(--accent-glow) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* ince ızgara dokusu — endüstriyel referans */
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--border-subtle) 1px, transparent 1px),
linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 0%, transparent 75%);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
@media (min-width: 768px) {
.hero { padding-top: var(--space-32); padding-bottom: var(--space-24); }
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 1rem;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--accent-soft-hover);
color: var(--accent);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.hero-eyebrow .dot {
width: 7px; height: 7px; border-radius: var(--radius-full);
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
animation: pulse 1.8s ease-in-out infinite;
}
.hero-title {
font-family: var(--font-display);
font-optical-sizing: auto;
color: var(--text-heading);
font-size: var(--text-hero);
font-weight: 600;
line-height: 0.98;
letter-spacing: var(--tracking-tighter);
margin-bottom: var(--space-6);
text-wrap: balance;
}
.hero-title .text-accent {
color: var(--accent);
font-style: italic; /* Fraunces italik — editöryel lüks vurgu */
}
.hero-subtitle {
color: var(--text-subtle);
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
max-width: 620px;
margin-bottom: var(--space-8);
}
.hero.text-center .hero-subtitle { margin-left: auto; margin-right: auto; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero.text-center .hero-cta { justify-content: center; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 560px; }
.hero-stat {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.hero-stat-value {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 600;
color: var(--accent);
letter-spacing: var(--tracking-tighter);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.hero-stat-label {
font-size: var(--text-xs); color: var(--text-subtle); margin-top: var(--space-2);
text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
/* ── LIVE MARKET ───────────────────────────────────────────────────────── */
.market-header {
display: flex; align-items: end; justify-content: space-between;
gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap;
}
.live-pill {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 0.35rem 0.85rem; background: var(--success-soft); color: var(--success);
border: 1px solid var(--success-soft); border-radius: var(--radius-full);
font-size: var(--text-sm); font-weight: 700;
}
.live-pill .dot {
width: 7px; height: 7px; border-radius: var(--radius-full);
background: var(--success); box-shadow: 0 0 0 4px var(--success-soft);
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.82); }
}
/* ── AUCTION CARDS — premium derinlik + lift + altın kenar ──────────────── */
.auction-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-5);
}
.auction-card {
position: relative;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--text-body);
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
/* üstte ince altın çizgi — hover'da belirir */
.auction-card::after {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent-gradient);
transform: scaleX(0); transform-origin: left;
transition: transform var(--duration-normal) var(--ease-out);
}
.auction-card:hover {
transform: translateY(-6px);
border-color: var(--border-strong);
box-shadow: var(--shadow-lg);
}
.auction-card:hover::after { transform: scaleX(1); }
.auction-card-image {
aspect-ratio: 16/10;
background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface-3));
background-size: cover; background-position: center;
position: relative;
}
.auction-status-badge {
position: absolute; top: var(--space-3); left: var(--space-3);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
color: var(--text-heading);
}
.auction-card-body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.auction-card-title {
font-family: var(--font-display);
color: var(--text-heading); font-weight: 600; font-size: var(--text-lg);
line-height: var(--leading-snug); margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.auction-title-link { color: inherit; text-decoration: none; }
.auction-title-link:hover { color: var(--accent); }
.auction-card-meta { color: var(--text-subtle); font-size: var(--text-sm); line-height: var(--leading-snug); }
.auction-card-time { font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
.auction-card-price {
margin-top: auto; padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
display: flex; justify-content: space-between; align-items: end;
}
.auction-card-price .label {
font-size: var(--text-xs); text-transform: uppercase;
letter-spacing: var(--tracking-wide); color: var(--text-subtle);
}
.auction-card-price .value {
font-family: var(--font-display);
font-size: var(--text-2xl); font-weight: 600; color: var(--text-heading);
font-variant-numeric: tabular-nums; line-height: 1;
}
/* ── CATEGORY CARDS ─────────────────────────────────────────────────────── */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.category-card {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
padding: var(--space-6); background: var(--bg-surface);
border: 1px solid var(--border); border-radius: var(--radius-lg);
color: var(--text-body); text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.category-card:hover {
transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md);
}
.category-card .icon {
width: 52px; height: 52px; border-radius: var(--radius-md);
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xl);
transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.category-card:hover .icon { background: var(--accent-soft-hover); transform: scale(1.06); }
.category-card .name { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); font-size: var(--text-lg); }
.category-card .desc { color: var(--text-subtle); font-size: var(--text-sm); }
/* ── TRUST BAND ─────────────────────────────────────────────────────────── */
.trust-band {
background: var(--bg-surface-2);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: var(--space-16) 0;
}
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.trust-item { text-align: center; padding: var(--space-6); }
.trust-item-icon {
width: 68px; height: 68px; margin: 0 auto var(--space-4);
border-radius: var(--radius-full);
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-2xl);
box-shadow: inset 0 0 0 1px var(--accent-soft-hover);
transition: transform var(--duration-normal) var(--ease-spring);
}
.trust-item:hover .trust-item-icon { transform: translateY(-4px) scale(1.04); }
.trust-item h6 { font-family: var(--font-display); color: var(--text-heading); font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.trust-item p { color: var(--text-subtle); font-size: var(--text-sm); margin: 0; }
/* ── CTA BANNER — dramatik altın ───────────────────────────────────────── */
.cta-banner {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface) 100%);
color: var(--text-heading);
border: 1px solid var(--border);
border-radius: var(--radius-2xl);
padding: var(--space-20) var(--space-16);
box-shadow: var(--shadow-lg);
text-align: center;
}
.cta-banner::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(50% 80% at 0% 0%, var(--accent-soft) 0%, transparent 55%),
radial-gradient(50% 80% at 100% 100%, var(--accent-soft) 0%, transparent 55%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600;
margin-bottom: var(--space-3); letter-spacing: var(--tracking-tighter);
}
.cta-banner p { color: var(--text-subtle); font-size: var(--text-lg); margin: 0 auto var(--space-8); max-width: 560px; }
/* ── PARTNER LOGOS ──────────────────────────────────────────────────────── */
.partner-logos {
background: transparent;
border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
padding: var(--space-10) 0;
}
.partner-logo {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight: 600; color: var(--text-subtle);
filter: grayscale(100%); opacity: 0.55;
transition: opacity var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
display: inline-flex; align-items: center;
}
.partner-logo:hover { filter: grayscale(0%); opacity: 1; color: var(--text-heading); }
/* ── TESTIMONIALS — cam kartlar + tırnak aksanı ─────────────────────────── */
.testimonials { background: transparent; border-top: 1px solid var(--border-subtle); padding: var(--space-20) 0; }
.testimonial-card {
position: relative; overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--space-6); height: 100%; display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.testimonial-card::before {
content: "\201C"; /* dekoratif tırnak */
position: absolute; top: -0.35em; right: 0.25em;
font-family: var(--font-display);
font-size: 7rem; line-height: 1; color: var(--accent-soft-hover);
pointer-events: none;
}
.testimonial-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.testimonial-card .avatar { background-image: var(--accent-gradient) !important; color: var(--text-on-accent) !important; box-shadow: var(--shadow-sm); }
.testimonial-card .card-text { color: var(--text-body); line-height: var(--leading-relaxed); }
.testimonial-card .text-warning { color: var(--accent) !important; }
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.hero { min-height: auto; }
.hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.hero-stat { padding: var(--space-3); }
.hero-stat-value { font-size: var(--text-xl); }
.cta-banner { padding: var(--space-12) var(--space-5); }
.auction-card:hover { transform: translateY(-3px); }
}
/* ── v70: Yaklaşan İhaleler şeridi (önceki inline hardcoded gradient yerine) ── */
.upcoming-strip {
background:
radial-gradient(60% 80% at 10% 0%, var(--accent-soft) 0%, transparent 60%),
var(--bg-surface-2);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.upcoming-strip .section-title { color: var(--text-heading); }
.upcoming-card {
width: 260px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
overflow: hidden;
}
.upcoming-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.upcoming-card .card-img-top { height: 130px; object-fit: cover; }
.upcoming-card .upcoming-title { color: var(--text-heading); }
.upcoming-card .upcoming-count { color: var(--info); }
.upcoming-card .btn-upcoming {
display: block; width: 100%;
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: .4rem;
font-size: var(--text-sm); font-weight: 600;
color: var(--text-heading); text-align: center; text-decoration: none;
transition: background .15s ease;
}
.upcoming-card .btn-upcoming:hover { background: var(--accent-soft); border-color: var(--accent); }
/* Anasayfa hero slider */
.hero-carousel-section .hero-bg-wrapper {
height: 100%;
width: 100%;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
background-color: var(--bg-surface-2);
display: flex;
align-items: flex-end;
}
.hero-carousel-section .hero-content-overlay {
width: 100%;
padding: 1.5rem 2rem;
background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.1) 70%, transparent);
color: #fff;
pointer-events: none;
}
.hero-carousel-section .hero-content-overlay > * {
pointer-events: auto;
}
.hero-carousel-section .hero-content-overlay h3 {
color: #fff;
font-size: clamp(1.2rem, 3vw, 1.75rem);
}
.hero-carousel-section .hero-content-overlay p {
font-size: clamp(0.85rem, 2vw, 1rem);
}
@media (max-width: 576px) {
.hero-carousel-section .hero-content-overlay {
padding: 0.75rem 1rem;
}
}
.btn-xs {
padding: 0.22rem 0.6rem;
font-size: 0.75rem;
line-height: 1.2;
}
/* AUCTION-FOCUS-001: ihale önce — ana sayfa üst bölümü */
.ihale-hero { padding: 104px 0 28px; background:
radial-gradient(1200px 400px at 85% -10%, rgba(240,180,41,.12), transparent 60%),
linear-gradient(180deg, var(--bg-surface-2), var(--bg-base)); border-bottom: 1px solid var(--border-subtle, var(--border)); }
@media (max-width: 991px) { .ihale-hero { padding-top: 92px; } }
.ihale-hero-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--text-heading); margin: .4rem 0 .8rem; letter-spacing: -.01em; }
.ihale-hero-lead { color: var(--text-body); font-size: 1.05rem; line-height: 1.6; max-width: 620px; margin-bottom: 1.2rem; }
.ihale-path { display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 1.2rem; border-radius: 16px; text-decoration: none;
background: var(--bg-surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ihale-path:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.10); border-color: var(--accent); }
.ihale-path-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.ihale-path-ic.up { background: rgba(52,201,138,.14); color: var(--success, #1e9e6a); }
.ihale-path-ic.down { background: rgba(76,134,190,.16); color: var(--primary); }
.ihale-path-t { font-weight: 800; font-size: 1.12rem; color: var(--text-heading); }
.ihale-path-d { color: var(--text-subtle); font-size: .92rem; line-height: 1.5; flex: 1; }
.ihale-path-go { color: var(--accent); font-weight: 700; font-size: .92rem; }
.ihale-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.ihale-types span { font-size: .78rem; padding: .25rem .65rem; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-subtle); }
@media (max-width: 575px) { .ihale-hero { padding-top: 112px; } .ihale-hero-lead { font-size: .98rem; } }
/* ═══════════════════════════════════════════════════════════════════════════
Antlaşma — Dashboard · "Refined Industrial Luxury"
Admin · Seller · Buyer · Trader · Auditor · Support panelleri
Class isimleri v68 ile birebir. Tokens.css'e bağımlı.
═══════════════════════════════════════════════════════════════════════════ */
/* ── PANEL LAYOUT ───────────────────────────────────────────────────────── */
.app-container { background-color: var(--bg-base); min-height: 100vh; display: flex; }
.main-wrapper {
flex-grow: 1; display: flex; flex-direction: column;
min-height: 100vh; min-width: 0; background-color: var(--bg-content);
}
.dashboard-main-content, .admin-content, .dashboard-content, .panel-content {
padding: var(--space-8); flex-grow: 1;
}
/* ── SIDEBAR — cam + altın aktif durum ──────────────────────────────────── */
.sidebar, .premium-sidebar {
background: var(--bg-surface);
border-right: 1px solid var(--border);
width: 264px; height: 100vh; position: sticky; top: 0;
display: flex; flex-direction: column; flex-shrink: 0; z-index: 1020;
padding: var(--space-4);
}
.sidebar-brand {
padding: var(--space-2) var(--space-3) var(--space-6);
display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
}
.sidebar-brand .brand-text {
font-family: var(--font-display);
color: var(--text-heading); font-weight: 600; font-size: var(--text-lg);
letter-spacing: var(--tracking-tight);
}
.sidebar-nav { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sidebar-heading, .sidebar-section-label {
font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider);
text-transform: uppercase; color: var(--text-disabled);
padding: var(--space-4) var(--space-3) var(--space-2);
}
.sidebar-heading:first-child, .sidebar-section-label:first-child { padding-top: 0; }
.sidebar-link {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
color: var(--text-subtle); font-size: var(--text-sm); font-weight: 500;
text-decoration: none; position: relative;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.sidebar-link:hover { background: var(--bg-surface-2); color: var(--text-heading); }
.sidebar-link.active {
background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.sidebar-link.active::before {
content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
width: 3px; height: 62%; background: var(--accent-gradient);
border-radius: var(--radius-full); box-shadow: 0 0 8px var(--accent-glow);
}
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-footer { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); margin-top: auto; }
/* ── TOPBAR — cam ───────────────────────────────────────────────────────── */
.topbar, .cloud-topbar {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--border);
padding: var(--space-3) var(--space-8);
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 1010;
}
.topbar-brand h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.user-cloud-widget { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.user-identity { display: flex; flex-direction: column; }
.user-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-heading); }
.user-role { font-size: var(--text-xs); color: var(--text-subtle); }
/* ── STAT CARDS — premium derinlik + altın aksan ───────────────────────── */
.stat-card {
position: relative; overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.stat-card::before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
background: var(--accent-gradient); opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out);
}
.stat-card:hover {
transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md);
}
.stat-card:hover::before { opacity: 1; }
.stat-card-label {
font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide);
text-transform: uppercase; color: var(--text-subtle);
}
.stat-card-value {
font-family: var(--font-display);
font-size: var(--text-4xl); font-weight: 600; letter-spacing: var(--tracking-tighter);
color: var(--text-heading); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-card-delta {
display: inline-flex; align-items: center; gap: var(--space-1);
font-size: var(--text-xs); font-weight: 600; color: var(--success); margin-top: var(--space-2);
}
.stat-card-delta.negative { color: var(--danger); }
.stat-card.bg-primary, .stat-card.bg-success, .stat-card.bg-warning, .stat-card.bg-danger, .stat-card.bg-info,
.stat-card.stat-primary, .stat-card.stat-success, .stat-card.stat-warning, .stat-card.stat-danger, .stat-card.stat-purple {
background: var(--bg-surface) !important; color: var(--text-body) !important;
}
/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.admin-header, .page-header {
margin-bottom: var(--space-8); padding-bottom: var(--space-5);
border-bottom: 1px solid var(--border-subtle);
}
.admin-header h1, .admin-header h2, .page-header h1, .page-header h2 {
font-family: var(--font-display);
color: var(--text-heading); font-weight: 600; letter-spacing: var(--tracking-tighter);
margin-bottom: var(--space-2);
}
.admin-header .lead, .page-header .lead { color: var(--text-subtle); font-size: var(--text-sm); margin: 0; }
/* ── DASHBOARD TABLES — premium ─────────────────────────────────────────── */
.dashboard-table, .premium-table {
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.dashboard-table table, .premium-table table { margin: 0; width: 100%; }
.dashboard-table thead, .premium-table thead { background-color: var(--bg-surface-2); }
.dashboard-table th, .premium-table th {
color: var(--text-subtle); font-size: var(--text-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: var(--tracking-wide);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--border); text-align: left;
}
.dashboard-table td, .premium-table td {
padding: var(--space-4) var(--space-5); color: var(--text-body);
border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
}
.dashboard-table tbody tr:last-child td, .premium-table tbody tr:last-child td { border-bottom: none; }
.dashboard-table tbody tr, .premium-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.dashboard-table tbody tr:hover, .premium-table tbody tr:hover { background-color: var(--bg-surface-2); }
/* ── MOBILE ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
.sidebar, .premium-sidebar {
position: fixed; transform: translateX(-100%);
transition: transform var(--duration-normal) var(--ease-out);
box-shadow: var(--shadow-xl);
}
.sidebar.show, .premium-sidebar.show { transform: translateX(0); }
.dashboard-main-content, .admin-content, .dashboard-content, .panel-content { padding: var(--space-4); }
.topbar, .cloud-topbar { padding: var(--space-3) var(--space-4); }
}
/* ═══════════════════════════════════════════════════════════════════════════
UI-DENSITY-001 — Yönetim ekranlarında nefes payı
───────────────────────────────────────────────────────────────────────────
"Ferahlık" hissi renkten değil boşluktan gelir. Ölçek zaten tam
(--space-0..32); sorun kartların ölçeğin ALT ucunu kullanmasıydı.
Burada yalnızca yönetim/panel yüzeylerini gevşetiyoruz — pazar
sayfalarının yoğunluğu bilinçli, ona dokunulmuyor.
═══════════════════════════════════════════════════════════════════════════ */
.dashboard-main-content .card {
border-radius: var(--radius-lg);
}
.dashboard-main-content .card-body { padding: var(--space-6); }
.dashboard-main-content .card + .card { margin-top: var(--space-4); }
.dashboard-main-content .row > [class^="col"] { margin-bottom: var(--space-4); }
/* Bölüm başlıkları arasında görsel nefes — ekran "duvar" gibi okunmasın. */
.dashboard-main-content section + section,
.dashboard-main-content .dashboard-section + .dashboard-section { margin-top: var(--space-8); }
/* Tablo satırları: 8px'lik dikey padding satırları birbirine yapıştırıyordu. */
.dashboard-main-content .table > :not(caption) > * > * {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
@media (max-width: 767.98px) {
/* Mobilde aynı boşluk ekranı yer, bir kademe sıkılaştır. */
.dashboard-main-content .card-body { padding: var(--space-4); }
}
/* ═══════════════════════════════════════════════════════════════════════════
SET-FIND-001 — Ayarlar ekranı: arama, sekme sayacı, sonuç rozeti
Tüm değerler token'dan; dark mode otomatik.
═══════════════════════════════════════════════════════════════════════════ */
.settings-search .input-group-text,
.settings-search .form-control {
background: var(--bg-surface);
border-color: var(--border);
}
.settings-search .form-control:focus {
box-shadow: none;
border-color: var(--color-primary-500);
}
/* Sekme başına ayar sayısı — boş sekmeye tıklamayı gereksiz kılar. */
.tab-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.35rem; height: 1.35rem; padding: 0 var(--space-1);
border-radius: var(--radius-full, 999px);
font-size: var(--text-xs); font-weight: 700; line-height: 1;
background: var(--bg-surface-3); color: var(--text-subtle);
}
.btn-accent-active .tab-count {
background: var(--bg-surface); color: var(--text-heading);
}
/* Arama sonucunda ayarın hangi sekmeye ait olduğunu gösteren rozet:
kullanıcı hem ayarı bulur hem yerini öğrenir. */
.search-hit { display: flex; flex-direction: column; }
.search-hit-tab {
display: inline-flex; align-items: center; gap: var(--space-1);
margin-bottom: var(--space-1);
font-size: var(--text-xs); font-weight: 600;
color: var(--text-subtle);
}
.search-hit-tab i { opacity: .7; }
/* ═══════════════════════════════════════════════════════════════════════════
CONTRAST-001 — HER ZAMAN KOYU OLAN YÜZEYLER
───────────────────────────────────────────────────────────────────────────
Sorun: Giriş sayfasının sol paneli gibi bazı yüzeylerin arka planı SABİT
koyu (gradient ile), ama içindeki metin TEMAYA BAĞLI token kullanıyor
(.text-muted, --text-subtle, --text-disabled). Bu token'lar açık temada
koyu gri değer alır → koyu lacivert zeminde metin okunamaz hâle gelir.
Ekran görüntüsündeki "siyah üstüne siyah yazı" tam olarak budur ve yalnızca
AÇIK temada görünür; karanlık temada tesadüfen düzgün görünür.
Çözüm: Arka planı sabit koyu olan yüzeyleri işaretleyip metin token'larını
o kapsam içinde açık değerlere sabitliyoruz. Temaya bağlı olmaktan çıkıyor,
çünkü yüzeyin kendisi de temaya bağlı değil.
Yeni bir sabit-koyu bölüm eklerken kapsayıcıya .on-dark-surface ekleyin.
═══════════════════════════════════════════════════════════════════════════ */
.login-left-panel,
.on-dark-surface {
--text-body: rgba(255, 255, 255, .92);
--text-heading: #ffffff;
--text-subtle: rgba(255, 255, 255, .72);
--text-muted: rgba(255, 255, 255, .64);
--text-disabled: rgba(255, 255, 255, .48);
--border: rgba(255, 255, 255, .16);
color: var(--text-body);
}
/* Bootstrap yardımcı sınıfları !important taşıdığı için token override'ı
tek başına yetmiyor; bu kapsamda onları da bastırıyoruz. */
.login-left-panel .text-muted,
.on-dark-surface .text-muted { color: var(--text-muted) !important; }
.login-left-panel .text-subtle,
.on-dark-surface .text-subtle { color: var(--text-subtle) !important; }
.login-left-panel .text-dark,
.on-dark-surface .text-dark { color: var(--text-heading) !important; }
.login-left-panel .text-body,
.on-dark-surface .text-body { color: var(--text-body) !important; }
/* Tersi durum: her zaman AÇIK olan yüzeylerde (beyaz kart, yazdırma görünümü)
karanlık temada açık metin beyaz zemine düşüyordu. */
.on-light-surface {
--text-body: #1f2937;
--text-heading: #0f172a;
--text-subtle: #475569;
--text-muted: #64748b;
--text-disabled: #94a3b8;
--border: #e2e8f0;
color: var(--text-body);
}
.on-light-surface .text-muted { color: var(--text-muted) !important; }
.on-light-surface .text-white { color: var(--text-heading) !important; }
/* ── DASHBOARD FOOTER · TEMA UYUMLU ───────────────────────────────────────── */
.dashboard-footer,
.trader-footer,
.buyer-footer,
.admin-footer,
.seller-footer,
.dashboard-main-content .footer,
.main-wrapper .footer,
.app-container .footer {
background: var(--bg-surface) !important;
background-color: var(--bg-surface) !important;
background-image: none !important;
color: var(--text-subtle) !important;
border-top: 1px solid var(--border) !important;
padding: var(--space-4) 0 !important;
}
.dashboard-footer span,
.trader-footer span,
.buyer-footer span,
.admin-footer span,
.seller-footer span,
.dashboard-main-content .footer span,
.main-wrapper .footer span,
.app-container .footer span {
color: var(--text-subtle) !important;
}
/* SIDEBAR-COLLAPSE-001: açılır-kapanır menü bölümleri */
.sb-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.sb-toggle:hover { opacity: 1; filter: brightness(1.25); }
.sb-chev { font-size: .6rem; opacity: .6; transition: transform .2s ease; transform: rotate(-90deg); }
.sb-sec.open .sb-chev { transform: rotate(0deg); }
.sb-sec .sb-body { display: none; }
.sb-sec.open .sb-body { display: block; }
/* ═══════════════════════════════════════════════════════════════════════════
Antlaşma — premium.css · Üyelik Tier Kartları
───────────────────────────────────────────────────────────────────────────
Premium.razor'daki semantik hook'lar (tier-card, data-tier, tier-recommended
vb.) bugüne kadar HİÇBİR css'te tanımlı değildi → sayfa stilsiz render
oluyordu. Bu dosya o sistemi tokens.css üzerinden kurar:
· tüm renkler token → gece/gündüz otomatik uyumlu
· --tier-*-gradient token'ları İLK KEZ kullanılıyor
· cam yüzey + atmosferik glow + editöryel tipografi (v69 esteti)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero ─────────────────────────────────────────────────────────────── */
.premium-hero {
text-align: center;
padding: 3.5rem 1rem 1.5rem;
}
.premium-hero h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-heading);
margin-bottom: 0.5rem;
}
.premium-hero h1 .accent { color: var(--accent); }
.premium-lead {
color: var(--text-subtle);
font-size: var(--text-lg);
max-width: 560px;
margin: 0 auto;
}
/* ── Bölüm ────────────────────────────────────────────────────────────── */
.premium-tiers-section {
position: relative;
padding: 1.5rem 0 4rem;
}
.premium-tiers-section::before { /* atmosferik ışıma */
content: "";
position: absolute; inset: 0;
background: var(--mesh-1), var(--mesh-2);
pointer-events: none;
}
/* ── Kart ─────────────────────────────────────────────────────────────── */
.tier-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.75rem 1.5rem 1.5rem;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow-md);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
overflow: hidden;
}
.tier-card:hover {
transform: translateY(-6px);
border-color: var(--border-strong);
box-shadow: var(--shadow-lg);
}
/* Tier kimliği: kartın üst şeridi data-tier'a göre renklenir */
.tier-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--border-strong);
}
.tier-card[data-tier="gold"]::before { background: var(--tier-gold-gradient); }
.tier-card[data-tier="platinum"]::before { background: var(--tier-platinum-gradient); }
.tier-card[data-tier="diamond"]::before { background: var(--tier-diamond-gradient); }
/* ── Önerilen (Platinum) — sahnenin yıldızı ──────────────────────────── */
.tier-recommended {
border-color: var(--accent);
box-shadow: var(--shadow-glow), var(--shadow-lg);
transform: scale(1.03);
z-index: 2;
}
.tier-recommended:hover { transform: scale(1.03) translateY(-6px); }
.tier-badge-recommended {
position: absolute; top: 14px; right: -34px;
transform: rotate(38deg);
background: var(--accent-gradient);
color: var(--text-on-accent);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0.3rem 2.6rem;
box-shadow: var(--shadow-sm);
pointer-events: none;
}
.tier-badge-current {
position: absolute; top: 14px; left: 14px;
background: var(--success-soft);
color: var(--success);
border: 1px solid var(--success);
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.25rem 0.7rem;
}
.tier-current { border-color: var(--success); }
/* ── Başlık bloğu ─────────────────────────────────────────────────────── */
.tier-header { text-align: center; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--border); }
.tier-icon {
width: 58px; height: 58px;
margin: 0 auto 0.9rem;
display: grid; place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.25);
}
/* inline BadgeColor gradient'ı kalsa da tier bazlı token görünümü baskın olsun */
.tier-card[data-tier="free"] .tier-icon { background: var(--bg-surface-3) !important; color: var(--text-subtle); }
.tier-card[data-tier="gold"] .tier-icon { background: var(--tier-gold-gradient) !important; }
.tier-card[data-tier="platinum"] .tier-icon { background: var(--tier-platinum-gradient) !important; }
.tier-card[data-tier="diamond"] .tier-icon { background: var(--tier-diamond-gradient) !important; color: #23445c; }
.tier-name {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-heading);
margin: 0 0 0.35rem;
}
.tier-price { display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; }
.tier-price-currency { font-size: var(--text-base); color: var(--text-subtle); font-weight: 600; }
.tier-price-amount {
font-family: var(--font-display);
font-size: 2.1rem;
font-weight: 650;
color: var(--text-heading);
letter-spacing: -0.02em;
}
.tier-price-period { font-size: var(--text-sm); color: var(--text-muted); }
/* ── Özellik listesi ──────────────────────────────────────────────────── */
.tier-features {
list-style: none;
padding: 1.1rem 0 1.25rem;
margin: 0;
flex-grow: 1;
}
.tier-features li {
display: flex; align-items: flex-start; gap: 0.55rem;
padding: 0.32rem 0;
font-size: var(--text-sm);
color: var(--text-body);
}
.feature-check { color: var(--success); margin-top: 2px; flex-shrink: 0; }
.tier-recommended .feature-check { color: var(--accent); }
/* ── CTA ──────────────────────────────────────────────────────────────── */
.tier-cta {
display: block; width: 100%;
padding: 0.7rem 1rem;
border-radius: 12px;
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
border: 1px solid var(--border-strong);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
cursor: pointer;
}
.tier-cta:hover { transform: translateY(-1px); }
.tier-primary {
background: var(--accent-gradient);
border-color: transparent;
color: var(--text-on-accent);
box-shadow: var(--shadow-sm);
}
.tier-primary:hover { box-shadow: var(--shadow-glow); color: var(--text-on-accent); }
.tier-secondary {
background: var(--bg-surface);
color: var(--text-heading);
}
.tier-secondary:hover { background: var(--bg-surface-2); color: var(--text-heading); }
/* ── Dar ekran ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.tier-recommended { transform: none; }
.tier-recommended:hover { transform: translateY(-6px); }
.tier-card { margin-bottom: 1rem; }
}
/* ── PREMIUM-CTA-002: kart düğmeleri ───────────────────────────────────────
Premium.razor düğmeleri .btn-tier / .btn-tier-primary / .btn-tier-secondary kullanıyordu ama bu sınıflar
hiç tanımlı değildi: düğmeler tarayıcının çıplak varsayılanıyla çıkıyor, .tier-cta da (düğme için yazılmış)
sarmalayıcıya çerçeve basıyordu. Sarmalayıcı sadeleşti; düğmeler kademe rengini taşıyor. */
.tier-card .tier-cta {
display: block; padding: 0; border: 0; background: none; box-shadow: none;
margin-top: auto; transform: none !important; cursor: default;
}
.btn-tier {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
width: 100%; min-height: 48px; padding: .75rem 1.1rem;
border-radius: 14px; border: 1px solid var(--border-strong);
font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em; line-height: 1.2;
background: var(--bg-surface); color: var(--text-heading);
position: relative; overflow: hidden; cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-tier i.fa-arrow-right { transition: transform .18s ease; }
.btn-tier:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.btn-tier:not(:disabled):hover i.fa-arrow-right { transform: translateX(4px); }
.btn-tier:not(:disabled):active { transform: translateY(0); }
.btn-tier:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-tier:disabled { opacity: .55; cursor: not-allowed; }
.btn-tier-secondary:not(:disabled):hover { background: var(--bg-surface-2); border-color: var(--accent); }
/* Ana düğme: hafif parıltı geçişi */
.btn-tier-primary {
background: var(--accent-gradient); border-color: transparent; color: var(--text-on-accent);
box-shadow: 0 8px 22px -10px rgba(240,180,41,.65);
}
.btn-tier-primary::after {
content: ""; position: absolute; inset: 0; transform: translateX(-120%);
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
}
.btn-tier-primary:not(:disabled):hover::after { transform: translateX(120%); transition: transform .8s ease; }
/* Kademe renkleri */
.tier-card[data-tier="gold"] .btn-tier:not(.btn-tier-current):not(.btn-tier-secondary) { background: var(--tier-gold-gradient); border-color: transparent; color: #2b1d02; }
.tier-card[data-tier="platinum"] .btn-tier:not(.btn-tier-current):not(.btn-tier-secondary) { background: var(--accent-gradient); border-color: transparent; color: var(--text-on-accent); }
.tier-card[data-tier="diamond"] .btn-tier:not(.btn-tier-current):not(.btn-tier-secondary) { background: var(--tier-diamond-gradient); border-color: transparent; color: #12324a; }
.btn-tier-current {
background: rgba(var(--bs-success-rgb), .12); border-color: rgba(var(--bs-success-rgb), .45);
color: var(--success); opacity: 1 !important; cursor: default !important;
}
.tier-card .tier-cta-note { display: block; margin-top: .5rem; font-size: .75rem; text-align: center; color: var(--text-muted); }
/* ── PREMIUM-CHECKOUT-002: satın alma penceresi ───────────────────────── */
.pm-modal .modal-content { border: 0; border-radius: 20px; overflow: hidden; background: var(--bg-surface); color: var(--text-body); }
.pm-head { padding: 1.5rem 1.5rem 1.25rem; color: #fff; position: relative; }
.pm-head[data-tier="gold"] { background: var(--tier-gold-gradient); color: #2b1d02; }
.pm-head[data-tier="platinum"] { background: var(--tier-platinum-gradient); }
.pm-head[data-tier="diamond"] { background: var(--tier-diamond-gradient); color: #12324a; }
.pm-head .btn-close { position: absolute; top: 1rem; right: 1rem; }
.pm-head-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255,255,255,.28); }
.pm-price { font-size: 2rem; font-weight: 800; line-height: 1; }
.pm-price small { font-size: .9rem; font-weight: 600; opacity: .8; }
.pm-body { padding: 1.25rem 1.5rem 1.5rem; }
.pm-perks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.pm-perks li { display: flex; gap: .55rem; font-size: var(--text-sm); }
.pm-perks i { color: var(--success); margin-top: 3px; }
.pm-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .6rem; }
.pm-method {
display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
padding: .85rem 1rem; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg-surface);
color: var(--text-heading); transition: border-color .15s, background-color .15s, transform .15s;
}
.pm-method:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); }
.pm-method.active { border-color: var(--accent); background: rgba(240,180,41,.08); }
.pm-method:disabled { opacity: .5; cursor: not-allowed; }
.pm-method-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-surface-2); color: var(--accent); }
.pm-method small { display: block; font-weight: 400; color: var(--text-muted); }
.pm-bank { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 1rem; background: var(--bg-surface-2); }
.pm-copy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.pm-copy:last-of-type { border-bottom: 0; }
.pm-copy code { color: var(--text-heading); background: none; font-size: .85rem; word-break: break-all; }
.pm-secure { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: 1rem; }
/* LAUNCH-MEMBERSHIP-001: komisyonsuz dönem bilgisi */
.pm-launch { display: flex; gap: .9rem; padding: 1rem; border-radius: 14px;
background: rgba(var(--bs-success-rgb), .10); border: 1px solid rgba(var(--bs-success-rgb), .35); color: var(--text-body); }
.pm-launch-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center;
background: rgba(var(--bs-success-rgb), .18); color: var(--success); font-size: 1.15rem; }
/* ============================================================================
admin-premium.css — Kontrast güvenlik ağı + premium dashboard cilası
En son yüklenir (premium.css'ten sonra). Token-tabanlı, tema-uyumlu.
Amaç: (1) siyah-üstü-siyah / tema-kör utility kusurlarını kapatmak,
(2) admin panelini AdminLTE/NopCommerce temizliğine yaklaştırmak.
============================================================================ */
/* ── 1) KONTRAST GÜVENLİK AĞI ───────────────────────────────────────────────
Tema-kör Bootstrap utility'lerini HER İKİ tema attribute'u için
(data-theme ve data-bs-theme) token'a bağla. bg-dark üstüne DAİMA açık metin. */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black { color: var(--text-heading) !important; }
[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light { background-color: var(--bg-surface-2) !important; color: var(--text-body) !important; }
[data-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; color: var(--text-body) !important; }
[data-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-muted { color: var(--text-subtle) !important; }
/* bg-dark: her iki temada da koyu zemin → metin DAİMA açık (siyah-üstü-siyah biter) */
.bg-dark, .bg-dark * { color: #f3f1ee !important; }
.bg-dark .text-muted { color: rgba(243,241,238,.65) !important; }
/* Admin içeriğinde hiçbir öğe yanlış miras rengine düşmesin */
.dashboard-main-content, .admin-content { color: var(--text-body); }
/* ── 2) PREMIUM KART SİSTEMİ ─────────────────────────────────────────────────
Yumuşak yüzey, ince kenar, hafif derinlik, ferah iç boşluk. */
.admin-content .card,
.dashboard-main-content .card,
.admin-content .stat-card {
background: var(--bg-surface);
color: var(--text-body);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16,15,26,.04), 0 1px 3px rgba(16,15,26,.06);
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.admin-content .card:hover,
.dashboard-main-content .card:hover {
box-shadow: 0 4px 12px rgba(16,15,26,.07), 0 2px 4px rgba(16,15,26,.05);
border-color: var(--border-strong);
}
.admin-content .card-header,
.dashboard-main-content .card-header {
background: transparent;
border-bottom: 1px solid var(--border-subtle);
font-weight: 600;
color: var(--text-heading);
padding: var(--space-4) var(--space-5);
}
.admin-content .card-body { padding: var(--space-5); }
/* ── 3) STAT / KPI KARTLARI ──────────────────────────────────────────────────
Büyük okunur rakam, sade etiket, sol renkli vurgu şeridi. */
.admin-content .stat-card {
position: relative;
padding: var(--space-5);
overflow: hidden;
}
.admin-content .stat-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--accent); opacity: .9;
}
.admin-content .stat-card.stat-primary::before { background: var(--accent); }
.admin-content .stat-card.stat-success::before { background: var(--success); }
.admin-content .stat-card.stat-warning::before { background: var(--warning); }
.admin-content .stat-card.stat-danger::before { background: var(--danger); }
.admin-content .stat-card .stat-value,
.admin-content .stat-card .stat-number {
color: var(--text-heading);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.admin-content .stat-card .stat-label,
.admin-content .stat-card .stat-title {
color: var(--text-subtle);
font-size: var(--text-sm);
font-weight: 500;
}
/* ── 4) TABLOLAR — temiz, okunur, hover ──────────────────────────────────────*/
.admin-content .table,
.dashboard-main-content .table {
--bs-table-bg: transparent;
color: var(--text-body);
border-color: var(--border-subtle);
}
.admin-content .table > thead {
background: var(--bg-surface-2);
}
.admin-content .table > thead th {
color: var(--text-subtle);
font-weight: 600;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .04em;
border-bottom: 1px solid var(--border);
padding: var(--space-3) var(--space-4);
white-space: nowrap;
}
.admin-content .table > tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
color: var(--text-body);
}
.admin-content .table > tbody tr { transition: background .12s ease; }
.admin-content .table > tbody tr:hover { background: var(--bg-surface-2); }
.admin-content .table > tbody tr:last-child td { border-bottom: none; }
/* ── 5) TOPBAR — sade, ince alt çizgi, ferah ─────────────────────────────────*/
.cloud-topbar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
backdrop-filter: saturate(1.05);
}
.cloud-topbar .topbar-title { color: var(--text-heading); letter-spacing: -.01em; }
.user-cloud-widget {
background: var(--bg-surface-2) !important;
border-color: var(--border) !important;
}
/* ── 6) SIDEBAR — net aktif/hover durumu ────────────────────────────────────*/
.sidebar-link {
color: var(--text-subtle);
border-radius: 10px;
transition: background .14s ease, color .14s ease;
}
.sidebar-link:hover {
background: var(--bg-surface-2);
color: var(--text-heading);
}
.sidebar-link.active {
background: var(--accent-soft);
color: var(--accent-active);
font-weight: 600;
}
.sidebar-link.active .icon { color: var(--accent); }
/* ── 7) BUTON & ROZET TUTARLILIĞI ───────────────────────────────────────────*/
.admin-content .btn { border-radius: 10px; font-weight: 600; }
.admin-content .btn-sm { border-radius: 8px; }
.admin-content .badge { font-weight: 600; letter-spacing: .01em; border-radius: 7px; }
/* Bölüm başlıkları — net hiyerarşi */
.admin-content h1, .admin-content h2, .admin-content h3,
.admin-content h4, .admin-content h5 { color: var(--text-heading); letter-spacing: -.01em; }
.admin-content .section-title,
.dashboard-main-content .section-title {
color: var(--text-heading);
font-weight: 700;
letter-spacing: -.02em;
}
/* Form kontrolleri — token yüzeyi (dark'ta da okunur) */
.admin-content .form-control,
.admin-content .form-select {
background: var(--bg-surface);
color: var(--text-body);
border: 1px solid var(--border);
border-radius: 10px;
}
.admin-content .form-control:focus,
.admin-content .form-select:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-content .form-control::placeholder { color: var(--text-disabled); }
/* FIX: sabit alt bandın form butonlarını (Kaydet/Vazgeç) kapatmaması için içerik alt boşluğu */
.admin-content { padding-bottom: 6rem !important; }
@media (max-width: 768px){ .admin-content { padding-bottom: 7rem !important; } }
/* FIX: sticky topbar (z-1010) anchor/odak kaydırmalarında başlıkları kapatmasın */
.admin-content { scroll-margin-top: 84px; }
.admin-content h1, .admin-content h2, .admin-content h3 { scroll-margin-top: 84px; }
/* Dashboard / Panel Footer tema uyumu */
.dashboard-footer,
.trader-footer,
.buyer-footer,
.admin-footer,
.seller-footer,
.dashboard-main-content .footer,
.main-wrapper .footer {
background: var(--bg-surface) !important;
background-color: var(--bg-surface) !important;
background-image: none !important;
color: var(--text-subtle) !important;
border-top: 1px solid var(--border) !important;
}
.dashboard-footer *,
.trader-footer *,
.buyer-footer *,
.admin-footer *,
.seller-footer * {
color: var(--text-subtle) !important;
}
/* PANEL-MOBILE-001: telefonda üst çubuk tek satır — açıklama, saat ve kullanıcı adı gizlenir, düğmeler simgeye iner */
@media (max-width: 767.98px) {
.cloud-topbar { padding: .5rem .75rem .5rem 4rem !important; gap: .5rem; }
.cloud-topbar .topbar-brand small,
.cloud-topbar .topbar-actions > .istanbul-clock,
.cloud-topbar .user-identity,
.cloud-topbar .user-cloud-widget .fa-chevron-down,
.cloud-topbar .tb-label { display: none !important; }
.cloud-topbar .topbar-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-topbar .topbar-brand { min-width: 0; flex: 1 1 auto; }
.cloud-topbar .topbar-actions { gap: .4rem !important; flex: 0 0 auto; flex-wrap: nowrap; }
.cloud-topbar .topbar-actions .btn { padding: .35rem .6rem !important; }
.cloud-topbar .topbar-actions .btn .me-2 { margin-right: 0 !important; }
.cloud-topbar .user-cloud-widget { padding: 2px !important; }
.cloud-topbar .user-cloud-widget .avatar-circle { margin-right: 0 !important; }
}
/* Özel Gün Temaları */
.special-theme-banner {
margin-top: 75px; /* Navbar yüksekliği */
width: 100%;
z-index: 1020;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
animation: slideDownBanner 0.5s ease-out;
}
@keyframes slideDownBanner {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.special-theme-banner.custom-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.special-theme-banner.custom-bg::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
}
.special-theme-banner.custom-bg .container {
position: relative;
z-index: 1;
}
/* Temalar */
/* 1. Ramazan / Kurban Bayramı */
.theme-ramadan {
background: linear-gradient(135deg, #198754, #146c43);
}
.theme-ramadan .theme-icon::before {
content: "\f186"; /* fa-moon */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #ffd700;
}
/* 2. Milli Bayramlar (23 Nisan, 29 Ekim vs.) */
.theme-republic {
background: linear-gradient(135deg, #dc3545, #b02a37);
}
.theme-republic .theme-icon::before {
content: "\f005"; /* fa-star */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #fff;
}
/* 3. Yılbaşı */
.theme-newyear {
background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
}
.theme-newyear .theme-icon::before {
content: "\f7b5"; /* fa-holly-berry or snowflake */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #fff;
}
/* 4. Genel Kutlama */
.theme-celebration {
background: linear-gradient(135deg, #6f42c1, #59359a);
}
.theme-celebration .theme-icon::before {
content: "\f561"; /* fa-glass-cheers */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #ffd700;
}
.theme-icon {
font-size: 1.25rem;
animation: floatIcon 2s ease-in-out infinite;
}
@keyframes floatIcon {
0% { transform: translateY(0); }
50% { transform: translateY(-3px); }
100% { transform: translateY(0); }
}
.theme-message {
font-size: 1.05rem;
letter-spacing: 0.5px;
}
/* SPECIAL-DAY-002: 29 Ekim görsel şeridi */
.republic-hero { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 16px; color: #fff; overflow: hidden;
background: radial-gradient(80% 160% at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
linear-gradient(100deg, #9e0712 0%, #e30a17 35%, #c8091a 65%, #8f0611 100%); }
.republic-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 60px, rgba(255,255,255,.05) 60px 120px); animation: republicWave 8s linear infinite; }
@keyframes republicWave { from { background-position: 0 0; } to { background-position: 240px 0; } }
.republic-flag { width: 66px; height: 44px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); animation: republicFlag 3s ease-in-out infinite; transform-origin: left center; }
@keyframes republicFlag { 0%,100% { transform: skewY(0deg); } 50% { transform: skewY(-3deg); } }
.republic-text { text-align: center; position: relative; z-index: 1; }
.republic-title { font-weight: 800; font-size: clamp(1.05rem, 2.2vw, 1.45rem); letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.republic-sub { font-size: .85rem; opacity: .9; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .republic-hero::after, .republic-flag { animation: none; } }
/* SPECIAL-DAY-003: 28 Ekim arifesi */
.republic-eve { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 18px; color: #fff;
background: radial-gradient(90% 180% at 0% 50%, rgba(227,10,23,.55), rgba(227,10,23,0) 60%), linear-gradient(100deg, #2a0d0f 0%, #4a1216 50%, #7a0b13 100%); }
.republic-eve-img { height: 76px; width: auto; max-width: 140px; object-fit: cover; border-radius: 8px; filter: sepia(.35) contrast(1.05);
box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.25); }
.republic-eve-quote { margin: 0; text-align: left; max-width: 760px; }
.republic-eve-quote blockquote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.republic-eve-quote figcaption { margin-top: 4px; font-size: .82rem; opacity: .85; }
@media (max-width: 575px) { .republic-eve-img { height: 60px; } .republic-eve { gap: 12px; } }
/* SPECIAL-DAY-004: şerit doğrudan sabit üst menünün altına oturur; altındaki içerik ayrıca boşluk bırakmaz */
.special-theme .special-theme-banner { margin-top: 61px; }
.special-theme main.main-pt { padding-top: 0; }
.special-theme .launch-banner.on-home { margin-top: 0; }
.special-theme .special-theme-banner { animation: none; }
@media (max-width: 575px) { .special-theme .special-theme-banner { margin-top: 99px; } .republic-eve { flex-direction: column; text-align: center; } .republic-eve-quote { text-align: center; } }
.republic-eve-photo { display: flex; flex-direction: column; align-items: center; }
.republic-eve-photo figcaption { font-size: .68rem; opacity: .75; margin-top: 3px; }
/* ═══════════════════════════════════════════════════════════════════════════
MUH-001 — ÖN MUHASEBE MODÜLÜ · "Defter" görsel dili
───────────────────────────────────────────────────────────────────────────
NEDEN AYRI BİR GÖRSEL DİL: Modül platformun geri kalanından farklı bir işi
yapıyor — ihale heyecanı değil, kayıt disiplini. Bu yüzden vurgu rengi
platformun lacivert/amber aksiyonundan ayrışıyor: BAKIR (#B87333), firmanın
işlediği metalin rengi. Sayılar tabular-nums ile hizalanıyor; satır
ayraçları defter çizgisi inceliğinde. Paraşüt'ün mint yeşilinden bilinçli
olarak uzak duruldu.
TOKEN UYUMU: Renkler tokens.css değişkenlerine fallback ile bağlı; tema
değişkeni yoksa sabit değere düşer, böylece dosya tek başına da çalışır.
Yükleme sırası: special-themes.css SONRASI, fixes.css ÖNCESİ.
═══════════════════════════════════════════════════════════════════════════ */
.muh-shell {
--muh-copper: #B87333;
--muh-copper-soft: rgba(184, 115, 51, 0.10);
--muh-copper-line: rgba(184, 115, 51, 0.28);
--muh-ink: rgb(var(--color-neutral-900, 17 24 39));
--muh-muted: rgb(var(--color-neutral-500, 107 114 128));
--muh-surface: rgb(var(--color-neutral-0, 255 255 255));
--muh-rule: rgb(var(--color-neutral-200, 229 231 235));
--muh-pos: #15803D;
--muh-neg: #B91C1C;
}
/* Koyu temada yüzeyler ve çizgiler yeniden tanımlanır — bakır sabit kalır,
çünkü modülün kimliği o. */
[data-theme="dark"] .muh-shell,
.dark-theme .muh-shell {
--muh-ink: rgb(var(--color-neutral-50, 249 250 251));
--muh-muted: rgb(var(--color-neutral-400, 156 163 175));
--muh-surface: rgb(var(--color-neutral-800, 31 41 55));
--muh-rule: rgba(255, 255, 255, 0.10);
--muh-copper-soft: rgba(184, 115, 51, 0.16);
--muh-pos: #4ADE80;
--muh-neg: #FCA5A5;
}
/* ── Başlık bandı ─────────────────────────────────────────────────────── */
.muh-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--muh-copper);
margin-bottom: 1rem;
}
.muh-head__title {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 700;
font-size: 1.35rem;
color: var(--muh-ink);
margin: 0;
}
.muh-head__title i { color: var(--muh-copper); }
.muh-head__sub {
font-size: 0.8rem;
color: var(--muh-muted);
margin: 0.15rem 0 0;
}
/* ── Alt navigasyon (pill) ────────────────────────────────────────────── */
.muh-nav {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.muh-nav a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.85rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
color: var(--muh-muted);
border: 1px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.muh-nav a:hover {
color: var(--muh-copper);
background: var(--muh-copper-soft);
}
.muh-nav a.active {
color: var(--muh-copper);
background: var(--muh-copper-soft);
border-color: var(--muh-copper-line);
}
.muh-nav a:focus-visible {
outline: 2px solid var(--muh-copper);
outline-offset: 2px;
}
/* ── Kartlar ──────────────────────────────────────────────────────────── */
.muh-card {
background: var(--muh-surface);
border: 1px solid var(--muh-rule);
border-radius: 0.9rem;
padding: 1rem 1.1rem;
height: 100%;
}
.muh-card--accent { border-top: 3px solid var(--muh-copper); }
.muh-kpi__label {
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muh-muted);
margin-bottom: 0.3rem;
}
.muh-kpi__value {
font-size: 1.45rem;
font-weight: 700;
color: var(--muh-ink);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.muh-kpi__hint {
font-size: 0.74rem;
color: var(--muh-muted);
margin-top: 0.25rem;
}
/* ── Defter tablosu ───────────────────────────────────────────────────── */
.muh-table {
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
}
.muh-table thead th {
text-align: left;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muh-muted);
font-weight: 700;
padding: 0.55rem 0.6rem;
border-bottom: 2px solid var(--muh-copper-line);
white-space: nowrap;
}
.muh-table tbody td {
padding: 0.55rem 0.6rem;
border-bottom: 1px solid var(--muh-rule);
color: var(--muh-ink);
vertical-align: middle;
}
.muh-table tbody tr:hover td { background: var(--muh-copper-soft); }
.muh-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.muh-table tfoot td {
padding: 0.6rem;
border-top: 2px solid var(--muh-copper-line);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.muh-pos { color: var(--muh-pos); font-variant-numeric: tabular-nums; }
.muh-neg { color: var(--muh-neg); font-variant-numeric: tabular-nums; }
.muh-num { font-variant-numeric: tabular-nums; }
/* ── Durum rozetleri ──────────────────────────────────────────────────── */
.muh-badge {
display: inline-block;
padding: 0.18rem 0.5rem;
border-radius: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
.muh-badge--draft { background: rgba(107, 114, 128, 0.14); color: #4B5563; }
.muh-badge--final { background: var(--muh-copper-soft); color: var(--muh-copper); }
.muh-badge--cancel { background: rgba(185, 28, 28, 0.12); color: #B91C1C; }
.muh-badge--sale { background: rgba(21, 128, 61, 0.12); color: #15803D; }
.muh-badge--buy { background: rgba(31, 79, 122, 0.12); color: #1F4F7A; }
[data-theme="dark"] .muh-badge--draft { color: #D1D5DB; }
/* ── Çubuk grafik (CSS, kütüphane yok) ────────────────────────────────── */
.muh-bars {
display: flex;
align-items: flex-end;
gap: 0.35rem;
height: 130px;
padding-top: 0.5rem;
}
.muh-bars__col {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
min-width: 0;
}
.muh-bars__stack {
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
height: 100px;
}
.muh-bars__bar {
width: 42%;
min-height: 2px;
border-radius: 3px 3px 0 0;
transition: height 0.3s ease;
}
.muh-bars__bar--in { background: var(--muh-copper); }
.muh-bars__bar--out { background: rgba(107, 114, 128, 0.45); }
.muh-bars__label {
font-size: 0.65rem;
color: var(--muh-muted);
white-space: nowrap;
}
.muh-legend {
display: flex;
gap: 0.9rem;
font-size: 0.74rem;
color: var(--muh-muted);
margin-top: 0.4rem;
}
.muh-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-radius: 2px;
margin-right: 0.35rem;
}
.muh-legend .in::before { background: var(--muh-copper); }
.muh-legend .out::before { background: rgba(107, 114, 128, 0.45); }
/* ── Boş durum ────────────────────────────────────────────────────────── */
.muh-empty {
text-align: center;
padding: 2.5rem 1rem;
color: var(--muh-muted);
}
.muh-empty i {
font-size: 2rem;
color: var(--muh-copper);
opacity: 0.55;
margin-bottom: 0.6rem;
display: block;
}
/* ── Butonlar ─────────────────────────────────────────────────────────── */
.btn-muh {
background: var(--muh-copper);
border: 1px solid var(--muh-copper);
color: #fff;
font-weight: 600;
}
.btn-muh:hover, .btn-muh:focus {
background: #9C601F;
border-color: #9C601F;
color: #fff;
}
.btn-muh-outline {
background: transparent;
border: 1px solid var(--muh-copper-line);
color: var(--muh-copper);
font-weight: 600;
}
.btn-muh-outline:hover, .btn-muh-outline:focus {
background: var(--muh-copper-soft);
color: var(--muh-copper);
}
/* ── Satır düzenleyici (fatura formu) ─────────────────────────────────── */
.muh-line-grid {
display: grid;
grid-template-columns: minmax(140px, 3fr) 90px 110px 80px 80px 90px 110px 36px;
gap: 0.4rem;
align-items: center;
}
.muh-line-grid input,
.muh-line-grid select {
font-size: 0.82rem;
padding: 0.3rem 0.45rem;
}
.muh-line-grid .muh-line-total {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.84rem;
color: var(--muh-ink);
}
.muh-line-head {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muh-muted);
font-weight: 700;
}
@media (max-width: 991px) {
.muh-line-grid {
grid-template-columns: 1fr 1fr;
}
.muh-line-head { display: none; }
.muh-bars { height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
.muh-nav a,
.muh-bars__bar { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Antlaşma — FE-CSS-001 · Eksik sınıf tanımları (ADDITIVE FIX)
───────────────────────────────────────────────────────────────────────────
Bu dosyadaki HER seçici, denetim öncesinde projede HİÇBİR yerde tanımlı
DEĞİLDİ (ne wwwroot/css/*.css içinde, ne de ilgili .razor dosyasının kendi