/* ========================================================================== botzzz773 — tokens.css · v2, iki temalı -------------------------------------------------------------------------- TABAN PALET (palet 1) — koyu ve açık temada roller ters çevrilir Onyx #0A0A0A koyu zemin / açık metin Alabaster #E5E4E2 koyu metin / açık zemin Blue Slate #536878 her iki temada eksen STATUS PALETİ (palet 2) — hue ailesi olarak alınır, temaya göre türetilir Linen #F0E5DE sıcak kil ailesi Dark Wine #6F1D1B wine ailesi Ash Grey #ADBDAB sage ailesi Aynı hex iki temada çalışmaz: Dark Wine koyu zeminde 1.76:1, Ash Grey açık zeminde 1.55:1. Bu yüzden her aile iki değer alır. Verilen üç hex kendi temasında birebir korunur. TEMA SEÇİMİ varsayılan koyu sistem açık tercihi otomatik açık (data-theme yoksa) data-theme="light" zorla açık data-theme="dark" zorla koyu YÜKLEME Her sayfada en son stylesheet olarak link'lenir. Tamamen eklemeli — hiçbir mevcut değişkeni ezmez, alias katmanı yok. ========================================================================== */ /* ========================================================================== KATMAN 1 — HAM PALET ========================================================================== */ :root { /* --- taban: koyu taraf (kontrast oranları Onyx üzerinde) --- */ --onyx: #0A0A0A; --d-surface-950: #0A0A0A; --d-surface-900: #191D21; --d-surface-850: #1C2126; --d-surface-800: #242A30; --d-surface-700: #2F373F; --d-surface-600: #333B44; --d-text-100: #E5E4E2; /* 15.6:1 */ --d-text-300: #A8B3BE; /* 9.3:1 */ --d-text-400: #8B99A8; /* 6.7:1 */ --d-text-600: #536878; /* 3.4:1 — metin değil, kenarlık/disabled */ /* --- taban: açık taraf (kontrast oranları Alabaster üzerinde) --- */ --alabaster: #E5E4E2; --l-surface-050: #E5E4E2; --l-surface-100: #EFEEEC; --l-surface-150: #EAE9E7; --l-surface-200: #F7F6F5; --l-border-300: #CFCDC9; --l-border-400: #B4B1AC; --l-text-900: #0A0A0A; /* 15.6:1 */ --l-text-700: #3D4650; /* 7.6:1 */ --l-text-500: #536878; /* 4.6:1 */ --l-text-400: #8B99A8; /* 2.5:1 — disabled */ /* --- status: sage ailesi (Ash Grey) --- */ --sage-light: #ADBDAB; /* koyu tema · 10.0:1 */ --sage-dark: #4A5E48; /* açık tema · 5.5:1 */ /* --- status: wine ailesi (Dark Wine) --- */ --wine-light: #C97E79; /* koyu tema · 6.4:1 */ --wine-dark: #6F1D1B; /* açık tema · 8.9:1 */ /* --- status: kil ailesi (Linen) --- */ --clay-light: #D9B08C; /* koyu tema · 9.9:1 */ --clay-dark: #7D5230; /* açık tema · 5.3:1 */ /* --- status: slate ailesi (Blue Slate) --- */ --slate-light: #8FA3B5; /* koyu tema · 7.6:1 */ --slate-dark: #536878; /* açık tema · 4.6:1 */ /* --- status: nötr --- */ --mute-light: #9A9A96; /* koyu tema · 8.3:1 */ --mute-dark: #5C5C58; /* açık tema · 5.5:1 */ } /* ========================================================================== KATMAN 2A — ROL TOKEN'LARI · KOYU TEMA (varsayılan) ========================================================================== */ :root { --color-bg: var(--d-surface-950); --color-surface: var(--d-surface-900); --color-surface-subtle: var(--d-surface-850); --color-surface-raised: var(--d-surface-800); --color-surface-overlay: var(--d-surface-800); --color-input-bg: var(--d-surface-950); --color-input-bg-focus: var(--d-surface-900); --color-border: var(--d-surface-700); --color-border-strong: var(--d-surface-600); --color-border-focus: var(--d-text-400); --color-text: var(--d-text-100); --color-text-secondary: var(--d-text-300); --color-text-muted: var(--d-text-400); --color-text-disabled: var(--d-text-600); --color-text-on-accent: var(--onyx); --color-link: var(--d-text-300); /* --- yüzey ve vurgu: kabuk ile panelin ortak dili --- Bunlar css/public-shell.css içinde tanımlıydı; panel o dosyayı yüklemediği için aynı yüzeyi üretemiyordu. Token oldukları için buraya taşındılar. */ --glass: rgba(255,255,255,.05); --glass-line: rgba(255,255,255,.10); --glow: #6E8BFF; --glow-2: #37D9A0; /* Buton gradyani auroradan ayri tutuluyor: acik temada buton koyulasmali ama aurora koyulasirsa beyaz zeminde kirli bir leke olur. */ --btn-grad-from: #6E8BFF; --btn-grad-to: #37D9A0; --color-btn-primary-bg: var(--d-text-100); --color-btn-primary-text: var(--onyx); --color-btn-primary-hover: #F2F1EF; --color-btn-primary-active: #D2D1CF; --color-btn-secondary-bg: transparent; --color-btn-secondary-text: var(--d-text-100); --color-btn-secondary-border: var(--d-surface-600); --color-btn-secondary-hover: var(--d-surface-800); --color-sidebar-bg: var(--d-surface-900); --color-sidebar-text: var(--d-text-300); --color-sidebar-hover-bg: var(--d-surface-800); --color-sidebar-active-bg: var(--d-surface-800); --color-sidebar-active-text: var(--d-text-100); --color-sidebar-border: var(--d-surface-700); --color-topbar-bg: var(--d-surface-950); --color-topbar-text: var(--d-text-100); --color-topbar-border: var(--d-surface-700); --color-table-head-bg: var(--d-surface-800); --color-table-head-text: var(--d-text-300); --color-table-row-border: var(--d-surface-950); --color-table-row-hover: var(--d-surface-850); --color-table-row-selected: var(--d-surface-800); --color-success: var(--sage-light); --color-danger: var(--wine-light); --color-warning: var(--clay-light); --color-info: var(--slate-light); --color-neutral: var(--mute-light); --color-success-bg: rgba(173, 189, 171, 0.12); --color-danger-bg: rgba(201, 126, 121, 0.12); --color-warning-bg: rgba(217, 176, 140, 0.12); --color-info-bg: rgba(143, 163, 181, 0.12); --color-neutral-bg: rgba(154, 154, 150, 0.12); /* Durum çipleri kendi mürekkebini kullanır: gövde paletindeki sage/clay/wine tonları çip boyutunda sönük kalıyordu. Değerler ölçüldü — çip dolgusu accent'in %14'ü olduğundan, yorumdaki oran metin/dolgu oranıdır. */ --chip-success: #2BE38F; /* 7.47:1 */ --chip-info: #5B9DFF; /* 4.98:1 */ --chip-warning: #FBBF24; /* 7.49:1 */ --chip-danger: #FF6B81; /* 5.05:1 */ --chip-neutral: #A8B3BE; /* 6.07:1 */ /* Processing, In Progress ile ayni maviyi paylasiyordu ve ikisi ayirt edilemiyordu; mor bes rengin hicbirine benzemiyor. */ --chip-processing: #B794F6; /* 5.44:1 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60); --shadow-focus: 0 0 0 3px rgba(139, 153, 168, 0.30); --gradient-hero: radial-gradient(130% 85% at 50% 118%, #E5E4E2 0%, #E5E4E2 14%, rgba(229, 228, 226, 0) 58%), radial-gradient(95% 65% at 22% 62%, #536878 0%, rgba(83, 104, 120, 0) 66%), #0A0A0A; --gradient-auth: radial-gradient(110% 70% at 50% 112%, #E5E4E2 0%, rgba(229, 228, 226, 0) 55%), radial-gradient(90% 60% at 25% 48%, #536878 0%, rgba(83, 104, 120, 0) 62%), #0A0A0A; --gradient-sidebar: linear-gradient(#14171A, #0A0A0A); } /* ========================================================================== KATMAN 2B — ROL TOKEN'LARI · AÇIK TEMA Aynı rol isimleri, ters çevrilmiş değerler. Bileşen CSS'i hiç değişmez. ========================================================================== */ [data-theme="light"] { --color-bg: var(--l-surface-050); --color-surface: var(--l-surface-100); --color-surface-subtle: var(--l-surface-150); --color-surface-raised: var(--l-surface-200); --color-surface-overlay: var(--l-surface-200); --color-input-bg: var(--l-surface-200); --color-input-bg-focus: #FFFFFF; --color-border: var(--l-border-300); --color-border-strong: var(--l-border-400); --color-border-focus: var(--l-text-500); --color-text: var(--l-text-900); --color-text-secondary: var(--l-text-700); --color-text-muted: var(--l-text-500); --color-text-disabled: var(--l-text-400); --color-text-on-accent: var(--alabaster); --color-link: var(--l-text-700); --glass: rgba(255,255,255,.72); --glass-line: rgba(0,0,0,.07); --glow: #3B5BDB; --glow-2: #0CA678; /* Koyu buton / acik sayfa -- koyu temadaki parlak buton / koyu sayfa iliskisinin aynasi. Sayfadan ayrisma 7,91; koyu temada 8,13. */ --btn-grad-from: #2440A8; --btn-grad-to: #0A5F45; --color-btn-primary-bg: var(--l-text-900); --color-btn-primary-text: var(--alabaster); --color-btn-primary-hover: #24211F; --color-btn-primary-active: #000000; --color-btn-secondary-bg: transparent; --color-btn-secondary-text: var(--l-text-900); --color-btn-secondary-border: var(--l-border-400); --color-btn-secondary-hover: var(--l-surface-200); --color-sidebar-bg: var(--l-surface-100); --color-sidebar-text: var(--l-text-700); --color-sidebar-hover-bg: var(--l-surface-200); --color-sidebar-active-bg: var(--l-surface-200); --color-sidebar-active-text: var(--l-text-900); --color-sidebar-border: var(--l-border-300); --color-topbar-bg: var(--l-surface-050); --color-topbar-text: var(--l-text-900); --color-topbar-border: var(--l-border-300); --color-table-head-bg: var(--l-surface-200); --color-table-head-text: var(--l-text-700); --color-table-row-border: var(--l-border-300); --color-table-row-hover: var(--l-surface-150); --color-table-row-selected: var(--l-surface-200); --color-success: var(--sage-dark); --color-danger: var(--wine-dark); --color-warning: var(--clay-dark); --color-info: var(--slate-dark); --color-neutral: var(--mute-dark); --color-success-bg: rgba(74, 94, 72, 0.10); --color-danger-bg: rgba(111, 29, 27, 0.09); --color-warning-bg: rgba(125, 82, 48, 0.09); --color-info-bg: rgba(83, 104, 120, 0.10); --color-neutral-bg: rgba(92, 92, 88, 0.09); /* Aynı roller açık temada koyu mürekkebe döner; ölçümler dolgu %12 ile. */ --chip-success: #065F46; /* 5.52:1 */ --chip-info: #2440A8; /* 6.29:1 */ --chip-warning: #92400E; /* 5.12:1 */ --chip-danger: #9F1239; /* 5.61:1 */ --chip-neutral: #3D4650; /* 6.84:1 */ --chip-processing: #5B21B6; /* 6.32:1 */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06); --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.08); --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.12); --shadow-focus: 0 0 0 3px rgba(83, 104, 120, 0.25); --gradient-hero: radial-gradient(130% 85% at 50% 118%, #FFFFFF 0%, #FFFFFF 14%, rgba(255, 255, 255, 0) 58%), radial-gradient(95% 65% at 22% 62%, rgba(83, 104, 120, 0.55) 0%, rgba(83, 104, 120, 0) 66%), #E5E4E2; --gradient-auth: radial-gradient(110% 70% at 50% 112%, #FFFFFF 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(90% 60% at 25% 48%, rgba(83, 104, 120, 0.50) 0%, rgba(83, 104, 120, 0) 62%), #E5E4E2; --gradient-sidebar: linear-gradient(#EFEEEC, #E5E4E2); } /* -------------------------------------------------------------------------- Sistem tercihi — kullanıcı elle seçmediyse açık temaya geç -------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --color-bg: var(--l-surface-050); --color-surface: var(--l-surface-100); --color-surface-subtle: var(--l-surface-150); --color-surface-raised: var(--l-surface-200); --color-surface-overlay: var(--l-surface-200); --color-input-bg: var(--l-surface-200); --color-input-bg-focus: #FFFFFF; --color-border: var(--l-border-300); --color-border-strong: var(--l-border-400); --color-border-focus: var(--l-text-500); --color-text: var(--l-text-900); --color-text-secondary: var(--l-text-700); --color-text-muted: var(--l-text-500); --color-text-disabled: var(--l-text-400); --color-text-on-accent: var(--alabaster); --color-link: var(--l-text-700); --glass: rgba(255,255,255,.72); --glass-line: rgba(0,0,0,.07); --glow: #3B5BDB; --glow-2: #0CA678; /* Koyu buton / acik sayfa -- koyu temadaki parlak buton / koyu sayfa iliskisinin aynasi. Sayfadan ayrisma 7,91; koyu temada 8,13. */ --btn-grad-from: #2440A8; --btn-grad-to: #0A5F45; --color-btn-primary-bg: var(--l-text-900); --color-btn-primary-text: var(--alabaster); --color-btn-primary-hover: #24211F; --color-btn-secondary-text: var(--l-text-900); --color-btn-secondary-border: var(--l-border-400); --color-btn-secondary-hover: var(--l-surface-200); --color-sidebar-bg: var(--l-surface-100); --color-sidebar-text: var(--l-text-700); --color-sidebar-hover-bg: var(--l-surface-200); --color-sidebar-active-bg: var(--l-surface-200); --color-sidebar-active-text: var(--l-text-900); --color-sidebar-border: var(--l-border-300); --color-topbar-bg: var(--l-surface-050); --color-topbar-text: var(--l-text-900); --color-topbar-border: var(--l-border-300); --color-table-head-bg: var(--l-surface-200); --color-table-head-text: var(--l-text-700); --color-table-row-border: var(--l-border-300); --color-table-row-hover: var(--l-surface-150); --color-table-row-selected: var(--l-surface-200); --color-success: var(--sage-dark); --color-danger: var(--wine-dark); --color-warning: var(--clay-dark); --color-info: var(--slate-dark); --color-neutral: var(--mute-dark); --color-success-bg: rgba(74, 94, 72, 0.10); --color-danger-bg: rgba(111, 29, 27, 0.09); --color-warning-bg: rgba(125, 82, 48, 0.09); --color-info-bg: rgba(83, 104, 120, 0.10); --color-neutral-bg: rgba(92, 92, 88, 0.09); --chip-success: #065F46; --chip-info: #2440A8; --chip-warning: #92400E; --chip-danger: #9F1239; --chip-neutral: #3D4650; --chip-processing: #5B21B6; } } /* -------------------------------------------------------------------------- oklab — destekleyen tarayıcılarda banding azalır. Custom property'ler declaration anında doğrulanmadığı için @supports şart; iki satırlık fallback yöntemi custom property'lerde çalışmaz. -------------------------------------------------------------------------- */ @supports (background: linear-gradient(in oklab, #000, #fff)) { :root { --gradient-sidebar: linear-gradient(in oklab, #14171A, #0A0A0A); } [data-theme="light"] { --gradient-sidebar: linear-gradient(in oklab, #EFEEEC, #E5E4E2); } } /* ========================================================================== ORTAK — temadan bağımsız ========================================================================== */ :root { --noise-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); --sidebar-width: 250px; --topbar-height: 64px; --row-height: 40px; --radius-token: 8px; --opacity-disabled: 0.5; } html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { color-scheme: light; } } /* ========================================================================== YARDIMCI SINIFLAR — yeni bileşenler için, mevcut hiçbir class'ı ezmez ========================================================================== */ /* tablo rakamlarının hizalanması — ID, quantity, charge, remains, start count */ .tabular, table td, table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Durum rozeti — renk .is-* ile gelir, iki temada otomatik döner. Köşeler kesik: sol üst ve sağ alt. clip-path kenarlığı da kestiği için normal bir border kesikte bozuk görünürdü; onun yerine gövde mürekkep rengiyle dolduruluyor ve ::before 1px içeriden asıl dolguyu koyuyor, böylece kenar çizgisi kesiği de takip ediyor. */ .status-badge { --chip-ink: var(--chip-neutral); --chip-notch: 6px; /* Dolgu opak: satır zebra/hover zeminine göre kaymasın, ölçülen kontrast her satırda aynı kalsın. */ --chip-fill: color-mix(in srgb, var(--chip-ink) 14%, var(--color-surface)); position: relative; isolation: isolate; /* ::before'un z-index:-1'i gövdenin altına düşmesin */ display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 5px 10px; white-space: nowrap; border: 0; border-radius: 0; color: var(--chip-ink); background: var(--chip-ink); /* görünen 1px kenar */ clip-path: polygon( var(--chip-notch) 0, 100% 0, 100% calc(100% - var(--chip-notch)), calc(100% - var(--chip-notch)) 100%, 0 100%, 0 var(--chip-notch)); } .status-badge::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--chip-fill); clip-path: polygon( calc(var(--chip-notch) - 1px) 0, 100% 0, 100% calc(100% - var(--chip-notch) + 1px), calc(100% - var(--chip-notch) + 1px) 100%, 0 100%, 0 calc(var(--chip-notch) - 1px)); } .status-badge.is-success { --chip-ink: var(--chip-success); } .status-badge.is-danger { --chip-ink: var(--chip-danger); } .status-badge.is-warning { --chip-ink: var(--chip-warning); } .status-badge.is-info { --chip-ink: var(--chip-info); } .status-badge.is-processing { --chip-ink: var(--chip-processing); } /* Panelde iki isimlendirme yan yana yasiyor: siparis tablosu .is-* veriyor, refill tablosu durumu dogrudan sinif adina yaziyor (status.replace(' ','-')). Ikisi de ayni cipe baglansin diye eski adlar da burada esleniyor. */ .status-badge.completed, .status-badge.status-completed, .status-badge.status-success, .status-badge.status-active { --chip-ink: var(--chip-success); } .status-badge.pending, .status-badge.status-pending { --chip-ink: var(--chip-warning); } .status-badge.in-progress, .status-badge.status-in-progress, .status-badge.status-refilling, .status-badge.status-paused { --chip-ink: var(--chip-info); } .status-badge.status-processing { --chip-ink: var(--chip-processing); } .status-badge.rejected, .status-badge.status-canceled, .status-badge.status-cancelled, .status-badge.status-failed { --chip-ink: var(--chip-danger); } /* Awaiting ve partial bilerek notr: awaiting "gonderildi ama saglayici henuz cevaplamadi" demek, pending'in amberini paylasirsa ikisi ayirt edilemez; partial da spec geregi notr kaliyor. */ .status-badge.awaiting, .status-badge.status-awaiting, .status-badge.status-partial { --chip-ink: var(--chip-neutral); } /* Açık temada dolgu zemini satır rengiyle aynı olmalı, yoksa çip beyaz tablonun üstünde gri bir kutu gibi durur. */ :root[data-theme="light"] .status-badge { --chip-fill: color-mix(in srgb, var(--chip-ink) 12%, var(--color-bg)); } /* gradyanlı yüzey — yalnızca public taraf: landing, SEO, signin, signup */ .surface-gradient { background: var(--gradient-hero); background-attachment: scroll; position: relative; } .surface-gradient-auth { background: var(--gradient-auth); background-attachment: scroll; position: relative; } .surface-gradient::before, .surface-gradient-auth::before { content: ""; position: absolute; inset: 0; background-image: var(--noise-overlay); pointer-events: none; } /* ========================================================================== botzzz773 — ÖLÇÜ KATMANI -------------------------------------------------------------------------- Bu blok css/tokens.css dosyasının SONUNA eklenir. Renk katmanına dokunmaz, tamamen eklemelidir. Değerlerin kaynağı — tahmin değil, ölçüm: igflow.net (Next.js + Tailwind v4, Perfect Panel türevi) smmorigin (Perfect Panel, getComputedStyle ile okundu) İSİM ÇAKIŞMASI UYARISI style.css'te zaten --spacing-* ve --radius-sm/md/lg/xl tanımlı ve bir media query içinde override ediliyor. Bu yüzden burada BİLEREK farklı isimler kullanıldı (--space-*, --radius-badge vb.). Eski isimlere dokunmuyoruz, responsive davranışları bozulmasın. ========================================================================== */ :root { /* ====================================================================== BOŞLUK — 4px tabanlı Referanslardaki gerçek değerler: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. Hepsi 4'ün katı, ara değer yok. ====================================================================== */ --space-1: 4px; /* label alt boşluğu (igflow: mb-1) */ --space-2: 8px; /* çip aralığı, ikon boşluğu */ --space-3: 12px; /* input yatay padding (igflow: px-3) */ --space-4: 16px; /* tablo hücre yatay padding, menü link padding */ --space-5: 20px; /* sidebar yatay margin (igflow: mx-5) */ --space-6: 24px; /* kart iç padding (igflow: p-6) */ --space-8: 32px; /* bölüm arası */ --space-10: 40px; /* büyük bölüm arası */ --space-12: 48px; /* sayfa üst/alt nefes */ --space-16: 64px; /* içerik alt boşluğu (igflow: pb-16) */ --space-20: 80px; /* içerik üst boşluğu, mobil (igflow: pt-20) */ --space-24: 96px; /* içerik üst boşluğu, masaüstü (igflow: lg:pt-24) */ /* ====================================================================== TİPOGRAFİ Inter zaten yüklü (300-900). Referanslar 11-16px aralığında çalışıyor; 20px sadece vurgu sayısı için. ====================================================================== */ --text-micro: 11px; /* durum rozeti, pill */ --text-caption: 12px; /* yardımcı metin, min/max notu, meta */ --text-body-sm: 13px; /* ikincil tablo hücresi, filtre çipi */ --text-body: 14px; /* tablo hücresi, input, buton — TABAN */ --text-body-lg: 15px; /* sidebar menü linki (igflow ölçümü) */ --text-title: 16px; /* bölüm başlığı, tablo başlığı (smmorigin) */ --text-display: 20px; /* sayfa başlığı, charge tutarı */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* tablo hücresi — igflow font-semibold */ --weight-bold: 700; /* tablo başlığı, label — her iki referans */ --leading-tight: 1.2; /* başlık */ --leading-normal: 1.45; /* tablo hücresi, sarma yapan link */ --leading-relaxed: 1.6; /* paragraf, açıklama */ /* tablo rakamları — sipariş ID, adet, charge, remains hizalansın */ --numeric-tabular: tabular-nums; /* ====================================================================== KÖŞE YARIÇAPI — role göre, ölçüye göre değil Referans standardı 8px (igflow --radius: 0.5rem). Panelde şu an 5/6/8/12 karışık dolaşıyor, üçe indiriyoruz. ====================================================================== */ --radius-badge: 5px; /* durum rozeti, küçük pill */ --radius-control: 8px; /* input, buton, select, filtre çipi */ --radius-surface: 12px; /* kart, modal, tablo konteyneri */ --radius-pill: 999px; /* bildirim sayacı, yuvarlak rozet */ /* ====================================================================== KENARLIK KALINLIĞI Panelde 0.5px / 1px / 2px karışık. 0.5px bazı ekranlarda yuvarlanıp kayboluyor — her iki referans da 1px kullanıyor. ====================================================================== */ --border-hairline: 1px; /* varsayılan kenarlık */ --border-emphasis: 2px; /* aktif sidebar linki, focus, vurgu */ /* ====================================================================== BİLEŞEN YÜKSEKLİKLERİ ====================================================================== */ --control-height-sm: 32px; /* küçük buton, filtre çipi */ --control-height: 40px; /* buton, sidebar linki, tablo satırı */ --control-height-lg: 48px; /* input, select (igflow: h-12) */ /* mevcut ölçüler — renk katmanında zaten tanımlıydı, burada tekrar tanımlanmıyor, sadece hatırlatma: --sidebar-width: 250px --topbar-height: 64px --row-height: 40px */ /* ====================================================================== DERİNLİK MERDİVENİ — hangi bileşen hangi yüzey kademesinde Renk token'ları zaten var; bu blok hangisinin nerede kullanılacağını sabitliyor. Adım 5'te bileşenlere uygulanacak. --color-bg sayfa zemini --color-surface kart, tablo gövdesi, sidebar --color-surface-raised tablo başlığı, hover satır, seçili satır --color-surface-overlay dropdown, modal, toast Kural: hiçbir bileşen kendi ebeveyninden daha koyu olmaz. ====================================================================== */ --z-base: 0; --z-sticky: 10; /* tablo başlığı sabitlenirse */ --z-topbar: 20; --z-sidebar: 40; --z-dropdown: 60; --z-modal: 80; --z-toast: 100; } /* ========================================================================== YARDIMCI SINIFLAR — ölçü katmanı Mevcut hiçbir class'ı ezmez, yeni bileşenler için. ========================================================================== */ .u-tabular { font-variant-numeric: var(--numeric-tabular); } .u-text-micro { font-size: var(--text-micro); line-height: var(--leading-tight); } .u-text-caption { font-size: var(--text-caption); line-height: var(--leading-normal); } .u-text-body { font-size: var(--text-body); line-height: var(--leading-normal); } .u-text-title { font-size: var(--text-title); line-height: var(--leading-tight); font-weight: var(--weight-semibold); } .u-text-display { font-size: var(--text-display); line-height: var(--leading-tight); font-weight: var(--weight-semibold); } /* ========================================================================== Servis detay modalı — panelin cam yüzeyine ve çip diline hizalandı. style.css'teki eski tanım düz bir kutu + üstü çizili gri rozetlerdi; burası en son yüklendiği için o değerleri ezer. Admin bu dosyayı yüklemediğinden admin tarafı olduğu gibi kalır. ========================================================================== */ .service-modal { background: color-mix(in srgb, var(--color-bg) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .service-modal-content { border-radius: 22px; border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--color-surface) 92%, transparent); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); padding: 26px; } .service-modal-title { font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.01em; } .service-modal-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); } .service-modal-close { border: 1px solid var(--glass-line); background: var(--glass); } /* Yetenek rozetleri de kesik köşeli çip: tabloların durum çipiyle aynı dil. Desteklenmeyenler yalnızca renkle değil üstü çizili olarak da işaretli -- renk tek başına bilgi taşımasın. */ .service-meta-tag.service-capability { --chip-ink: var(--chip-success); --chip-notch: 6px; --chip-fill: color-mix(in srgb, var(--chip-ink) 14%, var(--color-surface)); position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 5px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; border: 0; border-radius: 0; color: var(--chip-ink); background: var(--chip-ink); clip-path: polygon( var(--chip-notch) 0, 100% 0, 100% calc(100% - var(--chip-notch)), calc(100% - var(--chip-notch)) 100%, 0 100%, 0 var(--chip-notch)); } .service-meta-tag.service-capability::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--chip-fill); clip-path: polygon( calc(var(--chip-notch) - 1px) 0, 100% 0, 100% calc(100% - var(--chip-notch) + 1px), calc(100% - var(--chip-notch) + 1px) 100%, 0 100%, 0 calc(var(--chip-notch) - 1px)); } .service-meta-tag.service-capability--off { --chip-ink: var(--chip-neutral); opacity: 0.72; text-decoration: line-through; } :root[data-theme="light"] .service-meta-tag.service-capability { --chip-fill: color-mix(in srgb, var(--chip-ink) 12%, var(--color-bg)); } /* Birincil eylem panelin geri kalanıyla aynı gradyanı kullansın; ikincil buton cam. */ .service-modal-actions .btn { border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 14px; } .service-modal-actions .btn-primary, .service-modal-actions .btn-primary:hover { background: linear-gradient(135deg, var(--btn-grad-from), var(--btn-grad-to)); color: #fff; border: 0; } .service-modal-actions .btn-primary:hover { box-shadow: 0 12px 30px color-mix(in srgb, var(--glow) 45%, transparent); } .service-modal-actions .btn-secondary, .service-modal-actions .btn-secondary:hover { background: var(--glass); border: 1px solid var(--glass-line); color: var(--color-text); }