:root {
--yk-vp-ink: #0B2545;
--yk-vp-ink-soft: #364B6B;
--yk-vp-muted: #64748B;
--yk-vp-line: #D6E0EE;
--yk-vp-line-soft: #E6ECF4;
--yk-vp-bg: #F4F7FB;
--yk-vp-card: #FFFFFF;
--yk-vp-accent: #1E3A8A;
--yk-vp-accent-soft: #3B82F6;
--yk-vp-success: #047857;
--yk-vp-warn: #B45309;
--yk-vp-danger: #B91C1C;
--yk-vp-shadow-sm: 0 1px 0 rgba(11,37,69,.06), 0 1px 3px rgba(11,37,69,.05);
--yk-vp-shadow-md: 0 1px 0 rgba(11,37,69,.05), 0 8px 24px rgba(11,37,69,.07);
--yk-vp-radius: 10px;
--yk-vp-radius-lg: 14px;
}
body, .main-content, .main-container {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Klinik veri tablolari: tabular-nums + zebra + sticky header */
.card .table, .yk-card .table, .table-clinical, table.table {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
table.table thead th {
background: linear-gradient(180deg,#F1F6FC 0,#E8F0F9 100%) !important;
color: var(--yk-vp-ink) !important;
font-weight: 700 !important;
font-size: .82rem !important;
letter-spacing: .04em;
text-transform: uppercase;
border-bottom: 1px solid var(--yk-vp-line) !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
table.table tbody tr {
border-color: var(--yk-vp-line-soft) !important;
}
table.table tbody tr:nth-child(odd) td {
background: rgba(244,247,251,.55);
}
table.table tbody tr:hover td {
background: rgba(59,130,246,.07) !important;
}
table.table td, table.table th {
vertical-align: middle !important;
}
/* Klinik kartlar: ince border, baslik bar, derinlik */
.card, .yk-card {
border-radius: var(--yk-vp-radius-lg) !important;
border: 1px solid var(--yk-vp-line) !important;
box-shadow: var(--yk-vp-shadow-sm) !important;
}
.card .card-header,
.card-header.bg-light,
.card-header.bg-white {
background: linear-gradient(180deg,#F8FBFF 0,#EEF4FB 100%) !important;
border-bottom: 1px solid var(--yk-vp-line) !important;
color: var(--yk-vp-ink) !important;
font-weight: 700 !important;
letter-spacing: .015em;
}
.card .card-header h1, .card .card-header h2, .card .card-header h3,
.card .card-header h4, .card .card-header h5, .card .card-header h6 {
color: var(--yk-vp-ink) !important;
margin-bottom: 0 !important;
}
/* Form alanlari: klinik formlar tigt */
.form-label, label.form-label {
font-size: .82rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--yk-vp-ink-soft);
margin-bottom: 4px !important;
}
.form-control, .form-select {
border-color: var(--yk-vp-line) !important;
font-variant-numeric: tabular-nums;
}
.form-control:focus, .form-select:focus {
border-color: var(--yk-vp-accent-soft) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
.input-group-text {
background: #F1F6FC !important;
color: var(--yk-vp-ink-soft) !important;
border-color: var(--yk-vp-line) !important;
font-weight: 600;
}
/* Klinik degerler: vurgulu numara/birim */
.yk-vp-value { display: inline-flex; align-items: baseline; gap: 4px; }
.yk-vp-value .num { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--yk-vp-ink); line-height: 1; }
.yk-vp-value .unit { font-size: .75rem; font-weight: 600; color: var(--yk-vp-muted); text-transform: lowercase; letter-spacing: .02em; }
.yk-vp-value.is-warn .num { color: var(--yk-vp-warn); }
.yk-vp-value.is-high .num { color: var(--yk-vp-danger); }
.yk-vp-value.is-low .num { color: var(--yk-vp-warn); }
.yk-vp-value.is-ok .num { color: var(--yk-vp-success); }
/* Status pills: ViewPoint stili */
.badge.bg-success, .badge.bg-success-subtle {
background: #DCFCE7 !important; color: #166534 !important; border: 1px solid #BBF7D0 !important;
font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase;
font-size: .72rem !important; padding: 4px 9px !important;
}
.badge.bg-warning, .badge.bg-warning-subtle {
background: #FEF3C7 !important; color: #92400E !important; border: 1px solid #FDE68A !important;
font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase;
font-size: .72rem !important; padding: 4px 9px !important;
}
.badge.bg-danger, .badge.bg-danger-subtle {
background: #FEE2E2 !important; color: #991B1B !important; border: 1px solid #FECACA !important;
font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase;
font-size: .72rem !important; padding: 4px 9px !important;
}
.badge.bg-info, .badge.bg-primary, .badge.bg-info-subtle, .badge.bg-primary-subtle {
background: #DBEAFE !important; color: #1E3A8A !important; border: 1px solid #BFDBFE !important;
font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase;
font-size: .72rem !important; padding: 4px 9px !important;
}
/* Hasta header: kompakt, klinik info-bar */
.patient-header, .yk-patient-header, .yk-rx-patient-block {
background: linear-gradient(180deg,#F8FBFF 0,#EFF4FB 100%) !important;
border-radius: var(--yk-vp-radius-lg) !important;
border: 1px solid var(--yk-vp-line) !important;
box-shadow: var(--yk-vp-shadow-sm) !important;
}
.patient-header h1, .patient-header h2, .yk-patient-header h1, .yk-patient-header h2 {
color: var(--yk-vp-ink) !important;
font-weight: 700 !important;
letter-spacing: -.01em;
}
.patient-header .small, .patient-header .text-muted,
.yk-patient-header .small, .yk-patient-header .text-muted {
color: var(--yk-vp-muted) !important;
font-weight: 500;
}
/* Buton sistemleri: klinik primer */
.btn { font-weight: 600 !important; letter-spacing: .015em; }
.btn-primary {
background: linear-gradient(180deg,#2563EB 0,#1E3A8A 100%) !important;
border-color: #1E3A8A !important;
}
.btn-primary:hover {
background: linear-gradient(180deg,#1D4ED8 0,#1E40AF 100%) !important;
border-color: #1E3A8A !important;
}
.btn-outline-primary {
border-color: var(--yk-vp-accent) !important;
color: var(--yk-vp-accent) !important;
}
.btn-outline-primary:hover {
background: var(--yk-vp-accent) !important;
color: #fff !important;
}
.btn-success {
background: linear-gradient(180deg,#059669 0,#047857 100%) !important;
border-color: #047857 !important;
}
/* Tab/nav: klinik */
.nav-tabs .nav-link {
font-weight: 600 !important;
color: var(--yk-vp-muted) !important;
border-radius: var(--yk-vp-radius) var(--yk-vp-radius) 0 0 !important;
}
.nav-tabs .nav-link.active {
color: var(--yk-vp-accent) !important;
border-bottom: 2px solid var(--yk-vp-accent) !important;
background: #FFFFFF !important;
}
/* Alerts klinik */
.alert { border-radius: var(--yk-vp-radius-lg) !important; border-width: 1px !important; font-weight: 500; }
.alert-success { background: #ECFDF5 !important; color: #064E3B !important; border-color: #A7F3D0 !important; }
.alert-warning { background: #FFFBEB !important; color: #78350F !important; border-color: #FDE68A !important; }
.alert-danger { background: #FEF2F2 !important; color: #7F1D1D !important; border-color: #FECACA !important; }
.alert-info { background: #EFF6FF !important; color: #1E3A8A !important; border-color: #BFDBFE !important; }
/* Modal/dropdown */
.modal-content {
border-radius: 18px !important;
border: 1px solid var(--yk-vp-line) !important;
box-shadow: var(--yk-vp-shadow-md) !important;
}
.modal-header {
background: linear-gradient(180deg,#F8FBFF 0,#EEF4FB 100%) !important;
border-bottom: 1px solid var(--yk-vp-line) !important;
}
.modal-header .modal-title {
color: var(--yk-vp-ink) !important;
font-weight: 700 !important;
}
.dropdown-menu {
border-radius: var(--yk-vp-radius-lg) !important;
border: 1px solid var(--yk-vp-line) !important;
box-shadow: var(--yk-vp-shadow-md) !important;
}
.dropdown-item:hover {
background: rgba(59,130,246,.08) !important;
color: var(--yk-vp-accent) !important;
}
/* USG/lab istatistik kartlari */
.yk-vp-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.yk-vp-stat {
background: linear-gradient(180deg,#FFFFFF 0,#F6FAFE 100%);
border: 1px solid var(--yk-vp-line);
border-radius: var(--yk-vp-radius);
padding: 10px 12px;
box-shadow: var(--yk-vp-shadow-sm);
}
.yk-vp-stat .label {
font-size: .68rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--yk-vp-muted); margin-bottom: 4px;
}
.yk-vp-stat .num {
font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--yk-vp-ink); line-height: 1.1;
}
.yk-vp-stat .unit { font-size: .72rem; font-weight: 600; color: var(--yk-vp-muted); margin-left: 3px; }
.yk-vp-stat .delta { font-size: .72rem; font-weight: 600; color: var(--yk-vp-success); }
.yk-vp-stat .delta.is-down { color: var(--yk-vp-danger); }
/* Print: A4 klinik rapor */
@media print {
body, .main-content, .main-container { background: #fff !important; }
table.table thead th { background: #F1F6FC !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.card, .yk-card { break-inside: avoid; box-shadow: none !important; }
.no-print, .yk-no-print { display: none !important; }
}
/* D122: Mobil-first iyilestirme — touch target, kart layout, sticky alt actions */
@media (max-width: 768px) {
/* Touch target minimum 44px (Apple HIG / WCAG) */
.btn, .form-control, .form-select, .nav-link, .dropdown-item,
.list-group-item, a.sidebar-link {
min-height: 44px;
font-size: 15px !important;
}
.btn-sm { min-height: 36px; }
/* Container padding mobil daha kompakt */
.container, .container-fluid, .main-container {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Tablo -> kart donusumu (sade) */
.table-responsive table.table { font-size: 13.5px; }
.table-responsive table.table td, .table-responsive table.table th {
padding: 8px 6px !important;
}
/* Mobil card icin daha cesur shadow */
.card, .yk-card { margin-bottom: 12px !important; }
/* Form input'lar mobilde daha buyuk */
input.form-control, select.form-select, textarea.form-control {
font-size: 16px !important;  /* iOS zoom-on-focus engelle */
padding: 10px 12px !important;
}
/* Modal mobilde tam yukseklik */
.modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; }
.modal-fullscreen-md-down .modal-content { border-radius: 0 !important; }
/* Sticky bottom action bar (sayfa bazli kullanim) */
.yk-mobile-action-bar {
position: sticky; bottom: 0;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--yk-vp-line);
padding: 8px 12px;
display: flex; gap: 8px; align-items: center;
box-shadow: 0 -8px 22px rgba(11,37,69,.07);
z-index: 50;
}
.yk-mobile-action-bar .btn { flex: 1; min-height: 48px; font-weight: 700; }
/* Mobil hasta listesi: sadelestirilmis kart */
.yk-patient-card.yk-patient-card {
padding: 14px !important;
}
.yk-patient-card .yk-patient-name {
font-size: 17px !important;
}
/* Sidebar mobilde tam ekran offcanvas zaten — etkin secime kontrast */
.sidebar.show .sidebar-link.active {
background: var(--yk-vp-accent) !important;
color: #fff !important;
}
/* Vurgulu klinik degerler (USG/lab) mobilde okunakli */
.yk-vp-stat .num, .yk-vp-value .num { font-size: 1.55rem; }
.yk-vp-stat .label, .yk-vp-value .unit { font-size: .72rem; }
/* Tap-to-focus icin dropdown / select daha net */
.dropdown-menu { min-width: 220px; max-width: calc(100vw - 24px); }
/* Yatay kaydirilabilir tab cubuklari */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar { height: 0; }
.nav-tabs .nav-link { white-space: nowrap; }
}
/* PWA / Safe area inset (iPhone notch) */
@supports (padding: max(0px)) {
body { padding-bottom: env(safe-area-inset-bottom); }
.yk-mobile-action-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
/* D200: iPhone/Android browser polish - desktop layout stays intact. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
:root {
--yk-phone-bottom-nav-h: 76px;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background: var(--bg, #F4F7FB) !important;
padding-bottom: calc(var(--yk-phone-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
touch-action: manipulation;
}
.top-header {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
box-sizing: border-box !important;
height: auto !important;
min-height: 0 !important;
margin: 8px 10px 10px !important;
padding: max(8px, env(safe-area-inset-top)) 10px 10px !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center !important;
gap: 8px !important;
border-radius: 18px !important;
z-index: 1200 !important;
}
.hamburger-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
border-radius: 14px !important;
}
.top-header-title {
display: block !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 2px !important;
}
.top-header-title span,
.top-header-badges {
display: none !important;
}
.top-header-title strong {
display: block !important;
max-width: 100% !important;
font-size: 15px !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.search-box {
grid-column: 1 / -1;
width: 100%;
max-width: none !important;
min-width: 0;
display: block !important;
}
.search-box input {
height: 46px !important;
min-height: 46px !important;
font-size: 16px !important;
border-radius: 14px !important;
padding-left: 42px !important;
padding-right: 14px !important;
}
.search-box::after {
display: none !important;
}
.header-actions {
justify-self: end;
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin-left: 0 !important;
width: 94px !important;
min-width: 94px !important;
max-width: 94px !important;
overflow: visible !important;
scrollbar-width: none;
}
.header-actions::-webkit-scrollbar {
display: none;
}
.header-actions .ai-status-badge,
.header-actions .header-icon-btn[title="Dogum Geri Sayim"],
.header-actions .header-icon-btn[title="Bildirimler"],
.profile-copy {
display: none !important;
}
.header-icon-btn,
.theme-picker-btn,
.profile-chip,
.yk-mode-single {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.profile-chip .profile-avatar {
width: 34px !important;
height: 34px !important;
}
.header-actions > .profile-chip,
.header-actions > a[href="/cikis"] {
display: none !important;
}
.yk-mode-accordion,
.theme-menu-wrap {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
flex: 0 0 44px !important;
}
.yk-mode-single-main > span,
.yk-mode-single-caret {
display: none !important;
}
.theme-panel,
.yk-mode-window {
position: fixed !important;
left: 10px !important;
right: 10px !important;
top: calc(62px + env(safe-area-inset-top)) !important;
width: auto !important;
max-width: none !important;
max-height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
overflow: auto !important;
border-radius: 18px !important;
z-index: 2147482600 !important;
}
.sidebar,
.sidebar.use-modern-nav {
width: min(88vw, 340px) !important;
max-width: min(88vw, 340px) !important;
transform: translateX(-110%) !important;
z-index: 1800 !important;
border-radius: 0 22px 22px 0 !important;
padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}
.sidebar.show,
.sidebar.use-modern-nav.show {
transform: translateX(0) !important;
}
.sidebar-overlay.show {
display: block !important;
position: fixed !important;
inset: 0 !important;
background: rgba(15,23,42,.45) !important;
z-index: 1700 !important;
pointer-events: auto !important;
}
.main-content {
margin-left: 0 !important;
padding-top: 0 !important;
min-width: 0 !important;
}
.main-container {
width: 100% !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 8px 10px calc(96px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden;
}
.active-patient-banner {
/* D250 2026-05-11: touch/mobil modda da fixed bottom kalsin (eski: relative inflow). */
position: fixed !important;
bottom: 0 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
padding: 8px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
.active-patient-banner .apb-left,
.active-patient-banner .apb-right {
width: 100%;
min-width: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.active-patient-banner .apb-name,
.active-patient-banner .apb-source {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card,
.yk-card,
.patient-card,
.tool-card,
.quick-primary,
.quick-secondary,
.tools-collapse,
.stat-mini,
.yk-friendly-banner {
border-radius: 12px !important;
box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 8px 22px rgba(15,23,42,.07) !important;
}
.card-header,
.card-body,
.card-footer {
padding: 12px !important;
}
.patient-header {
padding: 14px !important;
border-radius: 16px !important;
margin-bottom: 12px !important;
}
.patient-header h1,
.main-container h1 {
font-size: clamp(22px, 6vw, 30px) !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
}
.main-container h2 {
font-size: clamp(18px, 5vw, 24px) !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
}
.patient-meta,
.quick-actions,
.tools-grid,
.yk-friendly-banner-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.tool-card,
.quick-primary,
.quick-secondary {
min-height: 0 !important;
padding: 12px !important;
}
.row {
--bs-gutter-x: .75rem;
--bs-gutter-y: .75rem;
}
.row > [class*="col-md-"],
.row > [class*="col-lg-"],
.row > [class*="col-xl-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.btn,
button,
input,
select,
textarea,
.form-control,
.form-select,
.nav-link,
.dropdown-item {
font-size: 16px !important;
}
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item {
min-height: 44px !important;
border-radius: 10px !important;
}
textarea.form-control {
min-height: 118px !important;
}
.btn-group,
.nav-tabs,
.pdf-stage-toolbar,
.pdf-edit-toolbar,
.yk-vc-actions,
.yk-protocol-actions {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.btn-group::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar,
.pdf-stage-toolbar::-webkit-scrollbar,
.pdf-edit-toolbar::-webkit-scrollbar {
display: none;
}
.nav-tabs .nav-link,
.btn-group .btn {
white-space: nowrap !important;
}
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
.table-responsive table.table {
min-width: 640px;
}
.main-container > table.table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.table th,
table.table td {
font-size: 13px !important;
padding: 8px 7px !important;
vertical-align: middle !important;
}
.modal-dialog {
margin: 8px !important;
max-width: calc(100vw - 16px) !important;
}
.modal-content,
.dropdown-menu {
border-radius: 14px !important;
}
.dropdown-menu {
max-width: calc(100vw - 20px) !important;
}
.pdf-topbar,
.pdf-tools,
.pdf-main-layout,
.yk-pdf-editor-grid,
.yk-pdf-output-strip {
grid-template-columns: 1fr !important;
}
.pdf-page-column,
.pdf-stage-shell {
padding: 10px !important;
min-width: 0 !important;
overflow-x: auto !important;
}
.pdf-page-stage {
width: min(100%, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
margin: 0 auto !important;
}
.pdf-image-sidebar,
.pdf-project-panel {
position: relative !important;
width: 100% !important;
max-height: none !important;
}
.mobile-bottom-nav,
.mobile-bottom-nav.d-md-none {
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: 4px !important;
left: 8px !important;
right: 8px !important;
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
bottom: max(8px, env(safe-area-inset-bottom)) !important;
padding: 6px !important;
border-radius: 18px !important;
z-index: 1600 !important;
}
.mobile-bottom-nav a {
flex: 1 1 0 !important;
width: 20% !important;
max-width: 20% !important;
min-width: 0 !important;
min-height: 58px !important;
padding: 7px 2px !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
}
.mobile-bottom-nav span.icon,
.mobile-bottom-nav i {
font-size: 18px !important;
line-height: 1 !important;
}
.mobile-bottom-nav a > span:not(.icon) {
font-size: 10.5px !important;
line-height: 1.05 !important;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#ykMicReady,
#ykSpeakTest,
#ykSmartGuideToggle,
#ykSmartGuidePanel,
#ykShortcutControl,
#ykDictateDock {
display: none !important;
}
}
@media (min-width: 821px) {
.mobile-bottom-nav {
display: none !important;
}
.main-container {
width: min(100%, 1480px);
}
}
/* D122: Klinik konsult kart bilesenleri (perinatoloji odakli) */
.yk-vp-pcard {
border-left: 4px solid var(--yk-vp-accent);
background: linear-gradient(180deg,#FFFFFF 0,#F7FBFF 100%);
border-radius: var(--yk-vp-radius);
padding: 12px 14px;
box-shadow: var(--yk-vp-shadow-sm);
margin-bottom: 10px;
}
.yk-vp-pcard.is-warn { border-left-color: var(--yk-vp-warn); }
.yk-vp-pcard.is-danger { border-left-color: var(--yk-vp-danger); }
.yk-vp-pcard.is-ok { border-left-color: var(--yk-vp-success); }
.yk-vp-pcard .pcard-title {
font-weight: 700; color: var(--yk-vp-ink);
font-size: .92rem; letter-spacing: .02em;
margin-bottom: 4px;
}
.yk-vp-pcard .pcard-body {
color: var(--yk-vp-ink-soft); font-size: .88rem; line-height: 1.45;
}
.yk-vp-pcard .pcard-meta {
color: var(--yk-vp-muted); font-size: .76rem; margin-top: 6px;
font-variant-numeric: tabular-nums;
}
/* Klinik percentile cubugu (fetal biometri) */
.yk-vp-percentile {
position: relative; height: 8px; background: #E6ECF4;
border-radius: 999px; overflow: hidden; margin-top: 4px;
}
.yk-vp-percentile-fill {
position: absolute; top: 0; left: 0; bottom: 0;
background: linear-gradient(90deg,#3B82F6,#1E3A8A);
border-radius: 999px; transition: width .3s ease;
}
.yk-vp-percentile.is-low .yk-vp-percentile-fill { background: linear-gradient(90deg,#F59E0B,#D97706); }
.yk-vp-percentile.is-high .yk-vp-percentile-fill { background: linear-gradient(90deg,#EF4444,#B91C1C); }
.yk-vp-percentile-mark {
position: absolute; top: -3px; width: 2px; height: 14px;
background: var(--yk-vp-ink); opacity: .35;
}