@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================ MedVis UI — Tasarım Sistemi · Yön: "Data Console" (1b) ------------------------------------------------------------ TEK MERKEZ. Tüm renk / tipografi / boşluk / yarıçap / gölge kararları buradaki değişkenlerden gelir. Tema değiştirmek = yalnızca bu değişkenleri değiştirmek. Koyu tema için kök elemana data-theme="dark" ekleyin (). Sınıflar mv- önekiyle namespace'lidir; mevcut CSS'inizle (Bootstrap / Tailwind / saf) çakışmaz. Bileşenler DOM'daki id ve JS-bağlı class'lara dokunmadan, yalnız görsel katmanı giydirir. ============================================================ */ :root { /* ---- Renk · Zemin & yüzey ---- */ --mv-app-bg: oklch(0.972 0.005 265); --mv-surface: #ffffff; --mv-surface-elev: oklch(0.975 0.005 265); --mv-border: oklch(0.90 0.012 265); --mv-border-soft: oklch(0.95 0.006 265); /* ---- Renk · Metin ---- */ --mv-text: oklch(0.24 0.02 268); /* birincil */ --mv-text-2: oklch(0.50 0.02 268); /* ikincil / muted */ --mv-text-3: oklch(0.64 0.015 268); /* soluk / etiket */ /* ---- Renk · Vurgu (indigo) ---- */ --mv-accent: oklch(0.48 0.15 278); /* link / aktif / metin vurgu */ --mv-accent-solid: oklch(0.48 0.15 278); /* dolu buton zemini */ --mv-accent-strong: oklch(0.42 0.15 278); /* dolu buton :hover */ --mv-accent-on: #ffffff; /* dolu buton metni */ --mv-accent-soft: oklch(0.96 0.03 278); /* yumuşak buton zemini */ --mv-accent-soft-fg: oklch(0.48 0.15 278); /* yumuşak buton metni */ --mv-accent-soft-hov: oklch(0.93 0.04 278); /* ---- Renk · Anlamsal ---- */ --mv-pos: oklch(0.52 0.12 150); /* iyi skor / 100% / yayında */ --mv-neg: oklch(0.56 0.15 35); /* düşük skor / askıya / uyarı */ --mv-track: oklch(0.93 0.008 265); /* ---- Renk · Rozetler ---- */ --mv-badge-green-bg: oklch(0.95 0.03 150); --mv-badge-green-fg: oklch(0.42 0.09 150); --mv-badge-blue-bg: oklch(0.95 0.03 265); --mv-badge-blue-fg: oklch(0.45 0.12 275); --mv-badge-amber-bg: oklch(0.95 0.04 60); --mv-badge-amber-fg: oklch(0.50 0.12 45); --mv-badge-red-bg: oklch(0.95 0.03 25); --mv-badge-red-fg: oklch(0.52 0.15 28); /* ---- Tipografi ---- */ --mv-font-sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mv-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mv-fs-2xs: 10px; /* tablo başlığı / kicker */ --mv-fs-xs: 10.5px; --mv-fs-sm: 12px; --mv-fs-md: 13px; --mv-fs-base:14.5px; /* hekim adı */ --mv-fs-lg: 16px; /* kart başlığı */ --mv-fs-xl: 19px; /* logo */ --mv-fs-score: 17px; --mv-lh: 1.5; /* ---- Boşluk ---- */ --mv-sp-1: 4px; --mv-sp-2: 8px; --mv-sp-3: 12px; --mv-sp-4: 16px; --mv-sp-5: 20px; --mv-sp-6: 22px; --mv-sp-7: 26px; /* ---- Yarıçap ---- */ --mv-r-sm: 6px; --mv-r-md: 8px; --mv-r-lg: 12px; --mv-r-pill: 999px; /* ---- Gölge ---- */ --mv-shadow-card: 0 1px 3px oklch(0.5 0.02 265 / 0.06), 0 24px 60px oklch(0.5 0.02 265 / 0.07); /* ---- Yerleşim · Hekim tablosu kolonları (tek merkez) ---- */ --mv-doctable-cols: minmax(300px, 1fr) 80px 56px 80px 124px 150px; } [data-theme="dark"] { --mv-app-bg: oklch(0.185 0.014 265); --mv-surface: oklch(0.255 0.017 265); --mv-surface-elev: oklch(0.29 0.018 265); --mv-border: oklch(0.34 0.02 265); --mv-border-soft: oklch(0.30 0.015 265); --mv-text: oklch(0.94 0.01 265); --mv-text-2: oklch(0.66 0.015 265); --mv-text-3: oklch(0.55 0.015 265); --mv-accent: oklch(0.72 0.15 278); --mv-accent-solid: oklch(0.55 0.16 278); --mv-accent-strong: oklch(0.60 0.16 278); --mv-accent-on: #ffffff; --mv-accent-soft: oklch(0.32 0.06 278); --mv-accent-soft-fg: oklch(0.82 0.14 278); --mv-accent-soft-hov: oklch(0.37 0.07 278); --mv-pos: oklch(0.74 0.13 150); --mv-neg: oklch(0.74 0.15 40); --mv-track: oklch(0.32 0.02 265); --mv-badge-green-bg: oklch(0.34 0.06 150); --mv-badge-green-fg: oklch(0.82 0.13 150); --mv-badge-blue-bg: oklch(0.34 0.05 265); --mv-badge-blue-fg: oklch(0.82 0.12 275); --mv-badge-amber-bg: oklch(0.36 0.06 60); --mv-badge-amber-fg: oklch(0.85 0.12 70); --mv-badge-red-bg: oklch(0.34 0.06 25); --mv-badge-red-fg: oklch(0.82 0.13 28); --mv-shadow-card: 0 30px 70px oklch(0.12 0.02 265 / 0.55); } /* ============================================================ BİLEŞENLER ============================================================ */ /* ---- Uygulama kabuğu ---- */ .mv-app { background: var(--mv-app-bg); color: var(--mv-text); font-family: var(--mv-font-sans); line-height: var(--mv-lh); } /* Uygulama içi hiçbir link altı çizili görünmez (renk dokunulmaz; nav/isim linkleri düz metin gibi) */ .mv-app a { text-decoration: none; } /* Mono, tablo hizalı rakamlar için yardımcı */ .mv-num { font-family: var(--mv-font-mono); font-variant-numeric: tabular-nums; } .mv-right { text-align: right; } /* ---- Üst menü ---- */ .mv-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--mv-sp-7); background: var(--mv-surface); border-bottom: 1px solid var(--mv-border); } .mv-nav__brand { display: flex; align-items: center; gap: 11px; } .mv-nav__logo { font-family: var(--mv-font-sans); font-weight: 700; font-size: var(--mv-fs-xl); letter-spacing: -0.01em; color: var(--mv-text); } .mv-nav__tag { font-family: var(--mv-font-mono); font-size: var(--mv-fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mv-text-3); white-space: nowrap; } .mv-nav__links { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; white-space: nowrap; /* menü kırılmaz — istenen davranış */ } .mv-nav__link { font-size: var(--mv-fs-md); color: var(--mv-text-2); text-decoration: none; cursor: pointer; } .mv-nav__link:hover { color: var(--mv-text); } .mv-nav__link--active { color: var(--mv-accent); font-weight: 600; } /* Bağlantı durumu rozeti (Google Bağlı) */ .mv-tag-conn { font-family: var(--mv-font-mono); font-size: 11px; color: var(--mv-pos); border: 1px solid color-mix(in oklab, var(--mv-pos) 45%, transparent); padding: 4px 9px; border-radius: var(--mv-r-sm); } /* ---- Kart ---- */ .mv-card { background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-r-lg); overflow: hidden; } .mv-card--pad { padding: var(--mv-sp-5) var(--mv-sp-6); } .mv-card--shadow { box-shadow: var(--mv-shadow-card); } .mv-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mv-sp-4); } .mv-kicker { font-family: var(--mv-font-mono); font-size: var(--mv-fs-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--mv-accent); } .mv-card__title { font-size: var(--mv-fs-lg); font-weight: 600; color: var(--mv-text); margin: 3px 0 0; } /* Eski .card h2 vb. kuralların koyu temada başlığı ezmesini önle (token kazansın) */ .mv-app .mv-card__title { color: var(--mv-text); } /* ---- Butonlar ---- */ .mv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--mv-font-sans); font-weight: 600; font-size: var(--mv-fs-md); padding: 9px 15px; border: 1px solid transparent; border-radius: var(--mv-r-md); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .mv-btn--primary { background: var(--mv-accent-solid); color: var(--mv-accent-on); } .mv-btn--primary:hover { background: var(--mv-accent-strong); } .mv-btn--soft { background: var(--mv-accent-soft); color: var(--mv-accent-soft-fg); font-size: var(--mv-fs-sm); padding: 7px 12px; border-radius: var(--mv-r-sm); } .mv-btn--soft:hover { background: var(--mv-accent-soft-hov); } .mv-btn--ghost { background: transparent; color: var(--mv-text-2); border-color: var(--mv-border); font-weight: 500; font-size: var(--mv-fs-sm); padding: 7px 11px; border-radius: var(--mv-r-sm); } .mv-btn--ghost:hover { border-color: var(--mv-neg); color: var(--mv-neg); } /* Buton/aksiyon grubu (tablo satırının aksiyon kolonu vb.) */ .mv-btn-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; } /* ---- Rozetler ---- */ .mv-badge { display: inline-flex; align-items: center; font-family: var(--mv-font-mono); font-size: var(--mv-fs-xs); font-weight: 500; padding: 2px 8px; border-radius: 5px; } .mv-badge--green { background: var(--mv-badge-green-bg); color: var(--mv-badge-green-fg); } .mv-badge--blue { background: var(--mv-badge-blue-bg); color: var(--mv-badge-blue-fg); } .mv-badge--amber { background: var(--mv-badge-amber-bg); color: var(--mv-badge-amber-fg); } .mv-badge--red { background: var(--mv-badge-red-bg); color: var(--mv-badge-red-fg); } /* ---- Hekim tablosu ---- */ .mv-table { width: 100%; } .mv-table__head { display: grid; grid-template-columns: var(--mv-doctable-cols); gap: 12px; padding: 9px var(--mv-sp-6); background: var(--mv-surface-elev); border-top: 1px solid var(--mv-border); border-bottom: 1px solid var(--mv-border); font-family: var(--mv-font-mono); font-size: var(--mv-fs-2xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mv-text-3); } .mv-table__row { display: grid; grid-template-columns: var(--mv-doctable-cols); gap: 12px; align-items: center; padding: 13px var(--mv-sp-6); border-bottom: 1px solid var(--mv-border-soft); } /* Satırı saran link (isim/meta/rozet tek bir ise) düz metin gibi görünsün */ .mv-table__row a { color: inherit; text-decoration: none; } .mv-table__row a:hover .mv-doc__name { color: var(--mv-accent); } .mv-doc__name { font-size: var(--mv-fs-base); font-weight: 600; color: var(--mv-text); } .mv-doc__meta { font-size: var(--mv-fs-sm); color: var(--mv-text-2); margin-top: 2px; } .mv-doc__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } /* Metrik hücresi (değer + birim) */ .mv-metric { font-family: var(--mv-font-mono); text-align: right; } .mv-metric__val { font-size: 14px; font-weight: 600; color: var(--mv-text); } .mv-metric__unit { font-size: var(--mv-fs-2xs); color: var(--mv-text-3); } /* Skor */ .mv-score { font-family: var(--mv-font-mono); font-size: var(--mv-fs-score); font-weight: 600; } .mv-score--good { color: var(--mv-pos); } /* >= 80 */ .mv-score--mid { color: var(--mv-accent); } /* 70–79.9 */ .mv-score--low { color: var(--mv-neg); } /* < 70 */ /* Durum noktası */ .mv-status--on { color: var(--mv-pos); } .mv-status--off { color: var(--mv-text-3); } /* ---- Bar (çalışma dağılımı) ---- */ .mv-bar { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 12px; padding: 2.5px 0; } .mv-bar__label { font-size: var(--mv-fs-sm); color: var(--mv-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-bar a { color: inherit; text-decoration: none; } .mv-bar__track { height: 7px; background: var(--mv-track); border-radius: 2px; overflow: hidden; } .mv-bar__fill { height: 100%; background: var(--mv-accent-solid); border-radius: 2px; } .mv-bar__val { font-family: var(--mv-font-mono); font-size: 11.5px; text-align: right; color: var(--mv-text-2); } /* ---- Tema anahtarı · her sayfada köşe (medvis-theme.js ile) ---- */ .mv-theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; background: var(--mv-surface); color: var(--mv-text); border: 1px solid var(--mv-border); border-radius: var(--mv-r-pill); font-family: var(--mv-font-mono); font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: var(--mv-shadow-card); transition: border-color .15s ease, color .15s ease, transform .15s ease; } .mv-theme-toggle:hover { border-color: var(--mv-accent); color: var(--mv-accent); transform: translateY(-1px); } .mv-theme-toggle__icon { font-size: 15px; line-height: 1; } .mv-theme-toggle__label { letter-spacing: 0.02em; } /* ============================================================ FORM · SEKME · RADYO — Ekran 2 (içerik editörü) bileşenleri ============================================================ */ :root { --mv-label: oklch(0.40 0.02 268); --mv-input-bg: #ffffff; --mv-input-border: oklch(0.88 0.012 265); --mv-focus-ring: oklch(0.48 0.15 278 / 0.12); } [data-theme="dark"] { --mv-label: oklch(0.72 0.015 265); --mv-input-bg: oklch(0.225 0.015 265); --mv-input-border: oklch(0.40 0.02 265); --mv-focus-ring: oklch(0.72 0.15 278 / 0.28); } /* Sayfa başlığı */ .mv-page-head { background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-r-lg); padding: 22px 26px; } .mv-page-head__back { font-size: 12.5px; color: var(--mv-accent); text-decoration: none; font-weight: 500; } .mv-page-head__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 5px; color: var(--mv-text); } .mv-page-head__sub { font-size: 13px; color: var(--mv-text-2); } /* Birincil sekmeler */ .mv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mv-border); } .mv-tab { font-size: 13.5px; color: var(--mv-text-2); padding: 11px 16px; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .mv-tab:hover { color: var(--mv-text); } .mv-tab--active { font-weight: 600; color: var(--mv-accent); border-bottom-color: var(--mv-accent); } /* İkincil sekmeler (pill) */ .mv-subtabs { display: flex; flex-wrap: wrap; gap: 6px; } .mv-subtab { font-size: 12.5px; color: var(--mv-text-2); padding: 7px 13px; border-radius: var(--mv-r-pill); cursor: pointer; text-decoration: none; } .mv-subtab:hover { background: var(--mv-surface-elev); } .mv-subtab--active { font-weight: 600; color: var(--mv-accent); background: var(--mv-accent-soft); } /* Form alanları */ .mv-field { margin-bottom: 18px; } .mv-field__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .mv-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Ana alan geniş + yan alan dar (Konu / Kaç Post gibi) */ .mv-field-grid-main { display: grid; grid-template-columns: 1fr 140px; gap: 16px; } .mv-label { display: block; font-size: 12px; font-weight: 600; color: var(--mv-label); margin-bottom: 6px; } .mv-field__head .mv-label { margin-bottom: 0; } .mv-hint { font-size: 11px; font-weight: 400; color: var(--mv-text-3); margin-left: 6px; } .mv-input, .mv-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--mv-input-border); border-radius: var(--mv-r-md); font-size: 13.5px; font-family: var(--mv-font-sans); color: var(--mv-text); background: var(--mv-input-bg); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .mv-input:focus, .mv-textarea:focus { border-color: var(--mv-accent); box-shadow: 0 0 0 3px var(--mv-focus-ring); } .mv-input::placeholder, .mv-textarea::placeholder { color: var(--mv-text-3); } .mv-input--mono { font-family: var(--mv-font-mono); } .mv-textarea { resize: vertical; line-height: 1.55; min-height: 60px; } /* İç not bloğu (hekime gösterilmez) */ .mv-note { padding: 16px 18px; background: var(--mv-surface-elev); border: 1px dashed var(--mv-border); border-radius: var(--mv-r-lg); } .mv-tag-hidden { font-family: var(--mv-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mv-neg); margin-left: 6px; } /* Radyo kartları */ .mv-radio-group { display: flex; flex-wrap: wrap; gap: 12px; } .mv-radio-card { flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border: 1.5px solid var(--mv-border); background: var(--mv-surface); border-radius: var(--mv-r-lg); cursor: pointer; } .mv-radio-card:has(input:checked) { border-color: var(--mv-accent); background: var(--mv-accent-soft); } .mv-radio-card input[type="radio"] { accent-color: var(--mv-accent); width: 15px; height: 15px; margin-top: 2px; flex: none; } .mv-radio-card__title { font-size: 13.5px; font-weight: 600; color: var(--mv-text); } .mv-radio-card__desc { font-size: 12px; color: var(--mv-text-2); margin-top: 2px; } /* ============================================================ LİSTE AİLESİ — Videolar · Yazılar · Sosyal Medya ============================================================ */ :root { --mv-youtube: oklch(0.55 0.19 27); --mv-youtube-hov: oklch(0.49 0.19 27); --mv-badge-teal-bg: oklch(0.95 0.03 200); --mv-badge-teal-fg: oklch(0.45 0.09 220); } [data-theme="dark"] { --mv-youtube: oklch(0.58 0.19 27); --mv-youtube-hov: oklch(0.63 0.19 27); --mv-badge-teal-bg: oklch(0.34 0.05 210); --mv-badge-teal-fg: oklch(0.82 0.1 210); } /* Kart başlığı: başlık + alt yazı + sağ aksiyon */ .mv-card__titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .mv-card__sub { font-size: 12.5px; color: var(--mv-text-2); margin-top: 2px; } /* Buton: anlamsal varyantlar */ .mv-btn--danger { background: var(--mv-youtube); color: #fff; } .mv-btn--danger:hover { background: var(--mv-youtube-hov); } .mv-btn--success { background: var(--mv-pos); color: #fff; } .mv-btn--success:hover { filter: brightness(0.93); } /* Styled native