/* CAYMAZ Üretim Takip — Gündüz teması */
/* Native uygulama hissi: arayüz metni SEÇİLEMEZ (yalnız girişlerde yazılabilir/seçilebilir); dokunma vurgusu ve iOS
   uzun-basma menüsü kapalı; lastik (overscroll) kaydırma kapalı. Kopyalanması gereken yerlere .selectable eklenebilir. */
* { -webkit-tap-highlight-color: transparent; }
html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
input, textarea, select, [contenteditable], [contenteditable] *, .selectable, .selectable * {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-touch-callout: default; }

:root {
  --bg: #f8f9fb;   /* sayfa zemini: kutucuk başlık bandıyla karışmasın diye açık */
  --header-bg: #edf0f5;   /* üst başlık satırı: sayfa zemininden hafif daha kısık (koyu) — ayrım görünsün */
  --head-band: #f1f3f7;   /* sayfa başlığı (page-head) bandı: header ile içerik arası ara ton */
  --footer-bg: var(--surface);   /* alt bilgi (footer) zemini — Görünüm ayarından değiştirilebilir */
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #16202e;
  --muted: #5d6879;
  --faint: #8a94a6;
  --border: #dfe4ec;
  --border-strong: #c7cfdb;
  --primary: #1d4f91;
  --primary-hover: #163f75;
  --primary-soft: #e6eef9;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --success: #1e7b3a;
  --success-soft: #e5f5ea;
  --warning: #9a6700;
  --warning-soft: #fff5d6;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);
  --radius: 10px;

  /* Parça durum renkleri (sipariş detayı) */
  --st-bekliyor: #ffffff;
  --st-uretimde: #cfe6ff;
  --st-depo: #fff1a8;
  --st-montaj: #c9f2c7;
  --st-hata: #ffc9c9;
  --part-fill: #ffffff;
  --part-off: #eef0f4;
  --cover-fill: #fde9e7;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Kabuk: üst ve alt bölüm sabit, aradaki içerik kendi içinde kayar */
.shell { height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); display: flex; flex-direction: column; overflow: hidden; }
.scroller { flex: 1; min-height: 0; overflow: auto; position: relative; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Header / Footer ---------- */
.app-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex: none;
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { height: 48px; width: auto; display: block; }
.brand .product { border-left: 1px solid var(--border); padding-left: 12px; color: var(--muted); font-size: 13px; }
.brand .product b { display: block; color: var(--text); font-size: 14px; letter-spacing: .04em; }

.header-right { display: flex; align-items: center; gap: 6px; }
.menu-anchor { position: relative; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; }

/* Google tarzı modül ızgarası */
.apps-panel { width: 332px; padding: 12px; border-radius: 16px; }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.apps-panel { max-height: calc(100vh - 90px); overflow-x: hidden; overflow-y: auto; }
/* Üst şerit: Patron hero'su gibi koyu, şık radyal geçişli arka plan */
.apps-search-wrap { position: sticky; top: -12px; z-index: 3; margin: -12px -12px 12px; padding: 13px 13px 14px; border-radius: 14px 14px 0 0;
  background: radial-gradient(130% 170% at 0% 0%, #1e3a8a 0%, #0f1d3d 55%, #070d1c 100%); box-shadow: 0 10px 26px rgba(7, 13, 28, .25); }
.apps-search-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(226, 232, 255, .82); padding: 0 2px 8px; }
.apps-search-title svg { width: 13px; height: 13px; opacity: .85; }
.apps-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; font-size: 14px;
  background: rgba(255, 255, 255, .97); color: #0f172a; box-shadow: 0 2px 8px rgba(7, 13, 28, .18); }
.apps-search::placeholder { color: #94a3b8; }
.apps-search:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, .3); }
.apps-grid .app-tile.feat { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; padding: 8px 10px; }
.app-tile.feat .feat-txt { display: flex; flex-direction: column; min-width: 0; }
.app-tile.feat .feat-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tile.feat .feat-hint { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apps-group { border-radius: 14px; background: var(--surface-2); padding: 4px; }
.apps-group + .apps-group { margin-top: 8px; }
.dropdown.apps-panel .apps-group-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; font: inherit; color: var(--text); text-align: left; }
.dropdown.apps-panel .apps-group-h:hover { background: var(--surface); }
.dropdown.apps-panel .apps-group-h .gi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--primary), #3b82f6); color: #fff; box-shadow: 0 3px 8px rgba(30, 75, 143, .25); }
.dropdown.apps-panel .apps-group-h .gi svg { width: 16px; height: 16px; }
.dropdown.apps-panel .apps-group:nth-child(2) .gi { background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 3px 8px rgba(124, 58, 237, .25); }
.dropdown.apps-panel .apps-group-h .gt { flex: 1; font-weight: 700; font-size: 14px; }
.dropdown.apps-panel .apps-group-h .gn { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; }
.dropdown.apps-panel .apps-group-h .chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; margin: 0 4px 0 2px; }
.dropdown.apps-panel .apps-group.closed .apps-group-h .chev { transform: rotate(-45deg); }
.apps-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease, opacity .22s ease; }
.apps-body > .apps-grid { overflow: hidden; min-height: 0; background: var(--surface); border-radius: 10px; }
.apps-group:not(.closed) .apps-body > .apps-grid { padding: 4px; margin-top: 2px; }
.apps-group.closed .apps-body { grid-template-rows: 0fr; opacity: 0; }
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px;
  border-radius: 12px; color: var(--text); text-align: center; font-size: 12px; line-height: 1.25;
}
.app-tile:hover { background: var(--surface-2); text-decoration: none; }
.app-tile.on { background: var(--primary-soft); }
.app-tile .ico {
  width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.app-tile.on .ico { background: var(--primary); color: #fff; }
.app-tile .ico svg { width: 26px; height: 26px; }
.app-tile .ico { position: relative; }
.app-tile .tile-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.dropdown.apps-panel .apps-group-h.static { cursor: default; }
.dropdown.apps-panel .apps-group-h.static:hover { background: transparent; }
.personal-btn .menu-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; margin: 0; }
.personal-btn { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 4px 12px 4px 4px; cursor: pointer; text-align: left;
}
.user-btn:hover { background: var(--surface-2); border-color: var(--border); }
.user-btn .who b { display: block; font-size: 13px; }
.user-btn .who span { font-size: 12px; color: var(--muted); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px; z-index: 30;
}
.dropdown button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.dropdown button:hover { background: var(--surface-2); }
/* Açılır menü kapatma ✕'i: başlıkla AYNI satırda, sağ üstte (mutlak konum; .dropdown button blok kuralını ezer). */
.dropdown .popup-close {
  display: grid; place-items: center; position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 8px;
  background: var(--surface-2); color: var(--muted); font-size: 15px; line-height: 1; z-index: 2;
}
.dropdown .popup-close:hover { background: var(--danger, #ef4444); color: #fff; }
.dropdown .popup-close + * { padding-right: 40px; }   /* ✕'in yanındaki ilk satır (başlık) üstüne binmesin */
.dropdown .popup-close + .alerts-head { padding-right: 40px; }

.app-footer {
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
  color: var(--muted);
  font-size: 12px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
/* Çentik / home-indicator (native uygulama & PWA standalone): üst bar, alt bilgi ve içerik GÜVENLİ ALANA otursun.
   Normal tarayıcıda env() = 0 → etkisiz; yalnız çentikli cihazda devreye girer. */
.app-header { padding-top: env(safe-area-inset-top, 0px); height: calc(64px + env(safe-area-inset-top, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); }
.app-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); }
main#view { padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); }
.footer-copy { white-space: nowrap; }
/* Footer marka rozeti: logo-ikon + ünvan; dar ekranda yalnızca ikon kalır, üzerine gelince popup açılır */
.footer-brand { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
  border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 12px; white-space: nowrap; }
.footer-brand:hover, .footer-brand.open { background: var(--surface-2); color: var(--text); }
.footer-brand .fb-mark { height: 18px; width: auto; display: block; flex: none; }
.footer-brand .fb-name { white-space: nowrap; }
.fb-pop { text-align: center; padding: 18px 22px; max-width: 300px; }
.fb-pop .fb-logo { max-width: 190px; max-height: 64px; width: auto; height: auto; margin: 0 auto 10px; display: block; }
.fb-pop .fb-title { font-weight: 700; font-size: 15px; color: var(--text); }
.fb-pop .fb-by { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.fb-pop .fb-by-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fb-pop .fb-by b { font-size: 15px; color: var(--primary); }
.fb-pop .fb-copy { margin-top: 12px; font-size: 11px; color: var(--muted); }

main#view { width: 100%; max-width: 1480px; margin: 0 auto; padding: 20px; position: relative; }

/* Çizgisel dönen dünya */
.globe-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main#view > .globe-bg.faint { position: fixed; top: 64px; bottom: 45px; height: auto; opacity: .09; z-index: 0; }
main#view > .globe-bg.faint ~ * { position: relative; z-index: 1; }

/* ---------- Avatar ---------- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; overflow: hidden; flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 88px; height: 88px; font-size: 28px; }

/* ---------- Page chrome ---------- */
/* Başlık bandı tam genişlik (ortalanmış main#view içinden viewport kenarına taşar); iç içerik içerik sütununa hizalanır */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--head-band); border-bottom: 1px solid var(--border);
  width: 100vw; margin: -20px 0 16px; margin-left: 50%; transform: translateX(-50vw);
  padding: 16px calc(max((100vw - 1480px) / 2, 0px) + 20px); }
.page-head h1 { font-size: 22px; }
.page-head .sub { color: var(--muted); }
.page-head .spacer { flex: 1; }
.page-head-t { min-width: 0; flex: 0 1 auto; }
/* Uzun açıklama (sub) başlık bandını büyütüp sekmeleri kaydırmasın: tek satır, taşarsa kırpılır */
.page-head-t .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Alt-modül seçici başlık bandında: BALONCUK (pill) stili — grup düğmeleri gibi. Sığmayınca alt satıra GEÇMEZ, yatay kayar (min-width:0). */
.page-head > .seg.seg-tabs { align-self: center; margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); padding: 3px; gap: 2px; }
.page-head > .seg.seg-tabs button { flex: none; height: 32px; padding: 0 14px; border-radius: 999px;
  border-bottom: 0; margin-bottom: 0; color: var(--muted); font-weight: 600; }
.page-head > .seg.seg-tabs button:hover { background: var(--surface); color: var(--text); }
.page-head > .seg.seg-tabs button.on { background: var(--surface); color: var(--primary); border-bottom: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
/* Sağdan-sola (Arapça): banttaki seçici ve geri oku yönü */
html[dir="rtl"] .page-head > .seg.seg-tabs { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .back { transform: scaleX(-1); }
/* Alt-modüle ait eylem düğmeleri: başlığın altında ayrı toolbar; hiza kişisel ayardan (varsayılan orta) */
.module-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; justify-content: center; }
html[data-toolbar-align="left"] .module-toolbar { justify-content: flex-start; }
html[data-toolbar-align="right"] .module-toolbar { justify-content: flex-end; }

/* ---- Gövde (orta alan) arka plan desenleri — Görünüm ayarı; hafif, okunurluğu bozmaz ----
   Desen içeriğin ve opak barların (üst bar, başlık bandı, footer) ARKASINDA (z-index:-1); yalnız kart boşluklarından görünür. */
html[data-bg] .scroller::before {
  content: ''; position: fixed; left: 0; right: 0; top: 64px; bottom: 42px; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: center;
}
html[data-bg="soft"] .scroller::before {
  background:
    radial-gradient(1200px 600px at 8% -12%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(1000px 520px at 112% 8%, color-mix(in srgb, #16a34a 11%, transparent), transparent 60%); }
html[data-bg="mesh"] .scroller::before {
  background:
    radial-gradient(720px 520px at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%),
    radial-gradient(720px 520px at 100% 0%, color-mix(in srgb, #7c3aed 13%, transparent), transparent 55%),
    radial-gradient(820px 620px at 50% 120%, color-mix(in srgb, #0ea5e9 13%, transparent), transparent 55%); }
html[data-bg="dots"] .scroller::before {
  background-image: radial-gradient(color-mix(in srgb, var(--muted) 32%, transparent) 1.2px, transparent 1.4px);
  background-size: 22px 22px; opacity: .55; }
html[data-bg="grid"] .scroller::before {
  background-image: linear-gradient(color-mix(in srgb, var(--muted) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 18%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .5; }
html[data-bg="aurora"] .scroller::before {
  background:
    radial-gradient(900px 600px at 20% 20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, color-mix(in srgb, #16a34a 18%, transparent), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, color-mix(in srgb, #7c3aed 18%, transparent), transparent 60%);
  background-size: 200% 200%; animation: bgAurora 26s ease-in-out infinite alternate; }
@keyframes bgAurora { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
html[data-bg="waves"] .scroller::before {
  background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 14%, transparent),
    color-mix(in srgb, #0ea5e9 12%, transparent), color-mix(in srgb, #7c3aed 12%, transparent),
    color-mix(in srgb, var(--primary) 14%, transparent));
  background-size: 300% 300%; animation: bgWaves 30s ease infinite; }
@keyframes bgWaves { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
html.reduce-motion[data-bg="aurora"] .scroller::before,
html.reduce-motion[data-bg="waves"] .scroller::before { animation: none; }

/* Görünüm ayarı: renk seçici satırları */
.set-color-ctl { display: inline-flex; align-items: center; gap: 10px; }
.set-color { width: 46px; height: 30px; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: none; cursor: pointer; }
.set-color:disabled { opacity: .4; cursor: not-allowed; }
.set-none { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.set-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 4px; }
.set-bg-tile { border: 2px solid var(--border); border-radius: 10px; height: 60px; cursor: pointer; position: relative; overflow: hidden; background: var(--surface-2); padding: 0; }
.set-bg-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.set-bg-tile .set-bg-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; text-align: center; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); padding: 1px 0; }
.set-bg-tile[data-p=""] { background: var(--bg); }
.set-bg-tile[data-p="soft"] { background: radial-gradient(60px 40px at 10% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%), radial-gradient(60px 40px at 110% 10%, color-mix(in srgb, #16a34a 24%, transparent), transparent 60%), var(--bg); }
.set-bg-tile[data-p="mesh"] { background: radial-gradient(50px at 0% 0%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 60%), radial-gradient(50px at 100% 0%, color-mix(in srgb, #7c3aed 28%, transparent), transparent 60%), radial-gradient(50px at 50% 120%, color-mix(in srgb, #0ea5e9 28%, transparent), transparent 60%), var(--bg); }
.set-bg-tile[data-p="dots"] { background-image: radial-gradient(color-mix(in srgb, var(--muted) 40%, transparent) 1.2px, transparent 1.4px); background-size: 12px 12px; background-color: var(--bg); }
.set-bg-tile[data-p="grid"] { background-image: linear-gradient(color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1px); background-size: 14px 14px; background-color: var(--bg); }
.set-bg-tile[data-p="aurora"] { background: radial-gradient(50px at 20% 20%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 60%), radial-gradient(50px at 80% 70%, color-mix(in srgb, #16a34a 34%, transparent), transparent 60%), radial-gradient(50px at 50% 110%, color-mix(in srgb, #7c3aed 34%, transparent), transparent 60%), var(--bg); }
.set-bg-tile[data-p="waves"] { background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, #0ea5e9 22%, transparent), color-mix(in srgb, #7c3aed 22%, transparent)), var(--bg); }
.set-bg-tile[data-p="aurora"]::after, .set-bg-tile[data-p="waves"]::after { content: '✦ canlı'; position: absolute; top: 3px; right: 4px; font-size: 9px; color: var(--primary); font-weight: 700; }
.back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.back:hover { background: var(--surface-2); text-decoration: none; }

.fc-sens { display: inline-flex; align-items: center; gap: 6px; }
/* Şirketten Haberler (pano akışı) */
.feed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.feed-bar .spacer { flex: 1; }
.feed-body { max-height: 420px; overflow: auto; }
.feed-composer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.05)); cursor: pointer; }
.feed-composer:hover { background: var(--surface-2, rgba(127,127,127,.1)); }
.feed-composer-pill { flex: 1; text-align: left; color: var(--muted); }
.feed-composer-ic { font-size: 18px; }
.feed-empty { text-align: center; padding: 20px; }
.feed-list { display: flex; flex-direction: column; gap: 10px; }
.feed-post { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.feed-ph { display: flex; align-items: center; gap: 8px; }
.feed-ph .grow { min-width: 0; flex: 1; }
.feed-ph b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.feed-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2, #eee); padding: 4px; }
.feed-x { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; }
.feed-text { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; }
.feed-text a { color: var(--primary); }
.feed-medias { display: grid; gap: 4px; margin-top: 8px; }
.feed-medias.n1 { grid-template-columns: 1fr; }
.feed-medias.n2, .feed-medias.n4 { grid-template-columns: 1fr 1fr; }
.feed-medias.n3 { grid-template-columns: 1fr 1fr 1fr; }
.feed-media { display: block; width: 100%; max-height: 320px; padding: 0; border: none; border-radius: 8px; background: #000; cursor: pointer; overflow: hidden; }
.feed-media > img, .feed-media > video { display: block; width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.feed-vid { position: relative; }
.feed-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; padding-left: 3px; pointer-events: none; }
.feed-audio { width: 100%; margin-top: 8px; }
/* Tam ekran medya görüntüleyici (TikTok / Reels tarzı: kayarak dikey geçiş, sağ şerit, alt yazı, yorum paneli) */
.fv-overlay { position: fixed; inset: 0; z-index: 4000; background: #000; color: #fff; touch-action: none; overflow: hidden;
  -webkit-user-select: none; user-select: none; }
body.fv-open .toasts { z-index: 4600; }
.fv-stage { position: absolute; inset: 0; overflow: hidden; }
.fv-track { position: absolute; inset: 0; will-change: transform; }
.fv-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.fv-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; transform-origin: center center;
  -webkit-user-drag: none; background: #000; }
.fv-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.16); color: #fff; font-size: 19px; cursor: pointer; z-index: 3; }
.fv-x:hover { background: rgba(255,255,255,.28); }
.fv-count { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); font-size: 13px; opacity: .8; z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.fv-nav { position: absolute; left: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff;
  font-size: 15px; cursor: pointer; z-index: 2; }
.fv-nav:hover { background: rgba(255,255,255,.28); }
.fv-nav.up { top: calc(50% - 54px); }
.fv-nav.down { top: calc(50% + 10px); }
.fv-nav:disabled { opacity: .25; cursor: default; }
@media (pointer: coarse) { .fv-nav { display: none; } }
/* sağ şerit */
.fv-rail { position: absolute; right: 8px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 16px; }
.fv-ri { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fv-rb { width: 50px; height: 46px; border: 0; background: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); padding: 0; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.fv-rb:active { transform: scale(.88); }
.fv-rb:hover { text-decoration: none; color: #fff; }
.fv-ic { display: flex; }
.fv-heart.on { color: #fe2c55; }
.fv-heart.on .fv-ic { animation: fvPop .32s ease; }
@keyframes fvPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fv-em { font-size: 30px; line-height: 1; }
.fv-n { font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: none; border: 0; color: #fff; padding: 0; line-height: 1.2; }
.fv-n.link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fv-ava { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; background: #fff; display: flex; align-items: center;
  justify-content: center; margin-bottom: 4px; }
.fv-ava img, .fv-ava .avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fv-share.busy { opacity: .5; animation: fvPulse 1s ease infinite; }
@keyframes fvPulse { 50% { opacity: .25; } }
.fv-picker { position: absolute; right: 56px; top: 0; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: rgba(30,30,30,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: fvIn .16s ease; }
.fv-picker button { border: 0; background: none; font-size: 26px; padding: 2px 4px; cursor: pointer; transition: transform .12s ease; }
.fv-picker button:hover, .fv-picker button:active { transform: scale(1.3) translateY(-3px); }
@keyframes fvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* alt yazı */
.fv-cap { position: absolute; left: 16px; right: 80px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.fv-cname { font-weight: 700; font-size: 15.5px; }
.fv-cname small { font-weight: 400; opacity: .8; font-size: 12.5px; }
.fv-ctext { margin-top: 4px; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer; white-space: pre-wrap; word-break: break-word; }
.fv-ctext.open { -webkit-line-clamp: unset; max-height: 40vh; overflow-y: auto; touch-action: pan-y; }
.fv-overlay.zoomed .fv-nav, .fv-overlay.zoomed .fv-rail, .fv-overlay.zoomed .fv-cap, .fv-overlay.zoomed .fv-count { opacity: 0; pointer-events: none; }
.fv-overlay.zoomed { cursor: grab; }
.fv-overlay.zoomed:active { cursor: grabbing; }
.fv-rail, .fv-cap, .fv-count, .fv-nav { transition: opacity .2s ease; }
/* yorum paneli (alttan) */
.fv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 72%; display: flex; flex-direction: column; background: var(--surface);
  color: var(--text); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.35); transform: translateY(100%); transition: transform .22s ease;
  -webkit-user-select: text; user-select: text; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fv-sheet.open { transform: none; }
.fv-sheet-h { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 44px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.fv-sheet-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; }
.fv-sheet-b { overflow-y: auto; padding: 10px 14px 12px; touch-action: pan-y; overscroll-behavior: contain; min-height: 160px; }
@media (min-width: 900px) {
  .fv-sheet { left: auto; right: 0; top: 0; max-height: none; width: 400px; border-radius: 16px 0 0 16px; transform: translateX(100%); }
  .fv-sheet.open { transform: none; }
  .fv-slide { padding: 60px 110px 96px; }
  .fv-rail { right: 22px; }
  .fv-cap { left: 84px; right: 120px; }
}
.feed-map { width: 100%; height: 380px; border-radius: 12px; overflow: hidden; }
.feed-compose textarea { width: 100%; }
.feed-compose-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.feed-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feed-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2, #eee); border-radius: 999px; padding: 3px 8px; font-size: 12px; }
.feed-chip-x { border: none; background: none; cursor: pointer; font-size: 14px; }
/* Tepki (beğeni/kalp) + yorumlar — Facebook/Instagram tarzı */
.feed-foot { margin-top: 10px; }
.feed-ic { display: inline-flex; align-items: center; }
.feed-stat { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); padding: 0 2px 8px; min-height: 20px; }
.feed-rsum { display: inline-flex; align-items: center; gap: 6px; }
.feed-rbubbles { display: inline-flex; }
.feed-rb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface, #fff); display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; margin-left: -6px; box-shadow: 0 0 0 1.5px var(--surface, #fff); border: 1px solid var(--border); }
.feed-rb:first-child { margin-left: 0; }
.feed-rcount { font-weight: 500; }
.feed-stat-c { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0; }
.feed-stat-c:hover { text-decoration: underline; }
.feed-actions { display: flex; border-top: 1px solid var(--border); padding-top: 4px; margin-top: 2px; }
.feed-like-wrap { position: relative; flex: 1; display: flex; }
.feed-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: none;
  border-radius: 8px; padding: 9px 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); transition: background .12s; }
.feed-act:hover { background: var(--surface-2, rgba(127,127,127,.1)); }
.feed-act.on { color: var(--primary); }
.feed-like-em { font-size: 17px; line-height: 1; }
/* Tepki seçici: hover ile açılan yüzen çubuk (FB tarzı) */
.feed-picker { position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; gap: 4px; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
  z-index: 6; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom left; pointer-events: none; transition: opacity .15s, transform .15s; }
.feed-like-wrap.show-picker .feed-picker { opacity: 1; transform: none; pointer-events: auto; }
.feed-pick { border: none; background: none; cursor: pointer; font-size: 28px; line-height: 1; padding: 0 2px; border-radius: 50%;
  transition: transform .12s ease; transform-origin: bottom center; }
.feed-pick:hover { transform: translateY(-8px) scale(1.4); }
.feed-comments:empty { display: none; }
.feed-comments { margin-top: 6px; }
.feed-clist { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 6px; }
.feed-cmt { display: flex; gap: 8px; align-items: flex-start; }
.feed-cmain { flex: 1; min-width: 0; }
.feed-cbody { display: inline-block; max-width: 100%; background: var(--surface-2, rgba(127,127,127,.09)); border-radius: 18px; padding: 8px 12px; }
.feed-cname { font-weight: 600; font-size: 13px; line-height: 1.2; }
.feed-ctext { font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.feed-cmeta { display: flex; gap: 14px; align-items: center; padding: 3px 12px 0; font-size: 12px; }
.feed-cdel { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; padding: 0; }
.feed-cdel:hover { color: var(--danger, #e0245e); text-decoration: underline; }
.feed-cadd { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
/* yorum: sağda kalp + sayı, yanıtlar girintili */
.feed-thread { display: flex; flex-direction: column; }
.feed-cside { flex: none; width: 28px; display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 1px; }
.feed-clike { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 3px; display: flex; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.feed-clike:hover { color: var(--text); }
.feed-clike.on { color: #e0245e; }
.feed-clike.on svg path { fill: currentColor; }
.feed-clike.pop .feed-ic { animation: fvPop .32s ease; }
.feed-clike-n { font-size: 11px; color: var(--muted); min-height: 13px; line-height: 13px; }
.feed-cact { border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; }
.feed-cact:hover { color: var(--text); text-decoration: underline; }
.feed-replies { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 40px; }
.feed-replies:empty { display: none; }
.feed-cmt.reply .feed-cbody { padding: 6px 11px; }
.feed-more-replies { align-self: flex-start; margin: 6px 0 0 40px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 12.5px;
  cursor: pointer; padding: 0; display: flex; align-items: center; gap: 8px; }
.feed-more-replies::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.feed-more-replies:hover { color: var(--text); }
.feed-mention { color: var(--primary); font-weight: 600; }
.feed-cmt.deleted .feed-cbody { opacity: .7; }
.feed-cava-ph { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-2); }
.feed-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 8px 6px 12px;
  border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.09)); font-size: 12.5px; color: var(--muted); }
.feed-replying[hidden] { display: none; }
.feed-replying-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.feed-cinput-wrap { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--surface-2, rgba(127,127,127,.09)); border-radius: 999px; padding: 2px 6px 2px 2px; }
.feed-cinput { flex: 1; min-width: 0; border: none; background: none; padding: 8px 12px; outline: none; font-size: 14px; color: inherit; }
.feed-csend { border: none; background: none; cursor: pointer; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; }
.feed-csend:hover { background: rgba(127,127,127,.15); }
.btn.on { outline: 2px solid var(--primary); }
/* Pano: GridStack sürükle-bırak */
.grid-stack { margin: 0 -4px; }
.grid-stack-item-content.db-tile { inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; min-height: 0; }
.grid-stack-item-content.db-tile > .db-head { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2, rgba(127,127,127,.04)); flex: none; cursor: default; }
.grid-stack.editing .grid-stack-item-content.db-tile > .db-head { cursor: move; }
.grid-stack-item-content.db-tile > .db-head.db-head-collapsible { cursor: pointer; }
.grid-stack-item-content.db-tile.db-collapsed { bottom: auto !important; height: auto !important; }   /* katlıyken kart sadece başlık boyu — altta beyaz boşluk kalmaz */
.grid-stack-item-content.db-tile > .db-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
/* Şirketten Haberler kutusu: akış kutunun tamamını doldurur ve kendi içinde kayar (420 px sınırı yalnız kutu dışında) */
.grid-stack-item-content.db-tile > .db-body:has(> .feed-body) { overflow: hidden; display: flex; flex-direction: column; }
.grid-stack-item-content.db-tile > .db-body > .feed-body { flex: 1; min-height: 0; max-height: none; overflow: auto; }
.grid-stack .db-tools { display: none; gap: 4px; }
.grid-stack.editing .db-tools { display: flex; }
.grid-stack.editing .grid-stack-item-content { outline: 2px dashed var(--border); }
.gs-12 > .grid-stack-item { width: 100%; }
/* Rehber */
.gd-groups { display: flex; flex-direction: column; gap: 14px; }
.gd-group { display: flex; gap: 12px; align-items: flex-start; }
.gd-letter { flex: 0 0 34px; position: sticky; top: 8px; font-size: 20px; font-weight: 800; color: var(--primary); text-align: center;
  padding-top: 8px; align-self: flex-start; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; flex: 1; min-width: 0; }
.gd-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; min-width: 0; }
.gd-card:hover { background: var(--surface-2, rgba(127,127,127,.06)); }
.gd-card.fam { border-left: 3px solid #16a34a; }
.gd-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gd-info b, .gd-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
@media (max-width: 640px) { .gd-letter { flex-basis: 22px; font-size: 16px; } .gd-grid { grid-template-columns: 1fr; } }
.gd-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.gd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.gd-rows { display: flex; flex-direction: column; gap: 4px; }
.gd-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 4px 0; }
.gd-row:last-child { border-bottom: 0; }
.gd-row .muted { flex: 0 0 auto; }
.gd-row b { text-align: right; }
.gd-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.gd-li { display: flex; flex-direction: column; padding: 6px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.gd-li:last-child { border-bottom: 0; }
.gd-li:hover { background: var(--surface-2, rgba(127,127,127,.06)); }
.fg-recognized { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fg-recognized img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 8px 10px; margin-bottom: 16px;
}
.filters .spacer { flex: 1; }
/* Filtre kutuları kapsül diline uyumlu: arama ve combobox'lar tam yuvarlak, yüzeyde ayrı pill'ler */
.filters > .input, .filters > select.input, .filters > input.input, .filters > input[type="search"] {
  border-radius: 999px; background: var(--surface);
}

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface); font-weight: 500;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; }

.input, select.input, textarea.input {
  height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); min-width: 0;
}
textarea.input { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.input:focus, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--faint); }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
.field > .input { width: 100%; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; }

/* Kümelenmiş düğmeler kapsül (balon) görünümü — mesajlardaki stil, tüm modüllerde (görünüm geçişleri, araç kümeleri) */
.seg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); padding: 3px; }
.seg button { border: 0; background: transparent; padding: 0 14px; height: 30px; border-radius: 999px; cursor: pointer; color: var(--text); font-weight: 500; white-space: nowrap; }
.seg button + button { border-left: 0; }
.seg button:hover { background: var(--surface); }
.seg button.on { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }

/* ---------- Home: module buttons ---------- */
.home-title { text-align: center; margin: 12px 0 28px; }
.home-title h1 { font-size: 26px; }
.home-title p { color: var(--muted); margin: 6px 0 0; }
.modules {
  display: grid; gap: 20px; justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
}
.module-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); height: 190px; padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--text); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.module-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; }
.module-btn .ico {
  width: 76px; height: 76px; border-radius: 18px; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.module-btn .ico svg { width: 40px; height: 40px; }
.module-btn span { font-size: 16px; font-weight: 600; text-align: center; }

/* ---------- Cards / tables ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.blue { background: #e7f0fd; border-color: #c6dbfa; color: #1f5fbf; }
.badge.yellow { background: var(--warning-soft); border-color: #f3dc8a; color: var(--warning); }
.badge.green { background: var(--success-soft); border-color: #b8e3c4; color: var(--success); }
.badge.red { background: var(--danger-soft); border-color: #f5c2bd; color: var(--danger); }
.badge.gray { color: var(--muted); }
.badge.purple { background: #f1ebfd; border-color: #d9c9f7; color: #6b3fc2; }

.progress { height: 8px; border-radius: 999px; background: #e9edf3; overflow: hidden; min-width: 90px; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.progress-line { display: flex; align-items: center; gap: 8px; }
.progress-line b { font-size: 12px; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.grid-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.order-card { padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.order-card:hover { border-color: var(--primary); }
.order-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-card .code { font-weight: 700; font-size: 15px; }
.order-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.order-card dt { color: var(--muted); }
.order-card dd { margin: 0; text-align: right; }

/* Kanban (Todo görünümü) */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; align-items: start; }
.kanban-col { background: #e9edf3; border-radius: var(--radius); padding: 10px; min-height: 200px; }
.kanban-col h3 { font-size: 13px; display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; }
.kanban-col .stack { display: flex; flex-direction: column; gap: 10px; }

/* User cards */
.user-card { padding: 20px 16px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.user-card:hover { border-color: var(--primary); }
.user-card .name { font-weight: 600; font-size: 15px; }
.user-card .uname { color: var(--muted); font-size: 12px; word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.chip.x { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 4px 6px 4px 10px; }
.chip.x button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 4px; font-size: 15px; line-height: 1; }

/* Kullanıcı Yönetimi — WhatsApp tarzı satır listesi (tutarlı yükseklik; çevrimiçi yeşil halka; pasif gri) */
.u-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.u-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); border-bottom: 1px solid var(--border); }
.u-row:last-child { border-bottom: 0; }
.u-row:hover { background: var(--surface-2); }
.u-av { flex: none; display: inline-flex; border-radius: 50%; padding: 2px; border: 2px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.u-av.online { border-color: var(--success); }
.u-row-mid { flex: 1; min-width: 0; }
.u-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.u-row-top b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-row-sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.u-pill { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.u-row-end { display: flex; align-items: center; gap: 18px; flex: none; color: var(--muted); font-size: 13px; }
.u-row-roles { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-row-seen { font-variant-numeric: tabular-nums; min-width: 128px; text-align: right; }
.u-row.passive { opacity: .5; }
.u-row.passive .avatar { filter: grayscale(1); }
.u-row.foreign { background: color-mix(in srgb, #ff9500 9%, var(--surface)); }   /* yabancı uyruklu personel: çok açık turuncu */
.u-row.foreign:hover { background: color-mix(in srgb, #ff9500 15%, var(--surface)); }
.u-row.external { background: color-mix(in srgb, #af52de 8%, var(--surface)); }   /* dış firma personeli: çok açık mor */
.u-row.external:hover { background: color-mix(in srgb, #af52de 14%, var(--surface)); }
@media (max-width: 760px) { .u-row-end { display: none; } .u-row-top .badge.purple { display: none; } }

/* Detay sayfası: sol alt modül menüsü */
.split { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.side-nav { padding: 8px; }
.side-nav .who { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.side-nav a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); }
.side-nav a:hover { background: var(--surface-2); text-decoration: none; }
.side-nav a.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* Tiles */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 16px; }
.tile { padding: 16px; }
.tile .label { color: var(--muted); font-size: 13px; }
.tile .value { font-size: 32px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Plane ---------- */
.plane-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.plane-stage { padding: 10px; }
.plane-stage svg { width: 100%; height: auto; display: block; max-height: calc(100dvh - 270px); }
.plane-part { stroke: #1c2230; stroke-width: 3; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
.plane-part.cover { stroke: #7a1f1f; stroke-width: 3.5; }
.plane-part.hot { stroke: #b8860b; stroke-width: 6; filter: brightness(.93); }
.plane-part.has-img { fill-opacity: .28; }   /* basılı ürün: üstten görünüm resmi görünsün, durum rengi üstte */
.plane-img { pointer-events: none; }
.plane-label { font-size: 24px; fill: #3b4555; pointer-events: none; text-anchor: middle; dominant-baseline: central; font-weight: 600; }
.plane-label.small { font-size: 17px; }
.plane-label.count { font-size: 30px; font-weight: 800; fill: #16202e; }
.plane-label.count.small { font-size: 20px; }
.plane-label.zero { fill: #b42318; }
.plane-hole { fill: #7a1f1f; pointer-events: none; }
.plane-slot { fill: none; stroke: #7a1f1f; stroke-width: 2.5; pointer-events: none; }
.plane-inner { fill: none; stroke: #7a1f1f; stroke-width: 2; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #1c2230; display: inline-block; }
.tip {
  position: fixed; pointer-events: none; z-index: 60; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: 8px 10px; font-size: 13px; min-width: 170px; max-width: 280px;
}
.tip b { font-family: ui-monospace, monospace; font-size: 14px; }
.tip div { color: var(--muted); }

.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stat-list li:last-child { border-bottom: 0; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 14px 12px; }
.timeline li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }
.timeline li.err::before { background: var(--danger); }
.timeline .when { font-size: 12px; color: var(--muted); }
.timeline img { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; border: 1px solid var(--border); }

/* ---------- Modal / toast ---------- */
.modal-back {
  /* Görünür alana (visualViewport) oturur: mobilde klavye açılınca --app-vh/--app-vt ile küçülür → modal klavyenin
     arkasında kalmaz. Değişkenler yoksa (eski tarayıcı) tüm ekran. */
  position: fixed; left: 0; right: 0; top: var(--app-vt, 0px); height: var(--app-vh, 100%);
  background: rgba(16, 24, 40, .45); z-index: 7000;
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto;
}
.modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; display: flex; flex-direction: column; max-height: calc(var(--app-vh, 88vh) - 24px); }
.modal.wide { max-width: 760px; }
.modal-head, .modal-foot { flex: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.modal-foot .spacer { flex: 1; }
.x-btn { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px; }

.pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.pick {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.pick:hover { border-color: var(--primary); }
.pick.on { border-color: var(--primary); background: var(--primary-soft); }
.pick.disabled { opacity: .55; cursor: not-allowed; }
.pick .grow { flex: 1; min-width: 0; }
.pick .grow b { display: block; }

.big-clock { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0 12px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.alert { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid; }
.alert.warn { background: var(--warning-soft); border-color: #f3dc8a; color: #6b4a00; }
.alert.err { background: var(--danger-soft); border-color: #f5c2bd; color: var(--danger); }
.alert.info { background: var(--primary-soft); border-color: #c6dbfa; color: var(--primary); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.photo-preview { max-width: 100%; max-height: 220px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--border); }

.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 70; }
body:has(main#view.gm-view) .toasts, body:has(.gm-c) .toasts { z-index: 2300; }   /* Mail: uyarılar yazma penceresinin / okuma ekranının üstünde */
.toast { background: #16202e; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow-lg); max-width: 380px; }
.toast.err { background: var(--danger); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 50% 45%, #eef4fc, #dfe8f5 70%); position: relative; overflow: hidden;
}
.login { width: 100%; max-width: 380px; padding: 28px; position: relative; z-index: 1;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); }
.login img { height: 110px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 10px; }
.login h1 { text-align: center; font-size: 18px; margin-bottom: 20px; color: var(--muted); font-weight: 500; }
.login .btn { width: 100%; }

.loading { padding: 40px; text-align: center; color: var(--muted); }

@media (max-width: 1000px) {
  .plane-layout, .split { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(5, 240px); }
}
@media (max-width: 640px) {
  main#view { padding: 12px; }
  /* padding KISAYOLU kullanma: üstteki env(safe-area-inset-top) payını (çentik/durum çubuğu) ezmesin → içerik
     durum çubuğunun altına düzgün otursun. Yalnız yatay payı daralt. */
  .app-header { padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0;
    padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  .brand .product, .user-btn .who { display: none; }
  .brand img { height: 44px; }
  .apps-panel { width: min(332px, calc(100vw - 24px)); right: -52px; }
  .modules { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .module-btn { height: 150px; }
  .kv { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: 0; }
}

/* ---------- Yazdırılabilir sipariş formu (A4, iki kopya) ---------- */
.print-area { display: none; }
@page { size: A4 portrait; margin: 10mm; }
@media print {
  html, body { height: auto; background: #fff; }
  .print-area { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block; color: #000; }
}
.pf-page { width: 190mm; height: 270mm; overflow: hidden; display: flex; flex-direction: column; font-size: 10.5pt; }
.pf-copy { flex: 1 1 0; display: flex; flex-direction: column; padding: 3mm 2mm; min-height: 0; overflow: hidden; }
.pf-cut {
  flex: none; border-top: 1px dashed #555; position: relative; margin: 2mm 0; height: 0;
}
.pf-cut span {
  position: absolute; left: 50%; top: -2.2mm; transform: translateX(-50%);
  background: #fff; padding: 0 3mm; font-size: 8pt; color: #555;
}
.pf-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1d3c78; padding-bottom: 3mm; }
.pf-logo { height: 18mm; width: auto; }
.pf-title { text-align: right; line-height: 1.5; }
.pf-title h1 { font-size: 18pt; letter-spacing: .08em; color: #1d3c78; margin: 0 0 1mm; }
.pf-table { width: 100%; border-collapse: collapse; margin-top: 3mm; }
.pf-table tr:last-child td { border-bottom: 1px solid #999; }
.pf-table th, .pf-table td { border: 1px solid #999; padding: 1.2mm 3mm; text-align: left; white-space: normal; font-size: 10pt; }
.pf-table th { width: 55mm; background: #eef2f8; color: #000; text-transform: none; letter-spacing: 0; font-weight: 600; }
.pf-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-top: auto; padding-top: 3mm; }
.pf-sign { border: 1px solid #999; padding: 2.5mm 3mm; }
.pf-sign-title { font-weight: 700; margin-bottom: 1.5mm; }
.pf-sign-line { display: flex; gap: 2mm; border-bottom: 1px dotted #999; padding: 1mm 0; min-height: 6mm; align-items: flex-end; }
.pf-sign-line span { color: #444; }
.pf-sign-box { height: 10mm; color: #999; font-size: 8pt; padding-top: 1mm; }
.pf-foot { display: flex; justify-content: space-between; font-size: 8pt; color: #555; margin-top: 2mm; }

/* Yarı mamul raporu */
.pf-report { gap: 4mm; }
.wr-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6mm; padding: 2mm 0; }
.wr-stat { display: flex; flex-direction: column; line-height: 1.15; min-width: 38mm; }
.wr-stat span { font-size: 10pt; color: #444; }
.wr-stat b { font-size: 30pt; }
.wr-stat small { font-size: 9pt; color: #555; }
.wr-stat.done b { color: #1e7b3a; }
.wr-stat.left { text-align: right; }
.wr-stat.left b { color: #b42318; }
.wr-bar { height: 5mm; border-radius: 3mm; background: #f3d4d1; overflow: hidden; }
.wr-bar i { display: block; height: 100%; background: #1e7b3a; }
.wr-plane { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; }
.wr-plane svg { height: 100%; width: auto; max-width: 100%; }
.wr-plane .plane-part { stroke-width: 2.5; cursor: default; }
.wr-plane .plane-label { font-size: 20px; fill: #222; }
.wr-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2mm 7mm; font-size: 10pt; }
.wr-legend span { display: inline-flex; align-items: center; gap: 2mm; }
.wr-legend i { width: 4.5mm; height: 4.5mm; border: 1px solid #333; display: inline-block; }
.wr-info { margin-top: 0; }
.wr-info th { width: auto; }

/* ---------- Uçuş raporu (ekranda A4 önizleme, baskıda sayfa sonlu) ---------- */
.fr-doc { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.fr-page {
  width: min(210mm, 100%); min-height: 297mm; background: #fff; color: #111; padding: 12mm;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 4mm; font-size: 10pt;
}
.fr-body { flex: 1; display: flex; flex-direction: column; gap: 4mm; }
.fr-page .pf-foot { margin-top: 2mm; }
.fr-section h2 { font-size: 11pt; color: #1d3c78; border-bottom: 1px solid #c9d3e3; padding-bottom: 1mm; margin: 0 0 2mm; }
.fr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; align-items: start; }
.fr-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5mm; }
.fr-kpi { border: 1px solid #c9d3e3; border-radius: 2mm; padding: 2mm 2.5mm; display: flex; flex-direction: column; background: #f7f9fc; }
.fr-kpi span { font-size: 8pt; color: #555; }
.fr-kpi b { font-size: 13pt; color: #1d3c78; line-height: 1.3; white-space: nowrap; }
.fr-kpi small { font-size: 7.5pt; color: #666; }
.fr-kv { margin-top: 0; }
.fr-kv th, .fr-kv td { font-size: 8.5pt; padding: .8mm 2mm; }
.fr-kv th { width: 42%; }
.fr-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5mm; }
.fr-findings li { display: flex; gap: 2.5mm; border-left: 3px solid; padding: 1.2mm 2mm; font-size: 8.8pt; background: #f7f9fc; }
.fr-findings li.ok { border-color: #1e7b3a; }
.fr-findings li.warn { border-color: #c26a00; background: #fff8ec; }
.fr-findings li.bad { border-color: #b42318; background: #fdeeec; }
.fr-findings .lvl { font-weight: 700; min-width: 13mm; }
.fr-findings li.ok .lvl { color: #1e7b3a; }
.fr-findings li.warn .lvl { color: #c26a00; }
.fr-findings li.bad .lvl { color: #b42318; }
.fr-note { margin: 0; font-size: 8.5pt; color: #555; }
.fr-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 5mm; }
.fr-list { margin-top: 0; }
.fr-list th, .fr-list td { font-size: 8.5pt; padding: 1mm 2mm; }
.fr-list td:first-child, .fr-list th:first-child { width: 16mm; white-space: nowrap; }
.fr-list tr.warn td { background: #fff5dc; }
.fr-list tr.bad td { background: #fdeceb; }
.fr-empty { color: #666; font-size: 9pt; }

.chart { margin: 0; break-inside: avoid; }
.chart figcaption { font-weight: 700; font-size: 9pt; color: #1d3c78; margin-bottom: 1mm; }
.chart figcaption .unit { font-weight: 400; color: #666; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-band { fill: #eef1f6; }
.chart-grid { stroke: #e3e7ee; stroke-width: 1; }
.chart-axis { stroke: #999; stroke-width: 1; }
.chart-tick { font-size: 10px; fill: #555; font-family: system-ui, sans-serif; }
.chart-thr { stroke-width: 1; stroke-dasharray: 5 4; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1mm 4mm; font-size: 8pt; color: #333; margin-top: .5mm; }
.chart-legend span { display: inline-flex; align-items: center; gap: 1.5mm; }
.chart-legend i { width: 4mm; height: 1.2mm; display: inline-block; border-radius: 1mm; }
.chart-empty { font-size: 8.5pt; color: #777; border: 1px dashed #ccc; padding: 6mm; text-align: center; }
.map-bg { fill: #f6f8fb; }
.map-grid { stroke: #e3e7ee; stroke-width: 1; }
.map-air { fill: none; stroke: #1d4f91; stroke-width: 2.2; stroke-linejoin: round; }
.map-ground { fill: none; stroke: #8a94a6; stroke-width: 1.6; stroke-dasharray: 4 3; }
.map-start { fill: #1e7b3a; }
.map-end { fill: #b42318; }
.map-home { fill: #fff; stroke: #1d4f91; stroke-width: 2; }
.map-home-t { font-size: 9px; font-weight: 700; fill: #1d4f91; font-family: system-ui, sans-serif; }
.map-scale { stroke: #333; stroke-width: 2; }
.map-north { fill: #333; }
.chart-legend i.lg-air { background: #1d4f91; }
.chart-legend i.lg-ground { background: repeating-linear-gradient(90deg, #8a94a6 0 3px, transparent 3px 5px); }
.chart-legend i.lg-start { background: #1e7b3a; width: 2.5mm; height: 2.5mm; border-radius: 50%; }
.chart-legend i.lg-end { background: #b42318; width: 2.5mm; height: 2.5mm; border-radius: 0; }
.chart-legend i.lg-home { background: #fff; border: 1.5px solid #1d4f91; width: 2.5mm; height: 2.5mm; border-radius: 50%; }

@media print {
  .fr-doc { display: block; }
  .fr-page { width: auto; min-height: 0; padding: 0; box-shadow: none; break-after: page; }
  .fr-page:last-child { break-after: auto; }
}
@media screen and (max-width: 900px) {
  .fr-kpis { grid-template-columns: repeat(3, 1fr); }
  .fr-two, .fr-charts { grid-template-columns: 1fr; }
  .fr-page { min-height: 0; padding: 16px; }
}

/* Araçlar */
.upload-card { padding: 16px; margin-bottom: 16px; }
.upload-card .row { align-items: flex-end; }
.upload-progress { margin-top: 10px; }

/* Ürün Yönetimi */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.product-card { display: flex; flex-direction: column; color: var(--text); overflow: hidden; }
.product-card:hover { border-color: var(--primary); text-decoration: none; }
/* Mamul ve yedek parça kartları yan yana; kenarlık rengiyle ayrılır */
main#view .card.product-card.mamul { border: 2px solid #1d4f91; }
main#view .card.product-card.spare { border: 2px solid #d99a00; }
main#view .card.product-card.semi { border: 2px solid #1f9d55; }
.product-card.mamul:hover, .product-card.spare:hover, .product-card.semi:hover { box-shadow: var(--shadow-lg); }
.type-tag { white-space: nowrap; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.type-tag.mamul { background: #e6eef9; color: #1d4f91; }
.type-tag.spare { background: #fff5d6; color: #9a6700; }
.type-tag.semi { background: #e5f5ea; color: #1e7b3a; }
.product-preview { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 12px 40px; }
.product-preview svg { width: 100%; height: 200px; display: block; }
.product-preview .plane-part { stroke-width: 4; cursor: inherit; }
.product-info { padding: 14px 16px; }
.product-info .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 16px; }
.product-info .top .grow { flex: 1; }
.product-info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.product-info dt { color: var(--muted); }
.product-info dd { margin: 0; }
.part-group + .part-group { margin-top: 10px; }
.part-group h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
ol.steps { padding-left: 20px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Yalnızca yöneticilere açık modüller: kırmızı ton ---------- */
.tone-red {
  --primary: #b42318;
  --primary-hover: #912018;
  --primary-soft: #fdecea;
}
.module-btn.tone-red { border-color: #f3c9c4; background: linear-gradient(180deg, #fff, #fff6f5); }
.module-btn.tone-red .ico { background: #fdecea; color: #b42318; }
.module-btn.tone-red:hover { border-color: #b42318; }
.app-tile.tone-red .ico { background: #fdecea; color: #b42318; }
.app-tile.tone-red.on .ico { background: #b42318; color: #fff; }
main#view.tone-red .page-head h1 { color: #912018; }
main#view.tone-red .card { border-color: #f1d9d6; }

/* ---------- Yönetim paneli ---------- */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d92d20; box-shadow: 0 0 0 0 rgba(217,45,32,.6); animation: livepulse 1.6s infinite; vertical-align: middle; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(217,45,32,.55); } 70% { box-shadow: 0 0 0 8px rgba(217,45,32,0); } 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.admin-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (min-width: 1380px) { .admin-tiles { grid-template-columns: repeat(9, 1fr); } }
.admin-tiles .tile { border-top: 3px solid #b42318; padding: 9px 12px; }
.admin-tiles .tile .label { font-size: 12px; line-height: 1.25; }
.admin-tiles .tile .small { font-size: 11px; line-height: 1.3; }
.admin-tiles .tile .value { font-size: 26px; color: #912018; margin-top: 0; }
.admin-tiles .tile.alert { background: #fff4f2; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.admin-planes { display: grid; gap: 16px; }
.admin-planes.two { grid-template-columns: 1fr 1fr; }
.admin-plane-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; flex-wrap: wrap; }
.admin-plane-head .spacer { flex: 1; }
.admin-plane svg { max-height: calc(100dvh - 290px); }
.admin-plane { padding: 8px; }
.admin-plane .plane-label.idle { fill: #9aa3b2; font-weight: 500; }
.admin-plane .plane-label.printing { fill: #0b3d7a; }
.admin-plane .plane-label .pn { font-weight: 800; font-size: 32px; }
.admin-plane .plane-label .pr { font-weight: 700; font-size: 26px; fill: #1f5fbf; }
.admin-plane .plane-label.small .pn { font-size: 24px; }
.admin-plane .plane-label.small .pr { font-size: 20px; }
.admin-side { display: flex; flex-direction: column; gap: 16px; }
.side-title { font-size: 15px; margin-bottom: 10px; }
.online-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; }
.online-list li { display: flex; align-items: center; gap: 10px; }
.online-list .grow { flex: 1; min-width: 0; }
.online-list .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-wrap .avatar { width: 40px; height: 40px; }
.online-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #12b76a; border: 2px solid #fff; }
.printer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 460px; overflow: auto; }
.pcell { border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); min-width: 0; }
.pcell b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcell span { color: var(--muted); }
.pcell.blue { background: #e7f0fd; border-color: #c6dbfa; }
.pcell.blue span { color: #1f5fbf; font-weight: 600; }
.pcell.green { background: var(--success-soft); border-color: #b8e3c4; }
.pcell.red, .pcell.yellow { background: var(--danger-soft); border-color: #f5c2bd; }
.pcell.red span, .pcell.yellow span { color: var(--danger); font-weight: 600; }
.pcell.gray { opacity: .6; }
.pbar { display: block; height: 4px; border-radius: 2px; background: #c6dbfa; overflow: hidden; }
.pbar > i { display: block; height: 100%; background: #1f5fbf; }
@media (max-width: 1100px) { .admin-layout, .admin-planes.two { grid-template-columns: 1fr; } }

/* Yönetim: rakam seçici ve kırmızı uyarılar */
.tile-picker { width: 290px; max-height: 60vh; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.tile-picker .check { font-size: 13px; }
.picker-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.admin-tiles .tile.danger { background: #b42318; border-color: #b42318; border-top-color: #7a1010; }
.admin-tiles .tile.danger .label, .admin-tiles .tile.danger .value, .admin-tiles .tile.danger .small { color: #fff; }
.admin-tiles .tile.danger { animation: dangerpulse 2s infinite; }
@keyframes dangerpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } 50% { box-shadow: 0 0 0 6px rgba(180,35,24,0); } }
@media (prefers-reduced-motion: reduce) { .admin-tiles .tile.danger { animation: none; } }
.pcell.stale { background: #fdecea; border: 2px solid #b42318; }
.pcell.stale span { color: #b42318; font-weight: 700; }
.pcell em { font-style: normal; font-size: 10px; color: #b42318; font-weight: 700; line-height: 1.2; }
.pcell.outside { border: 2px solid #e8590c; }
.pcell em.out { color: #c2410c; }

/* Üst çubuk uyarıları */
.alert-btn { position: relative; }
.alert-btn.warn { color: #c2410c; }
.alert-btn.danger { color: #b42318; }
.alert-count {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #b42318; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--surface);
}
.alert-btn.warn:not(.danger) .alert-count { background: #e8590c; }
.alerts-panel { width: 340px; padding: 6px; }
.alerts-head { font-weight: 700; padding: 6px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.alert-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; color: var(--text); }
.alert-item:hover { background: var(--surface-2); text-decoration: none; }
.alert-item .n { min-width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.alert-item.danger .n { background: #b42318; }
.alert-item.warn .n { background: #e8590c; }
.alert-item b { display: block; font-size: 13px; }
.alert-item.critical { background: #fdecea; border: 1px solid #f5c2bd; }
.alert-item.critical .n { animation: critpulse 1.2s infinite; }
.alert-btn.critical { animation: critshake 1.6s infinite; }
.alert.critical { border-width: 2px; font-weight: 600; }
@keyframes critpulse { 0% { box-shadow: 0 0 0 0 rgba(180,35,24,.6); } 70% { box-shadow: 0 0 0 8px rgba(180,35,24,0); } 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0); } }
@keyframes critshake { 0%, 90%, 100% { transform: none; } 92% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 96% { transform: rotate(-8deg); } 98% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .alert-item.critical .n, .alert-btn.critical { animation: none; } }
.alerts-panel .empty { padding: 16px; }

/* Modül üstü özet şeridi */
/* auto-fit: kart sayısı ne olursa olsun şerit tüm genişliği doldurur (sağda boş sütun kalmaz) */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; display: flex; flex-direction: column; box-shadow: var(--shadow); min-width: 0; }
.stat .v { font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.15; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* sığmayan tutar statStrip'te küçültülür (fitStats) */
.stat .l { font-size: 12px; color: var(--muted); line-height: 1.25; }
.stat .s { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.alert { background: #fff4f2; border-color: #f5c2bd; margin: 0; }   /* genel .alert'in alt boşluğu kartı kısaltmasın */
.stat.alert .v { color: var(--danger); }
.stat.ok .v { color: var(--success); }
.stat.muted .v { color: var(--muted); }
/* Sol büyük ikonlu kart: ikon solda, değer/etiket sağda dikey */
.stat.has-ic { flex-direction: row; align-items: center; gap: 12px; }
.stat.has-ic .stat-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.stat-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: var(--primary-soft, rgba(37,99,235,.1)); color: var(--primary); }
.stat-ic svg { width: 26px; height: 26px; }
.stat.alert .stat-ic { background: var(--danger-soft, #fde8e6); color: var(--danger); }
.stat.ok .stat-ic { background: var(--success-soft, #e6f6ec); color: var(--success); }
.stat.muted .stat-ic { background: var(--border); color: var(--muted); }
.filters .input[type="date"] { width: 150px; }
.filters .lbl { font-size: 12px; color: var(--muted); }
.plane-label.faded { opacity: .25; }

/* Saha görev detayı */
.task-kv { grid-template-columns: 160px 1fr; }
.places-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.road-dist { height: 36px; display: flex; align-items: center; font-size: 16px; }
@media (max-width: 900px) { .places-grid { grid-template-columns: 1fr; } }
/* Akan (çok sayfalı olabilen) baskı formu */
.pf-page.pf-flow { height: auto; overflow: visible; gap: 2mm; }
.pf-flow .pf-signs { margin-top: 8mm; grid-template-columns: repeat(3, 1fr); }
.pf-h2 { font-size: 11pt; color: #1d3c78; margin: 4mm 0 1.5mm; border-bottom: 1px solid #c9d3e3; padding-bottom: .8mm; }
.pf-list th, .pf-list td { font-size: 9pt; }
.pf-empty { font-size: 9pt; color: #666; margin: 0; }

/* Uçuş videoları */
.video-list { display: flex; flex-direction: column; gap: 6px; }
.video-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.video-item .grow { flex: 1; min-width: 0; }
.video-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-player { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }

/* ---------- Mobil: yatay kayma olmasın ---------- */
/* Izgara çocukları içerikten geniş olmasın (geniş tablolar kendi kutularında kayar) */
.split > *, .plane-layout > *, .admin-layout > *, .admin-planes > *, .fr-two > *, .places-grid > *, .row > * { min-width: 0; }
.scroller { overflow-x: hidden; overscroll-behavior-x: none; }
html, body { overscroll-behavior-x: none; max-width: 100%; }
.card-pad .table-wrap, .card .table-wrap { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
@media (max-width: 640px) {
  /* iOS 16 px altı yazılı kutulara dokununca ekranı büyütür, sayfa yana kaymış görünür */
  .input, select.input, textarea.input, input, select, textarea,
  .chat-input, .mchat-input { font-size: 16px; }
  .filters { gap: 8px; }
  .filters .input, .filters select, .filters > .seg { width: 100% !important; max-width: 100%; }
  .filters .spacer { display: none; }
  .filters > .btn, .filters > a.btn { flex: 1 1 auto; }
  .page-head { gap: 8px; margin: -12px 0 12px; margin-left: 50%;
    padding: 12px calc(max((100vw - 1480px) / 2, 0px) + 12px); }
  .page-head h1 { font-size: 19px; }
  .page-head > div:last-child:not(.spacer) { width: 100%; }
  /* Mobilde modül/alt-modül açılışlarındaki ana sayfaya dönen geri oku gizlenir (global başlıktan erişilir); detay→liste geri okları kalır */
  .page-head > .back[href="#/"] { display: none; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-strip > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* tek kalan kart satırı doldursun */
  .stat .v { font-size: 19px; }
  .modal-back { padding: 12px 8px; }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 12px 14px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
  .header-right { gap: 0; }
  .icon-btn { width: 38px; height: 38px; }
  .apps-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }
  .alerts-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }
  .tile-picker { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }
}
@media (max-width: 640px) {
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .filters > input[type="search"], .filters > .seg, .filters > .btn, .filters > a.btn, .filters > .check,
  .filters > .menu-anchor, .filters > span.small { grid-column: 1 / -1; }
  .filters > .lbl { display: none; }
  .filters .input[type="date"] { width: 100% !important; }
  .filters > .seg { display: flex; }
  .filters > .seg button { flex: 1; }
}

/* Üst çubuk bildirimleri */
.notify-btn { position: relative; }
.notify-btn.on { color: var(--primary); }
.notify-btn .alert-count { background: var(--primary); }
.alert-item.info .n { background: var(--primary); }

/* Montaj görünümü (bölümler / bütün uçak) */
.asm-sec .asm-edge { stroke-width: 30; stroke-linejoin: round; }
.asm-sec .asm-fill { stroke-width: 8; stroke-linejoin: round; }
.asm-sec.todo .asm-edge { fill: #f2b705; stroke: #f2b705; }
.asm-sec.todo .asm-fill { fill: #fff8dc; stroke: #fff8dc; }
.asm-sec.done .asm-edge { fill: #1f9d55; stroke: #1f9d55; }
.asm-sec.done .asm-fill { fill: #e4f6ea; stroke: #e4f6ea; }
.asm-sec.clickable { cursor: pointer; }
/* Ürün ağacı görünümü (Ürün Yönetimi): durum yok, mavi */
.asm-sec.info .asm-edge { fill: #1d4f91; stroke: #1d4f91; }
.asm-sec.info .asm-fill { fill: #eef3fb; stroke: #eef3fb; }
.asm-sec.info.clickable:hover .asm-fill { fill: #dde8f7; stroke: #dde8f7; }
.asm-sec.info .asm-label .sub { fill: #1d4f91; }
.asm-sec.clickable.todo:hover .asm-edge { fill: #d99a00; stroke: #d99a00; }
.asm-sec.clickable.todo:hover .asm-fill { fill: #ffefb0; stroke: #ffefb0; }
.asm-sec.clickable.done:hover .asm-fill { fill: #d2f0dc; stroke: #d2f0dc; }
.asm-label { font-size: 54px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: #1c2230; pointer-events: none; }
.asm-label .sub { font-size: 40px; font-weight: 600; fill: #6b4a00; }
.asm-sec.done .asm-label .sub { fill: #146c3a; }
.asm-label .muted { font-size: 34px; font-weight: 500; fill: #5b6475; }

/* Tarih-saat seçici */
.dt-field { display: flex; gap: 8px; align-items: center; }
.dt-field .input { flex: 1; min-width: 0; }
.flatpickr-calendar { z-index: 80 !important; font-family: inherit; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--primary); border-color: var(--primary); }
.checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.checklist label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.checklist label.on { border-color: #1f9d55; background: #e4f6ea; }
.checklist input { width: 20px; height: 20px; }
.asm-summary { display: flex; flex-direction: column; gap: 10px; }
.asm-summary .row-step { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.asm-summary .row-step.done { border-color: #9ad8b0; background: #f3fbf6; }
.asm-summary .row-step.todo { border-color: #f3dc8a; background: #fffbea; }
.section-title { font-size: 15px; margin: 4px 0 8px; }
.asm-extra .plane-part { stroke: #1c2230; stroke-width: 4; }
.asm-extra.clickable { cursor: pointer; }
.asm-extra.clickable:hover .plane-part { stroke: #b8860b; stroke-width: 8; }
.asm-label.extra { font-size: 32px; }
.asm-label.extra .sub { font-size: 24px; }

/* GÖVDE / KAPAK / ELEKTRONİK katmanı: GÖVDE'de kapak ve elektronik gizli; diğerlerinde seçilmeyen katman silik */
svg[data-layer="body"] .layer-cover, svg[data-layer="body"] .layer-electronics { display: none; }
svg[data-layer="cover"] .layer-body, svg[data-layer="cover"] .layer-electronics,
svg[data-layer="electronics"] .layer-body, svg[data-layer="electronics"] .layer-cover {
  opacity: .2; pointer-events: none;
}
svg[data-layer="cover"] .plane-label.cover-label.layer-cover,
svg[data-layer="electronics"] .plane-label.cover-label.layer-electronics { font-size: 20px; font-weight: 800; fill: #7a1f1f; }
svg[data-layer] .plane-label.cover-label.small { font-size: 11px; }
.layer-toggle { display: flex; justify-content: flex-start; margin: 2px 4px 8px; }
.layer-toggle .seg button { min-width: 84px; font-weight: 700; letter-spacing: .04em; }

/* Üretim panosu: sütun aç/kapa */
.col-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.col-toggle { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.col-toggle.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.col-toggle .n { background: #e9edf3; color: #3b4555; border-radius: 999px; padding: 0 7px; font-size: 12px; }

/* Saha görevi: araç ekleme satırı */
.road-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.road-add select { flex: 1 1 180px; min-width: 0; }
.road-add input { flex: 0 1 140px; }

/* Yükleme çubuğu + iptal */
.upload-panel { display: flex; gap: 10px; align-items: center; }
.upload-panel .grow { flex: 1; min-width: 0; }

/* 3B uçuş oynatma (Cesium) */
.r3d-stage { position: relative; height: calc(100dvh - 190px); min-height: 420px; border-radius: var(--radius); overflow: hidden;
  background: #0b1220; box-shadow: var(--shadow); }
.r3d-map { position: absolute; inset: 0; }
.r3d-map .cesium-viewer-bottom { left: 180px; }
.r3d-loading { color: #cfd5e1; display: flex; align-items: center; justify-content: center; height: 100%; }
.r3d-hud { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(11, 18, 32, .78); color: #e6e9ef;
  border-radius: 10px; padding: 10px 12px; min-width: 210px; font-size: 13px; pointer-events: none; }
.r3d-hud > div { display: flex; justify-content: space-between; gap: 14px; line-height: 1.7; }
.r3d-hud > div span { color: #9aa4b6; }
.r3d-hud .r3d-hud-head { justify-content: flex-start; gap: 6px; align-items: center; margin-bottom: 4px; }
.r3d-hud .r3d-hud-head b { font-size: 18px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.r3d-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; }
@media (max-width: 640px) {
  .r3d-stage { height: calc(100dvh - 170px); }
  .r3d-hud { font-size: 12px; min-width: 0; padding: 8px 10px; }
  .r3d-tools { top: auto; bottom: 80px; right: 8px; max-width: 70%; }
}

/* Saha görevleri listesi: temel bilgi + küçük ayrıntılar */
.task-table td { vertical-align: top; white-space: normal; }
.task-table td:nth-child(3) { min-width: 260px; }
.task-sub { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.task-sub span { color: #8a93a5; }

/* Stok: uçak haritası daha büyük (yan panel dar, yükseklik sınırı ekran boyu) */
.stock-layout { grid-template-columns: minmax(0, 1fr) 260px; }
.stock-layout .plane-stage svg { max-height: calc(100dvh - 120px); min-height: 520px; }
@media (max-width: 900px) { .stock-layout .plane-stage svg { min-height: 0; } }

/* Kullanıcı menüsündeki modül bağlantıları (Araçlar, Kullanıcı Yönetimi) */
.dropdown .menu-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px;
  color: var(--text); font-size: 14px; text-decoration: none; }
.dropdown .menu-link:hover { background: var(--surface-2); text-decoration: none; }
.dropdown .menu-link svg { width: 18px; height: 18px; color: var(--primary); }
.dropdown .menu-link.tone-red svg { color: #b42318; }
.dropdown .menu-link.tone-purple { color: #6d28d9; font-weight: 700; }
.dropdown .menu-link.tone-purple svg { color: #7c3aed; }
html[data-theme="dark"] .dropdown .menu-link.tone-purple { color: #c4b5fd; }
.dropdown .menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---------- Evrak Yönetimi ---------- */
.doc-filters { align-items: center; }
.doc-search-wrap { position: relative; flex: 1 1 360px; min-width: 0; }
.doc-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.doc-search-wrap .doc-search { width: 100%; padding-left: 38px; height: 44px; font-size: 15px; }
.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; color: var(--text); text-decoration: none; }
.doc-row:hover { text-decoration: none; border-color: var(--primary); }
.doc-list.compact { gap: 0; }
.doc-list.compact .doc-row { padding: 10px 4px; border-bottom: 1px solid var(--border); align-items: center; }
.doc-list.compact .doc-row:last-child { border-bottom: 0; }
.doc-row .grow { flex: 1; min-width: 0; }
.doc-thumb { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: #fff; flex: 0 0 auto; }
.doc-thumb-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); }
.doc-thumb-icon svg { width: 28px; height: 28px; }
.doc-thumb-icon.video { color: #b7791f; }
.doc-thumb.big { width: 120px; height: 150px; }
.doc-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc-snippet { margin-top: 6px; font-size: 13px; color: #3b4555; background: var(--surface-2); border-radius: 6px; padding: 6px 8px; line-height: 1.45; }
.doc-snippet mark, .ocr-text mark { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 2px; }
.doc-chips { justify-content: flex-start; margin-top: 6px; }
.chip.light { background: var(--surface-2); color: var(--muted); }
.doc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; white-space: nowrap; }
.upload-files { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.upload-file { display: flex; gap: 8px; align-items: center; padding: 6px 8px; background: var(--surface-2); border-radius: 8px; }
.upload-file .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 8px; }
.chip-x { border: 0; background: none; cursor: pointer; margin-left: 4px; font-size: 14px; line-height: 1; color: inherit; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-stage { padding: 8px; }
.doc-preview { width: 100%; max-height: calc(100dvh - 220px); object-fit: contain; display: block; border-radius: 8px; background: #0b1220; }
.doc-preview.pdf { height: calc(100dvh - 220px); border: 0; background: #fff; }
.doc-preview.none { background: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px; }
.ocr-text { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.55; max-height: 55vh;
  overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }

/* ---------- Firma Yönetimi ---------- */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.co-card { display: flex; gap: 14px; align-items: center; padding: 14px; color: var(--text); text-decoration: none; }
.co-card:hover { text-decoration: none; border-color: var(--primary); }
.co-card.inactive { opacity: .6; }
.co-card .grow { flex: 1; min-width: 0; }
.co-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; }
.co-logo.big { width: 88px; height: 88px; }
.co-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary);
  background: var(--primary-soft); font-size: 18px; }
.co-logo.big.co-initials { font-size: 28px; }
.co-counts { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.co-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.co-head h2 { margin: 0 0 4px; font-size: 20px; }
.co-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.co-section-head h2 { font-size: 15px; margin: 0; flex: 1; }
@media (max-width: 900px) {
  .doc-layout, .co-layout { grid-template-columns: 1fr; }
  .doc-side { display: none; }
  .doc-preview.pdf { height: 70vh; }
}

/* Firma toplantıları */
.meet-list { display: flex; flex-direction: column; gap: 10px; }
.meet-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.meet-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.meet-head .grow { flex: 1; min-width: 160px; }
.meet-when { font-size: 13px; color: var(--primary); white-space: nowrap; }
.meet-sub { font-size: 12.5px; color: #3b4555; line-height: 1.5; }
.meet-sub span { color: var(--muted); }
.meet-notes { margin-top: 6px; font-size: 13px; white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.meet-notes.collapsed { max-height: 3.2em; overflow: hidden; position: relative; }
.meet-sides .pick-list { max-height: 34vh; }

/* İmza */
.sign-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sign-actions .btn { flex: 1 1 120px; }
.sign-block { margin-top: 10px; padding: 10px 12px; border: 1px solid #9ad8b0; background: #f3fbf6; border-radius: 10px; }
.sign-block .mono { word-break: break-all; }

/* Firma adresleri */
.addr-list { display: flex; flex-direction: column; gap: 8px; }
.addr-item { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.addr-item .grow { flex: 1; min-width: 0; }

/* Yedek parça stoğu */
.spare-list { display: flex; flex-direction: column; gap: 8px; }
.spare-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; }
.spare-row.low { border-color: #f5c2bd; background: #fff4f2; }
.spare-row .grow { flex: 1; min-width: 140px; }
.spare-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.spare-num b { font-size: 20px; color: var(--primary); }
.spare-row.low .spare-num b { color: var(--danger); }
.spare-num span { font-size: 11px; color: var(--muted); }
.spare-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.spare-stock { display: flex; align-items: baseline; gap: 8px; }
.spare-stock b { font-size: 32px; color: var(--primary); }

/* ---------- Ürün ağacı ---------- */
.tree-view-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ptree-root { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.ptree-level { border-left: 2px solid var(--border); margin-left: 12px; padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.ptree-node { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface-2); }
.ptree-node summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.ptree-node summary::-webkit-details-marker { display: none; }
.ptree-node summary::before { content: "▸"; color: var(--muted); }
.ptree-node[open] summary::before { content: "▾"; }
.ptree-node summary a { font-weight: 600; }
.ptree-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ptree-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ptree-part { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 1px 4px 1px 9px; font-size: 12px; color: var(--text); }
.ptree-part:hover { border-color: var(--primary); text-decoration: none; }
.tree-stock { min-width: 20px; text-align: center; border-radius: 999px; background: var(--surface-2); color: var(--faint); font-size: 11px; font-weight: 700; padding: 0 5px; }
.tree-stock.on { background: #e5f5ea; color: #1e7b3a; }

.ptree-sarf { margin-top: 8px; font-size: 13px; }
.usage-grid { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.usage-head { font-size: 12px; font-weight: 700; color: var(--muted); }
.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.usage-row .input { width: 90px; height: 32px; }
.usage-row.total { border-top: 1px solid var(--border); padding-top: 6px; }

/* ---------- Firma Yönetimi: Rehber ---------- */
.dir-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.dir-index { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; }
.dir-index a { text-align: center; font-size: 12px; font-weight: 700; padding: 3px 0; border-radius: 6px; color: var(--muted); }
.dir-index a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.dir-list { display: flex; flex-direction: column; gap: 14px; }
.dir-group { scroll-margin-top: 10px; }
.dir-letter { font-size: 14px; color: var(--primary); margin: 0 0 6px 4px; }
.dir-card { padding: 0; overflow: hidden; }
.dir-row { display: grid; grid-template-columns: 42px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; }
.dir-row + .dir-row { border-top: 1px solid var(--border); }
.dir-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.dir-main { min-width: 0; }
.dir-main b { display: block; }
.dir-company { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 3px; color: var(--text); }
.co-logo.xs { width: 20px; height: 20px; border-radius: 5px; }
.co-logo.xs.co-initials { font-size: 9px; }
.dir-note { margin-top: 2px; }
.dir-contact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dir-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-link svg { width: 15px; height: 15px; flex: none; }
.dir-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .dir-wrap { grid-template-columns: 1fr; }
  .dir-index { display: none; }
  .dir-row { grid-template-columns: 42px minmax(0, 1fr); }
  .dir-contact, .dir-actions { grid-column: 2; justify-content: flex-start; }
}

.print-kv { margin: 0 0 12px; }
.print-kv dd { word-break: break-word; }

/* ---------- Sekmeler (firma / rehber detayı) ---------- */
.tabs-card { padding: 0; overflow: hidden; margin-top: 16px; }
.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 10px; overflow-x: auto; scrollbar-width: thin; background: var(--surface-2); }
.tab { border: 0; background: none; padding: 12px 14px 10px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.tab-n { background: var(--border); color: var(--muted); border-radius: 999px; font-size: 11px; padding: 0 7px; line-height: 18px; }
.tab.on .tab-n { background: var(--primary-soft); color: var(--primary); }
.tab-body { padding: 16px; min-height: 160px; }
.co-top { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.co-top .co-head { flex: 1 1 320px; }
.co-top-kv { flex: 2 1 380px; margin: 0; }
.meet-item.link { color: var(--text); display: block; }
.meet-item.link:hover { border-color: var(--primary); text-decoration: none; }

/* ---------- Rehber kartları ---------- */
.dir-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dir-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px 14px; color: var(--text);
  transition: transform .15s, box-shadow .15s, border-color .15s; border-top: 3px solid var(--primary); min-width: 0; }
.dir-tile.user { border-top-color: #1f9d55; }
.dir-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; }
.dir-tile .dir-name { font-size: 15px; margin-top: 6px; }
.dir-tile .dir-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-tile .dir-company { justify-content: center; max-width: 100%; }
.dir-company { max-width: 100%; white-space: nowrap; }
.dir-org { overflow: hidden; text-overflow: ellipsis; }
.dir-kind { font-size: 11px; font-weight: 700; color: #1e7b3a; background: #e5f5ea; border-radius: 999px; padding: 1px 8px; flex: none; }
.dir-tile-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-width: 100%; }
.dir-avatar.lg { width: 64px; height: 64px; font-size: 20px; }
.dir-avatar.xl { width: 84px; height: 84px; font-size: 26px; flex: none; }
.dir-avatar.user { background: #e5f5ea; color: #1e7b3a; }
.dir-avatar.photo { object-fit: cover; padding: 0; }
a.dir-row { color: var(--text); }
a.dir-row:hover { background: var(--surface-2); text-decoration: none; }
.contact-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.contact-head h2 { font-size: 20px; }
.contact-kv { margin: 0; flex: 1 1 280px; }

/* ---------- Notlar ---------- */
.notes-panel { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.note-add { display: flex; flex-direction: column; gap: 8px; }
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-item { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.note-meta .grow { flex: 1; }
.note-body { white-space: pre-wrap; margin-top: 6px; line-height: 1.5; }

/* ---------- Takvim ---------- */
.cal-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-bar .grow { flex: 1; }
.cal-title { font-size: 16px; margin-left: 6px; min-width: 130px; }
.cal-legend { display: inline-flex; gap: 10px; font-size: 12px; color: var(--muted); margin-right: 6px; }
.cal-dot::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; background: var(--ev); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--border); gap: 1px; }
.cal-head { background: var(--surface-2); text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.cal-cell { background: var(--surface); min-height: 96px; padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.out { background: var(--surface-2); }
.cal-cell.out .cal-day { color: var(--faint); }
.cal-cell.today .cal-day { background: var(--primary); color: #fff; }
.cal-day { align-self: flex-end; font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-chip { --ev: #1f6feb; border: 0; text-align: left; font: inherit; font-size: 11.5px; border-radius: 5px; padding: 2px 5px; cursor: pointer;
  background: color-mix(in srgb, var(--ev) 14%, var(--surface)); color: var(--text); border-left: 3px solid var(--ev);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover { background: color-mix(in srgb, var(--ev) 26%, var(--surface)); }
.cal-chip.done { text-decoration: line-through; opacity: .6; }
.cal-time { font-weight: 700; margin-right: 4px; }
.randevu, .cal-dot.randevu { --ev: #1f6feb; }
.hatirlatma, .cal-dot.hatirlatma { --ev: #d99a00; }
.dogumgunu, .cal-dot.dogumgunu { --ev: #db2777; }
.cal-chip.dogumgunu { cursor: default; }
.toplanti, .cal-dot.toplanti { --ev: #8b5cf6; }
.kisisel, .cal-dot.kisisel { --ev: #0d9488; }
.cal-more { font-size: 11px; color: var(--primary); padding: 0 4px; border: 0; background: none; text-align: left; cursor: pointer; font-weight: 600; }
.cal-more:hover { text-decoration: underline; }
.event-note { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; line-height: 1.5; max-height: 45vh; overflow: auto; }
.event-kv dd { margin-bottom: 4px; }
.cal-day-list { display: flex; flex-direction: column; gap: 6px; }
.cal-day-list .cal-chip { font-size: 13px; padding: 6px 8px; white-space: normal; }
.cal-upcoming { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cal-upcoming h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-up { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; font: inherit; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.cal-up:hover { border-color: var(--primary); }
.cal-up.done { opacity: .6; }
.cal-up-when { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 120px; }
@media (max-width: 760px) {
  .cal-cell { min-height: 64px; }
  .cal-chip .cal-time { display: none; }
  .cal-legend { display: none; }
  .tab-body { padding: 12px; }
}

/* ---------- Ses / video evrakı: konuşma metni ve videodaki kişiler ---------- */
.doc-preview.audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 16px; }
.doc-preview.audio audio { width: min(520px, 100%); }
.tr-line { display: flex; gap: 8px; align-items: baseline; white-space: pre-wrap; padding: 1px 0; }
.tr-time { border: 0; background: var(--primary-soft); color: var(--primary); font: inherit; font-size: 11px; font-weight: 700;
  border-radius: 5px; padding: 0 6px; cursor: pointer; flex: none; font-variant-numeric: tabular-nums; }
.tr-time:hover { background: var(--primary); color: #fff; }
.face-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.face { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font: inherit; color: var(--text);
  border: 2px solid var(--border); border-radius: 12px; background: var(--surface); padding: 8px 6px; cursor: pointer; position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.face:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.face img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.face.unknown { border-style: dashed; border-color: #f3dc8a; }
.face.unknown img { filter: grayscale(.35); }
.face.known { border-color: #9ad8b0; }
.face b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face .small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-auto { position: absolute; top: 4px; right: 4px; font-size: 9.5px; font-weight: 700; background: var(--warning-soft); color: var(--warning);
  border-radius: 999px; padding: 0 6px; }
.face-assign { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.face-assign .grow { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.face-assign-img { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 170px; text-align: center; }
.face-assign-img img { width: 160px; height: 160px; border-radius: 14px; object-fit: cover; }
.face-pick { max-height: 50vh; overflow: auto; }
.pick-group { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 2px 2px; }
@media (max-width: 760px) { .face-assign-img { width: 100%; } }

/* ---------- Sesle yazdırma (metin kutusundaki mikrofon) ---------- */
.dict-wrap { position: relative; display: block; width: 100%; }
.dict-wrap > textarea.has-mic { width: 100%; padding-right: 44px; }
.dict-btn { position: absolute; right: 6px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dict-btn svg { width: 17px; height: 17px; }
.dict-btn:hover { color: var(--primary); border-color: var(--primary); }
.dict-btn.rec { background: #d92d20; border-color: #d92d20; color: #fff; animation: dictpulse 1.3s infinite; }
.dict-btn.busy { cursor: progress; }
.dict-time { position: absolute; right: 44px; bottom: 14px; font-size: 11px; font-weight: 700; color: #d92d20; font-variant-numeric: tabular-nums;
  background: var(--surface); padding: 0 4px; border-radius: 4px; }
.dict-spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: dictspin .8s linear infinite; }
@keyframes dictpulse { 0% { box-shadow: 0 0 0 0 rgba(217,45,32,.5); } 70% { box-shadow: 0 0 0 9px rgba(217,45,32,0); } 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } }
@keyframes dictspin { to { transform: rotate(360deg); } }
@media print { .dict-btn, .dict-time { display: none; } }

/* ---------- Uçuş detayı ---------- */
.fl-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fl-h { font-size: 15px; margin-bottom: 8px; }
.fl-log { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.fl-log-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-log-head h2 { font-size: 15px; }
.fl-log-up, .fl-media-up { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-log-up .input, .fl-media-up .input { flex: 1 1 280px; }
.fl-log-up .small, .fl-media-up .small { flex-basis: 100%; }
.fl-scrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.fl-tab-bar { display: flex; margin-bottom: 10px; }
.fl-tab-bar .grow { flex: 1; }
.fl-3d .r3d-stage.embed { height: min(72vh, 760px); }
.fl-notes { max-width: 900px; display: flex; flex-direction: column; gap: 14px; }
.fl-kind { max-width: 260px; }
.fl-note.ariza { border-left-color: var(--danger); }
.fl-note.iyilestirme { border-left-color: #8b5cf6; }
.fl-note.gozlem { border-left-color: var(--success); }
.fl-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.fl-media-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fl-thumb { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; padding: 0; background: #0b1220; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.fl-thumb:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.fl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fl-play { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; }
.fl-play svg { width: 34px; height: 34px; opacity: .8; }
.fl-media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fl-media-full { width: 100%; max-height: 72vh; object-fit: contain; background: #000; border-radius: 8px; }
@media (max-width: 900px) { .fl-top { grid-template-columns: 1fr; } }

/* ---------- Üretim planlayıcı (Gantt) ---------- */
.pl-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.pl-form .field { margin-bottom: 0; }
.pl-form .field:first-child { flex: 1 1 320px; }
.pl-run { padding-bottom: 2px; }
.pl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-head h2 { font-size: 15px; }
.pl-head .grow { flex: 1; }
.pl-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pl-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pl-legend i.busy, .pl-bar.busy { background: repeating-linear-gradient(45deg, #9aa3b2, #9aa3b2 5px, #b9c0cc 5px, #b9c0cc 10px); }
.pl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.pl-gantt { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 10px; }
.pl-inner { position: relative; }
.pl-axis, .pl-row { display: flex; }
.pl-axis { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--border); height: 30px; }
.pl-name { position: sticky; left: 0; z-index: 2; width: 110px; flex: none; background: var(--surface); border-right: 1px solid var(--border);
  padding: 0 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pl-axis .pl-name { background: var(--surface-2); color: var(--muted); font-weight: 700; }
.pl-warn { background: var(--warning); color: #fff; border-radius: 50%; width: 15px; height: 15px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.pl-track { position: relative; flex: none; }
.pl-row { height: 26px; border-bottom: 1px solid var(--border); }
.pl-row:hover .pl-track { background: var(--surface-2); }
.pl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--border-strong); }
.pl-tick span { position: absolute; top: 6px; left: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pl-tick.day { border-left: 1.5px solid var(--muted); }
.pl-tick.day span { font-weight: 700; color: var(--text); }
.pl-tick.now { border-left: 2px solid var(--danger); }
.pl-tick.now span { color: var(--danger); font-weight: 700; }
.pl-done { position: absolute; top: 0; height: 30px; border-left: 2px solid; }
.pl-done span { position: absolute; bottom: 2px; left: -9px; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 10px;
  font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pl-bar { position: absolute; top: 4px; height: 18px; border-radius: 4px; color: #fff; font-size: 10.5px; font-weight: 700; overflow: hidden;
  white-space: nowrap; padding: 0 4px; line-height: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); cursor: default; }
.pl-bar.busy { color: #1c2230; }
.pl-bar.est { opacity: .65; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 4px, transparent 4px 8px) !important; }
.pl-bar span { pointer-events: none; }

/* ---------- Alt durum çubuğu (canlı sunucu durumu) ---------- */
.app-footer { padding: 6px 20px; min-height: 42px; }
.statusbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.sb-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-label { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sb-item b { color: var(--text); font-weight: 700; min-width: 30px; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.sb-disk-bar { width: 90px; height: 8px; border-radius: 999px; background: var(--success-soft); border: 1px solid var(--border); overflow: hidden; }
.sb-disk-fill { display: block; height: 100%; width: 0; background: var(--primary); transition: width .4s; }
.sb-disk-fill.warn { background: var(--warning); }
.sb-disk-fill.bad { background: var(--danger); }
.sb-val { color: var(--muted); }
.sb-spark { width: 120px; height: 26px; display: block; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); }
.sb-line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sb-area { stroke: none; opacity: .16; }
.sb-line.cpu, .sb-cpu { stroke: #1f6feb; color: #1f6feb !important; }
.sb-area.cpu { fill: #1f6feb; }
.sb-line.gpu, .sb-gpu { stroke: #16a34a; color: #16a34a !important; }
.sb-area.gpu { fill: none; }
.sb-line.ram, .sb-ram { stroke: #9333ea; color: #9333ea !important; }
.sb-area.ram { fill: #9333ea; }
/* Durum çubuğu hep tek satır: genişlik azaldıkça önce ayrıntılar, sonra telif yazısı gizlenir (tablet) */
.statusbar { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1400px) { .sb-val { display: none; } .sb-spark { width: 90px; } .statusbar { gap: 14px; } }
@media (max-width: 1200px) { .footer-copy { display: none; } .fb-name { display: none; } .sb-spark { width: 70px; } }
@media (max-width: 960px) { .sb-spark { display: none; } .sb-disk-bar { width: 60px; } }
@media (max-width: 760px) {
  .app-footer { padding: 6px 10px; }
  .statusbar { gap: 10px; justify-content: space-between; width: 100%; flex-wrap: nowrap; overflow: hidden; }
  .sb-spark { display: none; }
  .sb-disk-bar { width: 50px; }
  .sb-users .sb-label { display: none; }
}

/* ---------- Gece teması (yalnızca ekranda; çıktılar her zaman açık renk) ---------- */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f141c;
    --header-bg: #0b0f16;   /* üst başlık: sayfa zemininden hafif daha kısık (koyu) */
    --head-band: #0d1118;   /* sayfa başlığı bandı: header ile içerik arası ara ton */
    --surface: #171e29;
    --surface-2: #1d2532;
    --text: #e4e9f1;
    --muted: #a3adbd;
    --faint: #7c8798;
    --border: #2a3444;
    --border-strong: #3a4659;
    --primary: #4a8ae0;
    --primary-hover: #3a78cc;
    --primary-soft: #1c2d47;
    --danger: #f2837a;
    --danger-soft: #3a1f1f;
    --success: #5cc986;
    --success-soft: #173323;
    --warning: #e3b341;
    --warning-soft: #362c12;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
    --st-bekliyor: #273142;
    --st-uretimde: #1f4a7a;
    --st-depo: #6b5a14;
    --st-montaj: #1f5a2c;
    --st-hata: #7a2626;
    --part-fill: #273142;
    --part-off: #1a212c;
    --cover-fill: #4a2626;
  }
  html[data-theme="dark"] .badge.blue, html[data-theme="dark"] .pcell.blue { background: #1c2d47; border-color: #2d4a73; color: #8bb8f5; }
  html[data-theme="dark"] .pcell.blue span { color: #8bb8f5; }
  html[data-theme="dark"] .badge.purple { background: #2a2140; border-color: #45356b; color: #c3a6f5; }
  html[data-theme="dark"] .badge.yellow { border-color: #5c4a17; }
  html[data-theme="dark"] .badge.green, html[data-theme="dark"] .pcell.green { border-color: #24583a; }
  html[data-theme="dark"] .badge.red, html[data-theme="dark"] .pcell.red, html[data-theme="dark"] .pcell.yellow,
  html[data-theme="dark"] .stat.alert, html[data-theme="dark"] .spare-row.low { border-color: #5c2a2a; background: var(--danger-soft); }
  html[data-theme="dark"] .pcell.stale, html[data-theme="dark"] .admin-tiles .tile.alert,
  html[data-theme="dark"] .module-btn.tone-red .ico, html[data-theme="dark"] .app-tile.tone-red .ico { background: var(--danger-soft); }
  html[data-theme="dark"] .progress, html[data-theme="dark"] .kanban-col, html[data-theme="dark"] .col-toggle .n { background: #232c3a; color: var(--muted); }
  html[data-theme="dark"] .login-wrap { background: radial-gradient(circle at 50% 45%, #1a2433, #0f141c 70%); }
  html[data-theme="dark"] .login { background: rgba(23, 30, 41, .9); }
  html[data-theme="dark"] .brand img, html[data-theme="dark"] .login img { filter: brightness(0) invert(1); }
  html[data-theme="dark"] .tone-red { --primary: #e5534b; --primary-hover: #c9443d; --primary-soft: #3a1f1f; }
  html[data-theme="dark"] .module-btn.tone-red { border-color: #5c2a2a; background: linear-gradient(180deg, var(--surface), #2a1a1d); }
  html[data-theme="dark"] .module-btn.tone-red .ico, html[data-theme="dark"] .app-tile.tone-red .ico { background: #3a1f1f; color: #f2837a; }
  html[data-theme="dark"] .module-btn.tone-red:hover { border-color: #e5534b; }
  html[data-theme="dark"] main#view .card.product-card.mamul { border-color: #4a8ae0; }
  html[data-theme="dark"] main#view.tone-red .card:not(.product-card) { border-color: #3a2a2d; }
  html[data-theme="dark"] .type-tag.mamul { background: #1c2d47; color: #8bb8f5; }
  html[data-theme="dark"] .alert.warn { border-color: #5c4a17; color: var(--warning); }
  html[data-theme="dark"] .alert.err { border-color: #5c2a2a; }
  html[data-theme="dark"] .alert.info { border-color: #2d4a73; }
  html[data-theme="dark"] .asm-sec.info .asm-edge { fill: #4a8ae0; stroke: #4a8ae0; }
  html[data-theme="dark"] .asm-sec.info .asm-fill { fill: #1a2638; stroke: #1a2638; }
  html[data-theme="dark"] .asm-sec.info.clickable:hover .asm-fill { fill: #213150; stroke: #213150; }
  html[data-theme="dark"] .asm-sec.info .asm-label .sub { fill: #8bb8f5; }
  html[data-theme="dark"] .tree-stock.on { background: #173323; color: #5cc986; }
  html[data-theme="dark"] .alert-item.critical { background: #3a1f1f; border-color: #5c2a2a; }
  html[data-theme="dark"] .face.unknown { border-color: #5c4a17; }
  html[data-theme="dark"] .face.known { border-color: #24583a; }
  html[data-theme="dark"] .dir-kind { background: #173323; color: #5cc986; }
  html[data-theme="dark"] .dir-avatar.user { background: #173323; color: #5cc986; }
  html[data-theme="dark"] .type-tag.semi { background: #173323; color: #5cc986; }
  html[data-theme="dark"] .type-tag.spare { background: #362c12; color: #e3b341; }
  html[data-theme="dark"] .plane-part, html[data-theme="dark"] .asm-extra .plane-part { stroke: #b9c4d6; }
  html[data-theme="dark"] .plane-part.cover { stroke: #f2837a; }
  html[data-theme="dark"] .plane-part.hot { stroke: #e3b341; filter: brightness(1.2); }
  html[data-theme="dark"] .plane-label, html[data-theme="dark"] .plane-label.count, html[data-theme="dark"] .asm-label { fill: #e4e9f1; }
  html[data-theme="dark"] .plane-label.zero { fill: #f2837a; }
  html[data-theme="dark"] .plane-hole { fill: #f2837a; }
  html[data-theme="dark"] .plane-slot, html[data-theme="dark"] .plane-inner { stroke: #f2837a; }
  html[data-theme="dark"] .legend i { border-color: #b9c4d6; }
  html[data-theme="dark"] .admin-plane .plane-label.printing { fill: #8bb8f5; }
  html[data-theme="dark"] .admin-plane .plane-label .pr { fill: #8bb8f5; }
  html[data-theme="dark"] .asm-sec.todo .asm-fill { fill: #3a3112; stroke: #3a3112; }
  html[data-theme="dark"] .asm-sec.done .asm-fill { fill: #173323; stroke: #173323; }
  html[data-theme="dark"] .asm-sec.clickable.todo:hover .asm-fill { fill: #4a3e14; stroke: #4a3e14; }
  html[data-theme="dark"] .asm-sec.clickable.done:hover .asm-fill { fill: #1e4230; stroke: #1e4230; }
  html[data-theme="dark"] .asm-label .sub { fill: #e3b341; }
  html[data-theme="dark"] .asm-sec.done .asm-label .sub { fill: #5cc986; }
  html[data-theme="dark"] .asm-label .muted { fill: #a3adbd; }
  html[data-theme="dark"] .asm-summary .row-step.done, html[data-theme="dark"] .sign-block { border-color: #24583a; background: #132a1d; }
  html[data-theme="dark"] .asm-summary .row-step.todo { border-color: #5c4a17; background: #2a2410; }
  html[data-theme="dark"] .checklist label.on { border-color: #24583a; background: #173323; }
  html[data-theme="dark"] .chart-grid, html[data-theme="dark"] .map-grid { stroke: #2a3444; }
  html[data-theme="dark"] .doc-snippet mark, html[data-theme="dark"] .ocr-text mark { background: #6b5a14; }
  html[data-theme="dark"] .sb-line.cpu, html[data-theme="dark"] .sb-cpu { stroke: #6aa3f0; color: #6aa3f0 !important; }
  html[data-theme="dark"] .sb-area.cpu { fill: #6aa3f0; }
  html[data-theme="dark"] .sb-line.gpu, html[data-theme="dark"] .sb-gpu { stroke: #5cc986; color: #5cc986 !important; }
  html[data-theme="dark"] .sb-line.ram, html[data-theme="dark"] .sb-ram { stroke: #c38cf5; color: #c38cf5 !important; }
  html[data-theme="dark"] .sb-area.ram { fill: #c38cf5; }
}

/* Üretim planlayıcı: yazıcı yazıcı yükleme listesi (ekran + çıktı) */
.pl-run { display: flex; gap: 8px; }
.pl-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 660px), 1fr)); gap: 14px; }
.pl-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pl-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; }
.pl-list-head span { color: var(--muted); font-size: 12px; }
.pl-list-note { padding: 5px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.pl-list-note.warn { color: var(--warning); font-weight: 600; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pl-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 5px 6px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.pl-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pl-table tr:last-child td { border-bottom: 0; }
.pl-table tr.done td { color: var(--muted); text-decoration: line-through; }
.pl-table tr.done td.pl-cbcell { text-decoration: none; }
.pl-cbcell { width: 28px; text-align: center; }
.pl-cbcell input { width: 16px; height: 16px; cursor: pointer; }
.pl-list { overflow-x: auto; }

/* Çıktı: açık renkler, akan sayfa, kutucuklar */
.print-area .pl-print { --surface: #fff; --surface-2: #f1f4f9; --border: #c9d0dc; --border-strong: #9aa3b2; --text: #000; --muted: #555;
  color: #000; font-size: 9.5pt; }
.pl-print .pl-pkv th { width: auto; white-space: nowrap; }
.pl-print .pl-pkv td { width: 30%; }
.pl-print .pl-legend { margin-bottom: 2mm; color: #333; font-size: 8.5pt; }
.pl-print .pl-gantt { overflow: visible; max-height: none; border-color: #9aa3b2; }
.pl-print .pl-axis, .pl-print .pl-name { position: static; }
.pl-print .pl-name { width: 110px; font-size: 8.5pt; }
.pl-print .pl-row { height: 17px; break-inside: avoid; }
.pl-print .pl-bar { top: 2px; height: 13px; font-size: 7pt; line-height: 13px; }
.pl-print .pl-tick span { font-size: 7.5pt; }
.pl-print .pl-list { break-inside: avoid; margin-bottom: 3mm; border-color: #9aa3b2; border-radius: 0; }
.pl-print .pl-list-head { font-size: 10pt; }
.pl-print .pl-ptable { margin-top: 0; }
.pl-print .pl-pbreak { break-before: page; }
.pl-print .pl-ptable th, .pl-print .pl-ptable td { width: auto; font-size: 8.5pt; padding: .8mm 1.6mm; }
.pl-print .pl-ptable td.mono { word-break: break-all; }
.pl-print .pl-dot { width: 7px; height: 7px; margin-right: 3px; }
.pl-cb { display: inline-block; width: 4mm; height: 4mm; border: 1.2px solid #000; text-align: center; line-height: 4mm; font-weight: 700; font-size: 9pt; }
.pl-print .pl-cbcell { width: 7mm; }
.pl-form .seg button { white-space: nowrap; }

/* Parça haritasında ayrık bölümler: montaja hazır (sarı çerçeve) / montajı biten (yeşil çerçeve) bölümün parçaları silik */
.plane-sec .sec-edge, .plane-sec .sec-base { display: none; }
.plane-sec.ready .sec-edge, .plane-sec.done .sec-edge { display: inline; stroke-width: 26; stroke-linejoin: round; }
.plane-sec.ready .sec-base, .plane-sec.done .sec-base { display: inline; fill: var(--surface); stroke: var(--surface); stroke-width: 4; }
.plane-sec.ready .sec-edge { fill: #f2b705; stroke: #f2b705; }
.plane-sec.done .sec-edge { fill: #1f9d55; stroke: #1f9d55; }
/* kapaklar bölüme sayılmaz (en son takılır): silikleşmez */
.plane-sec.ready .plane-part:not(.cover), .plane-sec.done .plane-part:not(.cover),
.plane-sec.ready .plane-hole:not(.layer-cover), .plane-sec.done .plane-hole:not(.layer-cover),
.plane-sec.ready .plane-slot:not(.layer-cover), .plane-sec.done .plane-slot:not(.layer-cover),
.plane-sec.ready .plane-inner:not(.layer-cover), .plane-sec.done .plane-inner:not(.layer-cover),
.plane-sec.ready .plane-label:not(.cover-label), .plane-sec.done .plane-label:not(.cover-label) { opacity: .28; }
.plane-sec.ready:hover .sec-edge { fill: #d99a00; stroke: #d99a00; }
.plane-sec.ready .plane-part:not(.cover), .plane-sec.done .plane-part:not(.cover) { stroke-width: 2; }
.sec-label { font-size: 54px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: #1c2230; pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 10px; stroke-linejoin: round; }
.sec-label .sub { font-size: 40px; font-weight: 600; fill: #6b4a00; }
.plane-sec.done .sec-label .sub { fill: #146c3a; }
.sec-label .muted { font-size: 34px; font-weight: 500; fill: #5b6475; }
html[data-theme="dark"] .sec-label { fill: #e6e9ef; }
html[data-theme="dark"] .sec-label .sub { fill: #f2c94c; }
html[data-theme="dark"] .plane-sec.done .sec-label .sub { fill: #4ade80; }
html[data-theme="dark"] .sec-label .muted { fill: #9aa3b2; }

/* Siparişin firması (logo + ad) */
.co-logo.sm { width: 28px; height: 28px; border-radius: 7px; }
.co-logo.sm.co-initials { font-size: 11px; }
.co-logo.md { width: 40px; height: 40px; border-radius: 9px; }
.co-logo.md.co-initials { font-size: 14px; }
.order-co { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--text); }
.order-co-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card .order-co { margin: 2px 0 4px; }
td .order-co { max-width: 220px; }
.order-title { display: inline-flex; align-items: center; gap: 12px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.link-btn:hover .order-co-name, .link-btn:hover > .muted { text-decoration: underline; }

/* Araçlar → Üretim Hataları */
.pe-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pe-top h3 { font-size: 13.5px; margin: 0 0 8px; }
.pe-top ol { margin: 0; padding-left: 20px; font-size: 13px; }
.pe-top li { padding: 3px 4px; border-radius: 6px; }
.pe-top li > span, .pe-top li > b { display: inline-block; }
.pe-top li { display: list-item; }
.pe-top li b { float: right; }
.pe-top li:hover { background: var(--surface-2); }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pe-card { overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.pe-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.pe-img { height: 180px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.pe-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-img.none { color: var(--faint); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.pe-detail .pe-img.none { height: 120px; border: 1px dashed var(--border-strong); border-radius: 10px; margin-bottom: 12px; }
.pe-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.pe-row { display: flex; align-items: center; gap: 6px; }
.pe-row .grow { flex: 1; }
.pe-code { font-weight: 700; color: var(--danger); font-size: 14px; }
.pe-desc { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pe-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pe-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.pe-note { max-width: 320px; white-space: normal; }
.pe-photo { width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; background: var(--surface-2); margin-bottom: 12px; display: block; }

/* Üretimdeki parça penceresi: büyük saatin altında ince ilerleme çubuğu */
.print-progress { display: flex; align-items: center; gap: 10px; max-width: 360px; margin: -4px auto 8px; }
.print-progress[hidden] { display: none; }
.print-progress .track { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.print-progress .track i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .6s; }
.print-progress .track i.paused { background: var(--warning); }
.print-progress span { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* Yeni uyarı / bildirim kutusu: sağ üst köşe, 3 sn sonra kaybolur */
.flash-stack { position: fixed; top: 72px; right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.flash { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--primary); box-shadow: var(--shadow-lg); color: var(--text); text-decoration: none;
  animation: flash-in .25s ease-out; transition: opacity .35s, transform .35s; }
.flash:hover { text-decoration: none; border-color: var(--primary); }
.flash.out { opacity: 0; transform: translateX(24px); }
.flash b { display: block; font-size: 13.5px; }
.flash .small { color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.flash .small.flash-body { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-width: 300px; line-height: 1.35; }
.flash-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.flash-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); }
.flash-ico svg { width: 18px; height: 18px; }
.flash.alert { border-left-color: var(--warning); }
.flash.alert .flash-kind { color: var(--warning); }
.flash.alert .flash-ico { background: var(--warning-soft); color: var(--warning); }
.flash.alert.danger, .flash.alert.critical { border-left-color: var(--danger); }
.flash.alert.danger .flash-kind, .flash.alert.critical .flash-kind { color: var(--danger); }
.flash.alert.danger .flash-ico, .flash.alert.critical .flash-ico { background: var(--danger-soft); color: var(--danger); }
@keyframes flash-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; transition: none; } }

/* Yazıcı Yönetimi → 3B görünüm (yazıcı odası) */
.pr3d-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pr3d-bar .spacer { flex: 1; }
.pr3d-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pr3d-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pr3d-stage { position: relative; height: min(72vh, 760px); min-height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #dfe4ea; }
.pr3d-stage canvas { display: block; }
.pr3d-labels { position: absolute; inset: 0; pointer-events: none; }
.pr3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.pr3d-side { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #1f2937; background: rgba(255,255,255,.85); padding: 3px 10px; border-radius: 6px; }
.pr3d-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; }
.pr3d-info .kv { grid-template-columns: 110px minmax(0, 1fr); }
.pr3d-info .kv dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 1000px) { .pr3d-stage { height: 60vh; } }
/* Tam ekran oda: sayfanın üstünde sabit katman; pencereler (modal) üstünde kalır */
.pr3d.pr3d-full { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: 12px 16px 16px; display: flex; flex-direction: column; }
.pr3d.pr3d-full .pr3d-stage { flex: 1; height: auto; min-height: 0; }
body.pr3d-lock { overflow: hidden; }

/* ---------- Güvenlik: araç giriş / çıkış ---------- */
.tr-plate { display: inline-flex; align-items: stretch; border: 2px solid #111827; border-radius: 6px; background: #fff; color: #111827;
  font-family: 'DejaVu Sans Mono', ui-monospace, monospace; font-weight: 800; overflow: hidden; line-height: 1; white-space: nowrap; }
.tr-plate i { font-style: normal; background: #1d4ed8; color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; display: flex; align-items: flex-end;
  padding-bottom: 4px; letter-spacing: .02em; }
.tr-plate b { font-size: 24px; padding: 8px 12px; letter-spacing: .06em; }
.tr-plate.sm b { font-size: 14px; padding: 4px 8px; }
.tr-plate.sm i { font-size: 8px; padding: 0 3px 2px; }
.veh-form { margin-bottom: 14px; }
.veh-label { display: block; font-weight: 700; margin-bottom: 8px; }
.veh-row { display: flex; gap: 10px; flex-wrap: wrap; }
.plate-input { font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; height: 56px; width: 260px; font-family: ui-monospace, monospace; }
.veh-row .input:not(.plate-input) { flex: 1 1 220px; height: 56px; }
.veh-row .btn.lg { height: 56px; padding: 0 26px; }
.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.veh-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; text-align: left; font: inherit;
  color: var(--text); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; }
.veh-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.veh-time { font-size: 13px; }
.veh-dur { font-size: 12px; color: var(--muted); }
.veh-exit { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--success); }
.veh-acts { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.veh-acts .btn { flex: 1; }

/* ---------- Sekreterya ---------- */
.sec-h { font-size: 15px; margin: 18px 0 10px; }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.visit-card { display: flex; flex-direction: column; gap: 5px; padding: 14px; color: var(--text); }
a.visit-card:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-lg); }
.visit-top { display: flex; justify-content: space-between; align-items: center; }
.visit-purpose { font-weight: 600; }
td.wrap { white-space: normal; max-width: 280px; }
.tab-pad { padding: 14px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guest-list { display: flex; flex-direction: column; }
.guest-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.guest-row:last-child { border-bottom: 0; }
.guest-row .grow { flex: 1; min-width: 0; }
.guest-mini { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.sub-h { font-size: 13.5px; margin: 16px 0 8px; color: var(--muted); }
.pick-list .pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.cargo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cargo-card { overflow: hidden; display: flex; flex-direction: column; }
.cargo-img { height: 170px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.cargo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cargo-img.none { color: var(--faint); font-weight: 600; }
.cargo-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cargo-body .btn { margin-top: 6px; }
.cargo-form { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.cargo-form select[size] { height: auto; margin-top: 6px; }
.cargo-preview { height: 200px; border: 1px dashed var(--border-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--faint); overflow: hidden; }
.cargo-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .cargo-form { grid-template-columns: 1fr; } .plate-input { width: 100%; } }

/* ---------- Güvenlik → Kameralar (izleme duvarı) ---------- */
.cw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cw-bar .spacer { flex: 1; }
.cw-grid { display: grid; gap: 6px; background: #0b0f17; padding: 6px; border-radius: 12px; }
.cw-grid.l1 { grid-template-columns: 1fr; }
.cw-grid.l4 { grid-template-columns: repeat(2, 1fr); }
.cw-grid.l6 { grid-template-columns: repeat(3, 1fr); }
.cw-grid.l6 .cw-tile:first-child { grid-column: span 2; grid-row: span 2; }
.cw-grid.l9 { grid-template-columns: repeat(3, 1fr); }
.cw-grid.l12 { grid-template-columns: repeat(4, 1fr); }
.cw-grid.l16 { grid-template-columns: repeat(4, 1fr); }
.cw-tile { position: relative; aspect-ratio: 16 / 9; background: #111827; border-radius: 6px; overflow: hidden; }
.cw-grid.l6 .cw-tile:first-child { aspect-ratio: auto; }
.cw-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cw-tile.max { position: fixed; inset: 0; z-index: 45; border-radius: 0; aspect-ratio: auto; }
.cw-head { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; opacity: .85; }
.cw-sel { max-width: 70%; background: rgba(17, 24, 39, .75); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
  font-size: 12px; padding: 3px 6px; }
.cw-tile:hover .cw-head { opacity: 1; }
.cw-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 14px; }
.cw-over[hidden] { display: none; }
.cw.cw-full { position: fixed; inset: 0; z-index: 40; background: #0b0f17; padding: 10px 12px; display: flex; flex-direction: column; }
.cw.cw-full .cw-bar { color: #e5e7eb; }
/* tam ekranda üst çubuk her zaman KOYU tema (açık temada beyaz üstüne beyaz yazı okunmuyordu) */
.cw.cw-full .cw-bar .muted { color: #9aa4b5; }
.cw.cw-full .cw-bar .btn { background: #1f2633; border-color: #343d4f; color: #e5e7eb; }
.cw.cw-full .cw-bar .btn:hover { background: #2a3345; }
.cw.cw-full .cw-bar .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.cw.cw-full .cw-bar .seg { background: #141a25; border-color: #343d4f; }
.cw.cw-full .cw-bar .seg button { color: #cbd5e1; }
.cw.cw-full .cw-bar .seg button:hover { background: #1f2633; }
.cw.cw-full .cw-bar .seg button.on { background: #e5e7eb; color: #0b0f17; box-shadow: none; }
.cw.cw-full .cw-bar .input, .cw.cw-full .cw-bar select { background: #1f2633; color: #e5e7eb; border-color: #343d4f; }
.cw.cw-full .cw-grid { flex: 1; min-height: 0; align-content: center; }

/* ---------- Güvenlik → Tanımlanamayan Kişiler ---------- */
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.fg-card { overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fg-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.fg-card.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.fg-img { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.fg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-check { position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.9); border-radius: 6px; padding: 3px 5px; display: flex; }
.fg-check input { width: 18px; height: 18px; }
.fg-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.fg-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.fg-head img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; }
.fg-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; }
.fg-shot { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface); font: inherit; font-size: 11px; color: var(--text); text-align: left; }
.fg-shot:hover { border-color: var(--primary); }
.fg-shot-img { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 100%; }
/* iPhone tarzı seçim kutucuğu: sağ üstte daire, seçilince primary dolgu + ✓ */
.fg-pick { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.28); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.fg-pick::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.fg-pick:hover { border-color: var(--primary); }
.fg-pick[aria-pressed="true"] { background: var(--primary); border-color: #fff; }
.fg-pick[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.fg-shot.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.fg-shot.selected .fg-shot-img img { filter: brightness(.94); }
.fg-seltools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.fg-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fg-shot span { padding: 0 6px; }
.fg-shot span:last-child { padding-bottom: 5px; }
.fg-frame { width: 100%; border-radius: 8px; display: block; }
@media (max-width: 700px) { .cw-grid.l9, .cw-grid.l12, .cw-grid.l16 { grid-template-columns: repeat(2, 1fr); } }
/* Sayfa başlığının sağı: alt modül seçimi (ve varsa işlem düğmesi) */
.head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.page-head > .seg:last-child, .page-head > .head-right .seg { flex: none; }
.page-head > .head-right, .page-head > .seg:last-child { margin-left: auto; }   /* sığmayıp alt satıra inse de sağda */
.order-co-line { margin-top: 3px; }
.order-co-line .order-co { font-size: 12px; font-weight: 600; max-width: none; }

/* ---------- Sipariş detayı: bağlı aşama kartları ---------- */
.od-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.od-h { font-size: 15px; margin: 0 0 10px; }
.od-info .kv { grid-template-columns: 110px minmax(0, 1fr); }
.od-flow { display: flex; flex-direction: column; }
.od-stage { display: grid; grid-template-columns: 40px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.od-stage:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 34px; bottom: -2px; width: 3px; border-radius: 2px;
  background: var(--border-strong); }
.od-stage.done:not(:last-child)::before { background: var(--success); }
.od-node { display: flex; justify-content: center; padding-top: 12px; }
.od-node span { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 13px; background: var(--surface); border: 3px solid var(--border-strong); color: var(--muted); position: relative; z-index: 1; }
.od-stage.done .od-node span { background: var(--success); border-color: var(--success); color: #fff; }
.od-stage.current .od-node span { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.od-card { padding: 12px 14px; }
.od-stage.current .od-card { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.od-stage.todo .od-card { opacity: .7; }
.od-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.od-top b { font-size: 15px; }
.od-lines { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.od-steps { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.od-step { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.od-step .grow { flex: 1; }
.od-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; }
.od-step.done .od-dot { background: var(--success); border-color: var(--success); }
.od-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.od-card > .btn.sm { margin-top: 8px; }
@media (max-width: 900px) { .od-layout { grid-template-columns: 1fr; } }

/* ---------- Raporlar ---------- */
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chip { --tone: var(--primary); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rp-chip span { font-size: 11px; font-weight: 700; color: var(--muted); }
.rp-chip:hover { border-color: var(--tone); }
.rp-chip.on { background: var(--tone); border-color: var(--tone); color: #fff; }
.rp-chip.on span { color: rgba(255,255,255,.85); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rp-card { --tone: var(--primary); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--tone); color: var(--text); box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .15s, border-color .15s; min-height: 150px; }
.rp-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--tone); }
.rp-card b { font-size: 15.5px; line-height: 1.3; }
.rp-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px;
  background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.rp-ico svg { width: 20px; height: 20px; }
.rp-mod { font-size: 12px; font-weight: 700; color: var(--tone); text-transform: uppercase; letter-spacing: .03em; }
.rp-card small { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: auto; padding-top: 6px; }
.rp-mod-tag { --tone: var(--primary); display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.rp-insights { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-left: 4px solid var(--primary); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.rp-insights b { display: block; margin-bottom: 4px; color: var(--primary); }
.rp-insights ul { margin: 0; padding-left: 18px; }
.rp-insights li { margin: 3px 0; }
.rp-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rp-chart { padding: 14px 16px; }
.rp-chart.wide { grid-column: 1 / -1; }
.rp-chart h3 { font-size: 14px; margin: 0 0 10px; }
.rp-canvas { position: relative; height: 300px; }
.rp-chart.wide .rp-canvas { height: 340px; }
.rp-heat { overflow-x: auto; }
.rp-heat table { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 11px; }
.rp-heat th { font-weight: 600; color: var(--muted); padding: 2px 4px; text-align: center; }
.rp-heat td { text-align: center; border-radius: 4px; min-width: 22px; height: 24px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.rp-table { margin-bottom: 16px; }
.rp-table-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 8px; }
.rp-table-head h3 { font-size: 14px; margin: 0; }
td.num, th.num { text-align: right; }
@media (max-width: 900px) { .rp-charts { grid-template-columns: 1fr; } }
/* Antetli rapor çıktısı */
.rp-print .pr-desc { font-size: 9.5pt; color: #444; margin: 2mm 0; }
.rp-print .pr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(32mm, 1fr)); gap: 2mm; margin: 2mm 0 3mm; }
.rp-print .pr-kpis div { border: 1px solid #c9d3e3; border-radius: 2mm; padding: 2mm 3mm; display: flex; flex-direction: column; }
.rp-print .pr-kpis b { font-size: 12pt; color: #1d3c78; }
.rp-print .pr-kpis span { font-size: 8pt; color: #555; }
.rp-print .pr-ins { border-left: 1.2mm solid #1d3c78; background: #eef3fb; padding: 2mm 4mm; margin-bottom: 3mm; font-size: 9pt; }
.rp-print .pr-ins ul { margin: 1mm 0 0; padding-left: 5mm; }
.rp-print .pr-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4mm; }
.rp-print .pr-chart { break-inside: avoid; }
.rp-print .pr-chart.wide { grid-column: 1 / -1; }
.rp-print .pr-chart h3 { font-size: 10pt; margin: 0 0 1.5mm; color: #1d3c78; }
.rp-print .pr-chart img { width: 100%; display: block; border: 1px solid #dde3ec; }
.rp-print .rp-heat td { height: 5mm; min-width: 0; font-size: 6.5pt; }
.rp-print .rp-heat th { font-size: 6.5pt; }
.rp-print .pr-sub { font-size: 8.5pt; color: #555; margin: 0 0 1.5mm; }
.rp-print .pf-list th { width: auto; }
.rp-print .pf-list th, .rp-print .pf-list td { font-size: 8pt; padding: .8mm 1.5mm; }
.rp-print .pr-table { break-inside: auto; }
/* Çoklu seçim açılır listesi */
.ms { position: relative; display: inline-block; }
.ms-btn { cursor: pointer; text-align: left; padding-right: 30px; min-width: 150px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ms-panel { position: absolute; z-index: 35; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 60vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.ms-panel[hidden] { display: none; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.ms-row:hover { background: var(--surface-2); }
.ms-row .grow { flex: 1; }
.ms-note { font-size: 12px; font-weight: 700; color: var(--muted); }
.ms-panel > .btn { width: 100%; margin-top: 6px; }
/* Montaj bitti: kuyruk numarası (metal etiket) */
.queue-notice { text-align: center; }

/* ---------- Kuyruk numarası: 4 vidalı, lazerle kazınmış metal etiket ---------- */
.qplate { --sc: 7px; display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; white-space: nowrap;
  padding: 4px calc(var(--sc) * 2 + 6px); border-radius: 4px; border: 1px solid #7d848f;
  background:
    radial-gradient(circle at 50% 50%, #3f444c 0 18%, #9aa1ab 22% 46%, #e7e9ed 52%, #6b7280 62%, transparent 66%) left 3px top 3px / var(--sc) var(--sc) no-repeat,
    radial-gradient(circle at 50% 50%, #3f444c 0 18%, #9aa1ab 22% 46%, #e7e9ed 52%, #6b7280 62%, transparent 66%) right 3px top 3px / var(--sc) var(--sc) no-repeat,
    radial-gradient(circle at 50% 50%, #3f444c 0 18%, #9aa1ab 22% 46%, #e7e9ed 52%, #6b7280 62%, transparent 66%) left 3px bottom 3px / var(--sc) var(--sc) no-repeat,
    radial-gradient(circle at 50% 50%, #3f444c 0 18%, #9aa1ab 22% 46%, #e7e9ed 52%, #6b7280 62%, transparent 66%) right 3px bottom 3px / var(--sc) var(--sc) no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 4px),
    linear-gradient(180deg, #eef0f3 0%, #cfd4db 38%, #e9ecf0 52%, #bfc5ce 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.25);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.qplate span { font: 800 12.5px/1.2 ui-monospace, 'DejaVu Sans Mono', monospace; letter-spacing: .14em; color: #2b3036;
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(0,0,0,.28); }
.qplate.md { --sc: 9px; padding: 7px calc(var(--sc) * 2 + 8px); border-radius: 5px; }
.qplate.md span { font-size: 17px; }
.qplate.lg { --sc: 14px; padding: 16px calc(var(--sc) * 2 + 16px); border-radius: 8px; border-width: 2px; }
.qplate.lg span { font-size: 38px; letter-spacing: .16em; }
/* Sipariş kartları */
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.oc-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; color: var(--text); transition: box-shadow .15s, border-color .15s; }
.oc-card:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-lg); }
.oc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oc-top b { font-size: 16px; color: var(--primary); }
.oc-product { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.oc-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; }
.oc-dl dt { color: var(--muted); }
.oc-dl dd { margin: 0; text-align: right; }
.oc-note { border-top: 1px solid var(--border); padding-top: 6px; }

/* ---------- Duyurular ---------- */
.ann-list { display: flex; flex-direction: column; gap: 10px; }
.ann-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: var(--text); border-left: 5px solid #1f6feb; }
.ann-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.ann-card.lv-ONEMLI, .ann-body.lv-ONEMLI { border-left-color: #f59e0b; }
.ann-card.lv-KRITIK, .ann-body.lv-KRITIK { border-left-color: #dc2626; }
.ann-card.read { opacity: .75; }
.ann-card.unread b { font-size: 16px; }
.ann-top { display: flex; align-items: center; gap: 8px; }
.ann-top .grow { flex: 1; }
.ann-snip { white-space: pre-wrap; color: var(--muted); font-size: 14px; }
.ann-body { white-space: pre-wrap; font-size: 15.5px; line-height: 1.6; border-left: 5px solid #1f6feb; margin-bottom: 16px; }
.ann-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ann-reads h3 { font-size: 14px; margin: 0 0 8px; }
.ann-prog { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.ann-prog i { display: block; height: 100%; background: var(--success); }
.ann-people { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.ann-people li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ann-people .avatar { width: 28px; height: 28px; font-size: 11px; }
@media (max-width: 800px) { .ann-reads { grid-template-columns: 1fr; } }

/* ---------- Kişisel pano */
.db-headline { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.db-headline h1 { margin: 0; font-size: 24px; }
.db-headline p { margin: 2px 0 0; }
.db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; grid-auto-flow: dense; }
.db-tile { display: flex; flex-direction: column; min-height: 170px; padding: 14px 16px; overflow: hidden; }
.db-tile.s2 { grid-column: span 2; }
.db-tile.s3 { grid-column: span 3; }
.db-grid.editing .db-tile { outline: 2px dashed var(--border-strong); outline-offset: -2px; }
.db-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.db-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-head h3 > .db-ic { display: inline-flex; align-items: center; margin-right: 7px; color: var(--muted); }
.db-head h3 > .db-ic svg { width: 15px; height: 15px; }
/* Pano kutucuğu katlama: başlıktaki ok; katlanınca gövde gizli, kutu kısalır */
.db-head > .db-chev { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: .5; cursor: pointer; flex: none; transition: transform .15s; }
.db-tile:not(.db-collapsed) > .db-head > .db-chev { transform: rotate(90deg); }
.db-tile.db-collapsed > .db-head { margin-bottom: 0; }
.db-tile.db-collapsed > .db-body { display: none !important; }
.db-tools { display: flex; gap: 4px; }
/* Kutu başlığındaki eylem düğmeleri (Yeni not / Yeni alarm / Canlı+Kaydedilenler): en sağda, standart pill görünümü */
.db-acts { display: flex; align-items: center; gap: 6px; }
.db-acts:empty { display: none; }
.db-head-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.db-head-btn:hover { background: var(--surface-2); }
/* 2+ düğme tek kapsülde (silindir) */
.db-acts-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.db-acts-pill > button { margin: 0; height: 26px; border-radius: 999px; }
.db-acts-pill .feed-savedbtn { min-width: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.db-acts-pill .feed-savedbtn:hover { color: var(--text); }
.db-acts-pill .feed-sharebtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 999px;
  background: var(--primary-soft, rgba(37,99,235,.1)); color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.db-acts-pill .feed-sharebtn:hover { background: var(--primary); color: #fff; }
.db-acts-pill .feed-sharebtn svg { width: 16px; height: 16px; }
.db-tools button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 6px; min-width: 28px; height: 28px; cursor: pointer; font-size: 13px; }
.db-tools button:disabled { opacity: .35; cursor: default; }
.db-tools button.danger { color: var(--danger); }
.db-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.db-none { color: var(--faint); font-size: 13px; margin: auto; text-align: center; }
.db-add { border: 2px dashed var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--muted); min-height: 170px; font-size: 15px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.db-add span { font-size: 34px; line-height: 1; }
.db-add:hover { color: var(--primary); border-color: var(--primary); }
.db-empty { grid-column: 1 / -1; }
.db-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.db-pick-item { text-align: left; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.db-pick-item span { font-size: 12px; color: var(--muted); }
.db-pick-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.db-preset-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 300px; overflow: auto; }
.db-preset-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.db-preset-row .grow { display: flex; flex-direction: column; }
.db-preset-save { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.db-preset-save .input { flex: 1; }
.db-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow: auto; max-height: 240px; }
.db-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.db-list li:last-child { border-bottom: 0; }
.db-list li > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.db-list li small { margin-left: auto; white-space: nowrap; color: var(--muted); }
.db-bday-ico { font-size: 15px; }
.db-bday-today { background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 8px; }
.db-bday-today small { color: var(--primary); font-weight: 600; }
.db-list li > a { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.db-list li small { color: var(--faint); white-space: nowrap; }
.db-list li.crit a { color: var(--danger); font-weight: 600; }
.db-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.db-n.danger { background: var(--danger); }
.db-n.warning { background: #d97706; }
.db-time { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.db-order .db-mini { width: 90px; }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 8px; }
.db-kpi { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
a.db-kpi:hover { text-decoration: none; border-color: var(--primary); }
.db-kpi b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-kpi span { font-size: 12px; color: var(--muted); }
.db-kpi small { font-size: 11px; color: var(--faint); }
.db-kpi.alert b { color: var(--danger); }
.db-kpi.warn b { color: #d97706; }
.db-kpi.ok b { color: var(--success); }
.db-pbar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--surface-2); margin: 8px 0 12px; }
.db-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.db-legend a { color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.db-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.db-chart { position: relative; flex: 1; min-height: 200px; }
/* Transfer İzleme (MASTER) */
.db-xfer { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.db-xfer-head { font-size: 13px; }
.db-xfer-tot b { font-variant-numeric: tabular-nums; }
.db-xfer-tot .db-n { background: var(--primary); color: #fff; border-radius: 10px; padding: 0 7px; font-weight: 700; }
.db-xfer-chart { min-height: 150px; max-height: 190px; flex: 0 0 auto; }
.db-xfer-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1; min-height: 0; }
.db-xfer-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.db-xfer-row.done { opacity: .6; }
.db-xfer-dir { font-weight: 800; font-size: 16px; line-height: 1; width: 18px; text-align: center; }
.db-xfer-dir.up { color: #dc2626; }
.db-xfer-dir.down { color: #16a34a; }
.db-xfer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.db-xfer-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.db-xfer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-xfer-user { flex: 0 0 auto; font-size: 12px; }
.db-xfer-bar { height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.db-xfer-bar i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }
.db-xfer-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.db-xfer-ok { color: var(--muted); }
.db-xfer-row.canceled .db-xfer-bar i { background: #dc2626; }
.db-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.db-modules a { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }
.db-modules a:hover { border-color: var(--primary); text-decoration: none; }
.db-modules .ico svg { width: 22px; height: 22px; }
.db-clock { margin: auto; text-align: center; }
.db-digital { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.db-digital small { font-size: 22px; color: var(--faint); margin-left: 4px; }
.db-date { color: var(--muted); font-size: 13px; margin-top: 8px; }
.db-analog { width: 150px; height: 150px; display: block; margin: 0 auto; }
.db-analog .face { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 3; }
.db-analog .tick { stroke: var(--faint); stroke-width: 1.5; }
.db-analog .tick.big { stroke: var(--text); stroke-width: 3.5; }
.db-analog .hand { stroke: var(--text); stroke-linecap: round; }
.db-analog .hand.h { stroke-width: 7; }
.db-analog .hand.m { stroke-width: 4.5; }
.db-analog .hand.s { stroke: #dc2626; stroke-width: 2; }
.db-analog .pin { fill: #dc2626; }
.db-weather { display: flex; flex-direction: column; gap: 10px; }
.db-wnow { display: flex; align-items: center; gap: 12px; }
.db-wicon { font-size: 44px; line-height: 1; }
.db-wnow > div { display: flex; flex-direction: column; }
.db-wnow b { font-size: 34px; line-height: 1; }
.db-wnow small { color: var(--muted); font-size: 12px; }
.db-wdays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.db-wdays > div { display: flex; flex-direction: column; background: var(--surface-2); border-radius: 8px; padding: 6px 2px; font-size: 12px; }
.db-wdays i { font-style: normal; font-size: 20px; }
.db-wdays small { color: var(--faint); }
.db-wdays em { font-style: normal; font-size: 11px; color: var(--primary); }
.db-wsrc { font-size: 11px; color: var(--faint); text-align: right; }
@media (max-width: 1100px) { .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-tile.s3 { grid-column: span 2; } }
@media (max-width: 700px) { .db-grid { grid-template-columns: minmax(0, 1fr); } .db-tile.s2, .db-tile.s3 { grid-column: auto; } }

/* ---------- Yönetim: sistem durumu */
.sys-banner { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; border: 1px solid; }
.sys-banner.good { background: var(--success-soft); border-color: #86d19b; color: var(--success); }
.sys-banner.bad { background: var(--warning-soft); border-color: #f1c453; color: var(--warning); }
.sys-banner ul { margin: 6px 0 0; padding-left: 20px; color: var(--text); }
.sys-gauges { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-bottom: 14px; }
.sys-gauge { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.sys-gauge > div:last-child { display: flex; flex-direction: column; }
.sys-gauge small { color: var(--muted); font-size: 12px; }
.sys-ring { --c: var(--success); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); position: relative; }
.sys-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.sys-ring b { position: relative; font-size: 14px; }
.sys-gauge.warn .sys-ring { --c: #d97706; }
.sys-gauge.crit .sys-ring { --c: var(--danger); }
.sys-up { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 2px 10px; font-size: 13px; color: var(--muted); }
.sys-up b { color: var(--text); }
.sys-up small { grid-column: 1 / -1; color: var(--faint); }
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; grid-auto-flow: dense; }
.sys-card { min-width: 0; }
.sys-card.s2 { grid-column: span 2; }
.sys-card.s3 { grid-column: 1 / -1; }
.sys-card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sys-card h4 { margin: 12px 0 6px; font-size: 13px; }
.sys-svc { list-style: none; margin: 0; padding: 0; }
.sys-svc li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border); }
.sys-svc li:last-child { border-bottom: 0; }
.sys-svc li > i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.sys-svc li.bad > i { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.sys-svc li div { display: flex; flex-direction: column; min-width: 0; }
.sys-svc small { color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.sys-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 8px; font-size: 13px; }
.sys-kv dt { color: var(--muted); }
.sys-kv dd { margin: 0; overflow-wrap: anywhere; }
.sys-names { display: flex; flex-wrap: wrap; gap: 5px; }
.sys-names span { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 9px; font-size: 12px; }
.sys-alert { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.sys-alert ul { margin: 4px 0 0; padding-left: 18px; }
.sys-okline { color: var(--success); font-size: 13px; }
.sys-log { font-size: 11px; max-height: 180px; overflow: auto; background: var(--surface-2); padding: 8px; border-radius: 6px; white-space: pre-wrap; }
.sys-bars { display: flex; flex-direction: column; gap: 8px; }
.sys-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 13px; }
.sys-bars small { color: var(--faint); }
.sys-bars i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--primary); display: block; min-width: 2px; }
.sys-chart { position: relative; height: 240px; }
.sys-card .table.compact td { padding: 4px 6px; font-size: 12px; }
.sys-card .rp-heat { overflow-x: auto; }
@media (max-width: 1100px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sys-grid { grid-template-columns: minmax(0, 1fr); } .sys-card.s2 { grid-column: auto; } .sys-up { margin-left: 0; } }

/* ---------- Durum çubuğu ayrıntı kutucukları */
.sb-hot { cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; transition: background .15s; }
.sb-hot:hover, .sb-hot.open { background: var(--surface-2); }
.sb-pop { position: fixed; z-index: 900; width: 300px; max-width: calc(100vw - 16px); max-height: min(70vh, 520px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); animation: sbp-up .16s ease-out; }
.sb-pop.wide { width: 400px; }
@keyframes sbp-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sbp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px 14px; position: sticky; top: 0; background: var(--surface); }
.sbp-head b { font-size: 14px; }
.sbp-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; }
.sbp-x:hover { background: var(--surface-2); color: var(--text); }
.sbp-body { padding: 0 14px 14px; font-size: 13px; }
.sbp-sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.sbp-users { list-style: none; margin: 0; padding: 0; }
.sbp-users li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sbp-users li:last-child { border-bottom: 0; }
.sbp-users li div { display: flex; flex-direction: column; min-width: 0; }
.sbp-users small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbp-big { display: flex; align-items: baseline; gap: 6px; }
.sbp-big b { font-size: 28px; }
.sbp-big span { color: var(--muted); }
.sbp-disk { height: 10px; border-radius: 5px; background: var(--success-soft); overflow: hidden; margin: 6px 0 10px; }
.sbp-disk i { display: block; height: 100%; background: var(--primary); }
.sbp-disk i.warn { background: var(--warning); }
.sbp-disk i.bad { background: var(--danger); }
.sbp-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.sbp-kv dt { color: var(--muted); }
.sbp-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sbp-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sbp-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; }
.sbp-bars i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--primary); min-width: 2px; }
.sbp-now { display: flex; gap: 20px; margin-bottom: 8px; }
.sbp-now > div { display: flex; flex-direction: column; }
.sbp-now span { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.sbp-now b { font-size: 24px; font-variant-numeric: tabular-nums; }
.sbp-now small { font-size: 11px; color: var(--muted); }
.sbp-now .cpu b { color: #1f6feb; }
.sbp-now .gpu b { color: #16a34a; }
.sbp-now .ram b { color: #9333ea; }
.sb-bigspark { width: 100%; height: 110px; display: block; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.sbp-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 2px; }

/* ---------- Sekreterya → Aramalar / Aramalarım */
.call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.call-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; cursor: pointer; border-left: 5px solid #d97706; }
.call-card.r-BAGLANDI { border-left-color: #16a34a; }
.call-card.r-ULASILAMADI { border-left-color: #dc2626; }
.call-card.done { opacity: .72; border-left-color: var(--border-strong); }
.call-card:hover { box-shadow: var(--shadow-lg); }
.call-top { display: flex; align-items: flex-start; gap: 10px; }
.call-top b { font-size: 15px; }
.call-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 17px; flex: none; }
.call-ico.big { width: 44px; height: 44px; font-size: 22px; }
.call-name { font-size: 18px; }
.call-tel { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-subject { font-weight: 600; }
.call-note { font-size: 13px; color: var(--muted); white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.call-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.call-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.call-cb { color: var(--danger); }
.call-table tr.call-open td:first-child { box-shadow: inset 4px 0 0 #d97706; }
.call-form { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.call-caller { position: relative; }
.call-sugg { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: -8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow: auto; }
.call-sugg-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 8px 10px 2px; }
.call-sugg button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; padding: 6px 10px; cursor: pointer; }
.call-sugg button:hover { background: var(--primary-soft); }
.call-sugg button span { font-size: 12px; color: var(--muted); }
.call-detail { display: flex; flex-direction: column; gap: 10px; }
.call-detail h4 { margin: 6px 0 0; }
.call-msg { background: var(--warning-soft); border-radius: 8px; padding: 8px 12px; white-space: pre-wrap; }
.call-msg small { display: block; color: var(--warning); font-weight: 600; margin-bottom: 2px; }
.call-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.call-notes li { display: flex; gap: 10px; align-items: flex-start; }
.call-nbody { white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; margin-top: 2px; }
.call-add { display: flex; gap: 8px; align-items: flex-end; }
.call-add textarea { flex: 1; }
@media (max-width: 760px) { .call-form { grid-template-columns: 1fr; } }
.call-form .input, .call-form select { width: 100%; }
.call-form select[size] { min-height: 130px; margin-top: 6px; }
.call-form .seg { display: flex; }
.call-form .seg button { flex: 1; white-space: nowrap; padding: 0 8px; }
.call-top .badge { white-space: nowrap; }

/* Seçici ikonları (segicons.js) */
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg-ico { width: 16px; height: 16px; flex: none; opacity: .8; }
.seg button.on .seg-ico, .tab.on .seg-ico, .side-nav a.on .seg-ico { opacity: 1; }
.side-nav a { display: flex; align-items: center; gap: 8px; }
/* Seçici ikonu, bulunduğu yerin svg kurallarından (ör. uçak haritası) etkilenmesin */
svg.seg-ico { width: 16px !important; height: 16px !important; min-height: 0 !important; max-height: none !important; display: inline-block !important; flex: none; }
svg.seg-ico * { fill: none; stroke: currentColor; stroke-width: 1.9; }
svg.seg-ico [fill="currentColor"] { fill: currentColor; stroke: none; }
.layer-toggle .seg button { white-space: nowrap; }

/* ---------- Canlı mesajlaşma */
.sbp-users li.chat-able { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding: 6px; }
.sbp-users li.chat-able:hover { background: var(--primary-soft); }
.sbp-users .grow { flex: 1; }
.sbp-chat { font-size: 16px; opacity: .6; }
.sbp-users li.chat-able:hover .sbp-chat { opacity: 1; }
.chat-btn.on { color: var(--primary); }
.chat-panel { width: min(380px, calc(100vw - 24px)); }
.chat-search { padding: 0 12px 8px; }
.chat-search .input { width: 100%; }
.chat-panel > div:last-child { max-height: min(60vh, 460px); overflow: auto; }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; padding: 8px 12px; cursor: pointer; }
.chat-row:hover { background: var(--surface-2); }
.chat-row .grow { min-width: 0; flex: 1; }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-row-top small { color: var(--faint); font-size: 11px; white-space: nowrap; }
.chat-row.unread b, .chat-row.unread .chat-prev { color: var(--text); font-weight: 700; }
.chat-prev { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-av { position: relative; display: inline-flex; }
.chat-on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--surface); }
.chat-flash .flash-ico { background: none; }

.chat-win { position: fixed; right: 16px; bottom: 58px; z-index: 950; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 140px));
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; animation: sbp-up .16s ease-out; }
.chat-win.drop { outline: 3px dashed var(--primary); outline-offset: -6px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--primary); color: #fff; }
.chat-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-status { font-size: 11px; opacity: .8; }
.chat-status.on::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 5px; }
.chat-x { border: 0; background: transparent; color: #fff; font-size: 22px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.chat-x:hover { background: rgba(255,255,255,.15); }
.chat-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.chat-day { align-self: center; font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; margin: 6px 0; }
.chat-empty { margin: auto; text-align: center; color: var(--faint); font-size: 13px; padding: 20px; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble { max-width: 80%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 6px 10px 4px; font-size: 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 60px; }
.chat-msg.mine .chat-bubble { background: var(--primary-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.chat-msg.pending { opacity: .6; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { align-self: flex-end; font-size: 10.5px; color: var(--faint); display: inline-flex; gap: 3px; }
.chat-tick { letter-spacing: -3px; }
.chat-msg.mine.seen .chat-tick { color: #2563eb; }
.chat-msg.mine.seen .chat-tick::after { content: '✓'; }
.chat-img img { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; }
.chat-audio { display: flex; align-items: center; gap: 6px; }
.chat-audio audio { height: 34px; max-width: 230px; }
.chat-audio small { color: var(--muted); font-size: 11px; }
.chat-file { display: flex; align-items: center; gap: 8px; color: var(--text); background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.chat-file svg { width: 18px; height: 18px; flex: none; }
.chat-file span { display: flex; flex-direction: column; min-width: 0; }
.chat-file b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file small { font-size: 11px; color: var(--muted); }
.chat-bar { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-input { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 18px; padding: 8px 12px; font: inherit; font-size: 14px; background: var(--surface-2); color: var(--text); max-height: 120px; min-height: 38px; }
.chat-input:focus { outline: none; border-color: var(--primary); }
.chat-bar button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.chat-bar button svg { width: 20px; height: 20px; }
.chat-bar button:hover { color: var(--primary); }
.chat-send { background: var(--primary) !important; color: #fff !important; }
.chat-mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chat-mic.rec { background: #dc2626 !important; color: #fff !important; transform: scale(1.18); box-shadow: 0 0 0 6px rgba(220,38,38,.2); }
.chat-mic.rec.cancel { background: #6b7280 !important; }
.chat-rec { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: #dc2626; font-weight: 600; background: var(--danger-soft); }
.chat-rec small { color: var(--muted); font-weight: 400; margin-left: auto; }
.chat-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #dc2626; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 600px) { .chat-win { right: 8px; left: 8px; width: auto; bottom: 56px; } }
.dropdown button.chat-row { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; }
.chat-panel .chat-search { padding: 4px 4px 8px; }
.dropdown .menu-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dropdown .menu-count[hidden] { display: none; }
/* Pano saati: nokta vuruşlu LED görünüm */
.db-clock.dotted { width: 100%; }
.db-dots { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 0%, #1b2433 0%, #0b1018 70%); box-shadow: inset 0 2px 10px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04); }
.db-matrix { display: block; height: 78px; width: auto; max-width: 100%; }
.db-dots-sec .db-matrix { height: 30px; margin-bottom: 4px; }
.db-matrix circle { fill: #ffffff; opacity: .06; transition: opacity .15s, fill .15s; }
.db-matrix circle.on { fill: #5ee6ff; opacity: 1; filter: drop-shadow(0 0 3px rgba(94, 230, 255, .85)); }
.db-dots-sec .db-matrix circle.on { fill: #ffb347; filter: drop-shadow(0 0 2px rgba(255, 179, 71, .8)); }
.db-clock.dotted .db-date { margin-top: 12px; }
.db-tile.s2 .db-matrix, .db-tile.s3 .db-matrix { height: 96px; }

/* ---------- Ayarlar */
.set-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.set-col { display: flex; flex-direction: column; gap: 14px; }
.set-card h3 { margin: 0 0 4px; }
.set-card > p { margin: 0 0 12px; }
.set-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.set-vol { display: inline-flex; align-items: center; gap: 8px; }
.set-range { width: 160px; accent-color: var(--primary); }
.set-sounds.off { opacity: .45; pointer-events: none; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: 0; }
.set-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-row small { color: var(--muted); font-size: 12px; }
.set-row select { width: 190px; }
.set-play { width: 38px; padding: 0; justify-content: center; }
@media (max-width: 900px) { .set-grid { grid-template-columns: minmax(0, 1fr); } .set-row select { width: 150px; } }
/* Pano saati gündüz teması: açık LCD panel, koyu mavi noktalar (gece teması yukarıdaki koyu panel) */
html:not([data-theme="dark"]) .db-dots { background: linear-gradient(180deg, #f7f9fc 0%, #e9eef5 100%); border: 1px solid var(--border);
  box-shadow: inset 0 1px 4px rgba(16, 24, 40, .08); }
html:not([data-theme="dark"]) .db-matrix circle { fill: #1d4f91; opacity: .07; }
html:not([data-theme="dark"]) .db-matrix circle.on { fill: #1d4f91; opacity: 1; filter: drop-shadow(0 0 1.5px rgba(29, 79, 145, .45)); }
html:not([data-theme="dark"]) .db-dots-sec .db-matrix circle.on { fill: #d97706; filter: drop-shadow(0 0 1.5px rgba(217, 119, 6, .45)); }
.chat-win.closed .chat-bar button { opacity: .4; pointer-events: none; }
/* Ayarlar → Arayüz: yazı / öğe boyutu (içerik alanı), sıkı görünüm, hareketleri azalt */
html.ui-scaled #view { zoom: var(--ui-scale); }
html.compact .card-pad { padding: 12px 14px; }
html.compact .table td, html.compact table td { padding-top: 5px; padding-bottom: 5px; }
html.compact .filters { padding: 8px 10px; gap: 8px; }
html.compact #view { padding-top: 12px; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.set-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.set-toggle input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.set-toggle span { display: flex; flex-direction: column; }
.set-toggle small, .set-state { color: var(--muted); font-size: 12px; }
.set-line .set-toggle { border-bottom: 0; }
.set-line.top { border-top: 1px solid var(--border); border-bottom: 0; margin-top: 6px; padding-top: 6px; }
.set-row .seg { flex-wrap: wrap; }
.set-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.set-vol input[type=time] { width: 130px; }
.personal-sel { min-width: 200px; font-weight: 600; }
/* Ayarlar: solda gruplar, sağda ayrıntı */
.set-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.set-nav { display: flex; flex-direction: column; padding: 8px; position: sticky; top: 8px; }
.set-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); }
.set-nav a:hover { background: var(--surface-2); text-decoration: none; }
.set-nav a.on { background: var(--primary-soft); color: var(--primary); }
.set-nav a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.set-nav small { color: var(--muted); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.set-nav a.on .set-ico { background: var(--surface); }
.set-ico svg.seg-ico { width: 18px !important; height: 18px !important; opacity: 1; }
.set-detail { min-width: 0; max-width: 860px; }
.set-actions.left { justify-content: flex-start; gap: 8px; }
.set-account { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
@media (max-width: 800px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; }
  .set-nav a { flex: none; }
  .set-nav small { display: none; }
}
/* Mobilde iOS Ayarlar tarzı ana liste */
.set-ios { display: flex; flex-direction: column; gap: 26px; max-width: 640px; margin: 2px auto 0; }
.ios-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--text); position: relative; }
.ios-row:hover { text-decoration: none; }
.ios-row:active { background: var(--surface-2); }
.ios-row + .ios-row::before { content: ''; position: absolute; left: 56px; right: 0; top: 0; border-top: 1px solid var(--border); }
.ios-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.ios-ico svg.seg-ico { width: 18px !important; height: 18px !important; opacity: 1; }
.ios-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ios-label b { font-weight: 500; font-size: 16px; line-height: 1.25; }
.ios-label small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-chev { width: 9px; height: 9px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); opacity: .55; margin-right: 2px; }
.set-detail-solo { max-width: 640px; margin: 0 auto; }
/* iPhone tarzı hesap kartı (ana listenin en üstü) */
.ios-account { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; color: var(--text); margin-bottom: -8px; }
.ios-account:hover { text-decoration: none; }
.ios-account:active { background: var(--surface-2); }
.ios-account .avatar { width: 58px !important; height: 58px !important; font-size: 22px !important; flex: none; }
.ios-acc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ios-acc-info b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.ios-acc-info small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-head .doc-search-wrap { width: 230px; }
.doc-head .doc-search-wrap .input { width: 100%; }
.doc-head select { max-width: 170px; }
.doc-head input[type=date] { width: 140px; }
.head-right.doc-head .doc-search-wrap { flex: 0 0 200px; width: 200px; min-width: 0; }
.head-right.doc-head select { width: 140px; }
.head-right.doc-head input[type=date] { width: 132px; }

/* ---------- Tüm onay kutuları iPhone tarzı anahtar (toggle) */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; cursor: pointer; margin: 0;
  width: 42px !important; height: 25px !important; border-radius: 999px; border: 0; vertical-align: middle;
  background: #d5dae2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: background .2s ease;
}
input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .2s cubic-bezier(.3,.7,.4,1.2);
}
input[type="checkbox"]:checked { background: #34c759; }
input[type="checkbox"]:checked::after { transform: translateX(17px); }
input[type="checkbox"]:indeterminate { background: #a7e3b6; }
input[type="checkbox"]:indeterminate::after { transform: translateX(8.5px); }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html[data-theme="dark"] input[type="checkbox"]:not(:checked):not(:indeterminate) { background: #39414f; }
/* Tablolardaki seçim kutuları biraz daha küçük */
td > input[type="checkbox"], th > input[type="checkbox"], .fg-check input[type="checkbox"] { width: 36px !important; height: 21px !important; }
td > input[type="checkbox"]::after, th > input[type="checkbox"]::after, .fg-check input[type="checkbox"]::after { width: 17px; height: 17px; }
td > input[type="checkbox"]:checked::after, th > input[type="checkbox"]:checked::after, .fg-check input[type="checkbox"]:checked::after { transform: translateX(15px); }
.set-toggle input[type="checkbox"] { margin-top: 1px; }
label.check { gap: 10px; }

/* ---------- Bekleme ekranı */
.ss { position: fixed; inset: 0; z-index: 5000; background: radial-gradient(120% 100% at 50% 40%, #0d1626 0%, #04070d 100%); opacity: 0; transition: opacity .35s ease; cursor: none; color: #fff; }
.ss.on { opacity: 1; }
.ss-radar { background: radial-gradient(120% 100% at 50% 50%, #062116 0%, #010805 100%); }
.ss-stars, .ss-matrix { background: #05080f; }
.ss-gravity { background: radial-gradient(120% 100% at 50% 20%, #111a2b 0%, #05080f 100%); }
.ss-gravity .ss-clock { bottom: auto; top: 8vh; opacity: .3; }
.ss-gravity .ss-time { font-size: clamp(40px, 7vw, 92px); }
.ss-gravity .ss-logo { opacity: .3; }
.ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-clock { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; transition: transform 2s ease; pointer-events: none; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.ss-time { font-size: clamp(64px, 12vw, 160px); font-weight: 200; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-date { font-size: clamp(16px, 2vw, 24px); opacity: .75; margin-top: 10px; text-transform: capitalize; }
.ss-logo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); height: 56px; opacity: .55; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.ss-hint { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 13px; opacity: .35; letter-spacing: .08em; }
.set-anims { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.set-anim { border: 1.5px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 3px; }
.set-anim small { color: var(--muted); font-size: 12px; }
.set-anim.on { border-color: var(--primary); background: var(--primary-soft); }
.set-anim.on b { color: var(--primary); }
/* Bekleme ekranı kilidi: saat yukarı kayar, arka plan bulanıklaşır, şifre kartı yükselir */
.ss .ss-canvas { transition: filter .5s ease, opacity .5s ease; }
.ss.ask .ss-canvas { filter: blur(10px) brightness(.55); }
/* Yıkım sahnesi: kilit (PIN/şifre) açılırken fizik arkada NET sürsün (panelin kendi buzlu-cam arka planı okunur kılar) */
.ss-gravity.ask .ss-canvas { filter: brightness(.82); }
.ss-gravity.ask .ss-clock { top: auto; }
.ss.ask .ss-clock { bottom: 64vh; transform: scale(.55) !important; opacity: .9; transition: bottom .5s ease, transform .5s ease; }
.ss.ask .ss-hint, .ss.ask .ss-logo { opacity: 0; transition: opacity .3s; }
.ss-lock { position: absolute; left: 50%; top: 52%; width: min(340px, calc(100vw - 32px)); transform: translate(-50%, 30px) scale(.96); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 22px 18px; border-radius: 22px; cursor: default;
  background: rgba(255,255,255,.10); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.2,.9,.3,1.15), opacity .35s; }
.ss-lock.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ss-lock.ok { opacity: 0; transform: translate(-50%, -60%) scale(1.05); }
.ss-lock.shake { animation: ss-shake .45s; }
@keyframes ss-shake { 0%, 100% { margin-left: 0; } 20%, 60% { margin-left: -12px; } 40%, 80% { margin-left: 12px; } }
.ss-av { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 30px; font-weight: 700;
  background: rgba(255,255,255,.18); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.ss-av img { width: 100%; height: 100%; object-fit: cover; }
.ss-name { font-size: 18px; font-weight: 600; }
.ss-row { display: flex; gap: 8px; width: 100%; }
.ss-pw { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff;
  padding: 0 14px; font-size: 16px; outline: none; }
.ss-pw::placeholder { color: rgba(255,255,255,.55); }
.ss-pw:focus { border-color: rgba(255,255,255,.6); }
.ss-go { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.9); color: #0b1220; font-size: 20px; font-weight: 700; cursor: pointer; }
.ss-err { min-height: 18px; font-size: 13px; color: #ffb4b4; }
.ss-other { font-size: 12.5px; color: rgba(255,255,255,.7); }
.ss .ss-lock, .ss .ss-lock * { cursor: auto; }

/* ---------- Giriş: bu cihazdaki hesaplar ve PIN */
.login-body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.acc-title { font-weight: 600; color: var(--muted); text-align: center; }
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-item { position: relative; }
.acc-btn { width: 100%; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 14px; padding: 10px 40px 10px 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.acc-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.acc-btn .acc-av { grid-row: 1 / 3; }
.acc-btn small { color: var(--muted); font-size: 12px; }
.acc-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--faint); font-size: 18px; cursor: pointer; }
.acc-x:hover { background: var(--danger-soft); color: var(--danger); }
.acc-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 18px; }
.acc-av img { width: 100%; height: 100%; object-fit: cover; }
.acc-other { align-self: center; }
.acc-form { display: flex; flex-direction: column; gap: 12px; }
.acc-back { align-self: flex-start; border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 16px; margin-bottom: -40px; }
.acc-me { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.acc-me .acc-av { width: 76px; height: 76px; font-size: 26px; }
.pin-title { text-align: center; color: var(--muted); font-size: 14px; }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 4px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary); transition: background .12s, transform .12s; }
.pin-dots i.on { background: var(--primary); transform: scale(1.1); }
.pin-dots.shake { animation: ss-shake .45s; }
.pin-err { min-height: 18px; text-align: center; color: var(--danger); font-size: 13px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.pin-key { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 26px; font-weight: 500; cursor: pointer; transition: background .1s, transform .1s; }
.pin-key:active { background: var(--primary-soft); transform: scale(.94); }
.pin-key.del { border: 0; background: transparent; font-size: 22px; }
.set-sub { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.pin-input { letter-spacing: .5em; font-size: 20px; text-align: center; }
.ss-sub { font-size: 13px; opacity: .75; }
.ss-dots { display: flex; gap: 16px; margin: 2px 0; }
.ss-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); transition: background .12s, transform .12s; }
.ss-dots i.on { background: #fff; transform: scale(1.1); }
.ss-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 12px; justify-content: center; margin-top: 2px; }
.ss-key { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: #fff;
  font-size: 24px; cursor: pointer; transition: background .1s, transform .1s; }
.ss-key:active { background: rgba(255,255,255,.3); transform: scale(.94); }
.ss-key.del { border: 0; background: transparent; font-size: 20px; }
.ss-lock[data-mode="pin"] { top: 55%; }
@media (max-height: 820px) { .ss.ask:has(.ss-lock[data-mode="pin"]) .ss-clock { opacity: 0; } .ss-lock[data-mode="pin"] { top: 50%; } }

/* ---------- Kişisel → Mail: stiller dosyanın sonunda (Gmail tarzı, .gm) */
.modal-body > div > .set-sub:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.mail-acc-dot { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.mail-acc-dot.sm { width: 10px; height: 10px; vertical-align: middle; }
/* Kişisel Ayarlar › Mail Hesaplarım / Sosyal Medya */
.mbx-list { display: flex; flex-direction: column; gap: 10px; }
.mbx { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.mbx .grow { flex: 1; min-width: 0; }
.mbx-e { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx .mail-acc-dot { width: 36px; height: 36px; font-size: 14px; }
.mbx-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.prov { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.prov:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.prov:disabled { opacity: .55; cursor: not-allowed; }
.prov b { font-size: 14px; }
.prov small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.prov-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.prov.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.prov-logo { width: 30px; height: 30px; display: grid; place-items: center; }
.prov-logo svg { width: 24px; height: 24px; }
.soc-ic { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; flex: none; }
.prov .soc-ic { width: 30px; height: 30px; border-radius: 8px; }
.soc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.soc-feed { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
@media (max-width: 700px) { .mbx { flex-wrap: wrap; } .mbx-acts { width: 100%; justify-content: flex-start; } }

/* ---------- Takvim görünümleri */
button.cal-day { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: inherit; }
button.cal-day:hover { background: var(--primary-soft); color: var(--primary); }
.cal-bar .seg { margin-right: 6px; }
.cal-time-view { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.cal-thead-row, .cal-allday, .cal-tgrid { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(0, 1fr)); }
.cal-thead-row { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-thead { border: 0; background: none; padding: 6px 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--muted); font: inherit; }
.cal-thead span { font-size: 11px; text-transform: uppercase; }
.cal-thead b { font-size: 20px; color: var(--text); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.cal-thead.today b { background: var(--primary); color: #fff; }
.cal-allday { border-bottom: 1px solid var(--border); min-height: 28px; }
.cal-allday > span { font-size: 11px; padding: 6px 4px; text-align: right; }
.cal-allday-cell { border-left: 1px solid var(--border); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-tscroll { height: min(62vh, 640px); overflow-y: auto; }
.cal-tgrid { position: relative; }
.cal-hours > div { height: 48px; font-size: 11px; color: var(--faint); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.cal-tcol { position: relative; height: calc(48px * 24); border-left: 1px solid var(--border); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 48px),
                    repeating-linear-gradient(to bottom, transparent 0, transparent 24px, color-mix(in srgb, var(--border) 50%, transparent) 24px, color-mix(in srgb, var(--border) 50%, transparent) 25px, transparent 25px, transparent 48px); }
.cal-tcol:hover { background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
.cal-tcol.today { background-color: color-mix(in srgb, var(--primary-soft) 25%, transparent); }
.cal-tev { position: absolute; border: 0; border-left: 3px solid var(--ev); border-radius: 6px; padding: 3px 6px; text-align: left; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--ev) 16%, var(--surface)); color: var(--text); font: inherit; font-size: 12px; display: flex; flex-direction: column; gap: 1px; z-index: 1; }
.cal-tev:hover { background: color-mix(in srgb, var(--ev) 26%, var(--surface)); z-index: 2; }
.cal-tev b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tev span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tev.done { opacity: .55; text-decoration: line-through; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.cal-ym { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.cal-ym-title { border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; padding: 2px 0 6px; color: var(--text); }
.cal-ym-title:hover { color: var(--primary); }
.cal-ygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-ygrid > span { font-size: 10px; color: var(--faint); }
.cal-yd { border: 0; background: none; font: inherit; font-size: 11.5px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--text); position: relative; }
.cal-yd:hover:not(:disabled) { background: var(--surface-2); }
.cal-yd.out { visibility: hidden; }
.cal-yd.has { font-weight: 700; color: var(--primary); }
.cal-yd.has::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--primary); }
.cal-yd.today { background: var(--primary); color: #fff; }
.cal-agenda { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.cal-ag-day { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--border); }
.cal-ag-day:last-child { border-bottom: 0; }
.cal-ag-day.today .cal-ag-date b { background: var(--primary); color: #fff; }
.cal-ag-date { display: flex; align-items: center; gap: 8px; padding: 10px; }
.cal-ag-date b { font-size: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.cal-ag-date span { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.cal-ag-list { display: flex; flex-direction: column; }
.cal-ag-ev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 0; border-left: 3px solid transparent; background: none; text-align: left; font: inherit; padding: 9px 12px; cursor: pointer; color: var(--text); }
.cal-ag-ev:hover { background: var(--surface-2); border-left-color: var(--primary); }
.cal-ag-ev.done { opacity: .55; text-decoration: line-through; }
.cal-ag-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 96px; color: var(--muted); }
@media (max-width: 700px) { .cal-time-view.d7 .cal-thead b { font-size: 15px; width: 26px; height: 26px; } .cal-tev span { display: none; } .cal-ag-day { grid-template-columns: 80px 1fr; } }
.cal-tev.short { flex-direction: row; align-items: center; padding: 1px 5px; }
.cal-tev.short b { font-size: 11.5px; line-height: 1.2; }
.cal-tev.short .cal-time { color: var(--muted); font-weight: 600; margin-right: 4px; }

/* ---------- Kişisel → Toplantılar */
.mt-h { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 10px; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mt-card { display: flex; gap: 14px; padding: 14px; cursor: pointer; border-left: 5px solid #8b5cf6; }
.mt-card:hover { box-shadow: var(--shadow-lg); }
.mt-card.pending { border-left-color: #d97706; background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); }
.mt-card.cancelled { opacity: .6; border-left-color: var(--border-strong); }
.mt-card.cancelled .mt-title { text-decoration: line-through; }
.mt-date { flex: none; width: 58px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; }
.mt-date b { font-size: 24px; line-height: 1; }
.mt-date span { font-size: 12px; text-transform: uppercase; font-weight: 700; }
.mt-date small { font-size: 12px; margin-top: 2px; font-weight: 600; }
.mt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.mt-title { font-size: 15px; }
.mt-rel { color: var(--primary); font-weight: 600; }
.mt-people { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-top: 4px; }
.mt-av { position: relative; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.mt-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); background: #9ca3af; }
.mt-av.st-KATILIYOR::after { background: #16a34a; }
.mt-av.st-BELKI::after { background: #d97706; }
.mt-av.st-KATILMIYOR::after { background: #dc2626; }
.mt-counts { margin-left: auto; display: inline-flex; gap: 8px; }
.mt-c.KATILIYOR { color: #16a34a; } .mt-c.BELKI { color: #d97706; } .mt-c.KATILMIYOR { color: #dc2626; } .mt-c.BEKLIYOR { color: var(--muted); }
.mt-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mt-r.KATILIYOR.on, .mt-r.KATILIYOR:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.mt-r.BELKI.on, .mt-r.BELKI:hover { background: #d97706; color: #fff; border-color: #d97706; }
.mt-r.KATILMIYOR.on, .mt-r.KATILMIYOR:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.mt-detail h4 { margin: 14px 0 6px; }
.mt-list { list-style: none; margin: 0; padding: 0; }
.mt-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.mt-list li .grow { flex: 1; min-width: 0; }
.mt-answer { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.mt-answer h4 { margin-top: 0; }
.mt-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.mt-form > * { min-width: 0; }
.mt-form .dt-field > .btn { display: none; }   /* ileri tarihli toplantıda "Şimdi" gereksiz; saat tam görünsün */
.mt-form .dt-field .input { width: 100%; }
.mt-who { display: flex; flex-direction: column; gap: 4px; }
.mt-who .input { width: 100%; }
.mt-pick { height: 360px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; }
.mt-pick .pick-list { max-height: none; overflow: visible; border: 0; }
.mt-pick .pick { min-width: 0; }
.mt-pick .pick .grow { min-width: 0; }
.mt-pick .pick b, .mt-pick .pick .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .mt-form { grid-template-columns: 1fr; } .mt-grid { grid-template-columns: 1fr; } }

/* Stajer etiketi (yardımcı personel seçimlerinde) */
.intern-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  background: #fff4e5; color: #b45309; border: 1px solid #fcd9a8; vertical-align: middle; }
html[data-theme="dark"] .intern-tag { background: #3a2a12; color: #fbbf24; border-color: #6b4a14; }
.pick.intern { border-style: dashed; }
.chip.intern { background: #fff4e5 !important; color: #b45309 !important; border-color: #fcd9a8 !important; }
.force-pw { max-width: 420px; }
.force-pw p { text-align: center; font-size: 13.5px; margin: -4px 0 6px; }
.pw-meter { height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.pw-meter.s1 i { width: 20%; background: #dc2626; } .pw-meter.s2 i { width: 40%; background: #f97316; }
.pw-meter.s3 i { width: 60%; background: #eab308; } .pw-meter.s4 i { width: 80%; background: #84cc16; } .pw-meter.s5 i { width: 100%; background: #16a34a; }
.force-pw .input { width: 100%; }

/* ---------- Parça 3B görünümü (G-code) */
.g3d-tip { width: 220px; height: 170px; margin-top: 8px; border-radius: 8px; background: var(--g3d-bg); overflow: hidden; }
.g3d-tip canvas { display: block; }
.g3d-img { display: block; width: 100%; height: auto; object-fit: contain; }
.g3d-img.loading { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px); min-height: 120px; }
.g3d-view { width: 100%; height: 420px; border-radius: 12px; background: var(--g3d-bg); overflow: hidden; position: relative; }
.g3d-view canvas { display: block; }
.g3d-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,.6); pointer-events: none; }
:root { --g3d-bg: radial-gradient(circle at 50% 30%, #ffffff, #e3e9f2); }
html[data-theme="dark"] { --g3d-bg: radial-gradient(circle at 50% 30%, #1d2a3f, #0b1220); }
.product-preview.g3d { background: var(--g3d-bg); display: flex; align-items: center; justify-content: center; }
.product-preview.g3d .g3d-img { max-height: 200px; width: auto; max-width: 100%; }
.gcode-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.gcode-head img { width: 64px; height: 64px; border-radius: 8px; background: var(--surface-2); object-fit: contain; flex: none; }
/* Yazıcı penceresi: tek yazıcı ve içindeki parça 3B */
.pr3d-pop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pr3d-solo { height: 360px; border-radius: 12px; background: var(--g3d-bg); overflow: hidden; }
.pr3d-solo canvas { display: block; }
@media (max-width: 760px) { .pr3d-pop { grid-template-columns: 1fr; } .pr3d-solo { height: 280px; } }

/* Mesajlaşma: gruplar ve Tüm Şirket kanalı */
.chat-logo { background: #fff; padding: 2px; border: 1px solid var(--border); }
.chat-logo img { width: 100%; height: 100%; object-fit: contain; }
.chat-grp { background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; font-weight: 700; }
.chat-row.company b { color: var(--primary); }
.chat-head-row { display: flex; align-items: center; justify-content: space-between; }
.chat-msg .chat-mav { align-self: flex-end; margin-right: 6px; flex: none; }
.chat-msg .chat-mav .avatar { width: 26px; height: 26px; font-size: 10px; }
.chat-from { font-size: 11.5px; font-weight: 700; color: var(--primary); }
.chat-gpick { max-height: 300px; overflow: auto; margin-top: 6px; }
.chat-members { list-style: none; margin: 0; padding: 0; }
.chat-members li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.chat-win.group .chat-head { background: linear-gradient(135deg, var(--primary), #0ea5e9); }
.chat-bar .chat-emoji { font-size: 19px; }
.emoji-pop { position: absolute; left: 8px; right: 8px; bottom: 62px; max-height: 260px; overflow: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 3; }
.emoji-h { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin: 6px 4px 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { border: 0; background: none; font-size: 22px; height: 38px; border-radius: 8px; cursor: pointer; }
.emoji-grid button:hover { background: var(--surface-2); transform: scale(1.12); }

/* ---------- Toplantı ekranı ve özeti */
.mr-state { font-weight: 700; }
.mr-state.DEVAM { color: #16a34a; }
.mr-state.BITTI { color: var(--muted); }
.mr-timer { font-variant-numeric: tabular-nums; }
.mr-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.mr-people { list-style: none; margin: 0; padding: 0; }
.mr-people li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.mr-people li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-people small { color: var(--muted); font-size: 11.5px; }
.mr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: none; }
.mr-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.mr-in { color: #16a34a !important; font-weight: 600; }
.mr-notes-head { display: flex; align-items: baseline; justify-content: space-between; }
.mr-note { width: 100%; min-height: 380px; font: inherit; font-size: 15px; line-height: 1.55; }
.mr-side { display: flex; flex-direction: column; gap: 14px; }
.mr-recon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #dc2626; font-weight: 600; }
.mr-level { flex: 1 1 100%; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.mr-level i { display: block; height: 100%; width: 0; background: #22c55e; transition: width .08s; }
@media (max-width: 1100px) { .mr-grid { grid-template-columns: minmax(0, 1fr); } }
.ms-kpis { margin-bottom: 14px; }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.ms-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-grid > * { min-width: 0; }
.ms-sp { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ms-sp .grow { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.ms-sp small { color: var(--muted); font-size: 12px; }
.ms-sp select { width: 180px; }
.ms-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ms-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.ms-unknown { margin-top: 12px; padding: 10px 12px; border: 1px dashed #f59e0b; border-radius: 10px; background: color-mix(in srgb, var(--warning-soft) 50%, transparent); }
.ms-unknown h4 { margin: 0 0 4px; }
.ms-points ul { margin: 0; padding-left: 18px; }
.ms-points li { margin: 6px 0; }
.ms-points small { color: var(--muted); }
.ms-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ms-note { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.ms-note-body { white-space: pre-wrap; margin-top: 4px; font-size: 14px; }
.ms-transcript { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow: auto; }
.ms-line { display: grid; grid-template-columns: 28px 46px 130px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ms-play { border: 0; background: var(--surface-2); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 10px; }
.ms-time { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 12px; }
.ms-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-proc { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .ms-grid, .ms-grid.three { grid-template-columns: 1fr; } .ms-line { grid-template-columns: 28px 40px 1fr; } .ms-line > span:last-child { grid-column: 2 / -1; } }
@media print { .ms-play, .ms-sp select, .ms-sp button, .head-right, .app-header, .app-footer, .page-head .back { display: none !important; } .ms-transcript { max-height: none; } }
.card textarea.mr-note { height: 400px; min-height: 400px; resize: vertical; }
.ms-note-body, .ms-note-body * { font-weight: 400; }

/* Yazıcı Yönetimi → Sıralama: raf katı kutuları, sürükle bırak */
.rack-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rack-bar .warn-text { color: var(--warning); font-weight: 600; }
.rack-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .rack-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rack-board { grid-template-columns: 1fr; } }
.rack-box { padding: 12px; }
.rack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }
.rack-count { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.rack-list { display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 4px; border-radius: 10px; background: var(--bg); }
.rack-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  cursor: grab; user-select: none; touch-action: none; }
.rack-item:hover { border-color: var(--primary); }
.rack-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-grip { color: var(--muted); letter-spacing: -2px; font-size: 13px; }
.rack-no { min-width: 22px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; text-align: right; }
.rack-ip { font-size: 11px; }
.rack-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex: none; }
.rack-dot.s-yazdiriyor { background: #3b82f6; } .rack-dot.s-hazir { background: #22c55e; } .rack-dot.s-tamamlandi { background: #a855f7; }
.rack-dot.s-durakladi { background: #eab308; } .rack-dot.s-hata { background: #ef4444; }
.rack-item.rack-hidden { display: none; }
.rack-holder { border: 2px dashed var(--primary); border-radius: 8px; background: var(--primary-soft); }
.rack-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; cursor: grabbing; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: .95; }

/* Ürün Yönetimi: yeni ürün menüsü, hammadde etiketi, detay (üst bilgiler + alt modüller), Treeview, seçim listesi */
.type-tag.raw { background: #f3e8ff; color: #7e22ce; }
html[data-theme="dark"] .type-tag.raw { background: #2e1f45; color: #c79bf5; }
main#view .card.product-card.raw { border: 2px solid #9333ea; }
.product-card.raw:hover { box-shadow: var(--shadow-lg); }
.product-ph { height: 200px; display: flex; align-items: center; justify-content: center; }
.product-ph span { font: 700 28px/1 ui-monospace, monospace; color: var(--muted); opacity: .45; letter-spacing: .04em; }
.new-wrap { position: relative; }
.new-wrap .caret { font-size: 11px; margin-left: 2px; }
.new-menu { min-width: 190px; }
.new-menu button { display: flex; align-items: center; gap: 4px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; }
.btn.danger-text { color: var(--danger); }
.row-inline { display: flex; align-items: center; gap: 8px; }
.pd-top { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pd-top { grid-template-columns: 1fr; } }
.pd-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.pd-info-grid > .row { grid-column: span 1; }
.pd-info-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-side h3 { font-size: 14px; margin: 0 0 8px; }
.pd-side .stat-list li { display: flex; justify-content: space-between; gap: 8px; }
.pd-tabs { margin: 18px 0 12px; display: flex; }
.pd-sub { font-size: 14px; margin: 18px 0 8px; color: var(--muted); }
.pd-3d { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pd-3d { grid-template-columns: 1fr; } }
.pd-image { display: block; background: var(--g3d-bg); border-radius: 12px; padding: 12px; text-align: center; }
.pd-image img { max-width: 100%; max-height: 560px; object-fit: contain; }
.pd-image.over, .drop-zone.over { outline: 2px dashed var(--primary); }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border: 2px dashed var(--border-strong);
  border-radius: 12px; background: var(--surface-2); cursor: pointer; text-align: center; padding: 20px; }
.drop-zone:hover { border-color: var(--primary); }
.drop-zone .dz-ico { font-size: 38px; opacity: .6; }
.pd-progress { margin-top: 10px; }
.tv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tv { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tv-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px; border-bottom: 1px solid var(--border); }
.tv-row:hover { background: var(--surface-2); }
.tv-row.root { background: var(--surface-2); font-weight: 600; }
.tv-row.passive { opacity: .55; }
.tv-row .type-tag { margin-right: 0; }
.tv-caret { width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; transition: transform .15s; flex: none; }
.tv-caret.none { cursor: default; }
.tv-caret.open { transform: rotate(90deg); }
.tv-code { font-weight: 600; }
.tv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-qty { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--text); }
span.tv-qty { cursor: default; }
.tv-meta { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.tv-actions { display: flex; gap: 4px; }
.tv .tv-kids .tv-row { background: none; }
.tv .tv-kids .tv-row:hover { background: var(--surface-2); }
@media (max-width: 640px) { .tv-name, .tv-meta { display: none; } }
.pick-list { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0 6px; }
.pick-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; color: var(--text); }
.pick-item:hover { background: var(--surface-2); }
.pick-item.on { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.pick-item.passive { opacity: .55; }
.pick-item .grow { flex: 1; min-width: 0; }
.pick-qty { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.pick-qty .field:last-child { flex: 1; min-width: 200px; }
.tv-row .spacer, .tv-bar .spacer, .pd-info-foot .spacer { flex: 1; }
.new-menu { min-width: 230px; }
.new-menu button { white-space: nowrap; }
.table td.actions { text-align: right; white-space: nowrap; }

/* İnsan Kaynakları: personel kartları (eksik evrak → kırmızı çerçeve), ayrıntı, özlük dosyaları, izinler */
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hr-card { display: flex; gap: 14px; padding: 14px; color: var(--text); border: 2px solid var(--border); align-items: flex-start; }
.hr-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); border-color: var(--primary); }
main#view .card.hr-card.missing, main#view .card.hr-top.missing { border: 2px solid var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.hr-card.left { opacity: .6; }
.hr-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hr-card-body b { font-size: 15px; }
.hr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hr-missing { margin-top: 6px; color: var(--danger); font-weight: 700; font-size: 13px; display: flex; flex-direction: column; }
.hr-missing span { font-weight: 400; font-size: 12px; }
.avatar.xl { width: 112px; height: 112px; font-size: 36px; }
.hr-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.hr-top-body { flex: 1; min-width: 260px; }
.hr-top-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hr-top-name h2 { margin: 0; font-size: 22px; }
.hr-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 14px; }
.hr-kv dt { color: var(--muted); }
.hr-kv dd { margin: 0; }
.hr-alert { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.hr-top-actions { display: flex; flex-direction: column; gap: 8px; }
.hr-tabs { margin-bottom: 12px; }
/* Bölümlü (masonry) panel akışı — biri katlanınca boşluk kalmaz, paneller yeniden dengelenir */
.hr-general { columns: 440px; column-gap: 14px; }
.hr-general > * { break-inside: avoid; margin: 0 0 14px; }
.hr-general h3 { margin: 0 0 10px; font-size: 15px; }
.hr-save { column-span: all; display: flex; justify-content: flex-end; margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; }
.hr-cv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hr-doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hr-doc .grow { flex: 1; min-width: 200px; }
.hr-doc.miss { border-color: var(--danger); background: var(--danger-soft); }
.hr-doc.na { opacity: .6; }
.hr-doc-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; background: var(--surface-2); }
.hr-doc.ok .hr-doc-ico { background: var(--success-soft); color: var(--success); }
.hr-doc.miss .hr-doc-ico { background: var(--danger); color: #fff; }
.hr-doc.pending { border-color: #f5a524; background: color-mix(in srgb, #f5a524 10%, transparent); }
.hr-doc.pending .hr-doc-ico { background: #f5a524; color: #fff; }
.hr-doc-photo { width: 34px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.hr-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.hr-timeline li { position: relative; }
.hr-timeline li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.leave-table tr.pending { background: var(--warning-soft); }
.leave-changed { color: var(--warning); font-weight: 600; }
.db-meeting .db-time { color: #7c3aed; }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.addr-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.addr-card.primary { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.addr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addr-text { white-space: pre-wrap; }
.addr-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* İzinler: kart / liste; ıslak imzalı formu eksik izin kırmızı çerçeveli */
.leave-view-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.leave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.leave-card { padding: 14px; display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--border); }
main#view .card.leave-card.unsigned { border: 2px solid var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.leave-card.st-bekliyor { border-color: var(--warning); }
.leave-card.st-iptal, .leave-card.st-reddedildi { opacity: .75; }
.leave-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.leave-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.leave-kv dt { color: var(--muted); }
.leave-kv dd { margin: 0; }
.leave-sign { border-top: 1px dashed var(--border); padding-top: 8px; }
.leave-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.leave-actions:empty { display: none; }
.leave-table tr.unsigned td { background: var(--danger-soft); }
.leave-table tr.unsigned td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.signed-miss { color: var(--danger); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.signed-ok a { color: var(--success); font-weight: 600; }

/* İnce ve şık kaydırma çubukları (tüm sistem): ok düğmesi yok, saydam iz, yuvarlak tutamak; tema rengine uyar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 40%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--primary) 70%, transparent); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {   /* Firefox */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent; }
}
/* Araçlar › Ağ Tarayıcı */
.ns-info { margin: -4px 0 10px; }
.ns-progress { margin-bottom: 12px; }
.ns-phase { font-size: 13px; margin-bottom: 6px; color: var(--primary); font-weight: 600; }
.ns-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.ns-dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.ns-table tr.off td { opacity: .55; }
.ns-ports { display: flex; flex-wrap: wrap; gap: 4px; }
.ns-ports .chip { font-size: 11px; padding: 1px 7px; }
.ns-known { color: var(--primary); font-weight: 600; }
/* MRP: malzeme kartı / ayrıntı, depo kartları, galeri */
.mrp-grid .product-card.critical { box-shadow: 0 0 0 3px var(--danger-soft); }
main#view .card.product-card.mrp-card.critical { border-color: var(--danger); }
.mrp-card-stock { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 8px; }
.mrp-card-stock b { font-size: 26px; line-height: 1; }
.mrp-card-stock span { color: var(--muted); font-size: 13px; }
.mrp-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.table tr.row-alert td { background: var(--danger-soft); }
.mrp-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
main#view .card.mrp-top.critical { border: 2px solid var(--danger); }
.mrp-top-img { width: 200px; height: 200px; border-radius: 12px; background: var(--g3d-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.mrp-top-img img { width: 100%; height: 100%; object-fit: contain; }
.mrp-top-img .product-ph { height: auto; }
.mrp-top-body { flex: 1; min-width: 280px; }
.mrp-top-stock { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mrp-top-stock b { font-size: 34px; line-height: 1; }
.mrp-top-stock span { color: var(--muted); }
.mrp-depots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mrp-depot { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.mrp-depot.empty { opacity: .7; }
.mrp-depot.passive { opacity: .55; }
.mrp-depot-name { display: flex; align-items: center; gap: 8px; }
.mrp-depot-qty { font-size: 42px; font-weight: 800; line-height: 1.05; color: var(--primary); font-variant-numeric: tabular-nums; }
.mrp-depot-qty small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.mrp-resp { display: flex; align-items: center; gap: 8px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.mrp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mrp-gallery figure { margin: 0; }
.mrp-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); }
.mrp-gallery figcaption { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; }
.mrp-color { width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; flex: none; }
.mrp-doc { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 10px 12px 0; margin-bottom: 8px; }
.table td.num.neg b { color: var(--danger); }
.table td.num.pos b { color: var(--success); }
.mrp-review input.input { width: 90px; }
/* Toplantı özeti: not düzenleme ve yazdırma belgesi */
.ms-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-note-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-doc { color: #000; font-size: 10.5pt; }
.mp-sec { margin-top: 5mm; break-inside: avoid-page; }
.mp-sec h2 { font-size: 12pt; margin: 0 0 2mm; border-bottom: 1px solid #999; padding-bottom: 1mm; }
.mp-sec ul { margin: 0; padding-left: 5mm; }
.mp-sec li small { color: #555; }
.mp-empty { color: #666; margin: 0; }
.mp-table { border-collapse: collapse; width: auto; }
.mp-table td { padding: 1mm 4mm 1mm 0; }
.mp-note { margin-bottom: 3mm; break-inside: avoid; }
.mp-pre { white-space: pre-wrap; }
.mp-line { margin-bottom: 1mm; }
.mp-time { color: #666; margin-right: 2mm; font-variant-numeric: tabular-nums; }
/* Malzeme tipleri: demirbaş, sarf malzeme */
.type-tag.fixture { background: #e0f2fe; color: #0369a1; }
.type-tag.consumable { background: #fce7f3; color: #be185d; }
html[data-theme="dark"] .type-tag.fixture { background: #0c2a3d; color: #7cc4f0; }
html[data-theme="dark"] .type-tag.consumable { background: #3a1429; color: #f09cc6; }
main#view .card.product-card.fixture { border: 2px solid #0284c7; }
main#view .card.product-card.consumable { border: 2px solid #db2777; }
/* Satın Alma */
.pu-head { margin-bottom: 14px; }
.pu-invoices { display: flex; flex-direction: column; gap: 12px; }
.pu-invoice.nofile { border-left: 4px solid var(--warning); }
.pu-inv-total { text-align: right; margin-top: 6px; font-weight: 600; }
.table.compact td { padding-top: 5px; padding-bottom: 5px; }
.pu-lines select.input { min-width: 260px; }
.pu-lines input.input { width: 120px; }
.pu-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pu-quote { padding: 14px; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.pu-quote:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-lg); }
.pu-quote-title { font-weight: 700; font-size: 15px; }
.pu-quote-total { font-size: 24px; font-weight: 800; margin: 6px 0 2px; }
.pu-quote-total small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.pre { white-space: pre-wrap; }
.table tfoot td { border-top: 1px solid var(--border); }

/* MASTER (sistem sahibi) modülü: mor ton */
.tone-purple { --primary: #7c3aed; --primary-hover: #6d28d9; --primary-soft: #f1e9fe; }
.module-btn.tone-purple { border-color: #ddd0f7; background: linear-gradient(180deg, #fff, #faf7ff); }
.module-btn.tone-purple .ico { background: #f1e9fe; color: #6d28d9; }
.module-btn.tone-purple:hover { border-color: #7c3aed; }
.app-tile.tone-purple .ico { background: #f1e9fe; color: #6d28d9; }
.app-tile.tone-purple.on .ico { background: #7c3aed; color: #fff; }
main#view.tone-purple .page-head h1 { color: #6d28d9; }
main#view.tone-purple .card { border-color: #e7ddfb; }
.dropdown .menu-link.tone-purple svg { color: #7c3aed; }
html[data-theme="dark"] .tone-purple { --primary: #a78bfa; --primary-hover: #8b6ef0; --primary-soft: #2a1f45; }
html[data-theme="dark"] .module-btn.tone-purple .ico, html[data-theme="dark"] .app-tile.tone-purple .ico { background: #2a1f45; color: #c4b5fd; }
/* MASTER iki bölmeli görünüm */
.ms-split { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ms-split { grid-template-columns: 1fr; } }
.ms-users { display: flex; flex-direction: column; gap: 4px; max-height: 78vh; overflow: auto; }
.ms-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: none; text-align: left; width: 100%; color: var(--text); }
.ms-user:hover { background: var(--surface-2); }
.ms-user.on { background: var(--primary-soft); border-color: var(--primary); }
.ms-user .who { min-width: 0; flex: 1; }
.ms-user .who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-user .who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ms-user.off { opacity: .6; }
.ms-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ms-detail-head .avatar.xl { width: 84px; height: 84px; font-size: 30px; }
.ms-sec-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-badge-master { background: #7c3aed; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ms-empty-data { color: var(--muted); padding: 16px; text-align: center; }
.seg.wrap { flex-wrap: wrap; }
.ms-tabs .seg { flex-wrap: wrap; }
.print-progress .track i.ok { background: var(--success); }
.print-progress .track i.err { background: var(--danger); }
.send3d.g3d-view { height: 300px; margin-bottom: 6px; }

/* Mikro ERP veri aktarım ekranı */
.mk-conn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14px; border: 1px solid transparent; }
.mk-conn .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mk-conn.ok { background: var(--success-soft); border-color: #b8e3c4; color: var(--success); }
.mk-conn.ok .dot { background: var(--success); }
.mk-conn.err { background: var(--danger-soft, #fdecec); border-color: #f2c2c2; color: var(--danger); }
.mk-conn.err .dot { background: var(--danger); }
.mk-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.mk-table th.mk-chk, .mk-table td.mk-chk { width: 34px; text-align: center; }
.mk-table th.right, .mk-table td.right { text-align: right; }
.mk-table tbody tr.sel { background: var(--primary-soft); }
.mk-table td .mono { letter-spacing: .2px; }
.mk-table td.mk-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-table th, .mk-table td { padding-left: 10px; padding-right: 10px; }
.mk-table th.mk-chk, .mk-table td.mk-chk { padding-left: 6px; padding-right: 6px; }

/* Satış Yönetimi + Mikro fatura */
.mk-fat-note { margin-bottom: 10px; }
.sl-lines th, .sl-lines td { padding: 4px 6px; vertical-align: top; }
.sl-lines td:first-child { min-width: 220px; }
.sl-lines .input.num { width: 90px; text-align: right; }
.sl-lines td:first-child .input + .input { margin-top: 4px; }
.sl-totals { display: flex; gap: 20px; justify-content: flex-end; flex-wrap: wrap; align-items: baseline; padding: 8px 4px; border-top: 1px solid var(--border); }
.sl-totals .big { font-size: 16px; }
.sl-totals .big b { font-size: 18px; }

/* ============ Sesli görüşme (WebRTC) ============ */
.avatar.huge { width: 132px; height: 132px; font-size: 46px; }
/* Gelen arama — tam ekran */
.vc-ring { position: fixed; inset: 0; z-index: 4200; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  color: #fff; padding: 8vh 24px 6vh; text-align: center; }
.vc-ring::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); backdrop-filter: blur(2px); }
.vc-ring > * { position: relative; z-index: 1; }
.vc-ring-top { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4vh; }
.vc-ring-top .avatar.huge { box-shadow: 0 12px 50px rgba(0,0,0,.4); border: 4px solid rgba(255,255,255,.25); animation: vc-breathe 2.4s ease-in-out infinite; }
@keyframes vc-breathe { 50% { transform: scale(1.04); } }
.vc-ring-sub { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.vc-ring-name { font-size: 30px; font-weight: 700; }
.vc-ring-sub2 { opacity: .85; }
.vc-ring-bottom { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.vc-slide { position: relative; height: 66px; border-radius: 40px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; overflow: hidden; user-select: none; }
.vc-slide-hint { position: absolute; font-size: 14px; opacity: .8; pointer-events: none; }
.vc-slide-hint.right { right: 22px; animation: vc-hint 1.6s infinite; }
.vc-slide-hint.left { left: 22px; opacity: .45; }
@keyframes vc-hint { 50% { opacity: .35; transform: translateX(4px); } }
.vc-slide-knob { position: absolute; left: 6px; width: 54px; height: 54px; border-radius: 50%; background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: grab; transition: transform .2s; box-shadow: 0 6px 16px rgba(0,0,0,.3); z-index: 2; }
.vc-slide-knob:active { cursor: grabbing; }
.vc-slide-knob.go-accept { background: #16a34a; }
.vc-slide-knob.go-reject { background: var(--danger); }
.vc-ring-btns { display: flex; gap: 60px; justify-content: center; }
.vc-rbtn { width: 66px; height: 66px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.vc-rbtn .vc-ic { width: 30px; height: 30px; }
.vc-rbtn.accept { background: #22c55e; animation: vc-pulse 1.4s infinite; }
.vc-rbtn.reject { background: var(--danger); }
@keyframes vc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 16px rgba(34,197,94,0); } }
.vc-ic { width: 22px; height: 22px; display: block; }
/* Görüşme — tam ekran */
.vc-call { position: fixed; inset: 0; z-index: 4100; color: #fff; display: flex; flex-direction: column; }
.vc-call::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; }
.vc-call-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 20px 0; position: relative; z-index: 2; }
.vc-top-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vc-top-btn:hover { background: rgba(255,255,255,.28); }
.vc-ct-mid { text-align: center; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vc-ct-name { font-size: 20px; font-weight: 700; }
.vc-ct-timer { font-size: 14px; opacity: .85; font-variant-numeric: tabular-nums; }
.vc-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; font-size: 12px; font-weight: 700; justify-content: center; margin-top: 2px; }
.vc-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5252; animation: vc-blink 1s infinite; }
@keyframes vc-blink { 50% { opacity: .3; } }
.vc-stage { flex: 1; display: grid; gap: 20px; place-content: center; place-items: center; padding: 20px; position: relative; z-index: 1; }
.vc-stage.n1 { grid-template-columns: 1fr; }
.vc-stage.n2 { grid-template-columns: 1fr 1fr; width: min(560px, 92%); margin: 0 auto; }
.vc-stage.n3 { grid-template-columns: 1fr 1fr; grid-template-areas: 'a b' 'a c'; width: min(620px, 94%); margin: 0 auto; }
.vc-stage.n3 .vc-tile.lead { grid-area: a; }
.vc-stage.n4 { grid-template-columns: 1fr 1fr; width: min(620px, 94%); margin: 0 auto; }
.vc-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: vc-in .4s ease both; }
@keyframes vc-in { from { opacity: 0; transform: scale(.9); } }
.vc-tile-av .avatar { box-shadow: 0 10px 40px rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.18); }
.vc-tile.on .vc-tile-av .avatar { border-color: rgba(34,197,94,.8); }
.vc-stage.n1 .avatar.huge { width: 168px; height: 168px; font-size: 58px; }
.vc-tile-name { font-size: 18px; font-weight: 600; }
.vc-tile-state { font-size: 13px; opacity: .8; }
.vc-bars-wrap { height: 30px; }
.vc-bars { height: 30px; }
.vc-self { position: absolute; left: 20px; bottom: 120px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .85; }
.vc-self-label { font-size: 11px; opacity: .8; }
.vc-self-tap { cursor: pointer; }
.vc-self-tap::after { content: '⤢'; position: absolute; top: 4px; right: 6px; font-size: 13px; color: #fff; opacity: .75; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.vc-consent { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 3; width: min(420px, 92%);
  background: rgba(20,24,33,.92); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 14px 16px; }
.vc-consent-in { display: flex; flex-direction: column; gap: 10px; }
.vc-consent-btns { display: flex; gap: 10px; justify-content: flex-end; }
.vc-controls { display: flex; gap: 22px; justify-content: center; padding: 20px 0 max(28px, env(safe-area-inset-bottom)); position: relative; z-index: 2; }
.vc-ctl { width: 62px; height: 62px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.vc-ctl:hover { background: rgba(255,255,255,.28); }
.vc-ctl .vc-ic { width: 26px; height: 26px; }
.vc-ctl.off { background: #fff; color: #111; }
.vc-ctl.on { background: #ff5252; }
.vc-ctl.end { background: var(--danger); }
.vc-ctl.end:hover { background: #dc2626; }
.vc-peer-empty { opacity: .8; font-size: 15px; }
/* Kişi seçici + iOS sürgülü anahtar */
.vc-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; }
.vc-pick { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; color: var(--text); }
.vc-pick:hover { background: var(--surface-2); }
.vc-pick.on { background: var(--primary-soft); border-color: var(--primary); }
.vc-pick .grow { flex: 1; font-weight: 500; }
.vc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.vc-dot.on { background: var(--success); }
.vc-switch { width: 42px; height: 25px; border-radius: 25px; background: var(--border); position: relative; transition: background .2s; flex: none; }
.vc-switch.on { background: var(--success); }
.vc-switch-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.vc-switch.on .vc-switch-knob { left: 19px; }
/* Görüşme arka plan seçici (Ayarlar) */
.set-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.set-bg { height: 76px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; position: relative; color: #fff; display: flex; align-items: flex-end; padding: 8px; overflow: hidden; }
.set-bg.on { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.set-bg-name { font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.set-bg-on { position: absolute; top: 6px; right: 8px; font-weight: 700; }
/* Görüşme geçmişi + detay */
.vc-row-people { display: flex; align-items: center; gap: 6px; }
.vc-row-people .avatar.sm { width: 24px; height: 24px; margin-right: -8px; border: 2px solid var(--surface); }
.vc-transcript { display: flex; flex-direction: column; gap: 10px; }
.vc-seg { display: flex; gap: 10px; }
.vc-seg-who { flex: none; font-weight: 600; color: var(--primary); min-width: 120px; }
.vc-summary { background: var(--surface-2); border-radius: 10px; padding: 12px; }
@media (max-width: 560px) { .vc-stage.n2, .vc-stage.n3, .vc-stage.n4 { grid-template-columns: 1fr; grid-template-areas: none; } .vc-controls { gap: 16px; } }

/* Görüşme detayı: kayıt oynatıcı + konuşmacı atama + saniyeli transkript */
.vc-audio { width: 100%; margin-top: 4px; }
.vc-spk-list { display: flex; flex-direction: column; gap: 8px; }
.vc-spk { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.vc-spk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-assign { width: auto; max-width: 200px; }
.vc-seg { display: flex; gap: 10px; align-items: baseline; }
.vc-seg-time { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--primary); background: var(--primary-soft); border: 0; border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.vc-seg-time:hover { background: var(--primary); color: #fff; }
.vc-seg-who { flex: none; font-weight: 600; color: var(--primary); min-width: 110px; }

/* ============ Mesajlar (WhatsApp-Web tarzı iki panel) ============ */
main#view.msg-view { height: 100%; padding: 0; max-width: none; margin: 0; }
.msg-page { display: grid; grid-template-columns: 340px 1fr; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.msg-timeline, .msg-rows { min-height: 0; }
.msg-side { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; background: var(--surface); }
.msg-side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.msg-side-head b { font-size: 18px; }
.msg-side-search { padding: 8px 10px; }
.msg-search { width: 100%; }
.msg-rows { flex: 1; overflow: auto; }
.msg-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text); border-bottom: 1px solid var(--border); position: relative; }
.msg-row:hover { background: var(--surface-2); }
.msg-row.on { background: var(--primary-soft); }
.msg-row-mid { flex: 1; min-width: 0; }
.msg-row-top { display: flex; justify-content: space-between; gap: 8px; }
.msg-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.msg-row-time { font-size: 11px; color: var(--muted); flex: none; }
.msg-row-sub { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 2px; }
.msg-row-prev { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-unread { background: var(--success); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex: none; }
.msg-online { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex: none; }
/* WhatsApp tarzı: çevrimiçi durumu avatarın etrafında yeşil halka olarak */
.msg-av { flex: none; display: inline-flex; border-radius: 50%; padding: 2px; border: 2px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.msg-av.online { border-color: var(--success); }
.msg-empty-list, .msg-empty-conv { color: var(--muted); padding: 24px 16px; text-align: center; font-size: 14px; }
/* Sağ panel */
.msg-conv { display: flex; flex-direction: column; min-width: 0; background: var(--surface-2); }
.msg-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.msg-placeholder svg { width: 46px; height: 46px; opacity: .4; }
.msg-conv-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.msg-conv-head .grow { flex: 1; min-width: 0; }
.msg-conv-head .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-status { font-size: 12px; color: var(--muted); }
.msg-conv-status.on { color: var(--success); }
.msg-back { display: none; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--text); padding: 0 4px; }
.msg-timeline { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
/* Arama kaydı + transkript */
.msg-call { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.msg-callog { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.msg-callog:hover { background: var(--primary-soft); }
.msg-callog-ic svg { width: 16px; height: 16px; color: var(--primary); }
.msg-callog small { color: var(--muted); margin-left: 4px; }
.msg-tr { display: flex; flex-direction: column; gap: 4px; }
.tr-bubble { cursor: pointer; }
.tr-bubble:hover { filter: brightness(0.97); }
.tr-who { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.tr-who.unknown { color: var(--warning, #b7791f); }
.msg-tr-note { align-self: center; font-size: 12px; color: var(--muted); font-style: italic; }
/* Yeni sohbet seçici */
.msg-picklist { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.msg-pick { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); }
.msg-pick:hover { background: var(--surface-2); }
.msg-pick .grow { flex: 1; }
/* Mobil: tek panel */
@media (max-width: 760px) {
  .msg-page { grid-template-columns: 1fr; height: 100%; border: 0; border-radius: 0; }
  .msg-conv { display: none; }
  .msg-page.show-conv .msg-side { display: none; }
  .msg-page.show-conv .msg-conv { display: flex; }
  .msg-back { display: inline-block; }
}

/* Arama: tablet/bilgisayarda sağ altta küçük kart (telefonda tam ekran kalır) */
.vc-ring.compact, .vc-call.compact {
  inset: auto 20px 20px auto; width: 340px; height: auto; max-height: 82vh;
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; padding: 0;
}
.vc-ring.compact { display: flex; flex-direction: column; }
.vc-ring.compact::before { border-radius: 18px; }
.vc-ring.compact .vc-ring-top { margin-top: 0; padding: 22px 18px 8px; }
.vc-ring.compact .avatar.huge { width: 84px; height: 84px; font-size: 30px; }
.vc-ring.compact .vc-ring-name { font-size: 20px; }
.vc-ring.compact .vc-ring-bottom { padding: 8px 18px 20px; }
.vc-ring.compact .vc-slide { display: none; }   /* köşede kaydırma yerine düğmeler */
.vc-ring.compact .vc-ring-btns { gap: 40px; }
.vc-ring.compact .vc-rbtn { width: 58px; height: 58px; }
.vc-call.compact:not(.minimized) { cursor: grab; user-select: none; -webkit-user-select: none; }
.vc-call.compact:not(.minimized) :is(button, video, .vc-consent) { cursor: pointer; }
.vc-call.compact.dragging { cursor: grabbing; transition: none; }
.vc-call.compact .vc-call-top { padding: 14px 14px 4px; }
.vc-call.compact .vc-ct-name { font-size: 16px; }
.vc-call.compact .vc-stage { padding: 12px; min-height: 150px; }
.vc-call.compact .vc-stage.n1 .avatar.huge { width: 96px; height: 96px; font-size: 34px; }
.vc-call.compact .avatar.huge { width: 76px; height: 76px; font-size: 28px; }
.vc-call.compact .vc-self { position: static; flex-direction: row; gap: 8px; justify-content: center; padding: 4px 0; }
.vc-call.compact .vc-consent { position: static; transform: none; width: auto; margin: 0 12px 8px; }
.vc-call.compact .vc-controls { padding: 12px 0 16px; gap: 16px; }
.vc-call.compact .vc-ctl { width: 52px; height: 52px; }
.vc-call.compact .vc-top-btn { width: 38px; height: 38px; }

/* Ses görselleştirici: avatarın çevresine sarılı halka (çubuklar çerçeve DIŞINDA) */
.vc-tile-av, .vc-self-av { position: relative; display: inline-flex; }
.vc-tile-av .vc-ring-viz, .vc-self-av .vc-ring-viz { display: block; pointer-events: none; }   /* düzeni canvas belirler */
.vc-tile-av .avatar, .vc-self-av .avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }

/* ---------- Görüntülü arama ---------- */
.vc-stage.vc-vstage { display: block; padding: 0; gap: 0; }
.vc-vtile { position: absolute; inset: 0; background: #0b1020; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.vc-vtile .vc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b1020; }
.vc-vtile.novideo .vc-video { visibility: hidden; }
.vc-vtile-av { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vc-vtile.novideo .vc-vtile-av { display: grid; place-items: center; }
.vc-vtile-foot { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 96px; background: rgba(0,0,0,.4); border-radius: 999px; backdrop-filter: blur(4px); }
.vc-vtile-name { font-weight: 700; }
.vc-vtile-state { opacity: .85; font-size: 12px; }
/* Kendi görüntün (resim içinde resim) */
.vc-self-video { position: absolute; right: 16px; bottom: 118px; left: auto; width: 116px; height: 158px; border-radius: 14px; overflow: hidden; opacity: 1; display: block; box-shadow: 0 8px 24px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.45); }
.vc-selfvid { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #0b1020; }
.vc-self-video .vc-self-label { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.vc-call.vc-self-off .vc-selfvid { visibility: hidden; }
.vc-call.vc-self-off .vc-self-video { background: #1a2236; }
.vc-call.compact.vc-has-video .vc-stage { min-height: 220px; }
.vc-call.compact .vc-self-video { position: absolute; right: 10px; bottom: 76px; width: 92px; height: 124px; }
@media (max-width: 560px) { .vc-self-video { width: 100px; height: 138px; bottom: 112px; right: 12px; } }

/* Mesaj dizisi: kaydırma sadece dizide kalsın (tüm uygulama kaymasın) */
.msg-conv, .msg-page { overflow: hidden; }
.msg-timeline, .msg-rows { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.msg-tr-head { align-self: center; font-size: 12px; color: var(--muted); margin: 2px 0; }
.msg-tr-audio { width: 100%; margin-top: 4px; }
.msg-side-btns { display: flex; gap: 6px; }
/* İki düğmeyi tek bir kapsül/balon içinde grupla (sohbet başlığı: yıldız+arama · liste: Grup+Yeni) */
.pill-group { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.pill-group > button { border: 0; background: transparent; margin: 0; border-radius: 999px; }
.pill-group > button:hover { background: var(--surface); }
.pill-group > .icon-btn { width: 36px; height: 36px; }
.pill-group > .btn { height: 32px; }
.pill-group > .btn.primary { background: var(--primary); color: #fff; }
.pill-group > .btn.primary:hover { background: var(--primary-hover); }
.msg-head-pill { flex: none; }

/* Yeni sürüm uyarısı */
.ver-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; color: #fff; background: linear-gradient(90deg, #1d4f91, #2563eb); box-shadow: 0 4px 18px rgba(0,0,0,.25); font-size: 14px; animation: ver-slide .3s ease; }
@keyframes ver-slide { from { transform: translateY(-100%); } }
.ver-banner .btn { background: #fff; color: #1d4f91; border: 0; font-weight: 600; }
.ver-x { background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
/* Program Hakkında */
.about-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 16px; min-height: 320px; }
.about-side { border-right: 1px solid var(--border); overflow: auto; max-height: 60vh; }
.about-vers { display: flex; flex-direction: column; gap: 2px; }
.about-ver { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); }
.about-ver:hover { background: var(--surface-2); }
.about-ver.on { background: var(--primary-soft); }
.about-ver small { color: var(--muted); margin-left: auto; }
.about-badge { background: var(--success); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
.about-detail { min-width: 0; }
.about-dh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.about-title { font-weight: 600; color: var(--primary); }
.about-changes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.about-changes li { line-height: 1.45; }
@media (max-width: 640px) { .about-wrap { grid-template-columns: 1fr; } .about-side { border-right: 0; border-bottom: 1px solid var(--border); max-height: 28vh; } }

/* Program Ayarları — Sunucu Durumu */
.sc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sc-metric { padding: 12px 14px; }
.sc-metric-top { display: flex; align-items: baseline; justify-content: space-between; }
.sc-metric-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-metric-val { font-size: 26px; font-variant-numeric: tabular-nums; }
.sc-metric small { display: block; margin-top: 2px; }
.sc-chart { height: 54px; margin-top: 8px; }
.sc-spark { width: 100%; height: 54px; display: block; }
.sc-disk-bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.sc-disk-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.sc-disk-bar i.warn { background: #d99a00; } .sc-disk-bar i.bad { background: var(--danger); }
.sc-info dt { color: var(--muted); }
.sc-svc-list { display: flex; flex-direction: column; gap: 6px; }
.sc-svc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.sc-svc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sc-svc-dot.on { background: var(--success); } .sc-svc-dot.off { background: var(--border); }
.sc-svc .grow { min-width: 0; } .sc-svc .grow b { display: block; }
/* Entegrasyonlar */
.sc-integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sc-integ-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sc-integ.dim { opacity: .7; }
.sc-integ-list { display: flex; flex-direction: column; gap: 12px; }
.sc-integ-list > p { margin: 0; }
.sc-integ .sc-integ-h { align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sc-integ-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sc-integ-h .grow small { color: var(--muted); font-size: 13px; }
.sc-integ-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--primary), #3b82f6); color: #fff; }
.sc-integ[data-g="mikro"] .sc-integ-ico { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.sc-integ[data-g="google"] .sc-integ-ico { background: linear-gradient(135deg, #dc2626, #f97316); }
.sc-integ[data-g="general"] .sc-integ-ico { background: linear-gradient(135deg, #475569, #94a3b8); }
.sc-integ-ico svg { width: 20px; height: 20px; }
.sc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; }
.sc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-field-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.sc-field .input { width: 100%; }
.sc-field .link-btn { margin-left: auto; border: 0; background: none; color: var(--primary); cursor: pointer; padding: 0; font: inherit; font-size: 12.5px; }
.sc-integ-msg { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.sc-integ-msg.ok { background: #e8f6ee; color: #146c3a; }
.sc-integ-msg.err { background: #fdecea; color: #b42318; }
html[data-theme="dark"] .sc-integ-msg.ok { background: rgba(34, 197, 94, .15); color: #86efac; }
html[data-theme="dark"] .sc-integ-msg.err { background: rgba(239, 68, 68, .15); color: #fca5a5; }

/* Kayıt onayı — arama ekranında, avatar solu reddet / sağı onayla (şık) */
.vc-consent-card { background: rgba(20,24,33,.94); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: 16px 18px; text-align: center; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.vc-consent-title { font-size: 14px; margin-bottom: 12px; }
.vc-consent-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.vc-consent-av .avatar { width: 72px; height: 72px; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.vc-consent-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.vc-consent-btn .vc-ic { width: 26px; height: 26px; }
.vc-consent-btn.accept { background: #22c55e; animation: vc-pulse 1.4s infinite; }
.vc-consent-btn.reject { background: var(--danger); }
.vc-consent-hint { font-size: 11px; opacity: .7; margin-top: 10px; }

/* Gelen arama (telefon/tam ekran): yalnızca kaydırma; düğmeler gizli, daha ince/uzun, animasyonlu */
.vc-ring:not(.compact) .vc-ring-btns { display: none; }
.vc-ring:not(.compact) .vc-ring-bottom { max-width: 300px; }
.vc-ring:not(.compact) .vc-slide { height: 74px; border-radius: 40px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.vc-ring:not(.compact) .vc-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); background-size: 200% 100%; animation: vc-shimmer 2.2s linear infinite; pointer-events: none; }
@keyframes vc-shimmer { to { background-position: -200% 0; } }
.vc-ring:not(.compact) .vc-slide-knob { width: 60px; height: 60px; background: #22c55e; animation: vc-knob-bob 1.6s ease-in-out infinite; }
@keyframes vc-knob-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.vc-ring:not(.compact) .vc-slide-knob.go-accept, .vc-ring:not(.compact) .vc-slide-knob.go-reject { animation: none; }
.vc-ring:not(.compact) .vc-slide-hint.right { font-weight: 600; }

/* Aramayı küçült (header pill) — konuşurken uygulamayı/mesajlaşmayı kullan */
.vc-mini { display: none; }
.vc-call.minimized { inset: auto; top: 10px; right: 12px; left: auto; transform: none; width: auto; max-width: 80vw; height: auto; border-radius: 999px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.vc-call.minimized > .vc-call-top, .vc-call.minimized > .vc-stage, .vc-call.minimized > .vc-self, .vc-call.minimized > .vc-consent, .vc-call.minimized > .vc-controls { display: none; }
.vc-call.minimized .vc-mini { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; color: #fff; cursor: grab; touch-action: none; }
.vc-call.minimized.dragging { transition: none; }
.vc-call.minimized.dragging .vc-mini { cursor: grabbing; }
.vc-mini-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; animation: vc-blink 1.2s infinite; flex: none; }
.vc-mini-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vc-mini-info b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.vc-mini-timer { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.vc-mini-end { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; flex: none; }
.vc-mini-end .vc-ic { width: 18px; height: 18px; }

/* Görüşme kaydı işleme aşamaları (yükleme + metne çevirme) */
.msg-stages { align-self: center; width: min(340px, 90%); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 6px 0; }
.msg-stages .msg-tr-head { margin-bottom: 8px; }
.msg-step { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.msg-step-ic { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.msg-step.done .msg-step-ic { color: var(--success); }
.msg-step.active .msg-step-ic { color: var(--primary); }
.msg-step.wait { opacity: .55; }
.msg-step-body { flex: 1; min-width: 0; font-size: 13px; }
.msg-spin { width: 15px; height: 15px; border: 2px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: msg-spin 0.8s linear infinite; }
@keyframes msg-spin { to { transform: rotate(360deg); } }
.msg-prog { height: 5px; background: var(--primary-soft); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.msg-prog i { display: block; height: 100%; width: 40%; background: var(--primary); border-radius: 3px; animation: msg-prog 1.3s ease-in-out infinite; }
@keyframes msg-prog { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.msg-tr-note.err { color: var(--danger); }

/* Arama kaydı: açılır panel (transkript + kayıt) — sohbeti doldurmaz, isteğe bağlı açılır */
.msg-callog.clickable { cursor: pointer; }
.msg-callog .grow { display: flex; flex-direction: column; }
.msg-callog-tag { font-size: 11px; background: var(--primary-soft); color: var(--primary); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.msg-callog-tag.proc { background: var(--surface-2); color: var(--muted); }
.msg-callog-chev { transition: transform .2s; color: var(--muted); }
.msg-callog.open .msg-callog-chev { transform: rotate(180deg); }
.msg-call-panel { width: min(420px, 94%); align-self: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.msg-call-panel .chat-msg { margin: 0; }


/* ── Köşedeki yapay zeka maskotu + sohbet penceresi ───────────────────────── */
.mascot {
  position: fixed; right: 20px; bottom: 22px; z-index: 60;
  width: 78px; height: 86px; padding: 0; border: 0; background: transparent;
  cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: none;
  filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .28)); transition: transform .18s ease;
}
.mascot:hover { transform: translateY(-3px) scale(1.04); }
.mascot:active { transform: scale(.97); }
.mascot.dragging { cursor: grabbing; transition: none; }
.mascot.open { opacity: .9; }
.mascot-fig { position: relative; width: 100%; height: 100%; animation: m-idle 3.2s ease-in-out infinite; transform-origin: 50% 92%; }
.mascot-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.mascot-badge {
  position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .3); animation: m-badge 2.6s ease-in-out infinite;
}
.mascot-badge svg { width: 15px; height: 15px; }
/* Patlama efekti (kafa şişip patlama) */
.m-burst { position: absolute; top: 18%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,214,102,.95) 0%, rgba(255,138,76,.6) 45%, transparent 70%);
  box-shadow: 0 0 0 0 rgba(255,180,80,.6); }

/* Ortak karakter renkleri */
.m-shadow { fill: rgba(16, 24, 40, .16); animation: m-shadow 3.2s ease-in-out infinite; }
.m-belly { fill: var(--primary); }
.m-shirt { fill: rgba(255, 255, 255, .16); }
.m-head { fill: #f5c49d; }
.m-hair { fill: #46301f; }
.m-eye { fill: #26313f; }
.m-eye2 { fill: #10201a; }
.m-cheek { fill: #f0a184; opacity: .55; }
.m-smile { fill: none; stroke: #26313f; stroke-width: 3.4; stroke-linecap: round; }
.m-smile2 { fill: #26313f; }
.m-arm rect { fill: var(--primary); }
.m-arm path { fill: var(--primary); stroke: var(--primary); }
.m-wavearm { transform-origin: 96px 74px; }
.m-leg { fill: #2b3a4d; }
.m-ant { stroke: #94a3b8; stroke-width: 3; } .m-antdot { fill: #ef4444; }
.m-ear { fill: #f5c49d; } .m-nose { fill: #e26d5c; } .m-whisk { stroke: #26313f; stroke-width: 1.6; }
.m-tail { stroke: var(--primary); stroke-width: 10; stroke-linecap: round; }
.m-ghost { fill: #eef2fb; stroke: #cdd6ea; stroke-width: 1.5; }
.m-beak { fill: #f6a723; } .m-foot { fill: #f6a723; }
/* Karaktere özgü (kök svg .m-<id>) */
.m-robo .m-head, .m-robo .m-belly { fill: #c2ccda; } .m-robo .m-shirt { fill: rgba(16, 24, 40, .14); } .m-robo .m-eye { fill: #1e293b; }
.m-hayalet .m-arm path { stroke: #eef2fb; fill: none; }
.m-penguen .m-belly { fill: #2b3a4d; } .m-penguen .m-shirt { fill: #ffffff; } .m-penguen .m-head { fill: #2b3a4d; } .m-penguen .m-eye { fill: #ffffff; } .m-penguen .m-arm path { fill: #2b3a4d; stroke: #2b3a4d; }
.m-uzayli .m-head { fill: #7bd389; } .m-uzayli .m-belly { fill: #57b368; }

@keyframes m-idle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.02); } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); opacity: .16; } 50% { transform: scaleX(.9); opacity: .1; } }
@keyframes m-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Tek seferlik numaralar */
.trick-wave { animation: m-hop2 1.7s ease; } .trick-wave .m-wavearm { animation: m-wave 1.7s ease; }
.trick-jump { animation: m-jump 1.7s cubic-bezier(.3, .8, .4, 1); }
.trick-wobble { animation: m-wobble 1.7s ease; }
.trick-spin { animation: m-spin 1.7s ease; }
.trick-dance { animation: m-dance 1.7s ease; }
.trick-peek { animation: m-peek 1.7s ease; }
.trick-pop .m-pop { animation: m-pop 1.7s ease; transform-origin: 60px 42px; transform-box: fill-box; }
.trick-pop .m-burst { animation: m-burstfx 1.7s ease; }
@keyframes m-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-58deg); } 40% { transform: rotate(-30deg); } 60% { transform: rotate(-58deg); } 80% { transform: rotate(-34deg); } }
@keyframes m-hop2 { 0%, 100% { transform: translateY(0); } 30%, 70% { transform: translateY(-2px); } }
@keyframes m-jump { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(2px) scaleY(.86); } 45% { transform: translateY(-24px) scaleY(1.08); } 70% { transform: translateY(0) scaleY(.92); } 85% { transform: translateY(-6px); } }
@keyframes m-wobble { 0%, 100% { transform: rotate(0) translateX(0); } 20% { transform: rotate(-8deg) translateX(-3px); } 50% { transform: rotate(8deg) translateX(3px); } 80% { transform: rotate(-4deg); } }
@keyframes m-spin { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(0) scale(.9); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes m-dance { 0%, 100% { transform: rotate(0) translateX(0); } 15% { transform: rotate(-9deg) translateX(-4px); } 35% { transform: rotate(7deg) translateX(4px) translateY(-3px); } 55% { transform: rotate(-7deg) translateX(-4px); } 75% { transform: rotate(6deg) translateX(3px) translateY(-3px); } }
@keyframes m-peek { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) translateX(-4px); } 65% { transform: rotate(10deg) translateX(4px); } }
/* Kafa şişip patlama: şişer → patlar (kaybolur) → geri gelir */
@keyframes m-pop { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 46% { transform: scale(1.68); } 50% { transform: scale(.05); opacity: 0; } 58% { opacity: 0; transform: scale(.05); } 72% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes m-burstfx { 0%, 40% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }

/* ==== Yeni maskotlar (yalnız 2D): renkler ==== */
/* Drone (Pervane) */
.m-drone-arm { fill: #64748b; }
.m-drone-rotor { fill: rgba(148, 163, 184, .55); }
.m-drone-hub { fill: #475569; }
.m-drone-body { fill: var(--primary); }
.m-drone-lens { fill: #1e293b; }
.m-drone .m-eye { fill: #5ef0ff; }
.m-drone-glint { fill: #e6fbff; }
.m-drone-leg { stroke: #64748b; stroke-width: 4; stroke-linecap: round; }
.m-drone .m-smile { stroke: #5ef0ff; stroke-width: 2.6; }
.m-drone .m-prop { animation: m-spinfast 1.4s linear infinite; }   /* boşta yavaş dönen pervaneler */
/* Slime (Jölo) */
.m-slime-body { fill: #4ade80; stroke: #22c55e; stroke-width: 1.5; }
.m-slime-shine { fill: rgba(255, 255, 255, .4); }
.m-slime .m-eye { fill: #14532d; }
.m-slime-glint { fill: #eafff2; }
.m-slime .m-smile { stroke: #14532d; }
.m-slime .m-cheek { fill: #86efac; opacity: .85; }
/* Büyücü (Merlin) */
.m-wiz-robe { fill: #6d4bd1; }
.m-wiz-hat { fill: #5a39b8; }
.m-wiz-brim { fill: #5a39b8; }
.m-wiz-star { fill: #ffd166; }
.m-wiz-beard { fill: #eef2fb; }
.m-wiz-wand { stroke: #7c5a33; stroke-width: 3; stroke-linecap: round; }
.m-wiz-spark { fill: #ffd166; }
.m-buyucu .m-head { fill: #f5c49d; }
.m-buyucu .m-arm path { fill: none; stroke: #6d4bd1; }
.m-buyucu .m-eye { fill: #26313f; }
/* Dino (Riko) */
.m-dino-body { fill: #43b36b; }
.m-dino-belly { fill: #bdf0cf; }
.m-dino-head { fill: #43b36b; }
.m-dino-snout { fill: #3aa15f; }
.m-dino-spike { fill: #2f8f52; }
.m-dino-leg { fill: #3aa15f; }
.m-dino-tail { stroke: #43b36b; stroke-width: 12; stroke-linecap: round; }
.m-dino-nostril { fill: #216b3c; }
.m-dino-mouth { stroke: #216b3c; stroke-width: 2.4; stroke-linecap: round; }
.m-dino .m-arm rect { fill: #3aa15f; }
.m-dino .m-eye { fill: #1a2e20; }
/* Arı (Vızıl) */
.m-ari-body { fill: #ffca28; }
.m-ari-stripe { fill: #2b2b2b; }
.m-ari-wing { fill: rgba(191, 219, 254, .75); stroke: #93c5fd; stroke-width: 1.2; }
.m-ari-sting { fill: #2b2b2b; }
.m-ari .m-eye { fill: #26313f; }
.m-ari .m-smile { stroke: #26313f; }
.m-ari .m-cheek { fill: #ff8fa3; opacity: .6; }
.m-ari .m-wing { animation: m-flap-slow 1.6s ease-in-out infinite; }   /* boşta hafif kanat çırpma */

/* ==== Yeni maskot numaraları (imza animasyonları) ==== */
.m-prop { transform-box: fill-box; transform-origin: 50% 50%; }
.m-wing { transform-box: fill-box; }
.m-wing-l { transform-origin: 82% 88%; } .m-wing-r { transform-origin: 18% 88%; }
.m-dino-head-g { transform-box: fill-box; transform-origin: 50% 100%; }
/* Drone: süzülme / pervane / yana eğilme */
.trick-hover { animation: m-hover 1.7s ease-in-out; }
.trick-tilt { animation: m-tilt 1.7s ease-in-out; }
.trick-propeller { animation: m-hover 1.7s ease-in-out; }
.trick-propeller .m-prop { animation: m-spinfast .3s linear infinite; }
@keyframes m-hover { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-3deg); } 50% { transform: translateY(-3px); } 75% { transform: translateY(-9px) rotate(3deg); } }
@keyframes m-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg) translateX(-4px); } 60% { transform: rotate(14deg) translateX(4px); } }
@keyframes m-spinfast { to { transform: rotate(360deg); } }
/* Slime: ezilme / jöle zıplaması */
.trick-squish { animation: m-squish 1.1s ease; }
.trick-blobjump { animation: m-blobjump 1.3s cubic-bezier(.3, .7, .4, 1); }
@keyframes m-squish { 0%, 100% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(.6) scaleX(1.26); } 55% { transform: scaleY(1.16) scaleX(.86); } 80% { transform: scaleY(.96) scaleX(1.04); } }
@keyframes m-blobjump { 0% { transform: translateY(0) scaleY(1) scaleX(1); } 15% { transform: translateY(0) scaleY(.64) scaleX(1.22); } 40% { transform: translateY(-26px) scaleY(1.2) scaleX(.84); } 70% { transform: translateY(0) scaleY(.7) scaleX(1.2); } 85% { transform: translateY(0) scaleY(1.08) scaleX(.95); } 100% { transform: translateY(0) scaleY(1) scaleX(1); } }
/* Büyücü: büyü yapma / havada süzülme */
.trick-cast { animation: m-cast 1.2s ease; }
.trick-levitate { animation: m-levitate 1.7s ease-in-out; }
.trick-cast .m-wiz-spark { animation: m-sparkle 1.2s ease; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes m-cast { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg) translateY(2px); } 45% { transform: rotate(10deg) translateX(4px); } 70% { transform: rotate(-4deg); } }
@keyframes m-levitate { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(-16px) rotate(4deg); } }
@keyframes m-sparkle { 0% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.9); opacity: 1; } 100% { transform: scale(.8); opacity: .8; } }
/* Dino: güm güm basma / kükreme */
.trick-stomp { animation: m-stomp 1.2s ease; }
.trick-roar { animation: m-roarshake 1.3s ease; }
.trick-roar .m-dino-head-g { animation: m-roar 1.3s ease; }
@keyframes m-stomp { 0% { transform: translateY(0) scaleY(1); } 20% { transform: translateY(-16px) scaleY(1.06); } 40% { transform: translateY(0) scaleY(.82) scaleX(1.12); } 55% { transform: translateY(0) scaleY(1.04); } 70% { transform: translateY(-8px); } 85% { transform: translateY(0) scaleY(.9) scaleX(1.06); } 100% { transform: translateY(0) scaleY(1); } }
@keyframes m-roarshake { 0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: rotate(-4deg); } 30%, 50%, 70% { transform: translateX(-2px); } 40%, 60%, 80% { transform: translateX(2px); } }
@keyframes m-roar { 0%, 100% { transform: scale(1) translateY(0); } 30% { transform: scale(1.12) translateY(-3px); } 60% { transform: scale(1.17) translateY(-4px); } }
/* Arı: vızıltı / havada tur */
.trick-buzz { animation: m-buzz .9s ease; }
.trick-buzz .m-wing { animation: m-flap .12s ease-in-out infinite; }
.trick-loop { animation: m-loop 1.6s ease-in-out; }
@keyframes m-buzz { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-2px, -1px) rotate(-3deg); } 40% { transform: translate(2px, 1px) rotate(3deg); } 60% { transform: translate(-2px, 1px) rotate(-2deg); } 80% { transform: translate(2px, -1px) rotate(2deg); } }
@keyframes m-flap { 0%, 100% { transform: scaleY(1) rotate(0); } 50% { transform: scaleY(.6) rotate(8deg); } }
@keyframes m-flap-slow { 0%, 100% { transform: scaleY(1) rotate(0); } 50% { transform: scaleY(.84) rotate(4deg); } }
@keyframes m-loop { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-8px, -10px) rotate(-10deg); } 50% { transform: translate(0, -16px) rotate(0); } 75% { transform: translate(8px, -10px) rotate(10deg); } }

/* Sohbet penceresi */
.mchat {
  position: fixed; right: 20px; bottom: 120px; z-index: 61;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 160px));
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  overflow: hidden; animation: mchat-in .18s ease;
}
@keyframes mchat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.mchat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--primary); color: #fff; }
.mchat-head .mchat-ava { width: 36px; height: 36px; flex: 0 0 36px; background: rgba(255, 255, 255, .18); border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.mchat-head .mchat-ava svg { width: 34px; height: 40px; }
.mchat-head b { display: block; font-size: 14px; line-height: 1.1; }
.mchat-head small { opacity: .85; font-size: 11px; }
.mchat-x { margin-left: auto; background: rgba(255, 255, 255, .15); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.mchat-x:hover { background: rgba(255, 255, 255, .28); }
.mchat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.mchat-msg { display: flex; }
.mchat-msg.user { justify-content: flex-end; }
.mchat-bubble { max-width: 82%; padding: 8px 11px; border-radius: 14px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.mchat-msg.assistant .mchat-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text); }
.mchat-msg.user .mchat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.mchat-msg.err .mchat-bubble { background: #fdecec; border-color: #f3c2c2; color: #a12626; }
.mchat-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.mchat-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: mchat-dot 1.1s infinite; }
.mchat-dots i:nth-child(2) { animation-delay: .18s; } .mchat-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes mchat-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.mchat-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface); }
.mchat-input { flex: 1; resize: none; border: 1px solid var(--border-strong); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; max-height: 96px; background: var(--surface); color: var(--text); }
.mchat-input:focus { outline: none; border-color: var(--primary); }
.mchat-send { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mchat-send:hover { background: var(--primary-hover); } .mchat-send:disabled { opacity: .5; cursor: default; }
.mchat-send svg { width: 18px; height: 18px; }

/* Ayarlar: maskot seçimi */
.set-mascot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 6px; }
.set-mascot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 8px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: center; }
.set-mascot:hover { border-color: var(--border-strong); background: var(--surface-2); }
.set-mascot.on { border-color: var(--primary); background: var(--primary-soft); }
.set-mascot-fig { width: 60px; height: 68px; } .set-mascot-fig svg { width: 100%; height: 100%; overflow: visible; }
/* 3D maskot */
.mascot-fig.m3d { animation: none; }
.mascot.is3d { filter: none; }
.mascot-3d { position: absolute; left: 50%; bottom: -6px; width: 150%; height: 138%; transform: translateX(-50%); pointer-events: none; display: block; }
.mascot.is3d .m-burst { display: none; }
.mascot-prev { display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: center; }
.mascot-prev > svg { width: 100%; height: 100%; overflow: visible; }
.mascot-snap { width: 100%; height: 100%; object-fit: contain; display: block; animation: fvIn .25s ease; }
.set-mascot-fig .mascot-snap { transform: scale(1.18); transform-origin: 50% 90%; }
.mchat-head .mchat-ava .mascot-prev { width: 34px; height: 40px; }
.mchat-head .mchat-ava .mascot-snap { transform: scale(1.35) translateY(6%); }
.set-mascot b { font-size: 13px; } .set-mascot small { color: var(--muted); font-size: 11px; }
.set-mascot-on { position: absolute; top: 6px; right: 8px; color: var(--primary); font-weight: 700; }

/* Program Ayarları: sayısal alanlar */
.sc-num-wrap { display: inline-flex; align-items: center; gap: 6px; }
.sc-num { width: 92px; text-align: right; }
.sc-num-suf { color: var(--muted); font-size: 13px; }

@media (max-width: 820px) {
  .mascot { width: 74px; height: 82px; right: 14px; bottom: 16px; }
  .mchat { right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important; width: 100%; height: min(78vh, 620px); border-radius: 16px 16px 0 0; }
  .mchat-input { font-size: 16px; }   /* iOS klavye açılınca zoom yapmasın */
}

/* Ayarlar: bildirim/uyarı türleri, rahatsız etmeyin */
/* Katlanabilir paneller (tüm arayüzler): başlığa tıkla → aç/kapa; durum cihazda hatırlanır. Pano kutucuğu tarzı
   başlık bandı (soft arka plan + ince alt çizgi). */
.collapsible > .collapse-head { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none;
  justify-content: flex-start; text-align: left; flex-wrap: nowrap; overflow: hidden; }
/* Panel başlığı TEK SATIR: başlık taşarsa kısalır; açıklama sığmazsa kısalır, dar ekranda gizlenir; düğme hep sağda */
.collapse-head > .collapse-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collapse-head > .small, .collapse-head > .muted, .collapse-head > span.small.muted {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collapse-head > .btn, .collapse-head > button, .collapse-head > a.btn { flex: none; }
@media (max-width: 760px) { .collapse-head > .small, .collapse-head > .muted, .collapse-head > span.small.muted { display: none; } }
/* Başlık (+ varsa açıklama) solda kalır; aksiyon düğmeleri .collapse-push ile en sağa hizalanır */
.collapse-head > .collapse-title { min-width: 0; text-align: left; }
.collapse-head > .collapse-push { margin-left: auto; }
/* Başlık fontu TÜM panellerde aynı (h3/b/strong fark etmez): sabit boyut + yarı-kalın. Açıklama (.small) korunur. */
.collapse-head { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3; }
.collapse-head > .collapse-title, .collapse-head > b, .collapse-head > strong,
.collapse-head > h1, .collapse-head > h2, .collapse-head > h3, .collapse-head > h4 { font-size: 15px !important; font-weight: 600 !important; }
.collapse-head > .small, .collapse-head > .muted, .collapse-head .collapse-chev { font-size: 12px !important; font-weight: 400 !important; }
/* Gevşek bölüm başlığı (kart dışı): band görünümlü bar */
.loose-head { display: flex; align-items: center; gap: 8px; cursor: pointer; background: var(--surface-2, rgba(127, 127, 127, .045));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 16px 0 12px; }
.loose-head:not(.collapsed) > .collapse-chev { transform: rotate(90deg); }
.collapse-chev { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; opacity: .5; flex: none; transition: transform .15s ease; }
.collapsible:not(.collapsed) > .collapse-head > .collapse-chev { transform: rotate(90deg); }
.collapsible.collapsed > :not(.collapse-head) { display: none !important; }
/* Konuya özel panel ikonu (chevron ile başlık arasında) */
.collapse-head > .collapse-ic { flex: none; font-size: 15px; line-height: 1; opacity: .9; margin: 0 1px; filter: saturate(.9); }
/* İç boşluklu kartlarda (.card-pad / .set-card) başlık tam-genişlik şık bant olur (pano tile header gibi) */
.card-pad.collapsible > .collapse-head {
  /* !important: bazı başlıklarda inline margin (ör. marginTop:0) var; bandın tam-genişlik negatif margin'ini ezmesin */
  margin: -16px -16px 14px !important; padding: 11px 16px; background: var(--surface-2, rgba(127, 127, 127, .045));
  border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
}
.card-pad.collapsible.collapsed > .collapse-head { margin-bottom: -16px !important; border-bottom: 0; border-radius: var(--radius); }
html.compact .card-pad.collapsible > .collapse-head { margin: -12px -14px 12px !important; padding: 9px 14px; }
html.compact .card-pad.collapsible.collapsed > .collapse-head { margin-bottom: -12px !important; }
/* Pad'siz kartlar: sade alt çizgi */
.card.collapsible:not(.card-pad) > .collapse-head { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.card.collapsible:not(.card-pad).collapsed > .collapse-head { margin-bottom: 0; border-bottom: 0; }
/* Footer bandı: header rengiyle aynı soft bant (iç boşluklu panelin altına tam genişlik); düğmeler sağa hizalı */
.card-pad.collapsible > .panel-foot {
  margin: 14px -16px -16px !important; padding: 11px 16px; background: var(--surface-2, rgba(127, 127, 127, .045));
  border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
html.compact .card-pad.collapsible > .panel-foot { margin: 12px -14px -12px !important; padding: 9px 14px; }

/* Bölümlü (masonry) panel yerleşimi — pano hissi: yan yana paneller bağımsız akar, biri katlanınca boşluk kalmaz.
   İlgili modül kapsayıcısına .panel-masonry eklenir (tam-genişlik öğeler .full / .hr-save ile tüm sütunlara yayılır). */
.panel-masonry { columns: 440px; column-gap: 14px; }
.panel-masonry > * { break-inside: avoid; margin: 0 0 14px; }
.panel-masonry > .full, .panel-masonry > .hr-save { column-span: all; }

.set-types { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.set-toggle.dim { opacity: .6; }
/* Bildirim türleri: modül grubu başlığı (ince etiket) */
.set-grp { margin: 14px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.set-types > .set-grp:first-child, .set-grp:first-of-type { margin-top: 4px; }
.set-dnd-status { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 500; }
.set-dnd-status.on { background: #fff4e5; border-color: #f4d9ad; color: #9a5b0a; }

/* Mikro: aktarılanları göster anahtarı */
.mk-showimp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.mk-showimp input { width: 16px; height: 16px; }

/* Program Ayarları: yapay zeka kullanım tablosu */
.sc-ai-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.sc-ai-table th, .sc-ai-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.sc-ai-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.sc-ai-table td .sc-num { width: 110px; }
.sc-usage { font-variant-numeric: tabular-nums; font-weight: 600; }
.sc-usage.over { color: #c0392b; }

/* Program Ayarları: yapay zeka değişiklik onayları */
.sc-change-list { display: flex; flex-direction: column; gap: 10px; }
.sc-change.pending { border-left: 3px solid var(--primary); }
.sc-change-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-change-sum { font-size: 14px; margin-bottom: 6px; }
.sc-change-sql { background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 8px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0 0 6px; }
.badge.red { background: #fdecec; color: #b3261e; }

/* ── iOS klavye zoom'u: TÜM sistemde yazı kutularını 16px'e sabitle ─────────────
   iOS Safari, 16px'ten küçük bir giriş alanına odaklanınca ekranı otomatik büyütür
   ve sayfa kaymış görünür. Aşağıdaki kural (dosya sonunda + !important) sınıf tanımlı
   tüm input/textarea/select'i mobilde 16px yapar; zaten büyük olan plaka/PIN korunur. */
@media (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  textarea, select,
  .input, select.input, textarea.input, .chat-input, .mchat-input, .doc-search, .sc-num {
    font-size: 16px !important;
  }
  .plate-input { font-size: 22px !important; }
  .pin-input { font-size: 20px !important; }
}

/* ══════════ Görüntülü Toplantı — açık, ferah tasarım (yumuşak mavi kartlar, yüzen hap kontrol) ══════════ */
.vm-home, .vm-guest, .vm-waiting {
  --vm-blue: #3b82f6; --vm-blue-d: #2563eb; --vm-blue-soft: #e8f0fe; --vm-ink: #1e293b; --vm-sub: #94a3b8;
  --vm-card: #ffffff; --vm-line: #e6ecf5; --vm-bg1: #eef4ff; --vm-bg2: #f4f0fd;
  --vm-shadow: 0 10px 30px rgba(59, 130, 246, .10), 0 2px 6px rgba(15, 23, 42, .04);
}
html[data-theme="dark"] .vm-home, html[data-theme="dark"] .vm-guest, html[data-theme="dark"] .vm-waiting {
  --vm-blue-soft: #1c2b45; --vm-ink: #e5ebf5; --vm-sub: #8b97aa; --vm-card: #161c27; --vm-line: #263043;
  --vm-bg1: #0f1520; --vm-bg2: #141428; --vm-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.vm-ic { width: 22px; height: 22px; display: block; flex: none; }

/* Ana ekran */
.vm-home { max-width: 560px; margin: -8px auto 0; padding: 4px 4px 40px; color: var(--vm-ink); }
#view:has(.vm-home) { background: linear-gradient(160deg, var(--vm-bg1), var(--vm-bg2)); min-height: 100%; }
.vm-topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.vm-topbar-title { font-weight: 700; font-size: 16px; }
.vm-round { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--vm-card, #fff); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--vm-shadow); flex: none; text-decoration: none; }
.vm-round:hover { text-decoration: none; filter: brightness(.98); }
.vm-round.ghost { visibility: hidden; }
.vm-round.sm { width: 32px; height: 32px; box-shadow: none; background: var(--vm-blue-soft, #eef2ff); color: var(--vm-blue, #3b82f6); }
.vm-round.sm .vm-ic { width: 17px; height: 17px; }
.vm-round.sm.danger { background: #fdecec; color: #dc2626; }
.vm-profile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 0 18px; text-align: center; }
.vm-profile .avatar { width: 84px; height: 84px; font-size: 28px; box-shadow: 0 0 0 4px var(--vm-card), 0 8px 24px rgba(59, 130, 246, .25); margin-bottom: 8px; }
.vm-profile b { font-size: 21px; letter-spacing: -.01em; }
.vm-profile small { color: var(--vm-sub); font-size: 13px; }

.vm-hero { background: linear-gradient(150deg, #e3edff, #eef4ff 60%, #f3eeff); border-radius: 24px; padding: 18px 18px 16px; box-shadow: var(--vm-shadow); display: flex; flex-direction: column; gap: 14px; }
html[data-theme="dark"] .vm-hero { background: linear-gradient(150deg, #18243a, #172036 60%, #1d1a33); }
.vm-hero-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vm-hero-h b { font-size: 16px; }
.vm-hero-h small { color: var(--vm-sub); font-size: 12px; white-space: nowrap; }
.vm-hero-p { margin: -6px 0 0; color: var(--vm-sub); font-size: 13px; }
.vm-hero-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vm-skel { height: 120px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.8), rgba(255,255,255,.4)); background-size: 200% 100%; animation: vm-shim 1.2s infinite; }
@keyframes vm-shim { to { background-position: -200% 0; } }
.vm-join { width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-weight: 600; font-size: 15px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4f8ff7, #3b7cf0); box-shadow: 0 8px 20px rgba(59, 130, 246, .35); }
.vm-join:hover { filter: brightness(1.05); }
.vm-join:active { transform: translateY(1px); }
.vm-join:disabled { opacity: .6; }
.vm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.75); color: var(--vm-blue-d); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: .03em; }
html[data-theme="dark"] .vm-chip { background: rgba(255,255,255,.08); color: #8bb8f5; }
.vm-chip .vm-ic { width: 15px; height: 15px; }
.vm-live { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-size: 12px; font-weight: 600; }
.vm-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: vm-pulse 1.6s infinite; }
@keyframes vm-pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.vm-stack { display: flex; align-items: center; }
.vm-stack .avatar { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 0 0 2.5px var(--vm-card, #fff); margin-left: -7px; }
.vm-stack .avatar:first-child { margin-left: 0; }
.vm-stack-more { margin-left: 8px; font-size: 12px; color: var(--vm-sub); font-weight: 600; }

.vm-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.vm-qbtn { display: flex; align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 18px; background: var(--vm-card); box-shadow: var(--vm-shadow); color: var(--vm-ink); font: inherit; text-align: left; cursor: pointer; }
.vm-qbtn b { display: block; font-size: 14px; } .vm-qbtn small { color: var(--vm-sub); font-size: 12px; }
.vm-qic { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--vm-blue-soft); color: var(--vm-blue); flex: none; }
.vm-qbtn.primary .vm-qic { background: linear-gradient(180deg, #4f8ff7, #3b7cf0); color: #fff; box-shadow: 0 6px 14px rgba(59,130,246,.35); }
.vm-sec { margin: 22px 4px 10px; color: var(--vm-sub); font-size: 13px; font-weight: 600; }
.vm-list { display: flex; flex-direction: column; gap: 10px; }
.vm-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--vm-card); box-shadow: var(--vm-shadow); color: var(--vm-ink); font: inherit; text-align: left; cursor: pointer; }
.vm-item:hover { transform: translateY(-1px); }
.vm-item .grow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vm-item .grow > b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-item-when { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.vm-item-when b { font-size: 13px; color: var(--vm-sub); font-weight: 600; } .vm-item-when small { font-size: 11px; color: var(--vm-sub); }
.vm-empty { text-align: center; color: var(--vm-sub); font-size: 13px; padding: 18px; }

/* Oluştur / bağlantılar */
.vm-usersel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: 14px; padding: 6px; }
.vm-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.vm-user:hover { background: var(--surface-2); }
.vm-user input { accent-color: #3b82f6; }
.vm-exts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vm-ext-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vm-created { display: flex; flex-direction: column; gap: 12px; }
.vm-created-ic { width: 60px; height: 60px; margin: 0 auto 4px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, #4f8ff7, #3b7cf0); box-shadow: 0 10px 24px rgba(59,130,246,.35); }
.vm-created-ic .vm-ic { width: 28px; height: 28px; }
.vm-linkrow small { color: var(--muted); font-size: 12px; font-weight: 600; }
.vm-linkbox { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.vm-linkbox span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.vm-codein { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; text-align: center; font-size: 20px !important; }

/* ───── Oda ───── */
.vm-room { position: fixed; inset: 0; z-index: 80; background: #0b1120; color: #fff; overflow: hidden; }
.vm-main { position: absolute; inset: 0; }
.vm-stage { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; }
.vm-stage[data-n="0"] { display: none; }
.vm-stage[data-n="1"] { grid-template-columns: 1fr; padding: 0; }
.vm-stage[data-n="2"] { grid-template-columns: 1fr 1fr; }
.vm-stage[data-n="4"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.vm-stage[data-n="6"] { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.vm-stage[data-n="many"] { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.vm-tile { position: relative; overflow: hidden; border-radius: 18px; background: radial-gradient(120% 120% at 50% 0%, #26324a, #141b2b); min-height: 0; }
.vm-stage[data-n="1"] .vm-tile { border-radius: 0; }
.vm-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-tile.self video { transform: scaleX(-1); }
.vm-tile.sharing video { object-fit: contain; background: #0b1120; }
.vm-tile.spot { grid-column: 1 / -1; grid-row: span 2; }
.vm-tile-av { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.vm-tile-av .avatar { box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 0 12px rgba(255,255,255,.04); }
.vm-tile.camoff video { visibility: hidden; }
.vm-tile.camoff .vm-tile-av { display: flex; }
.vm-tile.hand { box-shadow: inset 0 0 0 3px #fbbf24; }
.vm-tile-name { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 999px; background: rgba(15, 23, 42, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 500; }
.vm-tile-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-tile-mute { color: #fca5a5; } .vm-tile-mute .vm-ic { width: 14px; height: 14px; }
.vm-tile-hand { width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; background: #fbbf24; color: #3b2a00; display: inline-flex; align-items: center; justify-content: center; animation: vm-wave .9s ease-in-out infinite alternate; flex: none; }
.vm-tile-hand[hidden] { display: none; }
.vm-tile-hand .vm-ic { width: 14px; height: 14px; }
.vm-tile-mute[hidden] { display: none; }
@keyframes vm-wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
/* Canlı ses grafiği (sağ alt) + konuşan vurgusu */
.vm-tile-meter { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 6px; border-radius: 8px; background: rgba(15,23,42,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .5; transition: opacity .2s; }
.vm-tile-meter i { width: 3px; height: 14px; border-radius: 2px; background: #cbd5e1; transform: scaleY(.18); transform-origin: center; transition: transform .07s linear, background .15s; }
.vm-tile-meter i:nth-child(1) { transform: scaleY(calc(.18 + var(--lvl, 0) * .7)); }
.vm-tile-meter i:nth-child(2) { transform: scaleY(calc(.26 + var(--lvl, 0) * .74)); }
.vm-tile-meter i:nth-child(3) { transform: scaleY(calc(.18 + var(--lvl, 0) * .6)); }
.vm-tile.speaking .vm-tile-meter { opacity: 1; }
.vm-tile.speaking .vm-tile-meter i { background: #22c55e; }
.vm-tile.speaking { box-shadow: inset 0 0 0 3px #22c55e; }
.vm-self .vm-tile-meter { right: 6px; bottom: 6px; height: 18px; }
/* Kayıt bandı (üstte sürekli) */
.vm-recbar { position: absolute; z-index: 6; left: 50%; top: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(220,38,38,.95); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(220,38,38,.4); pointer-events: none; }
.vm-recbar[hidden] { display: none; }
.vm-recdot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: vm-recblink 1.2s infinite; }

/* Kendi görüntüm: tek başınayken tam ekran, biri gelince köşede PiP */
.vm-self { position: absolute; z-index: 3; right: 14px; top: 76px; width: 116px; height: 156px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.18); transition: all .35s cubic-bezier(.2,.8,.2,1); }
.vm-self .avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.vm-self .vm-tile-name { left: 6px; bottom: 6px; padding: 3px 8px; font-size: 11px; }
.vm-self.alone { right: 0; top: 0; width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none; }
.vm-self.alone .avatar.lg { width: 104px; height: 104px; font-size: 34px; }

/* Üst bilgi (cam efekti) */
.vm-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 26px; background: linear-gradient(rgba(11,17,32,.6), transparent); pointer-events: none; }
.vm-top > * { pointer-events: auto; }
.vm-top-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.vm-top-l b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: .9; }
.vm-count .vm-ic { width: 15px; height: 15px; }
.vm-top-r { display: flex; gap: 8px; }
.vm-round.glass { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; }
.vm-round[data-badge]::after { content: attr(data-badge); position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Yüzen hap kontrol çubuğu */
.vm-pill { position: absolute; z-index: 5; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 40px rgba(0,0,0,.35); color: #1e293b; }
.vm-pbtn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #e8f0fe; color: #3b82f6; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .1s; }
.vm-pbtn:hover { background: #dbe7fd; } .vm-pbtn:active { transform: scale(.94); }
.vm-pbtn.off { background: #fde8e8; color: #dc2626; }
.vm-pbtn.on { background: #3b82f6; color: #fff; }
.vm-timer { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 12px; border-radius: 999px; background: #f1f5fb; color: #3b82f6; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.vm-timer i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #3b82f6; box-sizing: border-box; }
.vm-timer.rec { color: #dc2626; } .vm-timer.rec i { border: 0; background: #ef4444; animation: vm-recblink 1.2s infinite; }
@keyframes vm-recblink { 50% { opacity: .35; } }
.vm-end { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #ef4444; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(239,68,68,.28); }
.vm-end:hover { background: #ef4444; color: #fff; }
.vm-end .vm-ic { width: 26px; height: 26px; }
.vm-pbtn.narrow-only { display: none; }

/* Paneller */
.vm-panel { position: absolute; z-index: 6; right: 14px; top: 76px; bottom: 96px; width: 340px; display: flex; flex-direction: column; border-radius: 22px; background: #fff; color: #1e293b; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; }
.vm-panel[hidden] { display: none; }
.vm-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 18px; font-size: 15px; }
.vm-chat-list { flex: 1; overflow-y: auto; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.vm-msg { align-self: flex-start; max-width: 85%; padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: #f1f5fb; font-size: 14px; line-height: 1.35; }
.vm-msg b { display: block; font-size: 11px; color: #3b82f6; margin-bottom: 1px; }
.vm-msg.mine { align-self: flex-end; background: linear-gradient(180deg, #4f8ff7, #3b7cf0); color: #fff; border-radius: 16px 16px 6px 16px; }
.vm-chat-sys { align-self: center; font-size: 11px; color: #94a3b8; }
/* WhatsApp tarzı: mesaj saati */
.vm-msg { display: flex; flex-direction: column; }
.vm-msg-time { align-self: flex-end; font-size: 10px; opacity: .55; margin-top: 2px; }
.vm-msg.mine .vm-msg-time { color: rgba(255,255,255,.85); opacity: .9; }
/* El kaldırma sırası */
.vm-handq { margin: 0 10px 8px; padding: 8px 10px; border-radius: 14px; background: #fff7e6; }
.vm-handq-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #b45309; margin-bottom: 4px; }
.vm-handq-h .vm-ic { width: 15px; height: 15px; }
.vm-handq-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
.vm-handq-row.me { font-weight: 700; }
.vm-handq-n { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.vm-addppl { margin: 2px 10px 8px; }
/* Dosya kutusu */
.vm-files { flex: 1; overflow-y: auto; padding: 6px 12px; display: flex; flex-direction: column; gap: 6px; }
.vm-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f6f8fc; color: #1e293b; }
.vm-file:hover { background: #eef2fb; text-decoration: none; }
.vm-file-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #e8f0fe; color: #3b82f6; display: grid; place-items: center; }
.vm-file b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-file small { color: #94a3b8; font-size: 11.5px; }
.vm-files-bar { padding: 10px 12px 12px; border-top: 1px solid #eef2f8; }
.vm-files-bar .btn { width: 100%; }
.vm-invite-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.vm-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.vm-user:hover, .vm-user.on { background: var(--surface-2); }
/* Sabitlenen kişiler: sol kenarda balonlar */
.vm-pins { position: absolute; z-index: 5; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.vm-pin { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: none; padding: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.vm-pin .avatar { width: 100%; height: 100%; }
.vm-pin-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vm-pin-x { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #334155; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.vm-pin:hover .vm-pin-x { opacity: 1; }
.vm-pin-x .vm-ic { width: 12px; height: 12px; }
.vm-chat-bar { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #eef2f8; }
.vm-chat-bar .input { flex: 1; border-radius: 999px; background: #f6f8fc; }
.vm-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #3b82f6; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.vm-send .vm-ic { width: 19px; height: 19px; }
.vm-people { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.vm-person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; font-size: 14px; }
.vm-person:hover { background: #f6f8fc; }
.vm-person .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-person-ic { color: #94a3b8; } .vm-person-ic.hand { color: #f59e0b; } .vm-person-ic .vm-ic { width: 17px; height: 17px; }
.vm-tag { font-size: 11px; font-weight: 600; color: #3b82f6; background: #e8f0fe; padding: 2px 8px; border-radius: 999px; }
.vm-waitbox:empty { display: none; }
.vm-waitbox { margin: 0 12px 6px; padding: 10px; border-radius: 16px; background: #fff7e6; }
.vm-wait-h { font-size: 12px; font-weight: 700; color: #b45309; margin: 0 2px 6px; }
.vm-wait-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; }
.vm-wait-row small { color: #94a3b8; }
.vm-mini { white-space: nowrap; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; background: #fff; color: #475569; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.vm-mini.primary { background: #3b82f6; color: #fff; }

/* Alt sayfa (diğer işlemler) */
.vm-sheet-back { position: absolute; inset: 0; z-index: 9; background: rgba(2, 6, 23, .45); display: flex; align-items: flex-end; animation: vm-fade .2s; }
@keyframes vm-fade { from { opacity: 0; } }
.vm-sheet { width: 100%; background: #fff; color: #1e293b; border-radius: 26px 26px 0 0; padding: 8px 14px calc(18px + env(safe-area-inset-bottom)); animation: vm-up .25s cubic-bezier(.2,.8,.2,1); }
@keyframes vm-up { from { transform: translateY(100%); } }
.vm-grab { width: 40px; height: 5px; border-radius: 3px; background: #e2e8f0; margin: 4px auto 10px; }
.vm-sheet-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 8px; border: 0; background: transparent; font: inherit; font-size: 15px; color: inherit; cursor: pointer; border-radius: 14px; }
.vm-sheet-item:hover { background: #f6f8fc; }
.vm-sheet-ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8f0fe; color: #3b82f6; }
.vm-sheet-item.on .vm-sheet-ic { background: #3b82f6; color: #fff; }

/* Bekleme */
.vm-waiting { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, var(--vm-bg1), var(--vm-bg2)); color: var(--vm-ink); }
.vm-waiting[hidden] { display: none; }
.vm-wait-card { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 22px 22px; border-radius: 28px; background: var(--vm-card); box-shadow: var(--vm-shadow); }
.vm-wait-card p { margin: 0; color: var(--vm-sub); font-size: 14px; line-height: 1.45; }
.vm-wait-title { font-size: 19px; }
.vm-wait-ring { position: relative; margin-bottom: 8px; }
.vm-wait-ring::before, .vm-wait-ring::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(59,130,246,.35); animation: vm-ring 2s infinite; }
.vm-wait-ring::after { animation-delay: 1s; }
@keyframes vm-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.vm-dots { display: flex; gap: 6px; margin: 4px 0 8px; }
.vm-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; animation: vm-dot 1.2s infinite; }
.vm-dots i:nth-child(2) { animation-delay: .2s; } .vm-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes vm-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.vm-ghostbtn { border: 0; background: var(--vm-blue-soft); color: var(--vm-blue); font: inherit; font-weight: 600; padding: 10px 22px; border-radius: 999px; cursor: pointer; }

/* Dış katılımcı girişi */
.vm-guest { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, var(--vm-bg1), var(--vm-bg2)); color: var(--vm-ink); }
.vm-guest-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 20px; border-radius: 28px; background: var(--vm-card); box-shadow: var(--vm-shadow); text-align: left; }
.vm-guest-card > .vm-created-ic { margin-top: 10px; }
.vm-guest-card > .vm-guest-title, .vm-guest-card > p { text-align: center; margin: 0; }
.vm-guest-title { font-size: 19px; }
.vm-guest-meta { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.vm-preview { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, #26324a, #141b2b); }
.vm-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vm-preview-off { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #cbd5e1; font-size: 13px; }
.vm-preview.camoff video { visibility: hidden; }
.vm-preview.camoff .vm-preview-off { display: flex; }

@media (min-width: 821px) {
  .vm-self { width: 220px; height: 140px; top: auto; bottom: 96px; right: 18px; }
  .vm-stage { padding: 72px 14px 92px; gap: 12px; }
  .vm-stage[data-n="1"] { padding: 0; }
}
@media (max-width: 820px) {
  .vm-pbtn.wide-only { display: none; }
  .vm-pbtn.narrow-only { display: inline-flex; }
  .vm-pill { gap: 6px; padding: 7px; }
  .vm-pbtn, .vm-end, .vm-timer { height: 44px; } .vm-pbtn, .vm-end { width: 44px; }
  .vm-timer { padding: 0 12px 0 10px; }
  .vm-stage[data-n="2"], .vm-stage[data-n="4"] { grid-template-columns: 1fr; grid-auto-rows: 1fr; padding: 0; gap: 2px; }
  .vm-stage[data-n="2"] .vm-tile, .vm-stage[data-n="4"] .vm-tile { border-radius: 0; }
  .vm-stage[data-n="4"] { grid-template-columns: 1fr 1fr; }
  .vm-stage[data-n="6"], .vm-stage[data-n="many"] { grid-template-columns: 1fr 1fr; }
  .vm-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 72vh; border-radius: 26px 26px 0 0; }
  /* isim etiketleri üstte: alttaki hap kontrol çubuğunun altında kalmasın */
  .vm-stage .vm-tile-name { top: 12px; bottom: auto; }
  .vm-stage[data-n="1"] .vm-tile:first-child .vm-tile-name,
  .vm-stage[data-n="2"] .vm-tile:first-child .vm-tile-name,
  .vm-stage[data-n="4"] .vm-tile:nth-child(-n+2) .vm-tile-name,
  .vm-stage[data-n="6"] .vm-tile:nth-child(-n+2) .vm-tile-name,
  .vm-stage[data-n="many"] .vm-tile:nth-child(-n+2) .vm-tile-name { top: 84px; }
  .vm-qbtn small { display: none; }
  .vm-home { padding-left: 2px; padding-right: 2px; }
}

/* Giriş ekranı: tanıtım sayfasına dönüş */
.login-home { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.login-home:hover { color: var(--primary); }

/* Çok-şirketli giriş: alt "Şirket değiştir" + firma seçici */
.login-switch { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.login-switch:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.co-list .acc-av.co-av { background: #fff; border: 1px solid var(--line); }
.co-av img { object-fit: contain; padding: 4px; }
.co-other { align-self: stretch; }
.co-addr { display: flex; flex-direction: column; gap: 12px; }
.co-hint { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Birleşik bildirim/uyarı düğmesi (zil) */
.inbox-btn.warn { color: #c2410c; }
.inbox-btn.danger { color: #b42318; }
.inbox-btn.warn .alert-count { background: #e8590c; }
.inbox-btn.danger .alert-count { background: #b42318; }
.inbox-sec { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.inbox-sec b { font-size: 11px; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--primary); }
.inbox-sec.warn b { background: #e8590c; }
.inbox-panel { max-height: min(70vh, 560px); overflow-y: auto; }

/* ══════════ Telsiz (bas-konuş) ══════════ */
.rd-btn { position: relative; }
.rd-btn.live { color: #16a34a; }
.rd-live { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: rd-pulse 1.2s infinite; }
@keyframes rd-pulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.rd-menu { width: 340px; padding: 6px; }
.rd-item { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.rd-item:hover { background: var(--surface-2); }
.rd-item.on { background: rgba(34,197,94,.08); }
.rd-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.rd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
.rd-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-item-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-item-txt small { font-size: 12px; color: var(--muted); }
.rd-item.on .rd-item-txt small { color: #16a34a; font-weight: 600; }
.rd-stack { display: flex; flex: none; }
.rd-stack > span { margin-left: -8px; } .rd-stack > span:first-child { margin-left: 0; }
.rd-stack .avatar { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.rd-stack > span.off { opacity: .4; }
.rd-mute { width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; }
.rd-mute:hover { background: var(--surface); color: var(--text); }
.rd-mute.on { color: #dc2626; }
.rd-mute svg, .rd-hbtn svg { width: 19px; height: 19px; }

.rd-panel { position: fixed; left: 20px; bottom: 20px; z-index: 75; width: 340px; max-width: calc(100vw - 20px); color: #fff; border-radius: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; user-select: none; -webkit-user-select: none; animation: rd-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes rd-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.rd-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 6px 16px; cursor: grab; touch-action: none; }
.rd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rd-title b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-title small { font-size: 12px; opacity: .75; }
.rd-hbtn { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.rd-hbtn:hover { background: rgba(255,255,255,.24); }
.rd-hbtn.on { background: rgba(239,68,68,.35); }
.rd-me { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 12px; }
.rd-me-av { position: relative; width: 196px; height: 196px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-touch-callout: none; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.rd-me-av .rd-ring { position: absolute; inset: 0; pointer-events: none; }
.rd-me-av .avatar.xl { width: 128px; height: 128px; font-size: 40px; box-shadow: 0 0 0 4px rgba(255,255,255,.18); transition: box-shadow .2s; pointer-events: none; }
.rd-me-av.down { transform: scale(.96); }
.rd-me-av.talking .avatar.xl { box-shadow: 0 0 0 4px #22c55e, 0 0 34px rgba(34,197,94,.7); }
.rd-hint { font-size: 13px; opacity: .8; text-align: center; padding: 0 16px; min-height: 18px; }
.rd-hint.live { opacity: 1; font-weight: 600; }
.rd-members { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 16px; background: rgba(0,0,0,.18); scrollbar-width: none; }
.rd-members::-webkit-scrollbar { display: none; }
.rd-m { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; flex: none; font-size: 11.5px; transition: opacity .2s; }
.rd-m span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.rd-m.off { opacity: .38; }
.rd-m-av { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.rd-m-av .rd-ring { position: absolute; inset: 0; }
.rd-m-av .avatar { width: 46px; height: 46px; font-size: 15px; }
.rd-m.talking .avatar { box-shadow: 0 0 0 3px #22c55e, 0 0 18px rgba(34,197,94,.65); }
.rd-m.talking span { font-weight: 700; opacity: 1; }
.rd-empty { padding: 14px; text-align: center; font-size: 13px; opacity: .7; background: rgba(0,0,0,.18); }

.rd-onair { position: fixed; left: 20px; bottom: 20px; z-index: 74; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: #0f172a; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.35); cursor: pointer; font: inherit; animation: rd-in .25s; transition: opacity .3s, transform .3s; }
.rd-onair.out { opacity: 0; transform: translateY(10px); }
.rd-onair-av .avatar { width: 34px; height: 34px; box-shadow: 0 0 0 2px #22c55e; }
.rd-onair-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.rd-onair-txt b { font-size: 13px; } .rd-onair-txt small { font-size: 11px; opacity: .7; }
.rd-bars { display: flex; align-items: center; gap: 2px; height: 18px; }
.rd-bars i { width: 3px; border-radius: 2px; background: #22c55e; animation: rd-bar .9s ease-in-out infinite; }
.rd-bars i:nth-child(1) { height: 8px; } .rd-bars i:nth-child(2) { height: 16px; animation-delay: .15s; } .rd-bars i:nth-child(3) { height: 11px; animation-delay: .3s; } .rd-bars i:nth-child(4) { height: 14px; animation-delay: .45s; }
@keyframes rd-bar { 50% { transform: scaleY(.35); } }
.rd-unlock { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 76; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: #16a34a; color: #fff; font: inherit; font-weight: 600; box-shadow: 0 10px 26px rgba(22,163,74,.4); cursor: pointer; }
.rd-unlock svg { width: 18px; height: 18px; }
@media (max-width: 820px) {
  .rd-panel { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-width: none; }
  .rd-menu { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; }
  .rd-onair { left: 10px; bottom: 12px; }
}

/* Program Ayarları › Telsiz */
.sc-radio-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.sc-radio-top p { margin: 0; max-width: 560px; }
.sc-radio-list { display: flex; flex-direction: column; gap: 10px; }
.sc-radio-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.sc-radio-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sc-radio-avs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.sc-radio-avs > span { opacity: .55; } .sc-radio-avs > span.on { opacity: 1; }
.sc-radio-btns { display: flex; gap: 6px; flex: none; }
.sc-radio-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-radio-sw button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--border); }
.sc-radio-sw button.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.sc-radio-uh { display: flex; justify-content: space-between; align-items: baseline; }
.sc-radio-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; margin-top: 8px; }
.sc-radio-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.sc-radio-user:hover { background: var(--surface-2); }
@media (max-width: 640px) { .sc-radio-top { flex-direction: column; } .sc-radio-card { flex-wrap: wrap; } }
.dropdown button.rd-item-main { display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; flex: 1; min-width: 0; padding: 9px 8px; border-radius: 10px; }
.dropdown button.rd-item-main:hover { background: none; }
.dropdown button.rd-mute { display: inline-flex; width: 34px; height: 34px; padding: 0; flex: none; border-radius: 10px; }

/* Mesajlar: WhatsApp tarzı tikler ve "yazıyor…" */
.msg-tick { width: 17px; height: 11px; margin-left: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--faint); }
.chat-msg.t-sent .msg-tick .t2 { display: none; }
.chat-msg.t-read .msg-tick { color: #34a1f1; }
.msg-conv-status.typing { color: #16a34a !important; font-weight: 600; }
.msg-typing .chat-bubble { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; }
.msg-typing-who { font-size: 12px; color: var(--muted); }
.msg-typing-who:empty { display: none; }
.msg-dots { display: inline-flex; gap: 4px; }
.msg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: msg-dot 1.2s infinite; }
.msg-dots i:nth-child(2) { animation-delay: .18s; } .msg-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes msg-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Telsiz: basılı tutulan resimlerde Android/Samsung'un mavi dokunma vurgusu, odak çerçevesi ve resim seçimi olmasın */
.rd-me-av, .rd-q-av, .rd-m-av, .rd-panel, .rd-dock { -webkit-tap-highlight-color: transparent; }
.rd-me-av:focus, .rd-me-av:focus-visible, .rd-q-av:focus, .rd-q-av:focus-visible { outline: none; }
.rd-me-av *, .rd-q-av * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.rd-me-av img, .rd-q-av img { pointer-events: none; }

/* Telsiz menüsü başlığı: sağda Sekreterya / Güvenlik düğmeleri */
.rd-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-deskbtns { display: flex; gap: 6px; }
.dropdown button.rd-deskbtn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.dropdown button.rd-deskbtn:hover { background: color-mix(in srgb, var(--c) 20%, transparent); }
.rd-deskbtn i, .rd-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* Görevli bekleme odası (kalıcı) */
.rd-dock { position: fixed; left: 20px; bottom: 20px; z-index: 74; width: 320px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; color: #fff; border-radius: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; user-select: none; -webkit-user-select: none; animation: rd-in .25s cubic-bezier(.2,.8,.2,1); }
.rd-dock-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 16px; }
.rd-dock-head > svg { width: 22px; height: 22px; flex: none; }
.rd-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px 4px; padding: 6px 10px 4px; overflow-y: auto; }
.rd-q { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; padding: 4px 2px 8px; border-radius: 16px; transition: background .2s; }
.rd-q b { font-size: 12.5px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-q small { font-size: 11px; opacity: .7; }
.rd-q-av { position: relative; width: 96px; height: 96px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; touch-action: none; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.rd-q-av .rd-ring { position: absolute; inset: 0; pointer-events: none; }
.rd-q-av .avatar.lg { width: 62px; height: 62px; font-size: 20px; box-shadow: 0 0 0 3px rgba(255,255,255,.18); transition: box-shadow .2s; }
.rd-q-av:active { transform: scale(.95); }
.rd-q.unread .rd-q-av .avatar.lg { box-shadow: 0 0 0 3px #fbbf24; }
.rd-q.talking { background: rgba(34,197,94,.14); }
.rd-q.talking .rd-q-av .avatar.lg { box-shadow: 0 0 0 3px #22c55e, 0 0 24px rgba(34,197,94,.6); }
.rd-q.answering { background: rgba(59,130,246,.2); }
.rd-q.answering .rd-q-av .avatar.lg { box-shadow: 0 0 0 3px #60a5fa, 0 0 24px rgba(96,165,250,.65); }
.rd-q-x { position: absolute; top: 2px; right: 4px; z-index: 2; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.rd-q:hover .rd-q-x { opacity: 1; }
@media (hover: none) { .rd-q-x { opacity: .7; } }
.rd-dock-empty { padding: 10px 18px 16px; font-size: 13px; opacity: .8; line-height: 1.45; }
.rd-dock .rd-hint { padding: 2px 14px 10px; }
.rd-dock-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 14px; background: rgba(0,0,0,.18); }
.rd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rd-chip:hover { background: rgba(255,255,255,.22); }
.rd-dock.min { width: auto; border-radius: 999px; }
.rd-dock-pill { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.rd-dock-pill svg { width: 20px; height: 20px; }
.rd-dock-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fbbf24; color: #3b2a00; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* Bekleme odası açıkken kanal paneli ve canlı çip yanına yerleşsin */
body.rd-docked .rd-panel { left: 356px; }
body.rd-docked .rd-onair { left: 356px; }
@media (max-width: 820px) {
  .rd-dock { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 46vh; }
  .rd-dock.min { left: auto; right: auto; left: 8px; }
  .rd-queue { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  body.rd-docked .rd-panel { left: 8px; bottom: auto; top: 70px; }
  body.rd-docked .rd-onair { left: 10px; bottom: auto; top: 72px; }
}

/* Ayarlar › Telsiz Kanallarım */
.sr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.sr-row:first-of-type { border-top: 0; }
.sr-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-row .grow b, .sr-row .grow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .grow small { color: var(--muted); font-size: 12px; }
.sr-row.invite { background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 12px; padding: 10px 12px; border: 0; margin-bottom: 6px; }
.sr-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sr-avs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.sr-avs .wait { opacity: .45; }
.sr-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-sw button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--border); }
.sr-sw button.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.sr-uh { display: flex; justify-content: space-between; align-items: baseline; }
.sr-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; margin-top: 8px; }
.sr-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.sr-user:hover { background: var(--surface-2); }
.sr-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #fff4e5; color: #9a5b0a; white-space: nowrap; }
.sr-tag.ok { background: #e7f6ec; color: #15803d; }
.rd-manage { display: block; margin: 4px 2px 2px; padding: 10px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--primary); text-align: center; }
.rd-manage:hover { text-decoration: none; background: var(--surface-2); border-radius: 8px; }

/* Mobil ayar satırları: açıklama üstte tam genişlik, seçici altta tam genişlik (yan yana sıkışmasın) */
@media (max-width: 640px) {
  .set-row { flex-wrap: wrap; row-gap: 8px; }
  .set-row > .grow { flex: 1 1 100%; }
  .set-row > .seg { display: flex; flex-wrap: nowrap; width: 100%; }
  .set-row > .seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; font-size: 14px; }
  /* çok / uzun seçenekli seçimler (Dil, Metin biçimi): yan yana sıkışıp üst üste binmesin → ızgara */
  .set-row > .seg.seg-long { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; border-radius: 16px; }
  .set-row > .seg.seg-many { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .set-row > .seg.seg-long button { height: 34px; border-radius: 12px; overflow: hidden; text-overflow: ellipsis; }
  .set-row > select, .set-row > .input { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .set-row > .sc-num-wrap { flex: 1 1 100%; }
  .set-row > .sc-num-wrap .sc-num { flex: 1; width: auto; }
  .set-line { row-gap: 8px; }
}

/* Program Ayarları › Yapay Zeka: kullanıcı kota kartları + kullanım penceresi */
.sc-ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.sc-ai-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface, #fff); min-width: 0; }
.sc-ai-card.over { border-color: #f3c9c4; }
.sc-ai-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-ai-who .grow { min-width: 0; display: flex; flex-direction: column; }
.sc-ai-who b, .sc-ai-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ai-who small { color: var(--muted); font-size: 12.5px; }
.sc-ai-use { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-ai-num { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 6px 12px; cursor: pointer; font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.sc-ai-num b { font-size: 18px; color: var(--primary, #1e4b8f); }
.sc-ai-num small { color: var(--muted); }
.sc-ai-num:hover { border-color: var(--primary, #1e4b8f); }
.sc-ai-num.over b { color: #c0392b; }
.sc-ai-bar { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: -4px; }
.sc-ai-bar i { display: block; height: 100%; background: var(--primary, #1e4b8f); }
.sc-ai-card.over .sc-ai-bar i { background: #c0392b; }
.sc-ai-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-ai-q .sc-num-wrap { flex: 1; max-width: 190px; }
.sc-ai-q .sc-num { flex: 1; width: auto; min-width: 0; }
.sc-ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sc-ai-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-ai-stat small { color: var(--muted); font-size: 12px; }
.sc-ai-stat b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ai-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }
.sc-line-wrap { position: relative; }
.sc-line { width: 100%; height: auto; display: block; touch-action: pan-y; }
.sc-line .grid { stroke: var(--border); stroke-width: 1; }
.sc-line .ax { fill: var(--muted); font-size: 12px; }
.sc-line .area { fill: #2563eb; opacity: .1; }
.sc-line .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-line .ln.tot { stroke: #2563eb; }
.sc-line .ln.out { stroke: #f59e0b; stroke-width: 2; stroke-dasharray: 5 4; }
.sc-line .guide { stroke: var(--muted); stroke-dasharray: 3 3; }
.sc-line .dot { fill: #2563eb; stroke: #fff; stroke-width: 2; }
.sc-line-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.12); pointer-events: none; white-space: nowrap; }
.sc-ai-legend { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sc-ai-legend .k { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.sc-ai-legend .k:first-child { margin-left: 0; }
.sc-ai-legend .k.tot { background: #2563eb; }
.sc-ai-legend .k.out { background: #f59e0b; }
@media (max-width: 640px) {
  .sc-ai-cards { grid-template-columns: 1fr; }
  .sc-ai-stats { grid-template-columns: 1fr 1fr; }
  .sc-ai-stat b { font-size: 17px; }
  .sc-line .ax { font-size: 20px; }
}

/* Telefonda düğme grupları ikonlu seçiciye dönüşür (segselect.js): tetik düğmesi + alttan açılan panel */
.seg-pick { display: none; }
@media (max-width: 640px) {
  .seg.has-select, .tabbar.has-select { display: none !important; }
  .seg-pick:not([hidden]) { display: block; width: 100%; min-width: 0; }
  .page-head .head-right .seg-pick { flex: 1 1 100%; }
  .seg-pick.sub { margin-bottom: 12px; }
  .seg-pick.tabs { padding: 10px 10px 0; }
}
.sp-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 14px 6px 8px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.sp-trigger:active { transform: scale(.99); }
.sp-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sp-trigger .sp-ico, .sp-opt .sp-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); }
.sp-trigger .sp-ico svg, .sp-opt .sp-ico svg { width: 18px; height: 18px; opacity: 1; }
.sp-trigger .sp-txt { flex: 1; min-width: 0; font-weight: 650; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.sp-chev { width: 8px; height: 8px; flex: none; margin: 0 4px 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
/* Alt modül seçici (Üretim, CRM): marka renginde, belirgin */
.seg-pick.sub .sp-trigger { background: linear-gradient(135deg, var(--primary), #2f6fd1); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(30, 75, 143, .25); }
.seg-pick.sub .sp-trigger .sp-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.seg-pick.sub .sp-chev { border-color: rgba(255, 255, 255, .85); }
.seg-pick.sub .sp-n { background: rgba(255, 255, 255, .2); color: #fff; }

.sp-back { position: fixed; inset: 0; z-index: 7500; background: rgba(15, 23, 42, 0); display: flex; align-items: flex-end; justify-content: center;
  transition: background .2s ease; }
.sp-back.in { background: rgba(15, 23, 42, .45); }
.sp-sheet { width: 100%; max-width: 520px; max-height: 75vh; overflow-y: auto; background: var(--surface); color: var(--text);
  border-radius: 22px 22px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.sp-back.in .sp-sheet { transform: none; }
.sp-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 10px; }
.sp-title { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 8px 8px; }
.sp-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.sp-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 10px; border: 0; border-radius: 14px;
  background: transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-opt:active { background: var(--surface-2); }
.sp-opt .sp-ico { background: var(--surface-2); color: var(--muted); }
.sp-opt .sp-txt { flex: 1; min-width: 0; }
.sp-opt.on { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.sp-opt.on .sp-ico { background: var(--primary); color: #fff; }
.sp-opt:disabled { opacity: .45; }
.sp-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); position: relative; }
.sp-opt.on .sp-check { border-color: var(--primary); background: var(--primary); }
.sp-opt.on .sp-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Telefonda sayfa başlığı sağ alanı (arama, filtre, düğmeler): sağa yaslı yarım satırlar yerine tam genişlikte, düzenli ızgara */
@media (max-width: 640px) {
  .page-head > .head-right, .page-head > .seg:last-child { margin-left: 0; width: 100%; }
  .page-head > .head-right { display: flex; flex-wrap: wrap; justify-content: stretch; align-items: stretch; gap: 8px; }
  .page-head > .head-right > * { flex: 1 1 auto; min-width: 0; }
  .page-head > .head-right > input[type=search], .page-head > .head-right > input[type=text], .page-head > .head-right > .search,
  .page-head > .head-right > .doc-search-wrap, .page-head > .head-right > .seg-pick { flex: 1 1 100% !important; width: auto !important; }
  .page-head > .head-right > select, .page-head > .head-right > input[type=date] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; }
  .page-head > .head-right > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .page-head > .head-right > .btn:only-child { flex-basis: 100%; }
}
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
@media (max-width: 640px) {
  .filters > .seg-pick, .filters .seg-pick { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 640px) {
  /* Filtre ızgarasında tek kalan liste / arama kutusu yarım satırda kalmasın */
  .filters > select:only-of-type, .filters > select:last-child, .filters > .input:last-child,
  .filters > input:not([type=date]):not([type=checkbox]), .filters > .seg-pick { grid-column: 1 / -1; }
  /* Başlıkta doğrudan duran tek düğme (ör. Satış › Yeni Fatura) */
  .page-head > .btn:last-child { flex: 1 1 100%; justify-content: center; margin-left: 0; }
  .page-head > .head-right > .new-wrap { flex: 1 1 calc(50% - 4px); }
  .page-head > .head-right > .new-wrap > .btn { width: 100%; justify-content: center; }
  /* Araçlar kartları: sabit yükseklik yerine içeriğe göre, yazı taşmasın */
  .modules .module-btn { height: auto; min-height: 150px; padding: 16px 12px; gap: 8px; }
  .modules .module-btn small { font-size: 12.5px; line-height: 1.4; }
}
@media (max-width: 640px) { .filters > input:not([type=checkbox]) { width: 100% !important; max-width: 100%; } }
.prod-subnav button svg { width: 16px; height: 16px; flex: none; opacity: .85; }

.sc-sql-edit { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; margin: 8px 0; }

/* Toplantılar › Geçmiş */
.vm-past { opacity: .92; }
.vm-past-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.vm-past-meta small { color: var(--vm-sub, var(--muted)); }
.vm-more { display: block; margin: 8px auto 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; padding: 8px; }
.vm-past-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.vm-past-kv span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.vm-past-kv small { color: var(--muted); font-size: 12px; }
.vm-past-people { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-past-p { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; }
.vm-past-p small { color: var(--muted); }
.vm-past-audio { width: 100%; margin-top: 14px; }
.vm-past-tr { max-height: 45vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.vm-past-tr p { margin: 6px 0; line-height: 1.5; }

/* Mesaj menüsü (WhatsApp tarzı): ⌄ düğmesi, menü, hızlı tepkiler, alıntı, iletildi, tepki çipleri */
.chat-bubble { position: relative; }
.msg-menu-btn { position: absolute; top: 2px; right: 4px; width: 26px; height: 22px; border: 0; border-radius: 0 10px 0 10px; cursor: pointer;
  background: linear-gradient(225deg, var(--surface) 55%, transparent); color: var(--muted); font-size: 15px; line-height: 1; opacity: 0; transition: opacity .12s; }
.chat-msg.mine .msg-menu-btn { background: linear-gradient(225deg, var(--primary-soft) 55%, transparent); }
.chat-msg:hover .msg-menu-btn, .msg-menu-btn:focus-visible { opacity: 1; }
@media (hover: none) { .msg-menu-btn { display: none; } }   /* dokunmatikte basılı tut */
.msg-menu { position: fixed; z-index: 7600; min-width: 210px; max-width: min(320px, calc(100vw - 16px)); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 34px rgba(15, 23, 42, .22); padding: 6px; animation: msgmenu .12s ease-out; }
@keyframes msgmenu { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.msg-quick { display: flex; gap: 2px; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.msg-quick.all { flex-wrap: wrap; max-width: 300px; }
.msg-qe { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; transition: transform .1s, background .1s; }
.msg-qe:hover { background: var(--surface-2); transform: scale(1.15); }
.msg-qe.on { background: var(--primary-soft); }
.msg-qe.more { font-size: 18px; color: var(--muted); background: var(--surface-2); }
.msg-mi { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14.5px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.msg-mi:hover { background: var(--surface-2); }
.msg-mi.danger { color: #c0392b; }
.msg-quote { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; border: 0; border-left: 4px solid #25a36f;
  background: rgba(0, 0, 0, .05); border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.msg-quote b { font-size: 12.5px; color: #1d8a5c; }
.msg-quote span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.msg-replybar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; background: var(--surface); }
.msg-replybar .msg-quote { flex: 1; margin: 0; cursor: default; }
.msg-reply-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.msg-fwd { font-size: 12px; font-style: italic; color: var(--muted); margin-bottom: 2px; }
.msg-edited { font-size: 11px; font-style: italic; margin-right: 4px; }
.msg-star { color: #f5a524; margin-right: 3px; }
.msg-deleted .chat-text { font-style: italic; color: var(--muted); }
.chat-msg.has-react { margin-bottom: 14px; }
.msg-reacts { position: absolute; bottom: -14px; right: 8px; display: flex; gap: 3px; }
.chat-msg:not(.mine) .msg-reacts { right: auto; left: 8px; }
.msg-react { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 1px 6px; font-size: 13px; line-height: 1.4; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.msg-react small { font-size: 11px; color: var(--muted); }
.msg-react.mine { border-color: #25a36f; background: #e8f7ef; }
.chat-msg.flash .chat-bubble { animation: msgflash 1.3s ease; }
@keyframes msgflash { 0%, 60% { box-shadow: 0 0 0 3px rgba(37, 163, 111, .45); } 100% { box-shadow: none; } }
.msg-starbtn { font-size: 17px; color: var(--muted); }
.msg-starbtn.on { color: #f5a524; }
.msg-info-quote { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.msg-info-row { display: flex; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.msg-info-row > div { display: flex; flex-direction: column; }
.msg-info-row small { color: var(--muted); }
.msg-info-ic { width: 28px; text-align: center; color: #34b7f1; font-weight: 700; }
.msg-info-sec { margin: 12px 0 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.msg-info-people { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.msg-info-people span { display: flex; align-items: center; gap: 8px; }
.msg-fwd .input { margin-bottom: 8px; }
.msg-picklist.fwd { max-height: 46vh; overflow-y: auto; }
.msg-picklist.fwd .msg-pick { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.msg-fwd-chosen { margin-top: 8px; }
html[data-theme="dark"] .msg-react.mine { background: rgba(37, 163, 111, .2); }
html[data-theme="dark"] .msg-quote { background: rgba(255, 255, 255, .06); }

/* Sabit iskelet kaydırılamasın: odaklanma / scrollIntoView, overflow:hidden kapları da kaydırabiliyor → başlık kaybolup
   alt çubuk mesaj kutusunun üstüne biniyordu. Kayma app.js'teki koruma ile anında geri alınır. */
.shell, .msg-page, .msg-conv, main#view.msg-view { overflow: hidden; min-height: 0; }   /* clip yerine hidden: ızgara öğesi içeriğe göre büyümesin; kaymaya karşı app.js koruması var */
html, body { overflow: hidden; height: 100%; }
@media print { html, body { overflow: visible !important; height: auto !important; } }   /* çok sayfalı çıktılar kesilmesin */
/* Saha görev raporu (yazdırma) */
.tr-report .pf-table th { width: auto; }
.tr-report .nowrap { white-space: nowrap; }
.tr-steps td:first-child { width: 7mm; text-align: right; color: #555; }
.tr-steps td:nth-child(2) { width: 30mm; }
.tr-steps td:last-child { width: 38mm; }
.tr-steps .tr-phase td { background: #eef2f8; color: #1d3c78; font-weight: 700; font-size: 8.5pt; letter-spacing: .04em; padding: 1.2mm 2mm; }
.tr-detail { font-size: 8.5pt; color: #444; }
.tr-duty div { font-size: 8.5pt; }
.tr-check { width: 12mm; text-align: center; font-size: 12pt; }
.tr-approve { margin-top: 6mm; break-inside: avoid; page-break-inside: avoid; }
.tr-approve p { font-size: 9pt; margin: 0 0 2mm; }
.pf-flow .tr-signs { grid-template-columns: minmax(0, 85mm); justify-content: end; margin-top: 2mm; }
.tr-flight { break-before: page; page-break-before: always; }
.tr-metrics th { font-size: 8.5pt; color: #444; background: #f4f6fa; width: 24%; }
.tr-metrics td { font-size: 9pt; }
.tr-findings { margin: 0; padding-left: 5mm; font-size: 9pt; }
.tr-findings li { margin: 1mm 0; }
.tr-findings li.bad b { color: #b42318; }
.tr-findings li.warn b { color: #9a6700; }
.tr-report .pf-list tr { break-inside: avoid; page-break-inside: avoid; }
/* Saha görevi › Ekipman Listesi */
.eq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.eq-head > div { min-width: 0; flex: 1 1 260px; }
.eq-table td { vertical-align: middle; }
.input.eq-qty { width: 90px; }
.input.eq-unit { width: 90px; }
.eq-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.eq-add > .input:first-child { flex: 1 1 220px; }
.ms-tabs { margin: 4px 0 12px; }
.sc-fields.one { grid-template-columns: 1fr; }
.eq-std td .input { width: 100%; min-width: 0; }
.eq-std td:nth-child(2) { min-width: 200px; }
.eq-std td .input.eq-qty, .eq-std td .input.eq-unit { width: 90px; }
.tr-duty ol { margin: 0; padding-left: 4.5mm; font-size: 8.5pt; }
.tr-duty li { margin: .3mm 0; }
.tr-note { font-size: 7.5pt; color: #666; margin: 1mm 0 0; }
/* İK › Görev Tanımı */
.duty-list { margin: 10px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.duty-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.duty-item.lv-GIZLI { border-left: 4px solid #d99a00; }
.duty-item.lv-COK_GIZLI { border-left: 4px solid #c0392b; background: rgba(192, 57, 43, .04); }
.duty-text { flex: 1 1 260px; white-space: pre-wrap; line-height: 1.45; }
.duty-side { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.duty-add { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.duty-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.input.duty-level { width: auto; min-width: 140px; }
/* Kullanıcı formu: Roller / Hesap Durumu / Yapay Zeka ayrı gruplar */
.uf-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 12px 0 0; }
.uf-group legend { padding: 0 6px; font-weight: 700; font-size: 13.5px; color: var(--text); }
.uf-info { margin: 4px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.uf-group > .check + .uf-info { margin-top: 6px; margin-bottom: 0; }
.uf-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
/* Liste › Excel düğmesi (başlığın en sağında) */
.page-head > .xl-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; border-color: #b9dcc7; color: #1d6f42; font-weight: 600; }
.page-head > .head-right + .xl-btn, .page-head > .seg + .xl-btn { margin-left: 8px; }
.page-head > .xl-btn:hover { background: #eaf6ef; border-color: #1d6f42; }
.page-head > .xl-btn svg { flex: none; }
@media (max-width: 640px) { .page-head > .xl-btn { position: absolute; top: 0; right: 0; } .page-head { position: relative; } }
@media (max-width: 640px) {
  .page-head > .xl-btn { padding: 0 9px; height: 34px; }
  .page-head > .xl-btn span { display: none; }
  .page-head:has(> .xl-btn) > div:nth-child(2) { padding-right: 48px; }
  .page-head:has(> .xl-btn > svg):not(:has(> .back)) > div:first-child { padding-right: 48px; }
}
/* Tarih aralığı filtresi (Bu hafta …) */
.period-filter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.period-filter .period-sel { width: auto; min-width: 130px; font-weight: 600; }
.period-custom { display: inline-flex; align-items: center; gap: 4px; }
.input.period-date { width: 150px; }
@media (max-width: 640px) {
  .period-filter { display: flex; width: 100%; }
  .period-filter .period-sel { flex: 1 1 100%; }
  .period-custom { flex: 1 1 100%; }
  .period-custom .period-date { flex: 1 1 0; width: auto; min-width: 0; }
  .filters > .period-filter, .page-head > .head-right > .period-filter { grid-column: 1 / -1; flex: 1 1 100% !important; }
}
/* Yenilikler: banner düğmesi, güncelleme sonrası kısa uyarı, liste */
.ver-banner { flex-wrap: wrap; }
.ver-banner .btn.ghost-light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.wn-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 6000; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; border-radius: 14px; color: #fff; background: linear-gradient(90deg, #1d4f91, #2563eb);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25); font-size: 14px; animation: wn-up .3s ease; max-width: calc(100vw - 24px); }
@keyframes wn-up { from { transform: translate(-50%, 20px); opacity: 0; } }
.wn-chip .btn { background: #fff; color: #1d4f91; border: 0; font-weight: 600; }
.wn-list { display: flex; flex-direction: column; gap: 14px; max-height: 65vh; overflow: auto; }
.wn-item + .wn-item { border-top: 1px solid var(--border); padding-top: 12px; }
/* Sonsuz yükleme göstergeleri: başlık altında ince şerit (api.js) ve "Yükleniyor…" alanlarında dönen halka */
.net-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9000; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .2s; }
.net-progress.on { opacity: 1; }
.net-progress::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary, #2563eb), #60a5fa, transparent); animation: netprog 1.1s ease-in-out infinite; }
@keyframes netprog { from { left: -40%; } to { left: 100%; } }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.loading::before { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary, #2563eb);
  animation: spin .8s linear infinite; }
.loading.small::before, .card-pad.loading::before { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .net-progress::before { animation-duration: 2.4s; } .loading::before { animation-duration: 1.6s; } }
/* Program Ayarları sayı kutusu: sabit genişlik, − / + düğmeleri, birim kutunun içinde (satırlar hizalı kalır) */
.sc-num-wrap.numbox { display: inline-flex; align-items: stretch; width: 210px; flex: none; height: 40px; gap: 0;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.sc-num-wrap.numbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.numbox .numbox-in.input { flex: 1 1 auto; min-width: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  text-align: right; padding: 0 6px; font-variant-numeric: tabular-nums; font-weight: 600; height: 100%; -moz-appearance: textfield; }
.numbox .numbox-in::-webkit-outer-spin-button, .numbox .numbox-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numbox .numbox-in:focus { outline: none; }
.numbox-unit { flex: 0 0 64px; display: flex; align-items: center; color: var(--muted); font-size: 13px; padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.numbox-btn { flex: 0 0 36px; border: 0; background: var(--surface-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.numbox-btn:hover { background: var(--primary-soft); color: var(--primary); }
.numbox-btn:first-child { border-right: 1px solid var(--border); }
.numbox-btn:last-child { border-left: 1px solid var(--border); }
.sc-ai-q .sc-num-wrap.numbox { width: 210px; max-width: none; flex: none; }
@media (max-width: 640px) { .set-row > .sc-num-wrap.numbox, .sc-ai-q .sc-num-wrap.numbox { width: 100%; } }
/* Entegrasyonlar: sade kart (rozet yok; alan altında tek durum satırı, altta hizalı düğmeler) */
.sc-integ .sc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.sc-integ[data-g="ai"] .sc-fields, .sc-integ[data-g="general"] .sc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-integ[data-g="mikro"] .sc-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sc-integ[data-g="mikro"] .sc-field:nth-child(1) { grid-column: span 3; }
.sc-integ[data-g="mikro"] .sc-field:nth-child(2) { grid-column: span 1; }
.sc-integ[data-g="mikro"] .sc-field:nth-child(3) { grid-column: span 2; }
.sc-integ[data-g="mikro"] .sc-field:nth-child(4), .sc-integ[data-g="mikro"] .sc-field:nth-child(5) { grid-column: span 3; }
.sc-integ-foot .spacer { flex: 1; }
.sc-integ .sc-field { gap: 6px; }
.sc-f-label { font-size: 13px; font-weight: 600; color: var(--text); }
.sc-f-meta { display: flex; justify-content: space-between; align-items: center; min-height: 18px; font-size: 12px; color: var(--muted); }
.sc-f-ok { color: #1f8a4c; display: inline-flex; align-items: center; gap: 5px; }
.sc-f-ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-f-empty { color: var(--muted); }
.sc-f-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-f-clear { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline dotted; }
.sc-f-clear:hover { color: #c0392b; }
.sc-integ-status { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.sc-integ-status.ok { color: #1f8a4c; background: #e8f6ee; }
html[data-theme="dark"] .sc-integ-status.ok { background: rgba(34, 197, 94, .15); color: #86efac; }
.dir-companies { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.dup-hint { border-left: 3px solid var(--warn, #f59e0b); margin-top: 10px; }
.dup-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dup-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dup-row .btn { margin-left: auto; }
.emails-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.emails-in { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.emails-row { display: flex; gap: 6px; align-items: center; }
.emails-row .input { flex: 1; }
.emails-row.primary .input { font-weight: 600; }
.emails-row.primary::after { content: 'birincil'; font-size: 11px; color: var(--muted); }
.co-mails { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.co-mail { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; min-height: 44px; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none; background: var(--surface-2); }
.co-mail.unread { background: var(--surface); }
.co-mail:last-child { border-bottom: 0; }
.co-mail:hover { text-decoration: none; box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border), 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); position: relative; z-index: 1; }
.co-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--av, #757575); color: #fff; font-size: 13px; font-weight: 500; }
.co-mail-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.co-l1 { display: contents; }
.co-mail-who { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.co-mail-to { color: var(--muted); font-weight: 400; }
.co-mail-date { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-l2 { grid-column: 2; grid-row: 1; min-width: 0; display: flex; align-items: center; gap: 0; font-size: 14px; white-space: nowrap; overflow: hidden; }
.co-mail-subj { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.co-l2 .co-mail-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.co-mail-main { text-align: left; }
.co-l2 .co-mail-snip { padding-left: 6px; }   /* flex öğesinin baştaki boşluğu silinir */
.co-mail-att { flex: none; display: inline-flex; color: var(--muted); margin-left: 8px; }
.co-mail-att svg { width: 16px; height: 16px; }
.co-l3 { display: none; }
.co-mail.unread .co-mail-who, .co-mail.unread .co-mail-subj, .co-mail.unread .co-mail-date { font-weight: 700; color: var(--text); }
.co-mails > .btn { margin: 8px auto; }
@media (max-width: 760px) {
  .co-mails { border: 0; border-radius: 0; background: transparent; margin: 0 -12px; }
  .co-mail { align-items: flex-start; gap: 14px; padding: 10px 16px; min-height: 0; border-bottom: 0; background: transparent; }
  .co-mail.unread { background: transparent; }
  .co-mail:hover { box-shadow: none; }
  .co-mail:active { background: var(--surface-2); }
  .co-av { width: 40px; height: 40px; font-size: 18px; margin-top: 2px; }
  .co-mail-main { display: flex; flex-direction: column; align-items: stretch; gap: 1px; text-align: left; }
  .co-mail-main > div { min-width: 0; max-width: 100%; overflow: hidden; }
  .co-l1 { display: flex; align-items: baseline; gap: 8px; }
  .co-mail-who { flex: 1; font-size: 16px; color: var(--muted); }
  .co-mail-date { color: var(--muted); }
  .co-l2 { font-size: 14px; color: var(--muted); }
  .co-l2 .co-mail-snip, .co-l2 .co-mail-att { display: none; }
  .co-mail-subj { max-width: 100%; }
  .co-l3 { display: flex; align-items: center; gap: 8px; min-height: 20px; }
  .co-l3 .co-mail-snip { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .co-l3 .co-mail-att { margin-left: 0; }
}
.sc-integ-status.err { color: #b42318; background: #fdecea; }
html[data-theme="dark"] .sc-integ-status.err { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.sc-integ-status.wait { color: #92400e; background: #fef3c7; }
html[data-theme="dark"] .sc-integ-status.wait { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.integ-tile.off { border-color: #f5b5ae; }
.integ-health .sc-integ-status { margin-right: 6px; }
.sc-integ-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sc-integ-foot .sc-integ-msg { margin: 0; }
.sc-integ-foot .sc-integ-msg[hidden] + .spacer { display: block; }
@media (max-width: 900px) { .sc-integ .sc-fields, .sc-integ[data-g] .sc-fields { grid-template-columns: 1fr; } .sc-integ[data-g] .sc-field { grid-column: auto !important; } }
@media (max-width: 640px) { .sc-integ-foot .btn { flex: 1 1 auto; } .sc-integ-foot .spacer { display: none; } }
/* NVR entegrasyonu: kapasite + kanal listesi + canlı izleme */
.nvr-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.nvr-cap-box { background: var(--surface-2, rgba(127,127,127,.08)); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; text-align: center; }
.nvr-cap-box span { display: block; font-size: 12px; }
.nvr-cap-box b { font-size: 20px; font-variant-numeric: tabular-nums; }
.nvr-cap-box.over { border-color: #e11d48; color: #e11d48; }
.nvr-cap-box.over b { color: #e11d48; }
.nvr-chs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.nvr-ch { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; }
.nvr-ch.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.nvr-ch .grow b { display: block; }
.nvr-name { font-weight: 600; padding: 4px 8px; max-width: 220px; }
.nvr-ch-sched { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nvr-custom { display: inline-flex; align-items: center; gap: 6px; }
.nvr-watch { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nvr-watch svg { width: 15px; height: 15px; }
/* aç/kapa anahtarı */
.nvr-ch-sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.nvr-ch-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.nvr-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .15s; }
.nvr-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.nvr-ch-sw input:checked + .nvr-slider { background: var(--primary); }
.nvr-ch-sw input:checked + .nvr-slider::before { transform: translateX(18px); }
/* canlı izleme */
.nvr-live { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nvr-live-img { width: 100%; max-height: 72vh; object-fit: contain; background: #000; border-radius: 10px; min-height: 240px; }
.nvr-live-note { text-align: center; }
@media (max-width: 640px) { .nvr-cap { grid-template-columns: 1fr; } .nvr-ch { flex-wrap: wrap; } }
/* Güvenlik › Yüz Tanıma (eğitim + olaylar) */
.fr-train { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.fr-list-card { display: flex; flex-direction: column; gap: 10px; }
.fr-people { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.fr-person { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.fr-person:hover { background: var(--surface-2, rgba(127,127,127,.08)); }
.fr-person.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fr-person b { font-size: 14px; }
.fr-subject-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-crops { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fr-crop { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; }
.fr-crop img { width: 100%; height: 100%; object-fit: cover; }
.fr-crop-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; font-size: 15px; }
.fr-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.fr-ev { display: flex; gap: 10px; padding: 8px; text-align: left; cursor: pointer; align-items: center; border: 1px solid var(--border); }
.fr-ev-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex: none; background: var(--surface-2, rgba(127,127,127,.08)); }
.fr-ev-img img { width: 100%; height: 100%; object-fit: cover; }
.fr-ev-body { min-width: 0; }
.fr-ev-body b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-range { display: inline-flex; align-items: center; gap: 6px; }
.fr-frame img, .fr-clip { width: 100%; max-height: 72vh; object-fit: contain; background: #000; border-radius: 10px; }
@media (max-width: 760px) { .fr-train { grid-template-columns: 1fr; } .fr-people { max-height: 240px; } }
/* İK › Görev Tanımı (İSG yapısı) */
.duty-wrap { display: flex; flex-direction: column; gap: 12px; }
.duty-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 8px; }
.duty-info-grid .field.wide { grid-column: 1 / -1; }
.duty-sign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.duty-sign .spacer { flex: 1; }
.duty-sec { margin-top: 14px; }
.duty-sec h4 { margin: 0 0 6px; font-size: 14px; color: var(--primary); }
.duty-sec h4 small { color: var(--muted); font-weight: 500; }
.duty-role { margin: 10px 0 2px; font-weight: 700; font-size: 13.5px; }
.duty-phase { margin: 4px 0 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: none; }
.duty-add-row .input { width: auto; min-width: 150px; flex: 1 1 150px; }
.isg-table td.wrap { white-space: normal; min-width: 260px; }
.isg-table tr.isg-expired td { background: rgba(192, 57, 43, .08); }
.isg-table tr.isg-soon td { background: rgba(217, 154, 0, .1); }
.isg-table tr.isg-missing td:nth-child(3) { color: #c0392b; font-weight: 600; }
.matrix-table td.wrap { white-space: normal; min-width: 180px; }
@media (max-width: 760px) { .duty-info-grid { grid-template-columns: 1fr; } }
/* Görev tanımı belgesi (yazdırma) */
.dd-doc p { font-size: 9.5pt; margin: 1mm 0; line-height: 1.45; }
.dd-list { margin: 1mm 0 2mm; padding-left: 5mm; font-size: 9.5pt; }
.dd-list li { margin: .6mm 0; }
.dd-role { margin: 3mm 0 .5mm; font-size: 10pt; color: #1d3c78; }
.dd-phase { font-size: 9pt; font-weight: 700; color: #444; margin-top: 1mm; }
.dd-signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-top: 4mm; break-inside: avoid; page-break-inside: avoid; }
.dd-doc .pf-list tr, .dd-list li { break-inside: avoid; page-break-inside: avoid; }
/* İK personel detayı: gruplu sekmeler (solda alt modül, sağda detay) */
.hr-sub.set-layout { grid-template-columns: 240px minmax(0, 1fr); }
.hr-sub .set-nav a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-sub .set-nav a small { color: var(--muted); font-size: 12px; }
.hr-sub-detail { min-width: 0; }
@media (max-width: 900px) { .hr-sub.set-layout { grid-template-columns: 1fr; } .hr-sub .set-nav { position: static; flex-direction: row; flex-wrap: wrap; } .hr-sub .set-nav a small { display: none; } }
.msg-absent { margin-left: 6px; font-size: 10.5px; padding: 1px 6px; }
/* Entegrasyonlar: galeri (büyük ikonlu kartlar) ve detay */
.integ-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.integ-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 18px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.integ-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .14); border-color: var(--primary); }
.integ-tile.on { color: #fff; border-color: transparent; background: linear-gradient(150deg, #1f2937 0%, #111827 55%, #0b1220 100%); box-shadow: 0 10px 26px rgba(2, 6, 23, .28); }
.integ-tile.on[data-g="ai"] { background: linear-gradient(150deg, #3a2a22 0%, #1d1512 60%, #120c0a 100%); }
.integ-tile.on[data-g="google"] { background: linear-gradient(150deg, #13233f 0%, #0d172b 60%, #080f1d 100%); }
.integ-tile.on[data-g="mikro"] { background: linear-gradient(150deg, #3b0d12 0%, #22080b 60%, #150406 100%); }
.integ-tile.on[data-g="general"] { background: linear-gradient(150deg, #16325c 0%, #0f2442 60%, #0a172c 100%); }
.integ-tile b { font-size: 16px; }
.integ-tile small { font-size: 12.5px; opacity: .75; }
.integ-tile .sc-integ-status { margin-top: 6px; }
.integ-tile.on .sc-integ-status.ok { background: rgba(34, 197, 94, .18); color: #86efac; }
.integ-tile:not(.on) .integ-logo { filter: grayscale(.85); opacity: .75; }
.integ-logo { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; flex: none;
  background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.integ-logo svg { width: 100%; height: 100%; display: block; }
.integ-logo img { width: 78%; height: 78%; object-fit: contain; }
.integ-logo.lg { width: 92px; height: 92px; border-radius: 24px; }
.integ-back { margin-bottom: 10px; }
.integ-hero { display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: 20px; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.integ-hero.on { color: #fff; background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%); }
.integ-hero.on[data-g="ai"] { background: linear-gradient(135deg, #4a3226 0%, #140d0b 100%); }
.integ-hero.on[data-g="mikro"] { background: linear-gradient(135deg, #4a1017 0%, #160507 100%); }
.integ-hero.on[data-g="google"] { background: linear-gradient(135deg, #173057 0%, #0a1324 100%); }
.integ-hero.on[data-g="general"] { background: linear-gradient(135deg, #1b3e70 0%, #0b1a31 100%); }
.integ-hero h2 { margin: 0 0 6px; font-size: 22px; }
.integ-hero p { margin: 0 0 10px; line-height: 1.5; opacity: .9; max-width: 820px; }
.integ-hero.on .sc-integ-status.ok { background: rgba(34, 197, 94, .2); color: #86efac; }
.integ-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.integ-info-sec h4 { margin: 0 0 6px; font-size: 14px; color: var(--primary); }
.integ-info-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.integ-info-sec li + li { margin-top: 4px; }
@media (max-width: 640px) { .integ-gallery { grid-template-columns: 1fr 1fr; } .integ-hero { flex-direction: column; text-align: center; } }
.integ-back { align-self: flex-start; }
.integ-form > h3 { margin: 6px 2px 8px; font-size: 15px; }
.integ-form .sc-integ-h { display: none; }   /* başlık üstteki tanıtımda var */
/* Entegrasyonlar: birleşik "Entegrasyon Ekle" akışı (üst bar, ekleme kataloğu, kurulum/indirme paneli) */
.integ-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.integ-top .grow { flex: 1; min-width: 180px; margin: 0; }
.integ-add { display: flex; flex-direction: column; gap: 18px; }
.integ-add-sec h4 { margin: 0 0 8px; font-size: 14px; color: var(--primary); }
.integ-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.integ-add-tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.integ-add-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .12); border-color: var(--primary); }
.integ-add-tile .integ-logo { width: 40px; height: 40px; flex: none; }
.integ-add-tile b { font-size: 14.5px; display: block; }
.integ-add-tile small { font-size: 12px; color: var(--muted); }
.integ-dl h3 { margin-top: 0; }
.integ-dl-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.integ-howto { margin: 8px 0; padding-left: 20px; line-height: 1.6; color: var(--text); }
.integ-gate { text-align: center; color: var(--muted); }
.integ-remove { display: flex; justify-content: flex-end; margin-top: 4px; }
.fab-dl { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.fab-keybox:not(:empty) { margin-top: 10px; }
.fab-key { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.fab-key.new { border-color: #f5b5ae; }
.fab-key-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.fab-key-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); word-break: break-all; }
/* Alt alta duran paneller arasında tutarlı boşluk (ızgara / yan yana dizilimler etkilenmez: yalnızca blok akışlı kaplar) */
:is(main#view, .set-detail, .set-detail > div, .hr-sub-detail, .tab-body, div:not([class]), section:not([class])) > .card + .card,
:is(main#view, .set-detail, .set-detail > div, .hr-sub-detail, div:not([class])) > .card + :is(.filters, .table-wrap.card, .stat-strip),
:is(main#view, .set-detail > div, div:not([class])) > :is(.filters, .stat-strip) + .card { margin-top: 16px; }
/* Saha görevi › İSG Kontrol */
.isgc { display: flex; flex-direction: column; gap: 12px; }
.isgc-head { display: flex; flex-direction: column; gap: 4px; }
.isgc-ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.isgc-em { font-size: 13.5px; margin-bottom: 6px; }
.isgc-warn { font-size: 13px; color: #9a6700; background: rgba(217, 154, 0, .1); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.isgc-table tr.yes td:first-child { color: #1f8a4c; font-weight: 600; }
.isgc-table tr.no td { background: rgba(192, 57, 43, .06); }
.isgc-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; margin-right: 6px; }
.isgc-btn.yes.on { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.isgc-btn.no.on { background: #c0392b; border-color: #c0392b; color: #fff; }
.isgc-btn:disabled { cursor: default; opacity: .8; }
.tr-isg { margin: 2mm 0 3mm; break-inside: avoid; page-break-inside: avoid; }
.tr-isg-h { font-size: 9.5pt; color: #1d3c78; margin-bottom: .8mm; }
.tr-isg-em { font-size: 8.5pt; margin-bottom: .8mm; }
.tr-isg-t .tr-chk, .tr-isg-t th.tr-chk { width: 15mm; text-align: center; font-size: 12pt; }
.tr-isg-t th.tr-chk { font-size: 8.5pt; }

/* ---------- Birleşik düğme grubu (sade, tek renk) ---------- */
.btn-join { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); flex: 0 0 auto; }
.btn-join > .btn { border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-weight: 600; gap: 7px; padding: 8px 14px; margin: 0; }
.btn-join > .btn + .btn { border-left: 1px solid var(--border); }
.btn-join > .btn:hover:not(:disabled) { background: var(--surface-2); }
.btn-join > .btn:active:not(:disabled) { background: var(--primary-soft); }
.btn-join > .btn svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.btn-join > .btn svg.ic-ok { color: #16a34a; } .btn-join > .btn svg.ic-bad { color: #dc2626; } .btn-join > .btn svg.ic-pri { color: var(--primary); }
.head-right:has(> .btn-join) { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Saha görevi detayı: katlanabilir bilgi kartı + alt sekmeler ---------- */
.task-info { padding: 0; overflow: hidden; }
.task-sum { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; flex-wrap: wrap; user-select: none; }
.task-sum:hover { background: var(--surface-2); }
.task-sum-txt { color: var(--muted); font-size: 13px; }
.task-sum .spacer { flex: 1; }
.task-toggle { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; color: var(--muted); font-size: 14px; }
.task-info-body { border-top: 1px solid var(--border); padding: 14px 16px 16px; display: grid; gap: 14px; }
.task-info-body .stat-strip { margin: 0; }
.task-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; }
.task-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-kv > span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.task-kv > b { font-weight: 600; overflow-wrap: anywhere; }
.task-kv.wide { grid-column: 1 / -1; }
.task-plates { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-tabs { margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 8px; }
.task-tabs .tab svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .head-right:has(> .btn-join) { justify-content: flex-start; } .btn-join > .btn { padding: 8px 11px; } }

/* ---------- 3B önizleme yükleme halkası ---------- */
.g3d-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.g3d-load svg { width: 46px; height: 46px; grid-area: 1 / 1; animation: g3dspin 1s linear infinite; }
.g3d-load span { grid-area: 1 / 1; font-size: 11px; font-weight: 700; color: var(--primary); }
.g3d-load circle { fill: none; stroke-width: 4; }
.g3d-load .trk { stroke: color-mix(in srgb, var(--primary) 18%, transparent); }
.g3d-load .bar { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 30 200; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .15s; }
.g3d-load.det svg { animation: none; }
@keyframes g3dspin { to { transform: rotate(360deg); } }

/* ---------- Arka plan bildirimleri (Ayarlar › Bildirimler) ---------- */
.set-push-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.set-push .warn-text { color: #b45309; }

/* Saha görevi sekme çubuğu: solda alt modüller, sağda seçili alt modülün işlemleri */
.task-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 8px 0 0; }
.task-tabs > .tabbar { border: 0; background: none; padding: 0 0 0 8px; flex: 0 1 auto; min-width: 0; }
.task-tabs > .spacer { flex: 1; }
.task-tab-acts { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.task-tab-acts:empty { display: none; }
@media (max-width: 700px) { .task-tabs { padding: 8px; } .task-tab-acts { width: 100%; justify-content: flex-end; padding: 0; } }

/* ---------- 3B Montaj (şemadan birleşik uçak + patlatma) ---------- */
.layer-toggle { align-items: center; gap: 8px; }
.layer-toggle > .spacer { flex: 1; }
.asm3d-btn { font-weight: 700; gap: 8px; }
.asm3d-ico { color: var(--primary); font-size: 13px; }
.modal.asm3d-modal { width: min(1280px, 96vw); max-width: 96vw; }
.asm3d-stage { position: relative; height: min(68vh, 720px); border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #f8fafc 0%, #e2e8f0 70%, #cbd5e1 100%); }
.asm3d-stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.asm3d-tip { position: absolute; display: none; pointer-events: none; background: rgba(15, 23, 42, .88); color: #fff; font-weight: 700;
  font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.asm3d-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.asm3d-range { flex: 1; min-width: 160px; accent-color: var(--primary); height: 28px; }
.asm3d-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.asm3d-pct { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.asm3d-spin { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.asm3d-hint { margin: 6px 0 0; }
.asm3d-stage .g3d-load span { font-size: 13px; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asm3d-stage { background: radial-gradient(ellipse at 50% 35%, #334155 0%, #1e293b 70%, #0f172a 100%); } }
:root[data-theme="dark"] .asm3d-stage { background: radial-gradient(ellipse at 50% 35%, #334155 0%, #1e293b 70%, #0f172a 100%); }
@media (max-width: 700px) { .asm3d-stage { height: 56vh; } .layer-toggle { flex-wrap: wrap; } }

/* Sipariş detayı başlığı: ← · logo · sipariş no · durum tek satırda, diğer bilgiler altta */
.page-head:has(.order-title) { align-items: center; }
.order-title-badge { display: inline-flex; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.order-title-badge .badge { font-size: 13px; padding: 3px 10px; }
.page-head:has(.order-title) .sub { margin-top: 6px; }
.order-sub { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.asm3d-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-weight: 600; font-size: 13px; }
.asm3d-load.err { color: var(--danger); }
.asm3d-load.err .asm3d-wheel { display: none; }
.asm3d-wheel { width: 44px; height: 44px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary); animation: g3dspin 0.9s linear infinite; }

/* ---------- Stoktan ürün seçici (saha ekipmanı) ---------- */
.sp { position: relative; min-width: 220px; }
.sp.ok .sp-input { border-color: color-mix(in srgb, var(--success, #16a34a) 55%, var(--border)); }
.sp-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 320px; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .16); padding: 4px; min-width: 300px; }
.sp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
.sp-item:hover, .sp-item.on { background: var(--primary-soft); }
.sp-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sp-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-name small, .sp-meta small { color: var(--muted); font-size: 11.5px; }
.sp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.sp-meta .sp-in { color: #15803d; } .sp-meta .sp-out { color: #b45309; }
.sp-msg { padding: 10px; color: var(--muted); font-size: 13px; }
.eq-code { font-size: 11.5px; color: var(--muted); }

.sp-list { position: fixed; top: auto; right: auto; z-index: 10050; }

.sp .sp-input { width: 100%; }
.modal .sp, .field .sp { width: 100%; }

/* 3B Montaj düzenleyicisi */
.asm3d-edit { position: absolute; top: 12px; right: 12px; width: 250px; max-height: calc(100% - 24px); overflow: auto; z-index: 3;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: grid; gap: 6px; font-size: 13px; }
.asm3d-edit p { margin: 0; }
.asm3d-eh { display: flex; align-items: center; gap: 8px; } .asm3d-eh .btn { margin-left: auto; }
.asm3d-sub { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.asm3d-steps { display: flex; } .asm3d-steps button { flex: 1; padding: 4px 6px; font-size: 12px; }
.asm3d-row { display: grid; grid-template-columns: 1fr 34px 34px; gap: 4px; align-items: center; }
.asm3d-row .btn { justify-content: center; font-size: 16px; font-weight: 700; padding: 2px 0; }
.asm3d-ax { font-weight: 600; }
.asm3d-pos { font-variant-numeric: tabular-nums; line-height: 1.35; }
.asm3d-row2, .asm3d-save { display: flex; gap: 6px; flex-wrap: wrap; } .asm3d-save { margin-top: 4px; }
.pd-stage .asm3d-stage { height: min(72vh, 760px); }
@media (max-width: 700px) { .asm3d-edit { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 55%; } }

/* Mesajlar: sohbet paneli ızgara — başlık / akış / kayıt / yanıt / yazma kutusu. Akış yalnızca kalan alanı kullanır (minmax(0, 1fr));
   kesirli ölçekte (ör. Windows %125 + tarayıcı %100) esnek kutu yuvarlaması yazma kutusunu dışarı itmesin. */
.msg-page { grid-template-rows: minmax(0, 1fr); }
.msg-conv { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.msg-conv > .msg-timeline { min-height: 0; height: auto; }
.msg-conv > .chat-bar { position: relative; z-index: 2; }
.msg-side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
@media (max-width: 760px) { .msg-page:not(.show-conv) .msg-conv { display: none !important; } }

/* ---------- Ana sayfa kutucukları: kurumsal başlık bandı (koyu zemin + ince alt çizgi), daha az yuvarlak köşe ---------- */
.db-tile { border-radius: 6px; padding-top: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.db-tile > .db-head { margin: 0 -16px 12px; padding: 9px 16px; min-height: 40px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--border) 30%);
  border-bottom: 1px solid var(--border-strong, var(--border));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 3px rgba(15, 23, 42, .05); }
.db-tile > .db-head h3 { color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-weight: 700; font-size: 12.5px; letter-spacing: .05em; }
.db-tile .db-kpi, .db-tile .db-pick-item, .db-tile .db-modules a { border-radius: 5px; }
.db-tile .db-matrix, .db-tile .w-weather .wx-day, .db-tile [class*="wx-"] { border-radius: 5px; }
.db-tile .db-dots { border-radius: 6px; }

/* ---------- TV / kiosk ekranı (yazıcı odası) ---------- */
body.tv-mode { overflow: hidden; background: #0b1220; }
body.tv-mode .mascot, body.tv-mode .mchat, body.tv-mode .net-progress, body.tv-mode .ver-banner, body.tv-mode #toasts, body.tv-mode .toasts { display: none !important; }
body.tv-nocursor, body.tv-nocursor * { cursor: none !important; }
.kx { position: fixed; inset: 0; }
.kx .pr3d { position: absolute; inset: 0; display: block; }
.kx .pr3d-bar { display: none; }
.kx .pr3d-stage { position: absolute; inset: 0; height: 100% !important; border-radius: 0; border: 0; }
.kx-hud { position: absolute; left: 24px; top: 24px; width: 360px; display: grid; gap: 14px; pointer-events: none; color: #fff;
  background: rgba(10, 16, 28, .62); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 15px; }
.kx-brand { display: flex; align-items: center; gap: 12px; }
.kx-brand img { height: 38px; background: #fff; border-radius: 6px; padding: 3px 6px; }
.kx-brand b { display: block; font-size: 19px; letter-spacing: .02em; }
.kx-brand span { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.kx-clock { font-size: 46px; font-weight: 800; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kx-counts { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.kx-c { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: .92; }
.kx-c i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.kx-c b { font-size: 18px; }
.kx-active { display: grid; gap: 7px; }
.kx-active:empty { display: none; }
.kx-job { display: grid; grid-template-columns: 70px 1fr 90px 42px; align-items: center; gap: 8px; font-size: 13px; }
.kx-job-n { font-weight: 700; } .kx-job-p { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.kx-bar i { display: block; height: 100%; background: #3b82f6; }
.kx-job b { text-align: right; font-variant-numeric: tabular-nums; }
.kx-net { position: absolute; right: 24px; top: 24px; background: #b91c1c; color: #fff; padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.kx-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(10, 16, 28, .7); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: 14px; pointer-events: none; transition: opacity 1.2s; }
.kx-hint.fade { opacity: 0; }
.kx-msg { position: fixed; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; padding: 40px; text-align: center; }

/* ---------- Hava durumu kutucuğu ---------- */
.wx { display: flex; flex-direction: column; gap: 12px; margin: -2px -4px 0; }
.wx-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 6px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .08); }
.wx-clear .wx-hero { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #7dd3fc 100%); }
.wx-cloudy .wx-hero { background: linear-gradient(135deg, #475569 0%, #64748b 55%, #94a3b8 100%); }
.wx-rain .wx-hero { background: linear-gradient(135deg, #1e3a5f 0%, #335c81 60%, #5b7fa3 100%); }
.wx-storm .wx-hero { background: linear-gradient(135deg, #1f1b3a 0%, #3b3561 60%, #57507f 100%); }
.wx-night .wx-hero { background: linear-gradient(135deg, #0b1230 0%, #1e2a5a 60%, #3b4a85 100%); }
.wx-place { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 700; }
.wx-temp { font-size: 54px; font-weight: 300; line-height: 1; margin: 4px 0 2px; letter-spacing: -.02em; }
.wx-temp sup { font-size: 20px; font-weight: 500; margin-left: 2px; vertical-align: 26px; }
.wx-cond { font-size: 16px; font-weight: 600; }
.wx-hl { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.wx-art { width: 96px; height: 96px; flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18)); animation: wx-float 6s ease-in-out infinite; }
.wx-svg, .wx-svg svg { display: block; width: 100%; height: 100%; }
@keyframes wx-float { 50% { transform: translateY(-4px); } }
.wx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wx-stat { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--surface-2); min-width: 0; }
.wx-stat .wx-svg { width: 18px; height: 18px; grid-row: span 2; color: var(--primary); }
.wx-stat span:not(.wx-svg) { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-stat b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-days { display: grid; gap: 2px; }
.wx-day { display: grid; grid-template-columns: minmax(70px, 1fr) 28px 38px 34px minmax(60px, 2fr) 34px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.wx-day:last-child { border-bottom: 0; }
.wx-dn { font-weight: 600; text-transform: capitalize; }
.wx-di { width: 26px; height: 26px; }
.wx-rain { font-size: 11.5px; color: #3b82f6; text-align: right; } .wx-rain.hi { font-weight: 700; }
.wx-lo { color: var(--muted); text-align: right; } .wx-hi { font-weight: 700; }
.wx-range { position: relative; height: 5px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.wx-range i { position: absolute; top: -1px; bottom: -1px; border-radius: 3px; background: linear-gradient(90deg, #38bdf8, #fbbf24, #f97316); }
@media (max-width: 560px) { .wx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wx-di svg path { stroke: rgba(15, 23, 42, .35); }
.wx-di { filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .15)); }

/* ---------- Eksik evrak: başlıkta geri sayım (zilin solunda), Evraklarım ---------- */
.docs-cd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 3px 9px; margin-right: 2px;
  border-radius: 7px; background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; text-decoration: none; font-variant-numeric: tabular-nums;
  animation: docs-pulse 2.4s ease-in-out infinite; }
.docs-cd-t, .docs-cd b { font-size: 12px; font-weight: 800; white-space: nowrap; }
.docs-cd-s, .docs-cd span:last-child { font-size: 10px; font-weight: 600; opacity: .85; white-space: nowrap; }
.docs-cd.over { background: #b91c1c; color: #fff; border-color: #991b1b; }
@keyframes docs-pulse { 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, .15); } }
:root[data-theme="dark"] .docs-cd:not(.over) { background: #3a1f1f; color: #fca5a5; border-color: #7f1d1d; }
.alert-item.critical { border-left: 3px solid #dc2626; background: color-mix(in srgb, #fee2e2 60%, var(--surface)); }
.alert-item.critical .n { background: #dc2626; color: #fff; }
.docs-alert { display: grid; gap: 4px; margin-bottom: 14px; }
tr.docs-miss td { background: color-mix(in srgb, #fee2e2 45%, transparent); }
.docs-extra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 640px) { .docs-cd-s { display: none; } .docs-cd { padding: 3px 6px; } }

/* ---------- PDKS giriş-çıkış tablosu ---------- */
.att-range { display: inline-flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.att-range .field { margin: 0; }
.att-table th, .att-table td { text-align: center; white-space: nowrap; }
.att-table td:first-child, .att-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.att-cell b { color: #15803d; } .att-cell span { color: var(--muted); margin-left: 4px; }
.att-cell.att-absent { color: var(--faint); }
tr.att-unmatched td:first-child { background: color-mix(in srgb, #fef3c7 50%, var(--surface)); }
.att-link { display: inline-block; width: auto; min-width: 150px; height: 28px; padding: 2px 6px; font-size: 12px; margin-top: 2px; }

/* Entegrasyon otomatik senkronizasyon kutusu */
.integ-sync { margin-top: 14px; }
.integ-sync-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* ---------- Alt modül seçicisi sekme (tab) görünümü: segmented(..., {tabs:true}) ---------- */
.seg.seg-tabs { border: 0; border-bottom: 2px solid var(--border); border-radius: 0; gap: 2px; overflow: visible; background: none; padding: 0; }
.seg.seg-tabs button { background: none; height: 40px; padding: 0 16px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; }
.seg.seg-tabs button + button { border-left: 0; }
.seg.seg-tabs button:hover { color: var(--text); background: var(--surface-2); }
.seg.seg-tabs button.on { background: none; color: var(--primary); border-bottom-color: var(--primary); }
.seg.seg-tabs .seg-ico { opacity: .85; }

/* Modül alt-sekme çubuğu: her zaman başlığın altında, tam genişlik */
/* Sekme çubuğu: yatay taşma kaydırılabilir ama ÇUBUK GÖRÜNMEZ (Windows/klasik scrollbar'da sekmelerin yanında dikey+yatay çubuk çıkıyordu:
   .seg-tabs button margin-bottom:-2px alt kenardan taşıyordu → overflow-y gizli); dikey yön asla kaydırılmaz. Yalnız sekme çubuğunda. */
.module-tabs { margin: 4px 0 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.module-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.module-tabs .seg.seg-tabs { min-width: max-content; }
.att-absent-row td { color: var(--faint); }

/* ---------- Organizasyon şeması (treeSpider) ---------- */
.org-ts { height: 72vh; min-height: 420px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.org-ts .ts-root-wrapper-element { width: 100%; height: 100%; }
.org-menu { position: fixed; z-index: 9000; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.22); padding: 6px; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.org-menu-item { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); }
.org-menu-item:hover { background: var(--surface-2); }
.org-menu-item.danger { color: var(--danger); } .org-menu-item.danger:hover { background: var(--danger-soft); }
.org-empty { text-align: center; display: grid; gap: 10px; place-items: center; }

/* ---------- Personel kimlik kartı (yaka kartı) şablonu ---------- */
.idc { width: 640px; max-width: 100%; border: 12px solid #2f4f9b; border-radius: 20px; background: linear-gradient(180deg, #ffffff, #f7f9ff); overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.18); color: #1a2744; }
.idc-head { background: linear-gradient(180deg, #3a5bb0, #2f4f9b); color: #fff; font-weight: 800; font-size: 19px; letter-spacing: .03em; text-align: center; padding: 11px 12px; margin: -2px -2px 0; }
.idc-body { display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding: 22px 24px; }
.idc-left { display: flex; flex-direction: column; align-items: center; }
.idc-photo { width: 180px; height: 210px; border: 1px solid #c7d0e4; border-radius: 10px; overflow: hidden; background: #f1f4fa; display: grid; place-items: center; }
.idc-photo img { width: 100%; height: 100%; object-fit: cover; }
.idc-noimg { font-size: 54px; font-weight: 700; color: #90a0c4; }
.idc-name { font-size: 19px; font-weight: 800; color: #2f4f9b; text-align: center; margin-top: 10px; line-height: 1.15; }
.idc-title { font-size: 15px; font-weight: 700; color: #1a2744; text-align: center; }
.idc-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.idc-bar { height: 60px; display: flex; flex-direction: column; justify-content: center; }
.idc-barcode { width: 100%; height: 48px; display: block; }
.idc-barnum { font-size: 10px; color: #6b7694; letter-spacing: 3px; text-align: center; margin-top: 2px; font-family: ui-monospace, monospace; }
.idc-bar-empty { color: #b45309; font-size: 12px; font-weight: 600; align-items: center; justify-content: center; }
.idc-row { border-left: 4px solid #2f4f9b; padding-left: 10px; }
.idc-label { display: block; font-size: 15px; font-weight: 800; color: #1a2744; }
.idc-value { font-size: 16px; font-weight: 700; color: #2f4f9b; overflow-wrap: anywhere; }
.idc-value.idc-link { color: #2f4f9b; } .idc-value.mono { font-family: ui-monospace, monospace; letter-spacing: 1px; }
.idc-value.idc-dashed, .idc-empty { color: #c0392b; letter-spacing: 2px; }
.idc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid #e3e8ef; }
.idc-foot-action { flex: 1; display: flex; justify-content: center; }   /* Kartı Yazdır: iki logo arasında ortada */
.idc-mke { display: flex; align-items: center; }
.idc-mke-img { height: 36px; width: auto; display: block; }
.idc-logo { height: 40px; width: auto; }
@media (max-width: 560px) { .idc-body { grid-template-columns: 120px 1fr; } .idc-photo { width: 110px; height: 130px; } }
.idc-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; flex: 0 0 auto; }
/* Kimlik kartı yazdırma: YALNIZCA kart basılırken her şeyi gizle (yoksa diğer .print-area çıktıları —saha formu/raporu, sipariş— boş çıkar) */
@media print { body:has(.idc-print) * { visibility: hidden; } body:has(.idc-print) .idc-print, body:has(.idc-print) .idc-print * { visibility: visible; } .idc-print { position: absolute; inset: 0; margin: 20px; } }

/* ---------- Bireysel giriş-çıkış takvimi (gün / hafta) ---------- */
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-label { font-size: 15px; }
.cal { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-week { grid-template-columns: 54px repeat(7, 1fr); }
.cal-day { grid-template-columns: 54px 1fr; }
.cal-hours { border-right: 1px solid var(--border); }
.cal-hours .cal-h { font-size: 11px; color: var(--muted); text-align: right; padding: 0 6px; border-bottom: 1px solid var(--border); box-sizing: border-box; position: relative; top: -7px; }
.cal-col { border-right: 1px solid var(--border); position: relative; }
.cal-col:last-child { border-right: 0; }
.cal-col.today { background: color-mix(in srgb, var(--primary-soft) 40%, transparent); }
.cal-chead { text-align: center; padding: 6px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-chead b { font-size: 16px; } .cal-chead span { display: block; font-size: 11px; color: var(--muted); }
.cal-grid { position: relative; }
.cal-slot { border-bottom: 1px solid var(--border); box-sizing: border-box; }
.cal-ev { position: absolute; left: 3px; right: 3px; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; border-radius: 6px; padding: 3px 6px; font-size: 11px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cal-ev b { font-size: 12px; } .cal-ev small { display: block; opacity: .9; }
.cal-ev .cal-nx { color: #fde68a; }


/* Personel detayı üst: solda kimlik kartı (altında ortada Kartı Yazdır), sağda bilgiler */
.hr-detail-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.hr-detail-top .hr-top-side { flex: 1 1 320px; min-width: 300px; }
.hr-detail-top.missing .hr-top-side { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.hr-top-side .hr-top-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hr-top-side .hr-top-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 760px) { .idc-wrap, .idc { width: 100%; } }

/* ---------- İstihdam Gantt ---------- */
.gantt { overflow-x: auto; }
.gantt-head, .gantt-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; min-width: 640px; }
.gantt-head { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px; }
.gantt-name { display: flex; flex-direction: column; padding-right: 10px; min-width: 0; text-decoration: none; }
.gantt-name b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-name span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { position: relative; height: 26px; }
.gantt-head .gantt-track { height: 18px; }
.gantt-gl { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--border); }
.gantt-mon { position: absolute; top: 0; font-size: 10px; color: var(--muted); transform: translateX(2px); white-space: nowrap; }
.gantt-row { padding: 4px 0; }
.gantt-bar { position: absolute; top: 4px; height: 18px; background: linear-gradient(135deg, #2563eb, #38bdf8); border-radius: 4px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.gantt-bar.left { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.gantt-bar span { font-size: 10px; color: #fff; white-space: nowrap; }

/* Personel detayı: yan karttaki işlemler sağ üstte, organizasyon yolu altta */
.hr-side-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hr-side-actions .btn { border-radius: 999px; }
.org-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.org-path-item { display: inline-flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.org-path-item b { font-size: 12.5px; } .org-path-item small { font-size: 10.5px; color: var(--muted); }
.org-path-item.self { background: var(--primary-soft); border-color: var(--primary); }
.org-path-item.self b { color: var(--primary); }
.org-path-sep { color: var(--muted); font-size: 16px; padding: 0 2px; }

/* Temizlik modülü (günlük çeklist) */
.cl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-bar .cl-day { color: var(--muted); font-weight: 600; }
.cl-prog { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.cl-item.done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
.cl-check { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; font-size: 18px; color: #fff; display: grid; place-items: center; }
.cl-item.done .cl-check { background: var(--success); border-color: var(--success); }
.cl-item .grow { flex: 1; min-width: 160px; }
.cl-note { flex: 1 1 200px; min-width: 160px; }
.cl-set-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.cl-set-row { display: flex; align-items: center; gap: 6px; }
.cl-set-row .input { flex: 1; }
.cl-set-add { display: flex; gap: 8px; }
.cl-set-add .input { flex: 1; }

/* Bina Kontrol (Güvenlik) */
.bc-active { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #dc2626 10%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 40%, var(--border)); margin-bottom: 12px; }
.bc-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #dc2626; flex: none; animation: vm-recblink 1.2s infinite; }
.bc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.bc-item.done { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.bc-item.due { border-color: #f5a524; background: color-mix(in srgb, #f5a524 9%, var(--surface)); }
.bc-slot { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; font-size: 15px; }
.bc-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.bc-map { width: 100%; height: auto; display: block; border-radius: 14px; }
.bc-map-wrap { width: 100%; }
.bc-gmap { width: 100%; height: 420px; border-radius: 14px; overflow: hidden; }
@media (max-width: 640px) { .bc-gmap { height: 300px; } }
.bc-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.bc-time-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; font-weight: 600; }
.bc-time-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; }

/* Endüstriyel Tasarım (proje çizim ağacı + sürümler) */
.dz-proj-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.dz-proj { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.dz-proj:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.dz-proj-thumb { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface-2, #f2f4f8), var(--border)); border-bottom: 1px solid var(--border); overflow: hidden; }
.dz-proj-thumb.has-img { background: #fff; }
.dz-proj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-proj-ico { width: 54px; height: 54px; color: var(--muted); opacity: .7; }
.dz-proj-ico svg { width: 100%; height: 100%; }
.dz-proj-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.dz-proj-name { font-size: 15px; }
.dz-proj-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-proj-meta { margin-top: 2px; }
.dz-tree { display: flex; flex-direction: column; gap: 10px; }
.dz-node { display: flex; flex-direction: column; gap: 10px; }
.dz-children { display: flex; flex-direction: column; gap: 10px; border-left: 2px dashed var(--border); padding-left: 12px; margin-left: 8px; }
.dz-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.dz-card.empty { border-style: dashed; }
.dz-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dz-name { font-size: 15px; }
.dz-ver { font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 1px 8px; }
.dz-cur { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.dz-file { font-weight: 600; }
.dz-note { margin: 2px 0; white-space: pre-wrap; }
.dz-acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* Üst-seviye montaj/çizim kartları (projeye girince) */
.dz-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dz-mcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dz-mcard-head { display: flex; gap: 12px; padding: 12px; align-items: flex-start; color: var(--text); border-radius: var(--radius) var(--radius) 0 0; }
.dz-mcard-head:hover { text-decoration: none; background: var(--surface-2); }
.dz-mcard-thumb { flex: none; width: 78px; height: 78px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface-2), var(--border)); }
.dz-mcard-thumb.has-img { background: #fff; }
.dz-mcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dz-mcard-ico { width: 42px; height: 42px; display: block; }
.dz-mcard-ico svg { width: 100%; height: 100%; }
.dz-mcard-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-mcard-info > .badge { align-self: flex-start; }
.dz-mcard-name { font-size: 15px; }
.dz-mcard-open { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.dz-mcard .dz-acts { padding: 0 12px 12px; margin-top: auto; }
/* Montaj ağacı sahnesi (treeSpider) */
.dz-ts { margin-top: 8px; }
.dz-ts-hint { margin: 0 0 6px; }
.dz-history { display: flex; flex-direction: column; gap: 10px; }
.dz-hrow { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dz-hver { font-weight: 700; color: var(--primary); min-width: 34px; }
.dz-notes, .dz-parts { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.dz-note-row, .dz-part-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.dz-part-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.dz-part-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.dz-part-fields > * { flex: 1; min-width: 140px; }
.dz-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step3d-wrap { width: 100%; height: min(62vh, 560px); border-radius: 12px; overflow: hidden; background: #eef3fb; display: grid; place-items: center; }
.step3d-wrap canvas { display: block; }

/* Veri & Yedek (MASTER) modülü */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.mv-stats .stat:last-child { border-color: var(--primary); }
.mv-stats .stat:last-child b { color: var(--primary); }
@media (max-width: 520px) { .mv-stats { grid-template-columns: 1fr; } }
.mv-backup-status { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid var(--line, #e4e8f0); }
.mv-backup-status.ok { border-color: rgba(42,179,120,.4); }
.mv-backup-status.warn { border-color: rgba(230,160,40,.5); }
.mv-backups { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.mv-bk { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line, #e4e8f0); border-radius: 10px; }
.mv-bk .grow { display: flex; flex-direction: column; min-width: 0; }
.mv-bk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .mv-grid { grid-template-columns: 1fr; } }

/* ===== Evrak › Belge Yönetim (ofis) ===== */
.bz-newwrap { position: relative; display: inline-block; }
.bz-newmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card, #fff); border: 1px solid var(--line, #e4e8f0);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 6px; min-width: 180px; display: flex; flex-direction: column; }
.bz-newitem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.bz-newitem:hover { background: var(--hover, #f1f4f9); }
.bz-newitem svg { width: 18px; height: 18px; }
.bz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bz-card { display: flex; align-items: center; gap: 12px; padding: 14px; }
.bz-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.bz-icon svg { width: 22px; height: 22px; }
.bz-icon.k-excel { background: #1f9d55; } .bz-icon.k-word { background: #2b6cb0; } .bz-icon.k-sunum { background: #dd6b20; }
.bz-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bz-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-perm { font-size: 11.5px; color: var(--muted, #8a93a3); white-space: nowrap; }
.bz-perm.w { color: #1f9d55; }

.bz-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bz-savestate { min-width: 92px; text-align: right; }
.bz-title-row { margin: 8px 0 10px; }
.bz-title-in { font-size: 18px; font-weight: 700; max-width: 520px; }
.bz-editor { border: 1px solid var(--line, #e4e8f0); border-radius: 12px; overflow: hidden; background: var(--card, #fff); }

/* Word */
.bz-wordbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-bottom: 1px solid var(--line, #e4e8f0); background: var(--hover, #f7f9fc); }
.bz-tb { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; background: none; border-radius: 7px; cursor: pointer; font: inherit; font-weight: 600; color: inherit; }
.bz-tb:hover { border-color: var(--line, #e4e8f0); background: var(--card, #fff); }
.bz-sep { width: 1px; background: var(--line, #e4e8f0); margin: 4px 4px; }
.bz-word { min-height: 60vh; padding: 28px 34px; outline: none; line-height: 1.6; }
.bz-word:focus { outline: none; }

/* Excel */
.bz-xl-bar { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line, #e4e8f0); background: var(--hover, #f7f9fc); }
.bz-xl-wrap { max-height: 70vh; overflow: auto; }
.bz-xl { border-collapse: collapse; }
.bz-xl th { position: sticky; top: 0; background: var(--hover, #eef2f7); border: 1px solid var(--line, #d8dee8); font-size: 11.5px; color: var(--muted, #6b7280); min-width: 90px; padding: 3px 6px; z-index: 1; }
.bz-xl-rownum { left: 0; min-width: 40px !important; position: sticky; z-index: 2; }
.bz-xl-corner { left: 0; z-index: 3; min-width: 40px !important; }
.bz-xl td { border: 1px solid var(--line, #e4e8f0); padding: 0; }
.bz-xl-cell { width: 100%; border: 0; background: none; padding: 4px 6px; font: inherit; outline: none; min-width: 90px; }
.bz-xl-cell:focus { box-shadow: inset 0 0 0 2px var(--accent, #2b6cb0); }

/* Sunum */
.bz-sunum { display: grid; grid-template-columns: 160px 1fr; gap: 0; min-height: 60vh; }
.bz-slides { border-right: 1px solid var(--line, #e4e8f0); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; background: var(--hover, #f7f9fc); }
.bz-slidethumb { position: relative; border: 2px solid var(--line, #e4e8f0); border-radius: 8px; background: #fff; aspect-ratio: 16/9; cursor: pointer; overflow: hidden; padding: 0; }
.bz-slidethumb.on { border-color: var(--accent, #2b6cb0); }
.bz-slidenum { position: absolute; left: 4px; top: 2px; font-size: 10px; color: var(--muted, #8a93a3); z-index: 1; }
.bz-thumbinner { transform: scale(.34); transform-origin: top left; width: 294%; height: 294%; padding: 10px; pointer-events: none; font-size: 13px; }
.bz-slideadd { border: 1px dashed var(--line-strong, #c3ccd9); border-radius: 8px; background: none; min-height: 40px; cursor: pointer; font-size: 20px; color: var(--muted, #8a93a3); }
.bz-stage { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bz-slide-tools { display: flex; gap: 6px; }
.bz-slide-edit { flex: 1; min-height: 52vh; border: 1px solid var(--line, #e4e8f0); border-radius: 10px; aspect-ratio: 16/9; padding: 36px; outline: none; background: #fff; font-size: 20px; line-height: 1.5; }

/* geçmiş / paylaşım */
.bz-vers, .bz-shares { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.bz-ver, .bz-share { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line, #e4e8f0); border-radius: 10px; }
.bz-shareadd { display: flex; gap: 8px; margin-top: 10px; }
.bz-shareadd select { flex: 1; }
@media (max-width: 820px) { .bz-sunum { grid-template-columns: 1fr; } .bz-slides { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line,#e4e8f0); } .bz-slidethumb { width: 120px; flex: none; } }

/* Araçlar › Terminal (MASTER web konsolu) */
.term-card { padding: 8px; overflow: hidden; background: #0b1020; }
.term-host { height: min(70vh, 640px); width: 100%; }
.term-host .xterm { height: 100%; padding: 6px; }
.term-status { margin-left: auto; }

/* Beyaz etiket: başlıkta firma adı (HEPGO yerine) */
.product.wl b { font-size: 15px; letter-spacing: normal; line-height: 1.1; }
.product.wl { font-size: 0; }

/* Kişisel Ayarlar › Metin biçimi: tüm görünen metinler (kod ve giriş alanları hariç) */
:root[data-textcase="upper"] body { text-transform: uppercase; }
:root[data-textcase="lower"] body { text-transform: lowercase; }
:root[data-textcase="title"] body { text-transform: capitalize; }
:root[data-textcase] input, :root[data-textcase] textarea, :root[data-textcase] select,
:root[data-textcase] code, :root[data-textcase] pre, :root[data-textcase] .mono,
:root[data-textcase] kbd, :root[data-textcase] .db-matrix, :root[data-textcase] .mono small { text-transform: none; }

/* Merkez destek girişi: onay bekleme ekranı */
.login-wait { text-align: center; padding: 10px 4px 16px; }
.login-wait h3 { margin: 10px 0 6px; }
.login-wait p { margin: 4px 0; color: var(--muted); }

/* Merkez destek oturumu göstergesi */
.support-pill { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1200;
  display: inline-flex; align-items: center; gap: 4px; background: #0f766e; color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.support-pill b { font-weight: 700; }
/* Zorunlu günlük görev uyarı şeridi (üstte, dikkat çekici, tıklanınca Görevlerim) */
.task-pill { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 1250;
  display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg, #ef4444, #dc2626); color: #fff;
  border: none; border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 24px rgba(220,38,38,.4); animation: taskpulse 2s ease-in-out infinite; max-width: calc(100% - 24px); }
.task-pill b { font-weight: 700; }
.task-pill:hover { filter: brightness(1.05); }
@keyframes taskpulse { 0%,100% { box-shadow: 0 8px 24px rgba(220,38,38,.4); } 50% { box-shadow: 0 8px 30px rgba(220,38,38,.7); } }
/* Görevlerim: zorunlu bekleyen görev vurgusu + tamamlanan */
.cl-item.task-must { box-shadow: inset 4px 0 0 #dc2626; background: color-mix(in srgb, #dc2626 7%, transparent); }
.cl-item.done { opacity: .72; }

/* Mobilde tam ekran Şirketten Haberler (ayar açıkken ana ekran) */
.feed-full { padding: 0; }
.feed-full .feed-body { max-height: none; overflow: visible; }
.feed-full .feed-composer { position: sticky; top: 0; z-index: 2; }

/* Ekran paylaşımı (paylaşan taraf): yüzen panel + uzaktan imleç */
.ss-panel { position: fixed; right: 16px; bottom: 16px; z-index: 3000; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.25); }
.ss-panel.flash { animation: ssflash .6s; }
@keyframes ssflash { 0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.25)} 50%{box-shadow:0 0 0 3px var(--primary)} }
.ss-live { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ss-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0245e; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.ss-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.ss-link { flex: 1; min-width: 0; font-size: 12px; }
.ss-info { font-size: 12px; color: var(--muted); margin-top: 6px; }
.ss-remote-cursor { position: fixed; z-index: 2147483000; pointer-events: none; transform: translate(-2px, -2px); transition: left .06s linear, top .06s linear; }
.ss-rc-dot { display: block; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: #4a8ae0; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); transform: rotate(-45deg); }
.ss-rc-name { position: absolute; left: 16px; top: 10px; background: #4a8ae0; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }

/* Finans modülü */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fin-acc { text-align: left; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.fin-acc:hover { border-color: var(--primary); }
.fin-acc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-acc-top b { font-size: 15px; }
.fin-bal { font-size: 20px; font-weight: 700; margin-top: 6px; }
.fin-total { text-align: right; padding: 12px 4px 0; color: var(--muted); font-size: 15px; }
.fin-stmt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; }
.fin-mikro { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.fin-mikro-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.fin-mikro-row:hover { background: var(--surface-2, rgba(127,127,127,.08)); }

/* Merkez: destek talepleri (ticket) */
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; color: inherit; text-decoration: none; }
.tk-row:hover { border-color: var(--primary); text-decoration: none; }
.tk-row.unread { border-left: 4px solid var(--primary); }
.tk-row-main { min-width: 0; }
.tk-row-top { display: flex; align-items: center; gap: 8px; }
.tk-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.tk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: none; }
.tk-detail { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.tk-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.tk-head h2 { margin: 2px 0 4px; font-size: 19px; }
.tk-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.tk-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.tk-msg.mine { align-self: flex-end; align-items: flex-end; }
.tk-bubble { background: var(--surface-2, rgba(127,127,127,.09)); border-radius: 16px 16px 16px 4px; padding: 9px 13px; }
.tk-msg.mine .tk-bubble { background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 16px 16px 4px 16px; }
.tk-who { font-weight: 600; font-size: 12.5px; display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.tk-tag { font-size: 10.5px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 6px; padding: 0 5px; }
.tk-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.tk-msg small { margin: 3px 6px 0; font-size: 11px; }
.tk-sys { align-self: center; font-size: 12px; color: var(--muted); background: var(--surface-2, rgba(127,127,127,.07)); border-radius: 999px; padding: 3px 12px; }
.tk-compose { border-top: 1px solid var(--border); padding-top: 12px; }
.tk-input { width: 100%; resize: vertical; }
.tk-compose-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
@media (max-width: 900px) { .tk-detail { grid-template-columns: 1fr; } .tk-msg { max-width: 94%; } }
/* Merkez: üyelik yönetimi */
.mb-passive td { opacity: .62; }
.mb-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.mb-mod { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.mb-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mb-pkg { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.mb-pkg-top { display: flex; justify-content: space-between; align-items: center; }
.mb-pkg-top h3 { margin: 0; }
.mb-pkg-fee { font-size: 26px; font-weight: 800; }
.mb-pkg-fee small { font-size: 13px; color: var(--muted); font-weight: 500; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mb-chip { font-size: 11.5px; background: var(--surface-2, rgba(127,127,127,.09)); border-radius: 999px; padding: 2px 9px; }
.mb-alert { border-left: 4px solid var(--danger, #dc2626); background: color-mix(in srgb, var(--danger, #dc2626) 7%, transparent); margin-bottom: 12px; }
.mb-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-sec-h h3 { margin: 0; }
/* Merkez: toplu SMS */
.sms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sms-head { display: flex; justify-content: space-between; align-items: center; }
.sms-head h3 { margin: 0; }
.sms-rec { max-height: 42vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.sms-rec-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.sms-rec-row:hover { background: var(--surface-2, rgba(127,127,127,.07)); }
.sms-rec-row.dim { opacity: .55; }
.sms-rec-row .grow { display: flex; flex-direction: column; }
.sms-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sms-warn { border-left: 4px solid #f59e0b; margin-bottom: 12px; }
.sms-msg { max-width: 420px; white-space: pre-wrap; }
@media (max-width: 900px) { .sms-grid { grid-template-columns: 1fr; } }
.fin-click { cursor: pointer; }
.fin-click:hover td { background: var(--surface-2, rgba(127,127,127,.06)); }

/* Şirketten Haberler: anlık gelen paylaşım + tepki verenler */
.feed-fresh { animation: feedfresh 2.4s ease; }
@keyframes feedfresh { 0% { box-shadow: 0 0 0 2px var(--primary); transform: translateY(-6px); opacity: .4; } 25% { opacity: 1; transform: none; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .feed-fresh { animation: none; } }
button.feed-rsum { border: none; background: none; padding: 0; font: inherit; color: inherit; }
.feed-rsum.clickable { cursor: pointer; border-radius: 8px; }
.feed-rsum.clickable:hover .feed-rcount { text-decoration: underline; }
.feed-rx .seg { margin-bottom: 10px; }
.feed-rx-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow: auto; }
.feed-rx-row { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 10px; }
.feed-rx-row:hover { background: var(--surface-2, rgba(127,127,127,.07)); }
.feed-rx-row .grow { display: flex; flex-direction: column; min-width: 0; }
.feed-rx-ava { position: relative; flex: none; }
.feed-rx-em { position: absolute; right: -4px; bottom: -4px; font-size: 15px; line-height: 1; background: var(--surface, #fff); border-radius: 50%; padding: 1px; }
.about-plain { padding: 8px 2px 4px; font-size: 15px; }

/* ===== Şirketten Haberler kartı (Instagram tarzı) ===== */
.feed-post { padding: 0; overflow: hidden; background: var(--surface); border-radius: 14px; }
.feed-post.text-only { padding: 12px 12px 2px; }
.feed-who { display: flex; align-items: center; gap: 10px; }
.feed-who .grow { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.feed-who b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-who.over { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 10px 6px 36px 12px; color: #fff; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.feed-who.over small { color: rgba(255,255,255,.9); }
.feed-who.over b, .feed-who.over small { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.feed-who.over .feed-ring, .feed-who.over .feed-more { pointer-events: auto; }
.feed-ring { flex: none; display: inline-flex; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.feed-ring > .avatar, .feed-ring > img { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; font-size: 13px; }
.feed-ring.sys { background: var(--primary); }
.feed-ring .feed-ava { padding: 3px; background: #fff; }
.feed-more { margin-left: auto; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center; }
.feed-more:hover { background: rgba(127,127,127,.2); }
.feed-mwrap { position: relative; }
.feed-post.has-media .feed-medias { margin: 0; gap: 2px; }
.feed-post.has-media .feed-media { position: relative; border-radius: 0; max-height: none; }
.feed-post.has-media .feed-medias.n1 .feed-media > img, .feed-post.has-media .feed-medias.n1 .feed-media > video { height: auto; min-height: 200px; max-height: 470px; }
.feed-post.has-media .feed-medias:not(.n1) .feed-media { aspect-ratio: 1; }
.feed-post.has-media .feed-medias:not(.n1) .feed-media > img, .feed-post.has-media .feed-medias:not(.n1) .feed-media > video { height: 100%; max-height: none; }
.feed-post.has-media .feed-medias.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.feed-post.has-media .feed-medias.n3 .feed-media:first-child { grid-row: span 2; aspect-ratio: auto; }
.feed-full .feed-post.has-media .feed-medias.n1 .feed-media > img, .feed-full .feed-post.has-media .feed-medias.n1 .feed-media > video { max-height: 72vh; }
.feed-mplus { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; font-weight: 700; }
.feed-text { font-size: 15px; line-height: 1.5; margin: 10px 2px 4px; white-space: pre-wrap; word-break: break-word; }
.feed-auds { padding: 6px 12px 0; }
.feed-post.text-only .feed-auds { padding: 4px 0 0; }
.feed-foot { margin: 0; padding: 4px 6px 10px; }
.feed-post.text-only .feed-foot { padding: 2px 0 8px; margin: 0 -6px; }
.feed-bar { display: flex; align-items: center; justify-content: space-between; }
.feed-bar-l { display: flex; align-items: center; min-width: 0; }
.feed-bar .feed-like-wrap { flex: none; }
.feed-bar .feed-picker { left: -4px; bottom: calc(100% + 2px); }
.feed-ib { width: 40px; height: 40px; flex: none; border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center;
  border-radius: 50%; transition: transform .12s ease, color .12s ease; -webkit-tap-highlight-color: transparent; }
.feed-ib:hover { color: var(--muted); }
.feed-ib:active { transform: scale(.86); }
.feed-ib .feed-ic { display: flex; }
.feed-heart.on { color: #ff3040; }
.feed-heart.on svg path, .feed-save.on svg path { fill: currentColor; }
.feed-heart.on .feed-ic, .feed-heart.on .feed-like-em { animation: fvPop .32s ease; }
.feed-heart .feed-like-em { font-size: 22px; line-height: 1; }
.feed-save.on { color: var(--text); }
.feed-ib.busy { opacity: .45; animation: fvPulse 1s ease infinite; }
.feed-n { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 0 -4px; padding: 0; border: 0; background: none; color: var(--text);
  font-size: 14px; font-weight: 650; }
.feed-n.link { cursor: pointer; }
.feed-n.link:hover { text-decoration: underline; }
.feed-n .feed-rbubbles { display: inline-flex; }
.feed-n .feed-rb { font-size: 13px; margin-right: -3px; }
.feed-cap { padding: 2px 8px 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.feed-cap b { font-weight: 650; }
.feed-cap a { color: inherit; }
.feed-moretx { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.feed-cmore { display: block; border: 0; background: none; padding: 5px 8px 0; color: var(--muted); cursor: pointer; font-size: 14px; text-align: left; }
.feed-cmore:hover { color: var(--text); }
.feed-time { padding: 4px 8px 0; font-size: 12px; color: var(--muted); }
.feed-post.has-media .feed-comments { padding: 0 8px; }
.feed-cmeta { flex-wrap: wrap; gap: 4px 14px; }
.feed-cmeta > * { white-space: nowrap; }
/* üst çubuk: paylaşım kutusu + Kaydedilenler */
.feed-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.feed-top .feed-composer { margin-bottom: 0; flex: 1; min-width: 0; }
.feed-composer-ic { display: flex; color: var(--muted); }
.feed-savedbtn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; display: grid; place-items: center; }
.feed-savedbtn:hover { background: var(--surface-2); }
.feed-saved-h { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.feed-saved-h .btn { margin-left: auto; }
/* arka plan yüklemeleri */
.feed-uploads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.feed-uploads:empty { display: none; }
.feed-up { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  animation: fvIn .2s ease; }
.feed-up-th { width: 46px; height: 46px; flex: none; border-radius: 9px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; }
.feed-up .grow { flex: 1; min-width: 0; }
.feed-up-t { font-size: 13.5px; font-weight: 650; }
.feed-up small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.feed-up-bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.feed-up-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #f9ce34, #ee2a7b, #6228d7); transition: width .25s ease; }
.feed-up.prep .feed-up-bar i { width: 35% !important; animation: feedIndet 1.1s ease-in-out infinite; }
@keyframes feedIndet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.feed-up.done .feed-up-bar i { background: #22c55e; }
.feed-up.err { border-color: rgba(224, 36, 94, .45); }
.feed-up-acts { display: flex; gap: 6px; flex: none; }
.feed-up-acts:empty { display: none; }
/* sonsuz kaydırma */
.feed-sentinel { display: grid; place-items: center; height: 48px; }
.feed-sentinel[hidden] { display: none; }
.feed-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--primary); animation: feedSpin .8s linear infinite; }
@keyframes feedSpin { to { transform: rotate(360deg); } }
/* ⋯ menüsü */
.feed-sheet .sp-opt { font-size: 15px; }
.feed-sheet .sp-opt .sp-ico { color: var(--text); }
.feed-sheet .sp-opt.danger, .feed-sheet .sp-opt.danger .sp-ico { color: #e0245e; }
.feed-sheet .sp-cancel { justify-content: center; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; color: var(--muted); }
.feed-sheet .sp-cancel .sp-txt { flex: none; }
/* yeni paylaşım formu */
.feed-c-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.feed-c-head b { display: block; font-size: 14.5px; }
.feed-c-text { width: 100%; min-height: 90px; border: 0; outline: none; resize: none; background: none; color: var(--text); font: inherit; font-size: 16px;
  line-height: 1.5; padding: 6px 2px; }
.feed-c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 6px; }
.feed-c-grid[hidden] { display: none; }
.feed-c-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); animation: fvIn .18s ease; }
.feed-c-tile img, .feed-c-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-c-badge { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; display: grid; place-items: center; padding-left: 2px; }
.feed-c-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 26px; gap: 2px; }
.feed-c-ph small { font-size: 11px; color: var(--muted); }
.feed-c-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.feed-c-add { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--border); background: none; color: var(--muted); font-size: 28px; cursor: pointer; }
.feed-c-add:hover { border-color: var(--primary); color: var(--primary); }
.feed-c-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed-c-tool { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text);
  cursor: pointer; font-size: 13.5px; font-weight: 600; }
.feed-c-tool:hover { filter: brightness(.96); }
.feed-c-tool.on { background: var(--primary-soft); color: var(--primary); }
.feed-c-tool .feed-ic { display: flex; }
/* tam ekran: kaydet */
.fv-save.on { color: #f7b125; }
/* Mikro ERP › Finans sekmesi */
.mk-fin-sum { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mk-fin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-fin-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-fin-cat { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
.mk-fin-last { line-height: 1.5; }
.mk-fin-card { margin-bottom: 12px; }
.mk-fin-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 4px; }
/* ===== Canlı yayın (Instagram / TikTok Live tarzı) ===== */
body.lv-open { overflow: hidden; }
body.lv-open .toasts { z-index: 4600; }
.lv { position: fixed; inset: 0; z-index: 4050; background: #000; color: #fff; overflow: hidden; -webkit-user-select: none; user-select: none;
  font-size: 14px; }
.lv-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lv-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.lv-video.mirror { transform: scaleX(-1); }
@media (min-width: 900px) { .lv.viewer .lv-video { object-fit: contain; } }
.lv-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.45) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.lv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
.lv-owner { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.lv-ring { display: inline-flex; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #ff3040, #ff8a00, #ff2d95); flex: none; }
.lv-ring > .avatar { width: 36px !important; height: 36px !important; border: 2px solid #000; border-radius: 50%; font-size: 13px; }
.lv-owner-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lv-owner-t b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-owner-t small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-top-r { display: flex; align-items: center; gap: 6px; flex: none; }
.lv-badge { background: linear-gradient(90deg, #ff2d55, #ff3040); color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 6px; animation: lvPulse 1.6s ease-in-out infinite; }
@keyframes lvPulse { 50% { box-shadow: 0 0 0 4px rgba(255,48,64,.25); } }
.lv-timer:empty { display: none; }
.lv-timer, .lv-count { background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.lv-ic { display: inline-flex; }
.lv-x { height: 34px; min-width: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 15px;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 700; }
.lv-x.end { background: #ff3040; font-size: 13.5px; padding: 0 14px; }
.lv-tools { position: absolute; right: 12px; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.lv-tool { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lv-tool.off { background: #ff3040; }
.lv-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.lv-bottom > * { pointer-events: auto; }
.lv-chat { max-height: 34vh; max-width: min(78%, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 30px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 30px); mask-image: linear-gradient(transparent, #000 30px); touch-action: pan-y; }
.lv-chat::-webkit-scrollbar { display: none; }
.lv-msg { display: flex; align-items: flex-start; gap: 7px; animation: lvIn .25s ease; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.lv-msg .avatar { width: 24px !important; height: 24px !important; min-width: 24px; font-size: 10px; }
.lv-msg-t { font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.lv-msg-t b { font-weight: 700; margin-right: 2px; }
.lv-msg.join { opacity: .8; font-size: 12.5px; }
@keyframes lvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lv-people { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.lv-people:empty { display: none; }
.lv-stack { display: flex; }
.lv-pp { margin-left: -8px; border-radius: 50%; border: 2px solid rgba(0,0,0,.6); display: inline-flex; }
.lv-pp:first-child { margin-left: 0; }
.lv-pp .avatar { width: 26px !important; height: 26px !important; font-size: 10px; }
.lv-pp-t { font-size: 12.5px; opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-bar { display: flex; align-items: center; gap: 10px; }
.lv-inwrap { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 2px 4px 2px 14px;
  background: rgba(0,0,0,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lv-input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; padding: 9px 0; outline: none; -webkit-user-select: text; user-select: text; }
.lv-input::placeholder { color: rgba(255,255,255,.75); }
.lv-send { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.lv-heartbtn { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #ff3040; display: grid; place-items: center;
  cursor: pointer; transition: transform .12s ease; }
.lv-heartbtn:active { transform: scale(.85); }
.lv-hearts { position: absolute; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 70px; height: 55vh; z-index: 2; pointer-events: none; }
.lv-fly { position: absolute; bottom: 0; left: 22px; animation: lvFly 2.5s ease-out forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
@keyframes lvFly {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  12% { transform: translate(0, -20px) scale(var(--s, 1)); opacity: 1; }
  50% { transform: translate(calc(var(--dx) * -.6), -45%) scale(var(--s, 1)); }
  100% { transform: translate(var(--dx), -100%) scale(calc(var(--s, 1) * .8)); opacity: 0; }
}
.lv-pop { position: absolute; z-index: 5; color: #ff3040; pointer-events: none; transform: translate(-50%, -50%); animation: lvPop .85s ease forwards; }
.lv-pop svg { width: 96px; height: 96px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
@keyframes lvPop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(.95); } 80% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
.lv-sound { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center;
  gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; cursor: pointer; }
.lv-sound[hidden] { display: none; }
.lv-banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 4; max-width: 86%; text-align: center; padding: 12px 16px;
  border-radius: 14px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; line-height: 1.4; }
.lv-banner[hidden] { display: none; }
.lv-end { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: lvIn .3s ease; }
.lv-end b { font-size: 20px; }
.lv-end p { margin: 0 0 6px; opacity: .85; }
.lv-end-ic { font-size: 40px; }
/* yayın öncesi */
.lv.prelive .lv-badge, .lv.prelive .lv-timer, .lv.prelive .lv-count, .lv.prelive .lv-bottom, .lv.prelive .lv-hearts { display: none; }
.lv-pre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 20px calc(26px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.lv-pre small { opacity: .8; max-width: 420px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lv-title-in { width: min(480px, 100%); border: 0; border-radius: 14px; padding: 13px 16px; font: inherit; font-size: 16px; color: #fff; text-align: center;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); outline: none; -webkit-user-select: text; user-select: text; }
.lv-title-in::placeholder { color: rgba(255,255,255,.75); }
.lv-go { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 26px; font: inherit; font-size: 16.5px; font-weight: 800;
  color: #fff; cursor: pointer; background: linear-gradient(90deg, #ff2d55, #ff3040 50%, #ff7a00); box-shadow: 0 10px 30px rgba(255,48,64,.45); }
.lv-go:disabled { opacity: .7; }
.lv-go-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: lvPulse 1.4s ease-in-out infinite; }
/* Şirketten Haberler: "Canlı" düğmesi ve canlı yayın şeridi */
.feed-livebtn { flex: none; height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; font-weight: 800; font-size: 13.5px; background: linear-gradient(90deg, #ff2d55, #ff3040 55%, #ff7a00); box-shadow: 0 4px 14px rgba(255,48,64,.3); }
.feed-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: lvPulse 1.4s ease-in-out infinite; }
.feed-lives { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.feed-lives[hidden] { display: none; }
.feed-lives::-webkit-scrollbar { display: none; }
.feed-live { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; flex: none; color: var(--text); text-decoration: none; }
.feed-live:hover { text-decoration: none; }
.feed-live-ring { position: relative; padding: 3px; border-radius: 50%; background: linear-gradient(45deg, #ff3040, #ff8a00, #ff2d95); animation: lvRing 1.8s ease-in-out infinite; }
.feed-live-ring > .avatar { width: 56px !important; height: 56px !important; border: 3px solid var(--surface); border-radius: 50%; }
@keyframes lvRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,48,64,.45); } 50% { box-shadow: 0 0 0 6px rgba(255,48,64,0); } }
.feed-live-tag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background: #ff3040; color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; border: 2px solid var(--surface); }
.feed-live-name { font-size: 12px; max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .feed-livebtn { padding: 0 11px; } }
/* ===== Üyelik sözleşmeleri ===== */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ct-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ct-link { color: var(--text); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ct-link:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.ct-card.pending { border-color: #f5b301; box-shadow: 0 0 0 1px #f5b30155; }
.ct-card-h { display: flex; align-items: flex-start; gap: 10px; }
.ct-title { font-weight: 700; font-size: 15px; color: var(--text); }
.ct-sum { margin: 0; color: var(--muted); }
.ct-go { align-self: flex-end; font-size: 13px; font-weight: 700; color: var(--primary); }
.ct-prog { display: flex; align-items: center; gap: 10px; }
.ct-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ct-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 3px; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-note { margin-bottom: 12px; border-left: 4px solid var(--primary); }
.ct-note.warn { border-left-color: #f5b301; background: color-mix(in srgb, #f5b301 8%, var(--surface)); }
.ct-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ct-head h3 { margin: 4px 0 0; }
.ct-paper { background: #fff; color: #1a1a1a; border: 1px solid var(--border); border-radius: 10px; padding: 34px 40px; max-width: 860px; margin: 0 auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08); font-family: Georgia, 'Times New Roman', serif; font-size: 15.5px; line-height: 1.7; }
.ct-paper.ct-prev { padding: 20px 24px; font-size: 13.5px; max-height: 60vh; overflow: auto; box-shadow: none; }
.ct-doc h2 { font-size: 22px; margin: 0 0 16px; text-align: center; }
.ct-doc h3 { font-size: 16px; margin: 20px 0 6px; }
.ct-doc p, .ct-doc li { text-align: justify; margin: 0 0 8px; }
.ct-doc ul { padding-left: 22px; margin: 0 0 8px; }
.ct-hash { max-width: 860px; margin: 8px auto 14px; word-break: break-all; }
.ct-accept { max-width: 860px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 10px; }
.ct-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.ct-agree input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.ct-proof { max-width: 860px; margin: 0 auto 20px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.ct-proof.ok { border-color: #22c55e66; }
.ct-proof.bad { border-color: #ef444466; }
.ct-proof b { display: block; margin-bottom: 8px; }
.ct-proof table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ct-proof td { padding: 3px 10px 3px 0; vertical-align: top; }
.ct-proof td:first-child { color: var(--muted); white-space: nowrap; width: 1%; }
.ct-proof .mono, .ct-hash.mono { word-break: break-all; }
.ct-edit { display: flex; flex-direction: column; gap: 8px; }
.ct-edit-row { display: grid; grid-template-columns: 180px 1fr 110px; gap: 10px; }
.ct-accept .ct-edit-row { grid-template-columns: 1fr 1fr; }
.ct-edit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-editor { font-family: Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; min-height: 360px; width: 100%; resize: vertical; }
.ct-fields { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ct-field { border: 1px solid var(--border); background: var(--surface-2); border-radius: 6px; padding: 2px 6px; font: 11.5px Menlo, Consolas, monospace; cursor: pointer; color: var(--text); }
.ct-field:hover { border-color: var(--primary); color: var(--primary); }
.ct-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ct-prevbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
@media (max-width: 1000px) { .ct-detail, .ct-edit-cols { grid-template-columns: 1fr; } .ct-edit-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ct-paper { padding: 20px 18px; font-size: 14.5px; } .ct-doc h2 { font-size: 19px; } .ct-accept .ct-edit-row { grid-template-columns: 1fr; } }
html[data-theme="dark"] .ct-paper:not(.ct-prev) { background: #fdfdfb; }
/* ===== Finans v2 ===== */
.fin-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; align-items: start; }
@media (max-width: 1000px) { .fin-two { grid-template-columns: 1fr; } }
.fin-buckets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.fin-bucket { border-radius: 10px; padding: 8px 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-bucket small { color: var(--muted); font-size: 11.5px; }
.fin-bucket b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-bucket.b0 { background: color-mix(in srgb, #22c55e 12%, var(--surface)); }
.fin-bucket.b3 { background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.fin-bucket.b4 { background: color-mix(in srgb, #ef4444 13%, var(--surface)); }
@media (max-width: 640px) { .fin-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-late { color: var(--danger, #dc2626); font-weight: 700; }
.fin-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .fin-form2 { grid-template-columns: 1fr; } }
.fin-trial tbody tr { cursor: pointer; }
.fin-trial tbody tr:hover td { background: var(--surface-2); }
.fin-trial tr.grp td { font-weight: 700; }
.fin-trial tr.d1 td { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.fin-trial tfoot td { border-top: 2px solid var(--border); }
.fin-is td { padding: 6px 8px; }
.fin-is tr.tot td { font-weight: 800; border-top: 1px solid var(--border); background: var(--surface-2); }
.fin-is td.neg { color: var(--danger, #dc2626); }
.fin-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.fin-bs-side b { display: block; margin-bottom: 4px; }
.fin-bs-tot { padding: 10px 0; border-top: 2px solid var(--border); }
.fin-bs-detail summary { cursor: pointer; color: var(--primary); font-weight: 600; margin-top: 6px; }
@media (max-width: 640px) { .fin-bs { grid-template-columns: 1fr; } }
.fin-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fin-stack .fin-is { max-width: 900px; }
.stat .s { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Mizan ağacı */
.fin-tree { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fin-tree-cell { white-space: nowrap; }
.fin-caret { width: 22px; height: 22px; flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 12px;
  display: inline-grid; place-items: center; transition: transform .15s ease, background .15s ease; }
.fin-caret:hover { background: var(--surface-2); color: var(--text); }
.fin-caret.open { transform: rotate(90deg); color: var(--primary); }
.fin-caret.leaf { cursor: default; }
.fin-code { min-width: 54px; color: var(--muted); font-size: 12.5px; }
.fin-trial tr.grp .fin-code { color: var(--text); }
.fin-name { overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.fin-trial tr.d4 td, .fin-trial tr.d5 td { font-weight: 400; }
.fin-trial tr.d5 .fin-name { color: var(--muted); }
/* ===== Sertifikasyon ===== */
.cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.cf-card { display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; }
.cf-card:hover { text-decoration: none; }
.cf-card:hover .cf-a4 { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .16); }
.cf-a4 { position: relative; aspect-ratio: 1 / 1.4142; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .1); transition: transform .18s ease, box-shadow .18s ease; }
.cf-a4 img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.cf-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted);
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(100,116,139,.08) 22px 23px), var(--surface-2); }
.cf-ph span { font-size: 40px; }
.cf-st { position: absolute; top: 8px; left: 8px; }
.cf-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf-meta b { font-size: 14.5px; line-height: 1.3; }
.cf-meta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cf-left { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.cf-left.green { color: #15803d; background: color-mix(in srgb, #22c55e 14%, var(--surface)); }
.cf-left.yellow { color: #a16207; background: color-mix(in srgb, #f59e0b 18%, var(--surface)); }
.cf-left.red { color: #b91c1c; background: color-mix(in srgb, #ef4444 15%, var(--surface)); }
.cf-left.blue { color: #1d4ed8; background: color-mix(in srgb, #3b82f6 14%, var(--surface)); }
.cf-count { font-size: 11.5px; color: var(--muted); }
.cf-head { margin-bottom: 10px; }
.cf-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.cf-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; }
.cf-a4-lg { cursor: zoom-in; }
.cf-a4-sm { width: 150px; }
.cf-side-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cf-info { display: flex; flex-direction: column; gap: 8px; }
.cf-info-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cf-info-h h3 { margin: 0; }
.cf-tabs { margin-bottom: 10px; }
.cf-big img { width: 100%; max-height: 80vh; object-fit: contain; display: block; background: #fff; }
.cf-form { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.cf-form-img { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cf-form-img label input { display: none; }
.cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cf-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.cf-drop { border: 2px dashed var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  background: var(--surface); margin-bottom: 10px; transition: border-color .15s ease, background .15s ease; }
.cf-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.cf-queue { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cf-queue:empty { display: none; }
.cf-q { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); }
.cf-q-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-q-bar { width: 120px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cf-q-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.cf-q.done .cf-q-bar i { background: #22c55e; width: 100% !important; }
.cf-q.err { background: color-mix(in srgb, #ef4444 12%, var(--surface)); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.cf-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cf-ext { display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 5px; border-radius: 5px; color: #fff; font: 700 10.5px/1 system-ui, sans-serif; letter-spacing: .03em; }
.cf-docs td { vertical-align: middle; }
.cf-doc-acts { white-space: nowrap; text-align: right; }
.cf-doc-acts .btn { padding: 0 8px; }
.cf-audits { display: flex; flex-direction: column; gap: 10px; }
.cf-audit { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; align-items: start; }
.cf-audit.planned { border-left: 4px solid var(--primary); }
.cf-audit-date { display: flex; flex-direction: column; }
.cf-audit-date small { color: var(--muted); font-size: 12px; }
.cf-audit-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-nc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cf-ncb { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); }
.cf-ncb.red { background: color-mix(in srgb, #ef4444 16%, var(--surface)); color: #b91c1c; }
.cf-ncb.yellow { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #a16207; }
.cf-audit-acts { display: flex; gap: 6px; }
tr.clickable { cursor: pointer; }
@media (max-width: 1000px) { .cf-detail { grid-template-columns: 1fr; } .cf-side { position: static; } .cf-a4-lg { max-width: 360px; } }
@media (max-width: 640px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cf-form { grid-template-columns: 1fr; }
  .cf-2, .cf-3 { grid-template-columns: 1fr; } .cf-audit { grid-template-columns: 1fr; } }
/* ===== Araç Yönetimi ===== */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.fl-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease; }
.fl-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .14); }
.fl-card.off { opacity: .62; }
.fl-photo { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.fl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint);
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface-2)); }
.fl-car { display: inline-flex; width: 84px; height: 84px; }
.fl-car svg { width: 100%; height: 100%; }
.fl-own { position: absolute; top: 10px; left: 10px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1e3a5f; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.fl-own.leased { background: #fdf2f8; color: #9d174d; }
.fl-own.off { left: auto; right: 10px; background: #f1f5f9; color: #475569; }
.fl-own.inline { position: static; box-shadow: none; border: 1px solid var(--border); }
.fl-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.fl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fl-km { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-plate { display: inline-flex; align-items: stretch; border: 2px solid #111827; border-radius: 6px; overflow: hidden; background: #fff; color: #111827;
  font: 700 14px/1 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.fl-plate i { font-style: normal; background: #1d4ed8; color: #fff; font-size: 8.5px; padding: 0 3px; display: flex; align-items: flex-end; padding-bottom: 2px; letter-spacing: 0; }
.fl-plate b { padding: 4px 7px 3px; }
.fl-plate.big { font-size: 22px; border-width: 2.5px; border-radius: 8px; }
.fl-plate.big i { font-size: 11px; padding: 0 5px 3px; }
.fl-plate.big b { padding: 6px 12px 5px; }
.fl-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.fl-who { display: flex; align-items: center; gap: 7px; font-size: 13px; flex-wrap: wrap; min-height: 26px; }
.fl-who.big { font-size: 14px; margin: 4px 0; }
.fl-ini { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); flex: none; }
.fl-ini.lg { width: 46px; height: 46px; font-size: 16px; }
.fl-dues { display: flex; flex-wrap: wrap; gap: 5px; }
.fl-due { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.fl-due.yellow { color: #a16207; background: color-mix(in srgb, #f59e0b 18%, var(--surface)); }
.fl-due.red { color: #b91c1c; background: color-mix(in srgb, #ef4444 15%, var(--surface)); }
.fl-spend { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px; }
.fl-spend b { font-variant-numeric: tabular-nums; }
.fl-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fl-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface)); color: var(--text); text-decoration: none; }
.fl-banner:hover { text-decoration: none; }
.fl-banner > div { flex: 1; min-width: 0; }
.fl-banner-i { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  background: var(--primary); color: #fff; flex: none; }
.fl-banner-go { font-size: 20px; color: var(--primary); }
.fl-hero { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 18px; padding: 14px; margin-bottom: 12px; }
.fl-hero-photo { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.fl-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-hero-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-hero-name { margin: 4px 0 0; font-size: 20px; }
.fl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.fl-h3 { margin: 0 0 10px; font-size: 14.5px; }
.fl-cats { display: flex; flex-direction: column; gap: 8px; }
.fl-cat { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.fl-cat-l { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-cat-l i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fl-cat-bar { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.fl-cat-bar i { display: block; height: 100%; border-radius: 99px; }
.fl-cat b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fl-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 16px; }
.fl-col { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; position: relative; }
.fl-col-bar { flex: 1; width: 100%; max-width: 28px; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 2px 2px; overflow: hidden; background: var(--surface-2); }
.fl-col-bar i { display: block; width: 100%; }
.fl-col small { font-size: 10.5px; color: var(--muted); }
.fl-col em { position: absolute; top: -14px; font-style: normal; font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.fl-catb { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 78%, #000); background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.fl-asg { display: flex; gap: 14px; align-items: flex-start; padding: 14px; }
.fl-asg.cur { border-left: 4px solid var(--primary); }
.fl-asg-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-asg-acts { display: flex; flex-direction: column; gap: 6px; }
.fl-ok { color: var(--success); font-weight: 600; }
.fl-soon { color: var(--warning); }
.fl-warn { padding: 8px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 13px; margin-bottom: 10px; }
.fl-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.fl-checks.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-checks label { display: flex; align-items: center; gap: 4px; }
.fl-fs { border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px 4px; margin: 0 0 12px; }
.fl-fs legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--muted); }
.fl-fs > .seg { margin: 4px 0 10px; }
.fl-money { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 6px; }
.fl-active { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 4px 0 8px; }
.fl-doclist { margin: 0 0 8px; padding-left: 18px; }
.fl-intro { margin: 0 0 10px; max-width: 920px; }
.fl-mv-sum { margin: -4px 0 8px; }
.fl-mvs { display: flex; flex-direction: column; gap: 8px; }
.fl-mv { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-left: 4px solid var(--border); }
.fl-mv.open { border-left-color: #f59e0b; }
.fl-mv.partial { border-left-color: #ef4444; }
.fl-mv.tagged { border-left-color: #22c55e; }
.fl-mv.ignored { opacity: .55; }
.fl-mv-date { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.fl-mv-date small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.fl-mv-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-mv-main .small { overflow: hidden; text-overflow: ellipsis; }
.fl-mv-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-mv-amt { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-mv-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fl-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fl-tag { display: inline-flex; align-items: center; gap: 4px; }
.fl-tag .fl-plate { font-size: 11px; }
.fl-tag .fl-plate b { padding: 3px 5px 2px; }
.fl-sugg { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary); }
.fl-mv-info { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.fl-mv-big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fl-alloc { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fl-alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 6px; }
.fl-rep th, .fl-rep td { white-space: nowrap; }
.fl-rep tfoot th { border-top: 2px solid var(--border-strong); }
.fl-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fl-mine-c { overflow: hidden; padding: 0; }
.fl-mine-c.wait { border: 2px solid #f59e0b; }
.zf-wrap { background: #fff; border-radius: 8px; padding: 18px; border: 1px solid var(--border); max-height: 62vh; overflow: auto; }
.fl-accept { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-weight: 600; font-size: 13.5px; }
.fl-accept input { margin-top: 3px; }
@media (max-width: 900px) { .fl-hero { grid-template-columns: 1fr; } .fl-two { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fl-grid { grid-template-columns: 1fr; }
  .fl-mv { grid-template-columns: minmax(0, 1fr) auto; }
  .fl-mv-date { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .fl-mv-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .fl-checks.cols { grid-template-columns: 1fr 1fr; }
  .fl-cat { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .fl-asg { flex-direction: column; } .fl-asg-acts { flex-direction: row; flex-wrap: wrap; }
  .fl-alloc-row { grid-template-columns: minmax(0, 1fr) 110px auto; }
  .zf-wrap { padding: 8px; }
}
.fl-body > .fl-plate { align-self: flex-start; }
.fl-who.big { flex-wrap: nowrap; align-items: flex-start; }
.fl-who.big > div { flex: 1; min-width: 0; }
/* ===== Finans: hesap / cari detayı, hareket tabloları (finmoves.js) ===== */
.fin-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-dtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-dtitle h2 { margin: 0; font-size: 19px; }
.fin-h3 { margin: 4px 0 8px; font-size: 14.5px; }
.fm-table td { vertical-align: top; }
.fm-person { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); text-decoration: none; white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline dotted; }
.fm-h { margin: 12px 0 6px; font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fm-tabs { margin: 10px 0; }
.fm-links { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.fm-links-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 5px 6px 5px 10px; background: var(--surface-2); }
.fm-link small { color: var(--muted); text-transform: uppercase; font-size: 10px; font-weight: 700; }
.fm-link em { font-style: normal; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.fm-link .x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; }
.fm-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fm-sugg-b { border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); background: none; border-radius: 10px; padding: 4px 10px; cursor: pointer;
  color: var(--primary); font-weight: 600; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.fm-sugg-b small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.fm-pick { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.fm-pick-row { display: flex; gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.fm-pick-row:hover { border-color: var(--primary); }
/* ===== Patron ekranı ===== */
.bx { display: flex; flex-direction: column; gap: 16px; }
.bx-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 0; color: var(--muted); }
.bx-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); animation: bx-spin .8s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
.bx-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 26px 26px 22px; color: #e8eefc;
  background: radial-gradient(120% 140% at 0% 0%, #1e3a8a 0%, #0f1d3d 45%, #070d1c 100%); box-shadow: 0 24px 60px rgba(7, 13, 28, .35); isolation: isolate; }
.bx-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: -1; pointer-events: none; }
.bx-orb.a { width: 340px; height: 340px; background: #6366f1; right: -80px; top: -120px; }
.bx-orb.b { width: 260px; height: 260px; background: #06b6d4; left: 30%; bottom: -170px; opacity: .35; }
.bx-hello small { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; color: #93a4c8; font-weight: 700; }
.bx-hello h1 { margin: 6px 0 4px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bx-hello p { margin: 0; color: #a9b8d9; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.bx-refresh { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #dbe5ff; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; }
.bx-refresh:hover { background: rgba(255, 255, 255, .14); }
.bx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.bx-kpi { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; cursor: pointer; color: inherit; font: inherit; min-width: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .18s ease, background .18s ease; }
.bx-kpi:hover { transform: translateY(-2px); background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); }
.bx-kpi-l { font-size: 12px; color: #a9b8d9; font-weight: 600; }
.bx-kpi-v { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-kpi-s { font-size: 12px; color: #a9b8d9; }
.bx-warn { color: #fca5a5; font-weight: 700; }
.bx-delta { align-self: flex-start; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.bx-delta.up { color: #047857; background: #d1fae5; }
.bx-delta.down { color: #b91c1c; background: #fee2e2; }
.bx-hero .bx-delta.up { color: #6ee7b7; background: rgba(16, 185, 129, .16); }
.bx-hero .bx-delta.down { color: #fca5a5; background: rgba(239, 68, 68, .18); }
.bx-sec-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bx-sec-h small { color: var(--muted); }
.bx-attn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.bx-attn-i { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow); }
.bx-attn-i > i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #3b82f6; box-shadow: 0 0 0 4px color-mix(in srgb, #3b82f6 18%, transparent); }
.bx-attn-i.red > i { background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 18%, transparent); animation: bx-pulse 1.8s ease-in-out infinite; }
.bx-attn-i.yellow > i { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 20%, transparent); }
.bx-attn-i.green > i { background: #10b981; box-shadow: 0 0 0 4px color-mix(in srgb, #10b981 18%, transparent); }
@keyframes bx-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #ef4444 8%, transparent); } }
.bx-attn-i div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bx-attn-i span { font-size: 12.5px; color: var(--muted); }
.bx-attn.ok .bx-attn-i { cursor: default; }
.bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px 18px 18px; box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bx-card:hover, .bx-card:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(15, 23, 42, .12); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); outline: none; }
.bx-card.wide { grid-column: span 2; }
.bx-card header { display: flex; align-items: center; gap: 10px; }
.bx-card header b { font-size: 15px; }
.bx-ic { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #0ea5e9); }
.bx-more { margin-left: auto; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.bx-card:hover .bx-more { opacity: 1; }
.bx-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.bx-stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bx-stats small { font-size: 11.5px; color: var(--muted); }
.bx-stats b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bx-stats em { font-style: normal; font-size: 12px; color: var(--muted); }
.bx .pos, .bx-t .pos { color: #059669; }
.bx .neg, .bx-t .neg { color: #dc2626; }
.bx-chart { position: relative; height: 190px; }
.bx-chart.tall { height: 250px; }
.bx-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bx-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
.bx-rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-rank li i { grid-column: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #0ea5e9); min-width: 4px; }
.bx-rank li b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; }
.bx-prod { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.bx-donut { position: relative; width: 150px; height: 150px; }
.bx-donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.bx-donut b { font-size: 24px; font-weight: 800; }
.bx-donut small { font-size: 11px; color: var(--muted); }
.bx-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bx-mini.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-m { padding: 9px 11px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bx-m b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-m small { font-size: 11.5px; color: var(--muted); }
.bx-m.pos b { color: #059669; } .bx-m.neg b { color: #dc2626; } .bx-m.warn b { color: #d97706; }
.bx-people { display: flex; flex-direction: column; gap: 12px; }
.bx-big { display: flex; align-items: baseline; gap: 8px; }
.bx-big b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(135deg, #6366f1, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-big small { color: var(--muted); }
.bx-aging { display: flex; flex-direction: column; gap: 12px; }
.bx-abar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.bx-abar i { display: block; min-width: 4px; }
.bx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bx-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bx-legend li i { width: 10px; height: 10px; border-radius: 3px; }
.bx-legend li b { font-variant-numeric: tabular-nums; }
.bx-empty { color: var(--muted); font-size: 13px; margin: 6px 0; }
/* ayrıntı paneli */
.bx-dr-back { position: fixed; inset: 0; z-index: 900; background: rgba(7, 13, 28, 0); transition: background .25s ease; }
.bx-dr-back.on { background: rgba(7, 13, 28, .42); }
.bx-dr { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--bg); box-shadow: -20px 0 60px rgba(0, 0, 0, .25);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.bx-dr-back.on .bx-dr { transform: none; }
.bx-dr header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bx-dr header b { font-size: 17px; margin-right: auto; }
.bx-dr-body { overflow: auto; padding: 14px 18px 30px; flex: 1; }
.bx-dr-body h4 { margin: 18px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bx-dr-body h4:first-child { margin-top: 4px; }
.bx-t td, .bx-t th { font-size: 13px; }
.bx-t tr.bx-tot td { font-weight: 800; background: var(--surface-2); }
.bx-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.bx-orders { display: flex; flex-direction: column; gap: 8px; }
.bx-order { display: grid; grid-template-columns: minmax(0, 1fr) 120px 42px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.bx-order > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.bx-order small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-order em { font-style: normal; font-size: 12px; font-weight: 700; text-align: right; }
.bx-prog { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bx-prog i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #10b981); border-radius: 999px; }
.bx-printers { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-pr { display: inline-flex; gap: 4px; align-items: baseline; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.bx-pr.yazdiriyor { background: #d1fae5; color: #065f46; } .bx-pr.hata { background: #fee2e2; color: #991b1b; } .bx-pr.durakladi { background: #fef3c7; color: #92400e; }
.bx-pr.cevrimdisi { opacity: .55; }
@media (max-width: 1100px) { .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-card.wide { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .bx-hero { padding: 20px 16px 16px; border-radius: 20px; }
  .bx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bx-kpi { padding: 12px 13px; border-radius: 14px; }
  .bx-grid { grid-template-columns: 1fr; }
  .bx-prod { grid-template-columns: 1fr; justify-items: center; }
  .bx-prod .bx-mini { width: 100%; }
  .bx-order { grid-template-columns: minmax(0, 1fr) 70px 38px; }
}
.bx-ic svg { width: 17px; height: 17px; stroke: currentColor; }
.bx-card.wide .bx-mini.cols3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .bx-card.wide .bx-mini.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== Rol Yönetimi ===== */
.ro-banner { margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: 13px; font-weight: 600; }
.rl-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.rl-side { padding: 12px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; max-height: calc(100vh - 140px); overflow: auto; }
.rl-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rl-tree { display: flex; flex-direction: column; gap: 2px; }
.rl-node { display: flex; align-items: center; gap: 6px; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); font-size: 13.5px; }
.rl-node:hover { background: var(--surface-2); }
.rl-node.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.rl-branch { color: var(--faint); font-size: 12px; }
.rl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-lock { font-size: 11px; }
.rl-custom { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #059669; background: #d1fae5; padding: 1px 6px; border-radius: 999px; }
.rl-count { font-size: 11.5px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; min-width: 22px; text-align: center; }
.rl-help { margin: 6px 2px 0; }
.rl-pane { min-width: 0; }
.rl-head { margin-bottom: 10px; }
.rl-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rl-title h2 { margin: 0; font-size: 19px; }
.rl-chain { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.rl-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.rl-chip.on { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.rl-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; }
.rl-matrix { overflow-x: auto; }   /* dar ekranda tablo kartın içinde kayar, dışarı taşmaz */
.rl-matrix table { width: 100%; }
.rl-matrix th.c, .rl-matrix td.c { text-align: center; width: 54px; padding-left: 3px; padding-right: 3px; }
.rl-matrix th, .rl-matrix td { white-space: nowrap; }
.rl-matrix td:first-child { white-space: normal; min-width: 120px; }
.rl-matrix th { font-size: 11px; }
.rl-matrix tr.rl-group td { background: var(--surface-2); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rl-matrix tr.rl-sub td:first-child { padding-left: 26px; color: var(--muted); }
.rl-cell { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 900; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.rl-cell.allow.own { background: #10b981; border-color: #10b981; color: #fff; }
.rl-cell.deny.own { background: #ef4444; border-color: #ef4444; color: #fff; }
.rl-cell.allow.inh { color: #10b981; border-color: color-mix(in srgb, #10b981 45%, var(--border)); border-style: dashed; }
.rl-cell.deny.inh { color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, var(--border)); border-style: dashed; }
.rl-cell.none { color: var(--faint); }
.rl-legend .rl-cell { width: 22px; height: 22px; font-size: 11px; cursor: default; }
.rl-res { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.rl-res.w { background: #d1fae5; color: #065f46; } .rl-res.r { background: #dbeafe; color: #1e40af; } .rl-res.o { background: #fef3c7; color: #92400e; } .rl-res.none { color: var(--faint); }
.rl-pre { display: flex; gap: 3px; justify-content: flex-end; opacity: .35; transition: opacity .15s ease; }
.rl-matrix tr:hover .rl-pre { opacity: 1; }
.rl-pre button { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; font-size: 11px; padding: 2px 5px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.rl-pre button:hover { border-color: var(--primary); color: var(--primary); }
.rl-pick { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.rl-pick-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.rl-conf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; font-size: 13px; max-height: 220px; overflow: auto; }
.rl-conf { display: flex; flex-direction: column; gap: 10px; }
.rl-conf-l { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.rl-conf-l li.sod { color: var(--warning); font-weight: 600; }
.rl-warnb { border: 0; cursor: pointer; }
@media (max-width: 900px) {
  .rl-layout { grid-template-columns: 1fr; }
  .rl-side { position: static; max-height: 300px; }
  .rl-matrix { overflow-x: auto; }
  .rl-matrix th.c, .rl-matrix td.c { width: 52px; }
  .rl-pre { opacity: 1; }
}
/* ===== Proje kararı (hareket tablolarında) ===== */
.pj-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pj-chip.none { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.pj-chip.set { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--primary-soft); }
.pj-chip.free { color: var(--muted); }
.pj-split { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pj-split-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 6px; }
.pj-lines { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.pj-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 220px; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.pj-line b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pj-line { grid-template-columns: 1fr auto; } .pj-line select { grid-column: 1 / -1; } .pj-split-row { grid-template-columns: 1fr 110px auto; } }
/* ===== Proje Yönetimi ===== */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pj-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; color: var(--text); text-decoration: none;
  box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease; }
.pj-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 23, 42, .14); }
.pj-cover { position: relative; aspect-ratio: 16 / 8; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--h, 220) 70% 45%), hsl(calc(var(--h, 220) + 40) 75% 30%)); }
.pj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-ini { font-size: 40px; font-weight: 900; color: rgba(255, 255, 255, .9); letter-spacing: .04em; }
.pj-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pj-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-code { font: 700 11.5px/1 Menlo, Consolas, monospace; color: var(--muted); background: var(--surface-2); padding: 3px 7px; border-radius: 6px; }
.pj-name { font-size: 15.5px; line-height: 1.3; }
.pj-sum { margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.pj-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px; }
.pj-fin div { display: flex; flex-direction: column; min-width: 0; }
.pj-fin small { font-size: 11px; color: var(--muted); }
.pj-fin b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-fin .pos { color: #059669; } .pj-fin .neg { color: #dc2626; }
.pj-budget { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pj-budget i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #0ea5e9); }
.pj-budget i.hot { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.pj-hero { position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 12px; min-height: 230px; display: flex; align-items: flex-end; box-shadow: 0 18px 44px rgba(15, 23, 42, .18); }
.pj-hero .pj-cover.big { position: absolute; inset: 0; aspect-ratio: auto; }
.pj-hero .pj-cover.big .pj-ini { font-size: 90px; opacity: .25; }
.pj-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 28, 0) 10%, rgba(7, 13, 28, .82) 100%); }
.pj-hero-in { position: relative; z-index: 1; padding: 22px 24px; color: #fff; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pj-hero-in h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.02em; }
.pj-hero-in p { margin: 0; color: #dbe4f5; max-width: 760px; }
.pj-hero-in .pj-code { background: rgba(255, 255, 255, .16); color: #fff; }
.pj-chips { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #dbe4f5; }
.pj-hero .btn:not(.primary) { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .25); }
.pj-over { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.pj-desc p { line-height: 1.65; white-space: pre-wrap; }
.pj-kw { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pj-kw span { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.pj-gal-h { display: flex; align-items: center; justify-content: space-between; }
.pj-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pj-gal figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.pj-gal img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pj-gal-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; opacity: 0; }
.pj-gal figure:hover .pj-gal-x { opacity: 1; }
.pj-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--primary-soft); position: sticky; top: 0; z-index: 2; }
.pj-q td { vertical-align: top; }
@media (max-width: 900px) { .pj-over { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pj-grid { grid-template-columns: 1fr; } .pj-hero { min-height: 260px; } }
/* Şirketten Haberler: kişisel sosyal medya paylaşımı (yalnız sahibine görünür) */
.feed-post.soc-post { padding: 12px 12px 6px; border-style: dashed; }
.soc-post .feed-who .soc-av { width: 36px; height: 36px; padding: 0; }
.soc-post .feed-who .soc-ic { width: 36px; height: 36px; border-radius: 50%; }
.soc-only { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 8px; white-space: nowrap; text-decoration: none; }
.soc-media { position: relative; display: block; margin: 10px -12px 0; background: #000; }
.soc-media img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.soc-foot { padding: 4px 2px 6px; font-size: 13px; }
.soc-foot a { color: var(--primary); }
button.gd-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* ===== Destek ortak (supportkit): dosya ekleri, iç not, yanıt kutusu, SLA, puan ===== */
.sk-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-img { display: block; width: 120px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.sk-img img { width: 100%; height: 100%; object-fit: cover; }
.sk-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; max-width: 260px; }
.sk-file:hover { border-color: var(--primary); text-decoration: none; }
.sk-file-i { width: 34px; height: 34px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.sk-file-t { display: flex; flex-direction: column; min-width: 0; }
.sk-file-t b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-file-t small { color: var(--muted); font-size: 11px; }
.tk-msg.note .tk-bubble { background: var(--warning-soft); border: 1px dashed #e7c75e; }
.tk-tag.note { color: var(--warning); background: transparent; }
.sk-compose.note .tk-input { background: var(--warning-soft); }
.sk-compose.drop { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: 10px; }
.sk-mode { margin-bottom: 8px; }
.sk-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-pending:empty { display: none; }
.sk-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; }
.sk-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; }
.sk-compose .tk-compose-bar { gap: 8px; flex-wrap: wrap; }
.sk-compose .tk-compose-bar .grow { flex: 1; min-width: 120px; }
.sk-canned { width: auto; max-width: 220px; height: 32px; font-size: 13px; }
.sk-sla { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.sk-sla.soon { background: var(--warning-soft); color: var(--warning); }
.sk-sla.late { background: var(--danger-soft); color: var(--danger); }
.sk-sla.ok { background: var(--success-soft); color: var(--success, #15803d); }
.sk-tagchip { display: inline-flex; align-items: center; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sk-rate { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.sk-stars { display: flex; gap: 2px; }
.sk-stars button { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #d1d5db; padding: 0 2px; transition: transform .12s; }
.sk-stars button.on { color: #f5b301; }
.sk-stars button:hover { transform: scale(1.15); }
.sk-rate-row { display: flex; gap: 8px; }
.sk-rate-row .input { flex: 1; }
.sk-stars-ro { color: #f5b301; letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.sk-stars-ro i { color: #d1d5db; font-style: normal; }
.sk-star1 { color: #f5b301; }

/* ===== Merkez › Destek Merkezi ===== */
.dm-me { display: inline-flex; align-items: center; gap: 8px; }
.dm-select { width: auto; height: 34px; padding: 0 10px; font-weight: 600; }
.dm-select.online { color: #15803d; } .dm-select.busy { color: #b45309; } .dm-select.away, .dm-select.offline { color: var(--muted); }
.dm-livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, #16a34a 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 35%, var(--border)); animation: spGlow 2s ease-in-out infinite; }
.dm-livebar .btn { margin-left: auto; }
@keyframes spGlow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 14%, transparent); } }
.dm-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--surface); }
.dm-av { position: relative; display: inline-flex; flex: none; }
.dm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.dm-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.dm-kpi small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.dm-kpi b { font-size: 24px; font-weight: 800; }
.dm-kpi.warn b { color: var(--warning); }
.dm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.dm-grid h3 { margin: 0 0 10px; font-size: 15px; }
.dm-chart { grid-column: span 2; min-height: 280px; }
.dm-chart canvas { max-height: 240px; }
.dm-sec-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dm-sec-h h3 { margin: 0; }
.dm-link { font-size: 13px; }
.dm-team-mini { display: flex; flex-direction: column; gap: 8px; }
.dm-tm { display: flex; align-items: center; gap: 10px; }
.dm-tm .grow { display: flex; flex-direction: column; min-width: 0; }
.dm-rank { display: flex; flex-direction: column; }
.dm-rank a { display: flex; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.dm-rank a:hover { background: var(--surface-2); text-decoration: none; }
.dm-bars { display: flex; flex-direction: column; gap: 8px; }
.dm-bar { display: grid; grid-template-columns: 110px 1fr 34px; gap: 8px; align-items: center; font-size: 13px; }
.dm-bar i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #22d3ee)); width: var(--w); }
.dm-bar b { text-align: right; }
.dm-tickets { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.dm-views { display: flex; flex-direction: column; padding: 6px; position: sticky; top: 8px; }
.dm-view { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.dm-view:hover { background: var(--surface-2); }
.dm-view.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.dm-view.alert b { color: var(--danger); }
.dm-view b { font-size: 12px; min-width: 22px; text-align: right; }
.dm-tmain .filters { margin-bottom: 8px; }
.dm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); margin-bottom: 8px; }
.dm-bulk .input { width: auto; height: 32px; }
.dm-tlist { display: flex; flex-direction: column; gap: 8px; }
.dm-trow { display: flex; gap: 12px; align-items: center; padding: 11px 14px; color: inherit; text-decoration: none; border-left: 4px solid transparent; }
.dm-trow:hover { border-color: var(--primary); text-decoration: none; }
.dm-trow.pr-acil { border-left-color: var(--danger); } .dm-trow.pr-yuksek { border-left-color: #f59e0b; }
.dm-trow.unread { background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.dm-trow-main { min-width: 0; flex: 1; }
.dm-trow-top { display: flex; align-items: center; gap: 8px; }
.dm-trow-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-trow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.dm-badges { display: flex; gap: 4px; }
.dm-cb input[type="checkbox"] { width: 18px !important; height: 18px !important; border-radius: 5px; background: transparent; border: 2px solid var(--faint); }
.dm-cb input[type="checkbox"]::after { display: none; }
.dm-cb input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--surface); }
.dm-filter-note { font-size: 13px; padding: 6px 10px; background: var(--surface-2); border-radius: 8px; }
.dm-back { display: inline-block; margin-bottom: 8px; }
.dm-detail { grid-template-columns: minmax(0, 1fr) 300px; }
.dm-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-side { display: flex; flex-direction: column; gap: 12px; }
.dm-h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dm-tl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.dm-tl span { color: var(--muted); }
.dm-tl.late b { color: var(--danger); } .dm-tl.ok b { color: #15803d; }
.dm-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.dm-kv dt { color: var(--muted); }
.dm-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dm-warn { margin-top: 8px; color: var(--danger); font-weight: 700; font-size: 13px; }
.dm-recent { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12.5px; }
.dm-recent a { color: var(--text); display: flex; gap: 6px; align-items: center; }
.dm-rated { margin: 6px 0 12px; font-size: 13.5px; }
.dm-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dm-staff { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dm-staff-h { display: flex; gap: 12px; align-items: center; }
.dm-staff-h .grow { min-width: 0; }
.dm-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-staff-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; border-top: 1px solid var(--border); padding-top: 10px; }
.dm-staff-stats b { display: block; font-size: 16px; }
.dm-staff-stats small { font-size: 10.5px; color: var(--muted); }
.dm-staff-acts { display: flex; gap: 6px; justify-content: flex-end; }
.dm-skillpick { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dm-skillpick label, .dm-days label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.dm-days { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dm-canned { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dm-cn { text-align: left; padding: 14px; cursor: pointer; color: var(--text); font: inherit; }
.dm-cn:hover { border-color: var(--primary); }
.dm-cn-h { display: flex; justify-content: space-between; gap: 8px; }
.dm-cn p { margin: 6px 0 0; white-space: pre-wrap; }
.dm-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.dm-settings h3 { margin: 0 0 6px; }
.dm-sla td { padding: 4px 6px; }
.dm-sla .input { width: 90px; }

/* ===== Canlı destek (merkez masası + firma sohbeti) ===== */
.lc-desk { display: grid; grid-template-columns: 280px minmax(0, 1fr) 260px; gap: 12px; height: calc(100dvh - 260px); min-height: 520px; }
.lc-queue { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lc-qh { display: flex; justify-content: space-between; align-items: center; padding: 10px 6px 4px; font-size: 13px; }
.lc-count { font-size: 12px; font-weight: 700; background: var(--surface-2); border-radius: 999px; padding: 0 8px; }
.lc-count.hot { background: #16a34a; color: #fff; animation: spGlow 1.6s ease-in-out infinite; }
.lc-none { font-size: 12.5px; color: var(--faint); padding: 4px 8px 8px; }
.lc-item { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.lc-item:hover { background: var(--surface-2); text-decoration: none; }
.lc-item.on { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.lc-item.waiting { border-color: color-mix(in srgb, #16a34a 40%, var(--border)); }
.lc-item.ended { opacity: .8; }
.lc-item-top { display: flex; gap: 6px; align-items: center; }
.lc-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-unread { background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; }
.lc-pane { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.lc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lc-head .grow { min-width: 0; }
.lc-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lc-acts .input { width: auto; height: 32px; font-size: 13px; }
.lc-msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background:
  radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 4%, transparent), transparent 40%), var(--surface); min-height: 200px; }
.lc-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.lc-msg.mine { align-self: flex-end; align-items: flex-end; }
.lc-who { font-size: 11.5px; color: var(--muted); margin: 0 8px 2px; font-weight: 600; }
.lc-bubble { background: var(--surface-2); border-radius: 18px 18px 18px 6px; padding: 9px 13px; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.lc-msg.mine .lc-bubble { background: var(--primary); color: #fff; border-radius: 18px 18px 6px 18px; }
.lc-msg.mine .lc-bubble .sk-file { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
.lc-text { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.4; }
.lc-time { font-size: 10.5px; color: var(--faint); margin: 2px 8px 0; }
.lc-sys { align-self: center; font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 12px; text-align: center; }
.lc-screen { display: flex; flex-direction: column; gap: 4px; }
.lc-msg.mine .lc-screen small { color: rgba(255,255,255,.85); }
.lc-typing { display: flex; align-items: center; gap: 3px; padding: 4px 18px; font-size: 12px; color: var(--muted); }
.lc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: lcDot 1.2s infinite; }
.lc-typing span:nth-child(2) { animation-delay: .15s; } .lc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lcDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.lc-pane .tk-compose { padding: 10px 14px 12px; margin: 0; }
.lc-closed { padding: 14px; text-align: center; border-top: 1px solid var(--border); }
.lc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); }
.lc-empty div { font-size: 48px; }
.lc-info { overflow: auto; }
.lc-agent { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), #22d3ee); flex: none; }
.lc-agent.waiting { background: linear-gradient(135deg, #94a3b8, #cbd5e1); animation: spGlow 1.6s ease-in-out infinite; }
.lc-dock { position: fixed; left: 18px; bottom: 64px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.18); color: var(--text); text-decoration: none; }
.lc-dock:hover { text-decoration: none; transform: translateY(-2px); }
.lc-dock span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.lc-dock small { color: var(--muted); font-size: 12px; }
.lc-dock-i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.lc-dock.hot .lc-dock-i { background: #16a34a; animation: spGlow 1.4s ease-in-out infinite; }

/* ===== Firma › Üyeliğim & Destek ===== */
.mb2 { display: flex; flex-direction: column; gap: 12px; }
.mb2-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; overflow: hidden; }
.mb2-hero-l { padding: 22px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), var(--surface) 70%); display: flex; flex-direction: column; gap: 8px; }
.mb2-hero-l h2 { margin: 2px 0; font-size: 26px; }
.mb2-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mb2-state { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.mb2-state.on { background: var(--success-soft); color: #15803d; } .mb2-state.off { background: var(--danger-soft); color: var(--danger); }
.mb2-pkg { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--primary); color: #fff; }
.mb2-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.mb2-support { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; border-radius: 0; border: 0; border-left: 1px solid var(--border); }
.mb2-support:not(.compact) { border: 1px solid var(--border); border-radius: 14px; }
.mb2-sup-h { display: flex; gap: 12px; align-items: flex-start; }
.mb2-sup-h .grow { display: flex; flex-direction: column; gap: 2px; }
.mb2-sup-h small { color: var(--muted); }
.mb2-pulse { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: #94a3b8; }
.on > .mb2-sup-h .mb2-pulse, .mb2-live-hero.on .mb2-pulse { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: mbPulse 1.8s infinite; }
@keyframes mbPulse { 70% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.mb2-sup-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mb2-contact { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mb2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.mb2-grid h3 { margin: 0; font-size: 15px; }
.mb2-tlist { display: flex; flex-direction: column; margin-top: 8px; }
.mb2-trow { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; }
.mb2-trow:hover { background: var(--surface-2); text-decoration: none; }
.mb2-trow .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb2-trow.unread .grow { font-weight: 700; }
.mb2-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.mb2-months.wide { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.mb2-m { border-radius: 10px; padding: 8px 4px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.mb2-m b { font-size: 16px; } .mb2-m small { font-size: 10.5px; color: var(--muted); } .mb2-m i { font-style: normal; font-size: 11px; }
.mb2-m.odendi { background: var(--success-soft); border-color: #a7dcb8; } .mb2-m.kismi { background: var(--warning-soft); border-color: #f3dc8a; }
.mb2-m.gecikti { background: var(--danger-soft); border-color: #f2b8b5; } .mb2-m.ucretsiz { opacity: .6; }
.mb2-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.mb2-lg::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--surface-2); border: 1px solid var(--border); }
.mb2-lg.odendi::before { background: #86efac; } .mb2-lg.kismi::before { background: #fde68a; } .mb2-lg.gecikti::before { background: #fca5a5; }
.mb2-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mb2-mods { grid-column: 1 / -1; }
.mb2-solved { display: flex; justify-content: flex-end; margin-top: 8px; }
.mb2-live-start { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mb2-live-form { display: flex; flex-direction: column; gap: 4px; }
.mb2-live-hero { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; margin-bottom: 8px; background: var(--surface-2); }
.mb2-live-hero.on { background: linear-gradient(90deg, color-mix(in srgb, #16a34a 12%, var(--surface)), var(--surface)); }
.mb2-live-hero h3 { margin: 0 0 4px; }
.mb2-live-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.mb2-chats { display: flex; flex-direction: column; }
.mb2-chat { display: flex; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); color: var(--text); }
.mb2-chat .grow { display: flex; flex-direction: column; min-width: 0; }
.mb2-chat:hover { background: var(--surface-2); text-decoration: none; }
.mb2-chat-pane { height: calc(100dvh - 240px); min-height: 480px; max-width: 920px; margin: 0 auto; width: 100%; }
.mb2-pay-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mb2-pay-sum { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mb2-big { font-size: 30px; font-weight: 800; }
.mb2-bank h3 { margin: 0 0 6px; }
@media (max-width: 1100px) {
  .lc-desk { grid-template-columns: 240px minmax(0, 1fr); }
  .lc-info { display: none; }
  .dm-chart { grid-column: auto; }
}
@media (max-width: 800px) {
  .dm-tickets, .dm-detail, .mb2-hero, .mb2-live-start { grid-template-columns: minmax(0, 1fr); }
  .dm-views { position: static; flex-direction: row; overflow-x: auto; }
  .dm-view { white-space: nowrap; }
  .mb2-support { border-left: 0; border-top: 1px solid var(--border); }
  .lc-desk { grid-template-columns: minmax(0, 1fr); height: auto; }
  .lc-queue { max-height: 260px; }
  .lc-pane { height: 70dvh; }
  .mb2-chat-pane { height: calc(100dvh - 200px); }
  .mb2-months { grid-template-columns: repeat(4, 1fr); }
  .dm-staff-stats { grid-template-columns: repeat(3, 1fr); }
  .dm-trow { flex-wrap: wrap; }
  .dm-trow-side { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
  .lc-dock { left: 12px; bottom: 12px; }
}

/* ============ Kişisel › Mail — Gmail tarzı (Material 3) ============ */
:root {
  --gm-shell: #F6F8FC; --gm-surface: #FFFFFF; --gm-low: #F8FAFD; --gm-cont: #F0F4F9; --gm-high: #E9EEF6; --gm-search: #EAF1FB;
  --gm-on: #1F1F1F; --gm-on2: #444746; --gm-on3: #5E5E5E; --gm-outline: #747775; --gm-ov: #C4C7C5; --gm-div: rgba(100,121,143,.122);
  --gm-primary: #0B57D0; --gm-on-primary: #FFFFFF; --gm-pc: #D3E3FD; --gm-on-pc: #041E49; --gm-compose: #C2E7FF; --gm-on-compose: #001D35;
  --gm-read-row: #F2F6FC; --gm-sel: #C2DBFF; --gm-sel-m: #D3E3FD; --gm-star: #F4B400; --gm-red: #D93025; --gm-green: #1E8E3E;
  --gm-inv: #303030; --gm-inv-on: #F2F2F2; --gm-inv-p: #A8C7FA;
  --gm-font: "Google Sans Flex", "Google Sans", Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --gm-e1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gm-e3: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}
html[data-theme="dark"] {
  --gm-shell: #131314; --gm-surface: #1E1F20; --gm-low: #1E1F20; --gm-cont: #282A2C; --gm-high: #333537; --gm-search: #282A2C;
  --gm-on: #E3E3E3; --gm-on2: #C4C7C5; --gm-on3: #8E918F; --gm-outline: #8E918F; --gm-ov: #444746; --gm-div: rgba(227,227,227,.08);
  --gm-primary: #A8C7FA; --gm-on-primary: #062E6F; --gm-pc: #004A77; --gm-on-pc: #D3E3FD; --gm-compose: #004A77; --gm-on-compose: #C2E7FF;
  --gm-read-row: #18191A; --gm-sel: #004A77; --gm-sel-m: #004A77; --gm-star: #FDD663; --gm-red: #F28B82; --gm-green: #81C995;
  --gm-inv: #E3E3E3; --gm-inv-on: #303030; --gm-inv-p: #0B57D0;
  --gm-e1: 0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.3); --gm-e3: 0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.3);
}
main#view.gm-view { height: 100%; padding: 0; margin: 0; max-width: none; overflow: hidden; display: flex; flex-direction: column; background: var(--gm-shell); }
.gi { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }
.gm, .gm-c, .gm-pop, .gm-snack { font-family: var(--gm-font); }
.gm { flex: 1; min-height: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr); color: var(--gm-on); background: var(--gm-shell); position: relative; }
.gm-ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--gm-on2); display: inline-grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.gm-ib .gi { width: 20px; height: 20px; }
.gm-ib:hover { background: color-mix(in srgb, var(--gm-on) 8%, transparent); }
.gm-ib:focus-visible, .gm-row:focus-visible { outline: 2px solid var(--gm-primary); outline-offset: -2px; }
.gm-only-m, .gm-scrim, .gm-menu-btn, .gm-label, .gm-l3, .gm-ptr, .gm-fab, .gm-nav-brand { display: none; }
.gm .grow, .gm-c .grow, .gm-pop .grow, .gm-snack .grow { flex: 1; min-width: 0; }

/* sol gezinme */
.gm-nav { display: flex; flex-direction: column; min-height: 0; padding: 8px 0; background: var(--gm-shell); }
.gm-compose-btn { margin: 8px 0 16px 8px; height: 56px; padding: 0 24px 0 16px; border-radius: 16px; border: 0; background: var(--gm-compose); color: var(--gm-on-compose);
  font: 500 14px var(--gm-font); letter-spacing: .1px; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; cursor: pointer; box-shadow: var(--gm-e1); transition: box-shadow .2s; }
.gm-compose-btn:hover { box-shadow: var(--gm-e3); }
.gm-nav-scroll { flex: 1; min-height: 0; overflow: auto; padding-right: 16px; overscroll-behavior: contain; }
.gm-nf { display: flex; align-items: center; gap: 18px; height: 32px; padding: 0 12px 0 26px; border: 0; border-radius: 0 16px 16px 0; background: transparent; color: var(--gm-on);
  font: 400 14px var(--gm-font); width: 100%; text-align: left; cursor: pointer; text-decoration: none; }
.gm-nf .gi { width: 20px; height: 20px; color: var(--gm-on2); }
.gm-nf .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-nf.gm-tree { padding-left: calc(10px + var(--d, 0) * 16px); gap: 8px; }
.gm-nf.gm-tree.virtual { color: var(--gm-on2); }
.gm-caret { width: 16px; flex: 0 0 16px; text-align: center; font-size: 11px; color: var(--gm-on2); transition: transform .15s; cursor: pointer; }
.gm-caret.open { transform: rotate(90deg); }
.gm-subs { display: flex; flex-direction: column; }
.gm-substrip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-top: 6px; font-size: 14px;
  background: var(--surface-2); border-top: 3px solid var(--gm-on, #1f1f1f); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
.gm-substrip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-sub-n { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gm-subempty { padding: 12px 16px; color: var(--muted); font-size: 13px; }
.gm-more-btn { border: 1px solid var(--border); background: var(--surface); color: inherit; border-radius: 999px; padding: 6px 14px; margin: 8px 16px;
  cursor: pointer; font-size: 13px; }
.gm-more-btn.sm { margin: 0; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.gm-nf:hover { background: color-mix(in srgb, var(--gm-on) 7%, transparent); text-decoration: none; }
.gm-nf.on { background: var(--gm-pc); color: var(--gm-on-pc); font-weight: 700; }
.gm-nf.on .gi { color: var(--gm-on-pc); }
.gm-nf.strong { font-weight: 500; }
.gm-nf-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-nav-acc { margin-top: 10px; }
.gm-nav-acc-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--gm-on2); font: 500 12px var(--gm-font); padding: 6px 12px 6px 26px; cursor: pointer; text-align: left; }
.gm-nav-acc-h .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-nav-acc-h .gi { width: 18px; height: 18px; transition: transform .2s; }
.gm-nav-acc.closed .gm-nav-acc-h .gi { transform: rotate(-90deg); }
.gm-nav-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gm-nav-err { width: 16px; height: 16px; border-radius: 50%; background: var(--gm-red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.gm-nav-note { font-size: 12px; color: var(--gm-on3); padding: 4px 26px; }
.gm-nav-sub { font: 500 11px var(--gm-font); color: var(--gm-on3); text-transform: uppercase; letter-spacing: .06em; padding: 12px 26px 4px; }
.gm-nav-foot { border-top: 1px solid var(--gm-ov); margin: 8px 16px 0 0; padding-top: 8px; }

/* liste */
.gm-listpane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 16px 0; }
.gm-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior-y: contain; position: relative; }
.gm-bars { position: sticky; top: 0; z-index: 5; background: var(--gm-shell); padding: 8px 0 0; transition: transform .2s cubic-bezier(.2,0,0,1); }
.gm-top { display: flex; align-items: center; gap: 4px; height: 48px; max-width: 720px; border-radius: 24px; background: var(--gm-search); padding: 0 4px; transition: background .15s, box-shadow .15s; }
.gm-top:focus-within { background: var(--gm-surface); box-shadow: var(--gm-e1); }
.gm-search { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding-left: 10px; color: var(--gm-on2); }
.gm-search-in { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px var(--gm-font); color: var(--gm-on); outline: none; height: 44px; padding: 0; box-shadow: none; }
.gm-search-in::placeholder { color: var(--gm-on2); }
.gm-search-in::-webkit-search-cancel-button { display: none; }
.gm-search-x { visibility: hidden; }
.gm.searching .gm-search-x, .gm-search:focus-within .gm-search-x { visibility: visible; }
.gm-acct { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.gm-acct-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 14px var(--gm-font); background: var(--gm-primary); }
.gm-acct-av.all { background: var(--gm-high); color: var(--gm-on2); }
.gm-acct-av .gi { width: 18px; height: 18px; }
.gm-selbar { display: flex; align-items: center; gap: 2px; height: 48px; max-width: 720px; border-radius: 24px; background: var(--gm-pc); color: var(--gm-on-pc); padding: 0 4px; }
.gm-selbar[hidden] { display: none; }
.gm-selbar .gm-ib { color: var(--gm-on-pc); }
.gm-selbar > b { font: 400 20px var(--gm-font); padding-left: 6px; }
.gm.selecting .gm-top { display: none; }
.gm-lhead { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 8px 0 14px; margin-top: 8px; background: var(--gm-surface); border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--gm-div); }
.gm-count { font-size: 12px; color: var(--gm-on3); padding-right: 8px; font-variant-numeric: tabular-nums; }
.gm-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-left: 6px; padding: 0 6px 0 12px; border-radius: 14px; border: 0;
  background: var(--gm-sel, #c2e7ff); color: var(--gm-on); font: 500 12.5px var(--gm-font); cursor: pointer; white-space: nowrap; }
.gm-chip svg { width: 16px; height: 16px; opacity: .7; }
.gm-chip:hover svg { opacity: 1; }
.gm-sync { margin: 8px 0 0; padding: 8px 14px 10px; border-radius: 12px; background: var(--gm-surface); border: 1px solid var(--gm-div); }
.gm-sync-t { display: flex; justify-content: space-between; gap: 10px; font: 400 13px var(--gm-font); color: var(--gm-on2); margin-bottom: 6px; }
.gm-sync-t b { color: var(--gm-on); font-weight: 600; font-variant-numeric: tabular-nums; }
.gm-sync-bar { height: 4px; border-radius: 2px; background: var(--gm-div); overflow: hidden; }
.gm-sync-bar i { display: block; height: 100%; background: #1a73e8; border-radius: 2px; transition: width .4s ease; }
.gm-tree-h { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.gm-tree-all { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--gm-on3); cursor: pointer;
  font: 500 11px var(--gm-font); text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 10px; }
.gm-tree-all:hover { background: var(--gm-high, rgba(0,0,0,.06)); color: var(--gm-on); }
.gm-tree-all svg { width: 16px; height: 16px; }
.gm-card { background: var(--gm-surface); border-radius: 0 0 16px 16px; min-height: calc(100% - 112px); overflow: hidden; }
input[type="checkbox"].gm-cb { appearance: none; -webkit-appearance: none; width: 18px !important; height: 18px !important; margin: 0 11px; border: 2px solid var(--gm-on2); border-radius: 2px;
  background: transparent !important; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: none; transition: none; }
input[type="checkbox"].gm-cb::after { content: ''; position: static; width: 5px; height: 10px; border: solid transparent; border-width: 0 2px 2px 0; border-radius: 0; background: none;
  box-shadow: none; transform: rotate(45deg) translate(-1px, -1px); transition: none; }
input[type="checkbox"].gm-cb:checked, input[type="checkbox"].gm-cb:indeterminate { background: var(--gm-primary) !important; border-color: var(--gm-primary); }
input[type="checkbox"].gm-cb:checked::after { border-color: var(--gm-on-primary); transform: rotate(45deg) translate(-1px, -1px); }
input[type="checkbox"].gm-cb:indeterminate::after { width: 10px; height: 0; border-width: 2px 0 0; border-color: var(--gm-on-primary); transform: none; }
.gm-row { position: relative; overflow: hidden; cursor: pointer; background: var(--gm-read-row); border-bottom: 1px solid var(--gm-div); outline: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.gm-row.unread { background: var(--gm-surface); }
.gm-row-in { position: relative; z-index: 1; display: flex; align-items: center; height: 40px; padding: 0 16px 0 2px; background: inherit; transition: transform .2s ease; }
.gm-row > .gm-row-in { background: var(--gm-read-row); }
.gm-row.unread > .gm-row-in { background: var(--gm-surface); }
.gm-row.sel > .gm-row-in { background: var(--gm-sel); }
.gm-row.open > .gm-row-in { background: var(--gm-high); }
@media (hover: hover) and (min-width: 761px) {   /* üzerine gelme yalnız fareli geniş ekranda (dokunmatikte tarih kaybolmasın) */
  .gm-row:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, var(--gm-e1); z-index: 2; }
  html[data-theme="dark"] .gm-row:hover { box-shadow: inset 1px 0 0 rgba(227,227,227,.12), inset -1px 0 0 rgba(227,227,227,.12), var(--gm-e1); }
}
.gm-row .gm-av { display: none; }
.gm-star { width: 32px; height: 32px; border: 0; background: transparent; color: var(--gm-on3); display: grid; place-items: center; cursor: pointer; border-radius: 50%; flex: none; padding: 0; }
.gm-star .gi { width: 20px; height: 20px; }
.gm-star-ph { visibility: hidden; pointer-events: none; }
.gm-star.on { color: var(--gm-star); }
.gm-star:hover { background: color-mix(in srgb, var(--gm-on) 8%, transparent); }
.gm-row-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding-left: 6px; }
.gm-l1 { display: contents; }
.gm-who { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--gm-on); }
.gm-who-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-time { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--gm-on3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-l2 { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; display: flex; align-items: center; }
.gm-subj { color: var(--gm-on); flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gm-l2 .gm-snip { color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.gm-flags { display: inline-flex; gap: 4px; margin-left: 8px; color: var(--gm-on3); flex: none; }
.gm-flags .gi { width: 16px; height: 16px; }
.gm-row.unread .gm-who, .gm-row.unread .gm-subj, .gm-row.unread .gm-time { font-weight: 700; color: var(--gm-on); }
.gm-co { font: 500 11px var(--gm-font); color: var(--gm-on-pc); background: var(--gm-pc); border-radius: 4px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; flex: 0 1 auto; }
.gm-boxdot { position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; }   /* birleşik gelen kutusu: hesap rengi sol kenarda */
.gm-hover { position: absolute; right: 8px; top: 0; bottom: 0; display: none; align-items: center; background: inherit; padding-left: 8px; }
@media (hover: hover) and (min-width: 761px) { .gm-row:hover .gm-hover { display: flex; } .gm-row:hover .gm-time { visibility: hidden; } }
.gm-swipe { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 28px; color: #fff; opacity: 0; }
.gm-swipe .gi { transition: transform .15s; }
.gm-swipe.l { background: var(--gm-green); justify-content: flex-start; }
.gm-swipe.l.del, .gm-swipe.r { background: var(--gm-red); }
.gm-swipe.r { justify-content: flex-end; }
.gm-row.sw-l .gm-swipe.l, .gm-row.sw-r .gm-swipe.r { opacity: 1; }
.gm-row.sw-arm .gm-swipe .gi { transform: scale(1.3); }
.gm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 72px 16px; color: var(--gm-on2); text-align: center; }
.gm-empty .gi { width: 72px; height: 72px; color: var(--gm-ov); }
.gm-empty small { color: var(--gm-on3); }
.gm-spin { width: 28px; height: 28px; border: 3px solid var(--gm-pc); border-top-color: var(--gm-primary); border-radius: 50%; animation: gmspin .8s linear infinite; margin: 18px auto; }
@keyframes gmspin { to { transform: rotate(360deg); } }
.gm-skel-row { display: flex; gap: 16px; align-items: center; padding: 12px 16px; }
.gm-skel-row i { width: 40px; height: 40px; border-radius: 50%; background: var(--gm-high); flex: none; }
.gm-skel-row span { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gm-skel-row b, .gm-skel-row em { display: block; height: 10px; border-radius: 5px; background: var(--gm-high); animation: gmpulse 1.2s ease-in-out infinite; }
.gm-skel-row b { width: 40%; } .gm-skel-row em { width: 85%; } .gm-skel-row em + em { width: 60%; }
@keyframes gmpulse { 50% { opacity: .45; } }

/* okuma */
.gm-read { display: none; min-width: 0; min-height: 0; flex-direction: column; background: var(--gm-surface); border-radius: 16px; margin: 8px 16px 16px 0; overflow: hidden; }
.gm.reading .gm-read { display: flex; }
@media (min-width: 761px) and (max-width: 1279px) {
  .gm.reading .gm-listpane { display: none; }
  .gm.reading .gm-read { margin-left: 0; }
}
@media (min-width: 1280px) {
  .gm.reading { grid-template-columns: 256px minmax(380px, .9fr) minmax(0, 1.1fr); }
  .gm.reading .gm-read { margin-left: 0; }
  .gm.reading .gm-row-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .gm.reading .gm-who { grid-column: 1; } .gm.reading .gm-time { grid-column: 2; } .gm.reading .gm-l2 { grid-column: 1 / -1; grid-row: 2; }
  .gm.reading .gm-row-in { height: 60px; }
}
.gm-rbar { display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 8px; border-bottom: 1px solid var(--gm-div); flex: none; }
.gm-rscroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.gm-loading { flex: 1; display: grid; place-items: center; }
.gm-noread { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gm-on3); }
.gm-noread .gi { width: 64px; height: 64px; color: var(--gm-ov); }
.gm-subj-row { display: flex; align-items: flex-start; gap: 8px; padding: 18px 16px 8px 24px; }
.gm-subj-row h1 { flex: 1; min-width: 0; font: 400 22px/28px var(--gm-font); color: var(--gm-on); word-break: break-word; margin: 0; }
.gm-fchip { display: inline-block; vertical-align: 3px; margin-left: 8px; font: 500 12px/16px var(--gm-font); color: var(--gm-on2); background: var(--gm-high); border: 0; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.gm-star.big { width: 40px; height: 40px; }
.gm-star.big .gi { width: 24px; height: 24px; }

/* Mail bilgileri kartı (Kişiler / Ekler) */
.gm-info { margin: 4px 24px 8px; border: 1px solid var(--gm-ov); border-radius: 12px; background: var(--gm-surface); overflow: hidden; }
.gm-info-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px 0 16px; border: 0; background: var(--gm-cont); color: var(--gm-on); cursor: pointer; text-align: left; font: inherit; }
.gm-info-ttl { font: 500 14px var(--gm-font); flex: none; }
.gm-info-sum { font-size: 12px; color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gm-info-h .gi { width: 20px; height: 20px; color: var(--gm-on2); transition: transform .2s; }
.gm-info-h[aria-expanded="true"] .gi { transform: rotate(180deg); }
.gm-tabs { display: flex; border-bottom: 1px solid var(--gm-div); }
.gm-tab { flex: 1; height: 44px; border: 0; background: transparent; color: var(--gm-on2); font: 500 14px var(--gm-font); position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gm-tab.on { color: var(--gm-primary); }
.gm-tab.on::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gm-primary); }
.gm-tab-n { font-size: 11px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--gm-high); color: var(--gm-on2); display: inline-grid; place-items: center; }
.gm-tab.on .gm-tab-n { background: var(--gm-pc); color: var(--gm-on-pc); }
.gm-tabp { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.gm-pgroup-h { font: 500 12px var(--gm-font); color: var(--gm-on3); margin-bottom: 6px; }
.gm-pgroup-l { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-pbtn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: 22px; border: 1px solid var(--gm-ov); background: var(--gm-surface); color: var(--gm-on); cursor: pointer; text-align: left; font: inherit; transition: background .15s, border-color .15s; }
.gm-pbtn:hover { background: color-mix(in srgb, var(--gm-primary) 8%, var(--gm-surface)); border-color: var(--gm-outline); }
.gm-pbtn .gm-av { display: grid; width: 34px; height: 34px; font-size: 14px; cursor: inherit; }
.gm-pbtn-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gm-pbtn-t b { font: 500 13px var(--gm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pbtn-t small { font-size: 11.5px; color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pbtn.has-co { border-color: color-mix(in srgb, var(--gm-primary) 45%, var(--gm-ov)); }
.gm-pbtn small.gm-pbtn-co { color: var(--gm-primary); font-weight: 600; }
.gm-info-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--gm-on3); }
.gm-info-hint { color: var(--gm-primary); }
.gm-info-none { display: flex; align-items: center; gap: 8px; color: var(--gm-on3); font-size: 13px; }
.gm-info-none .gi { width: 20px; height: 20px; }
.gm-abtns { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-abtn { display: inline-flex; align-items: center; gap: 10px; height: 52px; max-width: 300px; padding: 0 14px 0 6px; border: 1px solid var(--gm-ov); border-radius: 12px; background: var(--gm-surface); color: var(--gm-on); text-decoration: none; transition: background .15s; }
.gm-abtn:hover { background: var(--gm-cont); text-decoration: none; }
.gm-abtn-ic { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font: 800 10px var(--gm-font); color: #fff; background: #5E5E5E; flex: none; }
.gm-abtn.pdf .gm-abtn-ic { background: #EA4335; } .gm-abtn.xls .gm-abtn-ic { background: #188038; } .gm-abtn.doc .gm-abtn-ic { background: #4285F4; }
.gm-abtn-th { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: var(--gm-high); flex: none; }
.gm-abtn-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-abtn-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gm-abtn-t b { font: 500 13px var(--gm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-abtn-t small { font-size: 11.5px; color: var(--gm-on3); }
.gm-btn-text { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: transparent; color: var(--gm-primary); font: 500 14px var(--gm-font); cursor: pointer; }
.gm-btn-text:hover { background: color-mix(in srgb, var(--gm-primary) 8%, transparent); }
.gm-btn-text .gi { width: 18px; height: 18px; }

.gm-from { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 0 12px; align-items: center; padding: 10px 12px 6px 24px; }
.gm-from .gm-av { display: grid; cursor: default; }
.gm-from-t { min-width: 0; }
.gm-from-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gm-from-l1 b { font: 700 14px var(--gm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-from-em { font-size: 12px; color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gm-from-time { margin-left: auto; font-size: 12px; color: var(--gm-on3); white-space: nowrap; padding-left: 8px; }
.gm-to { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--gm-on2); font: 400 12px var(--gm-font); padding: 0; cursor: pointer; max-width: 100%; }
.gm-to .gi { width: 18px; height: 18px; }
.gm-av { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: var(--av, #757575); color: #fff; display: grid; place-items: center; font: 500 18px var(--gm-font); cursor: pointer; flex: none; position: relative; overflow: hidden; }
.gm-av-c { display: none; }
.gm-invite { display: flex; align-items: center; gap: 14px; margin: 8px 24px; padding: 12px 14px; border: 1px solid var(--gm-ov); border-radius: 12px; }
.gm-invite .grow { display: flex; flex-direction: column; gap: 2px; }
.gm-invite small { color: var(--gm-on3); font-size: 12.5px; }
.gm-invite-d { width: 48px; height: 52px; border-radius: 10px; background: var(--gm-pc); color: var(--gm-on-pc); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.gm-invite-d small { color: inherit; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.gm-invite-d b { font-size: 20px; line-height: 1; }
.gm-btn-tonal { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--gm-pc); color: var(--gm-on-pc); font: 500 14px var(--gm-font); cursor: pointer; white-space: nowrap; }
.gm-btn-tonal .gi { width: 18px; height: 18px; }
.gm-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--gm-green); font: 500 13px var(--gm-font); white-space: nowrap; }
.gm-ok .gi { width: 18px; height: 18px; }
.gm-red { color: var(--gm-red) !important; }
.gm-remote { display: flex; align-items: center; gap: 10px; margin: 8px 24px; padding: 8px 8px 8px 12px; border-radius: 8px; background: var(--gm-cont); font-size: 13px; color: var(--gm-on2); }
.gm-remote .gi { width: 20px; height: 20px; }
.gm-remote button { border: 0; background: transparent; color: var(--gm-primary); font: 500 13px var(--gm-font); cursor: pointer; padding: 6px 10px; border-radius: 16px; }
.gm-frame { display: block; width: calc(100% - 48px); margin: 8px 24px; border: 0; background: transparent; min-height: 80px; }
.gm-frame.paper { background: #fff; border-radius: 12px; padding: 8px; width: calc(100% - 48px); box-sizing: border-box; }
.gm-replybar { display: flex; gap: 8px; padding: 12px 24px 16px; flex-wrap: wrap; flex: none; border-top: 1px solid var(--gm-div); background: var(--gm-surface); }
.gm-pill { height: 40px; padding: 0 20px 0 16px; border-radius: 20px; border: 1px solid var(--gm-outline); background: transparent; color: var(--gm-on2); font: 500 14px var(--gm-font); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gm-pill:hover { background: color-mix(in srgb, var(--gm-on) 6%, transparent); }
.gm-pill .gi { width: 20px; height: 20px; }

/* menü, bilgi şeridi */
.gm-pop { position: fixed; inset: 0; z-index: 2100; }
.gm-pop-box { position: fixed; min-width: 200px; max-height: min(70vh, 520px); overflow: auto; background: var(--gm-cont); border-radius: 8px; box-shadow: var(--gm-e3); padding: 8px 0; animation: gmpop .12s ease-out; color: var(--gm-on); }
@keyframes gmpop { from { opacity: 0; transform: scale(.96); } }
.gm-pop-i { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--gm-on); font: 400 14px var(--gm-font); text-align: left; cursor: pointer; }
.gm-pop-i .gi { width: 20px; height: 20px; color: var(--gm-on2); }
.gm-pop-i:hover:not(:disabled) { background: color-mix(in srgb, var(--gm-on) 8%, transparent); }
.gm-pop-i.on { font-weight: 700; color: var(--gm-primary); }
.gm-pop-i.on .gi { color: var(--gm-primary); }
.gm-pop-i .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pop-sp { width: 20px; flex: none; }
.gm-pop-n { font-size: 12px; color: var(--gm-on2); }
.gm-pop-head { padding: 8px 16px 6px; font: 500 12px var(--gm-font); color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pop-sep { height: 1px; background: var(--gm-ov); margin: 6px 0; }
.gm-snack { position: fixed; left: 24px; bottom: 24px; z-index: 2200; min-width: 288px; max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 16px; padding: 6px 8px 6px 16px; min-height: 48px; border-radius: 4px;
  background: var(--gm-inv); color: var(--gm-inv-on); font-size: 14px; box-shadow: var(--gm-e3); animation: gmsnack .2s cubic-bezier(.2,0,0,1); transition: opacity .25s, transform .25s; }
.gm-snack.out { opacity: 0; transform: translateY(8px); }
.gm-snack button { border: 0; background: transparent; color: var(--gm-inv-p); font: 500 14px var(--gm-font); padding: 10px 12px; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: .3px; }
@keyframes gmsnack { from { opacity: 0; transform: translateY(16px); } }

/* yazma penceresi */
.gm-c { position: fixed; right: 24px; bottom: 0; z-index: 1500; width: 560px; max-width: calc(100vw - 32px); height: min(600px, calc(100vh - 80px)); display: flex; flex-direction: column;
  background: var(--gm-surface); color: var(--gm-on); border-radius: 16px 16px 0 0; box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2); overflow: hidden; }
.gm-c[hidden] { display: none; }
.gm-c.min { height: 44px; width: 300px; }
.gm-c.min > :not(.gm-c-head) { display: none; }
.gm-c.max { inset: 5vh 8vw; width: auto; height: auto; max-width: none; border-radius: 16px; }
.gm-c.flash { animation: gmflash .6s; }
@keyframes gmflash { 30% { box-shadow: 0 0 0 4px var(--gm-primary); } }
.gm-c-head { display: flex; align-items: center; gap: 0; height: 44px; padding: 0 6px 0 16px; background: var(--gm-cont); font: 500 14px var(--gm-font); flex: none; }
.gm-c-head b { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-c-head .gm-ib { width: 32px; height: 32px; }
.gm-c-head .gm-ib .gi { width: 18px; height: 18px; }
.gm-c-x-m, .gm-c-send-m { display: none; }
.gm-c-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 16px; display: flex; flex-direction: column; }
.gm-c-scroll > * { flex-shrink: 0; }   /* çok alıcıda satırlar ezilip üst üste binmesin; alan kayar */
.gm-c-body pre { white-space: pre-wrap; font: inherit; margin: 0; }
.gm-c-row { display: flex; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--gm-div); }
.gm-c-row > label { font-size: 14px; color: var(--gm-on2); min-width: 44px; flex: none; }
.gm-c-from { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; font: 14px var(--gm-font); color: var(--gm-on); outline: none; }
.gm-c-in { flex: 1; min-width: 0; border: 0; background: transparent; font: 14px var(--gm-font); color: var(--gm-on); outline: none; height: 40px; padding: 0; box-shadow: none; }
.gm-c-cc { width: 32px; height: 32px; border: 0; background: transparent; color: var(--gm-on2); border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.gm-c-cc[hidden] { display: none; }
.gm-c-cc .gi { width: 20px; height: 20px; }
.gm-c-body { position: relative; flex: 1 0 auto; min-height: 200px; padding: 14px 0; outline: none; font: 14px/1.6 Arial, var(--gm-font); color: var(--gm-on); word-wrap: break-word; }
.gm-c-body.ph::before { content: attr(data-ph); position: absolute; top: 14px; left: 0; color: var(--gm-on3); pointer-events: none; }
.gm-c-body p, .gm-c-body div { margin: 0; }
.gm-quote { margin: 8px 0 0 4px; padding-left: 10px; border-left: 2px solid var(--gm-ov); color: var(--gm-on2); }
.gm-c-atts { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.gm-c-atts:empty { display: none; }
.gm-c-att { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 8px; background: var(--gm-cont); font-size: 13px; color: var(--gm-primary); }
.gm-c-att .gi { width: 18px; height: 18px; }
.gm-c-att small { color: var(--gm-on3); }
.gm-c-att button { border: 0; background: transparent; color: var(--gm-on2); cursor: pointer; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.gm-c-note { font-size: 12px; color: var(--gm-on3); padding-bottom: 8px; }
.gm-fmt { display: flex; gap: 2px; padding: 4px 12px; border-top: 1px solid var(--gm-div); flex: none; }
.gm-fmt[hidden] { display: none; }
.gm-fmt-b { min-width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--gm-on); font-size: 14px; cursor: pointer; }
.gm-fmt-b:hover { background: var(--gm-cont); }
.gm-c-foot { display: flex; align-items: center; gap: 4px; padding: 8px 12px 12px 16px; flex: none; }
.gm-c-foot .gm-ib.on { background: var(--gm-cont); }
.gm-c-send { height: 36px; padding: 0 26px; border-radius: 18px; border: 0; background: var(--gm-primary); color: var(--gm-on-primary); font: 500 14px var(--gm-font); letter-spacing: .25px; cursor: pointer; margin-right: 8px; }
.gm-c-send:hover { box-shadow: var(--gm-e1); }
.gm-c-send:disabled, .gm-c-send-m:disabled { opacity: .5; cursor: default; }
.gm-c.drop { outline: 3px dashed var(--gm-primary); outline-offset: -6px; }
.gm-chips-wrap { flex: 1; min-width: 0; position: relative; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 0; cursor: text; }
.gm-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 2px 0 2px; border-radius: 14px; background: var(--gm-high); color: var(--gm-on); font-size: 13px; }
.gm-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-chip.bad { background: #F9DEDC; color: #B3261E; }
.gm-chip button { border: 0; background: transparent; color: inherit; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.gm-chip button .gi { width: 14px; height: 14px; }
.gm-chip-av { width: 24px; height: 24px; border-radius: 50%; background: var(--gm-primary); color: var(--gm-on-primary); display: grid; place-items: center; font: 500 11px var(--gm-font); flex: none; }
.gm-chip-in { flex: 1; min-width: 120px; border: 0 !important; outline: none; background: transparent !important; font: 14px var(--gm-font); color: var(--gm-on); height: 30px; padding: 0; box-shadow: none !important; }
.gm-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--gm-surface); border-radius: 8px; box-shadow: var(--gm-e3); max-height: 280px; overflow: auto; padding: 6px 0; }
.gm-sug[hidden] { display: none; }
.gm-sug-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0; background: transparent; color: var(--gm-on); text-align: left; cursor: pointer; }
.gm-sug-i .gm-chip-av { width: 32px; height: 32px; font-size: 14px; }
.gm-sug-i.on, .gm-sug-i:hover { background: var(--gm-cont); }
.gm-sug-t { display: flex; flex-direction: column; min-width: 0; }
.gm-sug-t b { font-weight: 500; font-size: 14px; } .gm-sug-t small { font-size: 12px; color: var(--gm-on3); }

/* kişiyi firmaya atama */
.gm-assign { display: flex; flex-direction: column; gap: 6px; }
.gm-assign-who { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.gm-assign-who .gm-av { display: grid; cursor: default; }
.gm-assign-who div { display: flex; flex-direction: column; } .gm-assign-who small { color: var(--muted); }
.gm-colist { max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.gm-coitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.gm-coitem:last-child { border-bottom: 0; }
.gm-coitem small { color: var(--muted); }
.gm-coitem:hover { background: var(--surface-2); }
.gm-coitem.on { background: var(--primary-soft); font-weight: 600; }
.gm-cochosen { display: flex; align-items: center; gap: 6px; min-height: 28px; color: var(--primary); }
.gm-cochosen .gi { width: 18px; height: 18px; }

/* hesap yokken */
.gm-empty-acc { max-width: 520px; margin: 40px auto; padding: 0 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--gm-on2); }
.gm-empty-acc h2 { color: var(--gm-on); font: 400 24px var(--gm-font); }
.gm-empty-art { width: 112px; height: 112px; border-radius: 50%; background: var(--gm-pc); color: var(--gm-primary); display: grid; place-items: center; }
.gm-empty-art .gi { width: 56px; height: 56px; }
.gm-btn-fill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 24px 0 16px; border-radius: 20px; background: var(--gm-primary); color: var(--gm-on-primary); font: 500 14px var(--gm-font); text-decoration: none; }
.gm-btn-fill:hover { text-decoration: none; box-shadow: var(--gm-e1); }
.gm-btn-fill .gi { width: 20px; height: 20px; }

/* ---- telefon: Gmail uygulaması gibi tam ekran ---- */
@media (max-width: 760px) {
  body:has(main#view.gm-view) .app-footer { display: none; }
  .gm { display: block; height: 100%; }
  .gm-ib { width: 48px; height: 48px; }
  .gm-ib .gi { width: 24px; height: 24px; }
  .gm-only-m { display: flex; }
  .gm-ib.gm-only-m { display: inline-grid; }
  body:has(main#view.gm-view) .mascot:not([style*="top"]) { bottom: 88px; }   /* maskot "Oluştur" düğmesini örtmesin */
  .gm-menu-btn { display: inline-grid; }
  /* çekmece */
  .gm-nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, calc(100vw - 56px)); z-index: 970; background: var(--gm-low); border-radius: 0 16px 16px 0; padding: env(safe-area-inset-top) 0 8px;
    transform: translateX(-104%); transition: transform .28s cubic-bezier(.05,.7,.1,1); box-shadow: var(--gm-e3); }
  .gm.drawer .gm-nav { transform: none; }
  .gm-scrim { display: block; position: fixed; inset: 0; z-index: 965; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .gm.drawer .gm-scrim { opacity: 1; pointer-events: auto; }
  .gm-nav-brand { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; font: 400 22px var(--gm-font); color: var(--gm-on2); }
  .gm-nav-logo { color: var(--gm-red); }
  .gm-compose-btn { display: none; }
  .gm-nav-scroll { padding-right: 0; }
  .gm-nf { height: 56px; margin: 0 12px; width: calc(100% - 24px); padding: 0 24px 0 16px; border-radius: 28px; gap: 12px; font-weight: 500; color: var(--gm-on2); }
  .gm-nf .gi { width: 24px; height: 24px; }
  .gm-nf-n { font-size: 14px; font-weight: 500; }
  .gm-nf.on { font-weight: 700; }
  .gm-nav-acc-h { padding: 14px 28px 6px; font-size: 13px; }
  .gm-nav-sub, .gm-nav-note { padding-left: 28px; }
  .gm-nav-foot { margin: 8px 0 0; }
  /* liste */
  .gm-listpane { height: 100%; padding: 0; }
  .gm-bars { padding: 8px 16px; }
  .gm-bars.away { transform: translateY(-100%); }
  .gm-top { gap: 0; }
  .gm-search { padding-left: 0; gap: 4px; }
  .gm-search > .gi { display: none; }
  .gm-lhead { display: none; }
  .gm-label { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px 6px; font: 500 14px var(--gm-font); color: var(--gm-on2); }
  .gm-label small { font-size: 12px; font-weight: 400; color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-card { margin: 0 8px; border-radius: 24px 24px 0 0; min-height: calc(100% - 64px); }
  .gm-row, .gm-row.unread, .gm-row > .gm-row-in, .gm-row.unread > .gm-row-in { background: var(--gm-surface); border-bottom: 0; box-shadow: none; }
  .gm-row.sel > .gm-row-in { background: var(--gm-sel-m); }
  .gm-row:hover { box-shadow: none; }
  .gm-row-in { align-items: flex-start; height: auto; min-height: 88px; padding: 12px 8px 12px 12px; gap: 16px; }
  .gm-row .gm-cb, .gm-row-in > .gm-star, .gm-hover { display: none !important; }
  .gm-row .gm-av { display: grid; margin-top: 2px; }
  .gm-row.sel .gm-av { background: var(--gm-primary); transform: rotateY(180deg); transition: transform .2s; }
  .gm-row.sel .gm-av-l { display: none; }
  .gm-row.sel .gm-av-c { display: grid; transform: rotateY(180deg); color: var(--gm-on-primary); }
  .gm-row-main { display: flex; flex-direction: column; align-items: stretch; padding-left: 0; }
  .gm-l1 { display: flex; align-items: baseline; gap: 8px; line-height: 24px; }
  .gm-who { flex: 1; font-size: 16px; color: var(--gm-on2); }
  .gm-time { color: var(--gm-on2); padding-right: 8px; }
  .gm-l2 { line-height: 20px; color: var(--gm-on2); }
  .gm-l2 .gm-snip { display: none; }
  .gm-subj { flex: 0 1 auto; color: var(--gm-on2); }
  .gm-row.unread .gm-who, .gm-row.unread .gm-subj, .gm-row.unread .gm-time { color: var(--gm-on); }
  .gm-l3 { display: flex; align-items: center; gap: 8px; line-height: 20px; min-height: 20px; }
  .gm-l3 .gm-snip { flex: 1; min-width: 0; font-size: 14px; color: var(--gm-on2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-l3 .gm-star { width: 40px; height: 40px; margin: -10px -4px -10px 0; }
  .gm-co { max-width: 110px; }
  .gm-ptr { display: grid; position: absolute; left: 50%; top: 4px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--gm-surface); box-shadow: var(--gm-e3);
    place-items: center; color: var(--gm-primary); transform: translateY(-60px); z-index: 6; transition: transform .2s; pointer-events: none; }
  .gm-ptr.spin { transform: translateY(60px); }
  .gm-ptr.spin .gi { animation: gmspin .8s linear infinite; }
  .gm-fab { display: inline-flex; position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 6; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px; border-radius: 16px; border: 0;
    background: var(--gm-compose); color: var(--gm-on-compose); font: 600 16px var(--gm-font); box-shadow: var(--gm-e3); cursor: pointer; transition: padding .2s, width .2s; overflow: hidden; }
  .gm-fab.mini { padding: 0 16px; }
  .gm-fab.mini span { display: none; }
  .gm.selecting .gm-fab, .gm.reading .gm-fab { display: none; }
  /* okuma: tam ekran */
  .gm-read { display: flex; position: fixed; inset: 0; z-index: 960; margin: 0; border-radius: 0; background: var(--gm-surface); padding-top: env(safe-area-inset-top);
    transform: translateX(8%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.05,.7,.1,1), opacity .2s; }
  .gm.reading .gm-read { transform: none; opacity: 1; pointer-events: auto; }
  html[data-theme="dark"] .gm-read { background: var(--gm-shell); }
  .gm-rbar { height: 56px; padding: 0 4px; border-bottom: 0; }
  .gm-subj-row { padding: 6px 4px 8px 20px; }
  .gm-info, .gm-invite, .gm-remote { margin-left: 16px; margin-right: 16px; }
  .gm-from { padding: 10px 4px 6px 16px; grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .gm-from-l1 b { font: 500 16px var(--gm-font); flex: 0 1 auto; min-width: 4em; }
  .gm-from-l1 .gm-co { flex: 0 100 auto; min-width: 0; }
  .gm-from-em { display: none; }
  .gm-to { font-size: 14px; }
  .gm-frame, .gm-frame.paper { width: calc(100% - 32px); margin: 8px 16px; }
  html[data-theme="dark"] .gm-replybar { background: var(--gm-shell); }
  .gm-replybar { position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); flex-wrap: nowrap; border-top: 0; }
  .gm-pill { flex: 1; justify-content: center; height: 48px; border-radius: 24px; border: 0; background: var(--gm-pc); color: var(--gm-on-pc); padding: 0 10px; min-width: 0; }
  .gm-pill:hover { background: var(--gm-pc); }
  .gm-abtn { max-width: 100%; flex: 1 1 100%; }
  .gm-pbtn { max-width: 100%; }
  /* menü: alttan açılan sayfa */
  .gm-pop { background: rgba(0,0,0,.32); }
  .gm-pop-box { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 75vh; border-radius: 28px 28px 0 0; padding: 22px 0 calc(12px + env(safe-area-inset-bottom)); animation: gmsheet .22s cubic-bezier(.05,.7,.1,1); }
  .gm-pop-box::before { content: ''; position: absolute; top: 8px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--gm-ov); }
  .gm-pop-i { min-height: 52px; font-size: 16px; padding: 0 24px; gap: 18px; }
  .gm-pop-i .gi { width: 24px; height: 24px; }
  .gm-pop-head { padding: 4px 24px 8px; }
  @keyframes gmsheet { from { transform: translateY(100%); } }
  .gm-snack { left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom)); min-width: 0; max-width: none; border-radius: 8px; }
  /* yazma: tam ekran */
  .gm-c, .gm-c.max { inset: 0; width: auto; max-width: none; height: var(--vvh, 100dvh); border-radius: 0; box-shadow: none; z-index: 2050; padding-top: env(safe-area-inset-top); }
  .gm-c-head { height: 56px; padding: 0 4px; background: var(--gm-surface); font: 400 20px var(--gm-font); gap: 0; }
  .gm-c-head b { padding-left: 4px; }
  .gm-c-head .gm-ib { width: 48px; height: 48px; }
  .gm-c-head .gm-ib .gi { width: 24px; height: 24px; }
  .gm-c-x-m { display: inline-grid; }
  .gm-c-send-m { display: inline-grid; color: var(--gm-primary); }
  .gm-only-d, .gm-c-foot, .gm-fmt { display: none !important; }
  .gm-c-scroll { padding: 0 16px; }
  .gm-c-row { min-height: 56px; }
  .gm-c-row > label { font-size: 16px; min-width: 56px; }
  .gm-c-from, .gm-c-in, .gm-chip-in { font-size: 16px; }
  .gm-c-body { font-size: 16px; min-height: 40vh; }
  .gm-c-body.ph::before { font-size: 16px; }
}
.gm-co-sup { font: 500 11px var(--gm-font); color: var(--gm-on-pc); background: var(--gm-pc); border-radius: 4px; padding: 1px 6px; margin-right: 6px; }

/* Yeni mail › Rehberden kişi ekle / Evraklardan ekle */
.gm-pick { display: flex; flex-direction: column; gap: 10px; }
.gm-pick-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gm-pick-top > .input { flex: 1; min-width: 200px; }
.gm-pick-cosel { max-width: 260px; }
.gm-pick-info { display: flex; gap: 10px; align-items: center; }
.gm-pick-info b { color: var(--primary); white-space: nowrap; }
.gm-pick-list { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.gm-pick-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface);
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.gm-pick-row:last-child { border-bottom: 0; }
.gm-pick-row:hover { background: var(--surface-2); }
.gm-pick-row.on { background: var(--primary-soft); }
.gm-pick-row .gm-chip-av { width: 32px; height: 32px; font-size: 14px; flex: none; }
.gm-pick-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); flex: none; }
.gm-pick-ic svg { width: 18px; height: 18px; fill: currentColor; }
.gm-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-pick-t b, .gm-pick-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pick-t small { color: var(--muted); }
.gm-pick-co { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.gm-pick-co.us { background: #e7f6ec; color: #137333; }
.gm-pick-co.none { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.gm-pick-ok { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; }
.gm-pick-ok svg { width: 14px; height: 14px; fill: currentColor; }
.gm-pick-row.on .gm-pick-ok { background: var(--primary); border-color: var(--primary); color: #fff; }
.gm-pick-empty { padding: 18px; text-align: center; }
.gm-c-att.doc svg:first-child { fill: var(--primary); }
@media (max-width: 640px) { .gm-pick-co { max-width: 34%; } }

/* ===== Mail: Kişiler / Cariler görünümü ===== */
.gm-ppl, .gm-pickhead { display: none; }
.gm-modes { display: flex; gap: 2px; margin: 4px 12px 10px; padding: 3px; border-radius: 14px; background: color-mix(in srgb, var(--gm-on) 6%, transparent); }
.gm-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 11px; background: transparent;
  color: var(--gm-on2); font: 500 13px var(--gm-font); cursor: pointer; min-width: 0; padding: 0 6px; }
.gm-mode .gi { width: 18px; height: 18px; flex: none; }
.gm-mode span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mode.on { background: var(--gm-surface); color: var(--gm-on); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.gm.mode-p .gm-nav { display: none; }
.gm.mode-p .gm-ppl { display: flex; flex-direction: column; min-height: 0; padding: 8px 0 0; background: var(--gm-shell); }
.gm.mode-p .gm-top, .gm.mode-p .gm-lhead, .gm.mode-p .gm-sync, .gm.mode-p .gm-selbar, .gm.mode-p .gm-label { display: none; }
.gm.mode-p .gm-pickhead { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 16px; margin-top: 8px;
  background: var(--gm-surface); border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--gm-div); }
.gm.mode-p .gm-card { border-radius: 0 0 16px 16px; }
.gm-pick-back { display: none; }
.gm-pick-ti { display: flex; flex-direction: column; min-width: 0; }
.gm-pick-ti b { font: 500 16px var(--gm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pick-ti small { color: var(--gm-on3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ppl-h { flex: none; }
.gm-ppl-s { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 0 12px; height: 40px; border-radius: 20px; background: var(--gm-search); color: var(--gm-on2); }
.gm-ppl-s .gi { width: 18px; height: 18px; flex: none; }
.gm-ppl-q { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 14px var(--gm-font); color: var(--gm-on); box-shadow: none; height: 38px; padding: 0; }
.gm-ppl-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 16px; }
.gm-pr-h { display: flex; align-items: baseline; gap: 6px; padding: 14px 10px 6px; font: 600 11px var(--gm-font); text-transform: uppercase; letter-spacing: .06em; color: var(--gm-on3);
  position: sticky; top: 0; background: var(--gm-shell); z-index: 1; }
.gm-pr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--gm-on); text-align: left; cursor: pointer; font: inherit; }
.gm-pr:hover { background: color-mix(in srgb, var(--gm-on) 6%, transparent); }
.gm-pr.on { background: var(--gm-sel, #d3e3fd); }
.gm-pr.unk { opacity: .85; }
.gm-av.gm-av-s { width: 36px; height: 36px; font-size: 15px; cursor: inherit; }
.gm-pr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-pr-t b { font: 500 14px var(--gm-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pr-t small { font-size: 12px; color: var(--gm-on3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.gm-pr-r small { font-size: 11px; color: var(--gm-on3); }
.gm-pr-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--gm-primary, #0b57d0) 14%, transparent); color: var(--gm-primary, #0b57d0);
  font: 600 11px/18px var(--gm-font); text-align: center; }
.gm-pr-empty { padding: 10px 14px; font-size: 13px; color: var(--gm-on3); }
.gm-grp + .gm-grp { margin-top: 0; }
.gm.mode-p .gm-row .gm-cb { visibility: hidden; width: 0; margin: 0; }   /* farklı klasörlerden mailler: toplu seçim yok, tek tek işlem */
@media (min-width: 761px) {
  .gm.mode-p { grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .gm.mode-p .gm-ppl { grid-column: 1; grid-row: 1 / -1; }
  .gm.mode-p .gm-listpane { grid-column: 2; grid-row: 1; display: flex; }
  /* maili seçince altta: liste üstte, okuma altta */
  .gm.mode-p.reading { grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 60%); }
  .gm.mode-p.reading .gm-listpane { display: flex; padding-bottom: 8px; }
  .gm.mode-p.reading .gm-read { grid-column: 2; grid-row: 2; margin: 0 16px 16px 0; }
  .gm.mode-p.reading .gm-row-main { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; grid-template-rows: auto; }
  .gm.mode-p.reading .gm-who { grid-column: 1; } .gm.mode-p.reading .gm-time { grid-column: 3; } .gm.mode-p.reading .gm-l2 { grid-column: 2; grid-row: 1; }
  .gm.mode-p.reading .gm-row-in { height: 40px; }
}
@media (max-width: 760px) {
  .gm.mode-p .gm-ppl { height: 100%; padding-top: 4px; background: var(--gm-surface); }
  .gm.mode-p .gm-listpane { display: none; }
  .gm.mode-p.picked .gm-ppl { display: none; }
  .gm.mode-p.picked .gm-listpane { display: flex; }
  .gm.mode-p .gm-pickhead { margin-top: 0; border-radius: 0; padding-left: 4px; position: sticky; top: 0; z-index: 2; }
  .gm.mode-p .gm-pick-back { display: inline-grid; }
  .gm.mode-p .gm-pickhead .gm-count { display: none; }
  .gm.mode-p .gm-fab { display: none; }
  .gm-pr { padding: 10px 12px; }
  .gm-av.gm-av-s { width: 40px; height: 40px; }
}

/* SSH Erişim (Veri & Yedek › sistem sahibi) */
.ssh-note { max-width: 760px; }
.ssh-list { display: flex; flex-direction: column; gap: 10px; }
.ssh-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ssh-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ssh-main b { font-size: 15px; }
.ssh-acts { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
@media (max-width: 640px) { .ssh-row { flex-direction: column; align-items: stretch; } .ssh-acts { justify-content: flex-end; } }

/* Bildirim satırları: kimden üstte, konu altta; her satır taşarsa … ile kesilir (alta inmez) */
.ntf-names { min-width: 0; }
.ntf-item { margin-top: 2px; min-width: 0; }
.ntf-from, .ntf-sub, .ntf-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ntf-from { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ntf-sub { font-size: 12px; color: var(--muted); }
.ntf-line { font-size: 12px; color: var(--muted); }

/* Pano "Kutucuk Ekle": konuya göre gruplu, açılır/kapanır seçici */
.db-pick-groups { display: flex; flex-direction: column; gap: 8px; }
.db-pick-grp { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.db-pick-grp-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: var(--surface-2); cursor: pointer; font: inherit; font-weight: 700; color: var(--text); }
.db-pick-grp-h:hover { background: var(--surface-3, var(--surface-2)); }
.db-pick-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; min-width: 22px; padding: 1px 7px; text-align: center; }
.db-pick-caret { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-left: 2px; }
.db-pick-grp.closed .db-pick-caret { transform: rotate(-45deg); }
.db-pick-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .18s ease; }
.db-pick-grp.closed .db-pick-body { grid-template-rows: 0fr; }
.db-pick-body > .db-pick { overflow: hidden; min-height: 0; padding: 10px; }
.db-pick-grp.closed .db-pick-body > .db-pick { padding-top: 0; padding-bottom: 0; }

/* Pano: E-posta kutusu */
.db-mailhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.db-maillist li a { display: flex; flex-direction: column; gap: 1px; }
.db-mail-from { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-mail-subj { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pano: Dünya Saati kutusu */
.db-wc { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.db-wc-cell { flex: 1 1 110px; min-width: 100px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; text-align: center; background: var(--surface-2); }
.db-wc-name { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-wc-time { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.2; }
.db-wc-sub { display: block; font-size: 11.5px; color: var(--muted); }
.db-wc-edit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.db-wc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }

/* Pano: avatar + Mesajlarım + Toplantılarım */
.db-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.db-av.ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 13px; }
.db-msglist li a, .db-meetlist li a { display: flex; align-items: center; gap: 10px; }
.db-msg-main, .db-meet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-msg-main b, .db-meet-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-msg-prev { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-meet-main small { color: var(--muted); font-size: 12px; }
.db-msglist li.unread b { font-weight: 800; }

/* Pano: Hızlı Rehber */
.db-qdlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-qd-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.db-qd-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-qd-acts { display: flex; gap: 4px; flex: none; }
.db-qd-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--primary); border: 0; background: transparent; cursor: pointer; }
.db-qd-ic:hover { background: var(--primary-soft); }
.db-qd-ic svg { width: 18px; height: 18px; }

/* ===== Kişisel Notlar (yapışkan not) — modül, pano kutusu ve ekrana iğnelenen notlar ===== */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.note-card { --nc: #fff7b0; --ncb: #e9d94e; background: var(--nc); border: 1px solid var(--ncb); border-radius: 10px; padding: 8px 10px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1); display: flex; flex-direction: column; min-height: 120px; color: #3a3410; transition: transform .12s, box-shadow .12s; }
.note-card.yellow { --nc: #fff7b0; --ncb: #e9d94e; }
.note-card.green  { --nc: #c9f7cf; --ncb: #7fd98c; color: #163f20; }
.note-card.blue   { --nc: #cfe6ff; --ncb: #7fb6f0; color: #123055; }
.note-card.pink   { --nc: #ffd6e7; --ncb: #f090b6; color: #5a1136; }
.note-card.orange { --nc: #ffe0b8; --ncb: #f0b060; color: #5a3410; }
.note-card.purple { --nc: #e6d6ff; --ncb: #b690f0; color: #361055; }
.note-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; opacity: .55; transition: opacity .12s; }
.note-card:hover .note-bar { opacity: 1; }
.note-bar button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; color: inherit; }
.note-bar button:hover { background: rgba(0,0,0,.08); }
.note-del { font-size: 20px !important; }
.note-color { width: 16px; height: 16px; border-radius: 50%; background: var(--ncb) !important; border: 1px solid rgba(0,0,0,.2) !important; padding: 0 !important; }
.note-pin.on { filter: none; }
.note-txt { flex: 1; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; outline: none; min-height: 48px; }
.note-txt:empty::before { content: attr(data-ph); color: rgba(0,0,0,.35); }
.note-colors { position: absolute; margin-top: 24px; display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; box-shadow: var(--shadow-lg); z-index: 5; }
.note-sw { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); cursor: pointer; }
.note-sw.yellow { background: #fff7b0; } .note-sw.green { background: #c9f7cf; } .note-sw.blue { background: #cfe6ff; }
.note-sw.pink { background: #ffd6e7; } .note-sw.orange { background: #ffe0b8; } .note-sw.purple { background: #e6d6ff; }
/* pano kutusu */
.db-note-add { align-self: flex-start; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; margin-bottom: 8px; font: inherit; }
.db-note-add:hover { border-color: var(--primary); color: var(--primary); }
.db-note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-content: start; }
.db-note-grid .note-card { min-height: 90px; font-size: 13px; }
.db-note-grid .note-card:hover { transform: scale(1.04); box-shadow: 0 8px 22px rgba(0,0,0,.18); z-index: 3; position: relative; }
/* ekrana iğnelenen notlar (global) */
.note-pins { position: fixed; inset: 0; pointer-events: none; z-index: 1200; }
.note-pinned { position: fixed; width: 210px; max-height: 240px; overflow: auto; pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.note-pinned.dragging { opacity: .9; }
.note-drag { cursor: grab; touch-action: none; }
.note-pinned.dragging .note-drag { cursor: grabbing; }
.note-handle { opacity: .5; font-size: 14px; }

/* Pano: Alarm kutusu */
.db-alarmlist li { display: flex; align-items: center; gap: 8px; }
.db-alarmlist li.off { opacity: .55; }
.alarm-toggle { border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--primary); flex: none; }
.alarm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.alarm-main b { font-size: 18px; font-variant-numeric: tabular-nums; }
.alarm-del { border: 0; background: transparent; cursor: pointer; font-size: 20px; color: var(--muted); flex: none; }
.alarm-del:hover { color: var(--danger, #dc2626); }
.alarm-days { display: flex; gap: 6px; flex-wrap: wrap; }
.alarm-day { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); }
.alarm-day.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Pano: Kullanıcılar kutusu + inline (mini) sohbet */
.db-users { display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.db-user { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.db-user .db-av.lg { width: 48px; height: 48px; font-size: 17px; }
.db-user-n { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-user:hover .db-user-n { color: var(--text); }
.mini-chat { position: fixed; right: 20px; bottom: 20px; width: 320px; max-width: calc(100vw - 24px); height: 420px; max-height: calc(100vh - 100px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 2200; overflow: hidden; }
.mc-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mc-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-head button { border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.mc-head button:hover { background: rgba(127,127,127,.12); color: var(--text); }
.mc-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg, var(--surface-2)); }
.mc-msg { max-width: 80%; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 6px 10px; font-size: 13.5px; word-break: break-word; }
.mc-msg.me { align-self: flex-end; background: var(--primary-soft); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.mc-foot { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.mc-inp { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 18px; padding: 8px 12px; font: inherit; font-size: 13.5px; max-height: 90px; background: var(--surface); color: var(--text); outline: none; }
.mc-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.mc-send svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 640px) { .mini-chat { right: 8px; left: 8px; width: auto; bottom: 8px; } }

/* Yazıcı BAKIM durumu: vurgulu turuncu badge + satır vurgusu */
.badge.orange { background: #fff0db; color: #b45309; }
html[data-theme="dark"] .badge.orange { background: #3a2a12; color: #f0b060; }
tr.pr-maint { background: color-mix(in srgb, #f59e0b 12%, transparent); }
tr.pr-maint:hover { background: color-mix(in srgb, #f59e0b 18%, transparent); }
tr.pr-maint td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.rack-dot.s-bakim { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.3); }
/* Ar-Ge modu (camgöbeği) — bakım gibi; hata/arıza sayılmaz */
tr.pr-arge { background: color-mix(in srgb, #14b8a6 12%, transparent); }
tr.pr-arge:hover { background: color-mix(in srgb, #14b8a6 18%, transparent); }
tr.pr-arge td:first-child { box-shadow: inset 4px 0 0 #14b8a6; }
.rack-dot.s-arge { background: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.3); }
.badge.teal { background: #d7f5f0; border-color: #a7e8df; color: #0f766e; }
html[data-theme="dark"] .badge.teal { background: #103b37; border-color: #1c5c54; color: #5eead4; }

/* Pano Takvimim: Liste/Gün/Hafta */
.db-cal-tabs { margin-bottom: 8px; }
.db-cal-tabs .seg { font-size: 12px; }
.db-cal-time { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: 8px; font-size: 12.5px; }
.db-cal-week { display: flex; flex-direction: column; gap: 6px; }
.db-cal-wd { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.db-cal-wd.today { border-color: var(--primary); background: var(--primary-soft); }
.db-cal-wd-h { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 2px; }
.db-cal-empty { color: var(--faint); font-size: 12px; }

/* Bildirimde e-posta: satır + Okundu/Sil düğmeleri */
.ntf-mail { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.ntf-mail-t { flex: 1; min-width: 0; display: block; }
.ntf-mail-acts { display: flex; gap: 2px; flex: none; }
.ntf-mb { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.ntf-mb:hover { background: var(--primary-soft); color: var(--primary); }
.ntf-mb.del:hover { background: #fde8e8; color: #dc2626; }
.ntf-mb svg { width: 17px; height: 17px; }

/* ===== Dosya Yöneticisi (Kişisel › Dosya Yöneticisi) ===== */
/* Windows Explorer düzeni: iki pano birlikte tüm yüksekliği kaplar, her biri kendi içinde kayar */
.fm-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 0; align-items: stretch; height: calc(100vh - 160px); min-height: 360px;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--surface); }
.fm-side { background: var(--surface-2, rgba(127,127,127,.04)); border-right: 1px solid var(--border); padding: 10px; overflow-y: auto; }
.fm-headtools { display: flex; align-items: center; gap: 8px; }
.fm-side-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 6px 6px; }
.fm-shared-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 9px 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.fm-shared-btn:hover { border-color: var(--primary); color: var(--primary); }
.fm-shared-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.fm-shared-btn svg { width: 18px; height: 18px; flex: none; }

/* Klasör ağacı */
.fm-tree { display: flex; flex-direction: column; gap: 1px; }
.fm-tbranch { display: flex; flex-direction: column; }
.fm-tnode { display: flex; align-items: center; gap: 4px; padding: 6px 6px; border-radius: 7px; cursor: pointer; color: var(--text); font-size: 14px; user-select: none; }
.fm-tnode:hover { background: var(--surface-2); }
.fm-tnode.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.fm-chev { border: 0; background: none; cursor: pointer; width: 16px; height: 16px; flex: none; color: var(--muted); font-size: 11px; display: grid; place-items: center; transition: transform .12s; }
.fm-chev.open { transform: rotate(90deg); }
.fm-chev.none { visibility: hidden; cursor: default; }
.fm-tico { width: 18px; height: 18px; flex: none; color: #f4c24a; display: grid; place-items: center; }
.fm-tico svg { width: 18px; height: 18px; }
.fm-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ana bölme */
.fm-main { min-width: 0; overflow-y: auto; padding: 14px 16px; }
.fm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.fm-crumb { color: var(--muted); text-decoration: none; padding: 3px 6px; border-radius: 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-crumb:hover { background: var(--surface-2); color: var(--text); }
.fm-crumb.on { color: var(--text); font-weight: 700; }
.fm-sep { color: var(--muted); }
.fm-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

/* İçerik ızgarası */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fm-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 48px 16px; }
.fm-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, box-shadow .12s; outline: none; }
.fm-item:hover, .fm-item:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); }
.fm-item-ico { width: 48px; height: 48px; display: grid; place-items: center; color: var(--muted); }
.fm-item.folder .fm-item-ico { color: #f4c24a; }
.fm-item-ico svg { width: 44px; height: 44px; }
.fm-item-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
/* Dosya türü renkleri (dolu belge rozetleri) */
.fm-item.k-excel .fm-item-ico { color: #1d6f42; }
.fm-item.k-word .fm-item-ico { color: #2b579a; }
.fm-item.k-ppt .fm-item-ico { color: #c43e1c; }
.fm-item.k-pdf .fm-item-ico { color: #c4302b; }
.fm-item.k-archive .fm-item-ico { color: #b7791f; }
.fm-item.k-audio .fm-item-ico { color: #8b5cf6; }
.fm-item.k-video .fm-item-ico { color: #0ea5e9; }
.fm-item-name { font-size: 13px; font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-item-meta { font-size: 12px; color: var(--muted); }
.fm-item-sub { font-size: 11px; color: var(--muted); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-item .fm-perm { margin-top: 4px; }
.fm-badge { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 4; transition: filter .12s, transform .12s; }
.fm-badge:hover { filter: brightness(1.08); transform: scale(1.1); }
.fm-badge svg { width: 13px; height: 13px; }

/* Öğe eylem menüsü */
.fm-menu { position: absolute; top: 6px; right: 6px; }
.fm-menu-btn { width: 28px; height: 28px; font-size: 18px; line-height: 1; opacity: 0; transition: opacity .12s; }
.fm-item:hover .fm-menu-btn, .fm-item:focus-within .fm-menu-btn { opacity: 1; }
.fm-menu-pop { position: absolute; top: 30px; right: 0; min-width: 160px; z-index: 30; padding: 4px; display: flex; flex-direction: column; text-align: left; }
.fm-menu-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); }
.fm-menu-pop button:hover { background: var(--surface-2); }

/* Taşıma penceresi ağacı */
.fm-move-tree { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-top: 6px; }
.fm-move-node { display: flex; align-items: center; gap: 6px; padding: 7px 6px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.fm-move-node:hover { background: var(--surface-2); }
.fm-move-node.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.fm-move-node.disabled { opacity: .4; cursor: not-allowed; }
.fm-move-node .fm-tico { color: var(--primary); }

/* Paylaşım penceresi */
.fm-share { display: flex; flex-direction: column; gap: 12px; }
.fm-share-list { max-height: 34vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.fm-share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.fm-share-row:hover { background: var(--surface-2); }
.fm-share-cur { border-top: 1px solid var(--border); padding-top: 10px; }
.fm-share-cur-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.fm-share-cur-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.fm-share-cur-row .x-btn.sm { font-size: 18px; padding: 2px 6px; }

/* Dış (herkese açık) paylaşım bağlantısı */
.fm-ext { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fm-ext-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.fm-ext-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fm-ext-form .input { flex: 1 1 180px; }
.fm-ext-form select.input { flex: 0 0 auto; }
.fm-ext-list { display: flex; flex-direction: column; gap: 6px; }
.fm-ext-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.fm-ext-url { font-size: 13px; word-break: break-all; font-weight: 600; }
.fm-ext-row .x-btn.sm { font-size: 18px; padding: 2px 6px; }

/* Dosya önizleme penceresi */
.fm-prev { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fm-prev-img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }
.fm-prev-pdf { width: 100%; height: 70vh; border: 0; border-radius: 8px; background: var(--surface-2); }
.fm-prev-media { max-width: 100%; max-height: 70vh; border-radius: 8px; background: #000; }
.fm-prev-audio { width: 100%; }
.fm-prev-msg { text-align: center; color: var(--muted); padding: 40px 16px; }
/* Excel/CSV önizleme */
.fm-xl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; width: 100%; }
.fm-xl-tab { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 7px 7px 0 0; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.fm-xl-tab:hover { color: var(--text); }
.fm-xl-tab.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.fm-xl { overflow: auto; max-height: 70vh; width: 100%; border: 1px solid var(--border); border-radius: 8px; }
.fm-xl table { border-collapse: collapse; font-size: 13px; }
.fm-xl th, .fm-xl td { border: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; text-align: left; }
.fm-xl th, .fm-xl tr:first-child td { background: var(--surface-2); font-weight: 600; position: sticky; top: 0; }

/* Çoklu (paralel) yükleme paneli */
.fm-up { display: flex; flex-direction: column; gap: 12px; }
.fm-up-ctl { display: flex; flex-wrap: wrap; gap: 14px; }
.fm-up-ctl-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fm-up-ctl-f .input { font-weight: 600; }
.fm-up-conc { width: 72px; }
.fm-up-speed { width: 130px; }
.fm-up-hint { margin: -4px 0 0; }
.fm-up-overall { display: flex; align-items: center; gap: 10px; }
.fm-up-obar { flex: 1 1 auto; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fm-up-obar-in { height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .2s ease; }
.fm-up-otxt { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.fm-up-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.fm-up-row { display: flex; align-items: center; gap: 10px; }
.fm-up-name { flex: 1 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fm-up-bar { flex: 1 1 40%; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fm-up-bar-in { height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .2s ease; }
.fm-up-pct { flex: 0 0 auto; width: 48px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.fm-up-row.ok .fm-up-bar-in { background: var(--ok, #16a34a); }
.fm-up-row.ok .fm-up-pct { color: var(--ok, #16a34a); }
.fm-up-row.err .fm-up-bar-in { background: var(--danger, #dc2626); }
.fm-up-row.err .fm-up-pct { color: var(--danger, #dc2626); }
.fm-up-row.canceled { opacity: .55; }

/* Pano kutucuğu bağlantısı */
.db-n-link { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; text-decoration: none; }
.db-n-link svg { width: 13px; height: 13px; }

/* Dar ekran: kenar çubuğu ana bölmenin üstüne geçer */
@media (max-width: 760px) {
  .fm-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 150px); }
  .fm-side { border-right: 0; border-bottom: 1px solid var(--border); max-height: 200px; }
}

.u-unlock { cursor: pointer; }
.u-unlock:hover { filter: brightness(1.08); }

/* ---------- QR + Çıkış kontrol (Görev Formu / İzin / Güvenlik tarayıcı) ---------- */
.badge.muted { color: var(--faint); opacity: .8; }

/* QR kutusu: beyaz zemin (okunabilirlik), ortalanmış */
.qr-box { display: flex; justify-content: center; align-items: center; background: #fff; padding: 12px;
  border-radius: 12px; border: 1px solid var(--border); margin: 0 auto 10px; width: max-content; max-width: 100%; }
.qr-box .qr-svg, .qr-box svg { display: block; width: 220px; height: 220px; max-width: 60vw; max-height: 60vw; }
.qr-svg svg { display: block; width: 100%; height: 100%; }

/* Görev Formu kartları */
.duty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.duty-card { padding: 14px; display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--border); }
.duty-card.st-bekliyor { border-color: var(--warning); }
.duty-card.st-onaylandi { border-color: var(--success); }
.duty-card.st-reddedildi, .duty-card.st-iptal { opacity: .78; }
.duty-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.duty-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.duty-kv dt { color: var(--muted); }
.duty-kv dd { margin: 0; }
.duty-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.duty-actions:empty { display: none; }

/* Aranabilir tekli seçim */
/* Form içi aranabilir tekli seçim (duty.js searchSelect). Not: '.ss' ekran koruyucuda kullanıldığı için 'fsel' adı seçildi. */
.fsel { position: relative; }
.fsel-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 260px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); }
.fsel-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; cursor: pointer; }
.fsel-row:hover { background: var(--primary-soft); }
.fsel-row.muted { color: var(--muted); cursor: default; }
.fsel-row.muted:hover { background: none; }

/* Güvenlik › Çıkış Kontrol tarayıcı */
.sec-scan-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; }
.sec-cam { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-strong); }
.sec-cam.off { background: var(--surface-2); }
.sec-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-cam.off .sec-video { display: none; }
.sec-reticle { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 58%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.9); border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); pointer-events: none; }
.sec-cam.off .sec-reticle { display: none; }
.sec-scan-tools { display: flex; justify-content: center; gap: 8px; }
.sec-scan-manual { display: flex; gap: 8px; }
.sec-scan-manual .input { flex: 1; min-width: 0; }

.sec-scan { border-radius: 14px; padding: 22px 18px; text-align: center; border: 2px dashed var(--border-strong);
  color: var(--muted); font-weight: 600; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.sec-scan-idle { color: var(--muted); }
.sec-scan-ok { background: var(--success); border: 2px solid var(--success); color: #fff; }
.sec-scan-bad { background: var(--danger); border: 2px solid var(--danger); color: #fff; }
.sec-scan-big { font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.sec-scan-name { font-size: 20px; font-weight: 700; }
.sec-scan-sub { font-size: 14px; opacity: .95; }
.sec-scan-tag { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.sec-scan-dates { font-size: 15px; font-weight: 600; }
.sec-scan-note { font-size: 13px; font-weight: 500; opacity: .95; margin-top: 4px; }

.sec-plist { margin-bottom: 14px; }
.sec-plist h3 { margin: 0 0 8px; font-size: 14px; }
.sec-plist-ul { list-style: none; margin: 0; padding: 0; }
.sec-plist-ul li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.sec-plist-ul li:last-child { border-bottom: 0; }
/* Güvenlik "Görevde" kartları: araç/görev grubu — başta plaka, altında personel, "Giriş Yaptı" düğmesi */
.sec-duty-list { display: flex; flex-direction: column; gap: 10px; }
.sec-duty-card { padding: 10px 12px; }
.sec-duty-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sec-duty-people { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

/* Görevdeki / İzindeki personel pano kartı: avatar + isim/plaka + ileri sayan sayaç */
.db-plist { list-style: none; margin: 0; padding: 0; }
.db-prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.db-prow:last-child { border-bottom: 0; }
.db-prow .db-av { width: 40px; height: 40px; border-radius: 50%; flex: none; font-size: 15px; }
.db-prow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-prow-main > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-prow-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-plate { display: inline-block; font-weight: 700; font-family: ui-monospace, monospace; letter-spacing: .5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; font-size: 12px; }
/* Dijital (LED) sayaç — koyu şerit üzerinde parlayan monospace rakamlar, canlı nabız efekti */
.db-duty-digital { flex: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: #16d05a; background: #07140d;
  padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(22, 208, 90, .25), inset 0 1px 6px rgba(0, 0, 0, .6);
  text-shadow: 0 0 6px rgba(22, 208, 90, .75), 0 0 2px rgba(22, 208, 90, .9); animation: dutyLed 2.4s ease-in-out infinite; }
@keyframes dutyLed { 0%, 100% { text-shadow: 0 0 6px rgba(22, 208, 90, .75), 0 0 2px rgba(22, 208, 90, .9); }
  50% { text-shadow: 0 0 10px rgba(22, 208, 90, .95), 0 0 3px rgba(22, 208, 90, 1); } }

/* Avatar çerçevesinde kişi durumu (Hızlı Rehber + Mesajlarım): yeşil=çevrimiçi, turuncu=görevde, mavi=izinde, gri=çevrimdışı.
   Halka doğrudan kare .db-av (34×34) üzerine konur ki tam daire olsun; sarmalayıcı esnek satırda dikeyde esnemesin. */
.db-avwrap { display: inline-flex; align-self: center; flex: none; border-radius: 50%; line-height: 0; }
/* Halka, avatarın İÇİNE sığan border olarak çizilir (box-sizing: border-box) — satır kısa olsa / kutu kayarken
   bile taşmaz, kırpılmaz, her zaman tam daire. Renk = durum. */
.db-avwrap .db-av { box-sizing: border-box; border: 3px solid transparent; }
.db-avwrap.st-online .db-av { border-color: #22c55e; }
.db-avwrap.st-duty   .db-av { border-color: #f59e0b; }
.db-avwrap.st-leave  .db-av { border-color: #3b82f6; }
.db-avwrap.st-off    .db-av { border-color: #cbd5e1; }

/* Görevdeki Personel: her görev TEK SATIR — en solda araç plakası, en sağda dijital ileri sayaç.
   Satıra tıklayınca altında personel(ler) açılır. Satır (header) = üst-header tint'i, açılan içi beyaz/kart zemini. */
.db-duty-rows { display: flex; flex-direction: column; gap: 8px; }
.db-duty-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card, #fff); }
.db-duty-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
  border: 0; text-align: left; background: var(--surface-2, rgba(127, 127, 127, .07)); color: var(--text); }
.db-duty-row:hover { background: rgba(127, 127, 127, .14); }
.db-duty-plate { font-weight: 700; font-family: ui-monospace, monospace; letter-spacing: .5px; font-size: 13px; color: var(--text);
  background: var(--card, #fff); border: 1px solid var(--border); border-radius: 5px; padding: 1px 8px; }
.db-duty-plate.noveh { font-family: system-ui, sans-serif; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.db-duty-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border-radius: 10px; background: rgba(127, 127, 127, .18); color: var(--muted); }
.db-duty-caret { flex: 1 1 auto; position: relative; }
.db-duty-caret::after { content: ''; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .18s; }
.db-duty-item.open .db-duty-caret::after { transform: rotate(-135deg); margin-top: -1px; }
.db-duty-people { display: none; flex-direction: column; gap: 7px; padding: 10px 11px; background: var(--card, #fff);
  border-top: 1px solid var(--border); }
.db-duty-item.open .db-duty-people { display: flex; }
.db-dutyp { display: flex; align-items: center; gap: 9px; min-width: 0; }
.db-dutyp .db-av { width: 36px; height: 36px; flex: none; font-size: 14px; }
.db-dutyp > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Spotify: üst bar “şu an çalıyor” şeridi (ortada) + pano kutucuğu ===== */
.np-strip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; max-width: min(42vw, 460px);
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(29,185,84,.16), rgba(29,185,84,.06));
  border: 1px solid rgba(29,185,84,.35); color: var(--text);
  overflow: hidden; z-index: 10; animation: np-in .35s ease;
}
.np-strip:hover { text-decoration: none; background: linear-gradient(90deg, rgba(29,185,84,.24), rgba(29,185,84,.1)); }
.np-strip[hidden] { display: none; }
@keyframes np-in { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.np-art { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none;
  background: #1DB954; box-shadow: 0 0 0 2px rgba(29,185,84,.35); animation: np-spin 7s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.np-eq i { width: 3px; background: #1DB954; border-radius: 2px; height: 40%; animation: np-eq .9s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: .25s; }
.np-eq i:nth-child(3) { animation-delay: .5s; }
.np-eq i:nth-child(4) { animation-delay: .15s; }
@keyframes np-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.np-marquee { overflow: hidden; min-width: 0; flex: 1; }
.np-text { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 600; }
.np-scroll .np-text { animation: np-marq 9s ease-in-out infinite alternate; }
@keyframes np-marq { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--np-dx, 0)); } }
@media (prefers-reduced-motion: reduce) { .np-art, .np-eq i, .np-scroll .np-text { animation: none; } }
@media (max-width: 900px) { .np-strip { max-width: 40vw; } .np-text { font-size: 12px; } }
@media (max-width: 640px) { .np-strip { display: none; } }

/* Pano Spotify kutucuğu */
.db-sp { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.db-sp-connect { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.db-sp-logo svg, .db-sp-logo { width: 44px; height: 44px; }
.db-sp-np { display: flex; gap: 12px; align-items: center; }
.db-sp-artwrap { position: relative; flex: none; }
.db-sp-art { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: block; }
.db-sp-eq { position: absolute; right: 4px; bottom: 4px; display: none; align-items: flex-end; gap: 2px; height: 14px;
  padding: 2px 3px; border-radius: 4px; background: rgba(0,0,0,.45); }
.db-sp-np.on .db-sp-eq { display: inline-flex; }
.db-sp-eq i { width: 3px; background: #1DB954; border-radius: 2px; animation: np-eq .9s ease-in-out infinite; }
.db-sp-eq i:nth-child(2) { animation-delay: .25s; }
.db-sp-eq i:nth-child(3) { animation-delay: .5s; }
.db-sp-eq i:nth-child(4) { animation-delay: .15s; }
.db-sp-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.db-sp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-sp-artist { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-sp-bar { display: flex; align-items: center; gap: 6px; }
.db-sp-bar-track { flex: 1; height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.db-sp-bar-fill { display: block; height: 100%; width: 0; background: #1DB954; border-radius: 3px; transition: width .4s linear; }
.db-sp-t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.db-sp-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.db-sp-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.db-sp-btn svg { width: 18px; height: 18px; }
.db-sp-btn:hover { background: var(--surface-2); }
.db-sp-play { background: #1DB954; border-color: #1DB954; color: #04210f; }
.db-sp-play:hover { background: #1ed760; }
.db-sp-note { min-height: 0; }
.db-sp-search .input.sm { width: 100%; }
.db-sp-results { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 0; flex: 1; }
.db-sp-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 4px 6px;
  border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--text); }
.db-sp-row:hover { background: var(--surface-2); }
.db-sp-row-art { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.db-sp-row-main { min-width: 0; display: flex; flex-direction: column; }
.db-sp-row-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.db-sp-row-main small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Canlı Konum (MASTER) — TAM EKRAN harita ---------- */
.um-full { position: fixed; inset: 0; z-index: 1200; background: #0b0f16; }
.um-map { position: absolute; inset: 0; }
.um-map.um-nokey { display: grid; place-items: center; background: #0b0f16; color: #e8eefc; }
.um-nokey-ic { font-size: 40px; text-align: center; }
.um-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; color: #fff;
  background: linear-gradient(180deg, rgba(5,8,15,.72) 0%, rgba(5,8,15,.4) 60%, transparent 100%); }
.um-bar .spacer { flex: 1; }
.um-back { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 20px; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); }
.um-back:active { background: rgba(255,255,255,.26); }
.um-title { font-size: 17px; font-weight: 700; }
.um-count { font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
/* Avatar baloncuğu: tazelik rengine göre çerçeve (yeşil<5dk, amber<1sa, gri eski) */
.um-av { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border: 3px solid #9aa5b5; background-color: #64748b; }
.um-av.fresh { border-color: #22c55e; }
.um-av.warm { border-color: #f59e0b; }
.um-av.stale { border-color: #94a3b8; opacity: .85; }
/* Harita işaretçisi (OverlayView) — ucu konuma denk gelir */
.um-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.um-pin::after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff; margin-top: -1px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.um-pin-name { margin-top: 2px; font-size: 11px; font-weight: 600; color: #0f172a; background: rgba(255,255,255,.92); padding: 1px 6px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.25); max-width: 110px; overflow: hidden; text-overflow: ellipsis; order: -1; }
.um-info b { display: block; margin-bottom: 2px; }
.um-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: #94a3b8; }
.um-dot.fresh { background: #22c55e; }
.um-dot.warm { background: #f59e0b; }
.um-dot.stale { background: #94a3b8; }

/* ---------- Mesai Ayarları (Program Ayarları) ---------- */
.mesai-days { display: flex; flex-direction: column; gap: 8px; }
.mesai-day { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.mesai-day.off { opacity: .55; }
.mesai-day-h { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.mesai-day-t { display: flex; align-items: center; gap: 6px; }
@media (max-width: 560px) { .mesai-day { flex-direction: column; align-items: stretch; } .mesai-day-t { justify-content: space-between; } }
.hr-ot-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.hr-ot-add > * { flex: 0 0 auto; }

/* Modül Ayarları: alt modül seçimi sol dikey liste (bu modüle özel) */
.ms-wrap { display: flex; gap: 18px; align-items: flex-start; }
.ms-side { flex: 0 0 230px; position: sticky; top: 8px; }
.ms-side-h { margin: 0 0 8px; padding: 0 6px; font-weight: 600; }
.ms-vtabs { display: flex; flex-direction: column; gap: 2px; }
.ms-vtab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0;
  border-radius: 10px; background: transparent; color: var(--text, #1b2130); cursor: pointer; font: inherit; font-size: 14px; line-height: 1.2; }
.ms-vtab:hover { background: var(--hover, rgba(127,127,127,.08)); }
.ms-vtab.on { background: var(--accent-soft, rgba(37,99,235,.12)); color: var(--accent, #2563eb); font-weight: 600; }
.ms-vtab-ic { display: inline-flex; width: 20px; justify-content: center; flex: 0 0 auto; }
.ms-vtab-ic svg { width: 18px; height: 18px; }
.ms-main { flex: 1; min-width: 0; }
@media (max-width: 800px) {
  .ms-wrap { flex-direction: column; }
  .ms-side { flex: none; width: 100%; position: static; }
  .ms-vtabs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ms-vtab { width: auto; }
}

/* ===== Görev Yönetimi: 4 panelli çalışma ekranı ===== */
.tp-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; align-items: start; }
.tp-grid > .tp-panel, .tp-col { height: 72vh; }
.tp-col { display: flex; flex-direction: column; gap: 12px; }         /* 3. sütun: Detay (üst) + Geçmiş (alt) */
.tp-col > .tp-panel { flex: 1 1 0; min-height: 0; }                   /* her biri %50 */
@media (max-width: 1000px) { .tp-grid { grid-template-columns: 1fr; } .tp-grid > .tp-panel, .tp-col { height: auto; } .tp-col > .tp-panel { min-height: 300px; } }
.tp-panel { display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--line, #e5ebf4); border-radius: 14px; overflow: hidden; min-height: 0; }
.tp-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--line, #e5ebf4); background: color-mix(in srgb, var(--blue, #2f6fed) 7%, transparent); font-size: 14px; font-weight: 400; }
.tp-head svg { width: 17px; height: 17px; opacity: .7; flex: 0 0 auto; }
.tp-title { font-weight: 400; }
.tp-head .spacer { flex: 1; }
.tp-body { flex: 1; overflow: auto; padding: 7px; display: flex; flex-direction: column; gap: 3px; }
.tp-foot { padding: 7px 13px; border-top: 1px solid var(--line, #e5ebf4); font-size: 12px; color: var(--muted, #6b7280); background: rgba(127, 127, 127, .03); }
.tp-empty { padding: 18px 12px; color: var(--muted, #6b7280); font-size: 13px; text-align: center; }
.tp-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: inherit; color: inherit; font-size: 14px; }
.tp-row:hover { background: rgba(127, 127, 127, .06); }
.tp-row.on { background: color-mix(in srgb, var(--blue, #2f6fed) 13%, transparent); border-color: color-mix(in srgb, var(--blue, #2f6fed) 30%, transparent); }
.tp-row-meta { font-size: 12px; color: var(--muted, #6b7280); display: inline-flex; align-items: center; gap: 5px; }
.tp-row-meta .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.red { background: #dc2626; } .dot.gray { background: #9ca3af; }
/* Personel satırı: solda avatar, üstte ad, altta e-posta (ad bold DEĞİL) */
.tp-prow { flex-direction: row; align-items: center; gap: 10px; }
.tp-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tp-ava-ph { display: grid; place-items: center; background: color-mix(in srgb, var(--blue, #2f6fed) 82%, #000); color: #fff; font-weight: 600; text-transform: uppercase; font-size: 15px; }
.tp-prow-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tp-name { font-weight: 400; }
.tp-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tp-detail { padding: 6px 8px; }
.tp-detail h3 { margin: 2px 0 12px; font-size: 16px; }
.tp-field { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line, #eef2f7); font-size: 13.5px; }
.tp-f-k { flex: 0 0 72px; color: var(--muted, #6b7280); }
.tp-f-v { flex: 1; }
.tp-detail-acts { display: flex; gap: 8px; margin-top: 14px; }
.tp-log { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 9px; }
.tp-log.rejected { background: color-mix(in srgb, #dc2626 6%, transparent); }
.rej-txt { color: #dc2626; }
.cl-acts { display: flex; gap: 6px; flex-shrink: 0; }
.cl-item.rejected { opacity: .8; box-shadow: inset 4px 0 0 #dc2626; }
.cl-item.rejected .cl-check { background: #dc2626; color: #fff; }

/* iPhone tarzı anahtar (haftanın günleri) */
.ios-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.ios-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; }
.ios-sw { width: 44px; height: 26px; border-radius: 999px; background: #d1d5db; border: none; position: relative; cursor: pointer; transition: background .2s; padding: 0; flex: 0 0 auto; }
.ios-sw.on { background: #22c55e; }
.ios-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ios-sw.on i { left: 21px; }

/* Görev ekle/düzenle popup */
.tf-wrap { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 18px; background: rgba(10, 18, 32, .5); backdrop-filter: blur(4px); }
.tf-modal { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--card, #fff); border-radius: 18px; box-shadow: 0 30px 80px rgba(10, 18, 32, .4); overflow: hidden; }
.tf-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line, #e5ebf4); font-size: 16px; }
.tf-head b { flex: 1; }
.tf-x { border: none; background: rgba(127, 127, 127, .1); width: 30px; height: 30px; border-radius: 9px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted, #6b7280); }
.tf-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px) { .tf-grid { grid-template-columns: 1fr; } }
.tf-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.tf-field > span { color: var(--muted, #6b7280); font-weight: 600; }
.tf-field[hidden] { display: none; }
.tf-foot { padding: 12px 18px; border-top: 1px solid var(--line, #e5ebf4); display: flex; justify-content: flex-end; }
[data-theme="dark"] .tp-panel, [data-theme="dark"] .tf-modal { background: #101c30; }

/* Görev Yönetimi: avatar boyutu + haftalık geçmiş */
.tp-prow .avatar { width: 36px; height: 36px; font-size: 14px; flex: 0 0 auto; }
.tp-wknav { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.tp-wknav .btn { padding: 2px 9px; min-height: 0; height: 26px; }
.tp-wklabel { font-weight: 500; min-width: 96px; text-align: center; }
.tp-wkrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; }
.tp-wkrow:nth-child(odd) { background: rgba(127, 127, 127, .03); }
.tp-wkrow.off { opacity: .5; }
.tp-wkrow.is-today { background: color-mix(in srgb, var(--blue, #2f6fed) 9%, transparent); box-shadow: inset 3px 0 0 var(--blue, #2f6fed); }
.tp-wkday { flex: 0 0 96px; display: flex; align-items: baseline; gap: 5px; }
.tp-wkstat { flex: 1; text-align: right; }

/* Şirketten Haberler: paylaşılan metindeki tıklanabilir linkler */
.feed-link { color: var(--blue, #2f6fed); text-decoration: underline; word-break: break-word; cursor: pointer; }
.feed-link:hover { filter: brightness(1.12); }

/* Bina Kontrol: devam eden tur sağ panel (saat + canlı süre + canlı harita + Bitir); aktif yoksa liste tam ekran */
.bc-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.bc-wrap.has-active { grid-template-columns: 1fr minmax(300px, 380px); }
@media (max-width: 820px) { .bc-wrap.has-active { grid-template-columns: 1fr; } }
.bc-side:empty { display: none; }
.bc-side { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 12px; background: var(--card, #fff); border: 1px solid var(--line, #e5ebf4); border-radius: 14px; padding: 14px; box-shadow: var(--shadow, 0 6px 20px rgba(22,64,126,.08)); }
.bc-side-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bc-side-info { display: flex; flex-direction: column; gap: 7px; }
.bc-side-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.bc-elapsed { font-variant-numeric: tabular-nums; font-size: 20px; color: var(--blue, #2f6fed); font-weight: 700; }
.bc-live-map { border-radius: 12px; overflow: hidden; min-height: 240px; border: 1px solid var(--line, #e5ebf4); background: #eef3fb; }
.bc-live-map .bc-gmap { width: 100%; height: 260px; }
.bc-live-map .bc-map { width: 100%; height: auto; display: block; }
.bc-side-acts { display: flex; flex-direction: column; gap: 8px; }
.bc-finish { width: 100%; }
[data-theme="dark"] .bc-side { background: #101c30; }

/* ===== Anket modülü (mysurvey + surveysadmin) ===== */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
/* Zorunlu anket uyarı şeridi: görev şeridinin altında, mor tonlu */
.survey-pill { top: 52px; background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 8px 24px rgba(79,70,229,.4) !important; animation: none !important; }
.survey-pill:hover { filter: brightness(1.06); }

/* -- Personel: anket listesi + cevaplama -- */
.sv-sec { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 8px; }
.sv-sec:first-child { margin-top: 2px; }
.sv-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; color: inherit; }
.sv-card:hover { border-color: var(--primary); }
.sv-card.answered { opacity: .72; }
.sv-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sv-card-main b { font-size: 15px; }
.sv-card-main p { margin: 0; }
.sv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.sv-done { color: #16a34a; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.sv-title { margin: 0 0 4px; font-size: 19px; }
.sv-answered-note { background: rgba(22,163,74,.1); color: #16a34a; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; margin: 10px 0; }
.sv-form { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.sv-q { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-2, rgba(0,0,0,.015)); }
.sv-q-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.sv-q-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12.5px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sv-q-head .req { color: #ef4444; font-weight: 700; }
.sv-q-body { padding-left: 32px; }
.sv-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14.5px; background: var(--surface, #fff); color: inherit; }
.sv-input:focus { outline: none; border-color: var(--primary); }
textarea.sv-input { resize: vertical; }
.sv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-opts.col { flex-direction: column; }
.sv-opt { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 14px; background: var(--surface, #fff); font: inherit; font-size: 14.5px; cursor: pointer; color: inherit; text-align: left; }
.sv-opt:hover { border-color: var(--primary); }
.sv-opt.on { border-color: var(--primary); background: rgba(37,99,235,.1); font-weight: 600; }
.sv-opt .cb { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; display: inline-block; position: relative; }
.sv-opt.multi.on .cb { background: var(--primary); border-color: var(--primary); }
.sv-opt.multi.on .cb::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sv-rate { display: flex; gap: 4px; }
.sv-star { border: none; background: none; font-size: 30px; line-height: 1; color: var(--border); cursor: pointer; padding: 0 2px; }
.sv-star.on { color: #f59e0b; }
.sv-submit { margin-top: 18px; display: flex; justify-content: flex-end; }
.sv-submit .btn { min-width: 140px; }

/* -- Master: yönetim listesi -- */
.sv-adminrow { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--surface, #fff); }
.sv-adminrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sv-adminrow-main > b { font-size: 15.5px; }
.sv-adminrow-main p { margin: 0; }
.sv-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; max-width: 320px; }
.sv-prog-bar { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.sv-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; }
.sv-prog-txt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sv-row-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
@media (max-width: 640px) { .sv-adminrow { flex-direction: column; } .sv-row-acts { width: 100%; } }

/* -- Editör + modal -- */
.sv-modal-ov { position: fixed; inset: 0; background: rgba(7,13,28,.55); z-index: 1300; display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.sv-modal { width: min(620px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface, #fff);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(7,13,28,.4); }
.sv-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sv-modal-head b { font-size: 16px; }
.sv-modal-x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.sv-modal-body { padding: 16px 18px; overflow: auto; }
.sv-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.sv-editor { display: flex; flex-direction: column; gap: 14px; }
.sv-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sv-flags { display: flex; flex-wrap: wrap; gap: 16px; }
.sv-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.sv-warn { background: rgba(245,158,11,.12); color: #b45309; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.sv-qlist { display: flex; flex-direction: column; gap: 10px; }
.sv-qrow { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2, rgba(0,0,0,.015)); }
.sv-qrow-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sv-qrow-top input[type=text] { flex: 1 1 180px; }
.sv-qtype { flex: 0 0 auto; width: auto; max-width: 150px; }
.sv-optwrap { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

/* -- Sonuçlar -- */
.sv-results { display: flex; flex-direction: column; gap: 16px; }
.sv-res-top { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-resq { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.sv-resq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sv-barrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.sv-barlbl { flex: 0 0 110px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-bar { flex: 1; height: 18px; background: var(--border); border-radius: 6px; overflow: hidden; }
.sv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 6px; min-width: 2px; }
.sv-barn { flex: 0 0 auto; font-size: 13px; font-weight: 700; min-width: 20px; text-align: right; }
.sv-textans { background: var(--surface-2, rgba(0,0,0,.02)); border-radius: 8px; padding: 7px 10px; margin: 5px 0; font-size: 13.5px; }
.sv-people { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.sv-people summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.sv-person { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.sv-person-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sv-person-a { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13.5px; }

/* Program Ayarları › Modül Yönetimi — ikonlu kart ızgarası */
.mm-wrap .mm-hint { margin: 0 0 16px; }
.mm-sec { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 10px; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.mm-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 12px; border-radius: 16px;
  border: 1.5px solid var(--border); background: var(--surface, #fff); cursor: pointer; font: inherit; color: var(--text);
  transition: transform .12s, border-color .15s, box-shadow .15s, opacity .15s; position: relative; }
.mm-tile:not(.locked):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,99,235,.14); }
.mm-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--surface-2, #eef1f6); color: var(--muted); transition: background .18s, color .18s; }
.mm-ic svg { width: 26px; height: 26px; }
.mm-t { font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.25; }
.mm-st { font-size: 11.5px; font-weight: 600; color: var(--muted); }
/* Açık kart: canlı, renkli ikon */
.mm-tile.on { border-color: var(--primary); background: rgba(37,99,235,.06); }
.mm-tile.on .mm-ic { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.32); }
.mm-tile.on .mm-st { color: var(--primary); }
/* Kapalı kart: soluk */
.mm-tile:not(.on):not(.locked) { opacity: .62; }
.mm-tile:not(.on):not(.locked):hover { opacity: 1; }
/* Zorunlu (kilitli): açık görünür ama tıklanamaz */
.mm-tile.locked { cursor: default; border-style: dashed; }
.mm-tile.locked .mm-ic { background: linear-gradient(135deg, #64748b, #94a3b8); color: #fff; }
.mm-tile.locked .mm-st { color: var(--muted); }
.mm-save { margin-top: 20px; display: flex; justify-content: flex-end; }
.mm-save .btn { min-width: 150px; }

/* ===== Esnaf Kasa (POS) — dokunmatik satış ===== */
.pos-wrap { display: flex; gap: 14px; align-items: stretch; min-height: 60vh; }
.pos-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pos-search { width: 100%; box-sizing: border-box; height: 52px; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 0 18px; font-size: 17px; background: var(--surface, #fff); color: inherit; }
.pos-search:focus { outline: none; border-color: var(--primary); }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; }
.pos-prod { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 92px; padding: 14px;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface, #fff); cursor: pointer; font: inherit;
  color: var(--text); text-align: left; transition: transform .1s, border-color .15s, box-shadow .15s; }
.pos-prod:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(37,99,235,.14); }
.pos-prod:active { transform: scale(.97); }
.pos-prod-n { font-size: 14px; font-weight: 600; line-height: 1.25; }
.pos-prod-p { font-size: 15px; font-weight: 800; color: var(--primary); }
/* sepet */
.pos-right { flex: 0 0 340px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface, #fff); overflow: hidden; }
.pos-cart-h { padding: 14px 16px; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--border); }
.pos-cart-items { flex: 1; overflow: auto; padding: 8px 10px; min-height: 120px; }
.pos-cart-empty { color: var(--muted); text-align: center; padding: 28px 0; }
.pos-citem { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--border); }
.pos-ci-n { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-ci-qty { display: inline-flex; align-items: center; gap: 8px; }
.pos-q { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2, #f1f3f8);
  font-size: 18px; font-weight: 700; cursor: pointer; color: inherit; line-height: 1; }
.pos-q:active { background: var(--primary); color: #fff; }
.pos-ci-t { font-size: 13.5px; font-weight: 700; min-width: 72px; text-align: right; }
.pos-foot { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; }
.pos-total > span { color: var(--muted); font-size: 14px; }
.pos-total-v { font-size: 24px; font-weight: 800; }
.pos-pay { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.pos-pay-b { height: 40px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface, #fff);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: inherit; }
.pos-pay-b.on { border-color: var(--primary); background: rgba(37,99,235,.1); color: var(--primary); }
.pos-acct { height: 42px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--surface, #fff); color: inherit; }
.pos-finish { height: 52px; font-size: 17px; font-weight: 700; }
@media (max-width: 760px) { .pos-wrap { flex-direction: column; } .pos-right { flex: none; } }

/* Esnaf Kasa — satılık ürün yönetimi modalı */
.pos-modal-ov { position: fixed; inset: 0; background: rgba(7,13,28,.55); z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pos-modal { width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(7,13,28,.4); }
.pos-modal-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pos-modal-h b { font-size: 16px; }
.pos-modal-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.pos-cat { padding: 14px 18px; overflow: auto; }
.pos-cat-form { display: grid; grid-template-columns: 2fr 1.3fr .9fr .9fr .9fr auto; gap: 8px; margin-bottom: 16px; align-items: center; }
.pos-cat-list { display: flex; flex-direction: column; }
.pos-cat-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.pos-cat-row:last-child { border-bottom: 0; }
.pos-cat-n { font-weight: 600; }
.pos-cat-p { font-weight: 700; color: var(--primary); text-align: right; }
.pos-cat-s { color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .pos-cat-form { grid-template-columns: 1fr 1fr; } .pos-cat-row { grid-template-columns: 1fr auto; row-gap: 4px; } }

/* ---------- Esnaf: Bölümler / Hizmetler / Rezervasyon / Garson ---------- */
.form-col { display: flex; flex-direction: column; gap: 12px; }
.form-col > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form-col > label > .input, .form-col > label > select, .form-col > label > textarea { font-weight: 400; color: var(--ink); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.form-row > label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.row-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.chip.warn { background: #fff4e5; color: #b45309; }
.chip-btn { border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.chip-btn.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.shop-sec { margin-bottom: 12px; }
.shop-sec-h { display: flex; align-items: center; gap: 8px; }
.shop-tbls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.shop-tbl-chip { border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 92px; position: relative; }
.shop-tbl-chip.round { border-radius: 999px; align-items: center; }
.shop-tbl-chip b { font-size: 14px; } .shop-tbl-chip small { color: var(--muted); font-size: 11.5px; }
.shop-tbl-acts { display: flex; gap: 4px; margin-top: 2px; }
.mini { border: 0; background: var(--surface-2); border-radius: 6px; width: 24px; height: 22px; cursor: pointer; font-size: 13px; line-height: 1; color: var(--muted); }
.mini.danger:hover { background: var(--danger, #ef4444); color: #fff; }

.shop-svc-list { display: flex; flex-direction: column; gap: 8px; }
.shop-svc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-svc-meta { display: flex; align-items: center; gap: 8px; }
.shop-svc-price { color: var(--primary); font-size: 15px; }
.shop-svc-acts { display: flex; gap: 6px; }
.shop-staff-pick { display: flex; flex-wrap: wrap; gap: 6px; }

.shop-rsv-list { display: flex; flex-direction: column; gap: 8px; }
.shop-rsv-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--primary); }
.shop-rsv-row.st-TAMAM { border-left-color: #16a34a; opacity: .75; }
.shop-rsv-row.st-GELMEDI { border-left-color: #d97706; opacity: .7; }
.shop-rsv-row.st-IPTAL { border-left-color: var(--muted); opacity: .5; text-decoration: line-through; }
.shop-rsv-time { font-weight: 700; min-width: 64px; } .shop-rsv-time small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.shop-rsv-acts { display: flex; gap: 6px; }
.st-chip { background: var(--surface-2); color: var(--muted); }

.waiter-sec { margin-bottom: 12px; }
.waiter-sec-h { margin-bottom: 10px; }
.waiter-tables { display: flex; flex-wrap: wrap; gap: 12px; }
.waiter-table { width: 108px; height: 92px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; color: var(--ink); position: relative; }
.waiter-table.round { border-radius: 999px; }
.waiter-table.free { border-style: dashed; color: var(--muted); }
.waiter-table.busy { border-color: var(--primary); background: var(--primary-soft); }
.waiter-table b { font-size: 16px; } .waiter-table .wt-total { font-weight: 700; color: var(--primary); }
.waiter-table .wt-seats, .waiter-table .wt-party { font-size: 11.5px; color: var(--muted); }
.waiter-table .wt-waiter { position: absolute; bottom: 4px; font-size: 9.5px; color: var(--muted); }

.waiter-order-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.waiter-order { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.waiter-seats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.waiter-seat { border: 1.5px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.waiter-seat.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.waiter-items { border: 1px solid var(--border); border-radius: 12px; min-height: 180px; padding: 6px; }
.waiter-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.waiter-item:last-child { border-bottom: 0; }
.wi-seat { font-size: 10px; background: var(--surface-2); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.waiter-order-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--border); }
.waiter-grand { font-size: 20px; color: var(--primary); margin-right: auto; }
.waiter-menu-search { width: 100%; margin-bottom: 8px; }
.waiter-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.waiter-menu-b { border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; font: inherit; color: var(--ink); text-align: left; }
.waiter-menu-b:hover { border-color: var(--primary); }
.waiter-menu-b small { color: var(--primary); font-weight: 700; }
.waiter-pay-total { font-size: 15px; margin-bottom: 4px; }
.btn.lg { padding: 11px 20px; font-size: 15px; }
@media (max-width: 760px) { .waiter-order { grid-template-columns: 1fr; } .waiter-menu { max-height: 260px; } }

/* POS: kamera barkod + arama satırı */
.pos-search-row { display: flex; gap: 8px; align-items: stretch; }
.pos-search-row .pos-search { flex: 1; }
.pos-scan { flex: none; padding: 0 14px; font-size: 18px; }
.pos-scan-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pos-scan-video { width: 100%; max-width: 360px; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Beta geri bildirim (footer ortası + modal) ---------- */
.app-footer { position: relative; }
.beta-fab { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 13px; border-radius: 999px; }
.beta-fab:hover { color: var(--primary); border-color: var(--primary); }
.beta-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
@media (max-width: 760px) { .beta-fab span.beta-dot { display: inline-block; } .beta-fab { font-size: 0; gap: 0; padding: 6px 10px; } .beta-fab .beta-dot { font-size: 0; } }

.beta-modal { display: flex; flex-direction: column; gap: 12px; min-width: min(460px, 86vw); }
.beta-intro { margin: 0; font-size: 13px; color: var(--muted); background: #fff8ec; border: 1px solid #fde8c0; padding: 9px 12px; border-radius: 10px; }
.beta-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.beta-tab { border: 0; background: none; cursor: pointer; font: inherit; padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.beta-tab.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.beta-pane { min-height: 160px; }
.beta-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.beta-field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.beta-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.beta-cat { border: 1.5px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; }
.beta-cat.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.beta-msg { resize: vertical; }
.beta-shot { flex-direction: row; align-items: center; gap: 10px; }
.beta-foot { display: flex; justify-content: flex-end; }
.beta-item { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; }
.beta-item-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.beta-item-msg { font-size: 14px; white-space: pre-wrap; }
.beta-reply { margin-top: 8px; padding: 9px 11px; background: var(--primary-soft); border-radius: 9px; font-size: 13.5px; }
.chip.ok { background: #dcfce7; color: #15803d; }

/* ---------- Esnaf: ortak şık kart sistemi (Hizmetler / Bölümler / Rezervasyon) ---------- */
.esnaf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.esnaf-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
  box-shadow: 0 2px 10px rgba(17, 34, 64, .05); transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; flex-direction: column; gap: 10px; }
.esnaf-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(17, 34, 64, .12); border-color: var(--primary); }
.esnaf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.esnaf-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; flex: none;
  background: var(--primary-soft); color: var(--primary); }
.esnaf-card-price { font-size: 20px; font-weight: 800; color: var(--primary); white-space: nowrap; line-height: 1.1; text-align: right; }
.esnaf-card-price small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.esnaf-card-title { margin: 0; font-size: 17px; font-weight: 700; }
.esnaf-card-sub { color: var(--muted); font-size: 13px; margin: -4px 0 0; }
.esnaf-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.esnaf-card-meta .chip { background: var(--surface-2); color: var(--muted); font-weight: 600; }
.esnaf-card-people { display: flex; flex-wrap: wrap; gap: 4px; }
.esnaf-card-people .av { font-size: 12px; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.esnaf-card-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.esnaf-card-acts .btn { flex: 1; justify-content: center; }
/* Bölümler: içinde masa/oda rozetleri */
.esnaf-card.sec-card { gap: 12px; }
.esnaf-sec-tables { display: flex; flex-wrap: wrap; gap: 8px; }
.esnaf-tbl { border: 1.5px solid var(--border); border-radius: 12px; padding: 8px 10px; min-width: 84px; display: flex; flex-direction: column; gap: 2px; position: relative; background: var(--surface-2); }
.esnaf-tbl.round { border-radius: 999px; align-items: center; min-width: 76px; }
.esnaf-tbl b { font-size: 14px; } .esnaf-tbl small { color: var(--muted); font-size: 11px; }
.esnaf-tbl-x { position: absolute; top: 3px; right: 5px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
/* Rezervasyon satırları kartımsı */
.esnaf-rsv { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(17, 34, 64, .05); }
.esnaf-rsv.st-TAMAM { border-left-color: #16a34a; opacity: .8; } .esnaf-rsv.st-GELMEDI { border-left-color: #d97706; } .esnaf-rsv.st-IPTAL { border-left-color: var(--muted); opacity: .55; }
.esnaf-rsv-time { text-align: center; min-width: 58px; } .esnaf-rsv-time b { font-size: 17px; display: block; } .esnaf-rsv-time small { color: var(--muted); font-size: 11px; }
.esnaf-rsv-acts { display: flex; gap: 6px; }
.shop-sec-stack { display: flex; flex-direction: column; gap: 16px; }
.esnaf-rsv-list { display: flex; flex-direction: column; gap: 12px; }
.esnaf-rsv .grow b { font-size: 15px; } .esnaf-rsv-time small { display: block; }
.pos-prod.svc { border-color: var(--primary); background: var(--primary-soft); }
.pos-prod-tag { font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Yapılacaklar (TODO) ---- */
.todo-tabs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 14px; }
.todo-card.started { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.todo-card.done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.todo-card.late { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.todo-card.focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.todo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-head b.t { font-size: 15px; }
.todo-timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--primary); display: flex; align-items: center; gap: 4px; }
.todo-timer.done { color: var(--success); } .todo-timer.pending { color: var(--muted); font-weight: 600; }
.todo-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.todo-meta .late { color: var(--danger); font-weight: 700; }
.todo-note { margin-top: 8px; font-size: 13px; white-space: pre-wrap; }
.todo-prog { height: 4px; border-radius: 2px; background: var(--border); margin-top: 8px; overflow: hidden; } .todo-prog i { display: block; height: 100%; background: var(--primary); }
.todo-items { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.todo-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.todo-item.done > span { text-decoration: line-through; color: var(--muted); }
.todo-item .chk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; font-size: 12px; color: #fff; flex: 0 0 auto; padding: 0; }
.todo-item.done .chk { background: var(--success); border-color: var(--success); }
.todo-item .chk:disabled { cursor: default; }
.todo-item .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.todo-add { display: flex; gap: 6px; margin-top: 8px; } .todo-add .input { flex: 1; }
.todo-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: flex-end; }
.todo-result { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--success) 9%, var(--surface)); font-size: 13px; white-space: pre-wrap; }
.todo-panel .todo-head-row { display: flex; justify-content: space-between; align-items: center; }
.todo-dot { width: 9px; height: 9px; border-radius: 50%; background: #98a2b3; flex: 0 0 auto; margin-top: 6px; }
.todo-dot.started { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .todo-dot.done { background: var(--success); }
.todo-btn.on svg { color: var(--primary); }
.todo-btn.run .alert-count { background: var(--primary); }
/* TODO: yönetici görünümü — sol personel listesi + Liste / Kart / TODO panosu */
.todo-split { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.todo-people { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; max-height: calc(100vh - 110px); overflow: auto; }
.todo-person { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; }
.todo-person:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.todo-person.on { background: var(--primary-soft, color-mix(in srgb, var(--primary) 14%, transparent)); color: var(--primary); font-weight: 700; }
.todo-person .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-person .n { font-size: 11px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: 999px; padding: 1px 7px; }
.todo-person .n.open { color: #fff; background: var(--primary); }
.todo-people-sep { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; }
.todo-main { min-width: 0; }
.todo-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.todo-col { background: color-mix(in srgb, var(--muted) 7%, var(--surface)); border: 1px solid var(--border); border-radius: 14px; padding: 8px; min-height: 160px; }
.todo-col-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--muted); padding: 4px 6px 8px; }
.todo-col-h b { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.todo-col.started .todo-col-h { color: var(--primary); } .todo-col.done .todo-col-h { color: var(--success); } .todo-col.rejected .todo-col-h { color: var(--danger); }
.todo-col-b { display: flex; flex-direction: column; gap: 8px; }
.todo-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.todo-mini:hover { border-color: var(--primary); }
.todo-mini.started { border-left: 3px solid var(--primary); } .todo-mini.done { border-left: 3px solid var(--success); } .todo-mini.rejected { border-left: 3px solid var(--danger); } .todo-mini.late { border-color: var(--danger); }
.todo-mini-h { display: flex; align-items: center; gap: 6px; } .todo-mini-h b { font-size: 13px; line-height: 1.25; }
.todo-mini-m { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 5px; }
.todo-mini-m .todo-timer { font-size: 12px; margin-left: 0; } .todo-mini-m .late { color: var(--danger); font-weight: 700; }
.todo-mini-r { margin-top: 4px; font-style: italic; }
.todo-result.rej { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.todo-table tbody tr { cursor: pointer; } .todo-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.todo-table td .late { color: var(--danger); font-weight: 700; } .todo-table .todo-timer { font-size: 13px; margin-left: 0; }
@media (max-width: 900px) {
  .todo-split { grid-template-columns: 1fr; } .todo-people { position: static; max-height: 180px; flex-direction: row; flex-wrap: wrap; }
  .todo-person { width: auto; } .todo-people-sep { width: 100%; }
  .todo-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.todo-person .u-av { padding: 1px; border-width: 2px; } .todo-person .u-av.offline { border-color: color-mix(in srgb, var(--muted) 35%, transparent); opacity: .85; }
.todo-person .u-av.all { width: 30px; height: 30px; align-items: center; justify-content: center; font-size: 15px; border-color: transparent; }
.todo-person .avatar.sm { width: 24px; height: 24px; font-size: 10px; }
/* pano: çevrimiçi kullanıcının cihaz türü; kullanıcılar listesi */
.db-user-dev { font-size: 10px; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.db-user-dev.android_app { color: #3ddc84; } .db-user-dev.ios_app { color: var(--text); } .db-user-dev.web, .db-user-dev.web_mobile { color: var(--primary); }
.u-dev { color: var(--primary); font-weight: 600; }
/* paylaşım: master 'Görenler' listesi */
.feed-viewers { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.feed-viewer { display: flex; align-items: center; gap: 10px; } .feed-viewer b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-eye { font-size: 16px; line-height: 1; }
.todo-mini-due { margin-top: 4px; } .todo-mini-due.late { color: var(--danger); font-weight: 700; }
.db-duty-plate.noexit { opacity: .75; border-style: dashed; } .db-dutyp.noexit b { opacity: .8; }

/* ekran bazlı güncelleme düğmesi (sağ üst, başlığın altında) */
.ui-upd { position: fixed; top: 64px; right: 16px; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 999px; background: #1f2633; color: #e5e7eb; box-shadow: 0 10px 30px rgba(15,23,42,.35); font-size: 13px; font-weight: 600; }
.ui-upd .ui-upd-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); animation: uiUpdPulse 1.6s ease-in-out infinite; }
@keyframes uiUpdPulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.08); } }
.ui-upd .btn.sm { background: var(--primary); border-color: var(--primary); color: #fff; }
.ui-upd .btn.sm.ghost-light { background: transparent; border-color: rgba(255,255,255,.3); color: #e5e7eb; }
.ui-upd .ver-x { background: none; border: 0; color: #9aa4b5; font-size: 16px; cursor: pointer; line-height: 1; }
@media (max-width: 600px) { .ui-upd { top: auto; bottom: 72px; right: 10px; left: 10px; justify-content: center; } }
/* Yönetim › Sürüm Takibi */
.uu-split { display: grid; grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.uu-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; min-height: 200px; max-height: calc(100vh - 190px); overflow: auto; }
.uu-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: var(--muted); padding: 6px 8px 8px; }
.uu-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: 1px solid transparent; background: none; padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; }
.uu-item:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.uu-item.on { background: var(--primary-soft, color-mix(in srgb, var(--primary) 12%, transparent)); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.uu-item.cur b { color: var(--success); }
.uu-files { margin: 0 8px 8px; font-size: 12px; } .uu-files ul { margin: 6px 0 0; padding-left: 16px; max-height: 160px; overflow: auto; }
.uu-grp { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; font-weight: 800; margin-top: 8px; }
.uu-grp.ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .uu-grp.no { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.uu-sub { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 2px; }
.uu-user { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; }
.uu-user.ok { background: color-mix(in srgb, var(--success) 5%, transparent); } .uu-user.stale { background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent); }
.uu-none { padding: 4px 10px; }
@media (max-width: 1000px) { .uu-split { grid-template-columns: 1fr; } .uu-col { max-height: none; } }

/* Uygulamalar panelinde ✕, 'ARAMA KUTUSU' başlığının en sağında aynı satırda */
.apps-panel .popup-close { top: 10px; right: 12px; width: 28px; height: 28px; }
.apps-panel .apps-search-title { padding-right: 40px; }
.leave-ended { color: var(--primary); font-weight: 600; }
.chat-paste img { max-width: 100%; max-height: 50vh; border-radius: 12px; display: block; margin: 0 auto 10px; box-shadow: 0 4px 16px rgba(15,23,42,.15); }
.msg-timeline.drop { outline: 2px dashed var(--primary); outline-offset: -6px; }

/* Emoji yerine Font Awesome (otomatik, ui.js): satır içi ikon metinle hizalı */
svg.fa-inline { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .38em; flex: none; }
svg.fa-inline.fa-solo { margin-right: 0; }
.btn svg.fa-inline { width: 15px; height: 15px; }
.seg button svg.fa-inline { width: 14px; height: 14px; }
.db-duty-endrow { display: flex; justify-content: flex-end; padding: 6px 8px 2px; }
.sys-net { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; min-width: 190px; font-size: 12px; color: var(--muted); }
.sys-net-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.sys-net-row { display: flex; gap: 12px; font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sys-net-row .dn { color: var(--primary); } .sys-net-row .up { color: var(--success); }
/* ---- Yönetim › Canlı Sistem: koyu, tamamen grafik ---- */
.ls-page { background: radial-gradient(120% 90% at 50% 0%, #141a2b 0%, #0b0f17 60%, #070a10 100%); border-radius: 16px; padding: 16px; min-height: calc(100vh - 170px); color: #e5e7eb; }
.ls-page:fullscreen { border-radius: 0; padding: 22px; min-height: 100vh; overflow: auto; }
.ls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ls-host { display: flex; flex-direction: column; gap: 12px; }
.ls-host-h { display: flex; align-items: center; gap: 10px; padding: 4px 6px 2px; }
.ls-host-h b { font-size: 17px; letter-spacing: .02em; } .ls-host-sub { font-size: 12px; color: #8a94a6; margin-left: auto; }
.ls-ic svg { width: 20px; height: 20px; color: #93c5fd; }
.ls-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ls-title { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #8a94a6; font-weight: 700; }
.ls-big { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; text-shadow: 0 0 18px rgba(96,165,250,.25); }
.ls-canvas { position: relative; height: 150px; margin-top: 6px; }
.ls-sub { font-size: 11.5px; color: #7c8698; margin-top: 4px; min-height: 14px; }
.ls-unavail { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.ls-fs svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
@media (max-width: 1000px) { .ls-grid { grid-template-columns: 1fr; } .ls-canvas { height: 120px; } }
.addr-map { height: 280px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); }
/* Canlı Konum: firma logosu işaretçisi */
.um-copin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.um-copin img, .um-coini { width: 36px; height: 36px; border-radius: 10px; background: #fff; object-fit: contain; padding: 3px; border: 2px solid #1d4ed8; box-shadow: 0 4px 12px rgba(15,23,42,.3); }
.um-coini { display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #1d4ed8; }
.um-copin.sup img, .um-copin.sup .um-coini { border-color: #b45309; } .um-copin.sup .um-coini { color: #b45309; }
.um-copin::after { content: ''; width: 0; height: 0; border: 6px solid transparent; border-top-color: #1d4ed8; margin-top: -4px; }
.um-toggle { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; opacity: .6; margin-right: 8px; }
.um-toggle.on { opacity: 1; }
.co-geo { color: var(--primary); font-weight: 600; }
.um-copin.approx img, .um-copin.approx .um-coini { border-style: dashed; opacity: .85; }
/* Firma Haritası: üst çubukta arama / süzgeç; boş durum */
.um-search { width: 220px; max-width: 32vw; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.um-search::placeholder { color: rgba(255,255,255,.7); }
.um-select { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.um-select option { color: #111; }
.um-empty { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); background: rgba(11,15,22,.85); color: #e8eefc; padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 4; }
.feed-post.pinned { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.feed-pinned { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--primary); padding: 6px 12px 0; }
.pd-image.pd-schema { display: block; padding: 10px; background: var(--surface-2); border-radius: 12px; }
.pd-image.pd-schema svg { width: 100%; max-height: 420px; height: auto; display: block; }
.um-av.web { border-style: dashed; }
.um-pin.web .um-pin-name { background: rgba(255,247,205,.95); }
/* ---- Endüstriyel Tasarım › STEP 3B stüdyosu (parça ağacı + model + patlatma + ürün eşleştirme) ---- */
.stp-studio { display: flex; flex-direction: column; gap: 10px; }
.stp-top, .stp-bar, .stp-sel-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stp-top .input, .stp-sel-ctl .input { width: auto; min-width: 200px; }
.stp-lbl { font-weight: 600; white-space: nowrap; }
.stp-main { display: grid; grid-template-columns: 260px 1fr; gap: 10px; min-height: 0; }
.stp-side { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.stp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.stp-tree { overflow: auto; max-height: calc(100vh - 420px); min-height: 220px; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.stp-row { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; min-width: 0; }
.stp-row:hover { background: var(--surface-2); }
.stp-row.on { background: #fff7ed; color: #9a3412; font-weight: 600; }
.stp-row.root { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; margin-bottom: 2px; }
.stp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.stp-row.linked .stp-dot { background: #16a34a; }
.stp-row.on .stp-dot { background: #f97316; }
.stp-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-row-code { flex: none; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; padding: 1px 6px; border-radius: 999px; }
.stp-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stp-canvas { width: 100%; height: calc(100vh - 420px); min-height: 320px; border-radius: 12px; overflow: hidden; background: #eef3fb; display: grid; place-items: center; border: 1px solid var(--border); }
.stp-canvas canvas { display: block; }
.stp-range { flex: 1; min-width: 160px; accent-color: #f97316; }
.stp-range-val { min-width: 42px; }
.stp-sel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.stp-sel-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stp-sel-name { color: #c2410c; }
.dz-mcard-prod { color: #15803d; font-weight: 600; }
@media (max-width: 760px) {
  .stp-main { grid-template-columns: 1fr; }
  .stp-tree { max-height: 180px; }
  .stp-canvas { height: 46vh; }
  .stp-top .input, .stp-sel-ctl .input { min-width: 0; flex: 1; }
}
.stp-row.group .stp-row-name { font-weight: 600; }
.stp-caret { flex: none; width: 14px; text-align: center; color: var(--muted); cursor: pointer; transition: transform .15s; font-size: 12px; }
.stp-caret.closed { transform: rotate(-90deg); }
.stp-tools { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.stp-row.custom .stp-row-name { color: #1d4ed8; }
.stp-row.dragging { opacity: .45; }
.stp-row.drop { outline: 2px dashed #f97316; outline-offset: -2px; background: #fff7ed; }
.stp-sel-ctl .spacer { flex: 1; }

/* ---- Endüstriyel Tasarım: sade montaj kartı (3B önizleme + ad), detay sayfası (bilgi kutuları, sekmeler, tam ekran sahne) ---- */
.dz-mcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--text); }
.dz-mcard:hover { text-decoration: none; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.dz-mcard-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 0; background: linear-gradient(135deg, #eef3fb, #e3e9f4); display: flex; align-items: center; justify-content: center; }
.dz-mcard-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dz-mcard-ico { width: 56px; height: 56px; }
.dz-mcard-spin { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(255,255,255,.85); text-align: center; }
.dz-mcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.dz-mcard-name { font-size: 15px; }
.dz-info { margin-bottom: 12px; }
.dz-info-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dz-info-name { font-size: 17px; }
.dz-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.dz-tile { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.dz-tile-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dz-tile-v { font-size: 17px; font-weight: 700; margin: 2px 0; }
.dz-tile-v .input.sm { font-size: 13px; font-weight: 500; padding: 4px 6px; width: 100%; }
.dz-spec-form { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dz-spec-form > :last-child { grid-column: 1 / -1; }
.stp-tabs-row { display: flex; align-items: center; gap: 8px; }
.stp-tabs-row .module-tabs { margin: 0; flex: 1; }
.stp-stage { position: relative; }
.stp-stage:fullscreen { background: var(--bg); padding: 12px; overflow: auto; }
.stp-stage:fullscreen .stp-canvas, .stp-stage:fullscreen .stp-tree { height: calc(100vh - 230px); max-height: none; }
.stp-view { position: relative; }
.stp-loader { width: min(420px, 90%); display: flex; flex-direction: column; gap: 6px; }
.stp-cmp { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; padding: 6px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,.14); z-index: 2; }
.stp-cmp-col { width: 170px; }
.stp-cmp-l { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.stp-cmp-box { width: 170px; height: 130px; border-radius: 8px; background: #f3f6fb; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stp-cmp-box canvas { display: block; width: 100% !important; height: 100% !important; }
.stp-cmp-empty { text-align: center; padding: 8px; }
/* CFD */
.cfd-panel { display: grid; grid-template-columns: 260px 1fr; gap: 12px; }
.cfd-ctl { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.cfd-ctl .field { margin-bottom: 6px; }
.cfd-view { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfd-canvas-wrap { width: 100%; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; background: #0f172a; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.cfd-canvas { width: 100%; height: 100%; image-rendering: auto; }
.cfd-stats { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .cfd-panel { grid-template-columns: 1fr; } .stp-cmp { transform: scale(.7); transform-origin: top left; } .stp-canvas, .stp-tree { height: 46vh; } }
.dz-info { padding: 12px 16px 14px; }
.dz-info-head { margin-bottom: 8px; }
.dz-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stp-stage-in { position: relative; }
.dz-notes-panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dz-notes-panel .dz-notes { max-height: none; }
.stp-cb { flex: none; width: 14px; height: 14px; margin: 0; accent-color: #1d4ed8; opacity: .35; }
.stp-row:hover .stp-cb, .stp-row.checked .stp-cb { opacity: 1; }
.stp-row.checked { background: #eff6ff; }
.stp-row.root .stp-cb { display: none; }
/* Ağaç satırındaki işaret kutusu: genel "switch" görünümü yerine küçük kare kutu */
input[type="checkbox"].stp-cb { appearance: auto; -webkit-appearance: checkbox; width: 14px !important; height: 14px !important; min-width: 14px; border-radius: 3px; background: none; border: 0; padding: 0; margin: 0; }
input[type="checkbox"].stp-cb::after { display: none; content: none; }
.stp-folder { display: inline-flex; margin-right: 5px; vertical-align: -2px; }
/* 3B CFD (OpenFOAM) paneli */
.cfd-mode { margin-bottom: 10px; }
.cfd-status { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cfd-res .dz-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cfd-plots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfd-plot { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.cfd3d-view { width: 100%; height: min(60vh, 520px); border-radius: 12px; overflow: hidden; background: #f3f6fb; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.cfd3d-view canvas { display: block; }
.cfd-legend { display: block; margin-top: 4px; }
.cfd-tog { display: inline-flex; align-items: center; gap: 4px; }
.cfd-tog .stp-cb { opacity: 1; }
.cfd-log { max-height: 220px; overflow: auto; font-size: 11px; background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
.cfd-ctl details { margin: 6px 0; } .cfd-ctl summary { cursor: pointer; color: var(--primary); }
@media (max-width: 760px) { .cfd-plots { grid-template-columns: 1fr; } }
.stp-engine { margin-top: 2px; }
.stp-engine .input.sm { width: auto; min-width: 0; padding: 4px 6px; font-size: 12px; }
.stp-engine .stp-off { width: 64px; }
.vm-invite { white-space: pre-wrap; font: 13px/1.5 system-ui, sans-serif; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; }
.stp-chip { display: inline-flex; align-items: center; gap: 4px; background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 6px 1px 8px; margin: 0 4px 2px 0; font-size: 12px; font-weight: 600; }
.stp-chip-x { border: 0; background: transparent; color: #166534; cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.stp-chip-x:hover { color: var(--danger); }
.vm-guest-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text); padding: 2px 4px 0; }
.vm-guest-brand img { max-height: 40px; max-width: 160px; object-fit: contain; }
.fl-fuel-plot { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 6px; }
.fl-fuel-body { margin-top: 8px; }
/* 3B izleme: burun ucu etiketi (hız + yakıt çubukları) — Cesium kanvasının üstünde, burnun 5 m önüne izdüşürülür */
.r3d-nose { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; margin: -48px 0 0 -34px; width: 68px; padding: 3px 5px 4px; border-radius: 7px; background: rgba(15,23,42,.6); color: #ffe08a; font: 700 11px/1.2 system-ui, sans-serif; text-align: center; text-shadow: 0 1px 2px #000; display: flex; flex-direction: column; gap: 3px; }
.r3d-nose b { white-space: nowrap; }
.r3d-bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.r3d-bar.rate { height: 2px; }
.r3d-bar i { display: block; height: 100%; border-radius: inherit; background: #22c55e; transition: width .2s linear; }
.r3d-bar.rate i { background: #38bdf8; }
.fr-kpis-fuel { margin-top: 2.5mm; }
.fr-charts-fuel { margin: 3mm 0; }
.r3d-nose.off { background: rgba(127,29,29,.75); }
.r3d-nose.off b { color: #ff6b6b; }

/* ---------- Dron Yönetimi (Saha Yönetimi alt modülleri) ---------- */
.dr-live { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; }
.dr-side { display: flex; flex-direction: column; gap: 10px; }
.dr-side .card { padding: 10px 12px; }
.dr-map { position: relative; height: calc(100dvh - 330px); min-height: 420px; border-radius: var(--radius); overflow: hidden; background: #0b1220; }
.dr-map .r3d-map { position: absolute; inset: 0; }
.dr-map .dr-map-msg { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; padding: 20px; text-align: center; z-index: 1; }
.dr-map .r3d-hud { min-width: 250px; }
.dr-events { max-height: 170px; overflow: auto; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; }
.dr-events:empty::before { content: 'Henüz olay yok'; color: var(--muted); }
.dr-events > div { display: flex; gap: 10px; line-height: 1.6; white-space: nowrap; }
.dr-events > div > span:last-child { white-space: normal; }
.dr-events .sev-err { color: var(--danger); }
.dr-events .sev-warn { color: var(--warning); }
.dr-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.dr-kv span { color: var(--muted); }
.dr-kv b { text-align: right; font-variant-numeric: tabular-nums; }
.dr-bridge { display: flex; align-items: center; gap: 8px; padding: 8px 4px 4px; font-size: 13px; }
.dr-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-left: 10px; }
.dr-item:hover { background: var(--surface-2); }
.dr-item.on { border-color: var(--primary); background: var(--primary-soft); }
.dr-item .grow { flex: 1; min-width: 0; }
.dr-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex: 0 0 auto; }
.dr-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.dr-pair-code { font-size: 40px; letter-spacing: .25em; font-weight: 800; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 14px; background: var(--surface-2); border-radius: var(--radius); user-select: all; }
.dr-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; background: var(--surface-2); padding: 10px; border-radius: 8px; user-select: all; }
.dr-route { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.dr-route-svg { width: 100%; aspect-ratio: 1; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.dr-route-svg svg { width: 100%; height: 100%; display: block; }
table.dr-wp td { padding: 4px 6px; vertical-align: middle; }
table.dr-wp .input { height: 30px; padding: 2px 6px; font-size: 13px; min-width: 70px; }
table.dr-wp select.input { min-width: 120px; }
@media (max-width: 960px) {
  .dr-live, .dr-route { grid-template-columns: 1fr; }
  .dr-map { height: 55vh; }
}

/* ---------- Canlı Uçuş: GÖKTUNGU harekât ekranı (iframe) — HEPGO başlık/alt bar kalır, iframe aradaki alanı kaplar ---------- */
main#view.ops-view { position: absolute; inset: 0; max-width: none; padding: 0; margin: 0; }
.scroller.ops-scroll { overflow: hidden; }
.ops-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0b0e11; }
body.ops-full .app-header, body.ops-full .app-footer { display: none !important; }
/* Tam ekranda sürükleyici modül (data-immersive): HEPGO üst başlığı ve alt barı gizlenir, ekranı modül kaplar */
body.immersive .app-header, body.immersive .app-footer { display: none !important; }

/* ---------- Katlanabilir panel (ui.js fold): başlık düğmesi + gövde; uzun formları (ör. uçuş düzenleme) bölümlere ayırır ---------- */
.fold { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.fold:last-child { margin-bottom: 0; }
.fold-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.fold-head:hover .fold-title { color: var(--primary); }
.fold-chev { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.fold.open .fold-chev { transform: rotate(90deg); }
.fold-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-badge { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-body { padding: 12px; border-top: 1px solid var(--border); }
.fold-body[hidden], .fold:not(.open) .fold-body { display: none; }
.fold-body > .field:last-child, .fold-body > .row:last-child > .field { margin-bottom: 0; }
html[dir="rtl"] .fold-head { text-align: right; }
html[dir="rtl"] .fold-chev { transform: rotate(180deg); }
html[dir="rtl"] .fold.open .fold-chev { transform: rotate(90deg); }
/* Uçuş detayı: log yükleme bölümü Saha Görevi kartının alt bölümünde (ayrı kart değil) */
.fl-log-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fl-log-foot .fl-log-head { margin-bottom: 8px; }
.fl-log-foot .fl-log-head b { font-size: 13px; }
.task-sum.fixed { cursor: default; }
.task-sum.fixed:hover { background: none; }

/* Saha Yönetimi › Görev Listesi: filtre/eylem paneli listeyle aynı kartın başlığında; tüm filtreler tek kapsülde */
.task-list-card { overflow: hidden; }
.task-list-card > .filters { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface-2); }
.task-list-card .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.task-list-card > div > .empty { padding: 28px; text-align: center; color: var(--muted); }
.filter-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px; }
.filter-pill > .input, .filter-pill > select, .filter-pill .period-filter > select, .filter-pill .period-filter .input {
  border: 0; background: transparent; border-radius: 999px; box-shadow: none; height: 32px; }
.filter-pill > .input:focus, .filter-pill select:focus { background: var(--surface-2); outline: none; }
.filter-pill > * + * { border-left: 1px solid var(--border) !important; border-radius: 0 !important; }
.filter-pill > :last-child { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; }
.filter-pill .period-filter { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .filter-pill { border-radius: 16px; width: 100%; }
  .filter-pill > * { flex: 1 1 45%; }
  .filter-pill > * + * { border-left: 0 !important; }
}

/* Tam ekran üst bandı (app.js immersiveBar; Canlı Uçuş harekât ekranıyla aynı görünüm): kapsül, üstten 20px, %80, hafif şeffaf */
.imm-bar { position: fixed; top: 20px; left: 10%; width: 80%; z-index: 4000; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 6px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #cfd8e3;
  background: rgba(11,14,17,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.imm-logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.imm-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.imm-company { font-size: 15px; letter-spacing: .02em; color: #fff; }
.imm-title { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imm-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.imm-clock b { font-size: 18px; font-family: ui-monospace, Consolas, monospace; color: #fff; }
.imm-clock span { font-size: 11px; opacity: .7; }
/* Şirketten Haberler: kaldırılan paylaşımlarım (sebebiyle) */
.feed-removed { display: grid; gap: 12px; }
.feed-removed-item { padding: 12px 14px; border: 1px solid var(--line, #e6e8ee); border-radius: 10px; }
.feed-removed-text { margin: 4px 0; color: var(--muted, #6b7280); }
.feed-removed-reason { margin-top: 4px; }

/* ---------- Sistem geneli arama (üst çubuk büyüteci / Ctrl+K): ekran ortasında kutu + gruplu sonuç listesi ---------- */
.gs-back { position: fixed; inset: 0; top: var(--app-vt, 0px); height: var(--app-vh, 100%); background: rgba(16, 24, 40, .45);
  z-index: 7500; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; }
.gs-box { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 680px;
  display: flex; flex-direction: column; max-height: calc(var(--app-vh, 88vh) - 12vh); overflow: hidden; }
.gs-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
.gs-head svg { width: 20px; height: 20px; flex: none; }
.gs-input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--text); min-width: 0; }
.gs-input::-webkit-search-cancel-button { appearance: none; }
.gs-box.loading .gs-head svg { animation: gs-spin 1s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-hint, .gs-empty { padding: 14px 16px; color: var(--muted); font-size: 13px; }
.gs-list { overflow-y: auto; padding: 6px; }
.gs-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gs-count { background: var(--surface-2); border-radius: 999px; padding: 0 7px; font-weight: 600; }
.gs-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.gs-item:hover, .gs-item.active { background: var(--surface-2); text-decoration: none; }
.gs-item.active { outline: 2px solid var(--primary, #2563eb); outline-offset: -2px; }
.gs-type { flex: none; min-width: 76px; margin-top: 2px; font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.gs-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-snippet { font-size: 12px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gs-item mark, .gs-snippet mark { background: rgba(250, 204, 21, .45); color: inherit; border-radius: 3px; padding: 0 1px; }
.gs-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.gs-foot kbd { display: inline-block; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
  font: 11px/18px ui-monospace, monospace; background: var(--surface-2); margin-right: 2px; }
@media (max-width: 640px) {
  .gs-back { padding: 8px; }
  .gs-type { display: none; }
  .gs-foot { display: none; }
}
/* Telsiz düğmesi kişisel menünün çapasında gizli durur; menüdeki "Telsiz" maddesi onu tıklar. Canlı rozeti maddenin sağında. */
.rd-btn.rd-hidden { display: none; }
.dropdown .menu-link { position: relative; }
.dropdown .menu-link .rd-live { position: static; margin-left: auto; width: 9px; height: 9px; }

/* ---------- Uçuş Simülatörü (Dron Yönetimi › Uçuş Simülatörü; flightsim.js / flightsim3d.js) ---------- */
/* Sihirbaz */
.fs-step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fs-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.fs-step { margin-bottom: 14px; }
.fs-open { margin-bottom: 14px; }
.fs-open-list { display: flex; flex-direction: column; gap: 8px; }
.fs-open-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); flex-wrap: wrap; }
.fs-open-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-open-main .small { flex-basis: 100%; }
.fs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fs-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.fs-type:hover { border-color: var(--primary); }
.fs-type.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); background: var(--primary-soft); }
.fs-type-ico { width: 34px; height: 34px; color: var(--primary); }
.fs-type-ico svg { width: 100%; height: 100%; }
.fs-type b { font-size: 14px; }
.fs-type .small { line-height: 1.35; }
.fs-centers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.fs-center { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); }
.fs-center:hover { border-color: var(--primary); }
.fs-center.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.fs-nocenter { padding: 8px 0; }
.fs-world-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.fs-world-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.fs-slider { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.fs-slider > span { display: flex; justify-content: space-between; color: var(--muted); font-weight: 600; }
.fs-slider .fs-val { color: var(--text); font-variant-numeric: tabular-nums; }
.fs-slider input[type=range] { width: 100%; accent-color: var(--primary); }
.fs-world-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.fs-time, .fs-seed { display: flex; align-items: center; gap: 8px; }
.fs-airframe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.fs-airframe[hidden] { display: none; }
/* Kalkış yöntemi (§13): sabit kanatta tip kartlarının altında */
.fs-launch-step { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.fs-launch-step[hidden] { display: none; }
.fs-launch-step h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fs-launch-step > p { margin: 0 0 8px; }
.fs-launches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fs-launch-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); gap: 6px 18px; margin-top: 10px; }
.fs-launch-param[hidden] { display: none; }
.fs-launch-info { margin-top: 6px; }
.fs-launch-badge { white-space: nowrap; }
/* §27 INTERCEPTOR fırlatıcıları: 4 kart 2×2 (dar sihirbaz sütununda okunur), kart rozeti */
.fs-launches.fs-launches-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .fs-launches.fs-launches-4 { grid-template-columns: 1fr; } }
.fs-launch-badge2 { margin-left: 6px; font-size: 10px; vertical-align: 1px; white-space: nowrap; }
.fs-scope-btns .fs-scope-btn { display: inline-flex; align-items: center; }
/* §13.1 kontrol düzeni kartları (kalkış kartlarıyla aynı ızgara) + rozetler */
.fs-layout-step h4 { margin-top: 2px; }
.fs-layout-badge { white-space: nowrap; }
.fs-model-layout { white-space: nowrap; }
/* Görsel model kütüphanesi (§12): kart ızgarası + yönelim paneli */
.fs-model-step { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.fs-model-step > p { margin: 0 0 8px; }
.fs-models-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fs-models-head > .small { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fs-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fs-model { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.fs-model:hover { border-color: var(--primary); }
.fs-model.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); background: var(--primary-soft); }
.fs-model-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #e9eef6; }
.fs-model-ph { display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; padding: 8px; background: repeating-linear-gradient(45deg, #eef2f8 0 8px, #e4e9f2 8px 16px); }
.fs-model-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-model-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-model-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-model-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fs-model-prog { position: absolute; left: 8px; right: 8px; top: 8px; height: 22px; border-radius: 6px; background: rgba(11, 18, 32, .72); color: #e2e8f0; font-size: 11px; overflow: hidden; display: grid; place-items: center; }
.fs-model-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(59, 130, 246, .55); transition: width .2s linear; }
.fs-model-prog span { position: relative; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fs-model-prog[hidden] { display: none; }
.fs-model-prog-inline { position: static; height: 24px; }
.fs-models-info { margin-top: 6px; min-height: 1.2em; }
.fs-orient { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.fs-orient[hidden] { display: none; }
.fs-orient-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-orient-row > .small:first-child { min-width: 120px; }
.fs-orient-num { width: 96px; }
.fs-orient-off { display: inline-flex; align-items: center; gap: 4px; }
.fs-orient-off .fs-orient-num { width: 80px; }
.fs-orient-actions { justify-content: flex-end; }
.fs-design-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.fs-design-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.fs-design-row:hover { border-color: var(--primary); }
.fs-design-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-preview { position: relative; aspect-ratio: 4 / 3; min-height: 240px; border-radius: var(--radius); overflow: hidden; background: #0b1220; border: 1px solid var(--border); }
.fs-preview canvas { position: absolute; inset: 0; }
.fs-preview-msg { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; font-size: 13px; text-align: center; padding: 16px; }
.fs-start-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.fs-start { height: 42px; padding: 0 26px; font-size: 15px; }
.fs-mock-note { margin-bottom: 14px; }
@media (max-width: 900px) { .fs-world-wrap { grid-template-columns: 1fr; } .fs-world-grid { grid-template-columns: 1fr; } }

/* Oturum ekranı: tam alan 3B tuval + yüzen paneller (Canlı Uçuş ops-view kalıbı) */
.fs-stage { position: absolute; inset: 0; background: #0b1220; overflow: hidden; color: #e6e9ef; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Tam ekran (flightsim.js ⛶): BELGE tam ekrandadır (document.documentElement) — ui.js modal()/toast() ve açılır menüler body'de kalır ve görünür
   (sahne tam ekran öğesi olsaydı dışında kalır, görünmezlerdi). body.immersive (app.js, data-immersive) üst başlık/alt barı gizler; .fs-full sahneyi
   tüm ekrana sabitler; çıkınca (Escape / ⛶) sınıflar kalkar, düzen eski hâline döner. */
body.fs-full .app-header, body.fs-full .app-footer, body.fs-full #immBar { display: none !important; }
body.fs-full main#view.ops-view { position: fixed; inset: 0; z-index: 50; }
.fs-canvas { position: absolute; inset: 0; }
.fs-canvas canvas { display: block; width: 100%; height: 100%; }
.fs-msg { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: rgba(11, 18, 32, .55); color: #cbd5e1; font-size: 15px; text-align: center; padding: 20px; pointer-events: none; }
.fs-msg.err { color: #fca5a5; }
.fs-msg[hidden], .fs-crash[hidden], .fs-ended[hidden], .fs-gimbal[hidden] { display: none; }
/* Gerçek arazi: kaynak atfı (sağ alt), sihirbaz kip satırı, önizleme ilerleme şeridi */
.fs-attrib { position: absolute; right: 8px; bottom: 54px; z-index: 3; font-size: 10.5px; color: rgba(226, 232, 240, .85); background: rgba(11, 18, 32, .45); padding: 2px 7px; border-radius: 6px; pointer-events: none; max-width: 60%; text-align: right; }
.fs-attrib[hidden] { display: none; }
/* Google 3B (Photorealistic 3D Tiles): ToS atfı — Google logosu + veri sağlayıcıları, sol alt (Mission Planner kutusunun üstü) */
.fs-attrib.fs-attrib-g3d { left: 12px; right: auto; bottom: 226px; display: flex; align-items: center; gap: 8px; text-align: left; max-width: 46%; background: rgba(11, 18, 32, .6); padding: 4px 8px; }
.fs-rigdiag { position: absolute; left: 12px; top: 56px; z-index: 5; margin: 0; font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; color: #e2e8f0; background: rgba(11, 18, 32, .72); padding: 6px 9px; border-radius: 6px; pointer-events: none; white-space: pre; max-width: 70%; }   /* §13 ?rigdiag=1 */
.fs-g3d-logo { height: 16px; width: auto; display: block; flex: none; }
.fs-preview .fs-g3d-logo { position: absolute; left: 8px; bottom: 8px; z-index: 2; height: 18px; background: rgba(11, 18, 32, .55); padding: 3px 6px; border-radius: 5px; box-sizing: content-box; }
.fs-preview .fs-g3d-logo[hidden] { display: none; }
.fs-mode-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.fs-mode-hint { margin: 0 0 10px; line-height: 1.4; }
.fs-preview-prog { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 12px; color: #e2e8f0; background: rgba(11, 18, 32, .7); padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.fs-preview-prog[hidden], .fs-slider[hidden], .fs-seed[hidden] { display: none; }
.fs-preview-info { margin-top: 6px; line-height: 1.4; min-height: 1.2em; }
.fs-nav { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; background: rgba(11, 18, 32, .72); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 12.5px; white-space: nowrap; max-width: calc(100% - 20px); }
.fs-nav b { font-weight: 700; }
.fs-nav-sub { color: #9aa4b6; overflow: hidden; text-overflow: ellipsis; }
.fs-nav-back { color: #e6e9ef; text-decoration: none; font-size: 15px; padding: 2px 8px; border-radius: 999px; }
.fs-nav-back:hover, .fs-nav-btn:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.fs-nav-btn { border: 0; background: transparent; color: #e6e9ef; font-size: 15px; line-height: 1; padding: 3px 7px; border-radius: 999px; cursor: pointer; }
body.immersive .fs-nav { top: 12px; }
/* HUD (sağ) — mono rakamlar */
.fs-hud { position: absolute; top: 56px; right: 12px; z-index: 5; width: 240px; background: rgba(11, 18, 32, .78); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; pointer-events: none; }
.fs-hud-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fs-hud .badge { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.fs-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; line-height: 1.8; }
.fs-row > span:first-child { color: #9aa4b6; }
.fs-rv { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.fs-rv i { font-style: normal; color: #9aa4b6; font-size: 11px; }
.fs-v { font-weight: 700; font-size: 14px; }
.fs-v.warn { color: #fbbf24; }
.fs-thr { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: -2px 0 6px; }
.fs-thr i { display: block; height: 100%; width: 0; background: #22c55e; transition: width .12s linear; }
.fs-row-rc { align-items: flex-end; }
.fs-rcs { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.fs-rc { width: 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.fs-rc i { display: block; width: 8px; height: 50%; background: #38bdf8; border-radius: 2px 2px 0 0; transition: height .12s linear; }
.fs-rc small { font-size: 9px; color: #9aa4b6; line-height: 1; }
.fs-wind-arrow { display: inline-block; color: #38bdf8; margin-right: 2px; transition: transform .3s; }
/* Mission Planner bağlantı kutusu (sol alt) */
.fs-mp { position: absolute; left: 12px; bottom: 60px; z-index: 5; width: 300px; background: rgba(11, 18, 32, .82); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.fs-mp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fs-mp-addr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-mp-addr code { font-size: 14px; font-weight: 700; color: #ffe08a; }
.fs-mp-hint { color: #9aa4b6; margin-top: 6px; line-height: 1.4; }
.fs-mp-hint b { color: #e6e9ef; }
/* Alt araç çubuğu */
.fs-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(11, 18, 32, .82); border-top: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px); flex-wrap: wrap; }
.fs-bar .pill-group { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 3px; }
.fs-bar .btn { background: transparent; border-color: transparent; color: #e6e9ef; }
.fs-bar .btn:hover { background: rgba(255, 255, 255, .12); }
.fs-bar .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.fs-bar .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.fs-bar .input.sm { height: 30px; padding: 0 8px; font-size: 13px; background: rgba(255, 255, 255, .08); color: #e6e9ef; border-color: transparent; border-radius: 999px; }
.fs-bar .input.sm option { color: #111; }
.fs-gimbal { color: #9aa4b6; }
/* §16 motor sesi: hoparlör düğmesi (🔊/🔇; M), ▾ ile ses düzeyi menüsü; "etkileşim bekleniyor" turuncu nokta (AudioContext askıda) */
.fs-audio { position: relative; display: inline-flex; gap: 2px; align-items: center; }
/* §17 ekran kaydı: üst şeritte kırmızı rozet (askeri HUD'un ● REC noktasıyla uyumlu), alt çubukta anahtar, Bitir'de yükleme çubuğu */
.fs-rec-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; background: rgba(255, 68, 68, .16); border: 1px solid rgba(255, 68, 68, .45); color: #ff6b6b; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.fs-rec-badge .fs-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4444; box-shadow: 0 0 6px rgba(255, 68, 68, .9); animation: fs-rec-blink 1.2s steps(1) infinite; }
.fs-rec-badge.paused { color: #c9ced8; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.fs-rec-badge.paused .fs-rec-dot { background: #9aa4b6; box-shadow: none; animation: none; }
@keyframes fs-rec-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.fs-rec-btn.off { opacity: .7; }
.fs-rec-btn.danger.primary { background: #c0392b; border-color: #c0392b; color: #fff; }
.fs-rec-bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 10px 0 6px; }
.fs-rec-bar i { display: block; height: 100%; width: 0; background: var(--primary, #2f80ed); transition: width .3s; }
.fs-rec-ok { color: #2e9e5b; font-weight: 700; margin: 0 0 6px; }
.fs-rec-err { color: #c0392b; font-weight: 600; margin: 0 0 6px; }
.fs-rec-pending { margin-bottom: 14px; }
.fs-audio-btn { position: relative; min-width: 36px; }
.fs-audio-btn.wait::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f5a524; box-shadow: 0 0 0 2px rgba(11, 18, 32, .9); }
.fs-audio-more { padding: 0 6px; min-width: 22px; font-size: 11px; }
.fs-audio-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 8; min-width: 220px; padding: 10px 12px; border-radius: 10px; background: rgba(11, 18, 32, .96); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); color: #e6e9ef; font-size: 12px; display: grid; gap: 6px; }
.fs-audio-menu[hidden] { display: none; }
.fs-audio-menu .fs-audio-row { display: flex; align-items: center; gap: 8px; }
.fs-audio-menu input[type=range] { flex: 1; accent-color: var(--primary); }
.fs-audio-menu .fs-audio-hint { color: #f5a524; }
/* Sanal kumanda: iki yarı saydam çubuk (sol gaz/yaw, sağ pitch/roll), klavye ipucu; HUD altı ağ göstergesi */
.fs-sticks { position: absolute; left: 0; right: 0; bottom: 70px; height: 150px; z-index: 6; pointer-events: none; }
.fs-sticks[hidden] { display: none; }
.fs-stick { position: absolute; bottom: 16px; width: 130px; height: 130px; border-radius: 50%; background: rgba(11, 18, 32, .55); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(4px); pointer-events: auto; touch-action: none; user-select: none; cursor: grab; }
.fs-stick[data-side="l"] { left: 330px; } .fs-stick[data-side="r"] { right: 270px; }
.fs-stick::before, .fs-stick::after { content: ''; position: absolute; background: rgba(255, 255, 255, .12); }
.fs-stick::before { left: 50%; top: 10px; bottom: 10px; width: 1px; } .fs-stick::after { top: 50%; left: 10px; right: 10px; height: 1px; }
.fs-stick-knob { position: absolute; left: calc(50% - 20px); top: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: rgba(56, 189, 248, .85); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); transition: transform .05s linear; }
.fs-stick.on { cursor: grabbing; } .fs-stick.on .fs-stick-knob { background: var(--primary); }
.fs-stick small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; color: #cbd5e1; font-size: 11px; white-space: nowrap; }
.fs-rc-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color: #9aa4b6; font-size: 11.5px; text-align: center; background: rgba(11, 18, 32, .6); padding: 3px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.fs-rc-warn { color: #fbbf24; } .fs-rc-warn[hidden] { display: none; }
.fs-stage.rc-on .fs-events { bottom: 222px; }
.fs-rc i.vr { background: #a78bfa; }
.fs-net { margin-top: 4px; font-size: 10.5px; color: #9aa4b6; text-align: right; } .fs-net.warn { color: #fbbf24; }
/* Olay şeridi (STATUSTEXT) — alt orta, en yeni üstte */
.fs-events { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 4; width: min(520px, 60%); display: flex; flex-direction: column; gap: 2px; pointer-events: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.fs-ev { display: flex; gap: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(11, 18, 32, .72); color: #cfd5e1; }
.fs-ev:nth-child(n+4) { opacity: .7; } .fs-ev:nth-child(n+6) { opacity: .45; }
.fs-ev-t { color: #9aa4b6; flex: none; }
.fs-ev.warn { color: #fbbf24; } .fs-ev.err { color: #f87171; }
/* ÇARPIŞMA bandı */
.fs-crash { position: absolute; top: 52px; left: 0; right: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px; background: rgba(185, 28, 28, .88); color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 18px; animation: fsblink 1s steps(2) infinite; pointer-events: none; }
.fs-crash-sub { font-weight: 500; letter-spacing: 0; font-size: 13px; opacity: .95; }
@keyframes fsblink { 50% { background: rgba(127, 29, 29, .88); } }
.fs-ended { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(11, 18, 32, .7); }
.fs-ended-box { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface); color: var(--text); padding: 22px 26px; border-radius: var(--radius); min-width: 260px; text-align: center; }
/* Kayıttan oynatma: kip seçimi, log listesi (sihirbaz) ve oynatma çubuğu (oturum) */
.fs-mode-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fs-log-search { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.fs-log-search .input { flex: 1; min-width: 0; }
/* Kaynak süzgeci (Gerçek / Simülasyon) + sıralama */
.fs-log-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -2px 0 10px; }
.fs-log-filter .seg { flex: none; }
.fs-log-filter .fs-log-sort { width: auto; min-width: 170px; height: 32px; }
.fs-log-counts { margin-inline-start: auto; }
.fs-origin { font-size: 10.5px; padding: 0 6px; flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.fs-origin svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.fs-origin.sim { background: rgba(167, 139, 250, .18); color: #7c3aed; }
.fs-origin.real { background: rgba(34, 197, 94, .16); color: #15803d; }
html[data-theme="dark"] .fs-origin.sim { color: #c4b5fd; } html[data-theme="dark"] .fs-origin.real { color: #86efac; }
.fs-lod { font-size: 10.5px; background: rgba(251, 191, 36, .2); color: #fbbf24; white-space: nowrap; }
.table-wrap th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-wrap th.sortable:hover, .table-wrap th.sortable.on { color: var(--primary); }
.fs-logs { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.fs-log { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); width: 100%; }
.fs-log:hover { border-color: var(--primary); }
.fs-log.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.fs-log-ico { width: 28px; height: 28px; color: var(--primary); flex: none; }
.fs-log-ico svg { width: 100%; height: 100%; }
.fs-log-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fs-log-main b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-log-ext { font-size: 10px; padding: 0 5px; }
.fs-log-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-variant-numeric: tabular-nums; }
.fs-log-meta b { font-size: 13px; }
.fs-playbar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 320px; }
.fs-play-btn { min-width: 38px; font-size: 14px; }
.fs-speeds .btn { padding: 0 8px; font-variant-numeric: tabular-nums; }
.fs-seek-wrap { position: relative; flex: 1; min-width: 160px; height: 22px; display: flex; align-items: center; }
.fs-seek { width: 100%; accent-color: #a78bfa; cursor: pointer; margin: 0; }
.fs-seek-marks { position: absolute; left: 7px; right: 7px; top: 1px; height: 4px; pointer-events: none; }
.fs-seek-marks b { position: absolute; top: 0; width: 2px; height: 4px; border-radius: 1px; background: #fbbf24; transform: translateX(-1px); pointer-events: auto; }
.fs-seek-marks b.err { background: #f87171; } .fs-seek-marks b.to { background: #22c55e; width: 3px; height: 6px; top: -1px; }
.fs-time-lbl { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #e6e9ef; white-space: nowrap; }
.fs-clock-lbl { color: #9aa4b6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-rec .fs-mp-hint div { line-height: 1.5; }
.fs-rec .fs-mp-hint b { color: #e6e9ef; word-break: break-all; }
.fs-replay .fs-events { bottom: 64px; }
@media (max-width: 900px) { .fs-playbar { min-width: 0; flex-basis: 100%; order: 3; } .fs-clock-lbl { display: none; } }
@media (max-width: 760px) {
  .fs-hud { width: 200px; top: 50px; font-size: 11.5px; }
  .fs-mp { width: calc(100% - 24px); bottom: 96px; }
  .fs-events { display: none; }
  .fs-nav-sub { display: none; }
  .fs-stick[data-side="l"] { left: 12px; } .fs-stick[data-side="r"] { right: 12px; }
  .fs-rc-hint { display: none; }
  .fs-stage.rc-on .fs-mp { display: none; }
}

/* ===== Uçuş Simülatörü — askeri tarz FPV HUD (flightsim_hud.js; yalnız Dron kamerası kipinde) ===== */
.fs-mhud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fs-mhud[hidden] { display: none; }
.fs-stage.fs-mhud-on .fs-hud, .fs-stage.fs-mhud-on .fs-crash { display: none; }   /* sağ veri paneli ve ÇARPIŞMA bandı HUD içinde */
.fs-mhud-btn[hidden] { display: none; }

/* ===== Uçuş Simülatörü — FPV OSD (flightsim_fpv_osd.js; yalnız FPV 'pilot' kipinde; §22) ===== */
.fs-osd { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fs-osd[hidden] { display: none; }
.fs-stage.fs-osd-on .fs-hud, .fs-stage.fs-osd-on .fs-crash { display: none; }   /* sağ veri paneli ve ÇARPIŞMA bandı OSD içinde (kırmızı ÇARPIŞMA uyarısı) */
.fs-fpv-ctl[hidden] { display: none; }
.fs-fpv-menu { min-width: 240px; }
.fs-fpv-menu .fs-fpv-row { cursor: pointer; }
.fs-fpv-menu .fs-fpv-row input { accent-color: var(--primary); }
.fs-fpv-fov { opacity: .75; font-size: 11px; }

/* ===== Uçuş Simülatörü — YERLİ harekât paneli (§14; flightsim_panel.js): TEK KART, GÖKTUNGU dron kartı görünümü BİREBİR, iframe YOK =====
   Kullanıcı geri bildirimi: "paneller arasına boşluk koymuşsun; tek bir panel olacak, duruma göre küçülüp büyüyecek; orijinal CSS yapısına birebir
   uy". Kurallar static/ops/css/stil.css + hepgo.css'ten kopyalanıp .fs-pn altına kapsamlandı (kaynak sınıf adı her kuralın yanında):
   .fs-pn-kart = .dron-kart.ayrik (zemin --panel-arka, 1 px --cizgi, 6 px köşe, 0 8px 32px gölge; 400 px hepgo.css) · .fs-pn-baslik = .dron-kart-baslik
   · .fs-pn-nokta = .dk-nokta · .fs-pn-ad = .dk-ad · .fs-pn-ozet = .dk-baslik-ozet · .fs-pn-rozet = hepgo.css .hk-bagla kapsülü · .fs-pn-kucult =
   .dk-kucult-btn · .yalniz-baslik = .dk-yalniz-baslik · .fs-pn-govde = .dron-kart-icerik (Consolas 12 px) · .fs-pn-ust/.fs-pn-hazir/.fs-pn-islem-btn =
   .dk-ust-satir/.dk-hazir-rozet/.dk-islem-btn · .fs-pn-bas = .dk-konsol-bas (bölüm başlık şeridi; katlanır) · .fs-pn-pfd = .dk-pfd-canvas ·
   .fs-pn-tile = .dk-tel-hucre (+ .dk-tel-deger/.dk-tel-etiket) · .fs-pn-izgara/.fs-pn-grup/.fs-pn-hucre = .dk-islem-izgara/.dk-islem-grup/
   .dk-islem-hucre · .fs-pn-girdi = .dk-irtifa · .fs-pn-kon-* = .dk-konsol-* · .fs-pn-menu/.fs-pn-mod-* = .dk-mini-popup/.dk-mod-popup.
   Renk değişkenleri GÖKTUNGU KOYU teması (stil.css :root) — HEPGO açık/koyu temasından bağımsız, kart her temada koyu.
   .fs-pn: tam alan kapsayıcı, pointer-events:none (fare/tekerlek 3B'ye); kart pointer-events:auto. .fs-ops-host: panel var · .fs-ops: kart görünür
   (eski .fs-hud/.fs-cmds/.fs-events gizli) · .fs-fpv: Dron kamerası (kart gizli, askeri HUD kalır) · .fs-pn-nohub: kayıt/sahte kip (İŞLEMLER yok). */
.fs-stage { --fs-bar-h: 54px; }   /* alt çubuk yüksekliği (flightsim_panel.js ResizeObserver günceller) */
.fs-pn, .fs-pn-yuzen {   /* GÖKTUNGU koyu tema değişkenleri: panel kökü + yüzen MP kutusu (panel kapalıyken sahnede ayrı durur) */
  --gt-panel: #0b0e11; --gt-cizgi: #1e2630; --gt-interceptor: #35d0ff; --gt-metin: #cfd8e3; --gt-soluk: #5c6b7a; --gt-iyi: #3ddc84; --gt-kotu: #ff5d5d; --gt-uyari: #ffc94d;
  --gt-panel-arka: rgba(11, 14, 17, .94); --gt-giris-arka: #060809; --gt-dugme-arka: #141a21; --gt-dugme-hover: #1c2530; --gt-vurgu: var(--gt-interceptor);
  --gt-mono: Consolas, "Cascadia Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", "Ubuntu Mono", "Noto Sans Mono", monospace;
  --gt-kaydir-tutamac: rgba(120, 135, 150, .45);   /* kaydırma tutamacı: koyu gri yarı saydam */
  color: var(--gt-metin); color-scheme: dark;   /* yerleşik select/number açılır listeleri ve okları koyu (beyaz zemin kalmasın) */
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Roboto, Ubuntu, "DejaVu Sans", "Liberation Sans", sans-serif; }
.fs-pn { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--fs-bar-h)); z-index: 7; pointer-events: none; display: none; }
/* kaydırma çubukları (kullanıcı: "scroll ince ve panele uygun renkte"): 6 px, ray panel zemini renginde, tutamaç koyu gri yarı saydam yuvarlak —
   gövde, haberleşme konsolu, mod menüsü ve panel içindeki her kaydırılan öğe; Firefox: scrollbar-width/scrollbar-color */
@supports not selector(::-webkit-scrollbar) {   /* Firefox (Chromium'da scrollbar-width tanımlanırsa ::-webkit-scrollbar YOK SAYILIR → yalnız burada; app.css 3204 kalıbı) */
  .fs-pn, .fs-pn *, .fs-pn-yuzen, .fs-pn-yuzen * { scrollbar-width: thin; scrollbar-color: var(--gt-kaydir-tutamac) var(--gt-panel-arka); }
}
.fs-pn ::-webkit-scrollbar, .fs-pn-yuzen ::-webkit-scrollbar { width: 6px; height: 6px; }
.fs-pn ::-webkit-scrollbar-track, .fs-pn ::-webkit-scrollbar-corner, .fs-pn-yuzen ::-webkit-scrollbar-track { background: var(--gt-panel-arka); margin: 0; }
.fs-pn ::-webkit-scrollbar-thumb, .fs-pn-yuzen ::-webkit-scrollbar-thumb { background: var(--gt-kaydir-tutamac); border-radius: 3px; border: none; min-height: 24px; }
.fs-pn ::-webkit-scrollbar-thumb:hover, .fs-pn-yuzen ::-webkit-scrollbar-thumb:hover { background: rgba(140, 155, 170, .7); }
.fs-pn ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.fs-stage.fs-ops .fs-pn { display: block; }
.fs-stage.fs-ops.fs-fpv .fs-pn { display: none; }
.fs-stage.fs-ops .fs-hud, .fs-stage.fs-ops .fs-cmds, .fs-stage.fs-ops .fs-events { display: none; }   /* veri paneli, komutlar ve olay şeridi kartta */
.fs-stage.fs-ops-host .fs-crash { z-index: 9; }   /* ÇARPIŞMA bandı kartın da üstünde */
.fs-pn-ico { display: inline-block; line-height: 0; flex: none; } .fs-pn-ico svg { width: 100%; height: 100%; display: block; }
/* --- kart (.dron-kart.ayrik): sağ üstte, başlığından sürüklenir, içerik taşarsa gövde kaydırılır (max-height = alan) --- */
.fs-pn-kart { position: absolute; top: 56px; right: 12px; width: 400px; max-height: calc(100% - 64px); display: flex; flex-direction: column; pointer-events: auto;
  background: var(--gt-panel-arka); border: 1px solid var(--gt-cizgi); border-radius: 6px; box-shadow: 0 8px 32px rgba(0, 0, 0, .55); color: var(--gt-metin); overflow: hidden; }
.fs-pn-kart.free { right: auto; }
.fs-pn-kart.dragging { opacity: .85; }
/* başlık şeridi (.dron-kart-baslik): 10 px dolgu, 600, --dugme-arka zemin, alt çizgi; ayrık kartta tutamaç (grab) */
.fs-pn-baslik { flex: none; display: flex; align-items: center; padding: 10px; font-weight: 600; font-size: 12px; user-select: none; touch-action: none; cursor: grab;
  background: var(--gt-dugme-arka); color: var(--gt-metin); border-bottom: 1px solid var(--gt-cizgi); }
.fs-pn-baslik:hover { background: var(--gt-dugme-hover); }
.fs-pn-baslik:active { cursor: grabbing; }
.fs-pn-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--gt-soluk); flex: none; margin-right: 8px; }   /* .dk-nokta: durum LED'i */
.fs-pn-nokta.bagli { background: var(--gt-iyi); } .fs-pn-nokta.baglaniyor { background: var(--gt-uyari); } .fs-pn-nokta.kotu { background: var(--gt-kotu); } .fs-pn-nokta.sanal { background: #b48cff; }
.fs-pn-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }   /* .dk-ad */
.fs-pn-ozet { display: inline-flex; align-items: baseline; gap: 6px; flex: none; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; }   /* .dk-baslik-ozet */
.fs-pn-ozet-irt { color: var(--gt-metin); font-variant-numeric: tabular-nums; } .fs-pn-ozet-irt:empty { display: none; }
.fs-pn-ozet-kip { color: var(--gt-soluk); font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } .fs-pn-ozet-kip:empty { display: none; }
/* rozet kapsülleri (hepgo.css .hk-bagla): 22 px, 11 px 600, ince kenarlık; durum rengi yalnız yazı/kenarlıkta */
.fs-pn-rozet { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 11px; border: 1px solid var(--gt-cizgi); background: rgba(255, 255, 255, .04);
  color: var(--gt-metin); font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; font-family: var(--gt-mono); }
.fs-pn-rozet.bagli { color: #22c55e; border-color: rgba(34, 197, 94, .55); }
.fs-pn-rozet.baglaniyor { color: var(--gt-uyari); border-color: rgba(255, 201, 77, .5); }
.fs-pn-rozet.yok { color: #8a94a3; }
.fs-pn-rozet.kotu { color: var(--gt-kotu); border-color: rgba(255, 93, 93, .55); }
.fs-pn-rozet.sanal { color: #b48cff; border-color: rgba(180, 140, 255, .5); }
.fs-pn-kucult { background: none; border: none; color: var(--gt-soluk); cursor: pointer; padding: 2px 5px; margin-left: 6px; font-size: 11px; line-height: 1; display: inline-flex; }   /* .dk-kucult-btn */
.fs-pn-kucult:hover { color: #fff; }
.fs-pn-kucult svg { width: 12px; height: 12px; }
.fs-pn-reset { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--gt-soluk); cursor: pointer; padding: 2px 5px; margin-left: 6px; line-height: 1; display: inline-flex; }   /* §35 kart başlığında onaylı Sıfırla */
.fs-pn-reset:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.fs-pn-reset svg { width: 13px; height: 13px; }
.fs-pn-kart.yalniz-baslik .fs-pn-baslik { border-bottom: none; }   /* .dk-yalniz-baslik: yalnız başlık şeridi kalır */
.fs-pn-kart.yalniz-baslik > :not(.fs-pn-baslik) { display: none !important; }
/* gövde (.dron-kart-icerik): 10 px dolgu, Consolas 12 px; bölümler tek gövdede, aralarında boşluk yok (ince çizgi) */
.fs-pn-govde { padding: 10px; font-family: var(--gt-mono); font-size: 12px; line-height: 1.5; overflow-y: auto; overflow-x: hidden; min-height: 0; }   /* kaydırma çubuğu: .fs-pn ::-webkit-scrollbar (6 px) */
/* üst satır (.dk-ust-satir): UÇUŞA HAZIR rozeti (%50) + İŞLEMLER düğmesi (%50) */
.fs-pn-ust { display: flex; gap: 6px; align-items: stretch; margin: 0 0 8px; }
.fs-pn-hazir { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--gt-cizgi); border-radius: 5px; background: var(--gt-giris-arka); color: var(--gt-metin);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .6px; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }   /* .dk-hazir-rozet */
.fs-pn-hazir:hover { filter: brightness(1.12); }
.fs-pn-hazir-metin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pn-hazir.hazir { border-color: rgba(76, 175, 80, .55); background: rgba(76, 175, 80, .12); color: #8fe39a; }
.fs-pn-hazir.hazir-uyari { border-color: rgba(240, 178, 60, .55); background: rgba(240, 178, 60, .12); color: #f3cd7c; }
.fs-pn-hazir.hazir-degil { border-color: rgba(224, 85, 85, .6); background: rgba(224, 85, 85, .14); color: #f09b9b; }
.fs-pn-hazir.ucusta { border-color: rgba(90, 170, 255, .55); background: rgba(90, 170, 255, .12); color: #9fcaff; }
.fs-pn-hazir.bilinmiyor { border-color: rgba(140, 150, 160, .35); color: #c2cbd6; }
.fs-pn-hazir.off { cursor: default; } .fs-pn-hazir.off:hover { filter: none; }
.fs-pn-islem-btn { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(90, 170, 255, .45); border-radius: 5px;
  background: rgba(90, 170, 255, .12); color: #9fcaff; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .6px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background .15s, border-color .15s; }   /* .dk-islem-btn */
.fs-pn-islem-btn:hover, .fs-pn-islem-btn.acik { background: rgba(90, 170, 255, .24); border-color: rgba(90, 170, 255, .7); color: #fff; }
.fs-pn-islem-metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* bölüm (.dk-konsol): üst çizgi; başlık şeridi (.dk-konsol-bas: 3px 6px, 11 px, soluk, --dugme-arka) ok ile katlanır */
.fs-pn-bolum { border-top: 1px solid var(--gt-cizgi); margin-top: 2px; }
.fs-pn-bas { display: flex; align-items: center; gap: 6px; padding: 3px 6px; cursor: pointer; user-select: none; font-size: 11px; color: var(--gt-soluk); background: var(--gt-dugme-arka); }
.fs-pn-bas:hover { background: var(--gt-dugme-hover); }
.fs-pn-bas:focus-visible { outline: 1px solid var(--gt-vurgu); outline-offset: -1px; }
.fs-pn-ok { display: inline-flex; width: 9px; height: 9px; transition: transform .15s; }   /* .dk-konsol-ok */
.fs-pn-ok svg { width: 9px; height: 9px; }
.fs-pn-bolum.folded .fs-pn-ok { transform: rotate(-90deg); }
.fs-pn-bas-ad { flex: 1; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }   /* .dk-konsol-ad */
.fs-pn-bolum.folded > :not(.fs-pn-bas) { display: none; }
.fs-pn-kon-ikon { width: 11px; height: 11px; color: var(--gt-vurgu); }   /* .dk-konsol-ikon */
.fs-pn-kon-araclar { display: flex; gap: 4px; align-items: center; }
.fs-pn-kon-sayac { font-family: monospace; font-size: 10px; padding: 0 4px; border-radius: 6px; background: var(--gt-panel); border: 1px solid var(--gt-cizgi); color: var(--gt-soluk); }   /* .dk-konsol-sayac */
.fs-pn-kon-btn { background: none; border: none; cursor: pointer; color: var(--gt-soluk); font-size: 10px; padding: 1px 4px; border-radius: 3px; line-height: 1.2; }   /* .dk-konsol-btn */
.fs-pn-kon-btn:hover { background: var(--gt-panel); color: var(--gt-metin); }
/* PFD (.dk-pfd-canvas): zemin/kenarlık YOK, 8 px köşe; genişlik × 0,47 */
.fs-pn-pfd-wrap { padding: 4px 0 0; }
.fs-pn-pfd { display: block; width: 100%; height: 178px; background: transparent; border-radius: 8px; border: none; }
/* telemetri karoları (.dk-tel-hucre): ikon 20 px · Consolas 12 px kalın değer · 9 px büyük harf etiket; 4×2 ızgara, 6 px aralık */
.fs-pn-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px 0 4px; }
.fs-pn-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; background: rgba(0, 0, 0, .18); border: 1px solid var(--gt-cizgi); border-radius: 5px; text-align: center; min-width: 0; position: relative; }
.fs-pn-tile .fs-pn-ico { width: 20px; height: 20px; color: var(--gt-interceptor); }
.fs-pn-tile[data-tile="arm"] .fs-pn-ico, .fs-pn-tile[data-tile="type"] .fs-pn-ico { color: var(--gt-soluk); }
.fs-pn-tile.iyi .fs-pn-ico { color: var(--gt-iyi); } .fs-pn-tile.warn .fs-pn-ico { color: var(--gt-uyari); } .fs-pn-tile.kotu .fs-pn-ico { color: var(--gt-kotu); }
.fs-pn-tile.takeoff .fs-pn-ico, .fs-pn-tile.takeoff .fs-pn-tile-v { color: var(--gt-iyi); }   /* .dk-tkland.takeoff */
.fs-pn-tile.land .fs-pn-ico, .fs-pn-tile.land .fs-pn-tile-v { color: var(--gt-uyari); }   /* .dk-tkland.land */
.fs-pn-tile-v { font-family: var(--gt-mono); font-size: 12px; font-weight: 700; color: var(--gt-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* .dk-tel-deger */
.fs-pn-tile-sub { font-size: 9px; color: var(--gt-soluk); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* .dk-kmh */
.fs-pn-tile-sub:empty { display: none; }
.fs-pn-tile-et { font-size: 9px; letter-spacing: .1em; color: var(--gt-soluk); text-transform: uppercase; }   /* .dk-tel-etiket */
.fs-pn-tile.act { cursor: pointer; transition: background .12s, border-color .12s, transform .08s; }   /* .dk-hucre-btn */
.fs-pn-tile.act:hover { background: var(--gt-cizgi); border-color: var(--gt-vurgu); }
.fs-pn-tile.act:active { transform: scale(.97); }
.fs-pn-tile.act.off { cursor: default; opacity: .4; }
.fs-pn-tile.act.off:hover { background: rgba(0, 0, 0, .18); border-color: var(--gt-cizgi); }
.fs-pn-tile.act.off:active { transform: none; }
/* İŞLEMLER (.dk-islem-izgara 3 sütun; .dk-islem-grup grup başlığı; .dk-islem-hucre: 74 px, ikon 19 px, 10 px metin) */
.fs-pn-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 7px 0 2px; }
.fs-pn-grup { grid-column: 1 / -1; margin: 6px 0 1px; padding: 3px 2px 4px; border-bottom: 1px solid var(--gt-cizgi); color: var(--gt-soluk); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fs-pn-grup:first-child { margin-top: 0; }
.fs-pn-hucre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 74px; min-width: 0; padding: 9px 5px; border: 1px solid var(--gt-cizgi); border-radius: 6px;
  background: var(--gt-dugme-arka); color: var(--gt-metin); font: inherit; cursor: pointer; text-align: center; transition: background .15s, border-color .15s, transform .1s; }
.fs-pn-hucre:hover:not(:disabled) { background: var(--gt-dugme-hover); border-color: rgba(90, 170, 255, .55); }
.fs-pn-hucre:active:not(:disabled) { transform: scale(.97); }
.fs-pn-hucre:disabled { opacity: .4; cursor: not-allowed; }
.fs-pn-hucre-ico { width: 19px; height: 19px; color: var(--gt-interceptor); }
.fs-pn-hucre-metin { font-size: 10px; font-weight: 600; line-height: 1.25; letter-spacing: .2px; word-break: break-word; }
.fs-pn-hucre.tehlikeli { border-color: rgba(224, 85, 85, .45); } .fs-pn-hucre.tehlikeli .fs-pn-hucre-ico { color: #f09b9b; }
.fs-pn-hucre.tehlikeli:hover:not(:disabled) { background: rgba(224, 85, 85, .16); border-color: rgba(224, 85, 85, .75); }
.fs-pn-hucre-girdi { cursor: default; gap: 5px; } .fs-pn-hucre-girdi:hover { background: var(--gt-dugme-arka); border-color: var(--gt-cizgi); }
.fs-pn-girdi { width: 56px; padding: 3px 4px; border: 1px solid var(--gt-cizgi); border-radius: 3px; background: var(--gt-giris-arka); color: var(--gt-metin); font: inherit; font-size: 11px; text-align: center; }   /* .dk-irtifa */
.fs-pn-girdi:disabled { opacity: .4; }
.fs-pn-girdi option { background: var(--gt-giris-arka); color: var(--gt-metin); }   /* color-scheme: dark ile açılır liste koyu; seçenek metni açık */
/* koyu düğme (hepgo.css .hk düğme kalıbı: --dugme-arka zemin, ince kenarlık) — MP Kopyala vb.; .btn (beyaz) panelde KULLANILMAZ */
.fs-pn-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--gt-cizgi); border-radius: 4px; background: var(--gt-dugme-arka); color: var(--gt-metin);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .2px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.fs-pn-btn:hover { background: var(--gt-dugme-hover); border-color: rgba(90, 170, 255, .55); color: #fff; }
.fs-pn-btn:active { transform: scale(.97); }
/* MISSION PLANNER bölümü (TEK bileşen; flightsim_panel.js placeMp): adres mono seçilebilir · Kopyala koyu · talimat gri; rozet bölüm başlığında */
.fs-pn-mp { padding: 7px 0 4px; }
.fs-pn-mp-adres { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-pn-mp-kod { font-family: var(--gt-mono); font-size: 12.5px; font-weight: 700; color: #ffe08a; user-select: text; -webkit-user-select: text; cursor: text; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pn-mp-not { margin-top: 6px; } .fs-pn-mp-not b { color: var(--gt-metin); }
.fs-pn-mp-yuva { display: inline-flex; flex: none; }
.fs-pn-mp-rozet { height: 18px; margin-left: 0; padding: 0 7px; font-size: 10px; border-radius: 9px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 16px; }
.fs-pn-mp-rozet.yok { color: #8a94a3; }
/* yüzen MP kutusu (.fs-mp konumu: sol alt, 300 px): panel kapalı (sade görünüm) ya da FPV'de gösterilir; panel görünürken hidden — KOYU, beyaz düğme yok */
.fs-mp.fs-pn-yuzen { background: var(--gt-panel-arka); border: 1px solid var(--gt-cizgi); border-radius: 6px; padding: 8px 10px; font-family: var(--gt-mono); font-size: 12px; backdrop-filter: none; box-shadow: 0 8px 32px rgba(0, 0, 0, .45); }
.fs-mp.fs-pn-yuzen[hidden] { display: none; }
.fs-pn-yuzen-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--gt-soluk); }
.fs-pn-yuzen-bas b { font-weight: 600; color: var(--gt-soluk); letter-spacing: .06em; white-space: nowrap; }   /* bölüm başlığıyla aynı dil (.fs-pn-bas-ad) */
.fs-pn-yuzen-bas .fs-pn-mp-rozet { flex: 0 1 auto; min-width: 0; }
.fs-stage.fs-ops .fs-mp.fs-pn-yuzen { display: none; }   /* panel görünürken sol altta MP kutusu YOK (bilgi panelde) */
.fs-stage.fs-ops.fs-fpv .fs-mp.fs-pn-yuzen:not([hidden]) { display: block; }   /* FPV: panel gizli → yüzen kutu */
.fs-pn-route { width: 100%; text-align: left; padding: 5px 6px; }
.fs-pn-tam { grid-column: 1 / -1; min-width: 0; }
.fs-pn-not { font-size: 10px; color: var(--gt-soluk); line-height: 1.4; } .fs-pn-not:empty { display: none; }
.fs-pn-perm { color: var(--gt-uyari); }
/* Haberleşme konsolu (.dk-konsol-govde): #0b0f14 zemin, 10,5 px mono; satır (.dk-kons-satir) = saat · ETİKET · metin */
.fs-pn-kon-govde { max-height: 168px; overflow-y: auto; overflow-x: hidden; background: #0b0f14; padding: 3px 4px; font-family: var(--gt-mono); font-size: 10.5px; line-height: 1.45; }
.fs-pn-line { display: flex; gap: 5px; white-space: pre-wrap; word-break: break-word; align-items: baseline; color: var(--gt-metin); }
.fs-pn-line .t { color: #5b6b7a; flex: 0 0 auto; }   /* .dk-kons-ts */
.fs-pn-line .tag { color: #7aa2c8; flex: 0 0 auto; min-width: 48px; font-weight: 600; }   /* .dk-kons-etiket */
.fs-pn-line .x { min-width: 0; }
.fs-pn-line.err .x { color: var(--gt-kotu); } .fs-pn-line.warn .x { color: var(--gt-uyari); } .fs-pn-line.ok .x { color: var(--gt-iyi); }
/* mod menüsü (.dk-mini-popup + .dk-mod-popup 232 px: .dk-mod-izgara 3 sütun, .dk-mod-btn) — panel köküne eklenir (flightsim_panel.js modeMenu) */
.fs-pn-menu { position: absolute; z-index: 20; pointer-events: auto; width: 232px; padding: 0 0 10px; background: var(--gt-panel-arka); border: 1px solid var(--gt-cizgi); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: 11px; color: var(--gt-metin); overflow: hidden; font-family: var(--gt-mono); }
.fs-pn-menu-bas { padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gt-soluk); background: var(--gt-dugme-arka); border-bottom: 1px solid var(--gt-cizgi); }
.fs-pn-mod-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 10px 0; }
.fs-pn-mod-btn { padding: 8px 2px; font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; background: transparent; border: 1px solid var(--gt-cizgi); border-radius: 4px; color: var(--gt-metin); cursor: pointer; transition: background .12s, border-color .12s; }
.fs-pn-mod-btn:hover { background: var(--gt-cizgi); border-color: var(--gt-vurgu); }
.fs-pn-mod-btn.aktif { background: var(--gt-vurgu); border-color: var(--gt-vurgu); color: #fff; cursor: default; }
.fs-pn-check { display: grid; gap: 4px; margin-top: 10px; }   /* kalkış penceresi kontrol listesi (ui.js modal, body'de) */
.fs-stage.rc-on .fs-pn-kart:not(.free) { max-height: calc(100% - 64px - 226px); }   /* sanal kumanda çubuklarının üstünde kalır */
.fs-stage.fs-ops .fs-attrib { bottom: 8px; right: 12px; max-width: 30%; }
@media (max-width: 1100px) { .fs-pn-kart { width: 340px; } .fs-pn-pfd { height: 152px; } .fs-pn-kon-govde { max-height: 120px; } }
@media (max-width: 760px) { .fs-pn-kart { width: calc(100% - 24px); top: 50px; } .fs-pn-hucre { min-height: 60px; } .fs-stage.fs-ops .fs-attrib, .fs-stage.fs-ops .fs-mp { display: none; } }

/* Uçuş Simülatörü — §17/§19 kayıt seçenekleri kutusu (sihirbaz, Başlat üstünde) */
.fs-rec-opts .fs-rec-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 6px 0; }
.fs-rec-opts .fs-rec-opt > .small { flex-basis: 100%; padding-left: 26px; margin-top: -4px; }
.fs-rec-opts .fs-rec-opt-sub { margin-left: 26px; }
.fs-rec-opts .fs-rec-opt-sub.off { opacity: .45; }
.fs-rec-opts .fs-rec-opt[hidden] { display: none; }
.fs-rec-mine { margin-bottom: 14px; }
/* §8 ön hazırlık kartı: adım listesi (○ bekliyor / ◐ sürüyor / ✓ bitti / ✗ hata) + ilerleme çubuğu */
.fs-prep { min-width: 360px; }
.fs-prep-title { margin-bottom: 10px; }
.fs-prep-steps { display: flex; flex-direction: column; gap: 10px; }
.fs-prep-step { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.fs-prep-step[data-state="ok"] { border-color: rgba(34, 197, 94, .5); }
.fs-prep-step[data-state="err"] { border-color: rgba(239, 68, 68, .6); }
.fs-prep-row { display: flex; align-items: center; gap: 10px; }
.fs-prep-lbl { flex: 1; font-weight: 600; }
.fs-prep-pct { font-size: 12px; color: var(--muted); min-width: 36px; text-align: right; }
.fs-prep-ico { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex: none; box-sizing: border-box; position: relative; }
.fs-prep-ico.run { border-color: var(--primary, #2f80ed); border-top-color: transparent; animation: fs-prep-spin .9s linear infinite; }
.fs-prep-ico.ok { border-color: #22c55e; background: #22c55e; }
.fs-prep-ico.ok::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fs-prep-ico.err { border-color: #ef4444; background: #ef4444; }
.fs-prep-bar { height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; margin: 8px 0 2px 26px; }
.fs-prep-bar i { display: block; height: 100%; width: 0; background: var(--primary, #2f80ed); transition: width .3s; }
.fs-prep-bar[hidden] { display: none; }
.fs-prep-sub { padding-left: 26px; min-height: 1em; }
.fs-prep-sub:empty { display: none; }
.fs-prep-step[data-state="err"] .fs-prep-sub { color: #ef4444; }
.fs-prep-note { margin: 12px 0 0; }
@keyframes fs-prep-spin { to { transform: rotate(360deg); } }

/* ===== Uçuş Simülatörü §23.6: güç paneli (.fs-gauges; flightsim_power.js createPowerGauges) — otomobil gösterge paneli tarzı DÖRT analog kadran
   (YAKIT küçük · HIZ büyük · MOTOR büyük · BATARYA küçük), takip/serbest/yer kiplerinde alt çubuğun hemen üstünde YATAYDA TAM ORTADA, harekât panelinden
   bağımsız (panel açıkken panelin solundaki boş alanın ortasında). Renkler TEMAYA GÖRE --fsg-* değişkenlerinden: açık temada beyaz/açık gri yüzey, siyah ibre,
   koyu dijital; koyu temada (html[data-theme=dark]) antrasit yüzey, açık çentik/rakam/ibre/dijital. Kırmızı/mavi bölgeler iki temada aynı. Sanal kumanda
   açıkken küçülüp yukarı kayar (çubuklar kenarlarda); FPV OSD (fs-osd-on) ve gimbal HUD (fs-mhud-on) kendi çizimlerini yapar → gizli. Büyük 150 px, küçük
   110 px (1440); ≥ 1800 px ölçek 1.2; ≤ 1300 px 0.9; ≤ 760 px iki satır (hız + motor üstte, yakıt + batarya altta). Tıklanınca .fs-power-pop ayrıntı kutusu. */
.fs-gauges { --fsg-face: #f7f8fa; --fsg-face2: #eceef3; --fsg-ring: rgba(255, 255, 255, .92); --fsg-edge: #d9dde6; --fsg-tick: #aab1bf; --fsg-tick2: #d2d7e0; --fsg-num: #9aa2b1;
  --fsg-needle: #1c2130; --fsg-pin: #2a3040; --fsg-pin2: #e6e9ef; --fsg-digit: #1f2533; --fsg-unit: #8b93a3; --fsg-sub: rgba(255, 255, 255, .92); --fsg-lbl: rgba(255, 255, 255, .85); --fsg-ico: #7c8595;
  --fsg-red: #e2443a; --fsg-blue: #2f8fe0; --fsg-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .6) inset;
  position: absolute; left: 50%; bottom: calc(var(--fs-bar-h) + 8px); z-index: 8; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 6px;
  transform: translateX(-50%); transform-origin: bottom center; color: var(--fsg-digit); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
html[data-theme="dark"] .fs-gauges { --fsg-face: #2a2f3a; --fsg-face2: #1f242e; --fsg-ring: rgba(96, 104, 122, .9); --fsg-edge: #454c5c; --fsg-tick: #aab2c2; --fsg-tick2: #5c6474; --fsg-num: #b4bccb;
  --fsg-needle: #eef1f6; --fsg-pin: #cfd5e0; --fsg-pin2: #2a2f3a; --fsg-digit: #f3f5f9; --fsg-unit: #9ba4b5; --fsg-sub: rgba(255, 255, 255, .92); --fsg-ico: #9ba4b5; --fsg-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .08) inset; }
.fs-gauges[hidden] { display: none; }
.fs-stage.fs-ops:not(.fs-fpv) .fs-gauges { left: 50%; }   /* kullanıcı isteği: panel açıkken de ekranın yatay ortası */
.fs-stage.fs-replay.fs-ops:not(.fs-fpv) .fs-gauges { left: 50%; }
.fs-stage.rc-on .fs-gauges { bottom: calc(var(--fs-bar-h) + 58px); transform: translateX(-50%) scale(.86); }   /* sanal kumanda: klavye ipucu şeridinin üstünde, küçük (çubuklar kenarlarda) */
.fs-stage.rc-on.fs-ops:not(.fs-fpv) .fs-gauges { bottom: calc(var(--fs-bar-h) + 170px); }   /* panel + sanal kumanda: sol çubuğun üstüne kayar */
.fs-stage.fs-osd-on .fs-gauges, .fs-stage.fs-mhud-on .fs-gauges { display: none; }   /* FPV OSD / gimbal HUD kendi güç çubuklarını çizer */
.fs-stage.fs-power-on .fs-hud .fs-row-fuel { display: none; }   /* sağ HUD'daki yakıt satırı kadranla çift olmasın */
.fs-stage.fs-power-on:not(.fs-osd-on):not(.fs-mhud-on) .fs-events { bottom: calc(var(--fs-bar-h) + 196px); }   /* ortadaki olay şeridi kadranların üstüne */
.fs-stage.fs-power-on.rc-on:not(.fs-osd-on):not(.fs-mhud-on) .fs-events { bottom: calc(var(--fs-bar-h) + 214px); }
.fs-gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; margin: 0; }
.fs-gauge[hidden] { display: none; }
.fs-gauge.big { width: 150px; } .fs-gauge.small { width: 110px; margin-bottom: 6px; }
.fs-gauge-dial { position: relative; display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); transition: filter .2s; }
.fs-gauge:hover .fs-gauge-dial, .fs-gauges.open .fs-gauge-dial { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)) brightness(1.03); }
.fs-gauge-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-gauge-ring { fill: none; stroke: var(--fsg-ring); stroke-width: 5; stroke-linecap: round; }
.fs-gauge-face { fill: var(--fsg-face); stroke: var(--fsg-edge); stroke-width: .8; transition: fill .3s; }
.fs-gauge-zone { fill: none; stroke-width: 3.6; stroke-linecap: butt; }
.fs-gauge-zone.red { stroke: var(--fsg-red); } .fs-gauge-zone.blue { stroke: var(--fsg-blue); }
.fs-gauge-zone[hidden] { display: none; }
.fs-gauge-tick { stroke: var(--fsg-tick2); stroke-width: .9; stroke-linecap: round; }
.fs-gauge-tick.major { stroke: var(--fsg-tick); stroke-width: 1.5; }
.fs-gauge-num { fill: var(--fsg-num); font-size: 6.4px; font-weight: 600; text-anchor: middle; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fs-gauge.small .fs-gauge-num { font-size: 7px; }
.fs-gauge-needle path { fill: var(--fsg-needle); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.fs-gauge-pin { fill: var(--fsg-pin); } .fs-gauge-pin2 { fill: var(--fsg-pin2); }
.fs-gauge-warn path { fill: var(--fsg-red); stroke: none; } .fs-gauge-warn path.w { fill: none; stroke: var(--fsg-face); stroke-width: 1.3; stroke-linecap: round; }
.fs-gauge-warn[hidden] { display: none; }
.fs-gauge-warn { animation: fs-gauge-blink .7s steps(1) infinite; }
.fs-gauge-ico { position: absolute; left: 50%; top: 55.5%; width: 9.5%; height: 9.5%; transform: translateX(-50%); color: var(--fsg-ico); }
.fs-gauge-ico[hidden] { display: none; }
.fs-gauge-ico svg { width: 100%; height: 100%; display: block; }
.fs-gauge-digits { position: absolute; left: 8%; right: 8%; top: 67%; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fs-gauge-main { font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fsg-digit); transition: color .3s; }
.fs-gauge.big .fs-gauge-main { font-size: 22px; }
.fs-gauge-unit { margin-top: 2px; font-size: 7px; font-weight: 700; letter-spacing: .12em; color: var(--fsg-unit); text-transform: uppercase; }
.fs-gauge.big .fs-gauge-unit { font-size: 8.5px; }
.fs-gauge-unit[hidden] { display: none; }
.fs-gauge-sub { position: absolute; left: -12%; right: -12%; top: 93%; text-align: center; font-size: 9.5px; font-weight: 600; color: var(--fsg-sub); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 6px rgba(0, 0, 0, .45); }
.fs-gauge.big .fs-gauge-sub { top: 92%; font-size: 10px; }
.fs-gauge-sub[hidden] { display: none; }
.fs-gauge-lbl { margin-top: 12px; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: var(--fsg-lbl); text-transform: uppercase; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.fs-gauge-badge { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 2; padding: 2px 8px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 10px rgba(220, 38, 38, .7); }
.fs-gauge-badge[hidden] { display: none; }
.fs-gauge[data-level="low"] .fs-gauge-main { color: #d98c00; }
html[data-theme="dark"] .fs-gauge[data-level="low"] .fs-gauge-main { color: #fcd34d; }
.fs-gauge[data-level="crit"] .fs-gauge-main, .fs-gauge[data-level="empty"] .fs-gauge-main, .fs-gauge.warn .fs-gauge-main { color: var(--fsg-red); }
.fs-gauge[data-level="crit"] .fs-gauge-ico, .fs-gauge[data-level="empty"] .fs-gauge-ico { color: var(--fsg-red); }
.fs-gauge[data-level="crit"] .fs-gauge-face, .fs-gauge.warn .fs-gauge-face { animation: fs-gauge-face-pulse 1s ease-in-out infinite; }   /* kritik: kadran yüzeyi kırmızı nabız */
.fs-gauge[data-level="empty"] .fs-gauge-face { fill: color-mix(in srgb, var(--fsg-face) 82%, var(--fsg-red)); }
.fs-gauge[data-level="empty"] .fs-gauge-sub { opacity: .7; }
.fs-gauges.no-fuel::before { content: attr(data-nofuel); align-self: center; margin: 0 8px 46px 0; padding: 3px 9px; border-radius: 999px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: #fff; background: rgba(47, 143, 224, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }   /* elektrikli dron: yakıt kadranı yerine rozet */
@keyframes fs-gauge-face-pulse { 0%, 100% { fill: var(--fsg-face); } 50% { fill: color-mix(in srgb, var(--fsg-face) 72%, var(--fsg-red)); } }
@keyframes fs-gauge-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
/* ayrıntı kutusu: kadranların üstünde, HEPGO tema değişkenleri */
.fs-power-pop { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px); width: 318px; z-index: 9; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: 10px 12px 8px; font-size: 12px; cursor: default; }
.fs-power-pop[hidden] { display: none; }
.fs-power-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.fs-power-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.fs-power-x:hover { background: var(--surface-2); color: var(--text); }
.fs-power-rows { display: grid; gap: 2px; }
.fs-power-row { display: grid; grid-template-columns: 1fr 1.1fr 1.4fr; gap: 8px; padding: 3px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; align-items: baseline; }
.fs-power-row > span:first-child { color: var(--muted); }
.fs-power-row > span[hidden] { display: none; }
.fs-power-row.fs-power-head { border-top: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); padding-bottom: 1px; }
.fs-power-span { grid-column: 2 / -1; }
.fs-power-foot { margin-top: 6px; color: var(--muted); line-height: 1.35; }
@media (min-width: 1800px) { .fs-gauges { transform: translateX(-50%) scale(1.2); } .fs-stage.rc-on .fs-gauges { transform: translateX(-50%) scale(1.03); } }
@media (max-width: 1300px) { .fs-gauges { transform: translateX(-50%) scale(.9); } .fs-stage.rc-on .fs-gauges { transform: translateX(-50%) scale(.78); } }
@media (max-width: 760px) {   /* mobil: iki satır — hız + motor üstte, yakıt + batarya altta */
  .fs-gauges, .fs-stage.fs-ops:not(.fs-fpv) .fs-gauges { left: 50%; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: end; gap: 0 10px; transform: translateX(-50%) scale(.8); }
  .fs-gauge.big { width: 140px; order: 1; } .fs-gauge.small { width: 110px; order: 2; margin-bottom: 0; }
  .fs-gauge-lbl { margin-top: 4px; }
  .fs-stage.rc-on .fs-gauges, .fs-stage.rc-on.fs-ops:not(.fs-fpv) .fs-gauges { bottom: calc(var(--fs-bar-h) + 232px); transform: translateX(-50%) scale(.7); }   /* sanal kumanda çubuklarının üstünde */
  .fs-power-pop { width: calc(100vw - 24px); }
}
/* ===== Uçuş Simülatörü §18: özet rapor modalı (.fs-rp*) — flightsim_report.js; CSS'in SONUNDA (panel .fs-pn/.fs-mp kurallarından ayrı) ===== */
.fs-rp { display: grid; gap: 14px; font-size: 13px; }
.fs-rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.fs-rp-head b { font-size: 16px; }
.fs-rp-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fs-rp-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.fs-rp-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fs-rp-tile b i { font-style: normal; font-size: 11px; opacity: .7; margin-left: 3px; }
.fs-rp-tile span { font-size: 11px; color: var(--muted); }
.fs-rp-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.fs-rp-sec { margin-bottom: 12px; }
.fs-rp-sec h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fs-rp-kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.fs-rp-kv span { color: var(--muted); }
.fs-rp-kv b { font-weight: 600; word-break: break-word; }
.fs-rp-crash { padding: 10px 12px; border: 2px solid #ef4444; border-radius: var(--radius); background: rgba(239, 68, 68, .10); }
.fs-rp-crash h4 { color: #ef4444; }
.fs-rp-crash .fs-rp-kv b { color: #ef4444; }
.fs-rp-mapwrap { display: grid; gap: 8px; }
.fs-rp-map { width: 100%; height: auto; aspect-ratio: 420 / 320; border-radius: var(--radius); border: 1px solid var(--border); background: #0b1220; }
.fs-rp-legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.fs-rp-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.fs-rp-legend .r::before { background: #ffb300; } .fs-rp-legend .t::before { background: #60a5fa; } .fs-rp-legend .e::before { background: #fff; } .fs-rp-legend .x::before { background: #ef4444; border-radius: 0; }
.fs-rp-dev { padding: 12px 14px; border-radius: var(--radius); text-align: center; border: 2px solid; }
.fs-rp-dev.red { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, .10); }
.fs-rp-dev.green { color: #16a34a; border-color: #22c55e; background: rgba(34, 197, 94, .10); }
.fs-rp-dev.orange { color: #ea580c; border-color: #f97316; background: rgba(249, 115, 22, .10); }
.fs-rp-dev-h { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.fs-rp-dev-big { font-size: 40px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fs-rp-dev-sub { font-size: 12px; opacity: .9; }
.fs-rp-safety { padding: 10px 12px; border-radius: var(--radius); border-left: 4px solid; background: var(--surface-2); }
.fs-rp-safety.red { border-color: #ef4444; } .fs-rp-safety.green { border-color: #22c55e; } .fs-rp-safety.orange { border-color: #f97316; }
.fs-rp-safety.red b { color: #ef4444; }
html[data-theme="dark"] .fs-rp-dev.green { color: #4ade80; } html[data-theme="dark"] .fs-rp-dev.orange { color: #fb923c; }
/* sihirbaz: son raporlar listesi */
.fs-rp-list { margin-bottom: 14px; }
.fs-rp-rows { display: flex; flex-direction: column; gap: 6px; }
.fs-rp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; font: inherit; text-align: left; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.fs-rp-row:hover { border-color: var(--primary); }
.fs-rp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-rp-row-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .fs-rp-tiles { grid-template-columns: repeat(3, 1fr); } .fs-rp-cols { grid-template-columns: 1fr; } .fs-rp-kv { grid-template-columns: 120px 1fr; } }
/* PDF / yazdır: yalnız rapor penceresi */
@media print {
  body.fs-rp-printing > :not(.modal-back) { display: none !important; }
  body.fs-rp-printing .modal-back { position: static; background: none; display: block; }
  body.fs-rp-printing .modal { max-width: none; width: 100%; box-shadow: none; border: 0; max-height: none; overflow: visible; }
  body.fs-rp-printing .modal-foot, body.fs-rp-printing .x-btn { display: none !important; }
  body.fs-rp-printing .fs-rp-map { background: #0b1220 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.fs-rp-printing .fs-rp-crash, body.fs-rp-printing .fs-rp-dev, body.fs-rp-printing .fs-rp-safety { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Uçuş Simülatörü §21: sayfa üst satırı, "Yeni Simülasyon Başlat" penceresi, Simülasyon Kayıtları tablosu ---- */
.fs-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.fs-new-sim { white-space: nowrap; }
/* §21 sekmeler: Simülasyon Kayıtları · Açık Oturumlar · CAYSIM İstemcileri (HEPGO .seg-tabs kalıbı) + sayaç rozeti */
.fs-tabs { margin: 0 0 14px; overflow: hidden; }
.fs-tabs .seg.seg-tabs { display: flex; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fs-tabs .seg.seg-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.fs-center-alt { display: block; line-height: 1.35; }
.fs-center-alt.warn { color: var(--warning); font-weight: 600; }
.fs-tabs .seg.seg-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.fs-tab-n { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fs-tabs button.on .fs-tab-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.fs-tab-n[data-n="0"] { display: none; }
.fs-pane[hidden] { display: none; }
.fs-open-empty { margin-bottom: 14px; }
.modal.fs-wizard-modal { max-width: 1240px; width: min(1240px, 96vw); height: min(900px, calc(var(--app-vh, 100vh) - 24px)); }
.modal.fs-wizard-modal .modal-body { background: var(--bg); flex: 1 1 auto; padding: 0; }
.modal.fs-wizard-modal .fs-step { margin-bottom: 12px; }
.modal.fs-wizard-modal .fs-start-row { margin: 0; }
/* §6 adım adım sihirbaz: üstte yapışkan kip + ilerleme şeridi, solda adım içeriği, sağda (önizlemeli adımlarda) 3B önizleme, altbilgide gerekçe + Geri/İleri/Başlat */
.fs-wz { display: flex; flex-direction: column; min-height: 100%; }
.fs-wz-top { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 20px 8px; }
.fs-wz-top::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--wz-prog, 0%); background: var(--primary); border-radius: 0 3px 3px 0; transition: width .3s ease; }
.fs-wz .fs-mode-row { margin-bottom: 8px; }
.fs-wz-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.fs-wz-strip::-webkit-scrollbar { display: none; }
.fs-wz-chip { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.fs-wz-chip:last-child { flex: 0 1 auto; }
.fs-wz-chip:not(:last-child)::after { content: ''; flex: 1 1 8px; min-width: 6px; height: 2px; margin: 0 4px; border-radius: 2px; background: var(--border); }
.fs-wz-chip.done:not(:last-child)::after { background: #16a34a; }
.fs-wz-chip > button { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 10px; text-align: left; font: inherit; transition: background .15s, color .15s; }
.fs-wz-chip > button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.fs-wz-chip > button:disabled { cursor: not-allowed; opacity: .5; }
.fs-wz-chip > button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fs-wz-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; border: 2px solid var(--border-strong); color: var(--muted); background: var(--surface); font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, box-shadow .2s; }
.fs-wz-dot i, .fs-wz-dot svg { font-size: 11px; }
.fs-wz-lbl { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fs-wz-lbl b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-wz-lbl small { font-size: 10.5px; opacity: .75; white-space: nowrap; }
.fs-wz-chip.on > button { color: var(--text); }
.fs-wz-chip.on .fs-wz-lbl b { font-weight: 800; }
.fs-wz-chip.on .fs-wz-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.fs-wz-chip.done .fs-wz-dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.fs-wz-chip.done > button { color: var(--text); }
.fs-wz-chip.err .fs-wz-dot { background: #dc2626; border-color: #dc2626; color: #fff; }
.fs-wz-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; padding: 18px 20px 22px; align-items: start; flex: 1 1 auto; }
.fs-wz-main.no-aside { grid-template-columns: minmax(0, 1fr); }
.fs-wz-aside { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 4px; }
.fs-wz-aside[hidden], .fs-wz-panel[hidden], .fs-wz-sec[hidden], .fs-wizard-modal .modal-foot .btn[hidden] { display: none !important; }
.fs-wz-aside .fs-preview { box-shadow: 0 6px 18px rgba(15, 23, 42, .12); }
.fs-wz-ph { margin-bottom: 16px; }
.fs-wz-ph-n { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--primary); font-weight: 800; }
.fs-wz-ph-t { font-size: 21px; margin: 2px 0 3px; display: flex; align-items: center; gap: 8px; }
.fs-wz-ph-t .badge { font-size: 11px; font-weight: 600; }
.fs-wz-ph-d { margin: 0; }
.fs-wz-panel > * + * { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.fs-wz-sec-h, .fs-wz .fs-launch-step h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.fs-wz .fs-launch-step, .fs-wz .fs-model-step { margin-top: 0; padding-top: 0; border-top: 0; }
.fs-wz-panel > * + .fs-launch-step, .fs-wz-panel > * + .fs-model-step { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.fs-wz .fs-launch-step[hidden] { display: none; }
/* gömülü bölümler (Güç, Hedefler, Yer kontrol): kart çerçevesi ve kendi başlığı adım başlığıyla yinelenmesin */
.fs-wz-panel > .card.fs-step:not(.fs-rec-opts) { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; }
.fs-wz-panel > .card.fs-step:not(.fs-rec-opts) > h3 { display: none; }
.fs-wz-panel > .card.fs-rec-opts { margin: 18px 0 0; padding-top: 14px; }
.fs-wz .fs-world-grid { gap: 2px 22px; }
.fs-wz .fs-types { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fs-wz .fs-drone-row { display: flex; align-items: center; gap: 10px; }
.fs-wz .fs-drone-sel { max-width: 420px; }
.fs-wz-note { margin-top: 12px; }
.fs-wz .fs-tg-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
/* son adım: kartlı özet (Düzenle bağlantılarıyla) */
.fs-wz-sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fs-wz-sum-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fs-wz-sum-card.err { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, .12); }
.fs-wz-sum-h { display: flex; align-items: center; gap: 8px; }
.fs-wz-sum-h b { flex: 1; min-width: 0; font-size: 14px; }
.fs-wz-sum-h .fs-wz-dot { width: 22px; height: 22px; font-size: 11px; border: 0; background: var(--primary-soft); color: var(--primary); }
.fs-wz-sum-h .fs-wz-edit { height: 26px; padding: 0 10px; font-size: 12px; color: var(--primary); }
.fs-wz-sum-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
.fs-wz-sum-card dt { color: var(--muted); white-space: nowrap; }
.fs-wz-sum-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; }
.fs-wz-sum-err { color: #dc2626; }
.fs-wizard-modal .modal-foot { align-items: center; }
.fs-wizard-modal .modal-foot .btn { height: 42px; padding: 0 20px; }
.fs-wizard-modal .modal-foot .fs-start { padding: 0 26px; }
.fs-wz-why { color: var(--muted); max-width: 48%; text-align: right; line-height: 1.3; }
.fs-wz-why.err { color: #dc2626; font-weight: 600; }
/* görsel sayı girişi (fs_inputs.numSlider): kaydırıcı (dolu iz) + düzenlenebilir değer kutusu + birim */
.fs-ns { display: flex; flex-direction: column; gap: 3px; padding: 5px 0; min-width: 0; font-size: 13px; }
.fs-ns[hidden] { display: none; }
.fs-ns-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.fs-ns-lbl { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; }
.fs-ns-val { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0 8px 0 2px; flex: none; cursor: text; transition: border-color .15s, box-shadow .15s; }
.fs-ns-val:hover { border-color: var(--border-strong); }
.fs-ns-val:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fs-ns-in { width: 62px; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; padding: 0 4px; outline: none; }
.fs-ns-unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fs-ns-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.fs-ns-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--primary) var(--p, 0%), var(--border) var(--p, 0%)); }
.fs-ns-range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--primary) var(--p, 0%), var(--border) var(--p, 0%)); }
.fs-ns-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .12s, box-shadow .12s; }
.fs-ns-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.fs-ns-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.fs-ns-range:focus-visible { outline: none; }
.fs-ns-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--primary-soft), 0 1px 4px rgba(0, 0, 0, .25); }
.fs-ns-hint { line-height: 1.35; }
@media (max-width: 1100px) {
  .fs-wz-main { grid-template-columns: minmax(0, 1fr) 320px; }
  .fs-wz-chip { flex: 1 1 auto; }
  .fs-wz-chip:not(.on) .fs-wz-lbl { display: none; }   /* dar: yalnız geçerli adımın adı, diğerleri numara/✓ */
  .fs-wz-chip.on > button { flex: none; }
  .fs-wz-chip.on .fs-wz-lbl b { overflow: visible; }
}
.fs-tg-grid .fs-tg-field > .fs-tg-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
@media (max-width: 860px) {
  .fs-wz-main { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 18px; gap: 14px; }
  .fs-wz-aside { position: static; }
  .fs-wz-top { padding: 8px 12px 6px; }
  .fs-wz-chip { flex: 0 0 auto; }
  .fs-wz-chip:not(.on) .fs-wz-lbl { display: none; }
  .fs-wz-chip.on > button { flex: none; }
  .fs-wz-chip.on .fs-wz-lbl b { overflow: visible; }
  .fs-wz:not([data-step="vehicle"]):not([data-step="log"]) .fs-wz-top .fs-mode-row { display: none; }   /* telefonda kip seçimi yalnız ilk adımda (yapışkan bant kısa kalsın) */
  .fs-wz-chip > button { padding: 5px 4px; }
  .fs-wz-why { flex-basis: 100%; order: -1; max-width: none; text-align: left; }
  .fs-wizard-modal .modal-foot .spacer { display: none; }
  .fs-wizard-modal .modal-foot .btn { flex: 1 1 0; padding: 0 10px; }
  .fs-wz-ph-t { font-size: 18px; }
}
.fs-runs-card { margin-bottom: 14px; }
.fs-runs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fs-runs-head h3 { margin: 0; }
.fs-runs-pager { display: flex; align-items: center; gap: 8px; }
/* filtre kapsülü (§21 geri bildirim): [Son 1 gün · 1 hafta · 1 ay · Tümü | Detaylı(n)] + sağda kayıt sayısı; Detaylı → .fs-pop açılır kutu */
.fs-runs-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fs-runs-pill { gap: 2px; }
.fs-runs-pill > .btn.sm { height: 28px; padding: 0 12px; font-size: 13px; color: var(--muted); font-weight: 500; border-radius: 999px; }
.fs-runs-pill > .btn.sm:hover { color: var(--text); background: var(--surface); }
.fs-runs-pill > .btn.sm.on { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.fs-runs-pill > .btn.sm.open { background: var(--surface); color: var(--text); }
.fs-runs-sep { width: 1px; height: 18px; background: var(--border-strong, var(--border)); margin: 0 3px; flex: none; }
.fs-runs-detail { display: inline-flex; align-items: center; gap: 6px; }
.fs-runs-dn { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fs-runs-detail.on .fs-runs-dn { display: inline-block; }
.fs-runs-count { white-space: nowrap; }
.fs-runs-note { margin: 10px 0 12px; }
/* açılır kutu (popover; body'ye eklenir, fixed) — Detaylı filtre kutusu ve Download menüsü */
.fs-pop { position: fixed; z-index: 9000; background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .22); padding: 8px; }
.fs-runs-detail-box { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.fs-pop-title { font-weight: 700; font-size: 14px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.fs-pop-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.fs-pop-row > .small { white-space: nowrap; }
.fs-pop-ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fs-pop-ctl .input.sm { height: 32px; padding: 4px 8px; font-size: 13px; width: 100%; min-width: 0; flex: 1 1 0; }
.fs-pop-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 2px; }
.fs-dl-menu { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.fs-dl-item { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); text-decoration: none; width: 100%; }
.fs-dl-item:hover, .fs-dl-item:focus-visible { background: var(--surface-2); outline: none; }
.fs-dl-item[disabled] { color: var(--faint, var(--muted)); opacity: .55; cursor: not-allowed; }
.fs-dl-item .fs-runs-bi { width: 16px; height: 16px; margin: 0; flex: none; }
.table.fs-runs th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table.fs-runs th.sortable:hover, .table.fs-runs th.sortable.on { color: var(--primary); }
.fs-runs-sort { display: inline-block; width: 1em; font-size: 10px; margin-left: 2px; }
.table.fs-runs th, .table.fs-runs td { padding: 9px 10px; }
.table.fs-runs td { vertical-align: top; }
.table.fs-runs td.actions { vertical-align: middle; }
.fs-runs-mode { margin-left: 6px; }
.fs-runs-att { display: inline-flex; gap: 6px; align-items: center; }
.fs-runs-ico { display: inline-flex; width: 20px; height: 20px; color: var(--muted); opacity: .45; }
.fs-runs-ico.on { color: var(--primary); opacity: 1; }
.fs-runs-ico.wait { color: var(--warning, #c77d00); }
.fs-runs-ico svg, .fs-runs-bi svg { width: 100%; height: 100%; }
.fs-runs-bi { display: inline-flex; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* satır işlemleri: kapsül [Oynat · Rapor · Video] (pasifler soluk) + MASTER: kırmızı Download ▾ + Sil simgesi */
.fs-runs-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
@media (max-width: 1560px) { .fs-runs-actions { flex-wrap: wrap; max-width: 230px; margin-left: auto; row-gap: 4px; } }
.fs-runs-rowpill { padding: 2px; gap: 2px; }
.fs-runs-rowpill > .btn.xs { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; }
.fs-runs-rowpill > .btn.xs:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.fs-runs-dl { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.fs-runs-dl.open, .fs-runs-dl:hover { background: var(--danger-hover, #b91c1c); border-color: var(--danger-hover, #b91c1c); }
.fs-runs-caret { font-size: 10px; margin-left: 2px; }
.fs-runs-del { width: 26px; height: 26px; color: var(--danger); }
.fs-runs-del svg { width: 15px; height: 15px; }
.fs-runs-del:hover { background: var(--danger-soft, #fee2e2); }
.fs-runs-video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }
.fs-runs-empty { margin: 0; }

/* ---------- Kameralar: 32'li duvar (8×4) + küçük karo ölçeği ---------- */
.cw-grid.l32 { grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 3px; }
.cw-grid.l32 .cw-tile { border-radius: 3px; }
.cw-grid.l32 .cw-head { top: 2px; left: 2px; right: 2px; }
.cw-grid.l32 .cw-sel, .cw-grid.l16 .cw-sel { font-size: 10px; padding: 1px 4px; max-width: 85%; }
.cw-grid.l32 .cw-over { font-size: 10px; }
.cw-grid.l32 .cw-tile.max { border-radius: 0; }
@media (max-width: 1100px) { .cw-grid.l32 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .cw-grid.l32 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Yüz Tanıma › Eğitim: Seç kipi, son tanınan yüz avatarı ---------- */
.fr-person { flex-direction: row; align-items: center; gap: 10px; }
.fr-person-t { display: flex; flex-direction: column; min-width: 0; }
.fr-person-t b, .fr-person-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.avatar.fr-ava-sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.fr-ava-lg { width: 60px; height: 60px; font-size: 20px; }
.fr-last { position: relative; padding: 0; border: 2px solid var(--surface); cursor: zoom-in; overflow: visible;
  box-shadow: 0 0 0 2px var(--primary), 0 2px 8px rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s; }
.fr-last img { border-radius: 50%; }
.fr-last:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--primary), 0 4px 14px rgba(0,0,0,.25); }
.fr-last-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; border: 2px solid var(--surface); }
.fr-ava-lg .fr-last-dot { width: 14px; height: 14px; }
.fr-last-view { display: flex; flex-direction: column; gap: 10px; }
.fr-last-meta { display: flex; align-items: center; gap: 12px; }
.fr-last-crop { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--primary); }
.fr-selbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2, rgba(127,127,127,.08)); }
.fr-selbar .spacer { flex: 1; }
.fr-sel-count { font-weight: 600; font-size: 13px; }
.fr-sel-del[hidden] { display: none; }
.fr-crops.selecting .fr-crop { cursor: pointer; }
.fr-crop { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow .12s, transform .12s; }
.fr-crop.selected { box-shadow: 0 0 0 3px var(--primary); transform: scale(.96); }
.fr-crop.selected img { filter: brightness(.88); }
.fr-pick { position: absolute; top: 5px; right: 5px; z-index: 2; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.28); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.fr-pick::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.fr-pick:hover { border-color: var(--primary); }
.fr-pick[aria-pressed="true"] { background: var(--primary); border-color: #fff; }
.fr-pick[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.fr-ev.focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

/* ---------- Rehber: yüz tanıma yedek avatarı + rozet ---------- */
.avatar.gd-face { position: relative; overflow: visible; box-shadow: 0 0 0 2px var(--primary-soft); }
.avatar.gd-face img { border-radius: 50%; }
.gd-face-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gd-face-badge svg { width: 10px; height: 10px; }
.avatar.gd-face.lg .gd-face-badge { width: 24px; height: 24px; }
.avatar.gd-face.lg .gd-face-badge svg { width: 13px; height: 13px; }
.fr-subject-sub { display: block; }
.fr-frame img.fr-last-crop { width: 64px; max-height: none; background: none; border-radius: 50%; }
/* ---------- Şirketten Haberler: TikTok tarzı video (görünür olunca oynar) + ses düğmesi (fs-feedloc) ---------- */
.feed-vid.playing .feed-play { display: none; }
.feed-vid.playing > video { object-fit: contain; }
.feed-snd { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; z-index: 2; backdrop-filter: blur(4px); }
.feed-snd:hover { background: rgba(0,0,0,.75); }
.feed-snd .feed-ic { display: inline-flex; }
.feed-snd svg { width: 18px; height: 18px; }
.feed-post.has-media .feed-mwrap .feed-snd { bottom: 14px; }

/* ---------- Canlı Konum: personel paneli + geçmiş izi + koyu tema kişi kartı (fs-feedloc) ---------- */
.um-count { border: 0; color: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; transition: background .15s; }
.um-count:hover, .um-count[aria-expanded="true"] { background: rgba(255,255,255,.3); }
.um-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 86vw; z-index: 4;   /* üst çubuğun (geri, başlık) altında */ display: flex; flex-direction: column; gap: 8px;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 12px 12px; background: rgba(255,255,255,.96); color: #16202e; box-shadow: 4px 0 24px rgba(0,0,0,.35);
  transform: translateX(-104%); transition: transform .22s ease; backdrop-filter: blur(8px); }
.um-panel-open .um-panel { transform: none; }
.um-phead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.um-pclose { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); color: inherit; cursor: pointer; font-size: 14px; }
.um-search { width: 100%; padding: 8px 10px; border: 1px solid #cfd6e0; border-radius: 10px; background: #fff; color: inherit; font: inherit; font-size: 13.5px; }
.um-all { align-self: flex-start; border: 0; background: rgba(37,99,235,.1); color: #2563eb; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.um-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.06); align-self: flex-start; }
.um-rbtn { border: 0; background: transparent; color: inherit; padding: 5px 9px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.um-rbtn.on { background: #2563eb; color: #fff; }
.um-trailinfo { color: #5b6472; }
.um-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.um-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: inherit; padding: 6px 8px; cursor: pointer; font: inherit; }
.um-row:hover { background: rgba(0,0,0,.05); }
.um-row.sel { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); }
.um-row .um-av.sm { width: 36px; height: 36px; font-size: 12px; border-width: 2px; }
.um-rowmain { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.um-rowmain b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-rowmain small { font-size: 11.5px; color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-empty { color: #5b6472; padding: 10px 4px; }
/* Seçimde diğer kişiler soluk, seçili kişi öne */
.um-pin { transition: opacity .2s; }
.um-pin.dim { opacity: .22; filter: grayscale(.6); pointer-events: none; }
.um-pin.sel { z-index: 3; }
.um-pin.sel .um-av { box-shadow: 0 0 0 4px rgba(37,99,235,.45), 0 2px 10px rgba(0,0,0,.4); }
/* Geçmiş izi noktaları: zaman damgası etiketi; başlangıç yeşil, bitiş kırmızı */
.um-tp { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.um-tpdot { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); flex: none; }
.um-tplbl { font-size: 10.5px; font-weight: 600; color: #0f172a; background: rgba(255,255,255,.92); padding: 1px 6px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.um-tp:hover .um-tplbl, .um-tp.start .um-tplbl, .um-tp.end .um-tplbl { opacity: 1; }
.um-tp.start .um-tpdot { background: #22c55e; width: 14px; height: 14px; }
.um-tp.end .um-tpdot { background: #ef4444; width: 14px; height: 14px; }
.um-tp.start, .um-tp.end { z-index: 2; }
.um-info-links { margin-top: 4px; }
.um-info a { color: #2563eb; }
/* Koyu tema: panel, kişi kartı (Google InfoWindow) ve iz etiketleri koyu zemin / açık metin */
html[data-theme="dark"] .um-panel { background: rgba(23,30,41,.96); color: #e4e9f1; box-shadow: 4px 0 24px rgba(0,0,0,.6); }
html[data-theme="dark"] .um-pclose { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .um-search { background: #1d2532; border-color: #2a3444; color: #e4e9f1; }
html[data-theme="dark"] .um-all { background: rgba(74,138,224,.18); color: #8bb8f5; }
html[data-theme="dark"] .um-range { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .um-rbtn.on { background: #4a8ae0; }
html[data-theme="dark"] .um-row:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .um-row.sel { background: rgba(74,138,224,.18); border-color: rgba(74,138,224,.5); }
html[data-theme="dark"] .um-rowmain small, html[data-theme="dark"] .um-trailinfo, html[data-theme="dark"] .um-empty { color: #a3adbd; }
html[data-theme="dark"] .um-tplbl { background: rgba(23,30,41,.94); color: #e4e9f1; }
html[data-theme="dark"] .um-tpdot { border-color: #171e29; background: #8bb8f5; }
html[data-theme="dark"] .um-pin.sel .um-av { box-shadow: 0 0 0 4px rgba(139,184,245,.5), 0 2px 10px rgba(0,0,0,.6); }
html[data-theme="dark"] .um-full .gm-style .gm-style-iw-c { background: #171e29; color: #e4e9f1; box-shadow: 0 4px 18px rgba(0,0,0,.65); }
html[data-theme="dark"] .um-full .gm-style .gm-style-iw-d { color: #e4e9f1; }
html[data-theme="dark"] .um-full .gm-style .gm-style-iw-d::-webkit-scrollbar-track { background: #171e29; }
html[data-theme="dark"] .um-full .gm-style .gm-style-iw-tc::after { background: #171e29; }
html[data-theme="dark"] .um-full .gm-style .gm-ui-hover-effect > span { background-color: #e4e9f1; }
html[data-theme="dark"] .um-full .gm-style .gm-ui-hover-effect img { filter: invert(1); }
html[data-theme="dark"] .um-full .gm-style .gm-style-iw-chr { background: transparent; }
html[data-theme="dark"] .um-info { color: #e4e9f1; }
html[data-theme="dark"] .um-info .muted { color: #a3adbd; }
html[data-theme="dark"] .um-info a { color: #8bb8f5; }
html[data-theme="dark"] .um-info .btn { background: #1d2532; color: #e4e9f1; border-color: #3a4659; }
html[data-theme="dark"] .um-info .btn:hover { background: #273142; }
@media (max-width: 560px) { .um-panel { width: 100%; max-width: none; } }
/* ---- Endüstriyel Tasarım: STEP → STL/GLB önizleme — kart küçük resmi, canlı 3B katmanı, köşe araçları, ilerleme, GLB penceresi ---- */
.dz-proj-thumb img.dz-thumb-3d, .dz-mcard-thumb img.dz-thumb-3d { object-fit: contain; padding: 6px; box-sizing: border-box; background: radial-gradient(ellipse at 50% 60%, #ffffff 0%, #eef3fb 70%, #e3e9f4 100%); }
.dz-live { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, #ffffff 0%, #eef3fb 70%, #e3e9f4 100%); }
.dz-live.on { opacity: 1; }
.dz-live canvas { display: block; width: 100% !important; height: 100% !important; }
.dz-thumb-tools { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease; z-index: 2; }
.dz-proj-thumb:hover .dz-thumb-tools, .dz-mcard-thumb:hover .dz-thumb-tools, .dz-thumb-tools:focus-within { opacity: 1; }
@media (hover: none) { .dz-thumb-tools { opacity: 1; } }
.dz-tool { background: rgba(255,255,255,.92); backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(15,23,42,.15); }
.dz-prog { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px 5px; background: rgba(255,255,255,.88); font-size: 12px; color: var(--muted); z-index: 2; }
.dz-prog i { display: block; height: 3px; border-radius: 2px; background: var(--primary); width: 0; transition: width .3s ease; margin-bottom: 3px; }
.dz-pv-tools { margin-left: auto; align-items: center; gap: 6px; }
.dz-glb-modal { display: flex; flex-direction: column; gap: 8px; }
.dz-glb-stage { position: relative; width: 100%; height: min(62vh, 640px); border-radius: 10px; overflow: hidden; background: #eef3fb; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.dz-glb-stage canvas { display: block; }
.dz-glb-wait { padding: 24px; }
.dz-glb-bar { display: flex; align-items: center; gap: 8px; }
.dz-glb-bar .spacer { flex: 1; }
.dz-mcard-thumb { height: auto; }   /* eski 78px sabit yükseklik kalıntısı: 4/3 oran geçerli olsun (önizleme + köşe araçları sığar) */
/* =====================================================================================================================
   §16–§21 Başlık bandı tek satır · Dron Yönetimi kapsül seçici · Uçuş Simülatörü sekme satırı kapsülü + üst bilgi kutuları ·
   tam ekran "← Geri" (kullanıcı geri bildirimi 16–21; ui.js pageHead/goBack, drone.js, flightsim.js). Dosyanın SONUNDA: önceki
   genel .page-head kuralları değiştirilmez, daha özgül kurallarla ezilir.
   ===================================================================================================================== */
/* §16 — Masaüstünde başlık + alt başlık TEK satır, sağdaki alt modül seçici / düğmeler alt satıra İNMEZ: kısıldığında önce başlık
   metni "…" ile kırpılır (flex-shrink 1000, en az 96px), sonra seçici kayar (overflow-x). Telefon (≤640px) düzeni (alt alta) korunur. */
@media (min-width: 641px) {
  main#view .page-head { flex-wrap: nowrap; }
  main#view .page-head > .page-head-t { flex: 1 1000 auto; min-width: 96px; }
  main#view .page-head > .page-head-t h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  main#view .page-head > .spacer { flex: 1 1 0; min-width: 0; }
  main#view .page-head > .back, main#view .page-head > .xl-btn, main#view .page-head > .pill-group, main#view .page-head > .head-right { flex: 0 0 auto; }
  main#view .page-head > .head-right { min-width: 0; max-width: 100%; }
  /* seçici: tümü görünür kalmaya çalışır (flex-shrink 1 ama başlık 1000 kat önce küçülür); ancak alan bitince içinde kayar */
  main#view .page-head > .seg.seg-tabs, main#view .page-head > .module-tabs { flex: 0 1 auto; min-width: 0; }
  main#view .page-head > .module-tabs { margin: 0; overflow-x: auto; }
  main#view .page-head > .module-tabs .seg.seg-tabs { min-width: max-content; }
}
/* §20 — tıklanabilir bilgi kutusu (statStrip onClick) */
.stat.click { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.stat.click:hover, .stat.click:focus-visible { border-color: var(--primary); box-shadow: 0 4px 14px rgba(15, 23, 42, .10); transform: translateY(-1px); outline: none; }
/* §18/§19 — Uçuş Simülatörü: sekme çubuğu satırı; sağda kapsül [Excel · + Yeni Simülasyon] sekme hizasında; alt çizgi tüm satır */
.fs-tabs-row { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 14px; border-bottom: 2px solid var(--border); }
.fs-tabs-row .fs-tabs { margin: 0; flex: 1 1 auto; min-width: 0; }
.fs-tabs-row .fs-tabs .seg.seg-tabs { border-bottom: 0; }
.fs-tabs-row .fs-tabs .seg.seg-tabs button { margin-bottom: 0; }
.fs-tabs-row .module-toolbar.fs-tabs-actions { margin: 0 0 5px; flex: 0 0 auto; justify-content: flex-end; }
.fs-tabs-actions .pill-group > .btn { height: 30px; }
.fs-tabs-actions .pill-group > .xl-btn { order: -1; margin: 0; border-color: transparent; }   /* listexport.js düğmesi: kapsülde, Yeni Simülasyon'un solunda */
.fs-tabs-actions .pill-group > .xl-btn:hover { background: #eaf6ef; }
.fs-tabs-actions .fs-new-sim:disabled { opacity: .55; cursor: not-allowed; }
/* §20 — 4 bilgi kutusu (HEPGO pano .stat-strip kalıbı) */
.fs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.fs-stats[hidden] { display: none; }
@media (max-width: 900px) { .fs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* §21 — Simülatör oturumu üst bandı "← Geri": yuvarlak, yarı saydam; üzerine gelince kapsüle genişler ve "Geri" yazısı belirir */
.fs-nav .fs-back { flex: none; display: inline-flex; align-items: center; height: 30px; min-width: 30px; padding: 0 7px; margin: -1px 0 -1px -1px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .10); color: #e6e9ef; text-decoration: none; font-weight: 600; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.fs-nav .fs-back-ico { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.fs-nav .fs-back-txt { display: inline-block; max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease; }
.fs-nav .fs-back:hover, .fs-nav .fs-back:focus-visible { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .42); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); text-decoration: none; outline: none; }
.fs-nav .fs-back:hover .fs-back-ico, .fs-nav .fs-back:focus-visible .fs-back-ico { transform: translateX(-2px); }
.fs-nav .fs-back:hover .fs-back-txt, .fs-nav .fs-back:focus-visible .fs-back-txt { max-width: 80px; opacity: 1; margin-left: 6px; }
.fs-nav .fs-back:active { transform: scale(.96); }
.fs-stage.fs-full .fs-nav .fs-back { height: 34px; min-width: 34px; }
html[dir="rtl"] .fs-nav .fs-back-ico { display: inline-block; transform: scaleX(-1); }

/* ===== Araçlar › Master Tool web sürümleri (SSH/FTP/SQL/Notepad/Convert/VOLFAI): masaüstü Master Tool dili — koyu panel, kapsül düğmeler ===== */
.mt { --mt-bg: #0b1020; --mt-panel: #121a2e; --mt-line: #26304d; --mt-text: #e6eefb; --mt-muted: #8c99b8; --mt-accent: #3b82f6; --mt-accent2: #22c55e; --mt-danger: #ef4444;
  color: var(--mt-text); font-size: 13px; }
.mt .mt-shell { background: var(--mt-bg); border: 1px solid var(--mt-line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 60vh; }
.mt .mt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mt .mt-bar.right { margin-left: auto; }
.mt .mt-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mt-line); background: var(--mt-panel); color: var(--mt-text); cursor: pointer; font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mt .mt-btn:hover { background: #1a2440; border-color: #3a4870; }
.mt .mt-btn.primary { background: var(--mt-accent); border-color: var(--mt-accent); color: #fff; }
.mt .mt-btn.primary:hover { background: #2f6fe0; }
.mt .mt-btn.ok { background: #14532d; border-color: #16a34a; }
.mt .mt-btn.danger { background: #3b1111; border-color: #7f1d1d; }
.mt .mt-btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.mt .mt-btn:disabled { opacity: .5; cursor: default; }
.mt .mt-input, .mt .mt-select, .mt textarea.mt-area { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mt-line); background: #0e1527; color: var(--mt-text); font: inherit; outline: none; min-width: 0; }
.mt .mt-input:focus, .mt .mt-select:focus, .mt textarea.mt-area:focus { border-color: var(--mt-accent); }
.mt .mt-input.w-s { width: 90px; } .mt .mt-input.w-m { width: 160px; } .mt .mt-input.w-l { width: 260px; }
.mt textarea.mt-area { height: auto; min-height: 90px; border-radius: 12px; padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; width: 100%; box-sizing: border-box; }
.mt .mt-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; background: var(--mt-panel); border: 1px solid var(--mt-line); border-radius: 14px; padding: 10px 12px; }
.mt .mt-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--mt-muted); text-transform: uppercase; letter-spacing: .04em; }
.mt .mt-form label > * { text-transform: none; letter-spacing: 0; font-size: 13px; }
.mt .mt-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.mt .mt-tab { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--mt-line); background: transparent; color: var(--mt-muted); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; }
.mt .mt-tab.on { background: var(--mt-panel); color: var(--mt-text); border-color: #3a4870; }
.mt .mt-tab .x { opacity: .6; font-weight: 700; padding: 0 2px; border-radius: 50%; }
.mt .mt-tab .x:hover { opacity: 1; color: var(--mt-danger); }
.mt .mt-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mt-muted); }
.mt .mt-tab .dot.ok { background: var(--mt-accent2); } .mt .mt-tab .dot.err { background: var(--mt-danger); }
.mt .mt-status { font-size: 12px; color: var(--mt-muted); }
.mt .mt-status.ok { color: var(--mt-accent2); } .mt .mt-status.err { color: var(--mt-danger); }
.mt .mt-panel { background: var(--mt-panel); border: 1px solid var(--mt-line); border-radius: 14px; padding: 10px; }
.mt .mt-split { display: grid; grid-template-columns: 260px 1fr; gap: 10px; min-height: 0; flex: 1; }
.mt .mt-split.half { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .mt .mt-split, .mt .mt-split.half { grid-template-columns: 1fr; } }
.mt .mt-list { max-height: 60vh; overflow: auto; }
.mt .mt-list .it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.mt .mt-list .it:hover { background: #1a2440; } .mt .mt-list .it.on { background: #1e2a4a; }
.mt .mt-list .it small { color: var(--mt-muted); margin-left: auto; white-space: nowrap; }
.mt .mt-table-wrap { overflow: auto; max-height: 55vh; border: 1px solid var(--mt-line); border-radius: 12px; }
.mt table.mt-table { border-collapse: collapse; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.mt table.mt-table th, .mt table.mt-table td { padding: 5px 10px; border-bottom: 1px solid var(--mt-line); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.mt table.mt-table th { position: sticky; top: 0; background: #0e1527; color: var(--mt-muted); font-weight: 600; z-index: 1; }
.mt table.mt-table tr:hover td { background: #141d35; }
.mt table.mt-table td.null { color: var(--mt-muted); font-style: italic; }
.mt .mt-term { height: min(68vh, 640px); background: #0b1020; border-radius: 12px; overflow: hidden; }
.mt .mt-term .xterm { height: 100%; padding: 6px; }
.mt .mt-editor { display: grid; grid-template-columns: auto 1fr; background: #0e1527; border: 1px solid var(--mt-line); border-radius: 12px; overflow: hidden; height: min(62vh, 700px); }
.mt .mt-gutter { padding: 8px 6px 8px 10px; text-align: right; color: var(--mt-muted); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: none; overflow: hidden; border-right: 1px solid var(--mt-line); white-space: pre; }
.mt .mt-code { position: relative; overflow: hidden; }
.mt .mt-code textarea, .mt .mt-code pre { margin: 0; padding: 8px 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 4; box-sizing: border-box; width: 100%; height: 100%; overflow: auto; }
.mt .mt-code textarea { position: absolute; inset: 0; background: transparent; color: transparent; caret-color: var(--mt-text); border: 0; outline: none; resize: none; z-index: 2; }
.mt .mt-code textarea::selection { background: rgba(59,130,246,.35); }
.mt .mt-code pre { color: var(--mt-text); pointer-events: none; }
.mt .mt-code .k { color: #c084fc; } .mt .mt-code .s { color: #86efac; } .mt .mt-code .n { color: #fbbf24; } .mt .mt-code .c { color: #64748b; font-style: italic; } .mt .mt-code .p { color: #7dd3fc; }
.mt .mt-drop { border: 2px dashed var(--mt-line); border-radius: 14px; padding: 22px; text-align: center; color: var(--mt-muted); cursor: pointer; }
.mt .mt-drop.over { border-color: var(--mt-accent); color: var(--mt-text); background: #0e1527; }
.mt .mt-prog { height: 6px; background: #0e1527; border-radius: 999px; overflow: hidden; }
.mt .mt-prog > i { display: block; height: 100%; background: var(--mt-accent); width: 0; transition: width .2s; }
.mt .mt-frame { width: 100%; height: calc(100vh - 150px); min-height: 480px; border: 0; border-radius: 12px; background: #000; }
.mt .mt-crumb { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; color: var(--mt-muted); }
.mt .mt-crumb a { color: var(--mt-text); cursor: pointer; }
.mt .mt-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.mt .muted { color: var(--mt-muted); }

/* ===== Üyelik › Paketinizdeki Modüller: etkileşimli kutucuklar (açık / kilitli / kapalı / pakette yok) ===== */
.mb2-mods-h { align-items: center; gap: 10px; flex-wrap: wrap; }
.mb2-mods-h small { white-space: nowrap; }
.mb2-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.mb2-mod { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); min-height: 74px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.mb2-mod.open { cursor: pointer; }
.mb2-mod.open:hover, .mb2-mod.open:focus-visible { text-decoration: none; transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lg); outline: none; }
.mb2-mod.open:hover .mb2-mod-go { opacity: 1; transform: translateX(0); }
.mb2-mod-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.mb2-mod-ico svg { width: 20px; height: 20px; }
.mb2-mod-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 22px; }
.mb2-mod-t b { font-size: 14px; line-height: 1.25; }
.mb2-mod-t small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.mb2-mod-go { position: absolute; right: 12px; top: 12px; color: var(--primary); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.mb2-mod-badge { position: absolute; right: 10px; top: 10px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.mb2-mod-badge.locked { color: #b45309; background: var(--warning-soft); border-color: transparent; }
.mb2-mod-badge.off { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.mb2-mod-lock { position: absolute; right: 12px; bottom: 10px; width: 18px; height: 18px; color: #b45309; }
.mb2-mod-lock svg { width: 18px; height: 18px; }
.mb2-mod.locked { cursor: not-allowed; background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface-2)); }
.mb2-mod.locked .mb2-mod-ico { background: var(--surface); color: var(--muted); }
.mb2-mod.off { cursor: default; }
.mb2-mod.off .mb2-mod-ico { color: var(--muted); background: var(--surface); }
.mb2-mod.missing { cursor: pointer; opacity: .62; border-style: dashed; background: transparent; }
.mb2-mod.missing .mb2-mod-ico { background: var(--surface); color: var(--muted); filter: grayscale(1); }
.mb2-mod.missing:hover, .mb2-mod.missing:focus-visible { opacity: .9; border-color: var(--primary); outline: none; }
.mb2-upg { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mb2-upg p { margin: 0; }
.mb2-upg-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.mb2-upg-ico svg { width: 28px; height: 28px; }
:root[data-theme="dark"] .mb2-mod-badge.locked { color: #fcd34d; background: rgba(245, 158, 11, .18); }
:root[data-theme="dark"] .mb2-mod-lock { color: #fcd34d; }
:root[data-theme="dark"] .mb2-mod.locked { background: color-mix(in srgb, #f59e0b 8%, var(--surface-2)); }

/* ===== Raporlar: solda modül ağacı, sağda içerik ===== */
.rp-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-side-toggle { display: none; }
.rp-side { position: sticky; top: 8px; max-height: calc(100dvh - 120px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); }
.rp-pane { min-width: 0; }
.rp-tree-q { border-radius: 999px; }
.rp-tree-all { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; color: var(--text); font-size: 13.5px; }
.rp-tree-all:hover { background: var(--surface-2); text-decoration: none; }
.rp-tree-all.on { background: var(--primary-soft); color: var(--primary); }
.rp-tree { display: flex; flex-direction: column; gap: 2px; }
.rp-tree-mod { --tone: var(--primary); border-radius: 12px; }
.rp-tree-h { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 12px; color: var(--text); font-size: 13.5px; font-weight: 600; }
.rp-tree-h:hover { background: var(--surface-2); text-decoration: none; }
.rp-tree-mod.on > .rp-tree-h { background: color-mix(in srgb, var(--tone) 14%, var(--surface)); color: var(--tone); }
.rp-tree-caret { flex: none; width: 20px; height: 20px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 12px; padding: 0; transition: transform .15s; }
.rp-tree-caret:hover { background: var(--surface-2); color: var(--text); }
.rp-tree-mod.open .rp-tree-caret { transform: rotate(90deg); }
.rp-tree-ico { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone, var(--primary)) 14%, var(--surface)); color: var(--tone, var(--primary)); }
.rp-tree-ico svg { width: 14px; height: 14px; }
.rp-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tree-n { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.rp-tree-items { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 22px; }
.rp-tree-item { display: block; padding: 6px 10px; border-radius: 10px; color: var(--text); font-size: 13px; line-height: 1.3; border-left: 2px solid transparent; }
.rp-tree-item:hover { background: var(--surface-2); text-decoration: none; }
.rp-tree-item.on { background: color-mix(in srgb, var(--tone) 16%, var(--surface)); color: var(--tone); font-weight: 700; border-left-color: var(--tone); }
.rp-side .empty { padding: 14px; text-align: center; color: var(--muted); }
@media (max-width: 900px) {
  .rp-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rp-side-toggle { display: inline-flex; width: 100%; justify-content: flex-start; border-radius: 12px; }
  .rp-side { display: none; position: static; max-height: 60dvh; }
  .rp-side.open { display: flex; }
}

/* Uçuş Simülatörü — §23 güç ve yakıt: sihirbaz bölümü (iki sütun: Motor · Elektronik batarya), göstergeler, simülasyon hızı kapsülü */
.fs-power .fs-pw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 6px; }
.fs-power .fs-pw-col h4.fs-sub-h { margin: 0 0 6px; }
.fs-pw-row { display: block; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.fs-pw-row:last-child { border-bottom: 0; }
.fs-pw-row[hidden] { display: none; }
.fs-pw-lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.fs-pw-src { font-size: 10px; text-transform: none; letter-spacing: 0; }
.fs-pw-src:empty { display: none; }
.fs-pw-ctl { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.fs-pw-ctl .fs-pw-inp { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.fs-pw-ctl i { font-style: normal; font-size: 12px; color: var(--muted); min-width: 34px; }
.fs-pw-hint { grid-column: 1 / -1; margin-top: -2px; line-height: 1.35; }
.fs-pw-info { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--text); font-variant-numeric: tabular-nums; }
.fs-pw-warn { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .45); color: var(--text); }
.fs-pw-warn[hidden] { display: none; }
@media (max-width: 900px) { .fs-power .fs-pw-grid { grid-template-columns: 1fr; } }
.fs-v.err { color: #f87171; font-weight: 700; }
.fs-row-fuel[hidden] { display: none; }
/* simülasyon hızı kapsülü: üst çubukta (koyu zemin) ve panelde */
.fs-speed-pill { gap: 2px; }
.fs-speed-pill .fs-speed-btn { min-width: 34px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.fs-nav .fs-speed-pill { margin-left: 2px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }   /* koyu üst şerit: açık pill-group zemini 0.25×…8× metnini okunmaz yapıyordu */
.fs-nav .fs-speed-pill .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #e6e9ef; }
.fs-nav .fs-speed-pill .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.fs-nav .fs-speed-pill.fast .btn.primary { background: #f59e0b; border-color: #f59e0b; color: #1a1300; }
.fs-pn-speed { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-pn-speed .fs-pn-speed-pill .btn { padding: 3px 8px; font-size: 10.5px; }
.fs-pn-speed .fs-pn-speed-pill.fast .btn.primary { background: #f59e0b; border-color: #f59e0b; color: #1a1300; }
.fs-pn-tile.kotu .fs-pn-tile-v { color: var(--gt-kotu); }
/* rapor: güç ve yakıt bölümü */
.fs-rp-power .fs-rp-pw-tiles { margin: 6px 0 10px; }
.fs-rp-tile.red b { color: #ef4444; }
.fs-rp-kv.red b { color: #ef4444; }
/* kayıt tablosu: yakıt/batarya sütunları + Detaylı kutusu onayı */
.fs-runs .fs-runs-fuel, .fs-runs .fs-runs-elec { white-space: nowrap; }
.fs-runs .fs-runs-fuel .badge, .fs-runs .fs-runs-elec .badge { display: block; margin-bottom: 2px; width: max-content; }
.fs-runs-speed { margin-left: 4px; }
.fs-pop-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0 2px; }
.fs-pop-check > .small { flex-basis: 100%; padding-left: 24px; margin-top: -4px; }

/* ==== Kişisel Ayarlar: görsel seçiciler (Tema, Yazı boyutu, Bekleme ekranı, Görüşme arka planı, Maskot) ====
   .vr-grid = role="radiogroup"; kartlar sola hizalı, sarmalı ızgara; seçili kart vurgulu halka + onay işareti. */
.set-block { padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.set-block:last-child { border-bottom: 0; padding-bottom: 2px; }
.set-block-h { display: flex; flex-direction: column; margin-bottom: 10px; }
.set-block-h small { color: var(--muted); font-size: 12px; }
.vr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; justify-content: start; }
.vr-opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 7px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); cursor: pointer; outline: none; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease; }
.vr-opt:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .35); }
.vr-opt:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent); }
.vr-opt.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  box-shadow: 0 0 0 1.5px var(--primary), 0 8px 20px -12px color-mix(in srgb, var(--primary) 70%, transparent); }
.vr-opt.on:focus-visible { box-shadow: 0 0 0 1.5px var(--primary), 0 0 0 5px color-mix(in srgb, var(--primary) 30%, transparent); }
.vr-prev { position: relative; display: block; height: 88px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.vr-lbl { display: flex; flex-direction: column; gap: 1px; padding: 0 30px 2px 4px; min-width: 0; }
.vr-lbl b { font-size: 13px; line-height: 1.25; }
.vr-lbl small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.vr-opt.on .vr-lbl b { color: var(--primary); }
.vr-check { position: absolute; bottom: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(15, 23, 42, .3);
  transform: scale(.4); opacity: 0; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), opacity .15s ease; pointer-events: none; z-index: 2; }
.vr-check svg { width: 13px; height: 13px; }
.vr-opt.on .vr-check { transform: scale(1); opacity: 1; }
html.reduce-motion .vr-opt, html.reduce-motion .vr-check { transition: none; }
html.reduce-motion .vr-opt:hover { transform: none; }

/* Tema: mini pencere çizimi (sabit açık / koyu renkler; aktif temadan bağımsız) */
.vr-theme { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.vr-theme .vr-prev { height: 104px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--border); }
.thp-win { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 9px; background: var(--w-bg);
  box-shadow: inset 0 0 0 1px var(--w-bd); }
.thp-light { --w-bg: #f3f5f9; --w-bar: #e2e7ef; --w-side: #ffffff; --w-card: #ffffff; --w-line: #d8dee8; --w-ink: #94a3b8; --w-acc: #1d4f91; --w-bd: #dbe1ea; }
.thp-dark { --w-bg: #0f141c; --w-bar: #0a0e14; --w-side: #151c27; --w-card: #1b2331; --w-line: #2b3546; --w-ink: #5b6b82; --w-acc: #4a8ae0; --w-bd: #263142; }
.thp-bar { flex: none; height: 15px; display: flex; align-items: center; gap: 3px; padding: 0 7px; background: var(--w-bar); border-bottom: 1px solid var(--w-bd); }
.thp-bar i { width: 5px; height: 5px; border-radius: 50%; background: #ef4444; opacity: .85; }
.thp-bar i:nth-child(2) { background: #f59e0b; } .thp-bar i:nth-child(3) { background: #22c55e; }
.thp-body { flex: 1; display: flex; min-height: 0; }
.thp-side { width: 30%; display: flex; flex-direction: column; gap: 5px; padding: 7px 6px; background: var(--w-side); border-right: 1px solid var(--w-bd); }
.thp-side i { height: 4px; border-radius: 2px; background: var(--w-line); }
.thp-side i.on { background: var(--w-acc); width: 82%; }
.thp-side i:nth-child(3) { width: 70%; } .thp-side i:nth-child(4) { width: 55%; }
.thp-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 7px; min-width: 0; }
.thp-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 5px; background: var(--w-card); border: 1px solid var(--w-bd); }
.thp-card i { height: 3px; border-radius: 2px; background: var(--w-line); }
.thp-card i.t { width: 46%; height: 4px; background: var(--w-ink); }
.thp-card i.s { width: 64%; }
.thp-card em { position: absolute; right: 6px; bottom: 5px; width: 18px; height: 7px; border-radius: 4px; background: var(--w-acc); }
.thp-split { position: absolute; inset: 0; display: block; }
.thp-split > .thp-dark { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
.thp-sys { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #94a3b8 50%, #1e293b 50%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .3); }

/* Yazı ve öğe boyutu: "Aa" + satır/düğme gerçek ölçekte (sayfa ölçeği --ui-scale bölünür) */
.vr-scale .vr-prev { height: 96px; }
.sp-prev { --k: calc(var(--s, 1) / var(--ui-scale, 1)); position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 10px; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sp-aa { font-size: calc(24px * var(--k)); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--text); }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: calc(4px * var(--k)) calc(6px * var(--k));
  border-radius: 6px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.sp-txt { font-size: calc(12px * var(--k)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-btn { flex: none; font-size: calc(11px * var(--k)); line-height: 1.5; padding: 0 calc(7px * var(--k)); border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; }

/* Bekleme ekranı: canlı küçük önizleme (koyu "ekran" zemini) */
.vr-anims { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.vr-anims .vr-prev { height: auto; aspect-ratio: 16 / 9; border-color: #1b2536; background: radial-gradient(120% 100% at 50% 40%, #0d1626 0%, #04070d 100%); }
.ss-prev, .ss-prev-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Görüşme arka planı: eşit en-boy oranlı kartlar, üzerinde küçük görüşme ekranı */
.vr-call .vr-prev { height: auto; aspect-ratio: 16 / 10; border: 0; }
.cb-prev { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.cb-av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.cb-nm { width: 46px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.cb-btns { display: flex; gap: 14px; margin-top: 4px; }
.cb-btns i { width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.cb-btns i.cb-ok { background: #22c55e; }

/* Maskot seçici: kutucukta canlı maskot + "Sesini dinle" */
.vr-mascot { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.vr-mascot .vr-opt { align-items: stretch; text-align: center; }
.vr-mascot .vr-prev { height: 92px; border: 0; background: radial-gradient(80% 70% at 50% 85%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%); }
.vr-mascot .vr-lbl { align-items: center; padding: 0 4px 2px; }
.vr-mascot .mascot-live { position: absolute; left: 50%; bottom: 4px; width: 66px; height: 76px; margin-left: -33px; display: block; }
.vr-mascot .mascot-live .mascot-snap { transform: scale(1.18); transform-origin: 50% 90%; }
.vr-mascot .vr-check { top: 9px; bottom: auto; right: 9px; }
.set-mascot-play { position: absolute; top: 9px; left: 9px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 2; transition: color .15s, border-color .15s, transform .15s; }
.set-mascot-play:hover, .set-mascot-play:focus-visible { color: var(--primary); border-color: var(--primary); transform: scale(1.06); outline: none; }
.set-mascot-play svg { width: 15px; height: 15px; }
html.reduce-motion .mascot-live, html.reduce-motion .mascot-live * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .mascot-live, .mascot-live * { animation: none !important; } }

/* Bildirim türleri: solda modül seçici, sağda türler; mobilde üstte açılır seçici */
.nt-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 260px; }
.nt-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface-2); border-right: 1px solid var(--border); max-height: 480px; overflow: auto; }
.nt-mod { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.nt-mod:hover { background: var(--surface); }
.nt-mod:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -2px; }
.nt-mod.on { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary), 0 1px 2px rgba(15, 23, 42, .08); }
.nt-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent); }
.nt-ico svg { width: 16px; height: 16px; opacity: 1; }
.nt-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-badge { flex: none; min-width: 34px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center;
  background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.nt-badge.part { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.nt-badge.off { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
html[data-theme="dark"] .nt-badge { color: #4ade80; }
html[data-theme="dark"] .nt-badge.part { color: #fbbf24; }
html[data-theme="dark"] .nt-badge.off { color: var(--muted); }
.nt-panel { padding: 8px 16px 6px; min-width: 0; }
.nt-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.nt-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nt-head small { color: var(--muted); font-size: 12px; }
.nt-bulk { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nt-panel .set-toggle:last-child { border-bottom: 0; }
.nt-pick { display: none; }
@media (max-width: 800px) {
  .nt-wrap { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; min-height: 0; overflow: visible; }
  .nt-list { display: none; }
  .nt-pick { display: block; width: 100%; margin-top: 6px; }
  .nt-panel { padding: 4px 0 0; }
}

/* Rahatsız etmeyin: mesai sonrası */
.set-dnd-status.wait { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
html[data-theme="dark"] .set-dnd-status.on { background: #3a2a12; border-color: #5c4318; color: #f3c27a; }
.set-dnd-work { padding: 2px 0 0; }
.set-dnd-work .set-line .grow { display: flex; flex-direction: column; }
.set-dnd-work .set-line small { color: var(--muted); font-size: 12px; }
.set-dnd-sum { margin: 8px 0 2px; }

/* Mail Hesaplarım: bağlantısı geçersiz hesap */
.mbx.mbx-reauth { border-color: color-mix(in srgb, #dc2626 35%, var(--border)); background: color-mix(in srgb, #dc2626 4%, var(--surface)); }
@media (max-width: 800px) {
  .vr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vr-theme { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vr-theme .vr-prev { height: 74px; }
  .vr-theme .vr-lbl small { display: none; }
  .vr-theme .vr-lbl, .vr-scale .vr-lbl { padding-right: 4px; }
  .vr-theme .vr-check, .vr-scale .vr-check { width: 18px; height: 18px; bottom: auto; top: 10px; right: 10px; }
  .vr-mascot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vr-mascot .vr-lbl small { font-size: 11px; }
  .vr-anims .vr-lbl small { display: none; }
}

/* ---------- Uçuş Simülatörü §22.3–22.5: kamera PiP'i (sürüklenebilir; görüntü 3B tuvalinde) + kamera türü menüsü ---------- */
.fs-pip { position: absolute; z-index: 7; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 28px rgba(0, 0, 0, .45); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, border-color .15s; }
.fs-pip[hidden] { display: none; }
.fs-pip:hover, .fs-pip:focus-visible { border-color: #fff; }
.fs-pip.dragging { cursor: grabbing; transition: none; border-color: var(--primary, #38bdf8); }
.fs-pip.no-anim { transition: none; }
.fs-pip-osd { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 9px; pointer-events: none; }
.fs-pip-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.fs-pip:hover .fs-pip-tools, .fs-pip:focus-within .fs-pip-tools, .fs-pip.dragging .fs-pip-tools { opacity: 1; }
@media (hover: none) { .fs-pip-tools { opacity: .9; } }
.fs-pip-b { width: 24px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(11, 18, 32, .78); color: #e6e9ef; font: 700 11px/1 system-ui, sans-serif; cursor: pointer; }
.fs-pip-b:hover { background: rgba(56, 120, 220, .85); }
.fs-pip-grip { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .7) 60%, transparent 60%, transparent 70%, rgba(255, 255, 255, .7) 70%, rgba(255, 255, 255, .7) 80%, transparent 80%); border-bottom-right-radius: 9px; }
.fs-pip[data-corner$="r"] .fs-pip-grip { right: auto; left: -2px; cursor: nesw-resize; transform: scaleX(-1); border-bottom-right-radius: 0; border-bottom-left-radius: 9px; }
.fs-cam-ctl[data-camtype="thermal"] .fs-cam-btn.primary { background: linear-gradient(90deg, #6d28d9, #ea580c); border-color: transparent; }
.fs-cam-ctl[data-camtype="night"] .fs-cam-btn.primary { background: #15803d; border-color: #15803d; }
.fs-cam-menu { min-width: 300px; }
.fs-cam-menu .fs-cam-h { font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.fs-cam-menu .pill-group { display: inline-flex; flex-wrap: wrap; gap: 3px; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 3px; }
.fs-cam-menu .btn { background: transparent; border-color: transparent; color: #e6e9ef; }
.fs-cam-menu .btn.primary { background: var(--primary, #2563eb); color: #fff; }
.fs-cam-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fs-cam-row[hidden] { display: none; }
.fs-cam-note { line-height: 1.35; max-width: 320px; }
/* §22.3 sihirbaz kamera kartları (önizleme 2B tuvalde, gölgelendiriciyle aynı formül) */
.fs-cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fs-cam-card { padding: 8px 8px 10px; gap: 6px; }
.fs-cam-card .fs-cam-prev { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; background: #0b1220; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.fs-cam-card b { padding: 0 2px; }
.fs-cam-card .small { padding: 0 2px; }
.fs-cam-pal { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.fs-cam-pal[hidden] { display: none; }
.fs-cam-pal .pill-group { display: inline-flex; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .fs-pip, .fs-pip-tools { transition: none; } }
.fs-cam-ico { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.fs-bar:has(.fs-cam-menu:not([hidden])) { z-index: 9; }   /* menü açıkken kadranların (z 8) üstünde */
.fs-cam-menu { min-width: 330px; max-width: min(380px, calc(100vw - 24px)); gap: 8px; }
.fs-cam-menu .pill-group { border-radius: 10px; }
.fs-cam-menu .fs-cam-types { display: grid; grid-template-columns: repeat(3, 1fr); }
.fs-cam-menu .fs-cam-types .btn { white-space: normal; line-height: 1.2; height: auto; min-height: 30px; padding: 4px 6px; }
.fs-cam-menu .fs-cam-row > .pill-group { flex: none; }

/* ---------- Uçuş Simülatörü §24 hedefler: sihirbaz bölümü, radar, rapor ---------- */
.fs-targets h3 .badge { margin-left: 4px; font-weight: 500; }
.fs-tg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.fs-tg-card { border: 1px solid var(--border); border-left: 3px solid #e5533f; border-radius: var(--radius); background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fs-tg-head { display: flex; align-items: center; gap: 8px; }
.fs-tg-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e5533f; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.fs-tg-model { flex: 1; min-width: 0; }
.fs-tg-desc { line-height: 1.35; }
.fs-tg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.fs-tg-grid .fs-ns-in { width: 52px; }
.fs-tg-foot .fs-ns.fs-tg-radius { flex: 1 1 220px; max-width: 320px; }
.fs-tg-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.fs-tg-lbl { color: var(--muted); }
.fs-tg-ctl { display: inline-flex; align-items: center; gap: 6px; }
.fs-tg-ctl .fs-tg-inp { width: 100%; max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.fs-tg-ctl i { font-style: normal; color: var(--muted); font-size: 12px; }
.fs-tg-dir.seg button { height: 26px; padding: 0 9px; font-size: 12px; }
.fs-tg-sum { border-top: 1px dashed var(--border); padding-top: 5px; }
.fs-tg-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.fs-tg-rad { flex-direction: row; align-items: center; gap: 8px; }
.fs-tg-rad .fs-tg-inp { width: 76px; }
.fs-tg-err { color: var(--danger, #dc2626); margin-top: 6px; }
.fs-tg-empty { padding: 4px 0 8px; }
/* §24.4 hedef kartında 3B önizleme (flightsim_tgtview.js; 2B tuval — görüntü sihirbaz önizlemesinin renderer'ından kopyalanır) */
.fs-tgv { display: flex; flex-direction: column; gap: 4px; }
.fs-tgv-cv { display: block; width: 100%; height: 160px; border-radius: 8px; background: #0b1418; cursor: grab; touch-action: none; }
.fs-tgv-cv:active { cursor: grabbing; }
.fs-tgv-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12px; }
.fs-tgv-spd, .fs-tgv-size { color: var(--muted); font-variant-numeric: tabular-nums; }
.fs-radar { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }
.fs-rp-tg-tiles { grid-template-columns: repeat(4, 1fr); }
.fs-rp-tile.green b { color: #16a34a; }
.fs-rp-kv.green b { color: #15803d; }
.fs-rp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 760px) { .fs-tg-list { grid-template-columns: 1fr; } .fs-rp-tg-tiles { grid-template-columns: repeat(2, 1fr); } }

/* Altbilgi sayfa ölçeri (pagemeter.js): altbilgide yalnız toplam indirilen; üzerine gelince yukarı kayan panel (sb-pop) — giriş saati,
   geçen süre, anlık / ortalama / en yüksek hız ve saniyelik zaman çizelgesi grafiği */
.pagemeter { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; color: var(--muted); white-space: nowrap;
  background: transparent; border: 0; margin-left: auto; margin-right: 18px; }
.pagemeter .pm-i { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pagemeter .pm-v { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pm-pop { width: 320px; }
.pm-chartbox { position: relative; margin: 8px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--border); }
.pm-chart { display: block; width: 100%; height: 70px; }
.pm-area { fill: color-mix(in srgb, var(--primary) 18%, transparent); stroke: none; }
.pm-line { fill: none; stroke: var(--primary); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pm-ax { font-size: 10.5px; color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }
.pm-chartbox > .pm-ax { position: absolute; top: 0; left: 0; }
.pm-axis { display: flex; justify-content: space-between; margin-top: 2px; }
@media (max-width: 760px) { .pagemeter { margin-right: 8px; font-size: 11px; } }

/* Simülasyon odak kipi (simfocus.js): uçuş sahnesi açıkken arka plan öğeleri dronun / HUD'un üstünü kapatmasın */
body:has(.fs-stage) .flash-stack, body:has(.fs-stage) .mascot, body:has(.fs-stage) .mascot-fig, body:has(.fs-stage) .support-pill { display: none !important; }

/* Simülasyon kayıtları: seçili satır (fare üzerinde / tıklanan; Del ile silinir) */
.table.fs-runs tbody tr.fs-runs-cur > td { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.table.fs-runs tbody tr.fs-runs-cur > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* Raporlar: gruplu tablo (ör. Misafir Raporu — ziyaret satırı, altında gelen kişiler) */
.rp-grouped .rp-grp td { background: var(--surface-2, #f1f4f9); border-top: 2px solid var(--border-strong, #9aa3b2); padding: 7px 10px; white-space: normal; line-height: 1.6; }
.rp-grouped .rp-grp-k { font-weight: 700; margin-right: 12px; }
.rp-grouped .rp-grp-f { margin-right: 14px; display: inline-block; }
.rp-grouped .rp-grp-l { color: var(--muted, #6b7280); }
.rp-grouped .rp-grp-item td:first-child { padding-left: 26px; }
.print-area .rp-grouped .rp-grp { break-inside: avoid; break-after: avoid; }
.print-area .rp-grouped .rp-grp td { background: #eef1f6; border-top: 1.2pt solid #555; }