/* Tasarım sistemi: docs/05-TASARIM.md. Font dosyaları için docs/YAPILACAKLAR.md'ye bak. */ :root { /* Marka — beyaz etiketleme için değiştirilebilir. */ --brand-900: #2B1A31; --brand-700: #4A2B52; --brand-500: #6E4076; /* Metin */ --ink-900: #241A2A; --ink-600: #6B6070; --ink-400: #7B7181; /* Yüzey */ --surface: #F8F6F8; --panel: #FFFFFF; --line: #E5DFE7; /* Vurgu */ --brass: #A8813C; /* Durum */ --ok: #2F7A5B; --warn: #B07A2A; --danger: #A93B45; --muted: #8A8190; /* Grafik renkleri — 08-TASARIM-TURU.md "Grafik renkleri markadan türetilir, rastgele değil". chart-6 özellikle "Diğer" dilimi için ayrılmış (bkz. DonutChart.razor). */ --chart-1: #5C3566; --chart-2: #8A5E92; --chart-3: #A8813C; --chart-4: #2F7A5B; --chart-5: #A93B45; --chart-6: #8A8190; /* Tipografi — gerçek Inter/Fraunces dosyaları eklenene kadar sistem fontlarına düşer (bkz. docs/YAPILACAKLAR.md). */ --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-display: 'Fraunces', 'Inter', Georgia, serif; /* Boşluk ölçeği: 4px katları */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Hareket ölçeği — 08-TASARIM-TURU.md "Hareket felsefesi". Yalnızca bir kullanıcı eylemine cevap veren geçişlerde kullanılır, kendiliğinden başlayan animasyonlarda değil. */ --motion-fast: 80ms; --motion-base: 160ms; --motion-panel: 200ms; --motion-ease: cubic-bezier(0.2, 0, 0.2, 1); } /* --- Hazır temalar — 08-TASARIM-TURU.md Adım 9 / YAPILACAKLAR.md "Tema seçimi". Serbest renk seçici YOK: sadece bu beş hazır tema arasından seçilir, her birinin metin/zemin kontrastı en az 4.5:1 olacak şekilde önceden hesaplanmıştır. Tema = birkaç değişkenin farklı değeri, ayrı bir bileşen seti değil — `` üzerinden app_settings'teki `theme_name`'e göre App.razor tarafında yazılır. */ :root[data-theme="antrasit-pirinc"] { --brand-900: #1C1F22; --brand-700: #33383D; --brand-500: #3E444A; --ink-900: #1A1D1F; --ink-600: #5C6268; --ink-400: #6F767C; --surface: #F5F6F7; --panel: #FFFFFF; --line: #DFE2E5; --brass: #A8813C; --chart-1: #33383D; --chart-2: #5C6268; --chart-3: #A8813C; --chart-4: #8A9096; --chart-5: #A93B45; --chart-6: #C9CDD0; } :root[data-theme="lacivert-bakir"] { --brand-900: #14213D; --brand-700: #1F3358; --brand-500: #2B4C86; --ink-900: #131A2B; --ink-600: #4F5A72; --ink-400: #6A7589; --surface: #F5F7FA; --panel: #FFFFFF; --line: #DEE3EA; --brass: #B5652D; --chart-1: #2B4C86; --chart-2: #5C7AAE; --chart-3: #B5652D; --chart-4: #1F3358; --chart-5: #A93B45; --chart-6: #B7C0CC; } :root[data-theme="zeytin-krem"] { --brand-900: #262E1D; --brand-700: #3D4830; --brand-500: #52603A; --ink-900: #23281B; --ink-600: #5B6152; --ink-400: #727666; --surface: #F7F7F2; --panel: #FFFEF9; --line: #E3E1D5; --brass: #A8813C; --chart-1: #52603A; --chart-2: #7D8A5D; --chart-3: #A8813C; --chart-4: #3D4830; --chart-5: #A93B45; --chart-6: #C7C9B9; } /* Yüksek kontrast: renkli kimlik yok — amaç en yüksek okunabilirlik. Panel/zemin ayrımı renkle değil `--line` kenarlıklarıyla yapılır. Büyük yazı bu temada App.razor tarafında otomatik açılır (bkz. data-large-text), burada ayrıca tekrarlanmaz. */ :root[data-theme="yuksek-kontrast"] { --brand-900: #000000; --brand-700: #1A1A1A; --brand-500: #000000; --ink-900: #000000; --ink-600: #333333; --ink-400: #4D4D4D; --surface: #FFFFFF; --panel: #FFFFFF; --line: #333333; --brass: #7A5B12; --ok: #1B5E3F; --warn: #7A4E10; --danger: #7A1E24; --muted: #333333; --chart-1: #000000; --chart-2: #333333; --chart-3: #7A5B12; --chart-4: #1B5E3F; --chart-5: #7A1E24; --chart-6: #666666; } /* --- Okunabilirlik ayarları — tema ekseninden bağımsız, ikisi birlikte seçilebilir (ör. lacivert tema + disleksi desteği). YAPILACAKLAR.md: gerçek OpenDyslexic .woff2 dosyası henüz yok, yazı tipi zincirinde ilk sırada durur ve dosya eklenene kadar sessizce Inter'e düşer — harf/satır aralığı ve kırık beyaz zemin dosyasız da çalışır. */ :root[data-dyslexia="true"] { --font-ui: 'OpenDyslexic', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; --panel: #FBF9F3; --surface: #F3F1E9; } :root[data-dyslexia="true"] body, :root[data-dyslexia="true"] p, :root[data-dyslexia="true"] td, :root[data-dyslexia="true"] th, :root[data-dyslexia="true"] label, :root[data-dyslexia="true"] .field label { letter-spacing: 0.02em; line-height: 1.7; } /* Büyük yazı: hedefli kapsam — gövde metni, tablo, form ve buton gibi ana okunabilirlik yüzeyleri büyür. Yoğun/özel bileşenler (takvim ızgarası gibi) kapsam dışı, ileride genişletilebilir (bkz. docs/YAPILACAKLAR.md). "Yüksek kontrast" teması bunu App.razor üzerinden otomatik açar, ayrı bir kural gerekmez. */ :root[data-large-text="true"] body { font-size: 17px; } :root[data-large-text="true"] .app-topbar__title { font-size: 25px; } :root[data-large-text="true"] .card-title { font-size: 23px; } :root[data-large-text="true"] .section-title { font-size: 19px; } :root[data-large-text="true"] .data-table td { font-size: 17px; } :root[data-large-text="true"] .data-table th { font-size: 15px; } :root[data-large-text="true"] .btn { font-size: 17px; } :root[data-large-text="true"] .field label { font-size: 15px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--ink-900); background: var(--surface); font-variant-numeric: tabular-nums; } h1, h2, h3 { margin: 0; line-height: 1.25; } /* Kart içi başlık kademeleri — 05-TASARIM.md'nin tipografi ölçeğindeki "bölüm başlığı" (17px) ve aradaki, dokümante edilmemiş ama çok kullanılan "kart başlığı" (20px, ör. müşteri/personel adı). Satır içi font-size yerine sınıf: büyük yazı ayarı bunları büyütebilsin diye (bkz. yukarıdaki :root[data-large-text]). */ .card-title { font-size: 20px; } .section-title { font-size: 17px; font-weight: 600; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* Odak halkası hiçbir yerde kaldırılmaz. */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* Kenar çubuğu koyu zeminde (--brand-900) --brand-500 halkası 3:1'in altında kalıyor. Zaten "aktif" göstergesi olan --brass burada da kullanılır. */ .app-sidebar :focus-visible { outline-color: var(--brass); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } /* Süre sıfırlanınca shimmer donmuş bir gradyan karesinde kalır — bunun yerine düz renk. */ .skeleton { background: var(--line); } } /* --- Giriş/kurulum türü tam ekran markalı sayfalar --- */ .brand-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background-color: var(--brand-900); background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 48px ); } /* 05-TASARIM.md "Giriş ekranı" — telefonda kart tam genişliğe yakın olur ve dikey ortalama bırakılır: `align-items:center` + `100vh`, klavye açılınca görünür yüksekliği küçülttüğünde formu yukarı iter/kırpar. Üstten hizalı bir düzende tarayıcı odaklı input'u kendiliğinden görünür tutar. */ @media (max-width: 639px) { .brand-screen { align-items: flex-start; padding: var(--space-8) var(--space-3); } .brand-screen__panel { padding: var(--space-6); } } .brand-screen__wordmark { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: #FFFFFF; text-align: center; margin-bottom: var(--space-6); } .brand-screen__panel { width: 100%; max-width: 440px; background: var(--panel); border-radius: 14px; padding: var(--space-8); } .field { margin-bottom: var(--space-4); } .field label { display: block; font-size: 13px; color: var(--ink-600); margin-bottom: var(--space-1); } .field input, .field select, .field textarea { width: 100%; height: 38px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); } .field textarea { height: auto; min-height: 76px; padding-top: var(--space-2); padding-bottom: var(--space-2); resize: vertical; } .field input.field--error, .field select.field--error, .field textarea.field--error { border-color: var(--danger); } /* Zorunlu alan yıldızı — "Form alanları: zorunlu alanlarda yıldız" (08-TASARIM-TURU.md). */ .field__required { color: var(--danger); margin-left: 2px; } .field__error { color: var(--danger); font-size: 13px; margin-top: var(--space-1); } .field__hint { color: var(--ink-400); font-size: 13px; margin-top: var(--space-1); } .btn { height: 38px; padding: 0 var(--space-4); border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; } .btn:disabled { cursor: not-allowed; opacity: 0.6; } /* Basılma geri bildirimi — anında hissedilmeli, bu yüzden --motion-fast (80ms). */ .btn:active { transform: scale(0.97); transition: transform var(--motion-fast) var(--motion-ease); } /* Yükleniyor durumu: metin kaybolmaz, yanına dönen bir gösterge eklenir, buton kilitlenir (çift gönderim engeli). Kullanan sayfa disabled="@_isSubmitting" ile zaten kilitliyor, bu sınıf sadece görsel göstergeyi ekler. */ .btn--loading { gap: var(--space-2); } .btn--loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.7; animation: btn-spin 0.6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn--primary { background: var(--brand-500); color: #FFFFFF; } .btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--line); } .btn-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); } /* Randevu detayında ikincil eylemler (Ertele/İptal et/Gelmedi) — birincil satırın (Kapat/Başlat/Bitir) altında ayrı bir sırada durur, sağa hizalı. Beş buton yan yana sığmadığında burada sarar, metinler asla kırılmaz (.btn'de white-space: nowrap). */ .btn-row--secondary { justify-content: flex-end; margin-top: var(--space-3); } .steps { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); } .steps__item { flex: 1; text-align: center; font-size: 13px; color: var(--ink-400); padding-bottom: var(--space-2); border-bottom: 2px solid var(--line); } .steps__item--active { color: var(--brand-700); border-color: var(--brand-500); font-weight: 600; } .steps__item--done { color: var(--ink-600); border-color: var(--brand-700); } .alert { padding: var(--space-3); border-radius: 6px; font-size: 13px; margin-bottom: var(--space-4); } .alert--danger { background: #FBEEEF; color: var(--danger); } .summary-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 15px; } .summary-row dt { color: var(--ink-600); } .summary-row dd { margin: 0; color: var(--ink-900); font-weight: 500; } /* --- Uygulama iskeleti: kenar çubuğu + üst bar + içerik --- */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { flex: 0 0 240px; width: 240px; background: var(--brand-900); display: flex; flex-direction: column; padding: var(--space-6) 0; } .app-sidebar__brand { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #FFFFFF; padding: 0 var(--space-6) var(--space-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav { display: flex; flex-direction: column; gap: var(--space-1); } .app-nav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); text-decoration: none; font-size: 15px; border-left: 3px solid transparent; } /* Renkler kenar çubuğunun koyu zeminine göre — 08-TASARIM-TURU.md ile gelen telefon "Menü" penceresi aynı .app-nav__link'i açık zeminde yeniden kullanıyor, bu yüzden renkler .app-sidebar içine, .mobile-menu içine ayrı tanımlandı (aşağıda). */ .app-sidebar .app-nav__link { color: rgba(255, 255, 255, 0.75); } .app-sidebar .app-nav__link:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; } .app-sidebar .app-nav__link.active { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; border-left-color: var(--brass); font-weight: 600; } .mobile-menu .app-nav__link { color: var(--ink-900); } .mobile-menu .app-nav__link:hover { background: var(--surface); } .mobile-menu .app-nav__link.active { background: var(--surface); color: var(--brand-700); border-left-color: var(--brand-500); font-weight: 600; } .app-nav__icon { flex: 0 0 20px; width: 20px; height: 20px; } .app-nav__icon svg { width: 100%; height: 100%; } .app-nav__label { white-space: nowrap; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .app-topbar { height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); border-bottom: 1px solid var(--line); background: var(--panel); } .app-topbar__title { font-size: 22px; font-weight: 600; color: var(--ink-900); } .app-topbar__right { display: flex; align-items: center; gap: var(--space-2); } .app-content { flex: 1; padding: var(--space-8); max-width: 1400px; width: 100%; } /* Tablet — 08-TASARIM-TURU.md "Mobil strateji": 640–1024px kenar çubuğu ikon modunda. */ @media (max-width: 1024px) { .app-sidebar { flex-basis: 64px; width: 64px; } .app-sidebar__brand { font-size: 0; padding: 0 0 var(--space-6); text-align: center; } .app-sidebar .app-nav__link { justify-content: center; padding: var(--space-3); } .app-sidebar .app-nav__label { display: none; } .app-content { padding: var(--space-6); } } /* Kullanıcı menüsü (üst bar sağ) — native

, JS gerektirmez */ .user-menu { position: relative; } .user-menu > summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; cursor: pointer; padding: var(--space-2) var(--space-3); border-radius: 6px; font-size: 15px; color: var(--ink-900); } .user-menu > summary::-webkit-details-marker { display: none; } .user-menu > summary:hover { background: var(--surface); } .user-menu__panel { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(36, 26, 42, 0.12); padding: var(--space-2); z-index: 20; } .user-menu__info { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); } .user-menu__name { font-weight: 600; color: var(--ink-900); } .user-menu__role { font-size: 13px; color: var(--ink-600); } .user-menu__item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: 6px; color: var(--ink-900); text-decoration: none; background: none; border: none; font-size: 15px; font-family: inherit; cursor: pointer; } .user-menu__item:hover { background: var(--surface); } /* Bildirim zili (üst bar) — user-menu ile aynı native details/summary deseni */ .notif-bell { position: relative; } /* Dokunma hedefi: 08-TASARIM-TURU.md "44×44px'den küçük olmaz" — ikon 22px kalıyor, tıklanabilir kutu buna göre büyütüldü. Rozet artık kutuya değil ikonun kendi sarmalayıcısına göre konumlanıyor (bkz. .notif-bell__icon-wrap), yoksa büyüyen kutunun köşesinde ikonla bağlantısız kalırdı. */ .notif-bell > summary { display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; border-radius: 6px; color: var(--ink-900); width: 44px; height: 44px; } .notif-bell__icon-wrap { position: relative; display: flex; width: 22px; height: 22px; } .notif-bell > summary svg { width: 22px; height: 22px; } .notif-bell > summary::-webkit-details-marker { display: none; } .notif-bell > summary:hover { background: var(--surface); } .notif-bell__badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* 08-TASARIM-TURU.md Adım 7 — "Onay bekleyen talepler üstte durmaya devam etsin, sayı rozetiyle." .notif-bell__badge ile aynı görsel dil, ama satır içi (konum:absolute değil) — bir başlığın yanında akış içinde durması gerekiyor. */ .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; } .notif-bell__panel { position: absolute; right: 0; top: calc(100% + 4px); width: 340px; max-height: 420px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(36, 26, 42, 0.12); padding: var(--space-2); z-index: 20; } .notif-bell__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--ink-900); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); } .notif-bell__mark-all { background: none; border: none; color: var(--brand-500); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; } .notif-empty { padding: var(--space-4) var(--space-3); color: var(--ink-600); font-size: 14px; text-align: center; } .notif-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: 6px; background: none; border: none; font-family: inherit; cursor: pointer; } .notif-item:hover { background: var(--surface); } .notif-item--unread { background: var(--surface); } .notif-item--unread::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); margin-right: 6px; vertical-align: middle; } .notif-item__title { font-size: 14px; font-weight: 600; color: var(--ink-900); } .notif-item__body { font-size: 13px; color: var(--ink-600); margin-top: 2px; } .notif-item__time { font-size: 12px; color: var(--ink-600); margin-top: 4px; } /* Boş durum ekranı */ .empty-state { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-8); } .empty-state__message { font-size: 15px; color: var(--ink-900); margin: 0; max-width: 640px; } .empty-state__note { font-size: 13px; color: var(--ink-400); margin: var(--space-2) 0 0; } .empty-state__action { margin-top: var(--space-4); } /* --- Bildirim (toast) --- 08-TASARIM-TURU.md "Bildirim (toast): sağ üstte, 4 saniye, ikonlu. Hata mesajları kaybolmaz." Modal'ın bile üstünde durur (z-index 100'den yüksek) — bir modal açıkken tetiklenen bir toast (ör. arka planda tamamlanan bir işlem) görünmez kalmamalı. */ .toast-stack { position: fixed; top: var(--space-6); right: var(--space-6); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; } .toast { display: flex; align-items: flex-start; gap: var(--space-2); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-3) var(--space-4); box-shadow: 0 8px 24px rgba(36, 26, 42, 0.18); font-size: 14px; animation: toast-in var(--motion-base) var(--motion-ease); } .toast--success { color: var(--ok); } .toast--error { color: var(--danger); } .toast__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .toast__text { color: var(--ink-900); flex: 1; } /* Dokunma hedefi 44×44px — görünen × işareti aynı boyutta kalsın diye negatif kenar boşluğuyla toast kartının kendi iç boşluğuna taşıyor, kartı büyütmüyor. */ .toast__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -13px -13px -13px 0; border: none; background: transparent; color: var(--ink-400); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0; } .toast__close:hover { color: var(--ink-900); } @keyframes toast-in { from { opacity: 0; transform: translateX(12px); } } /* --- İskelet yükleme --- 08-TASARIM-TURU.md "Yükleniyor durumları: tam sayfa dönen çark yerine iskelet gösterimi." Genel yardımcı sınıflar — sayfaya özel iskelet düzeni (takvim ızgarası, liste satırı) ilgili ekranın sırası geldiğinde bunların üzerine kurulur. */ .skeleton { background: linear-gradient(90deg, var(--line) 25%, #EFEAF0 37%, var(--line) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } .skeleton--text { height: 14px; } .skeleton--block { border-radius: 10px; } @keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* --- Liste araç çubuğu --- */ .list-toolbar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .list-toolbar__search { height: 38px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 6px; min-width: 260px; } /* 08-TASARIM-TURU.md Adım 6 — "Liste: arama kutusu büyür ve odaklı gelir." Sadece müşteri listesinde (bkz. Musteriler.razor) — sırası gelmeyen diğer listeler (Personel.razor) .list-toolbar__search'ü olduğu gibi kullanmaya devam ediyor. */ .list-toolbar__search--lg { flex: 1; min-width: 0; height: 48px; font-size: 16px; padding: 0 var(--space-4); } .list-toolbar__checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-600); } .list-toolbar__checkbox input { width: auto; height: auto; } .list-toolbar > .btn { margin-left: auto; } /* --- Tablo --- */ .data-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .data-table th { background: var(--surface); text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-600); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; } .data-table td { padding: var(--space-2) var(--space-3); font-size: 15px; color: var(--ink-900); height: 40px; white-space: nowrap; } .data-table tbody tr:hover { background: var(--surface); } /* Rapor satırlarında müşteri/personel/hizmet adı ilgili sayfaya bağlanıyor — bunun tıklanabildiği belli olsun diye marka rengi ve üzerine gelince altı çizili. */ .data-table a { color: var(--brand-700); text-decoration: none; cursor: pointer; } .data-table a:hover, .data-table a:focus { text-decoration: underline; } /* 08-TASARIM-TURU.md "Tablolar telefonda kart olur": <640px'te müşteri tablosu yerine bu kart listesi görünür (bkz. @media (max-width: 639px) en aşağıda) — takvimin mobil gün listesiyle (Adım 4) aynı çift-render deseni. Her satır tek dokunma hedefi: üstte ad, altında ikincil bilgiler, sağda "eylem" olarak detaya gittiğini belirten ok. */ .customer-cards { display: none; } .customer-cards__row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-3); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .customer-cards__row:last-child { border-bottom: none; } .customer-cards__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .customer-cards__name { font-weight: 600; color: var(--ink-900); } .customer-cards__meta { font-size: 13px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .customer-cards__chevron { flex: 0 0 auto; color: var(--ink-400); font-size: 20px; } /* Genel tablo→kart deseni — 08-TASARIM-TURU.md "Tablolar telefonda kart olur", yukarıdaki .customer-cards ile aynı mekanizma. Belirli bir sayfaya bağlı değil, ResponsiveTable bileşeni (Shared/ResponsiveTable.razor) üzerinden Personel, Raporlar, Vardiya, Hizmetler, Müşteri detayı ekranlarında yeniden kullanılır. */ .table-wrap { overflow-x: auto; } .table-cards { display: none; } .table-cards__row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-3); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .table-cards__row:last-child { border-bottom: none; } .table-cards__row--block { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .table-cards__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .table-cards__title { font-weight: 600; color: var(--ink-900); } .table-cards__meta { font-size: 13px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-cards__aside { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--ink-600); } .table-cards__chevron { flex: 0 0 auto; color: var(--ink-400); font-size: 20px; } .table-cards__actions { display: flex; gap: var(--space-2); width: 100%; } /* --- Form kartı --- */ .form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-8); max-width: 560px; } /* Katlanabilir bölüm — native

, .user-menu ile aynı desen (JS gerektirmez). Varsayılan kapalı, ikincil/uzun içeriği (ör. bir karşılaştırma tablosu) isteyerek açtırır. */ .disclosure > summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; cursor: pointer; padding: var(--space-2) 0; font-size: 14px; font-weight: 600; color: var(--brand-700); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary::before { content: ''; flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor; transition: transform var(--motion-fast) var(--motion-ease); } .disclosure[open] > summary::before { transform: rotate(90deg); } .disclosure__content { margin-top: var(--space-3); } /* 08-TASARIM-TURU.md Adım 6 — müşteri detayının "Özet, Randevular, Notlar, KVKK" sekmeleri. İlk kullanım burada; başka bir ekran sekme isterse bu sınıflar aynen taşınabilir. */ .tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); overflow-x: auto; } .tabs__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2) 0; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-600); cursor: pointer; white-space: nowrap; } .tabs__tab:hover { color: var(--ink-900); } .tabs__tab--active { color: var(--brand-500); border-bottom-color: var(--brand-500); font-weight: 600; } /* Ayarlar → Görünüm — tema kartları. Serbest renk seçici yok, bu yüzden önizleme salt üç noktalı bir örnek (koyu/orta/vurgu), gerçek arayüz değil. */ .theme-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); } .theme-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 14px; } .theme-option input { width: auto; height: auto; margin: 0; } .theme-option--active { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500); } .theme-option__swatches { display: flex; gap: 3px; } .theme-option__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); } /* 08-TASARIM-TURU.md Adım 7 — "Haftalık şablon bir tablo olarak gösterilmeli: satırlar günler, sütunlar saat aralıkları, görsel olarak çalışma saatleri işaretli." */ .shift-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); margin-bottom: var(--space-4); } .shift-grid__row { display: flex; align-items: stretch; border-top: 1px solid var(--line); } .shift-grid__row:first-child { border-top: none; } .shift-grid__row--header { background: var(--surface); } .shift-grid__label { flex: 0 0 84px; padding: 6px 8px; font-size: 13px; color: var(--ink-900); display: flex; align-items: center; border-right: 1px solid var(--line); } .shift-grid__row--header .shift-grid__label { flex-basis: 84px; } .shift-grid__hour { flex: 1; min-width: 0; padding: 6px 2px; text-align: center; font-size: 11px; color: var(--ink-600); } .shift-grid__cell { flex: 1; min-width: 0; height: 28px; border-left: 1px solid var(--line); } .shift-grid__cell:first-child { border-left: none; } .shift-grid__cell--on { background: color-mix(in srgb, var(--brand-500) 24%, white); } /* 08-TASARIM-TURU.md Adım 9, madde 5/6 — Şablon/Bu hafta geçişi ve ızgaradan düzenleme. */ .shift-grid-wrap .tabs { margin-bottom: var(--space-3); } .shift-grid__week-nav { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .shift-grid__week-label { font-size: 13px; color: var(--ink-600); min-width: 130px; text-align: center; } .shift-grid__date { display: block; font-size: 10px; color: var(--ink-600); } /* Sürükleme sırasında metin seçilmesin — sonradan düzeltmek yerine baştan konuldu, sürükleme davranışı kaçınılmaz olarak tarayıcının varsayılan metin seçimini tetikler. */ .shift-grid--editable { user-select: none; } .shift-grid--editable .shift-grid__cell { cursor: pointer; } .shift-grid__cell--selecting { background: color-mix(in srgb, var(--brand-500) 45%, white); } .shift-grid__leave-band { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } /* Metin her zaman ink-900 — arka planlar white ile karıştırılıp açıklaştırıldığı için (bkz. .shift-grid__cell--on'daki aynı teknik) hangi tema seçili olursa olsun (Adım 9 "Görünüm" temaları --chart-N'i değiştiriyor) kontrast korunur; sabit beyaz/koyu metin seçimi tema bazında bazı renklerde başarısız olurdu. */ .shift-grid__leave-band--weekly_off { background: color-mix(in srgb, var(--chart-1) 35%, white); } .shift-grid__leave-band--annual_leave { background: color-mix(in srgb, var(--chart-2) 35%, white); } .shift-grid__leave-band--sick_leave { background: color-mix(in srgb, var(--chart-3) 35%, white); } .shift-grid__leave-band--unpaid_leave { background: color-mix(in srgb, var(--chart-4) 35%, white); } .shift-grid__leave-band--personal { background: color-mix(in srgb, var(--chart-5) 35%, white); } .shift-grid__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .shift-grid__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); } .shift-grid__legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .shift-grid__legend-dot--weekly_off { background: var(--chart-1); } .shift-grid__legend-dot--annual_leave { background: var(--chart-2); } .shift-grid__legend-dot--sick_leave { background: var(--chart-3); } .shift-grid__legend-dot--unpaid_leave { background: var(--chart-4); } .shift-grid__legend-dot--personal { background: var(--chart-5); } .shift-grid__legend-dot--custom { background: var(--chart-6); } /* "Bu hafta" — o tarihe özel istisna (custom_hours) saatleri şablondan gelen saatlerden görsel olarak ayrılsın diye ayrı renk + iç çerçeve (bkz. .shift-grid__cell--on). */ .shift-grid__cell--custom { background: color-mix(in srgb, var(--chart-6) 45%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-6) 70%, white); } .shift-grid__row--clickable { cursor: pointer; } .shift-grid__row--clickable:hover .shift-grid__label { color: var(--brand-500); } /* Dokunma hedefi en az 44px (08-TASARIM-TURU.md kalite eşiği) — yalnızca düzenlenebilir ızgarada, yalnızca dar ekranda; salt okunur (Vardiyam.razor) ve masaüstünde mevcut yoğun 28px satır yüksekliği korunur. */ @media (max-width: 639px) { .shift-grid--editable .shift-grid__cell, .shift-grid--editable .shift-grid__leave-band { height: 44px; } } /* 08-TASARIM-TURU.md Adım 7 — "İzin takvimi: aylık takvim görünümü, izinli günler işaretli. Tek tek liste yerine." Bir güne dokunmak PersonelVardiya.razor'da o günün detayını (onayla/reddet/sil) altta açar — ayrı bir modal yok. */ .month-cal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .month-cal__label { font-weight: 600; font-size: 15px; text-transform: capitalize; } .month-cal__weekdays, .month-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .month-cal__weekdays { margin-bottom: 4px; } .month-cal__weekday { text-align: center; font-size: 12px; color: var(--ink-600); padding: 4px 0; } .month-cal__day { min-height: 60px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; cursor: pointer; background: var(--panel); display: flex; flex-direction: column; gap: 4px; text-align: left; font-family: inherit; } .month-cal__day:hover { background: var(--surface); } .month-cal__day--muted { opacity: 0.4; } .month-cal__day--today { border-color: var(--brand-500); } .month-cal__day--selected { outline: 2px solid var(--brand-500); outline-offset: -2px; } .month-cal__day-number { font-size: 13px; font-weight: 600; color: var(--ink-900); } .month-cal__day-badge { font-size: 10px; padding: 1px 4px; border-radius: 4px; align-self: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .month-cal__day-badge--approved { background: color-mix(in srgb, var(--brand-500) 18%, white); color: var(--brand-500); } .month-cal__day-badge--pending { background: #FBF3E6; color: var(--warn); } .month-cal__day-badge--rejected { background: var(--surface); color: var(--ink-400); text-decoration: line-through; } /* --- Tehlikeli buton --- */ .btn--danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .btn--danger:hover { background: var(--danger); color: #FFFFFF; } /* --- Onay diyaloğu --- z-index sırası: onay diyaloğu (modal) her zaman en üstte olmalı — başka bir panelin (ör. randevu yan paneli, z-index 60) üzerinde açılsa bile. Bu yüzden modal-backdrop diğer tüm katmanlardan yüksek tutulur. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(36, 26, 42, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-6); animation: modal-backdrop-fade var(--motion-base) var(--motion-ease); } .modal { background: var(--panel); border-radius: 14px; padding: var(--space-6); max-width: 420px; width: 100%; /* Telefonun "Menü" penceresi gibi uzun içerikler kısa ekranlarda (ör. 667px) taşıp alttaki "Kapat" butonunu erişilemez bırakmasın diye modalin kendisi kaydırılabilir. */ max-height: calc(100vh - var(--space-6) * 2); overflow-y: auto; box-shadow: 0 16px 40px rgba(36, 26, 42, 0.25); animation: modal-pop var(--motion-base) var(--motion-ease); } /* Modal açılınca odak kilidi için kabın kendisine (tabindex=-1) programatik olarak odaklanılıyor (bkz. Modal.razor) — bu sadece Tab'ın diyalog dışına çıkmasını engellemek için, gerçek bir kontrol değil. Kabın etrafında halka göstermek anlamsız; Tab'la ulaşılan asıl butonlarda halka olduğu gibi görünmeye devam ediyor. */ .modal:focus-visible { outline: none; } @keyframes modal-backdrop-fade { from { opacity: 0; } } @keyframes modal-pop { from { opacity: 0; transform: scale(0.96); } } /* Randevu detayı gibi çok butonlu diyaloglar için biraz daha geniş. */ .modal--wide { max-width: 520px; } .alert--ok { background: #EAF5EF; color: var(--ok); } /* --- Rozet --- */ .badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 6px; margin-left: var(--space-2); } .badge--danger { background: #FBEEEF; color: var(--danger); } /* --- Takvim (06-FAZ3-RANDEVU.md — "4. Takvim ekranı") --- */ /* 08-TASARIM-TURU.md "Üst çubuk sadeleşir": sol/orta/sağ 3 bölge. Orta bölgenin doküman'da önerilen Gün/Hafta anahtarı henüz yok (bkz. docs/YAPILACAKLAR.md) — şimdilik tarih etiketi orada duruyor. Grid ile gerçek ortalama sağlanıyor; flex'te (eski hâl) space-between üç öğeyle simetrik olmayan genişliklerde ortalama vermiyordu. */ .calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .calendar-toolbar__nav { display: flex; align-items: center; gap: var(--space-2); justify-self: start; } .calendar-toolbar__nav input[type="date"] { height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 var(--space-2); font-family: var(--font-ui); } .calendar-toolbar__label { justify-self: center; font-size: 15px; font-weight: 600; color: var(--ink-900); text-transform: capitalize; white-space: nowrap; } .calendar-toolbar__actions { justify-self: end; } @media (max-width: 900px) { .calendar-toolbar { grid-template-columns: 1fr; justify-items: stretch; } .calendar-toolbar__nav, .calendar-toolbar__label, .calendar-toolbar__actions { justify-self: stretch; } } .calendar-note { color: var(--ink-600); font-size: 13px; margin: 0 0 var(--space-3); } /* Salon o gün kapalı işaretliyken — nötr .calendar-note'tan ayrılsın diye vurgulu. */ .calendar-note--warning { color: var(--warn); font-weight: 600; } /* "Şu an kim müsait" şeridi (08-TASARIM-TURU.md) — sadece bugün görüntülenirken render edilir, uzun takvim gridi kaydırılırken görünür kalsın diye sticky. */ .calendar-layout { display: flex; align-items: flex-start; gap: var(--space-4); } .calendar-main { flex: 1; min-width: 0; } .calendar-availability { flex: 0 0 220px; position: sticky; top: var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-3); } .calendar-availability__title { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 600; color: var(--ink-600); } .calendar-availability__list { display: flex; flex-direction: column; gap: var(--space-2); } .calendar-availability__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: 6px; border-left: 3px solid var(--line); font-size: 13px; } .calendar-availability__name { font-weight: 600; color: var(--ink-900); } .calendar-availability__status { font-size: 12px; color: var(--ink-600); } .calendar-availability__row--idle { border-left-color: var(--ok); } .calendar-availability__row--busy { border-left-color: var(--warn); } .calendar-availability__row--leave { border-left-color: var(--danger); background: #FBEEEF; } .calendar-availability__row--break { border-left-color: var(--chart-6); background: color-mix(in srgb, var(--chart-6) 30%, white); } .calendar-availability__break-btn { align-self: flex-start; margin-top: 4px; font-size: 12px; padding: 4px 10px; } @media (max-width: 1100px) { .calendar-layout { flex-direction: column; } .calendar-availability { flex: 1 1 auto; width: 100%; position: static; } } .calendar-grid { position: relative; display: grid; grid-template-columns: 64px repeat(var(--calendar-staff-count), minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); } /* Bugün çizgisi (08-TASARIM-TURU.md "Bugün çizgisi") — grid-row/column ile ikinci satırın (zaman ekseni + personel sütunları) tamamını kaplıyor, top hesabı randevu bloklarıyla (BlockTop) aynı mantıkta. Sadece bugün görüntülenirken render edilir (NowLineTopPx). */ .calendar-grid__now-line { position: absolute; grid-row: 2; grid-column: 2 / -1; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; } .calendar-grid__now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } .calendar-grid__corner { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .calendar-grid__header { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: var(--space-2) var(--space-3); font-size: 13px; font-weight: 600; color: var(--ink-900); display: flex; flex-direction: column; gap: 2px; } .calendar-grid__header--leave { background: #FBEEEF; } .calendar-grid__header-leave { font-size: 12px; font-weight: 400; color: var(--danger); } /* Pasifleştirilmiş personelin sütunu — geçmiş/gelecek randevuları göstermeye devam eder (doküman dışı ek). "(pasif)" ismin yanında sade metin; scheduled/in_progress randevusu varsa ayrıca sarı uyarı satırı çıkar. */ .calendar-grid__header--inactive { background: #FBF6EC; } .calendar-grid__header-warning { display: block; font-size: 12px; font-weight: 600; color: var(--warn); } /* Personel başlıklarında doluluk (08-TASARIM-TURU.md "Personel başlıkları") — sekreter tek bakışta kimin dolu kimin boş olduğunu görsün. */ .calendar-grid__header-count { font-size: 12px; font-weight: 400; color: var(--ink-600); } .calendar-grid__header-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; } .calendar-grid__header-bar-fill { height: 100%; background: var(--brand-500); border-radius: 2px; } .calendar-grid__timeaxis { display: flex; flex-direction: column; border-right: 1px solid var(--line); } .calendar-grid__time { border-bottom: 1px solid #F0EDF1; font-size: 12px; color: var(--ink-400); padding: 2px var(--space-2) 0 0; text-align: right; height: 18px; flex: 0 0 18px; line-height: 1; } .calendar-grid__time--hour { color: var(--ink-600); font-weight: 500; border-bottom: 1px solid var(--line); } .calendar-grid__column { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line); } .calendar-grid__cell { position: relative; border-bottom: 1px solid #F0EDF1; height: 18px; flex: 0 0 18px; background: var(--panel); cursor: pointer; } .calendar-grid__cell:hover { background: color-mix(in srgb, var(--brand-500) 12%, var(--panel)); } .calendar-grid__cell--outside { background: repeating-linear-gradient( 135deg, var(--surface) 0px, var(--surface) 6px, #EFEBF0 6px, #EFEBF0 12px ); } .calendar-grid__cell--outside:hover { background: color-mix(in srgb, var(--brand-500) 12%, var(--surface)); } .calendar-grid__cell--leave { background: #FBEEEF; cursor: default; } /* Boş slotun tıklanabilir olduğu anlaşılsın diye (08-TASARIM-TURU.md "Boş slot davranışı") üzerine gelince "+" belirir — izinli hücrede çıkmaz, o zaten tıklanamaz (cursor:default). */ .calendar-grid__cell:not(.calendar-grid__cell--leave):hover::after { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-700); font-size: 13px; font-weight: 700; pointer-events: none; } .calendar-grid__block { position: absolute; left: 2px; right: 2px; border-left: 3px solid; /* Bloklar dakika bazında orantılı yükseklikte — arka arkaya (boşluksuz) randevular arasında görsel bir çizgi kalsın diye üstte 1px'lik zemin renginde bir dikiş var, bu konumu (top) hiç etkilemez, sadece o iki blok değiyorsa aralarını belli eder. */ border-top: 1px solid var(--panel); border-radius: 4px; padding: 2px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 0; font-size: 12px; line-height: 1.3; cursor: pointer; } .calendar-grid__block--compact { padding: 1px 6px; font-size: 11px; line-height: 1.2; } /* Doküman dışı ek — "5. ... sürükle-bırak": yalnızca taşınabilir bloklarda "grab" imleci, sürükleme sırasında hafif saydamlık (tarayıcının kendi sürükleme önizlemesi zaten var). */ .calendar-grid__block--draggable { cursor: grab; } .calendar-grid__block--draggable:active { cursor: grabbing; } /* 06-FAZ3-RANDEVU.md — "4. Takvim ekranı / Durum gösterimi". Renk tek başına bilgi taşımaz: her durumun ayrıca bir işareti var (kalın kenar, tik, saat ikonu — bkz. StatusMark). */ .calendar-grid__block--active { border-left-width: 6px; } .calendar-grid__block--completed { opacity: 0.6; } .calendar-grid__block--overdue { background: #FBEEEF !important; border-left-color: var(--danger) !important; animation: calendar-block-pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .calendar-grid__block--overdue { animation: none; border: 2px solid var(--danger); } } @keyframes calendar-block-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(169, 59, 69, 0.35); } 50% { box-shadow: 0 0 0 3px rgba(169, 59, 69, 0.15); } } /* 06-FAZ3-RANDEVU.md — "7. İptal ve gelmedi / Durum gösterimi": çapraz tarama + üstü çizili metin. Renk tek başına bilgi taşımadığı için ikisi de aynı anda kullanılır. */ .calendar-grid__block--cancelled { background: repeating-linear-gradient( 135deg, var(--panel) 0px, var(--panel) 6px, #EFEBF0 6px, #EFEBF0 12px ) !important; } .calendar-grid__block--noshow { background: var(--surface) !important; border-left-color: var(--muted) !important; } .calendar-grid__block--cancelled .calendar-grid__block-title, .calendar-grid__block--cancelled .calendar-grid__block-sub, .calendar-grid__block--noshow .calendar-grid__block-title, .calendar-grid__block--noshow .calendar-grid__block-sub, .calendar-grid__block--rescheduled .calendar-grid__block-title, .calendar-grid__block--rescheduled .calendar-grid__block-sub { text-decoration: line-through; color: var(--ink-400); } /* Doküman dışı ek durumlar — salon sahibinin isteğiyle: yarıda kesilen işlem iptalden, ertelenen randevu da iptalden ayrı okunmalı (renk + biçim birlikte, tek başına renk yok). */ .calendar-grid__block--interrupted { background: #FBF3E6 !important; border-left-color: var(--warn) !important; opacity: 0.8; } .calendar-grid__block--rescheduled { background: repeating-linear-gradient( 135deg, var(--panel) 0px, var(--panel) 6px, #E8EEF5 6px, #E8EEF5 12px ) !important; border-left-color: var(--brand-500) !important; } .calendar-grid__block-title { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-grid__block-sub { color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 08-TASARIM-TURU.md Adım 4 — "Takvim telefonda liste olur": <640px'te ızgara yerine bu liste görünür (bkz. @media (max-width: 639px) en aşağıda). Izgaradaki gibi renk tek başına bilgi taşımaz — StatusMark ile aynı ön ek + durum rozeti birlikte kullanılır. */ .calendar-daylist { display: none; } .calendar-daylist__filter { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .calendar-daylist__filter label { font-size: 13px; color: var(--ink-600); white-space: nowrap; } .calendar-daylist__filter select { flex: 1; height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 0 var(--space-2); font-family: var(--font-ui); } .calendar-daylist__row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); border-left: 3px solid; cursor: pointer; } .calendar-daylist__row:last-child { border-bottom: none; } .calendar-daylist__time { flex: 0 0 44px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-900); } .calendar-daylist__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .calendar-daylist__customer { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-daylist__meta { font-size: 12px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-daylist__badge { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-600); white-space: nowrap; } .calendar-daylist__badge--active { background: color-mix(in srgb, var(--brand-500) 16%, white); color: var(--brand-500); } .calendar-daylist__badge--completed { color: var(--ink-400); } .calendar-daylist__badge--cancelled, .calendar-daylist__badge--noshow, .calendar-daylist__badge--overdue { background: #FBEEEF; color: var(--danger); } .calendar-daylist__badge--interrupted { background: #FBF3E6; color: var(--warn); } .calendar-daylist__badge--rescheduled { background: #E8EEF5; color: var(--brand-500); } .calendar-daylist__row--cancelled .calendar-daylist__customer, .calendar-daylist__row--noshow .calendar-daylist__customer, .calendar-daylist__row--rescheduled .calendar-daylist__customer { text-decoration: line-through; color: var(--ink-400); } .calendar-daylist__row--overdue { animation: calendar-block-pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .calendar-daylist__row--overdue { animation: none; border-left-width: 3px; outline: 2px solid var(--danger); outline-offset: -2px; } } /* --- Randevu detayı (06-FAZ3-RANDEVU.md — "6. İşlem başlat / bitir") --- */ .appointment-detail { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; } .appointment-detail > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); font-size: 14px; } .appointment-detail dt { color: var(--ink-600); } .appointment-detail dd { margin: 0; color: var(--ink-900); font-weight: 500; text-align: right; } /* --- Randevu oluşturma yan paneli (06-FAZ3-RANDEVU.md — "5. Randevu oluşturma") --- */ .side-panel-backdrop { position: fixed; inset: 0; background: rgba(36, 26, 42, 0.4); display: flex; justify-content: flex-end; z-index: 60; } /* 08-TASARIM-TURU.md hareket ölçeği — "Yan panel sağdan kayarak gelir (200 ms)". Bu bileşen şimdiye kadar hiç animasyonsuzdu, Adım 5 kapsamında eklendi. Azaltılmış hareket tercihinde (satır 85'teki genel kural) süre otomatik sıfıra iner, ayrıca bir şey yapmaya gerek yok. */ @keyframes side-panel-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .side-panel { background: var(--panel); width: 100%; max-width: 480px; height: 100%; box-shadow: -16px 0 40px rgba(36, 26, 42, 0.2); display: flex; flex-direction: column; animation: side-panel-slide-in var(--motion-panel) var(--motion-ease); } /* 08-TASARIM-TURU.md Adım 5 — "Alt çubuk sabit: Kaydet ve Vazgeç panelin altında sabit dursun, uzun formda kaybolmasın." Üç bölgeli flex düzen: yalnızca gövde kaydırılır, başlık ve alt çubuk her zaman görünür kalır — telefonda da, uzun hizmet listesinde masaüstünde de. */ .side-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-6) var(--space-4); flex: 0 0 auto; } .side-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--space-6) var(--space-4); } .side-panel__footer { flex: 0 0 auto; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--line); margin: 0; } /* Dokunma hedefi 44×44px — görünen × işareti aynı boyutta kalsın diye negatif kenar boşluğuyla başlığın kendi iç boşluğuna taşıyor, başlığı büyütmüyor (bkz. .toast__close). */ .side-panel__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -11px -11px -11px 0; background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-600); cursor: pointer; padding: 0; flex-shrink: 0; } .side-panel__selected-customer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 1px solid var(--line); border-radius: 6px; padding: var(--space-2) var(--space-3); } .side-panel__results { list-style: none; margin: var(--space-1) 0 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; max-height: 180px; overflow-y: auto; } .side-panel__results li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--line); } .side-panel__results li:last-child { border-bottom: none; } .side-panel__results li:hover { background: var(--surface); } /* 08-TASARIM-TURU.md Adım 5 — "Arama sonuçları listesinde son ziyaret tarihi de görünsün". */ .side-panel__results-visit { font-size: 12px; color: var(--ink-600); } .side-panel__quick-create { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .side-panel__quick-create input { height: 38px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 6px; } .side-panel__line-group { margin-bottom: var(--space-4); } .side-panel__line { display: grid; grid-template-columns: 1.4fr 1.2fr 80px 80px auto; gap: var(--space-2); align-items: center; } .side-panel__line--locked span { font-size: 13px; color: var(--ink-900); } .side-panel__line select, .side-panel__line input { height: 38px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: 6px; width: 100%; font-size: 13px; } .side-panel__line-remove { background: none; border: none; color: var(--danger); font-weight: bold; cursor: pointer; font-size: 16px; padding: 0 var(--space-1); } /* 08-TASARIM-TURU.md Adım 5 — "en sık kullanılan 6 hizmet buton olarak üstte, altında arama": hizmet henüz seçilmemişken satırın üstünde görünür, seçilince kaybolur (aşağıdaki açılır liste zaten seçileni gösterir, iki gösterge aynı anda gerekmez). */ .side-panel__quick-services { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } .side-panel__quick-service-btn { height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line); border-left: 3px solid; border-radius: 6px; background: var(--surface); color: var(--ink-900); font-size: 13px; font-family: inherit; cursor: pointer; } .side-panel__quick-service-btn:hover { background: var(--panel); } /* Adım 5 — "Süre dakika olarak da yazsın: '10:00 – 10:45 (45 dk)'". */ .side-panel__duration { margin: 4px 0 0; font-size: 12px; color: var(--ink-600); } /* Adım 5 — "dolu olan personel listede soluk görünsün, seçilince uyarı çıksın". */ .side-panel__staff-warning { margin: 2px 0 0; font-size: 12px; color: var(--warn); } /* --- Raporlar (06-FAZ3-RANDEVU.md — "9. Raporlar") --- */ .report-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-6) var(--space-8); margin-bottom: var(--space-6); } .report-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; } .report-card__header h3 { margin: 0; font-size: 17px; } .report-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); } .report-stat__value { font-size: 26px; font-weight: 600; color: var(--ink-900); line-height: 1.2; } .report-stat__label { font-size: 13px; color: var(--ink-600); } /* 08-TASARIM-TURU.md Adım 8 — özet kartlarında "yanında önceki döneme göre değişim". */ .report-stat__delta { font-size: 12px; font-weight: 600; margin-top: 2px; } .report-stat__delta--up { color: var(--ok); } .report-stat__delta--down { color: var(--danger); } .report-stat__delta--flat { color: var(--ink-400); } .report-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); } .report-subgrid h4 { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 600; color: var(--ink-600); } .bar-chart-wrap { /* overflow visible (varsayılan) — ipucu kutusu kutu dışına taşarak görünür, kırpılmaz. */ } .bar-chart { display: flex; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--line); padding-top: 24px; } .bar-chart__col { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); flex: 1 1 0; /* Az günde (ör. 1-2 gün) sütunlar orantısız genişlemesin diye üst sınır — geri kalan alan sola yaslı biçimde boş kalır. */ max-width: var(--space-12); min-width: 0; } .bar-chart__track { display: flex; align-items: flex-end; height: 128px; } .bar-chart__bar { width: 100%; min-height: 2px; background: var(--brand-500); border-radius: 2px 2px 0 0; border: none; padding: 0; cursor: pointer; } .bar-chart__bar:hover, .bar-chart__bar:focus { background: var(--brand-700); } .bar-chart__label { font-size: 11px; color: var(--ink-600); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Grafik ipucu kutusu — fare üzerine gelince (masaüstü) veya dokununca (mobil, tap-to-focus ile odak alan gerçek bir