/* Verinette ortak görünüm (0017). Kırmızı sadece vurgu; yüksek = kırmızı ↑, düşük = mavi ↓. */
:root {
    --vn-zemin: #F5F6F8;
    --vn-panel: #FFFFFF;
    --vn-cizgi: #E4E7EC;
    --vn-cizgi-koyu: #CDD2DA;
    --vn-metin: #171A1F;
    --vn-metin-2: #3A404B;
    --vn-metin-3: #5A6170;
    --vn-vurgu: #C8102E;
    --vn-vurgu-koyu: #A50D26;
    --vn-vurgu-en-koyu: #7E0A1D;
    --vn-yuksek: #C8102E;
    --vn-dusuk: #1F5FBF;
    --vn-basari: #1E7B4A;
    --vn-uyari-zemin: #FDF1F2;
    --vn-bilgi-zemin: #EEF3FB;
    --vn-yaricap: 8px;
    --vn-menu-zemin: #262B33;
    --vn-menu-metin: #C9CED6;
    --vn-menu-soluk: #8C94A2;
    --vn-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--vn-font); color: var(--vn-metin); background: var(--vn-zemin); font-size: 15px; line-height: 1.45; }
a { color: var(--vn-vurgu-koyu); }
a:hover { color: var(--vn-vurgu-en-koyu); }
:focus-visible { outline: 2px solid var(--vn-vurgu); outline-offset: 1px; }

