/* ============================================================================ VoltLitre — Tasarım Sistemi ---------------------------------------------------------------------------- Bootstrap 5 üzerine ince bir katman. Bootstrap'ın grid/utility'lerini kullanıyoruz; renk, tipografi, yükseklik (elevation) ve bileşen görünümü buradan geliyor. Tema: açık/koyu. `` yoksa işletim sistemi tercihi (prefers-color-scheme) geçerli; kullanıcı düğmeye basınca data-theme yazılır ve o kazanır. ========================================================================= */ /* ============================================================ 1. Tasarım token'ları ============================================================ */ :root { /* Marka — mavi, elektrik/enerji çağrışımı */ --vl-brand-50: #EAF2FD; --vl-brand-100: #D0E2FA; --vl-brand-300: #7FB0F0; --vl-brand-500: #1565C0; --vl-brand-600: #114E9B; --vl-brand-700: #0D3B77; /* Vurgu — camgöbeği, "şarj" tarafı */ --vl-accent-400: #22C7F5; --vl-accent-500: #00A9DC; /* Semantik */ --vl-success: #16794C; --vl-warning: #A96A00; --vl-danger: #C0322B; /* Yüzeyler ve metin — tema ile değişir */ --vl-bg: #FFFFFF; --vl-bg-subtle: #F6F8FB; --vl-bg-sunken: #EEF2F7; --vl-surface: #FFFFFF; --vl-border: #E3E8EF; --vl-border-strong: #CBD3DF; --vl-text: #131A24; --vl-text-muted: #5A6675; --vl-text-faint: #8A94A3; /* Marka renginin "üstünde" duran metin (hero, CTA) */ --vl-on-brand: #FFFFFF; --vl-on-brand-muted: rgba(255, 255, 255, .78); /* Elevation — renkli gölge, düz siyahtan daha canlı durur */ --vl-shadow-xs: 0 1px 2px rgba(16, 32, 56, .06); --vl-shadow-sm: 0 2px 6px rgba(16, 32, 56, .07); --vl-shadow-md: 0 8px 24px rgba(16, 32, 56, .10); --vl-shadow-lg: 0 18px 44px rgba(16, 32, 56, .14); /* Şekil */ --vl-radius-sm: .5rem; --vl-radius: .875rem; --vl-radius-lg: 1.25rem; --vl-radius-pill: 999px; /* Ritim */ --vl-section-y: 5.5rem; --vl-section-y-sm: 3.25rem; --vl-ring: 0 0 0 3px color-mix(in srgb, var(--vl-brand-500) 35%, transparent); } /* ── Koyu tema ──────────────────────────────────────────────────────────── Renkler yalnızca "ters çevrilmiş" değil: koyu zeminde saf beyaz metin parlama yapar, bu yüzden metin hafif kırık beyaz; marka mavisi de koyu zeminde okunur olsun diye açık tona kaydırıldı. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vl-brand-500: #4D9BEF; --vl-brand-600: #6BAEF5; --vl-brand-700: #8CC2F8; --vl-brand-50: #16263C; --vl-brand-100: #1C3552; --vl-accent-400: #3FD3FA; --vl-accent-500: #22C7F5; --vl-success: #45C08A; --vl-warning: #E0A030; --vl-danger: #F0736B; --vl-bg: #0D131C; --vl-bg-subtle: #121A26; --vl-bg-sunken: #0A0F16; --vl-surface: #161F2C; --vl-border: #26313F; --vl-border-strong: #37455A; --vl-text: #E9EDF3; --vl-text-muted: #A3AFBF; --vl-text-faint: #78859A; --vl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --vl-shadow-sm: 0 2px 6px rgba(0, 0, 0, .40); --vl-shadow-md: 0 8px 24px rgba(0, 0, 0, .48); --vl-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --vl-brand-500: #4D9BEF; --vl-brand-600: #6BAEF5; --vl-brand-700: #8CC2F8; --vl-brand-50: #16263C; --vl-brand-100: #1C3552; --vl-accent-400: #3FD3FA; --vl-accent-500: #22C7F5; --vl-success: #45C08A; --vl-warning: #E0A030; --vl-danger: #F0736B; --vl-bg: #0D131C; --vl-bg-subtle: #121A26; --vl-bg-sunken: #0A0F16; --vl-surface: #161F2C; --vl-border: #26313F; --vl-border-strong: #37455A; --vl-text: #E9EDF3; --vl-text-muted: #A3AFBF; --vl-text-faint: #78859A; --vl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --vl-shadow-sm: 0 2px 6px rgba(0, 0, 0, .40); --vl-shadow-md: 0 8px 24px rgba(0, 0, 0, .48); --vl-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55); } /* ============================================================ 2. Temel ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--vl-text); background-color: var(--vl-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { flex: 1 0 auto; } /* ── Tipografi ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; line-height: 1.2; letter-spacing: -.021em; color: var(--vl-text); } h1, .h1 { letter-spacing: -.03em; } .display-4, .display-5, .display-6 { font-weight: 800; letter-spacing: -.035em; line-height: 1.08; } .lead { font-size: 1.15rem; font-weight: 400; line-height: 1.6; } .text-muted { color: var(--vl-text-muted) !important; } .text-faint { color: var(--vl-text-faint) !important; } /* Uzun metin blokları — okuma satır uzunluğunu sınırla */ .prose p, .prose li { color: var(--vl-text-muted); max-width: 68ch; } .prose h2 { margin-top: 2.25rem; margin-bottom: .75rem; font-size: 1.2rem; } .prose h2:first-child { margin-top: 0; } .prose ul { padding-left: 1.15rem; } .prose li { margin-bottom: .4rem; } a { color: var(--vl-brand-500); text-underline-offset: .18em; } a:hover { color: var(--vl-brand-600); } hr { border-color: var(--vl-border); opacity: 1; } code { background: var(--vl-bg-sunken); color: var(--vl-text); padding: .15em .4em; border-radius: .3rem; font-size: .875em; } /* ── Erişilebilirlik ─────────────────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: var(--vl-ring); border-radius: var(--vl-radius-sm); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1080; padding: .75rem 1.25rem; background: var(--vl-brand-500); color: #fff; border-radius: 0 0 var(--vl-radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } /* ============================================================ 3. Yerleşim ============================================================ */ .section { padding: var(--vl-section-y) 0; } .section-sm { padding: var(--vl-section-y-sm) 0; } @media (max-width: 575.98px) { :root { --vl-section-y: 3.25rem; --vl-section-y-sm: 2.25rem; } } .bg-subtle { background-color: var(--vl-bg-subtle) !important; } .bg-sunken { background-color: var(--vl-bg-sunken) !important; } .section-heading { max-width: 46rem; margin-inline: auto; } .section-heading p { color: var(--vl-text-muted); } /* Bölüm üstü küçük etiket — "eyebrow" */ .eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vl-brand-500); margin-bottom: .6rem; } /* ============================================================ 4. İkonlar ============================================================ */ .vl-icon { display: inline-block; vertical-align: -.145em; flex-shrink: 0; } /* Özellik kartlarındaki yuvarlak ikon kutusu */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; border-radius: var(--vl-radius); background: var(--vl-brand-50); color: var(--vl-brand-500); margin-bottom: 1.15rem; } .icon-tile-lg { width: 3.5rem; height: 3.5rem; border-radius: var(--vl-radius); } /* Hero gibi renkli zeminlerde */ .icon-tile-on-brand { background: rgba(255, 255, 255, .14); color: #fff; } /* ============================================================ 5. Hero ============================================================ */ .hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90rem 40rem at 78% -18%, color-mix(in srgb, var(--vl-accent-500) 55%, transparent) 0%, transparent 62%), linear-gradient(152deg, #114E9B 0%, #0D3B77 58%, #0A2C58 100%); color: var(--vl-on-brand); } /* İnce ızgara dokusu — düz gradyanı kırar, derinlik verir */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 3.5rem 3.5rem; mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); } .hero h1, .hero h2 { color: var(--vl-on-brand); } .hero p, .hero .lead { color: var(--vl-on-brand-muted); } .hero-home { padding-block: 5rem 5.5rem; } @media (min-width: 768px) { .hero-home { padding-block: 7rem 7.5rem; } } .hero-page { padding-block: 3.5rem; } @media (min-width: 768px) { .hero-page { padding-block: 4.5rem; } } /* ============================================================ 6. Kartlar ============================================================ */ .card-vl { position: relative; background: var(--vl-surface); border: 1px solid var(--vl-border); border-radius: var(--vl-radius); box-shadow: var(--vl-shadow-xs); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card-vl-hover:hover { box-shadow: var(--vl-shadow-md); transform: translateY(-3px); border-color: var(--vl-border-strong); } .card-vl .card-header { background: transparent; border-bottom: 1px solid var(--vl-border); font-weight: 650; padding: 1rem 1.25rem; color: var(--vl-text); } /* İstatistik kutusu */ .stat-tile { background: var(--vl-surface); border: 1px solid var(--vl-border); border-radius: var(--vl-radius); padding: 1.35rem 1rem; text-align: center; height: 100%; } .stat-value { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--vl-brand-500); margin-bottom: .15rem; font-variant-numeric: tabular-nums; } .stat-label { font-size: .8rem; color: var(--vl-text-muted); font-weight: 500; } /* Anahtar/değer satırı — paylaşım sayfasındaki araç bilgileri */ .fact { border: 1px solid var(--vl-border); border-radius: var(--vl-radius-sm); padding: .8rem .9rem; height: 100%; background: var(--vl-bg-subtle); } .fact-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vl-text-faint); font-weight: 600; margin-bottom: .15rem; } .fact-value { font-weight: 650; font-variant-numeric: tabular-nums; } /* ============================================================ 7. Düğmeler ============================================================ */ .btn { --bs-btn-focus-box-shadow: var(--vl-ring); font-weight: 600; border-radius: var(--vl-radius-sm); transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn:active { transform: translateY(1px); } .btn-vl-primary { background-color: var(--vl-brand-500); border-color: var(--vl-brand-500); color: #fff; box-shadow: var(--vl-shadow-xs); } .btn-vl-primary:hover, .btn-vl-primary:focus { background-color: var(--vl-brand-600); border-color: var(--vl-brand-600); color: #fff; box-shadow: var(--vl-shadow-sm); } /* Koyu temada saf siyah düğme kaybolur; yüzey rengine oturt */ .btn-vl-solid { background-color: var(--vl-text); border-color: var(--vl-text); color: var(--vl-bg); } .btn-vl-solid:hover, .btn-vl-solid:focus { background-color: var(--vl-text); border-color: var(--vl-text); color: var(--vl-bg); filter: brightness(1.15); } .btn-vl-outline { background-color: transparent; border-color: var(--vl-border-strong); color: var(--vl-text); } .btn-vl-outline:hover, .btn-vl-outline:focus { background-color: var(--vl-bg-subtle); border-color: var(--vl-text-faint); color: var(--vl-text); } /* Hero üzerindeki açık düğme */ .btn-vl-on-brand { background: #fff; border-color: #fff; color: #0D3B77; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .btn-vl-on-brand:hover, .btn-vl-on-brand:focus { background: #fff; border-color: #fff; color: #0D3B77; filter: brightness(.96); } .btn-vl-ghost-on-brand { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .40); color: #fff; } .btn-vl-ghost-on-brand:hover, .btn-vl-ghost-on-brand:focus { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .60); color: #fff; } .rounded-pill { border-radius: var(--vl-radius-pill) !important; } /* ── Mağaza düğmesi ──────────────────────────────────────────────────────── */ .btn-store { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.4rem; border-radius: var(--vl-radius-sm); text-decoration: none; text-align: left; } .btn-store .btn-store-top { display: block; font-size: .68rem; letter-spacing: .04em; opacity: .82; line-height: 1.1; } .btn-store .btn-store-name { display: block; font-size: .98rem; font-weight: 700; line-height: 1.2; } /* Yayınlanmamış durum: düğme yerinde durur ama tıklanamaz. `pointer-events: none` tek başına yetmez — klavye ile de erişilemez olmalı, o yüzden işaretleme tarafında `tabindex="-1"` ile birlikte kullanılıyor. */ .btn-store.is-unavailable, .btn.is-unavailable { opacity: .55; cursor: not-allowed; pointer-events: none; filter: grayscale(.55); } /* ── Rozet ───────────────────────────────────────────────────────────────── */ .badge-soft { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--vl-radius-pill); font-size: .76rem; font-weight: 650; line-height: 1.4; border: 1px solid transparent; } .badge-soft-brand { background: var(--vl-brand-50); color: var(--vl-brand-500); border-color: color-mix(in srgb, var(--vl-brand-500) 22%, transparent); } .badge-soft-warning { background: color-mix(in srgb, var(--vl-warning) 12%, var(--vl-bg)); color: var(--vl-warning); border-color: color-mix(in srgb, var(--vl-warning) 30%, transparent); } .badge-soft-neutral { background: var(--vl-bg-sunken); color: var(--vl-text-muted); border-color: var(--vl-border); } /* Hero üzerinde duran rozet */ .badge-on-brand { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff; } /* ============================================================ 8. Gezinme çubuğu ============================================================ */ .navbar-vl { background-color: color-mix(in srgb, var(--vl-bg) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--vl-border); padding-block: .6rem; } .navbar-vl .navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--vl-text) !important; } .navbar-vl .navbar-brand .vl-icon { color: var(--vl-brand-500); } .navbar-vl .nav-link { color: var(--vl-text-muted); font-weight: 550; font-size: .94rem; padding: .4rem .8rem; border-radius: var(--vl-radius-sm); transition: color .18s ease, background-color .18s ease; } .navbar-vl .nav-link:hover { color: var(--vl-text); background: var(--vl-bg-subtle); } .navbar-vl .nav-link.active { color: var(--vl-brand-500) !important; background: var(--vl-brand-50); } .navbar-vl .navbar-toggler { border: 1px solid var(--vl-border); border-radius: var(--vl-radius-sm); padding: .35rem .55rem; color: var(--vl-text); } .navbar-vl .navbar-toggler:focus { box-shadow: var(--vl-ring); } /* Tema düğmesi */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--vl-border); border-radius: var(--vl-radius-sm); background: transparent; color: var(--vl-text-muted); cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease; } .theme-toggle:hover { color: var(--vl-text); background: var(--vl-bg-subtle); border-color: var(--vl-border-strong); } /* Aktif temaya göre yalnızca bir ikon görünür */ .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline-block; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } } /* ============================================================ 9. Alt bilgi ============================================================ */ .footer-vl { background-color: var(--vl-bg-subtle); border-top: 1px solid var(--vl-border); color: var(--vl-text-muted); padding: 3rem 0 2rem; font-size: .9rem; margin-top: auto; } .footer-vl a { color: var(--vl-text-muted); text-decoration: none; transition: color .18s ease; } .footer-vl a:hover { color: var(--vl-brand-500); text-decoration: none; } .footer-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.05rem; color: var(--vl-text); letter-spacing: -.02em; } .footer-brand .vl-icon { color: var(--vl-brand-500); } .footer-heading { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vl-text-faint); margin-bottom: .85rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .45rem; } /* ============================================================ 10. Tablolar ============================================================ */ .table-vl { --bs-table-bg: transparent; --bs-table-color: var(--vl-text); --bs-table-border-color: var(--vl-border); --bs-table-striped-bg: var(--vl-bg-subtle); --bs-table-striped-color: var(--vl-text); --bs-table-hover-bg: var(--vl-bg-subtle); --bs-table-hover-color: var(--vl-text); margin-bottom: 0; color: var(--vl-text); } .table-vl > thead th { background: var(--vl-bg-subtle); color: var(--vl-text-faint); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--vl-border); white-space: nowrap; padding: .7rem .75rem; } .table-vl > tbody td { padding: .7rem .75rem; border-color: var(--vl-border); vertical-align: middle; } .table-num { font-variant-numeric: tabular-nums; text-align: right; } /* Dar ekranda tabloyu yatay kaydır — sayfa gövdesi asla kaymasın */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ 11. İlerleme çubuğu ============================================================ */ .bar-track { height: .5rem; border-radius: var(--vl-radius-pill); background: var(--vl-bg-sunken); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--vl-radius-pill); background: linear-gradient(90deg, var(--vl-brand-500), var(--vl-accent-500)); } /* ============================================================ 12. Uyarı kutuları ============================================================ */ .notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--vl-radius); border: 1px solid var(--vl-border); background: var(--vl-bg-subtle); color: var(--vl-text); } .notice .vl-icon { margin-top: .15rem; color: var(--vl-text-muted); } .notice-title { font-weight: 650; margin-bottom: .1rem; } .notice-body { color: var(--vl-text-muted); font-size: .9rem; margin: 0; } .notice-warning { background: color-mix(in srgb, var(--vl-warning) 9%, var(--vl-bg)); border-color: color-mix(in srgb, var(--vl-warning) 28%, transparent); } .notice-warning .vl-icon { color: var(--vl-warning); } .notice-brand { background: var(--vl-brand-50); border-color: color-mix(in srgb, var(--vl-brand-500) 22%, transparent); } .notice-brand .vl-icon { color: var(--vl-brand-500); } /* ============================================================ 13. Boş durum ============================================================ */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--vl-text-muted); } .empty-state .vl-icon { color: var(--vl-text-faint); margin-bottom: .75rem; } /* ============================================================ 14. Görseller ============================================================ */ img { max-width: 100%; height: auto; } .logo-chip { background: var(--vl-bg-subtle); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-sm); padding: .25rem; object-fit: contain; } .img-placeholder { opacity: .45; } /* ============================================================ 15. Yardımcılar ============================================================ */ .text-brand { color: var(--vl-brand-500) !important; } .hover-surface { transition: background-color .18s ease; border-radius: var(--vl-radius-sm); } .hover-surface:hover { background-color: var(--vl-bg-subtle); } .divider-y { border: 0; border-top: 1px solid var(--vl-border); margin: 0; }