/* SmartStudio — ortak tasarım sistemi (infinityelearning / yeniisgmevzuati dili) Tüm portal sayfaları bunu 'de link'ler → tek kaynaktan tutarlılık. */ :root { --brand-red: #c41e3a; --brand-dark: #1a1a1a; --brand-light: #fff5f6; --brand-accent: #e8364f; /* Nötr gri skala (Notion/Linear dili) — metin & yüzeyler tek yerden. */ --ss-ink: #16181d; /* birincil metin */ --ss-ink-2: #4a5160; /* ikincil metin */ --ss-ink-3: #6b7280; /* üçüncül / etiket */ --ss-ink-4: #9aa1ac; /* soluk / placeholder */ --ss-surface: #ffffff; /* kart yüzeyi */ --ss-surface-2: #f7f8fa; /* zemin */ --ss-hover: #f3f4f6; /* hover dolgu */ --ss-radius: 0.75rem; /* kart standart köşe */ --ss-radius-lg: 1rem; /* büyük kart */ --ss-radius-sm: 0.5rem; /* buton/rozet */ --ss-border: rgba(17,20,28,.08); --ss-border-2: rgba(17,20,28,.12); /* input/vurgulu kenar */ --ss-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05); --ss-shadow-md: 0 4px 12px -2px rgba(16,24,40,.10); --ss-shadow-lift:0 12px 30px -10px rgba(16,24,40,.18); --ss-ic-size: 18px; } /* ── İKON SİSTEMİ (Lucide, monokrom çizgi — Notion dili) ── icon('name') inline SVG üretir; renk currentColor'dan gelir, boyut ayarlanır. */ .ss-ic { display: inline-block; flex: none; width: var(--ss-ic-size); height: var(--ss-ic-size); vertical-align: -0.18em; stroke-width: 2; } .ss-ic-missing { display: inline-block; width: var(--ss-ic-size); text-align: center; color: var(--ss-ink-4); } /* Buton/rozet içindeki ikonlar metinle aynı optik boyda */ .ss-btn .ss-ic { width: 16px; height: 16px; vertical-align: -0.16em; } .ss-btn-sm .ss-ic { width: 15px; height: 15px; } /* İstatistik/başlık kartlarındaki ikon kutucuğu (renkli dolgu değil, ince nötr tile) */ .ss-ic-tile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ss-surface-2); border: 1px solid var(--ss-border); color: var(--ss-ink-2); } .ss-ic-tile .ss-ic { width: 19px; height: 19px; vertical-align: 0; } /* ── Global polish (tüm sayfalarda anında; per-page düzenleme gerekmez) ── */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(196,30,58,.16); color: var(--brand-dark); } a, button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } /* İnce, markalı kaydırma çubuğu */ * { scrollbar-width: thin; scrollbar-color: #cbd0d8 transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: #cbd0d8; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: #aab2bd; background-clip: content-box; } /* Görsel/medya taşma güvenliği */ img, video, svg { max-width: 100%; } /* ── Modül kartı (mevcut) ── */ .card-module { background: #fff; border: 1px solid var(--ss-border); border-radius: 1rem; padding: 1.25rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; } .card-module:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(196,30,58,.35); border-color: rgba(196,30,58,.4); } .card-module.locked { opacity: .55; cursor: not-allowed; } .card-module.locked:hover { transform: none; box-shadow: none; border-color: var(--ss-border); } /* ── Standart bileşen sınıfları (opt-in; yeni/uyarlanan ekranlarda kullan) ── */ .ss-card { background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); } .ss-card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ss-card-hover:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-lift); border-color: rgba(196,30,58,.35); } .ss-btn { display: inline-flex; align-items: center; gap: .4rem; font: 600 .85rem/1 Inter, system-ui, sans-serif; padding: .55rem .9rem; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: #fff; color: var(--brand-dark); cursor: pointer; white-space: nowrap; } .ss-btn:hover:not(:disabled) { background: #f3f4f6; } .ss-btn:disabled { opacity: .5; cursor: not-allowed; } .ss-btn-primary { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } .ss-btn-primary:hover:not(:disabled) { background: var(--brand-accent); border-color: var(--brand-accent); } .ss-btn-danger { background: #fff; border-color: rgba(220,38,38,.35); color: #dc2626; } .ss-btn-danger:hover:not(:disabled) { background: #fef2f2; } .ss-btn-sm { padding: .35rem .6rem; font-size: .78rem; } .ss-badge { display: inline-flex; align-items: center; font: 600 .68rem/1.2 Inter, system-ui, sans-serif; padding: .2rem .55rem; border-radius: 99px; } .ss-badge-amber { background: rgba(245,158,11,.14); color: #b45309; } .ss-badge-gray { background: rgba(100,116,139,.14); color: #475569; } .ss-badge-blue { background: rgba(59,130,246,.14); color: #1d4ed8; } .ss-badge-green { background: rgba(22,163,74,.14); color: #047857; } .ss-badge-red { background: rgba(220,38,38,.12); color: #dc2626; } .ss-badge-purple{ background: rgba(124,58,237,.13); color: #6d28d9; } .ss-input { width: 100%; background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); padding: .55rem .75rem; font: 400 .9rem Inter, system-ui, sans-serif; color: var(--brand-dark); } .ss-input:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(196,30,58,.12); } .ss-stat { background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: .9rem 1rem; } .ss-stat-label { font-size: .74rem; color: #6b7280; margin-bottom: .3rem; } .ss-stat-value { font-weight: 800; font-size: 1.5rem; color: var(--brand-dark); line-height: 1.1; } .ss-page-title { font-weight: 800; font-size: 1.4rem; color: var(--brand-dark); letter-spacing: -.01em; } .ss-section-title { font-size: .82rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; } .ss-muted { color: #6b7280; }