/* BAGA web — değerler WPF XAML'inden: MainWindow (başlık #2f4558, menü #2d3436, seçim #00b894,
   zemin #f5f7fa→#c3cfe2), NewProposalView (ürün kartı), VehicleInsuranceView (sihirbaz),
   CompanyPanelView (#f5f6fa araç çubuğu), CompanyPickerView (koyu seçici), FormField. */
:root {
  --titlebar: #2f4558;
  --menu: #2d3436;
  --menu-hover: #3d4446;
  --menu-text: #dfe6e9;
  --menu-icon: #b2bec3;
  --select: #00b894;
  --ink: #333333;
  --ink-2: #263238;
  --muted: #636e72;
  --soft: #b2bec3;
  --line: #dddddd;
  --card-line: #dce3e8;
  --accent: #5e35b1;
  --ok: #2e7d32;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --err: #d64545;
  --err-soft: #fee2e2;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
/* display:grid/flex verilen öğelerde hidden özniteliği ezilmesin (sekmeler, sihirbaz adımları). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--ink); background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) fixed; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.empty { color: var(--muted); margin: 8px 0; }

/* ---------------------------------------------------------------- pencere çerçevesi */
.window { display: grid; grid-template-rows: 45px 1fr; height: 100%; }
.titlebar { background: var(--titlebar); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #fff; }
.titlebar-title { font-size: 13px; color: #a8b8c8; }
.titlebar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.titlebar-user { font-size: 11px; color: #a8b8c8; }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: #1e2d3d; color: #6a8aaa; display: grid; place-items: center; font-size: 14px; }
.version { font-size: 9px; color: #6a8aaa; background: #1e2d3d; padding: 2px 5px; border-radius: 3px; }
.win-btn { background: transparent; border: 0; color: ghostwhite; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 17px; display: grid; place-items: center; }
.win-btn:hover { background: rgba(255,255,255,.12); }
.titlebar form { margin: 0; }

.body { display: grid; grid-template-columns: 250px 1fr; min-height: 0; transition: grid-template-columns .2s; }
.menu-closed .body { grid-template-columns: 0 1fr; }
.sidemenu { background: var(--menu); border-right: 1px solid var(--menu-text); overflow: hidden auto; padding: 10px; white-space: nowrap; }
.menu-title { margin: 20px 15px 10px; font-size: 12px; font-weight: 700; color: var(--menu-icon); letter-spacing: .04em; }
.menu-item { position: relative; display: flex; align-items: center; gap: 15px; height: 45px; padding: 0 15px; margin: 2px 5px; border-radius: 8px; color: var(--menu-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.menu-item i { font-size: 20px; color: var(--menu-icon); width: 20px; text-align: center; }
.menu-item:hover, .menu-item.active { background: var(--menu-hover); color: #fff; }
.menu-item:hover::before, .menu-item.active::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 20px; border-radius: 2px; background: var(--select); }
.menu-item.bot, .menu-item.bot i { color: var(--select); }
.menu-item.disabled { opacity: .4; cursor: default; }
.menu-item.disabled:hover { background: transparent; }
.menu-item.disabled:hover::before { display: none; }
.page { overflow: auto; min-width: 0; }

/* ---------------------------------------------------------------- ortak */
.btn { font: 600 13px var(--font); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 6px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: #f5f7fa; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--titlebar); border-color: var(--titlebar); color: #fff; }
.btn.primary:hover { background: #3a5670; }
.btn.danger { color: var(--err); border-color: #f3c4c4; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.wide { width: 100%; justify-content: center; padding: 10px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-row.end { justify-content: flex-end; margin-top: 12px; }
.card { background: #fff; border-radius: 10px; padding: 16px 18px; margin: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card h2 { margin: 0 0 8px; font-size: 15px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.input { font: 14px var(--font); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; width: 100%; background: #fff; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.info { background: #e3f2fd; color: #1565c0; }
.pill.muted { background: #eceff1; color: var(--muted); }
.notice { padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.notice.ok { background: var(--ok-soft); color: #14532d; }
.notice.err { background: var(--err-soft); color: #7f1d1d; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eceff1; }
table.grid th { font-size: 12px; color: var(--muted); font-weight: 600; }
table.grid.narrow { max-width: 520px; }

.agent-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; }
[sse-swap="agent"] { display: inline-flex; align-items: center; gap: 6px; }
.agent-badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.agent-badge.online { background: rgba(0,184,148,.18); color: #b8f5e6; }
.agent-badge.online .dot { background: var(--select); }
.agent-badge.offline { background: rgba(231,76,60,.22); color: #ffd2cc; }
.agent-badge.offline .dot { background: #e74c3c; }
.card .agent-badge.online { background: var(--ok-soft); color: var(--ok); }
.card .agent-badge.offline { background: var(--err-soft); color: var(--err); }

/* ---------------------------------------------------------------- Yeni Teklif (NewProposalView) */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 42px; }
.product-card { margin: 8px; min-height: 144px; padding: 16px; background: #fff; color: var(--ink-2); border: 2px solid var(--c, #dce3e8); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-decoration: none; text-align: center; }
.product-card i { font-size: 56px; line-height: 1; }
.product-card span { font-size: 20px; }
a.product-card:hover, a.product-card:focus-visible { border-width: 3px; padding: 15px; background: #f0f5f8; }
.product-card.disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- Sigorta Şirketleri: şirket listesi + açık pencere kartları */
.launcher { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; padding: 16px; min-height: 100%; align-items: start; }
.launcher-list, .launcher-main { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 14px; display: grid; gap: 10px; min-width: 0; }
.launcher-list { position: sticky; top: 16px; max-height: calc(100vh - 77px); grid-template-rows: auto auto 1fr; }
.launcher-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.launcher-head h2 { margin: 0; font-size: 15px; color: var(--ink-2); }
.launcher-search { display: flex; align-items: center; gap: 6px; border: 1px solid #dfe6e9; border-radius: 6px; padding: 0 8px; background: #f8fafc; }
.launcher-search i { color: var(--soft); }
.launcher-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 32px; font: 13px var(--font); outline: none; }
.company-list { overflow: auto; display: grid; gap: 4px; align-content: start; margin: 0 -4px; padding: 0 4px; }
.company-row { border: 1px solid transparent; border-radius: 8px; }
.company-row[open] { border-color: var(--card-line); background: #fafcfd; }
.company-row summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.company-row summary::-webkit-details-marker { display: none; }
.company-row summary:hover { background: #f1f5f9; }
.company-avatar { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #eaf0f7; color: var(--titlebar); font-weight: 700; }
.company-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
.company-row .chevron { color: var(--soft); transition: transform .15s; }
.company-row[open] .chevron { transform: rotate(180deg); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--select); flex: none; }
.channel-list { display: grid; gap: 2px; padding: 0 6px 6px 40px; }
.channel-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; font: 13px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.channel-row:hover { background: #eaf3ff; }
.channel-row:disabled { opacity: .6; cursor: progress; }
.channel-open { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 5px; background: var(--titlebar); color: #fff; font-size: 12px; font-weight: 600; }
.channel-row > i { color: var(--soft); }
.channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.window-card { border: 1px solid var(--card-line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; align-content: start; background: #fff; }
.window-card.on { border-color: var(--select); box-shadow: 0 0 0 1px var(--select) inset; }
.window-head { display: flex; align-items: center; gap: 8px; }
.window-title { flex: 1; min-width: 0; display: grid; }
.window-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-nav { display: flex; align-items: center; gap: 2px; background: #f5f6fa; border-radius: 6px; padding: 3px; }
.window-nav .address-input { flex: 1; min-width: 0; margin-left: 4px; }
.window-state { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.window-state i { font-size: 18px; color: var(--soft); }
.window-card.on .window-state, .window-card.on .window-state i { color: var(--ok); }
.tool { width: 30px; height: 28px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font-size: 16px; color: var(--titlebar); display: grid; place-items: center; flex: none; }
.tool:hover { background: #e6e9ef; }
.address-input { width: 100%; height: 28px; border: 1px solid #dfe6e9; border-radius: 4px; padding: 0 10px; font: 13px var(--font); color: var(--ink); background: #fff; }
.tab-dot { width: 8px; height: 8px; border-radius: 50%; background: #90a4ae; flex: none; }
.tab-dot.ready { background: var(--select); }
.tab-dot.running, .tab-dot.opening { background: #42a5f5; }
.tab-dot.waiting { background: #ffa000; }
.tab-dot.failed { background: #e74c3c; }
.panel-empty { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 60px 16px; text-align: center; border: 1px dashed var(--card-line); border-radius: 10px; }
.panel-empty i { font-size: 44px; color: var(--soft); }
.panel-empty strong { font-size: 15px; color: var(--muted); }
.panel-empty span { font-size: 13px; color: var(--soft); }
@media (max-width: 760px) {
  .launcher { grid-template-columns: 1fr; padding: 16px; }
  .launcher-list { position: static; max-height: none; }
  .window-grid { grid-template-columns: 1fr; }
}
#panel-msg:empty { display: none; }
#panel-msg { padding: 0; }

/* ---------------------------------------------------------------- araç sihirbazı (VehicleInsuranceView) */
#wizard { padding-bottom: 16px; }
.wizard-head { margin: 16px 16px 8px; padding: 12px 16px; background: var(--titlebar); border-radius: 10px; display: flex; align-items: center; gap: 12px; color: #fff; }
.wizard-head i { font-size: 18px; }
.wizard-title { font-size: 18px; flex: 1; }
.wizard-count { font-size: 14px; }
.wizard-count span { color: #aabdd0; }
.wizard-progress { margin: 0 16px 8px; padding: 14px 20px; background: #fff; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wizard-progress div { font-size: 11px; color: var(--titlebar); display: grid; gap: 6px; }
.wizard-progress .bar { height: 5px; border-radius: 3px; background: #e0e6ec; }
.wizard-progress .done .bar { background: var(--select); }
.wizard-card { margin: 0 16px; background: #fff; border-radius: 10px; padding: 20px 22px; display: grid; gap: 14px; }
.section-title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; color: var(--ink); }
.field em { color: var(--err); font-style: normal; margin-left: 2px; }
.field.check { grid-template-columns: auto 1fr; align-items: center; }
.field.check > span { order: 2; }
.tb { font: 14px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; height: 34px; width: 100%; }
.tb:focus { border-color: #90a4ae; outline: none; box-shadow: 0 0 0 2px rgba(47,69,88,.12); }
.tb.upper { text-transform: uppercase; }
/* WPF ActionButtonStyle: koyu mavi-gri, beyaz ikon/yazı. */
.btn.action { background: var(--titlebar); border-color: var(--titlebar); color: #fff; height: 35px; }
.btn.action:hover { background: #3a5670; }
.btn.icon { width: 35px; padding: 0; justify-content: center; font-size: 16px; }
.egm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.egm-menu { position: relative; }
.egm-menu summary { list-style: none; cursor: pointer; font-weight: 600; }
.egm-menu summary::-webkit-details-marker { display: none; }
.egm-items { position: absolute; top: 40px; left: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.12); min-width: 140px; padding: 4px; display: grid; }
.egm-items button { text-align: left; background: transparent; border: 0; padding: 8px 12px; font: 13px var(--font); border-radius: 4px; cursor: pointer; color: var(--ink); }
.egm-items button:hover:not(:disabled) { background: #eef2f6; }
.egm-items button:disabled { color: var(--soft); cursor: default; }
.egm-status { color: #607d8b; font-size: 13px; }
.egm-status.err { color: var(--err); }
.vehicle-codes { padding: 9px 12px; background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 8px; display: grid; gap: 2px; font-size: 13px; }
.vehicle-codes .label { font-size: 11px; font-weight: 700; color: #1e40af; letter-spacing: .04em; }
.tsb-candidates { display: grid; gap: 6px; margin-top: 6px; }
.tsb-candidate { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; background: #fff; border: 1px solid #dbeafe; border-radius: 6px; }
.tsb-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.tb.readonly { display: flex; align-items: center; background: #f7fafc; }
.tb.readonly.warn { color: var(--warn); font-weight: 600; }
.notice.warn { background: var(--warn-soft); color: #78350f; }
.birth-row { display: flex; gap: 6px; }
.birth-row .tb { flex: 1; }
.birth-row .btn { white-space: nowrap; }
.field-status { font-size: 11px; }
.field-status.ok { color: var(--ok); }
.field-status.err { color: var(--err); }
.htmx-indicator.field-status { color: #1565c0; }
.pair { display: flex; gap: 6px; }
.pair .tb:first-child { width: 64px; flex: none; }
.radios { display: flex; gap: 20px; flex-wrap: wrap; }
.radios label { display: inline-flex; gap: 6px; align-items: center; }
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.summary div { background: #f7fafc; border: 1px solid #e3e9ee; border-radius: 8px; padding: 8px 10px; display: grid; }
.summary span { font-size: 11px; color: var(--muted); }
.company-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.company-checks label { display: inline-flex; gap: 6px; align-items: center; min-width: 170px; }
.company-checks .all { font-weight: 700; }
.wizard-nav { margin: 12px 16px 0; display: flex; justify-content: flex-end; gap: 8px; }
.wizard-nav [data-back] { margin-right: auto; }

.quote-head { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 6px; flex-wrap: wrap; }
.progress { height: 4px; background: #eceff1; border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.progress div { height: 100%; background: var(--select); transition: width .4s; }
.quotes { display: grid; gap: 8px; }
.quote { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e3e9ee; border-radius: 8px; background: #fff; }
.quote.best { border-color: var(--select); background: #effbf7; }
.quote .price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.quote .price span { font-size: 12px; color: var(--muted); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--select); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* ---------------------------------------------------------------- soru penceresi, ajan, giriş */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 20px 22px; width: min(460px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal h2 { margin: 0 0 4px; font-size: 16px; }
.agent-gate { display: none; }
body:has(.titlebar .agent-badge.offline):not(.gate-off) .agent-gate { display: grid; }
.modal img.captcha { display: block; margin: 8px 0; image-rendering: pixelated; min-width: 200px; border: 1px solid var(--line); border-radius: 6px; }
.howto { display: grid; gap: 10px; padding-left: 20px; }
.pair-box { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #ede7f6; border-radius: 8px; margin: 8px 0; }
.pair-box .code { font: 700 26px/1 Consolas, monospace; letter-spacing: .15em; color: var(--accent); }
.pair-box .machine { font-weight: 600; }
.login-body { display: grid; place-items: center; padding: 16px; }
.login-card { background: #fff; border-radius: 12px; padding: 28px; width: min(380px, 100%); display: grid; gap: 8px; box-shadow: 0 10px 30px rgba(47,69,88,.15); }
.login-card label { font-size: 13px; color: var(--ink); margin-top: 6px; }
.login-card .btn { margin-top: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand.big { font-size: 20px; color: var(--ink-2); padding-bottom: 8px; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--titlebar); color: #fff; display: grid; place-items: center; font-weight: 800; }

@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); padding: 24px; } }
@media (max-width: 800px) {
  .body { grid-template-columns: 1fr; }
  .sidemenu { display: none; }
  body:not(.menu-closed) .sidemenu { display: block; position: fixed; top: 45px; bottom: 0; left: 0; width: 250px; z-index: 40; }
  .product-grid { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .titlebar-user, .version { display: none; }
  .quote { grid-template-columns: 1fr; }
}

/* Teklifler / Poliçeler — WPF HomeView, PoliciesView */
.stat-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.stat { display: grid; gap: 4px; min-width: 150px; padding: 12px 16px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; color: inherit; text-decoration: none; }
.stat span { font-size: 11px; font-weight: 600; color: #8a97a6; }
.stat b { font-size: 28px; color: var(--titlebar); }
.stat b.ok { color: #1a7a3f; }
.adv-filter { background: #fff; border: 1px solid var(--card-line); border-radius: 10px; margin-bottom: 12px; }
.adv-filter summary { padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.adv-filter summary em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.adv-filter-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 0 14px 14px; }
.adv-filter-body label { display: grid; gap: 3px; min-width: 140px; }
.adv-filter-body label.grow { flex: 1 1 220px; }
.adv-filter-body label > span { font-size: 11px; color: #94a3b8; margin-left: 2px; }
.adv-filter-actions { display: flex; gap: 8px; }
.record-list { display: grid; gap: 8px; }
.record { display: flex; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
a.record:hover { border-color: #b8c4d0; }
.record-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 14px; border-radius: 50%; background: #eaf0f7; color: var(--titlebar); font-size: 22px; }
.record-icon.ok { background: #e6f4ea; color: #1a7a3f; }
.record-main { flex: 1; display: grid; gap: 5px; min-width: 0; }
.record-title { font-size: 14px; color: #313638; }
.record-title strong { font-weight: 600; }
.record-title em { font-style: normal; font-size: 12px; color: #a0acc0; margin-left: 6px; }
.record-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: #eaf0f7; color: var(--titlebar); font-size: 11px; font-weight: 600; }
.chip.soft { background: #f0f5fb; color: #4a6580; font-weight: 400; }
.chip.shared { background: #ede7f6; color: #5e35b1; }
.chip.ok { background: #e6f4ea; color: #1a7a3f; }
.chip.dark { background: #1a7a3f; color: #fff; }
.record-time { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #b0bac6; }
.record-side { flex: none; display: grid; justify-items: end; gap: 5px; margin: 0 16px; }
.record-side code, .detail-head code { padding: 4px 8px; border-radius: 6px; background: #eef2ff; color: #4338ca; font: 600 11px Consolas, monospace; }
.record-side small { font-size: 10px; color: #8a97a6; }
.record-side small.strong { color: var(--titlebar); font-weight: 600; }
.record-side strong.ok { font-size: 13px; color: #1a7a3f; }
.record-chevron { flex: none; color: #c8d0da; font-size: 16px; }
.list-empty { display: grid; justify-items: center; gap: 5px; padding: 60px 16px; color: #b0bac6; font-size: 15px; text-align: center; }
.list-empty i { font-size: 52px; color: #c8d0da; }
.list-empty strong { font-weight: 400; }
.list-empty span { font-size: 12px; color: #c8d0da; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 13px; color: #4a6580; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; color: #4a6580; text-decoration: none; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; }
.detail-head h2 { margin: 0 0 6px; font-size: 18px; color: #313638; }
.detail-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail-head h2 { flex-basis: 100%; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.detail-grid > div { display: grid; gap: 2px; padding: 8px 12px; background: #fff; border: 1px solid var(--card-line); border-radius: 8px; min-width: 0; overflow-wrap: anywhere; }
.detail-grid span { font-size: 11px; color: #94a3b8; }
.detail-grid b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.detail-grid small { font-size: 11px; color: var(--muted); }
.warn-text { color: var(--warn); }
@media (max-width: 640px) { .record-side { display: none; } }

/* Seyahat */
.choice-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; font-size: 13px; }
.insured-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; padding: 12px; margin-bottom: 10px; border: 1px solid var(--card-line); border-radius: 8px; }

/* Yönetim ekranları */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 20px; color: var(--titlebar); }
.table-card { background: #fff; border: 1px solid var(--card-line); border-radius: 10px; overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600; color: #8a97a6; border-bottom: 1px solid var(--card-line); white-space: nowrap; }
table.grid td { padding: 10px 14px; border-bottom: 1px solid #eef1f4; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid .actions { text-align: right; white-space: nowrap; }
.form-dialog { border: 0; border-radius: 12px; padding: 20px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.form-dialog::backdrop { background: rgba(30,42,54,.45); }
.form-dialog h3 { margin: 0 0 12px; color: var(--titlebar); }
.form-dialog .field { margin-bottom: 10px; }
.settings-form .field { margin-bottom: 10px; }
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.logo-row img, .logo-empty { width: 96px; height: 96px; object-fit: contain; border: 1px dashed var(--card-line); border-radius: 10px; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.form-dialog.wide { width: min(760px, calc(100vw - 32px)); }
.role-layout { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 12px; align-items: start; }
.role-list { display: grid; gap: 4px; }
.role-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.role-item:hover { background: #f0f5fb; }
.role-item.active { background: #eaf0f7; font-weight: 600; }
.role-item em { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 6px; }
.role-new { display: grid; gap: 6px; margin-top: 10px; }
.perm-group { border: 1px solid var(--card-line); border-radius: 8px; margin-bottom: 6px; }
.perm-group summary { padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 12px; padding: 4px 12px 10px; font-size: 12px; }
@media (max-width: 760px) { .role-layout { grid-template-columns: 1fr; } }
.share-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.inline-menu { display: inline-block; position: relative; text-align: left; }
.inline-panel { position: absolute; right: 0; z-index: 5; width: min(420px, 80vw); padding: 10px; background: #fff; border: 1px solid var(--card-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.bot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bot-row .tb { flex: 1 1 200px; }
.sale-source { max-width: 360px; margin-bottom: 12px; }
/* Kayıt ve yönetim ekranları sayfa kenarına yapışmasın (sihirbaz kendi boşluğunu veriyor). */
.page > .page-head, .page > .stat-row, .page > .adv-filter, .page > .record-list, .page > .pager, .page > .table-card, .page > .notice, .page > .back-link, .page > .detail-head, .page > .quotes, .page > .detail-grid, .page > .section-title, .page > .empty, .page > .muted, .page > .role-layout, .page > .list-empty, .page > form.wizard-card, .page > div[id$="-msg"], .page > form:not(#wizard) { margin-left: 16px; margin-right: 16px; }
.page > .page-head, .page > .stat-row, .page > .back-link { margin-top: 14px; }

/* Teklif detayı */
.detail-actions { margin: 10px 16px; }
.page > #detail-msg, .page > .company-group, .page > .btn-row.end { margin-left: 16px; margin-right: 16px; }
.share-menu { display: grid; gap: 6px; width: 180px; }
.baga-code { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; color: #6366f1; }
.company-group { margin-bottom: 10px; }
.company-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 13px; color: var(--ink-2); }
.expert-pick { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent); }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); text-align: right; }
.page > .btn-row { margin-left: 16px; margin-right: 16px; }

.perm-search { margin-bottom: 8px; width: 100%; }
.perm-sub { padding: 6px 12px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.page > .page-form { margin: 10px 16px; }
.small-stat { font-size: 16px !important; }
.pay-total { margin: 8px 0; font-size: 15px; color: var(--titlebar); }

/* ---------------------------------------------------------------- ekran görüntüsü penceresi */
.shot-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 10px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.shot-dialog::backdrop { background: rgba(20,30,40,.55); }
.shot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.shot-head .spacer { flex: 1; }
.shot-img { display: block; width: 100%; height: auto; border: 1px solid var(--card-line); border-radius: 6px; }
.shot-dialog .htmx-indicator { padding: 24px; text-align: center; }