/* ══════════════════════════════════════════════════════════════════ Vector Servis — ortak tema: glassmorphism dashboard. Koyu + açık. Kurallar: - Renkler SADECE buradaki değişkenlerden gelir; sayfalarda sabit renk yok. - Paneller yüzer (kenarlardan 12 px içeride), köşeler yuvarlak, cam gerçekten şeffaf. - Renk körü dostu: durumlar hiçbir yerde yalnızca renkle anlatılmaz (her zaman ikon + yazı). Kırmızı/yeşil yerine Okabe-Ito tabanlı mavimsi yeşil (başarılı) ve vermilyon (hata) kullanılır. - Sayfa içi metin mesajı yok; bildirimler toast (SweetAlert2). ══════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Marka */ --primary: #1663c7; --primary-light: #9cc2f4; --primary-text: #a9cbf6; --teal: #107c91; --teal-light: #16c79e; --accent-grad: linear-gradient(135deg, #2f7cf0 0%, #1663c7 45%, #0f8aa0 100%); /* Durum (Okabe-Ito tabanlı, ölçülerek seçildi) */ --success: #5fe0bd; --success-bg: rgba(95, 224, 189, .15); --success-border: rgba(95, 224, 189, .45); --danger: #ffae82; --danger-bg: rgba(255, 174, 130, .15); --danger-border: rgba(255, 174, 130, .50); --warning: #f9d95f; --warning-bg: rgba(249, 217, 95, .14); --warning-border: rgba(249, 217, 95, .45); --info: #98d7fa; --info-bg: rgba(152, 215, 250, .14); --info-border: rgba(152, 215, 250, .45); --on-danger: #1f0d04; /* Zemin: ORTA-AÇIK lacivert (kullanıcı isteği: "sayfa çok karanlık") + yumuşak renkli aurora. Aurora soluk tutulur (kullanıcı: "göz yorucu") — sabit/pasif katman. Cam yüzeylerin (kart/menü/ pencere — interaktif katman) buz/blur/gölge/hover etkisi ise kullanıcı isteğiyle belirginleştirildi. Cam üstündeki yazı/durum renkleri en parlak leke noktasında bile ≥4.5 kontrastla ölçüldü. */ --bg-body: #2c3d5d; --aurora-a: rgba(80, 140, 250, .21); --aurora-b: rgba(30, 190, 170, .15); --aurora-c: rgba(150, 120, 250, .17); --aurora-d: rgba(70, 170, 235, .13); /* Cam */ --glass-1: rgba(255, 255, 255, .11); /* üst-sol */ --glass-2: rgba(255, 255, 255, .03); /* alt-sağ */ --chrome-1: var(--glass-1); /* sidebar/üst bar — koyuda ilave renge gerek yok */ --chrome-2: var(--glass-2); --glass-tint: rgba(20, 32, 58, .36); /* camın altına serilen koyu ton: yazı okunaklı kalsın */ --glass-solid: rgba(34, 48, 78, .90); /* toast / pencere: biraz daha dolu */ --glass-edge: rgba(255, 255, 255, .25); --glass-edge-h: rgba(255, 255, 255, .42); --glass-shine: rgba(255, 255, 255, .34); /* üst ışık çizgisi */ --glass-ring: rgba(0, 0, 0, 0); --glass-shadow: 0 26px 58px -14px rgba(5, 10, 22, .58), 0 10px 22px -8px rgba(5, 10, 22, .36); --glass-shadow-hover: 0 34px 74px -16px rgba(4, 8, 18, .64), 0 14px 28px -10px rgba(4, 8, 18, .42); --hover: rgba(255, 255, 255, .13); --accent-amber: #ffe08a; --accent-amber-bg: rgba(255, 224, 138, .11); --accent-amber-border: rgba(255, 224, 138, .35); --pill-active: linear-gradient(135deg, rgba(80, 150, 255, .42), rgba(30, 170, 190, .30)); --pill-edge: rgba(190, 218, 252, .48); --input-bg: rgba(14, 24, 46, .30); --backdrop: rgba(10, 18, 36, .50); --divider: linear-gradient(90deg, transparent, rgba(255, 255, 255, .20), transparent); /* Veri tablosu: mavi kenarlık, yeşil hover, turkuaz-mavi seçili satır (ölçülü: yazı ≥4.5, hover↔seçili ΔE ~21) */ --table-border: rgba(110, 170, 255, .60); --table-line: rgba(110, 170, 255, .26); --row-hover: rgba(139, 224, 78, .14); --row-active: rgba(26, 168, 245, .20); --row-bar: #4cc3ff; /* Yazı */ --text-1: #f6f9fd; --text-2: #d3deef; --text-3: #bccadf; --text-on-pill: #ffffff; /* Menü ikon renkleri (süs; anlamı yazı taşır) */ --ic-blue: #6aa8ff; --ic-cyan: #45cdef; --ic-teal: #34d1ab; --ic-amber: #f7b733; --ic-purple: #b9a2ff; --ic-indigo: #97a2ff; --ic-slate: #aab6c8; /* Ölçüler */ --gap: 12px; --sb-collapsed: 72px; --sb-expanded: 252px; --radius-xl: 22px; --radius-lg: 18px; --radius: 14px; --radius-sm: 10px; --blur: blur(34px) saturate(195%); --ease: cubic-bezier(.4, 0, .2, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); --dur: .26s; --focus-ring: 0 0 0 3px rgba(156, 194, 244, .65); --font: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Noto Sans', sans-serif; } :root[data-theme="light"] { color-scheme: light; --primary-text: #1257b0; --success: #006b52; --success-bg: rgba(0, 158, 115, .12); --success-border: rgba(0, 107, 82, .35); --danger: #b84a00; --danger-bg: rgba(213, 94, 0, .10); --danger-border: rgba(184, 74, 0, .35); --warning: #7d5200; --warning-bg: rgba(230, 159, 0, .15); --warning-border: rgba(125, 82, 0, .32); --info: #0b62a0; --info-bg: rgba(0, 114, 178, .10); --info-border: rgba(11, 98, 160, .30); --on-danger: #ffffff; /* Zemin: açık pastel aurora */ --bg-body: #e8eef8; --aurora-a: rgba(96, 165, 250, .55); --aurora-b: rgba(45, 212, 191, .38); --aurora-c: rgba(167, 139, 250, .34); --aurora-d: rgba(251, 191, 36, .22); --glass-1: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .34); --chrome-1: rgba(214, 234, 255, .72); /* sidebar/üst bar: belirgin açık mavi */ --chrome-2: rgba(255, 247, 214, .46); /* sidebar/üst bar: belirgin açık sarı */ --glass-tint: rgba(255, 255, 255, 0); --glass-solid: rgba(255, 255, 255, .80); --glass-edge: rgba(255, 255, 255, .88); --glass-edge-h: rgba(255, 255, 255, 1); --glass-shine: rgba(255, 255, 255, 1); --glass-ring: rgba(30, 64, 120, .08); --glass-shadow: 0 28px 58px -16px rgba(30, 58, 110, .34), 0 10px 22px -12px rgba(30, 58, 110, .22); --glass-shadow-hover: 0 32px 64px -18px rgba(30, 58, 110, .40), 0 12px 26px -14px rgba(30, 58, 110, .26); --hover: rgba(255, 255, 255, .62); --accent-amber: #7a4f00; --accent-amber-bg: rgba(122, 79, 0, .14); --accent-amber-border: rgba(122, 79, 0, .32); --pill-active: linear-gradient(135deg, rgba(47, 124, 240, .20), rgba(15, 138, 160, .14)); --pill-edge: rgba(22, 99, 199, .28); --input-bg: rgba(255, 255, 255, .70); --backdrop: rgba(20, 33, 61, .25); --divider: linear-gradient(90deg, transparent, rgba(30, 64, 120, .14), transparent); --table-border: rgba(22, 99, 199, .55); --table-line: rgba(22, 99, 199, .22); --row-hover: rgba(79, 168, 24, .10); --row-active: rgba(2, 132, 199, .17); --row-bar: #0369a1; --text-1: #14213d; --text-2: #42526d; --text-3: #55637d; --text-on-pill: #0f2f63; --ic-blue: #1f6fd6; --ic-cyan: #0a83a6; --ic-teal: #00866a; --ic-amber: #b56f00; --ic-purple: #6d4fd0; --ic-indigo: #4150cf; --ic-slate: #586883; --focus-ring: 0 0 0 3px rgba(22, 99, 199, .45); } /* ── Temel ── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg-body); } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: .95rem; color: var(--text-1); background: var(--bg-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Aurora: büyük, yumuşak renk lekeleri (sabit; kaydırınca cam altında akar gibi görünür) */ body::before { content: ''; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; background: radial-gradient(38vmax 30vmax at 12% 8%, var(--aurora-a), transparent 65%), radial-gradient(34vmax 28vmax at 92% 14%, var(--aurora-b), transparent 65%), radial-gradient(40vmax 32vmax at 78% 96%, var(--aurora-c), transparent 65%), radial-gradient(30vmax 26vmax at 30% 80%, var(--aurora-d), transparent 65%); filter: blur(30px); } a { color: var(--primary-text); } a:hover { color: var(--text-1); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } html.preload *, html.preload *::before, html.preload *::after { transition: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Cam yüzey tarifi (kart, pencere ortak) ── */ .glass, .glass-card { background: linear-gradient(155deg, var(--glass-1), var(--glass-2)), var(--glass-tint); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-shine); } /* Sidebar + üst bar: aynı cam, ama kendi tonu (açık temada belirgin açık mavi/sarı — kullanıcı isteği) */ .sidebar, .topbar { background: linear-gradient(155deg, var(--chrome-1), var(--chrome-2)), var(--glass-tint); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-shine); } /* ══════════════════════════════════════════ SIDEBAR — yüzen cam panel Hover'da İÇERİĞİN ÜSTÜNE açılır (sayfa kaymaz). Sadece sabitliyken (html.sb-pinned) içerik sağa itilir. ══════════════════════════════════════════ */ .sidebar { position: fixed; top: var(--gap); left: var(--gap); bottom: var(--gap); z-index: 1000; width: var(--sb-collapsed); display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; user-select: none; transition: width var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .sidebar:hover, .sidebar:focus-within, html.sb-pinned .sidebar { width: var(--sb-expanded); } .sidebar:hover, .sidebar:focus-within { box-shadow: var(--glass-shadow-hover), 0 0 0 1px var(--glass-ring), inset 0 1px 0 var(--glass-shine); } .sb-reveal { opacity: 0; transform: translateX(-6px); transition: opacity .18s .05s, transform .22s .05s var(--ease); white-space: nowrap; min-width: 0; } .sidebar:hover .sb-reveal, .sidebar:focus-within .sb-reveal, html.sb-pinned .sidebar .sb-reveal { opacity: 1; transform: translateX(0); } /* Logo */ .sb-header { display: flex; align-items: center; gap: 8px; padding: 14px 13px 10px 14px; flex-shrink: 0; } .sb-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: var(--text-1); border-radius: var(--radius); } .sb-logo { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--accent-grad); box-shadow: 0 8px 20px -6px rgba(22, 99, 199, .65), inset 0 1px 0 rgba(255, 255, 255, .35); } .sb-logo img { width: 24px; height: 24px; filter: brightness(0) invert(1); } .sb-brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .sb-brand-sub { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } /* Raptiye */ .sb-pin { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--glass-edge); background: var(--hover); color: var(--text-2); font-size: .72rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .18s .05s, transform var(--dur) var(--spring), background .15s, color .15s; } .sidebar:hover .sb-pin, .sidebar:focus-within .sb-pin, html.sb-pinned .sb-pin { opacity: 1; pointer-events: auto; } html.sb-pinned .sb-pin { transform: rotate(45deg); color: var(--text-on-pill); background: var(--pill-active); border-color: var(--pill-edge); } .sb-pin:hover { color: var(--text-1); border-color: var(--glass-edge-h); } /* Menü */ .sb-nav { flex: 1; padding: 6px 10px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .sb-nav::-webkit-scrollbar { display: none; } .sb-divider { height: 1px; margin: 10px 8px; background: var(--divider); } .sb-nav li + li { margin-top: 3px; } .sb-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 5px; border-radius: var(--radius); border: 1px solid transparent; background: none; color: var(--text-2); font-family: inherit; font-size: .88rem; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .sb-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; font-size: .92rem; background: color-mix(in srgb, currentColor 14%, transparent); transition: background .18s, box-shadow .18s, transform .18s var(--spring); } .sb-label { flex: 1; text-align: left; } .ic-blue { color: var(--ic-blue); } .ic-cyan { color: var(--ic-cyan); } .ic-teal { color: var(--ic-teal); } .ic-amber { color: var(--ic-amber); } .ic-purple { color: var(--ic-purple); } .ic-indigo { color: var(--ic-indigo); } .ic-slate { color: var(--ic-slate); } .ic-danger { color: var(--danger); } .sb-link:hover { background: var(--hover); color: var(--text-1); } .sb-link:hover .sb-icon { transform: scale(1.06); } /* Aktif sayfa: dolu cam hap + kalın yazı + dolu ikon kutusu (renkten bağımsız da anlaşılır) */ .sb-link[aria-current="page"] { background: var(--pill-active); border-color: var(--pill-edge); color: var(--text-on-pill); font-weight: 700; cursor: default; box-shadow: 0 6px 18px -8px rgba(22, 99, 199, .55), inset 0 1px 0 rgba(255, 255, 255, .18); } .sb-link[aria-current="page"] .sb-icon { color: #fff; background: var(--accent-grad); box-shadow: 0 6px 14px -4px rgba(22, 99, 199, .70), inset 0 1px 0 rgba(255, 255, 255, .35); } .sb-link.sb-logout:hover { background: var(--danger-bg); color: var(--danger); } .sb-bottom { padding: 4px 10px 6px; flex-shrink: 0; } .sb-bottom::before { content: ''; display: block; height: 1px; margin: 0 8px 8px; background: var(--divider); } /* Profil kartı (sahte "çevrimiçi" noktası yok) */ .sb-profile { display: flex; align-items: center; gap: 12px; margin: 4px 10px 12px; padding: 9px 7px; border-radius: var(--radius); background: var(--hover); border: 1px solid var(--glass-edge); flex-shrink: 0; overflow: hidden; } .sb-avatar { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } .sb-profile-name { font-size: .84rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; } .sb-profile-role { font-size: .72rem; color: var(--text-3); display: flex; gap: 6px; align-items: center; } /* ══════════════════════════════════════════ İÇERİK + ÜST BAR ══════════════════════════════════════════ */ .main { margin-left: calc(var(--sb-collapsed) + var(--gap) * 2); min-height: 100vh; padding: var(--gap) calc(var(--gap) * 2) 32px var(--gap); transition: margin-left var(--dur) var(--ease); } html.sb-pinned .main { margin-left: calc(var(--sb-expanded) + var(--gap) * 2); } .topbar { position: sticky; top: var(--gap); z-index: 900; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 20px; margin-bottom: 22px; border-radius: var(--radius-lg); } .topbar-title { margin: 0; flex: 1; min-width: 0; font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-title-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; font-size: .95rem; color: #fff; background: var(--accent-grad); box-shadow: 0 6px 14px -4px rgba(22, 99, 199, .6), inset 0 1px 0 rgba(255, 255, 255, .35); } .topbar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--hover); border: 1px solid var(--glass-edge); font-size: .82rem; color: var(--text-2); white-space: nowrap; } .chip strong { color: var(--text-1); font-weight: 650; } .chip i { color: var(--primary-text); } .icon-btn { width: 38px; height: 38px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 999px; background: var(--hover); border: 1px solid var(--glass-edge); color: var(--text-1); cursor: pointer; transition: background .15s, border-color .15s, transform .2s var(--spring); } .icon-btn:hover { border-color: var(--glass-edge-h); transform: translateY(-1px); filter: brightness(1.2); } .icon-btn:active { transform: scale(.94); } .menu-toggle { display: none; } .theme-icon-light { display: none; } :root[data-theme="light"] .theme-icon-light { display: inline; } :root[data-theme="light"] .theme-icon-dark { display: none; } /* ══════════════════════════════════════════ ORTAK BİLEŞENLER ══════════════════════════════════════════ */ .glass-card { border-radius: var(--radius-lg); padding: 24px 26px; transition: border-color .2s, box-shadow .2s, transform .25s var(--spring); } .glass-card.is-hoverable:hover { border-color: var(--glass-edge-h); transform: translateY(-3px); box-shadow: var(--glass-shadow-hover), inset 0 1px 0 var(--glass-shine); } .glass-card h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; } /* Kart renk tonları — "liquid glass" ("Görsel yön" + .cursor/rules/liquid-glass.mdc): her kart kendi renginde. Yapı: yarı saydam cam + güçlü bulanıklık + köşelerden sızan renk + ince açık kenar, üstte parlak ışık çizgisi, iç ışıma, kartın kendi renginde yumuşak dış gölge. Koyu temada renk katmanları zeminden KOYU doygun tonlardır (parlaklığı artırmaz → yazı kontrastı korunur); başlık köşesindeki parıltı koyu temada çok hafiftir (ışık hissini üst kenar + iç ışıma verir). Açık temada pastel. Kullanım:
· tonlar: blue · violet · teal · amber · rose */ :root, :root[data-theme="dark"] { --tone-blue-a: rgba(30, 64, 175, .62); --tone-blue-b: rgba(12, 74, 110, .50); --tone-blue-glow: rgba(96, 165, 250, .08); --tone-blue-sh: rgba(37, 99, 235, .40); --tone-violet-a: rgba(91, 33, 182, .62); --tone-violet-b: rgba(55, 48, 163, .52); --tone-violet-glow: rgba(167, 139, 250, .08); --tone-violet-sh: rgba(124, 58, 237, .42); --tone-teal-a: rgba(17, 94, 89, .56); --tone-teal-b: rgba(21, 94, 117, .50); --tone-teal-glow: rgba(45, 212, 191, .06); --tone-teal-sh: rgba(13, 148, 136, .40); --tone-amber-a: rgba(146, 64, 14, .50); --tone-amber-b: rgba(136, 19, 55, .40); --tone-amber-glow: rgba(251, 191, 36, .06); --tone-amber-sh: rgba(217, 119, 6, .36); --tone-rose-a: rgba(136, 19, 55, .56); --tone-rose-b: rgba(91, 33, 182, .40); --tone-rose-glow: rgba(251, 113, 133, .08); --tone-rose-sh: rgba(225, 29, 72, .34); --tone-edge: rgba(255, 255, 255, .20); --tone-edge-top: rgba(255, 255, 255, .42); --tone-inner: inset 0 1px 1px rgba(255, 255, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -18px 40px -24px rgba(0, 0, 0, .35); --tone-depth: 0 25px 50px -12px rgba(2, 6, 23, .45); } :root[data-theme="light"] { --tone-blue-a: rgba(191, 219, 254, .80); --tone-blue-b: rgba(186, 230, 253, .60); --tone-blue-glow: rgba(255, 255, 255, .70); --tone-blue-sh: rgba(37, 99, 235, .22); --tone-violet-a: rgba(221, 214, 254, .85); --tone-violet-b: rgba(199, 210, 254, .60); --tone-violet-glow: rgba(255, 255, 255, .70); --tone-violet-sh: rgba(109, 40, 217, .20); --tone-teal-a: rgba(153, 246, 228, .70); --tone-teal-b: rgba(165, 243, 252, .55); --tone-teal-glow: rgba(255, 255, 255, .70); --tone-teal-sh: rgba(13, 148, 136, .22); --tone-amber-a: rgba(254, 215, 170, .85); --tone-amber-b: rgba(254, 205, 211, .60); --tone-amber-glow: rgba(255, 255, 255, .70); --tone-amber-sh: rgba(217, 119, 6, .20); --tone-rose-a: rgba(254, 205, 211, .72); --tone-rose-b: rgba(233, 213, 255, .60); --tone-rose-glow: rgba(255, 255, 255, .70); --tone-rose-sh: rgba(225, 29, 72, .18); --tone-edge: rgba(255, 255, 255, .85); --tone-edge-top: rgba(255, 255, 255, 1); --tone-inner: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .45); --tone-depth: 0 25px 50px -12px rgba(30, 58, 110, .22); } .glass-card[class*="is-tone-"] { background: radial-gradient(55% 45% at 6% 0%, var(--tone-glow) 0%, transparent 70%), radial-gradient(120% 90% at 0% 0%, var(--tone-a) 0%, transparent 62%), radial-gradient(110% 85% at 100% 100%, var(--tone-b) 0%, transparent 64%), linear-gradient(155deg, var(--glass-1), var(--glass-2)), var(--glass-tint); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid var(--tone-edge); border-top-color: var(--tone-edge-top); box-shadow: var(--tone-depth), 0 18px 40px -22px var(--tone-sh), var(--tone-inner); } .is-tone-blue { --tone-a: var(--tone-blue-a); --tone-b: var(--tone-blue-b); --tone-glow: var(--tone-blue-glow); --tone-sh: var(--tone-blue-sh); } .is-tone-violet { --tone-a: var(--tone-violet-a); --tone-b: var(--tone-violet-b); --tone-glow: var(--tone-violet-glow); --tone-sh: var(--tone-violet-sh); } .is-tone-teal { --tone-a: var(--tone-teal-a); --tone-b: var(--tone-teal-b); --tone-glow: var(--tone-teal-glow); --tone-sh: var(--tone-teal-sh); } .is-tone-amber { --tone-a: var(--tone-amber-a); --tone-b: var(--tone-amber-b); --tone-glow: var(--tone-amber-glow); --tone-sh: var(--tone-amber-sh); } .is-tone-rose { --tone-a: var(--tone-rose-a); --tone-b: var(--tone-rose-b); --tone-glow: var(--tone-rose-glow); --tone-sh: var(--tone-rose-sh); } .glass-card[class*="is-tone-"] h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); } /* ── Küçük ayar kartı parçaları (Ayarlar + Yönetim → Ayarlar): başlık, iki sütun alan, anahtar satırı ── */ .set-card { padding: 18px 20px; border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 14px; } .set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; } .set-head h2 { margin: 0; font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 10px; } .set-head h2 i { color: var(--primary-text); font-size: .95rem; width: 18px; text-align: center; } .set-head .status { flex-shrink: 0; } /* Alanlar: iki sütun; her alan = etiket + kutu + ipucu satırı (ipucu satırı hep yer tutar → kutular aynı hizada) */ .set-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } @media (max-width: 460px) { .set-fields { grid-template-columns: 1fr; } } .set-field { display: grid; grid-template-rows: auto 38px auto; gap: 5px; min-width: 0; } .set-label { display: flex; align-items: flex-end; min-height: 2.1em; /* iki satıra taşan etiketlerde kutular hizalı kalır */ margin: 0; font-size: .68rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); } .set-field .form-control { height: 38px; min-height: 0; padding: 0 12px; font-size: .9rem; border-radius: 12px; font-variant-numeric: tabular-nums; } .set-readout { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px dashed var(--warning-border); background: var(--warning-bg); color: var(--warning); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; } .set-hint { display: block; font-size: .74rem; line-height: 1.4; color: var(--text-3); min-height: 1.4em; } /* Anahtar satırı: yazı solda, anahtar sağda — tüm satır tıklanabilir */ .set-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--hover); cursor: pointer; transition: border-color .15s, background .15s; } .set-switch:hover { border-color: var(--glass-edge-h); } .set-switch.is-top { align-items: flex-start; } .set-switch.is-top .form-check-input { margin-top: 2px; } .set-switch-text { font-size: .86rem; font-weight: 650; color: var(--text-1); display: grid; gap: 4px; } .set-switch-text .set-hint { font-weight: 400; min-height: 0; } .set-switch.form-switch { padding-left: 14px; min-height: 0; } .set-switch .form-check-input { flex-shrink: 0; float: none; margin: 0 !important; width: 2.4em; height: 1.3em; cursor: pointer; } .set-switch:has(.form-check-input:focus-visible) { box-shadow: var(--focus-ring); } .set-note { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--text-3); } .set-note i { margin-right: 4px; } .btn-glass.is-pill { border-radius: 999px; padding: 0 26px; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; } .text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); } .btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--hover); color: var(--text-1); font: inherit; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; backdrop-filter: blur(10px); transition: background .15s, border-color .15s, box-shadow .2s, transform .2s var(--spring); } .btn-glass:hover { border-color: var(--glass-edge-h); color: var(--text-1); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35); } .btn-glass:active { transform: translateY(0) scale(.98); } .btn-glass.is-primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -8px rgba(22, 99, 199, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn-glass.is-primary:hover { color: #fff; box-shadow: 0 14px 30px -8px rgba(22, 99, 199, .85), inset 0 1px 0 rgba(255, 255, 255, .3); } /* Durum rozeti: renk + ikon + yazı (renk körü dostu). Hata rozeti DOLU, diğerleri çerçeveli: açık temada okunur kalan koyu turuncu ile koyu sarı kırmızı körlüğünde (protanopi) aynı kahverengiye dönüşür; dolu/çerçeveli farkı renksiz de görünür. Ölçüm (Machado 2009 simülasyonu, ΔE): başarılı↔hata her iki temada 30+ (eski palet 11). */ .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 650; border: 1px solid; white-space: nowrap; } .status-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); } .status-danger { color: var(--on-danger); background: var(--danger); border-color: var(--danger); } .status-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); } .status-info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); } /* "Yapım aşamasında" iskeleti */ .wip { max-width: 640px; margin: 6vh auto 0; text-align: center; padding: 48px 32px; } .wip-icon { width: 76px; height: 76px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 24px; font-size: 1.9rem; color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-border); box-shadow: inset 0 1px 0 var(--glass-shine); } .wip h2 { font-size: 1.35rem; margin-bottom: 8px; } .wip p { color: var(--text-2); margin: 0 0 6px; } /* Ana sayfa iskeleti */ .welcome { display: flex; flex-direction: column; gap: 6px; } .welcome h2 { font-size: 1.4rem; margin: 0; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 20px; } .info-item { padding: 14px 16px; border-radius: var(--radius); background: var(--hover); border: 1px solid var(--glass-edge); } .info-item dt { font-size: .72rem; color: var(--text-3); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; } .info-item dd { margin: 6px 0 0; font-weight: 600; } .status-accent { color: var(--ic-purple); background: color-mix(in srgb, var(--ic-purple) 14%, transparent); border-color: color-mix(in srgb, var(--ic-purple) 40%, transparent); } .status-muted { color: var(--text-3); background: var(--hover); border-color: var(--glass-edge); } /* ══════════════════════════════════════════ SEKMELER (cam segment) ══════════════════════════════════════════ */ .tabs { display: flex; gap: 4px; padding: 5px; margin-bottom: 18px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--text-2); font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .tab:hover { background: var(--hover); color: var(--text-1); } .tab[aria-selected="true"] { background: var(--pill-active); border-color: var(--pill-edge); color: var(--text-on-pill); box-shadow: 0 6px 18px -8px rgba(22, 99, 199, .55), inset 0 1px 0 rgba(255, 255, 255, .18); } .tab-count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; font-size: .72rem; background: var(--hover); border: 1px solid var(--glass-edge); } [role="tabpanel"][hidden] { display: none; } /* Bölüm başlığı (kart içi) */ .section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .section-head h2 { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .section-head h2 i { color: var(--primary-text); } .live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--success); } .live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--success-bg); animation: pulse 2s infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } } .btn-glass.is-sm { height: 34px; padding: 0 14px; font-size: .82rem; } .btn-glass.is-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .btn-icon { width: 34px; padding: 0; } .btn-glass:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* Renkli araç çubuğu düğmeleri: ikon/renk sadece süstür, her düğmenin kendi metni de var (renk körü dostu). Aynı formülü zaten kontrast-doğrulanmış durum rozetleri kullanır. */ .btn-glass.is-accent-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .btn-glass.is-accent-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .btn-glass.is-accent-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); } .btn-glass.is-accent-amber, .pill-switch.is-accent-amber { background: var(--accent-amber-bg); border-color: var(--accent-amber-border); color: var(--accent-amber); } .btn-glass.is-accent-teal { background: color-mix(in srgb, var(--ic-teal) 12%, transparent); border-color: color-mix(in srgb, var(--ic-teal) 42%, transparent); color: var(--ic-teal); } .btn-glass.is-accent-teal:hover:not(:disabled), .btn-glass.is-accent-success:hover, .btn-glass.is-accent-danger:hover, .btn-glass.is-accent-warning:hover, .btn-glass.is-accent-amber:hover { filter: brightness(1.14); } /* ══════════════════════════════════════════ TABLOLAR ══════════════════════════════════════════ */ .table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; } .glass-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; } .glass-table th { padding: 10px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--glass-edge); } .glass-table td { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--glass-edge) 60%, transparent); vertical-align: middle; } .glass-table tbody tr { transition: background .15s; } .glass-table tbody tr:hover { background: var(--hover); } .glass-table tbody tr:last-child td { border-bottom: 0; } .glass-table .cell-actions { text-align: right; white-space: nowrap; } .glass-table .cell-actions .btn-glass + .btn-glass { margin-left: 4px; } .glass-table tr.is-muted td { color: var(--text-3); } .cell-main { font-weight: 650; } .cell-sub { font-size: .76rem; color: var(--text-3); } .empty-row td { text-align: center; color: var(--text-3); padding: 28px 12px; } /* Veri tablosu varyantı (.table-wrap.is-data): mavi kenarlık, YEŞİL hover, TURKUAZ-MAVİ seçili satır. Seçili satır sadece renkle değil, sol çubuk + kalın yazı ile de ayrılır (renk körü dostu). */ .table-wrap.is-data { margin: 0; padding: 0; border: 1.5px solid var(--table-border); border-radius: var(--radius); background: color-mix(in srgb, var(--glass-tint) 50%, transparent); } .is-data .glass-table th { border-bottom: 1.5px solid var(--table-border); background: color-mix(in srgb, var(--table-line) 55%, transparent); color: var(--text-2); } .is-data .glass-table td { border-bottom: 1px solid var(--table-line); } .is-data .glass-table th + th, .is-data .glass-table td + td { border-left: 1px solid var(--table-line); } .is-data .glass-table tbody tr { cursor: pointer; } .is-data .glass-table tbody tr.empty-row { cursor: default; } .is-data .glass-table tbody tr:hover { background: var(--row-hover); } .is-data .glass-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--row-bar) 35%, transparent); } .is-data .glass-table tbody tr.is-active, .is-data .glass-table tbody tr.is-active:hover { background: var(--row-active); } /* yazı kalınlığı değişmez: sütunlar oynamasın */ .is-data .glass-table tbody tr.is-active td:first-child { box-shadow: inset 5px 0 0 var(--row-bar); } .is-data .glass-table tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary-light); border-radius: 0; } /* Açılır liste (dropdown) — cam */ .dropdown-menu { background: var(--glass-solid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); border-radius: var(--radius); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-shine); color: var(--text-1); padding: 8px; --bs-dropdown-link-hover-bg: var(--hover); } .dropdown-menu .dropdown-header { color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; } .menu-check { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; font-size: .88rem; margin: 0; } .menu-check:hover { background: var(--hover); } .menu-check input { margin: 0; flex-shrink: 0; } .menu-check.is-locked { opacity: .6; cursor: not-allowed; } .dropdown-menu hr { margin: 6px 0; border-color: var(--glass-edge); opacity: 1; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--text-3); font-size: .82rem; flex-wrap: wrap; } .pager-btns { display: flex; gap: 6px; } /* ══════════════════════════════════════════ FORMLAR (Bootstrap form sınıfları cam görünümle) ══════════════════════════════════════════ */ .form-label { font-size: .78rem; font-weight: 650; color: var(--text-2); margin-bottom: 6px; letter-spacing: .01em; } .form-control, .form-select { height: 42px; border-radius: 12px; background-color: var(--input-bg); border: 1px solid var(--glass-edge); color: var(--text-1); font-size: .9rem; transition: border-color .15s, box-shadow .15s, background-color .15s; } .form-control::placeholder { color: var(--text-3); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); border-color: var(--pill-edge); color: var(--text-1); box-shadow: var(--focus-ring); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); background-image: none; padding-right: .75rem; } .form-hint { font-size: .74rem; color: var(--text-3); margin-top: 5px; } /* PIN kutusu: tarayıcı "şifre alanı" saymaz (kaydet/ihlal uyarısı yok), rakamlar ● ile gizli */ .pin-input { -webkit-text-security: disc; text-security: disc; letter-spacing: .18em; font-variant-numeric: tabular-nums; } .pin-input::placeholder { letter-spacing: normal; } .pin-input.is-revealed { -webkit-text-security: none; text-security: none; } .pin-wrap { position: relative; } .pin-wrap .form-control { padding-right: 44px; } .pin-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--text-3); cursor: pointer; } .pin-eye:hover { color: var(--text-1); background: var(--hover); } .form-select option { background: var(--bg-body); color: var(--text-1); } .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; background-color: var(--hover); border-color: var(--glass-edge); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* Açık temada kapalı anahtar beyaz zeminde kaybolmasın: belirgin gri-lacivert zemin ve kenar */ :root[data-theme="light"] .form-switch .form-check-input:not(:checked) { background-color: rgba(30, 58, 110, .16); border-color: rgba(30, 58, 110, .42); } .form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--pill-edge); } .form-check-label { cursor: pointer; font-weight: 600; } /* ══════════════════════════════════════════ PENCERE (Bootstrap modal → cam) ══════════════════════════════════════════ */ .modal-backdrop.show { opacity: 1; background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-content { background: var(--glass-solid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-shine); color: var(--text-1); } .modal-header, .modal-footer { border-color: color-mix(in srgb, var(--glass-edge) 60%, transparent); padding: 16px 22px; } .modal-body { padding: 20px 22px; } .modal-title { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .modal-title i { color: var(--primary-text); } /* ══════════════════════════════════════════ HATA SAYFALARI (girişsiz de açılır) ══════════════════════════════════════════ */ .error-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .error-card { max-width: 540px; width: 100%; text-align: center; padding: 44px 34px; border-radius: var(--radius-xl); } .error-code { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--text-3); margin-bottom: 6px; } .error-icon { width: 80px; height: 80px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 24px; font-size: 2rem; border: 1px solid; box-shadow: inset 0 1px 0 var(--glass-shine); } .error-icon.is-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); } .error-icon.is-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); } .error-icon.is-info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); } .error-card h1 { font-size: 1.5rem; margin: 0 0 10px; letter-spacing: -.01em; } .error-card p { color: var(--text-2); margin: 0 0 18px; line-height: 1.55; } .error-steps { text-align: left; margin: 0 0 24px; padding: 14px 18px 14px 34px; color: var(--text-2); line-height: 1.75; font-size: .9rem; border-radius: var(--radius); background: var(--hover); border: 1px solid var(--glass-edge); } .error-steps code { color: var(--text-1); background: var(--hover); padding: 1px 6px; border-radius: 6px; } .error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ══════════════════════════════════════════ SWEETALERT2 — cam toast + cam onay penceresi ══════════════════════════════════════════ */ .swal2-container.swal2-backdrop-show { background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Toast'un kabı ekran boyu bir kolondur: arka plan bulanıklığı SADECE onay pencerelerinde olsun (yoksa toast çıkınca sağda ekran boyu puslu bir şerit oluşuyordu) */ .swal2-container:has(> .swal2-toast), body.swal2-toast-shown .swal2-container { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Toast: şeffaf buzlu cam (glassmorphism) — arkası bulanık görünür, renk sadece mesaj türünden gelen ince bir tondan (başarı yeşil, hata kırmızı, uyarı amber, bilgi mavi): ikon, ilerleme çizgisi, hafif ışıma. Yazı kontrastı ≥ 4.5 (açık temada lacivert, koyu temada beyaz yazı; arkası bulanık + cam dolgusu). */ :root, :root[data-theme="dark"] { --toast-bg: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%), rgba(30, 48, 90, .62); /* parlak yeşil zeminde bile beyaz yazı ≥ 4.5 */ --toast-text: #ffffff; --toast-sheen: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); } :root[data-theme="light"] { --toast-bg: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .42) 100%); --toast-text: #0f1b33; --toast-sheen: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55); } .swal2-popup.swal2-toast { --toast-accent: #2f6bff; } .swal2-popup.swal2-toast.swal2-icon-success { --toast-accent: #10a36b; } .swal2-popup.swal2-toast.swal2-icon-error { --toast-accent: #e0435c; } .swal2-popup.swal2-toast.swal2-icon-warning { --toast-accent: #e08a0b; } .swal2-popup.swal2-toast.swal2-icon-info, .swal2-popup.swal2-toast.swal2-icon-question { --toast-accent: #2f6bff; } .swal2-popup { background: var(--glass-solid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--text-1); border: 1px solid var(--glass-edge); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-shine); font-family: var(--font); } .swal2-popup.swal2-toast { --toast-bar: var(--toast-accent); --toast-glow: 0 16px 36px -14px color-mix(in srgb, var(--toast-accent) 55%, transparent); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--toast-accent) 16%, transparent) 0%, transparent 55%), var(--toast-bg); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 0; /* çerçeve yok — kenarı yumuşak, çok katmanlı gölge belirler */ border-radius: var(--radius); padding: 10px 14px; box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 10px 24px -6px rgba(15, 23, 42, .16), 0 22px 48px -16px rgba(15, 23, 42, .20), var(--toast-glow), var(--toast-sheen); } .swal2-popup.swal2-toast .swal2-title { font-size: .9rem; font-weight: 600; margin: 0 6px; color: var(--toast-text); } .swal2-popup.swal2-toast .swal2-close { color: var(--toast-text); opacity: .75; } .swal2-popup.swal2-toast .swal2-close:hover { opacity: 1; } .swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--toast-bar); opacity: .85; } /* Toast giriş/çıkış: ansızın değil — saydamlıktan YAVAŞÇA belirir (hafif aşağı kayıp netleşir), hızlıca saydamlaşarak kaybolur */ .swal2-popup.swal2-toast.vs-toast-in { animation: vsToastIn .7s cubic-bezier(.22, 1, .36, 1) both; } .swal2-popup.swal2-toast.vs-toast-out { animation: vsToastOut .25s cubic-bezier(.4, 0, 1, 1) both; } @keyframes vsToastIn { from { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes vsToastOut { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(-6px) scale(.98); filter: blur(3px); } } @media (prefers-reduced-motion: reduce) { @keyframes vsToastIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vsToastOut { from { opacity: 1; } to { opacity: 0; } } } .swal2-title { color: var(--text-1); font-size: 1.25rem; } .swal2-html-container { color: var(--text-2); } .swal2-actions { gap: 8px; } .swal2-styled.swal2-confirm { background: var(--accent-grad); border-radius: 999px; padding: 10px 24px; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(22, 99, 199, .7); } .swal2-styled.swal2-cancel { background: var(--hover); color: var(--text-1); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 10px 24px; font-weight: 600; } .swal2-styled:focus-visible { box-shadow: var(--focus-ring); } .swal2-timer-progress-bar { background: var(--primary-light); opacity: .7; } /* Toast ikonları da renk körü paletinden; ikon şekli (✓ ✕ ! i) ayrıca anlam taşır */ .swal2-icon.swal2-success { color: var(--success); border-color: var(--success-border); } .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--success); } .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success-border); } .swal2-icon.swal2-error { color: var(--danger); border-color: var(--danger-border); } .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger); } .swal2-icon.swal2-warning { color: var(--warning); border-color: var(--warning-border); } .swal2-icon.swal2-info { color: var(--info); border-color: var(--info-border); } .swal2-icon.swal2-question { color: var(--info); border-color: var(--info-border); } .swal2-popup .swal2-success-circular-line-left, .swal2-popup .swal2-success-circular-line-right, .swal2-popup .swal2-success-fix { background: transparent !important; } /* Çıkış onayı (kullanıcı isteği): düz beyaz/koyu değil — açık cam üzerinde köşelerden kırmızı, turuncu, sarı, yeşil yumuşak tonlar; soru işaretinin dairesi kırmızı. İki temada da açık kart, koyu yazı. "Evet, çıkış yap" kırmızı cam, "Vazgeç" yeşil cam (aynı saydamlık). */ .swal2-popup.vs-logout { background: radial-gradient(75% 65% at 0% 0%, rgba(239, 68, 68, .36) 0%, transparent 65%), radial-gradient(65% 60% at 100% 0%, rgba(249, 115, 22, .34) 0%, transparent 65%), radial-gradient(65% 60% at 0% 100%, rgba(250, 204, 21, .40) 0%, transparent 65%), radial-gradient(75% 65% at 100% 100%, rgba(34, 197, 94, .34) 0%, transparent 65%), rgba(255, 255, 255, .86); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .5), inset 0 1px 0 #fff; color: #0f172a; } .swal2-popup.vs-logout .swal2-title { color: #0f172a; font-weight: 800; } .swal2-popup.vs-logout .swal2-icon.swal2-question { color: #dc2626; border-color: #dc2626; border-width: .22em; background: rgba(220, 38, 38, .08); box-shadow: 0 0 0 6px rgba(220, 38, 38, .12); } .swal2-popup.vs-logout .swal2-styled.swal2-confirm { color: #991b1b; background: rgba(239, 68, 68, .18); border: 1px solid rgba(220, 38, 38, .50); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); } .swal2-popup.vs-logout .swal2-styled.swal2-cancel { color: #065f46; background: rgba(34, 197, 94, .18); border: 1px solid rgba(22, 163, 74, .50); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); } .swal2-popup.vs-logout .swal2-styled.swal2-confirm:hover { background: rgba(239, 68, 68, .28); color: #7f1d1d; } .swal2-popup.vs-logout .swal2-styled.swal2-cancel:hover { background: rgba(34, 197, 94, .28); color: #064e3b; } .swal2-popup.vs-logout .swal2-styled { transition: background .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1); } .swal2-popup.vs-logout .swal2-styled:hover { transform: translateY(-1px); } /* ══════════════════════════════════════════ MOBİL (≤ 768 px): menü soldan kayar, arkası bulanık karartılır ══════════════════════════════════════════ */ .sb-backdrop { position: fixed; inset: 0; z-index: 999; background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } @media (max-width: 768px) { .sidebar, .sidebar:hover, .sidebar:focus-within, html.sb-pinned .sidebar { width: min(var(--sb-expanded), 82vw); transform: translateX(calc(-100% - var(--gap) * 2)); transition: transform var(--dur) var(--ease); } .sidebar .sb-reveal { opacity: 1; transform: none; } .sb-pin { display: none; } html.sb-open .sidebar { transform: translateX(0); } html.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; } .main, html.sb-pinned .main { margin-left: 0; padding: 10px 10px 24px; } .menu-toggle { display: inline-grid; } .topbar { top: 10px; padding: 10px 12px; gap: 10px; flex-wrap: wrap; } .topbar-title { font-size: 1.02rem; } .topbar-meta { width: 100%; justify-content: flex-start; } .chip-date { display: none; } .glass-card { padding: 20px 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* backdrop-filter desteklemeyen eski tarayıcılar: okunabilir dolu zemin */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sidebar, .topbar, .glass-card, .swal2-popup { background: var(--glass-solid); } } /* ══ Tekerlek seçici (wheel.js) — iPhone saat ayarı gibi: ortadaki bant seçili değer, üstü/altı şeffaflaşır ══ */ input[data-wheel] { cursor: pointer; -moz-appearance: textfield; appearance: textfield; } input[data-wheel]::-webkit-outer-spin-button, input[data-wheel]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* uyumsuz ok düğmeleri yok */ input[data-wheel="time"]::-webkit-calendar-picker-indicator { display: none; } /* tarayıcının saat simgesi yok */ .wheel-pop { position: fixed; z-index: 2000; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, rgba(250, 252, 255, .97), rgba(236, 243, 255, .95)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 24px 50px -18px rgba(16, 40, 110, .45), 0 4px 12px -6px rgba(16, 40, 110, .25), inset 0 1px 0 #fff; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .16s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1); } .wheel-pop.is-open { opacity: 1; transform: none; } .wheel-body { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; } /* seçim bandı: ortadaki satırın arkasında mavi cam şerit */ .wheel-body::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 34px; transform: translateY(-50%); border-radius: 10px; pointer-events: none; background: rgba(31, 79, 216, .12); border: 1px solid rgba(31, 79, 216, .30); } .wheel-col { position: relative; flex: 1 1 0; min-width: 52px; height: 170px; /* 5 satır × 34 px */ overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; /* üstte ve altta yumuşak şeffaflaşma */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 32%, #000 68%, transparent 100%); } .wheel-col::-webkit-scrollbar { display: none; } .wheel-col ul { list-style: none; margin: 0; } .wheel-col li { height: 34px; display: grid; place-items: center; scroll-snap-align: center; font-size: 1rem; font-variant-numeric: tabular-nums; color: #44557a; cursor: pointer; transition: color .12s, font-size .12s, font-weight .12s; } .wheel-col li.is-on { color: #0c1f4a; font-size: 1.22rem; font-weight: 750; } .wheel-sep { position: relative; font-size: 1.2rem; font-weight: 750; color: #0c1f4a; padding: 0 1px; } @media (prefers-reduced-motion: reduce) { .wheel-pop { transition: none; } .wheel-col { scroll-behavior: auto; } } /* ── Cam açılır kutu (glass_select.js,