/* Terazi — tasarim belirtecleri (token) * * BU DOSYA URETILIR. Elle duzenleme; kaynak tools/tema-uret.js. * Yenilemek icin: node tools/tema-uret.js * * Gorsel yon: Swiss / teknik disiplin. * duz yuzey · ince ve net kenarlik · olculu yaricap · anlam tasiyan renk * * Dort tema: koyu (varsayilan) · acik · nane · bugday. * Tema secimi ile yapilir; JS yalnizca bu niteligi yazar. * * 140 kontrast olcumunun tamami WCAG 2.2 AA esigini geciyor * (uretici denetlemeden yazmaz). */ :root { /* ── aralik olcegi — 4px tabanli, Swiss izgara ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── yaricap ── Ilk surumde 3/5/8 idi ve fazla keskin duruyordu — "sade" degil "eski" okunuyordu. Yumusatildi ama olcek korundu: tek tek 8/9/10/12/16/18 dagilmiyor, uc kademe var. */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; /* ── tipografi ── */ /* Manrope — kullanici secimi. Geometrik ama yuvarlak uclu; Inter'in notr/teknik durusuna gore daha sicak. Yedek zincir Windows'ta Segoe UI'ye duser, yani yazi tipi yuklenemezse de arayuz bozulmaz. */ --font: 'Manrope', -apple-system, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; --font-num: 'Manrope', 'Segoe UI', system-ui, sans-serif; --fs-micro: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 15px; --fs-lg: 19px; --fs-xl: 25px; --fs-2xl: 33px; --lh-tight: 1.2; --lh: 1.45; --ls-baslik: .08em; /* versal mikro basliklarda harf araligi */ /* ── hareket — tek egri, kisa sure; amac geri bildirim, gosteri degil ── */ --dur-fast: 110ms; --dur: 170ms; --dur-slow: 260ms; --ease: cubic-bezier(.2, 0, 0, 1); /* ── yerlesim ── */ --sidebar-w: 248px; --icerik-max: 1440px; --topbar-h: 56px; } /* Varsayilan tema, JS yuklenmeden once de dogru gorunsun diye :root uzerinde. */ :root, [data-tema="koyu"] { /* Yerel tarayici parcalari (acilir liste, kaydirma cubugu, tarih secici) temayla ayni tarafta olsun. */ color-scheme: dark; /* yuzeyler */ --bg: #0a0b0e; --bg-alt: #111318; --card: #181a20; --card-hover: #20232b; --card-rgb: 24,26,32; /* kenarliklar — border ayrac icin, border-strong etkilesimli kontrol icin (3:1) */ --border: #2c313b; --border-strong: #666d7d; --border-light: #22262e; /* metin */ --text: #dfe3ea; --text-strong: #ffffff; --muted: #8b929e; /* vurgu — accent metin/kenarlik icin, accent-fill dolgu buton icin */ --accent: #6f97ff; --accent-fill: #2f56cc; --accent2: #8fb0ff; --accent-rgb: 111,151,255; --accent2-rgb: 143,176,255; /* anlam renkleri — metin olarak okunur, dolguda on-* ile eslesir */ --red: #f2555a; --red-fill: #c4262c; --green: #35c07a; --yellow: #e0a92e; --blue: #6f97ff; --purple: #9b7bf0; /* dolgu uzeri yazi rengi */ --on-fill: #ffffff; --on-bright: #0a0b0e; --btn-text: #ffffff; /* kademe — Swiss yonu golgeden cok kenarliga guvenir, uc kademe yeter */ --e1: 0 1px 2px rgba(0,0,0,0.45); --e2: 0 2px 8px rgba(0,0,0,0.5); --e3: 0 16px 48px rgba(0,0,0,0.6); --shadow: var(--e2); /* marka tonlari — bu temanin kart zemininde okunur olacak sekilde hesaplandi */ --mk-POVVER: #ea580c; --mk-PETLAS: #e35151; --mk-TOLERO: #ca8a04; --mk-VARTA: #7b74ec; --mk-DURACELL: #16a34a; --mk-ORBUS: #0891b2; --mk-FEZA: #a95cee; --mk-TURKUAZ: #0d9488; --mk-BANNER: #d97706; --mk-FROW: #5182ef; --mk-GENTRY: #86868e; --mk-DEEPPOWER: #e0478b; --mk-UNIBAT: #65a30d; /* grafik seri paleti — sirali, dondurulmez; anlam renklerinden ayri */ --grafik-1: #3f86c8; --grafik-2: #d55e00; --grafik-3: #009e73; --grafik-4: #ab7d08; --grafik-5: #b5638f; --grafik-6: #4596c9; --grafik-izgara: #22262e; --grafik-eksen: #2c313b; } [data-tema="acik"] { /* Yerel tarayici parcalari (acilir liste, kaydirma cubugu, tarih secici) temayla ayni tarafta olsun. */ color-scheme: light; /* yuzeyler */ --bg: #edeff3; --bg-alt: #e2e5eb; --card: #ffffff; --card-hover: #f6f7fa; --card-rgb: 255,255,255; /* kenarliklar — border ayrac icin, border-strong etkilesimli kontrol icin (3:1) */ --border: #d5d9e0; --border-strong: #767d8a; --border-light: #e7eaef; /* metin */ --text: #1a1d23; --text-strong: #000000; --muted: #5c636e; /* vurgu — accent metin/kenarlik icin, accent-fill dolgu buton icin */ --accent: #1c4fd8; --accent-fill: #1c4fd8; --accent2: #2563eb; --accent-rgb: 28,79,216; --accent2-rgb: 37,99,235; /* anlam renkleri — metin olarak okunur, dolguda on-* ile eslesir */ --red: #cc2b31; --red-fill: #cc2b31; --green: #14804a; --yellow: #8a5d00; --blue: #1c4fd8; --purple: #6d28d9; /* dolgu uzeri yazi rengi */ --on-fill: #ffffff; --on-bright: #ffffff; --btn-text: #ffffff; /* kademe — Swiss yonu golgeden cok kenarliga guvenir, uc kademe yeter */ --e1: 0 1px 2px rgba(24,29,38,0.08); --e2: 0 2px 8px rgba(24,29,38,0.1); --e3: 0 16px 48px rgba(24,29,38,0.16); --shadow: var(--e2); /* marka tonlari — bu temanin kart zemininde okunur olacak sekilde hesaplandi */ --mk-POVVER: #c74b0a; --mk-PETLAS: #dc2626; --mk-TOLERO: #986803; --mk-VARTA: #4f46e5; --mk-DURACELL: #12823b; --mk-ORBUS: #077b97; --mk-FEZA: #9333ea; --mk-TURKUAZ: #0c857a; --mk-BANNER: #ae5f05; --mk-FROW: #2563eb; --mk-GENTRY: #71717a; --mk-DEEPPOWER: #db2777; --mk-UNIBAT: #51820a; /* grafik seri paleti — sirali, dondurulmez; anlam renklerinden ayri */ --grafik-1: #0072b2; --grafik-2: #d55e00; --grafik-3: #009e73; --grafik-4: #e69f00; --grafik-5: #cc79a7; --grafik-6: #56b4e9; --grafik-izgara: #e7eaef; --grafik-eksen: #d5d9e0; } [data-tema="nane"] { /* Yerel tarayici parcalari (acilir liste, kaydirma cubugu, tarih secici) temayla ayni tarafta olsun. */ color-scheme: light; /* yuzeyler */ --bg: #e8f3ed; --bg-alt: #dbebe2; --card: #ffffff; --card-hover: #f1faf5; --card-rgb: 255,255,255; /* kenarliklar — border ayrac icin, border-strong etkilesimli kontrol icin (3:1) */ --border: #c6dad0; --border-strong: #6d8a7c; --border-light: #dbebe2; /* metin */ --text: #12211a; --text-strong: #04120c; --muted: #4a6759; /* vurgu — accent metin/kenarlik icin, accent-fill dolgu buton icin */ --accent: #0f766e; --accent-fill: #0f766e; --accent2: #0b7d74; --accent-rgb: 15,118,110; --accent2-rgb: 11,125,116; /* anlam renkleri — metin olarak okunur, dolguda on-* ile eslesir */ --red: #c0271f; --red-fill: #c0271f; --green: #15803d; --yellow: #8a5d00; --blue: #1c4fd8; --purple: #6d28d9; /* dolgu uzeri yazi rengi */ --on-fill: #ffffff; --on-bright: #ffffff; --btn-text: #ffffff; /* kademe — Swiss yonu golgeden cok kenarliga guvenir, uc kademe yeter */ --e1: 0 1px 2px rgba(12,45,35,0.08); --e2: 0 2px 8px rgba(12,45,35,0.11); --e3: 0 16px 48px rgba(12,45,35,0.17); --shadow: var(--e2); /* marka tonlari — bu temanin kart zemininde okunur olacak sekilde hesaplandi */ --mk-POVVER: #c74b0a; --mk-PETLAS: #dc2626; --mk-TOLERO: #986803; --mk-VARTA: #4f46e5; --mk-DURACELL: #12823b; --mk-ORBUS: #077b97; --mk-FEZA: #9333ea; --mk-TURKUAZ: #0c857a; --mk-BANNER: #ae5f05; --mk-FROW: #2563eb; --mk-GENTRY: #71717a; --mk-DEEPPOWER: #db2777; --mk-UNIBAT: #51820a; /* grafik seri paleti — sirali, dondurulmez; anlam renklerinden ayri */ --grafik-1: #0072b2; --grafik-2: #d55e00; --grafik-3: #009e73; --grafik-4: #e69f00; --grafik-5: #cc79a7; --grafik-6: #56b4e9; --grafik-izgara: #dbebe2; --grafik-eksen: #c6dad0; } [data-tema="bugday"] { /* Yerel tarayici parcalari (acilir liste, kaydirma cubugu, tarih secici) temayla ayni tarafta olsun. */ color-scheme: light; /* yuzeyler */ --bg: #f4eddd; --bg-alt: #e9dfc8; --card: #fffdf7; --card-hover: #f8f2e5; --card-rgb: 255,253,247; /* kenarliklar — border ayrac icin, border-strong etkilesimli kontrol icin (3:1) */ --border: #dbcdae; --border-strong: #87775a; --border-light: #e9dfc8; /* metin */ --text: #241d10; --text-strong: #120d05; --muted: #65563b; /* vurgu — accent metin/kenarlik icin, accent-fill dolgu buton icin */ --accent: #96590a; --accent-fill: #96590a; --accent2: #b45309; --accent-rgb: 150,89,10; --accent2-rgb: 180,83,9; /* anlam renkleri — metin olarak okunur, dolguda on-* ile eslesir */ --red: #b3211b; --red-fill: #b3211b; --green: #15803d; --yellow: #7a5200; --blue: #1d4ed8; --purple: #6d28d9; /* dolgu uzeri yazi rengi */ --on-fill: #ffffff; --on-bright: #ffffff; --btn-text: #ffffff; /* kademe — Swiss yonu golgeden cok kenarliga guvenir, uc kademe yeter */ --e1: 0 1px 2px rgba(60,44,16,0.09); --e2: 0 2px 8px rgba(60,44,16,0.12); --e3: 0 16px 48px rgba(60,44,16,0.18); --shadow: var(--e2); /* marka tonlari — bu temanin kart zemininde okunur olacak sekilde hesaplandi */ --mk-POVVER: #c74b0a; --mk-PETLAS: #dc2626; --mk-TOLERO: #986803; --mk-VARTA: #4f46e5; --mk-DURACELL: #12823b; --mk-ORBUS: #077b97; --mk-FEZA: #9333ea; --mk-TURKUAZ: #0b7e74; --mk-BANNER: #ae5f05; --mk-FROW: #2563eb; --mk-GENTRY: #71717a; --mk-DEEPPOWER: #db2777; --mk-UNIBAT: #51820a; /* grafik seri paleti — sirali, dondurulmez; anlam renklerinden ayri */ --grafik-1: #0072b2; --grafik-2: #d55e00; --grafik-3: #009e73; --grafik-4: #e69f00; --grafik-5: #cc79a7; --grafik-6: #56b4e9; --grafik-izgara: #e9dfc8; --grafik-eksen: #dbcdae; } /* Odak halkasi tek yerden tanimlanir — her etkilesimli ogede ayni gorunur. */ :root { --odak: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --odak-ic: 0 0 0 2px var(--accent); }