/* ============================================================ Tasarım sistemi Açık ve koyu tema. Yazı tipi ve ikonlar sitenin kendi dosyalarından gelir, dışarıya istek atılmaz. Tema seçimi: , yoksa sistem tercihi. ============================================================ */ /* Başlık yazı tipi: Fraunces (SIL OFL, bkz. /fonts/OFL-Fraunces.txt). Türkçe karakterler (ş, ğ, İ) latin-ext dosyasında; ikisi birlikte yüklenir. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* zemin ve yüzeyler */ --page: #ffffff; --bg: #f3f2ef; --bg-2: #ebe9e5; --surface: #ffffff; --surface-2: #f5f4f1; --surface-3: #eceae6; --line: #e7e4df; --line-2: #d5d1ca; /* metin */ --text: #1b1a17; --text-2: #5c5852; --text-3: #8a857e; /* Marka rengi. İşletme panelden değiştirebilir; U.applyBrand bu beş değeri yazar. -dk: koyu temadaki karşılığı, -ink: açık zeminde yazı olarak kullanılacak tonu. */ --brand: #1f4b3e; --on-brand: #ffffff; --brand-ink: #1f4b3e; --brand-dk: #5cbc9f; --on-brand-dk: #161513; /* durumlar */ --ok: #1e7b4c; --warn: #a15a0c; --danger: #c0392b; --info: #2a61a6; --violet: #6b48b9; /* bildirim balonu (her iki temada koyu) */ --toast-bg: #1f1e1b; --toast-fg: #f4f2ee; /* ölçü */ --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --shadow-1: 0 1px 2px rgba(24, 22, 18, .06); --shadow-2: 0 1px 2px rgba(24, 22, 18, .05), 0 4px 14px rgba(24, 22, 18, .07); --shadow-3: 0 18px 44px rgba(24, 22, 18, .18), 0 2px 8px rgba(24, 22, 18, .08); --shadow-up: 0 -6px 24px rgba(24, 22, 18, .10); --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* fotoğrafsız ürün zemini (hsl: doygunluk + açıklık) */ --thumb-bg: 24% 92%; --thumb-fg: 26% 36%; --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --header-h: 56px; --accent: var(--brand); --on-accent: var(--on-brand); --accent-ink: var(--brand-ink); /* Aynı renklerin "r, g, b" hâli: yalnızca color-mix bilmeyen eski tarayıcılar için (dosyanın sonundaki blok). Marka rengininkini U.applyBrand yazar. */ --brand-rgb: 31, 75, 62; --brand-dk-rgb: 92, 188, 159; --on-brand-rgb: 255, 255, 255; --accent-rgb: var(--brand-rgb); --page-rgb: 255, 255, 255; --bg-rgb: 243, 242, 239; --surface-rgb: 255, 255, 255; --text-rgb: 27, 26, 23; --ok-rgb: 30, 123, 76; --warn-rgb: 161, 90, 12; --danger-rgb: 192, 57, 43; --info-rgb: 42, 97, 166; --violet-rgb: 107, 72, 185; } /* Türev renkler color-mix ile üretilir: marka rengi değişince zemin, çizgi ve halka ona uyar. */ :root { --accent-2: color-mix(in srgb, var(--accent) 86%, #000); --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --accent-bg: color-mix(in srgb, var(--accent) 8%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); --ok-bg: color-mix(in srgb, var(--ok) 9%, var(--surface)); --warn-bg: color-mix(in srgb, var(--warn) 10%, var(--surface)); --danger-bg: color-mix(in srgb, var(--danger) 8%, var(--surface)); --info-bg: color-mix(in srgb, var(--info) 8%, var(--surface)); --violet-bg: color-mix(in srgb, var(--violet) 9%, var(--surface)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page: #121211; --bg: #121211; --bg-2: #0c0c0b; --surface: #1b1a19; --surface-2: #232220; --surface-3: #2d2b29; --line: #2b2a27; --line-2: #3c3a36; --text: #f1efeb; --text-2: #aaa59e; --text-3: #7a756f; --ok: #54b98a; --warn: #e1a650; --danger: #ed7264; --info: #72a9e4; --violet: #a88ee9; --toast-bg: #2e2c2a; --toast-fg: #f4f2ee; --accent: var(--brand-dk); --on-accent: var(--on-brand-dk); --accent-ink: var(--brand-dk); --accent-2: color-mix(in srgb, var(--accent) 86%, #fff); --accent-rgb: var(--brand-dk-rgb); --page-rgb: 18, 18, 17; --bg-rgb: 18, 18, 17; --surface-rgb: 27, 26, 25; --text-rgb: 241, 239, 235; --ok-rgb: 84, 185, 138; --warn-rgb: 225, 166, 80; --danger-rgb: 237, 114, 100; --info-rgb: 114, 169, 228; --violet-rgb: 168, 142, 233; --thumb-bg: 10% 18%; --thumb-fg: 18% 70%; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 20px 50px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .4); --shadow-up: 0 -8px 28px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { color-scheme: dark; --page: #121211; --bg: #121211; --bg-2: #0c0c0b; --surface: #1b1a19; --surface-2: #232220; --surface-3: #2d2b29; --line: #2b2a27; --line-2: #3c3a36; --text: #f1efeb; --text-2: #aaa59e; --text-3: #7a756f; --ok: #54b98a; --warn: #e1a650; --danger: #ed7264; --info: #72a9e4; --violet: #a88ee9; --toast-bg: #2e2c2a; --toast-fg: #f4f2ee; --accent: var(--brand-dk); --on-accent: var(--on-brand-dk); --accent-ink: var(--brand-dk); --accent-2: color-mix(in srgb, var(--accent) 86%, #fff); --accent-rgb: var(--brand-dk-rgb); --page-rgb: 18, 18, 17; --bg-rgb: 18, 18, 17; --surface-rgb: 27, 26, 25; --text-rgb: 241, 239, 235; --ok-rgb: 84, 185, 138; --warn-rgb: 225, 166, 80; --danger-rgb: 237, 114, 100; --info-rgb: 114, 169, 228; --violet-rgb: 168, 142, 233; --thumb-bg: 10% 18%; --thumb-fg: 18% 70%; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); --shadow-3: 0 20px 50px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .4); --shadow-up: 0 -8px 28px rgba(0, 0, 0, .5); } /* ---------------- temel ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } h1 { font-size: 1.75rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.06rem; } p { margin: 0 0 .7em; } a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; } code, kbd { font-family: var(--mono); font-size: .92em; } /* Başlık yazı tipi: işletme adı, bölüm ve sayfa başlıkları */ .serif { font-family: var(--display); font-weight: 540; letter-spacing: -.01em; font-optical-sizing: auto; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } /* ikon hizalama */ .ico { flex: none; display: block; } .ico--inline { display: inline-block; vertical-align: -.18em; } /* ---------------- düğmeler ---------------- */ .btn { --b-bg: var(--surface); --b-fg: var(--text); --b-line: var(--line-2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: 0 14px; height: 38px; border: 1px solid var(--b-line); border-radius: var(--r); background: var(--b-bg); color: var(--b-fg); font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s, opacity .15s; } .btn:hover:not(:disabled) { background: var(--surface-2); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn--primary { --b-bg: var(--accent); --b-fg: var(--on-accent); --b-line: transparent; } .btn--primary:hover:not(:disabled) { background: var(--accent-2); } .btn--ok { --b-bg: var(--ok); --b-fg: #fff; --b-line: transparent; } .btn--ok:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 88%, #000); } .btn--danger { --b-bg: transparent; --b-fg: var(--danger); --b-line: color-mix(in srgb, var(--danger) 35%, transparent); } .btn--danger:hover:not(:disabled) { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .btn--ghost { --b-bg: transparent; --b-line: var(--line-2); } .btn--ghost:hover:not(:disabled) { background: var(--surface-2); } .btn--plain { --b-bg: transparent; --b-line: transparent; } .btn--plain:hover:not(:disabled) { background: var(--surface-2); } .btn--soft { --b-bg: var(--surface-2); --b-line: transparent; } .btn--soft:hover:not(:disabled) { background: var(--surface-3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--ok { --b-fg: #0c1b13; } } :root[data-theme="dark"] .btn--ok { --b-fg: #0c1b13; } .btn--lg { height: 48px; font-size: .95rem; padding: 0 20px; border-radius: var(--r-md); } .btn--sm { height: 32px; font-size: .8125rem; padding: 0 11px; border-radius: var(--r-sm); gap: .35em; } .btn--icon { padding: 0; width: 38px; } .btn--icon.btn--sm { width: 32px; } .btn--icon.btn--lg { width: 48px; } .btn--block { width: 100%; } /* ---------------- form ---------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: .8125rem; font-weight: 600; color: var(--text-2); } .field__hint { font-size: .78rem; color: var(--text-3); line-height: 1.45; } .input, .select, .textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; transition: border-color .15s, box-shadow .15s, background-color .15s; } .textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; } .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--line-2)); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input[type="color"] { padding: 4px; cursor: pointer; } .input[type="date"] { padding-right: 8px; } .select { appearance: none; padding-right: 32px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px; background-repeat: no-repeat; } .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { width: 38px; height: 22px; border-radius: 99px; flex: none; background: var(--line-2); position: relative; transition: background-color .2s var(--ease); } .switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .switch input:checked + .switch__track { background: var(--accent); } .switch input:checked + .switch__track::after { transform: translateX(16px); } .switch input:focus-visible + .switch__track { box-shadow: var(--ring); } /* ---------------- rozet ---------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; } .badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--danger { background: var(--danger-bg); color: var(--danger); } .badge--info { background: var(--info-bg); color: var(--info); } .badge--violet { background: var(--violet-bg); color: var(--violet); } .badge--accent { background: var(--accent-bg); color: var(--accent-ink); } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* ---------------- ürün görseli ---------------- */ /* Fotoğrafı olmayan ürün: sade bir zemin ve adın baş harfi. --h ürün adından üretilir (bkz. util.js → hue), böylece her ürün kendi tonunu korur. */ .thumb { position: relative; flex: none; overflow: hidden; border-radius: var(--r-md); background: hsl(var(--h, 30) var(--thumb-bg)); display: grid; place-items: center; isolation: isolate; } .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out), opacity .3s; } .thumb__ph { font-family: var(--display); font-weight: 500; font-size: 1.7em; line-height: 1; user-select: none; color: hsl(var(--h, 30) var(--thumb-fg)); } .thumb--bare { background: var(--surface-2); } /* ---------------- kart ---------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .card__title { font-size: .9rem; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; } .card__body { padding: 18px; } /* ---------------- tutar özeti ---------------- */ .totals { display: grid; gap: 6px; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--line); } .totals__row { display: flex; justify-content: space-between; gap: 16px; font-size: .875rem; color: var(--text-2); } .totals__row--main { font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: -.015em; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); } .totals__row--main:first-child { padding-top: 0; margin-top: 0; border-top: none; } /* ---------------- tablo ---------------- */ .table { width: 100%; border-collapse: collapse; font-size: .875rem; } .table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .table th { font-size: .78rem; font-weight: 600; color: var(--text-3); background: var(--surface); position: sticky; top: 0; z-index: 1; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background-color .12s; } .table tbody tr:hover { background: var(--surface-2); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------------- pencere ---------------- */ /* Arka plan bulanıklaştırılmaz: pencere açıkken arkadaki sayfa (saat, süreler) her saniye değişir ve bulanıklık bütün ekranın her seferinde yeniden hesaplanması demek; eski bilgisayarda yavaşlatır. Koyu örtü yeterince ayırır. */ .modal-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(14, 13, 11, .55); display: none; align-items: center; justify-content: center; padding: 16px; } .modal-backdrop.is-open { display: flex; animation: fade .18s ease; } .modal { width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); animation: rise .24s var(--ease-out); overflow: hidden; } .modal--sm { width: min(440px, 100%); } .modal--lg { width: min(980px, 100%); } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 10px; flex: none; } .modal__head h3 { font-size: 1.1rem; font-weight: 650; } .modal__body { padding: 0 20px 20px; overflow: auto; flex: 1; } .modal__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); flex: none; background: var(--surface); } .modal__close { border: none; background: var(--surface-2); color: var(--text-2); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; display: grid; place-items: center; transition: background-color .14s, color .14s; } .modal__close:hover { background: var(--surface-3); color: var(--text); } /* Telefonda pencereler alttan açılır. */ @media (max-width: 560px) { .modal-backdrop { align-items: flex-end; padding: 0; } .modal, .modal--sm, .modal--lg { width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet .3s var(--ease-out); } .modal__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .modal > .modal__body:last-child { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99) } to { opacity: 1; transform: none } } @keyframes sheet { from { transform: translateY(40%); opacity: .4 } to { transform: none; opacity: 1 } } /* ---------------- bildirim ---------------- */ .toast-host { position: fixed; z-index: 1000; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: min(380px, calc(100vw - 32px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r-md); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3); font-size: .875rem; font-weight: 500; line-height: 1.45; transform: translateY(8px); opacity: 0; transition: transform .26s var(--ease-out), opacity .22s; /* Bildirimler yalnızca bilgi verir: altındaki düğmeye (ör. kasada "Onayla") dokunmayı engellemesin. */ pointer-events: none; } .toast.is-in { transform: none; opacity: 1; } .toast__icon { flex: none; margin-top: 1px; } .toast--success .toast__icon { color: #5ccf96; } .toast--error .toast__icon { color: #ff8a7a; } .toast--warn .toast__icon { color: #f2b861; } .toast--info .toast__icon { color: #86b8f0; } /* ---------------- yardımcılar ---------------- */ .row { display: flex; align-items: center; gap: 8px; } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; } .grow { flex: 1; min-width: 0; } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .small { font-size: .84rem; } .tiny { font-size: .76rem; } .strong { font-weight: 600; } .nums { font-variant-numeric: tabular-nums; } .center { text-align: center; } .right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hidden { display: none !important; } .mt { margin-top: 14px; } .mb { margin-bottom: 14px; } .gap-sm { gap: 6px; } .empty { display: grid; place-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--text-3); font-size: .875rem; } .empty .ico { color: var(--line-2); margin-bottom: 2px; } .spinner { width: 15px; height: 15px; border-radius: 50%; border: 1.8px solid rgba(128, 128, 128, .3); border: 1.8px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; animation: spin .65s linear infinite; } @keyframes spin { to { transform: rotate(360deg) } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-md); } @keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } } /* ---------------- durum şeridi ---------------- */ .strip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 16px; font-size: .875rem; line-height: 1.45; font-weight: 500; background: var(--surface-2); color: var(--text-2); } .strip .ico { flex: none; margin-top: 1px; } .strip--ok { background: var(--ok-bg); color: color-mix(in srgb, var(--ok) 82%, var(--text)); } .strip--warn { background: var(--warn-bg); color: color-mix(in srgb, var(--warn) 85%, var(--text)); } .strip--info { background: var(--info-bg); color: color-mix(in srgb, var(--info) 82%, var(--text)); } .strip--danger { background: var(--danger-bg); color: color-mix(in srgb, var(--danger) 85%, var(--text)); } .strip code { font-size: .82em; padding: 1px 5px; border-radius: 5px; background: rgba(128, 128, 128, .12); background: color-mix(in srgb, currentColor 10%, transparent); } /* tema geçişi sırasında titreme olmasın */ .theme-anim, .theme-anim * { transition: background-color .2s ease, border-color .2s ease, color .2s ease !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------------- tek başına sayfalar (hata, yetki, geçersiz QR) ---------------- */ .solo { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 32px 22px; background: var(--page); } .solo__box { max-width: 380px; } .solo__ico { color: var(--text-3); display: flex; justify-content: center; margin-bottom: 18px; } .solo__title { font-family: var(--display); font-weight: 540; font-size: 1.65rem; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; } .solo__text { color: var(--text-2); font-size: .9375rem; line-height: 1.6; margin: 0; } .solo__acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* ---------------- tarih ve saat: "26 Eylül Cumartesi 03:27:40", saniyede bir ilerler (util.js) ---------------- */ .clock { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .4em; font-variant-numeric: tabular-nums; } .clock__d, .clock__t { white-space: nowrap; } .clock__d { font-weight: 500; color: var(--text-2); } .clock__t { font-weight: 700; color: var(--text); } .clock--line { display: flex; justify-content: center; margin: 0 0 20px; font-size: 1.05rem; } /* "12 sn", "3 dk": saniyede bir değişirken yazı kaymasın, "3" ile "dk" ayrı satıra düşmesin */ [data-ago] { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Internet Explorer (Windows 7 ve 8'in eski tarayıcısı) bu sayfaları çalıştıramaz; personel ekranlarının başında yalnızca orada görünen bir uyarı durur. IE @supports bilmez, gizleyen kuralı okumaz; bütün diğer tarayıcılar okur. */ .eski-tarayici { margin: 0; padding: 18px 20px; border-bottom: 3px solid #c0392b; background: #fff4d6; color: #1b1a17; font: bold 20px/1.4 Arial, sans-serif; text-align: center; } @supports (display: block) { .eski-tarayici { display: none; } } /* ---------------- eski tarayıcılar ---------------- color-mix() Chrome/Edge 111 ve Safari 16.2'den önce yok (ör. Windows 7'de kalan Chrome/Edge 109, iOS 15). Onlarda yukarıdaki karışımlar geçersiz sayılır ve o renkler hiç çıkmaz (zemin boş, yazı siyah kalır). Bu blok aynı renkleri rgba ile verir: karışımın zemin üstündeki görünüşü, gözle aynı. color-mix bilen tarayıcı bu bloğu okumaz. */ @supports not (color: color-mix(in srgb, red, red)) { :root { --accent-2: var(--accent); --accent-soft: rgba(var(--accent-rgb), .12); --accent-bg: rgba(var(--accent-rgb), .08); --accent-line: rgba(var(--accent-rgb), .3); --ring: 0 0 0 3px rgba(var(--accent-rgb), .24); --ok-bg: rgba(var(--ok-rgb), .09); --warn-bg: rgba(var(--warn-rgb), .1); --danger-bg: rgba(var(--danger-rgb), .08); --info-bg: rgba(var(--info-rgb), .08); --violet-bg: rgba(var(--violet-rgb), .09); } :root[data-theme="dark"] { --accent-2: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-2: var(--accent); } } ::selection { background: rgba(var(--accent-rgb), .22); } .btn--ok:hover:not(:disabled) { background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)) var(--ok); } .btn--danger { --b-line: rgba(var(--danger-rgb), .35); } .btn--danger:hover:not(:disabled) { border-color: rgba(var(--danger-rgb), .5); } .input:hover, .select:hover, .textarea:hover { border-color: rgba(var(--text-rgb), .41); } .strip--ok { color: var(--ok); } .strip--warn { color: var(--warn); } .strip--info { color: var(--info); } .strip--danger { color: var(--danger); } }