/* ========================================================================== Biletstore — Bootstrap 5.3 tema köprüsü tokens.css'teki değişkenleri Bootstrap'ın kendi değişkenlerine bağlar. Tema: Kural: gölge yok, 1px kenarlık, kalın yazı yalnızca fiyatlarda, mavi odak yok. ========================================================================== */ :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --bs-body-font-family: var(--font-sans); --bs-body-font-size: .9375rem; /* 15px = Body/Medium */ --bs-body-line-height: 1.55; --bs-body-bg: var(--surface-canvas); --bs-body-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-muted); --bs-emphasis-color: var(--text-primary); --bs-border-color: var(--border-subtle); --bs-border-color-translucent: var(--border-subtle); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-pill: var(--radius-full); --bs-primary: var(--accent-solid); --bs-primary-rgb: 220, 11, 45; --bs-link-color: var(--text-accent); --bs-link-hover-color: var(--accent-hover); --bs-link-color-rgb: 220, 11, 45; --bs-success: var(--status-success); --bs-danger: var(--status-error); --bs-warning: var(--status-warning); --bs-info: var(--status-info); --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; /* Bootstrap'ın mavi odak halkası yerine markanın kırmızı halkası */ --bs-focus-ring-color: rgba(220, 11, 45, .28); --bs-focus-ring-width: 2px; --bs-focus-ring-opacity: 1; } /* Tipografi ölçeği — Figma text style'ları ------------------------------- */ h1, .h1 { font-size: 3.5rem; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; } h2, .h2 { font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; } h3, .h3 { font-size: 1.75rem; font-weight: 500; line-height: 1.2; } h4, .h4 { font-size: 1.375rem;font-weight: 500; line-height: 1.3; } h5, .h5 { font-size: 1.125rem;font-weight: 500; line-height: 1.4; } .text-lg { font-size: 1.0625rem; } .text-sm { font-size: .8125rem; } .text-xs { font-size: .71875rem; } .text-label{ font-size: .71875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .text-price { font-size: 1.25rem; font-weight: 700; } .text-price-lg { font-size: 1.75rem; font-weight: 700; } .text-muted-2 { color: var(--text-muted) !important; } .text-secondary-2 { color: var(--text-secondary) !important; } .text-accent { color: var(--text-accent) !important; } /* Yüzeyler ---------------------------------------------------------------- */ .bg-canvas { background: var(--surface-canvas); } .bg-raised { background: var(--surface-raised); } .bg-sunken { background: var(--surface-sunken); } .bg-card { background: var(--surface-raised); } .border-subtle { border-color: var(--border-subtle) !important; } .bb-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: none; } /* Butonlar — Primary: kırmızı çerçeve + yumuşak dolgu, hover'da dolu ------ */ .btn { --bs-btn-box-shadow: none; font-weight: 500; border-radius: var(--radius-full); padding: .625rem 1.25rem; } .btn:focus-visible { box-shadow: 0 0 0 2px rgba(220,11,45,.28); } .btn-lg { padding: .8125rem 1.5rem; font-size: 1rem; } .btn-sm { padding: .5rem 1rem; font-size: .8125rem; } .btn-primary { --bs-btn-color: var(--text-accent); --bs-btn-bg: var(--accent-soft); --bs-btn-border-color: var(--accent-solid); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-solid); --bs-btn-hover-border-color: var(--accent-solid); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border-subtle); } .btn-secondary { --bs-btn-color: var(--text-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-default); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--surface-overlay); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--surface-overlay); --bs-btn-active-color: var(--text-primary); --bs-btn-active-border-color: var(--border-strong); } .btn-ghost { --bs-btn-color: var(--text-secondary); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--surface-overlay); --bs-btn-hover-border-color: transparent; } /* Chip (filtre) ----------------------------------------------------------- */ .bb-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .8125rem; line-height: 1.4; color: var(--text-secondary); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); text-decoration: none; white-space: nowrap; cursor: pointer; } .bb-chip:hover { color: var(--text-primary); border-color: var(--border-default); } .bb-chip.active, .bb-chip[aria-pressed="true"] { color: var(--text-accent); background: var(--accent-soft); border-color: var(--accent-solid); } /* Badge ------------------------------------------------------------------- */ .bb-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; font-size: .71875rem; font-weight: 500; border-radius: var(--radius-full); border: 1px solid transparent; } .bb-badge-accent { color: var(--text-accent); background: var(--accent-soft); } .bb-badge-success { color: var(--status-success); background: var(--status-success-soft); } .bb-badge-warning { color: var(--status-warning); background: var(--status-warning-soft); } .bb-badge-info { color: var(--status-info); background: var(--status-info-soft); } .bb-badge-neutral { color: var(--text-secondary); background: var(--surface-overlay); } /* Form alanları ----------------------------------------------------------- */ .form-control, .form-select { background: var(--surface-sunken); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: var(--radius-md); padding: .75rem 1rem; } .form-control:focus, .form-select:focus { background: var(--surface-sunken); border-color: var(--accent-solid); color: var(--text-primary); box-shadow: 0 0 0 2px rgba(220,11,45,.28); } .form-control::placeholder { color: var(--text-muted); } .form-label { font-size: .8125rem; color: var(--text-secondary); margin-bottom: .375rem; } .form-check-input { background-color: var(--surface-sunken); border-color: var(--border-strong); border-radius: 5px; } .form-check-input:checked { background-color: var(--accent-solid); border-color: var(--accent-solid); } .form-check-input:focus { box-shadow: 0 0 0 2px rgba(220,11,45,.28); border-color: var(--accent-solid); } /* Arama kutusu (hero ve üst bar) ------------------------------------------ */ .bb-search { display: flex; align-items: center; gap: .75rem; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: .625rem 1rem; } .bb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: .9375rem; } .bb-search input::placeholder { color: var(--text-muted); } /* Odak halkası iç input'ta değil, kutunun kenarlığında */ .bb-search:focus-within { border-color: var(--accent-solid); } .bb-search input:focus, .bb-search input:focus-visible { outline: none; box-shadow: none; border: 0; } .bb-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .45; cursor: pointer; } /* İkon ölçüsü ------------------------------------------------------------- */ .bb-ico { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.6; } .bb-ico-sm { width: .875rem; height: .875rem; } .bb-ico-lg { width: 1.375rem; height: 1.375rem; } /* Kenarlık yardımcıları --------------------------------------------------- */ .bb-divider { height: 1px; background: var(--border-subtle); border: 0; opacity: 1; } .bb-hairline-b { border-bottom: 1px solid var(--border-subtle); } .bb-hairline-t { border-top: 1px solid var(--border-subtle); } /* Erişilebilirlik --------------------------------------------------------- */ :focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(220,11,45,.28); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Tarih girişi — takvim ikonu markanın renginde, alan boş görünmesin */ .bb-date { color-scheme: dark; } [data-theme="light"] .bb-date { color-scheme: light; } .bb-search input[type="date"] { font-size: .9375rem; } .bb-search input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; filter: none; } .bb-search input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } /* Mobilde geniş grid boşlukları kabı taşırmasın (row g-5 = -24px marj) */ @media (max-width: 991.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } } /* Sabit konumlu offcanvas gizliyken yatay kaydırma açmasın */ html { overflow-x: clip; } /* Erişilebilirlik: küçük puntoda okunabilirlik için muted tonu bir tık açıldı. (Figma token’ı text/muted bu değerlerle güncellenecek.) */ :root { --text-muted: #9A9AA4; } [data-theme="light"] { --text-muted: #61616A; } /* Light temada yeşil onay ikonu beyaz zeminde okunur olsun */ [data-theme="light"] { --status-success: #157F3C; } /* Uzun tek kelimelik başlıklar dar ekranda satır taşırmasın */ h1, h2, h3, h4, h5, h6, p, a, span, li { overflow-wrap: anywhere; } /* Küçük punto rozet/etiket metinleri WCAG AA (4.5:1) eşiğine çekildi */ :root { --text-accent: #FF5F72; --status-warning: #FFC04D; --status-info: #8CC0FF; } [data-theme="light"] { --text-accent: #B00A26; --status-success: #10662C; --status-warning: #7A4E00; --status-info: #0B5CA8; }