/* Form öğeleri */
.vn-alan { display: flex; flex-direction: column; gap: 6px; }
.vn-alan label, .vn-etiket { font-size: 13px; font-weight: 500; color: var(--vn-metin-2); }
.vn-girdi { height: 44px; width: 100%; border: 1px solid var(--vn-cizgi-koyu); border-radius: var(--vn-yaricap); padding: 0 14px; font: inherit; font-size: 15px; color: var(--vn-metin); background: var(--vn-panel); }
.vn-girdi:focus { outline: 2px solid var(--vn-vurgu); outline-offset: 1px; }
.vn-girdi.kod { letter-spacing: .4em; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.vn-onay { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--vn-metin-2); cursor: pointer; min-height: 24px; }
.vn-onay input { width: 18px; height: 18px; margin: 0; accent-color: var(--vn-vurgu); }
/* Düğme standardı: <button> ve düğme görünümlü <a> aynı görünür (ortalı, alt çizgisiz; bağlantı renkleri düğmeyi ezmez). */
.vn-dugme { height: 46px; border: 0; border-radius: var(--vn-yaricap); background: var(--vn-vurgu-en-koyu); color: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.vn-dugme:hover, a.vn-dugme:hover { background: var(--vn-vurgu-koyu); color: #fff; }
.vn-dugme.ikincil { background: #E8EBFF; color: var(--vn-metin-2); border: 1px solid #C9CFF2; }
.vn-dugme.ikincil:hover, a.vn-dugme.ikincil:hover { background: #D7DCFB; color: var(--vn-metin); border-color: #A9B3EA; }
.vn-mesaj { border-radius: var(--vn-yaricap); padding: 12px 14px; font-size: 14px; }
.vn-mesaj.hata { background: var(--vn-uyari-zemin); color: var(--vn-vurgu-en-koyu); border: 1px solid #F3C7CE; }
.vn-mesaj.bilgi { background: var(--vn-bilgi-zemin); color: #173F7A; border: 1px solid #CCDAF2; }
.vn-mesaj ul { margin: 4px 0 0; padding-left: 18px; }

/* Giriş sayfaları */
.vn-giris { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 32px; }
.vn-giris-kart { width: 100%; max-width: 420px; background: var(--vn-panel); border: 1px solid var(--vn-cizgi); border-radius: 12px; padding: 48px 40px 40px; display: flex; flex-direction: column; gap: 28px; }
.vn-giris-baslik { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.vn-giris-baslik img { width: 220px; height: auto; display: block; }
.vn-giris-baslik h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.vn-giris-baslik p { margin: 0; color: var(--vn-metin-3); font-size: 14px; }
.vn-giris form { display: flex; flex-direction: column; gap: 18px; }
.vn-giris-alt { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--vn-metin-3); flex-wrap: wrap; justify-content: center; }
.vn-giris-alt a, .vn-baglanti { text-decoration: none; font-size: 13px; font-weight: 500; }
.vn-satir { display: flex; justify-content: space-between; align-items: baseline; }
.vn-sifre { position: relative; display: flex; }
.vn-sifre .vn-girdi { padding-right: 48px; }
.vn-sifre button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 6px; color: var(--vn-metin-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vn-orta { text-align: center; }

@media (max-width: 480px) {
    .vn-giris { padding: 24px 16px; }
    .vn-giris-kart { padding: 32px 20px 24px; }
}

/* ---------- Uygulama kabuğu (yönetim / portal) ---------- */
.vn-kabuk { display: flex; min-height: 100vh; font-variant-numeric: tabular-nums; }
.vn-yan { flex: 0 0 248px; background: var(--vn-menu-zemin); padding: 0 12px 20px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-color: #4A515D transparent; }
/* Logo koyu yazılı: menünün üstünde üst çubukla aynı hizada beyaz şerit. */
.vn-yan .logo { display: flex; align-items: center; height: 64px; margin: 0 -12px; padding: 0 22px; background: var(--vn-panel); border-bottom: 1px solid var(--vn-cizgi); border-right: 1px solid var(--vn-cizgi); flex: none; }
.vn-yan .logo img { width: 140px; height: auto; display: block; }
.vn-menu, .vn-alt-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vn-alt-menu { padding: 2px 0 6px 10px; margin-left: 12px; border-left: 1px solid #3D4450; }
.vn-alt-menu a { height: 34px; font-size: 13.5px; }
.vn-menu-grup { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #E6E9EE; padding: 0 12px; height: 40px; margin-top: 4px; border-radius: 8px; text-align: left; }
.vn-menu-grup:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.vn-menu-grup[aria-expanded="true"] { color: #FFFFFF; background: rgba(255, 255, 255, .05); }
.vn-menu-grup .ok { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.vn-menu-grup[aria-expanded="true"] .ok { transform: rotate(45deg); }
.vn-menu a { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--vn-menu-metin); }
.vn-menu a:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.vn-menu a.active { background: rgba(255, 255, 255, .10); color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--vn-vurgu); }
.vn-menu :focus-visible { outline-color: #FFFFFF; }
/* Dar ekran: ☰ düğmesi ve çekmece (geniş ekranda gizli) */
.vn-menu-dugme { display: none; width: 40px; height: 40px; margin-right: auto; border: 1px solid var(--vn-cizgi-koyu); border-radius: 8px; background: var(--vn-panel); cursor: pointer; align-items: center; justify-content: center; }
.vn-menu-dugme span, .vn-menu-dugme span::before, .vn-menu-dugme span::after { display: block; width: 18px; height: 2px; background: var(--vn-metin-2); border-radius: 1px; position: relative; }
.vn-menu-dugme span::before, .vn-menu-dugme span::after { content: ""; position: absolute; left: 0; }
.vn-menu-dugme span::before { top: -6px; }
.vn-menu-dugme span::after { top: 6px; }
.vn-menu-anahtar { display: none; }
.vn-menu-perde { display: none; }
.vn-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vn-ust { height: 64px; background: var(--vn-panel); border-bottom: 1px solid var(--vn-cizgi); padding: 0 32px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.vn-kisi { display: flex; align-items: center; gap: 10px; }
.vn-kisi .avatar { width: 34px; height: 34px; border-radius: 50%; background: #F1F2F4; color: var(--vn-metin-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.vn-kisi .ad { font-size: 14px; font-weight: 600; }
.vn-kisi form { margin: 0; }
.vn-icerik { padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1600px; }
.vn-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vn-baslik h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.vn-baslik p { margin: 4px 0 0; color: var(--vn-metin-3); font-size: 14px; }
.vn-konum { font-size: 13px; color: var(--vn-metin-3); display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.vn-konum a { color: var(--vn-metin-3); text-decoration: none; }
.vn-araclar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.vn-panel { background: var(--vn-panel); border: 1px solid var(--vn-cizgi); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.vn-panel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.vn-panel-baslik { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vn-panel-baslik p, .vn-aciklama { margin: 2px 0 0; font-size: 13px; color: var(--vn-metin-3); }
.vn-iki-kolon { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.vn-iki-kolon > .ana { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vn-iki-kolon > .yan { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vn-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vn-tanim { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.vn-tanim dt { color: var(--vn-metin-3); }
.vn-tanim dd { margin: 0; overflow-wrap: anywhere; }

.vn-girdi.kucuk, select.vn-girdi.kucuk { height: 36px; font-size: 14px; padding: 0 10px; }
select.vn-girdi { padding: 0 10px; }
.vn-dugme.kucuk { height: 36px; font-size: 14px; padding: 0 14px; font-weight: 500; }
.vn-dugme.tehlike { background: var(--vn-panel); color: var(--vn-vurgu-koyu); border: 1px solid #F3C7CE; }
.vn-dugme.tehlike:hover { background: var(--vn-uyari-zemin); color: var(--vn-vurgu-en-koyu); border-color: #E89AA7; }
.vn-dugme:disabled:hover { background: var(--vn-vurgu-en-koyu); }
.vn-dugme.ikincil:disabled:hover { background: #E8EBFF; }
.vn-dugme.tehlike:disabled:hover { background: var(--vn-panel); }
/* Excel indirme/şablon düğmeleri: yeşil tablo simgesi */
.vn-dugme.excel::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%231D6F42'/%3E%3Cpath d='M4.4 4h2l1.6 2.7L9.6 4h2L9 8l2.6 4h-2L8 9.3 6.4 12h-2L7 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }
.vn-dugme:disabled { opacity: .5; cursor: not-allowed; }
.vn-dugme-ikon { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 6px; color: var(--vn-metin-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vn-dugme-ikon:hover { background: #F1F2F4; color: var(--vn-vurgu-koyu); }

.vn-cip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: #F1F2F4; font-size: 14px; font-weight: 500; }
.vn-cip.vurgu { background: #FBE8EB; color: var(--vn-vurgu-en-koyu); }
.vn-cip button { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 50%; color: var(--vn-metin-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vn-cip button:hover { background: #E4E7EC; }
.vn-cipler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vn-rozet { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #F1F2F4; color: var(--vn-metin-2); white-space: nowrap; }
.vn-rozet.yesil { background: #E7F4EC; color: #1E6B3A; }
.vn-rozet.kirmizi { background: #FBE8EB; color: var(--vn-vurgu-en-koyu); }
.vn-rozet.mavi { background: var(--vn-bilgi-zemin); color: #173F7A; }

.vn-tablo-kap { overflow-x: auto; border: 1px solid #EEF0F3; border-radius: 8px; background: var(--vn-panel); }
.vn-tablo-kap.kayan { max-height: 60vh; overflow-y: auto; }
.vn-tablo-kap.kayan thead th { position: sticky; top: 0; z-index: 2; }
.vn-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.35; }
.vn-tablo th { padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: #1E3F6B; text-align: left; background: #CBE3FD; border-bottom: 1px solid #B3D3F5; white-space: nowrap; }
/* Satır satır zemin (zebra); satıra verilen özel zemin (grup satırı vb.) bunu ezer. */
.vn-tablo tbody tr:nth-child(even) { background: #F7F9FC; }
.vn-tablo td { padding: 6px 12px; border-top: 1px solid #EEF0F3; vertical-align: middle; }
.vn-tablo tr.tikla { cursor: pointer; }
.vn-tablo tr.tikla:hover td { background: #EEF3FB; }
.vn-tablo .sag { text-align: right; }
.vn-tablo .soluk { color: var(--vn-metin-3); font-size: 12px; }
.vn-tablo .bos { text-align: center; color: var(--vn-metin-3); padding: 20px; }
/* Tablo içindeki rozet ve küçük girdiler satırı yükseltmesin */
.vn-tablo .vn-rozet { height: 20px; padding: 0 8px; font-size: 11.5px; }
/* Renksiz (nötr) rozetler tabloda açık pembe zeminde; renkli olanlar (yeşil/kırmızı/mavi) kendi rengini korur. */
.vn-tablo .vn-rozet:not(.yesil):not(.kirmizi):not(.mavi) { background: #FFF3F5; }
.vn-tablo .vn-girdi.kucuk, .vn-tablo select.vn-girdi.kucuk { height: 30px; font-size: 12.5px; }
.vn-tablo .vn-dugme.kucuk { height: 30px; font-size: 13px; padding: 0 10px; }
.vn-tablo .vn-dugme-ikon { width: 26px; height: 26px; }
.vn-sayfalama { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--vn-metin-3); }

.vn-yetki-grup { display: flex; flex-direction: column; gap: 8px; }
.vn-yetki-grup h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--vn-metin-3); text-transform: uppercase; letter-spacing: .05em; }
.vn-yetki { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #EEF0F3; border-radius: 8px; }
.vn-yetki input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--vn-vurgu); }
.vn-yetki .kod { font-size: 12px; color: var(--vn-metin-3); font-family: ui-monospace, Consolas, monospace; }
.vn-yetki.kapali { opacity: .55; }

.vn-bildirim { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 420px; box-shadow: 0 8px 24px rgba(23, 26, 31, .12); }
.vn-oneri { border: 1px solid var(--vn-cizgi); border-radius: 8px; background: var(--vn-panel); max-height: 240px; overflow-y: auto; }
.vn-oneri button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.vn-oneri button:hover { background: #F5F6F8; }

@media (max-width: 900px) {
    .vn-yan { position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; width: 280px; transform: translateX(-100%); transition: transform .2s ease; }
    .menu-acik .vn-yan, .vn-menu-anahtar:checked ~ .vn-yan { transform: none; box-shadow: 8px 0 32px rgba(0, 0, 0, .25); }
    .menu-acik .vn-menu-perde, .vn-menu-anahtar:checked ~ .vn-menu-perde { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(23, 26, 31, .45); }
    .vn-menu-dugme { display: inline-flex; }
    .vn-ust { justify-content: space-between; }
    .vn-icerik { padding: 20px 16px; }
    .vn-ust { padding: 0 16px; }
    .vn-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* Form gönderilirken bekleme göstergesi (verinette.js, data-bekle) */
.vn-bekliyor { cursor: progress; opacity: .85; }
.vn-bekliyor::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vn-don .7s linear infinite;
}
@keyframes vn-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vn-bekliyor::before { animation-duration: 2s; } }

/* Yönetim: sunucu bağlantısı koptuğunda Türkçe pencere (YenidenBaglanma.razor, yeniden-baglanma.js) */
.vn-baglanti-penceresi { border: 0; border-radius: var(--vn-yaricap); padding: 0; box-shadow: 0 12px 40px rgba(23, 26, 31, .25); max-width: 420px; }
.vn-baglanti-penceresi::backdrop { background: rgba(23, 26, 31, .35); }
.vn-baglanti-icerik { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 28px; text-align: center; color: var(--vn-metin); }
.vn-baglanti-icerik p { margin: 0; }
.vn-baglanti-donen { width: 28px; height: 28px; border: 3px solid var(--vn-cizgi); border-top-color: var(--vn-vurgu); border-radius: 50%; animation: vn-don .9s linear infinite; }
.components-reconnect-first-attempt-visible, .components-reconnect-repeated-attempt-visible, .components-reconnect-failed-visible,
.components-pause-visible, .components-resume-failed-visible, .components-rejoining-animation { display: none; }
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-rejoining-animation { display: none; }

/* Ekran üstü pencere (Pencere.razor) */
.vn-pencere-arka { position: fixed; inset: 0; z-index: 60; background: rgba(23, 26, 31, .45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.vn-pencere { width: 100%; max-width: 720px; max-height: 92vh; background: var(--vn-panel); border-radius: 12px; box-shadow: 0 16px 48px rgba(23, 26, 31, .25); display: flex; flex-direction: column; outline: none; }
.vn-pencere.genis { max-width: min(1440px, 96vw); }
.vn-pencere-baslik { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vn-cizgi); }
.vn-pencere-baslik h2 { margin: 0; font-size: 17px; font-weight: 600; }
.vn-pencere-govde { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.vn-pencere-alt { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--vn-cizgi); background: #FAFBFC; border-radius: 0 0 12px 12px; }
.vn-pencere-alt .sol { margin-right: auto; font-size: 14px; color: var(--vn-metin-2); }
@media (max-width: 480px) { .vn-pencere-arka { padding: 0; } .vn-pencere { max-height: 100vh; border-radius: 0; } }

/* Tetkik seçimi: işaretli liste ve istek formu */
.vn-secim-listesi { columns: 3 260px; column-gap: 20px; }
.vn-secim { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 14px; break-inside: avoid; cursor: pointer; }
.vn-secim:hover { background: #F5F6F8; }
.vn-secim input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--vn-vurgu); }
.vn-secim .ek { display: block; font-size: 12px; color: var(--vn-metin-3); }
.vn-secim.kapali { cursor: not-allowed; color: var(--vn-metin-3); }
.vn-secim.kapali:hover { background: transparent; }
.vn-secim.ekli { color: var(--vn-basari); }
.vn-form-sayfa { columns: 3 300px; column-gap: 16px; }
.vn-form-bolum { break-inside: avoid; margin: 0 0 16px; border: 1px solid var(--vn-cizgi-koyu); border-radius: 6px; overflow: hidden; }
.vn-form-bolum h3 { margin: 0; padding: 6px 10px; background: var(--vn-vurgu-koyu); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.vn-form-bolum .vn-secim { border-radius: 0; padding: 4px 10px; border-top: 1px solid #EEF0F3; }
.vn-form-bolum .vn-secim:nth-child(even) { background: #FDF4F5; }
.vn-form-bolum .vn-secim:hover { background: #F5F6F8; }
.vn-form-bolum .vn-secim .ek { display: inline; margin-left: 6px; }

.vn-izgara > .tam { grid-column: 1 / -1; }
textarea.vn-girdi.vn-cok-satir { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; line-height: 1.4; }

/* Kayıt detayı: üstte Kişi | Ödeme (etiketler solda, satırda iki alan), altında belge şeridi ve tam genişlik tetkikler */
.vn-kayit-ust, .vn-kayit-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vn-kayit-alt { grid-template-columns: minmax(0, 1fr) 280px; }
.vn-pdf-grup { display: flex; flex-direction: column; gap: 2px; }
.vn-pdf-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 1100px) { .vn-kayit-ust, .vn-kayit-alt { grid-template-columns: minmax(0, 1fr); } }
.vn-panel.sik { padding: 18px 20px; gap: 12px; }
.vn-satirli { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; border: 0; padding: 0; margin: 0; min-width: 0; }
.vn-satirli-ic { display: contents; }
.vn-satirli > label, .vn-satirli > .vn-etiket, .vn-satirli-ic > label, .vn-satirli-ic > .vn-etiket { font-size: 13px; font-weight: 500; color: var(--vn-metin-2); white-space: nowrap; }
.vn-satirli .tam { grid-column: 2 / -1; }
@media (max-width: 600px) { .vn-satirli { grid-template-columns: max-content minmax(0, 1fr); } .vn-satirli .tam { grid-column: 2; } }

/* Aranabilir açılır liste (AramaliSecim) */
.vn-acilir { position: relative; }
.vn-acilir-liste { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--vn-panel); border: 1px solid var(--vn-cizgi-koyu); border-radius: 8px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(23, 26, 31, .12); }
.vn-acilir-liste li { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.vn-acilir-liste li.aktif, .vn-acilir-liste li:hover { background: #F5F6F8; }
.vn-acilir-liste li.soluk { color: var(--vn-metin-3); }
.vn-acilir-liste li.bos { color: var(--vn-metin-3); cursor: default; font-size: 13px; }
.vn-acilir-liste li.bos:hover { background: transparent; }
.vn-acilir-liste .ek { margin-left: 6px; font-size: 12px; color: var(--vn-metin-3); }

/* Sayfa mesajı (başarı/hata) aşağı kaydırılmış sayfada da görünsün: içerik alanının üstüne yapışır. */
.vn-icerik > .vn-mesaj { position: sticky; top: 8px; z-index: 40; box-shadow: 0 6px 18px rgba(23, 26, 31, .10); }

/* Rapor özet kutusu (Maliyet / kar): toplamlar alt alta, net kar vurgulu */
.vn-ozet-kutu { max-width: 360px; padding: 16px 20px; gap: 10px; background: #FAFBFC; }
.vn-ozet-kutu dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14px; }
.vn-ozet-kutu dt { color: var(--vn-metin-2); }
.vn-ozet-kutu dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-ozet-kutu dd.eksi { color: var(--vn-vurgu-koyu); }
.vn-ozet-kutu dd.prim { color: #A15C07; }
.vn-ozet-kutu .net { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--vn-cizgi-koyu); padding-top: 10px; }
.vn-ozet-kutu .net span { font-weight: 600; }
.vn-ozet-kutu .net strong { font-size: 20px; color: var(--vn-basari); font-variant-numeric: tabular-nums; }
.vn-ozet-kutu .net.zarar strong { color: var(--vn-vurgu); }
/* Tablo içindeki tıklanabilir sayı (ör. kişi sayısı → liste) */
.vn-sayi-dugme { border: 0; background: transparent; padding: 0; font: inherit; color: var(--vn-vurgu-koyu); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vn-sayi-dugme:hover { color: var(--vn-vurgu-en-koyu); }

/* Çok dar ekranda üst çubukta sadece avatar ve çıkış */
@media (max-width: 600px) {
    .vn-kisi .ad, .vn-kisi .vn-baglanti { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vn-yan { transition: none; } }

/* Hata penceresi (Mesajlar, yönetimde): ekranın ortasında, "Tamam" ile kapanır */
dialog.vn-hata-penceresi[open] { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(23, 26, 31, .45); display: flex; align-items: center; justify-content: center; }
.vn-hata-kutu { width: 100%; max-width: 460px; background: var(--vn-panel); border-radius: 12px; border-top: 4px solid var(--vn-vurgu); box-shadow: 0 16px 48px rgba(23, 26, 31, .25); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.vn-hata-kutu h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--vn-vurgu-en-koyu); }
.vn-hata-metin { font-size: 15px; color: var(--vn-metin); overflow-wrap: anywhere; }
.vn-hata-metin ul { margin: 0; padding-left: 18px; }
.vn-hata-kutu form { margin: 0; display: flex; justify-content: flex-end; }

/* Portal panosu (firma doktoru) */
.vn-sekmeler { display: inline-flex; border: 1px solid #C9CFF2; border-radius: 8px; overflow: hidden; background: #E8EBFF; }
.vn-sekmeler a, .vn-sekmeler button { border: 0; background: transparent; padding: 0 14px; height: 34px; display: inline-flex; align-items: center; font: inherit; font-size: 13.5px; color: var(--vn-metin-2); text-decoration: none; cursor: pointer; }
.vn-sekmeler a + a { border-left: 1px solid #C9CFF2; }
.vn-sekmeler a:hover { background: #D7DCFB; color: var(--vn-metin); }
.vn-sekmeler a.secili { background: var(--vn-vurgu-en-koyu); color: #fff; font-weight: 600; }
.vn-kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vn-kpi { background: var(--vn-panel); border: 1px solid var(--vn-cizgi); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.vn-kpi span { font-size: 13px; color: var(--vn-metin-3); }
.vn-kpi strong { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vn-kpi small { font-size: 12.5px; color: var(--vn-metin-3); }
.vn-kpi.dikkat { border-color: #F3C7CE; background: #FFF6F7; }
.vn-kpi.dikkat strong { color: var(--vn-vurgu-koyu); }
.vn-pano-iki { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .vn-pano-iki { grid-template-columns: minmax(0, 1fr); } }
.vn-alt-baslik { margin: 0; font-size: 13px; font-weight: 600; color: var(--vn-metin-2); }
.vn-aylik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; padding-top: 8px; }
.vn-aylik .ay { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.vn-aylik .sutun { width: 70%; max-width: 34px; background: #B9CDEB; border-radius: 4px 4px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 2px; }
.vn-aylik .disi { background: var(--vn-vurgu); width: 100%; }
.vn-aylik .sayi { font-size: 11.5px; color: var(--vn-metin-3); font-variant-numeric: tabular-nums; }
.vn-aylik .ad { font-size: 11.5px; color: var(--vn-metin-3); white-space: nowrap; }
.vn-lejant { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-left: 8px; }
.vn-lejant.kayit { background: #B9CDEB; }
.vn-lejant.disi { background: var(--vn-vurgu); }
.vn-oran { position: relative; height: 18px; background: #EEF1F6; border-radius: 4px; overflow: hidden; min-width: 80px; }
.vn-oran > div { height: 100%; background: #F2A3AF; }
.vn-oran > span { position: absolute; right: 6px; top: 0; line-height: 18px; font-size: 11.5px; color: var(--vn-metin-2); font-variant-numeric: tabular-nums; }
.vn-cubuklar { display: flex; flex-direction: column; gap: 6px; }
.vn-cubuklar .satir { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.vn-cubuklar .vn-oran > div { background: #B9CDEB; }
/* Kişi geçmişi: eğilim kartları */
.vn-egilimler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.vn-egilim { border: 1px solid var(--vn-cizgi); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.vn-egilim .ad { font-weight: 600; font-size: 13px; }
.vn-egilim .deger { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vn-egilim .deger.yuksek { color: var(--vn-yuksek); }
.vn-egilim .deger.dusuk { color: var(--vn-dusuk); }
.vn-egilim .soluk { color: var(--vn-metin-3); }
.vn-cizgi-grafik { width: 100%; height: 32px; color: #5B7FB8; }
.vn-cizgi-grafik circle { fill: #5B7FB8; }
.vn-cizgi-grafik circle.yuksek { fill: var(--vn-yuksek); }
.vn-cizgi-grafik circle.dusuk { fill: var(--vn-dusuk); }

/* Sonuç PDF'i simgesi (tablolarda "PDF" yazısı yerine) */
.vn-pdf-ikon { display: inline-flex; width: 22px; height: 22px; border-radius: 4px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z' fill='%23fff' stroke='%23C8102E' stroke-width='1.4'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%23C8102E' stroke-width='1.4'/%3E%3Crect x='3' y='12' width='14' height='7' rx='1.5' fill='%23C8102E'/%3E%3Ctext x='10' y='17.6' font-family='Arial,sans-serif' font-size='5.2' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E") no-repeat center / 20px 20px; }
.vn-pdf-ikon:hover { background-color: var(--vn-uyari-zemin); }
/* Bağlantılı sayfalama (sunucuda çizilen sayfalar) */
.vn-sayfa-dugmeleri { display: inline-flex; gap: 4px; align-items: center; }
.vn-sayfa-dugmeleri a, .vn-sayfa-dugmeleri span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; text-decoration: none; color: var(--vn-metin-2); border: 1px solid transparent; }
.vn-sayfa-dugmeleri a { background: #E8EBFF; border-color: #C9CFF2; }
.vn-sayfa-dugmeleri a:hover { background: #D7DCFB; color: var(--vn-metin); }
.vn-sayfa-dugmeleri .secili { background: var(--vn-vurgu-en-koyu); color: #fff; font-weight: 600; }
.vn-sayfa-dugmeleri .kapali { color: var(--vn-cizgi-koyu); }
.vn-sayfa-dugmeleri .bosluk { min-width: 16px; padding: 0; }

/* Yatay kaydırılan tabloda sabit ilk sütun: altından geçen hücreler görünmesin (saydam değil) */
.vn-tablo .vn-yapiskan { position: sticky; left: 0; z-index: 1; background: var(--vn-panel); box-shadow: 1px 0 0 var(--vn-cizgi); }
.vn-tablo tbody tr:nth-child(even) .vn-yapiskan { background: #F7F9FC; }
.vn-tablo thead .vn-yapiskan { background: #CBE3FD; z-index: 3; }
/* Kişi geçmişi tablosu: satırlar biraz daha ferah */
.vn-gecmis-tablo td { padding-top: 9px; padding-bottom: 9px; }
@media (max-width: 600px) {
    .vn-aylik { gap: 3px; height: 150px; }
    .vn-aylik .sayi { display: none; }
    .vn-aylik .ad { font-size: 10px; }
    .vn-kpi strong { font-size: 22px; }
    .vn-cubuklar .satir { grid-template-columns: 90px minmax(0, 1fr); }
    .vn-baslik .vn-araclar { width: 100%; }
}

/* Sıralanabilir tablo başlığı */
.vn-tablo th .vn-siralama { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.vn-tablo th .vn-siralama:hover { text-decoration: underline; text-underline-offset: 3px; }
.vn-tablo th .vn-siralama.etkin { color: var(--vn-vurgu-en-koyu); }
.vn-egilim.dikkat { border-color: #F3C7CE; background: #FFF6F7; }

/* Satırın tamamını tıklanabilir yapan bağlantı (ör. yeni sekmede kayıt): bağlantı satırı kaplar */
.vn-tablo tr.tikla { position: relative; }
.vn-satir-baglanti::after { content: ""; position: absolute; inset: 0; }

/* Teklif başlığındaki versiyon listesi (sağda, düğmelerin yanında). */
.vn-versiyonlar { display: grid; gap: 2px; min-width: 230px; max-height: 132px; overflow-y: auto; padding: 6px 10px; border: 1px solid var(--vn-cizgi); border-radius: 8px; background: var(--vn-panel); font-size: 12.5px; }
.vn-versiyonlar > div { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.vn-versiyonlar > div .vn-pdf-ikon { margin-left: auto; }
.vn-versiyonlar > div.guncel { font-weight: 500; }
.vn-versiyon-baglanti { background: none; border: 0; padding: 0; cursor: pointer; color: var(--vn-vurgu); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Simge düğmeleri (küçük düğme yüksekliğinde): PDF aç, sil. */
.vn-ikon-dugme { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--vn-cizgi); border-radius: var(--vn-yaricap); background: var(--vn-panel) no-repeat center / 22px 22px; cursor: pointer; text-decoration: none; }
.vn-ikon-dugme:hover { background-color: var(--vn-uyari-zemin); border-color: #F2C2CA; }
.vn-ikon-dugme:disabled { opacity: .5; cursor: default; }
.vn-ikon-dugme.pdf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z' fill='%23fff' stroke='%23C8102E' stroke-width='1.4'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%23C8102E' stroke-width='1.4'/%3E%3Crect x='3' y='12' width='14' height='7' rx='1.5' fill='%23C8102E'/%3E%3Ctext x='10' y='17.6' font-family='Arial,sans-serif' font-size='5.2' font-weight='700' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E"); }
.vn-ikon-dugme.sil { background-size: 18px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A50D26' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); }