/* =====================================================================
   MNEMOS — Uygulama paneli tasarım sistemi v3 (2026-10 yeniden tasarım)
   app.css'ten SONRA yüklenir ve onun görünümünü geçersiz kılar.
   Hiçbir id / data-* / JS sınıf adı burada değiştirilmez.
   İçindekiler
     0. Güvenlik ([hidden])            8. Butonlar & form alanları
     1. Tokenlar                       9. Kartlar, rozetler, tablolar
     2. Kabuk (yerleşim)              10. Ekranlar (ağaç → admin)
     3. Yan menü                      11. Modallar, toast, palet
     4. Üst bar                       12. Boş durum & iskelet
     5. Görünüm & sayfa başlığı       13. Mobil (≤860 / ≤560 / ≤380)
     6. Mobil alt sekme çubuğu        14. RTL
     7. Hareket                       15. Hareket tercihi
   ===================================================================== */

/* ---------- 0. GÜVENLİK: [hidden] her zaman gizler ---------- */
.app-body [hidden]:not(.persona-pick) { display: none !important; }
.mx-cmd[hidden] { display: none !important; }
/* Kişi değiştirici: masaüstünde ızgara + geri düğmesi yeterli; mobilde app.css'teki 👥 kısayolu kalır */
@media (min-width: 701px) { #chamberLayout .persona-pick { display: none !important; } }

/* ---------- 1. TOKENLAR ---------- */
:root {
  /* Zemin & yüzey */
  --mx-frame: #f2eee3;
  --mx-panel: #fcfbf7;
  --mx-surface: #ffffff;
  --mx-surface-2: #f7f4ec;
  --mx-surface-3: #efeadc;
  --mx-line: rgba(28, 38, 30, .08);
  --mx-line-2: rgba(28, 38, 30, .14);
  --mx-line-3: rgba(28, 38, 30, .22);

  /* Mürekkep (metin) — beyaz üzerinde AA */
  --mx-ink-900: #141c16;
  --mx-ink-800: #1f2a22;
  --mx-ink-700: #364038;
  --mx-ink-600: #535d55;   /* 6.6:1 */
  --mx-ink-500: #6b746c;   /* 4.7:1 */
  --mx-ink-400: #9aa199;

  /* Marka yeşili */
  --mx-brand-950: #0a2615;
  --mx-brand-900: #0f3a21;
  --mx-brand-800: #14532d;
  --mx-brand-700: #1c6a3f;
  --mx-brand-600: #2b7d50;
  --mx-brand-500: #3f9468;
  --mx-brand-200: #c7dfcf;
  --mx-brand-100: #e3efe6;
  --mx-brand-50:  #f1f7f2;

  /* Sıcak altın */
  --mx-gold-800: #6e5216;
  --mx-gold-700: #87661f;  /* metin, AA */
  --mx-gold-600: #a7812f;
  --mx-gold-500: #c49a45;
  --mx-gold-300: #e5cf97;
  --mx-gold-100: #f7eed7;
  --mx-gold-50:  #fbf6ea;

  --mx-danger: #b4322b;
  --mx-danger-50: #fcefed;
  --mx-success: #2b7d50;
  --mx-warn: #b7791f;

  /* Tipografi */
  --mx-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mx-fs-xs: .75rem;   /* 12 */
  --mx-fs-sm: .8125rem; /* 13 */
  --mx-fs-md: .875rem;  /* 14 */
  --mx-fs-base: .9375rem; /* 15 */
  --mx-fs-lg: 1.0625rem; /* 17 */
  --mx-fs-xl: 1.25rem;  /* 20 */
  --mx-fs-2xl: 1.5rem;  /* 24 */
  --mx-fs-3xl: 2rem;    /* 32 */
  --mx-fs-4xl: 2.5rem;  /* 40 */

  /* Boşluk (8pt ızgara; 4 yarım adım) */
  --mx-1: 4px; --mx-2: 8px; --mx-3: 12px; --mx-4: 16px; --mx-5: 20px;
  --mx-6: 24px; --mx-8: 32px; --mx-10: 40px; --mx-12: 48px; --mx-16: 64px;

  /* Yarıçap */
  --mx-r-xs: 6px; --mx-r-sm: 10px; --mx-r-md: 14px; --mx-r-lg: 18px; --mx-r-xl: 24px; --mx-r-2xl: 32px; --mx-r-pill: 999px;

  /* Yükselti */
  --mx-e0: 0 0 0 1px var(--mx-line);
  --mx-e1: 0 1px 2px rgba(20, 32, 24, .05), 0 0 0 1px var(--mx-line);
  --mx-e2: 0 1px 2px rgba(20, 32, 24, .04), 0 4px 14px -4px rgba(20, 32, 24, .10), 0 0 0 1px var(--mx-line);
  --mx-e3: 0 2px 6px rgba(20, 32, 24, .05), 0 14px 32px -10px rgba(20, 32, 24, .20), 0 0 0 1px var(--mx-line);
  --mx-e4: 0 10px 24px rgba(10, 30, 18, .10), 0 32px 80px -16px rgba(10, 30, 18, .35), 0 0 0 1px var(--mx-line);

  /* Hareket */
  --mx-ease: cubic-bezier(.2, .8, .2, 1);
  --mx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mx-t1: 150ms; --mx-t2: 200ms; --mx-t3: 250ms;

  /* Odak */
  --mx-ring: 0 0 0 2px var(--mx-surface), 0 0 0 4px rgba(196, 154, 69, .85);
  --mx-ring-field: 0 0 0 3px rgba(63, 148, 104, .22);

  /* Kabuk ölçüleri */
  --sb-w: 264px;
  --tb-core: 64px;
  --tb-h: calc(var(--tb-core) + env(safe-area-inset-top, 0px));
  --tab-h: 0px;
  --gutter: 10px;
}
html.sb-collapsed { --sb-w: 76px; }

/* Eski app.css değişkenlerini yeni sisteme bağla */
.app-body {
  --bg: var(--mx-frame);
  --bg-alt: var(--mx-surface-2);
  --panel: var(--mx-surface);
  --panel-2: var(--mx-surface-2);
  --line: var(--mx-line-2);
  --text: var(--mx-ink-800);
  --muted: var(--mx-ink-600);
  --gold: var(--mx-brand-700);
  --gold-bright: var(--mx-brand-800);
  --green: var(--mx-brand-600);
  --violet: var(--mx-gold-600);
  --amber: var(--mx-gold-500);
  --shadow: var(--mx-e3);
  --serif: var(--mx-serif);
  --sans: var(--mx-sans);
  --topbar-h: var(--tb-h);
  /* geriye dönük: önceki katmanın değişkenleri */
  --ng-brand-800: var(--mx-brand-800); --ng-brand-50: var(--mx-brand-50); --ng-gold-700: var(--mx-gold-700);
  --ng-gray-200: #e6e2d7; --ng-gray-600: var(--mx-ink-600); --ng-ease: var(--mx-ease);

  margin: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--mx-frame);
  color: var(--mx-ink-800);
  font-family: var(--mx-sans);
  font-size: 15px;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
.app-body ::selection { background: rgba(196, 154, 69, .28); }

/* ---------- 2. KABUK ---------- */
.app-body .app-shell {
  display: block;
  height: 100vh; height: 100dvh;
  box-sizing: border-box;
  padding-top: var(--tb-h);
  padding-inline-start: var(--sb-w);
  transition: padding var(--mx-t3) var(--mx-ease);
}
.app-body .app-main {
  height: calc(100% - var(--gutter));
  box-sizing: border-box;
  margin: 0;
  margin-inline-end: var(--gutter);
  padding: 0;
  overflow-y: auto; overflow-x: hidden;
  background: var(--mx-panel);
  border-radius: var(--mx-r-xl);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .04), 0 0 0 1px var(--mx-line);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
.app-body .app-main::-webkit-scrollbar { width: 10px; }
.app-body .app-main::-webkit-scrollbar-thumb { background: rgba(28, 38, 30, .14); border: 3px solid var(--mx-panel); border-radius: 10px; }
.app-body .app-main::-webkit-scrollbar-thumb:hover { background: rgba(28, 38, 30, .26); }
.app-body .app-main::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. YAN MENÜ (v2 — yeni nesil navigasyon) ----------
   Yerleşim: [baş] [aile kartı + Yeni] [kayan orta liste, fade maskeli] [sabit alt: plan + kullanıcı]
   Orta liste dışındaki bölümler hiçbir zaman kaymaz; kullanıcı kartı hiçbir öğeyi örtmez. */
.app-body .app-sidebar {
  --nv-item: 34px; --nv-ic: 26px; --nv-ic-pad: 5px; --nv-label: 26px; --nv-gap: 1px; --nv-sec-gap: 6px;
  position: fixed; z-index: 95;
  top: 0; bottom: 0; inset-inline-start: 0;
  width: var(--sb-w); max-width: none; height: 100vh; height: 100dvh;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  padding-inline-start: max(12px, env(safe-area-inset-left, 0px));
  background: transparent; border: 0; box-shadow: none; overflow: hidden;
  transition: width var(--mx-t3) var(--mx-ease), transform 300ms var(--mx-ease-out);
}
/* Başlık */
.app-body .sb-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 46px; margin: 0 0 8px; padding: 0 0 0 4px; }
.app-body .app-brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 8px 5px 4px; margin: 0; border: 0; background: none; cursor: pointer; border-radius: var(--mx-r-sm);
  transition: background-color var(--mx-t1) var(--mx-ease);
}
.app-body .app-brand:hover { background: rgba(20, 83, 45, .06); }
.app-body .app-brand .brand-logo { height: 32px; width: 32px; object-fit: contain; flex: 0 0 auto; }
.app-body .app-brand .brand-text { display: flex; flex-direction: column; line-height: 1.05; text-align: start; min-width: 0; }
.app-body .app-brand .brand-text strong { font-family: var(--mx-serif); font-weight: 700; font-size: 1.125rem; letter-spacing: .2em; color: var(--mx-brand-800); }
.app-body .app-brand .brand-text small { display: block; font-size: .5625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mx-gold-700); margin-top: 3px; }
.app-body .sb-collapse {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--mx-r-sm);
  background: transparent; color: var(--mx-ink-500); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .sb-collapse:hover { background: rgba(28, 38, 30, .06); color: var(--mx-ink-900); }
.app-body .sb-collapse .ic-close { display: none; }
html.sb-collapsed .app-body .sb-collapse .ic-rail { transform: scaleX(-1); }

/* Aile kartı + Yeni */
.app-body .sb-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
body.is-admin .sb-top { display: none; }
.app-body .sb-family {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--mx-surface); border-radius: var(--mx-r-md);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 0 0 1px var(--mx-line);
}
.app-body .sb-fam-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 4px; border: 0; border-radius: var(--mx-r-sm); background: none; cursor: pointer;
  text-align: start; color: inherit; font-family: var(--mx-sans);
  transition: background-color var(--mx-t1);
}
.app-body .sb-fam-main:hover { background: var(--mx-surface-2); }
.app-body .sb-fam-av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(80% 80% at 30% 20%, rgba(196, 154, 69, .35), transparent 60%), linear-gradient(150deg, var(--mx-brand-700), var(--mx-brand-950));
  box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .25);
}
.app-body .sb-fam-mono { font-family: var(--mx-serif); font-weight: 600; font-size: 1.25rem; line-height: 1; color: var(--mx-gold-300); }
.app-body .sb-fam-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.app-body .sb-fam-txt strong { font-size: .8125rem; font-weight: 600; color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .sb-fam-txt small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .6875rem; color: var(--mx-ink-500); }
.app-body .sb-fam-meta-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.app-body .sb-fam-stack { display: inline-flex; flex: 0 0 auto; }
.app-body .sb-fam-face {
  width: 16px; height: 16px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  margin-inline-start: -5px; box-shadow: 0 0 0 1.5px var(--mx-surface);
  background: var(--mx-brand-600); color: #fff; font-size: .4375rem; font-weight: 700;
}
.app-body .sb-fam-face:first-child { margin-inline-start: 0; }
.app-body .sb-fam-face img { width: 100%; height: 100%; object-fit: cover; }
.app-body .sb-fam-copy {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--mx-ink-500); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .sb-fam-copy:hover { background: var(--mx-surface-2); color: var(--mx-brand-800); }
.app-body .sb-new {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; box-sizing: border-box;
  padding: 0 8px 0 7px; border: 0; border-radius: var(--mx-r-md); cursor: pointer;
  background: linear-gradient(180deg, var(--mx-brand-700), var(--mx-brand-800));
  color: #fff; font: 600 .8125rem var(--mx-sans); text-align: start;
  box-shadow: 0 1px 2px rgba(10, 38, 21, .3), 0 6px 16px -8px rgba(10, 38, 21, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color var(--mx-t1), box-shadow var(--mx-t2), transform var(--mx-t1);
}
.app-body .sb-new:hover { background: linear-gradient(180deg, #23784a, var(--mx-brand-700)); box-shadow: 0 2px 4px rgba(10, 38, 21, .3), 0 10px 22px -10px rgba(10, 38, 21, .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
.app-body .sb-new:active { transform: scale(.98); }
.app-body .sb-new-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .14); transition: transform var(--mx-t3) var(--mx-ease-out); }
.app-body .sb-new:hover .sb-new-ic, .app-body .sb-new[aria-expanded="true"] .sb-new-ic { transform: rotate(90deg); }
.app-body .sb-new-l { flex: 1 1 auto; }
.app-body .sb-new .sb-new-kbd { background: rgba(255, 255, 255, .12); box-shadow: none; color: rgba(255, 255, 255, .78); }

/* Orta liste (yalnız burası kayar) */
.app-body .sb-scroll {
  flex: 1 1 auto; min-height: 0; position: relative;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  margin: 0 -12px; padding: 2px 12px 10px;
  scrollbar-width: none;
  --fade-t: 0px; --fade-b: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
}
.app-body .sb-scroll::-webkit-scrollbar { width: 0; height: 0; }
.app-body .sb-scroll.fade-top { --fade-t: 22px; }
.app-body .sb-scroll.fade-bot { --fade-b: 28px; }
.app-body .nav-group { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; }

/* Katlanabilir grup */
.app-body .nav-sec + .nav-sec { margin-top: var(--nv-sec-gap); }
.app-body .nav-sec-toggle {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px; width: 100%; height: var(--nv-label); box-sizing: border-box;
  margin: 0; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 .6875rem var(--mx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-ink-500);
  transition: color var(--mx-t1), background-color var(--mx-t1);
}
.app-body .nav-sec-toggle > span[data-i18n] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .nav-sec-toggle:hover { color: var(--mx-ink-800); background: rgba(28, 38, 30, .04); }
.app-body .nav-sec-chev { margin-inline-start: auto; flex: 0 0 auto; opacity: 0; transition: transform var(--mx-t2) var(--mx-ease), opacity var(--mx-t1); }
.app-body .nav-sec-toggle:hover .nav-sec-chev, .app-body .nav-sec-toggle:focus-visible .nav-sec-chev, .app-body .nav-sec.is-closed .nav-sec-chev { opacity: 1; }
.app-body .nav-sec.is-closed .nav-sec-chev { transform: rotate(-90deg); }
[dir="rtl"] .app-body .nav-sec.is-closed .nav-sec-chev { transform: rotate(90deg); }
.app-body .nav-sec-badge {
  display: none; margin-inline-start: auto; min-width: 16px; height: 16px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--mx-r-pill); background: var(--mx-danger); color: #fff; font-size: .625rem; letter-spacing: 0; place-items: center;
}
.app-body .nav-sec.is-closed .nav-sec-badge:not([hidden]) { display: inline-grid; }
.app-body .nav-sec.is-closed .nav-sec-badge:not([hidden]) + .nav-sec-chev { margin-inline-start: 4px; }
.app-body .nav-sec-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms var(--mx-ease-out); }
.app-body .nav-sec.is-closed .nav-sec-body { grid-template-rows: 0fr; }
.app-body .nav-sec-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--nv-gap); }
.app-body .nav-sec.is-closed .nav-sec-inner { visibility: hidden; transition: visibility 0s linear 260ms; }
.app-body .nav-label { margin: 0; }

/* Menü öğesi + renkli ikon karosu */
.app-body .side-item {
  --tile: var(--mx-ink-600); --tile-bg: rgba(28, 38, 30, .06);
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: var(--nv-item); min-height: var(--nv-item); box-sizing: border-box;
  padding: 0 8px 0 4px; margin: 0;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none;
  color: var(--mx-ink-700); font: 500 .84375rem var(--mx-sans); letter-spacing: -.003em; text-align: start; cursor: pointer;
  transition: background-color var(--mx-t1) var(--mx-ease), color var(--mx-t1) var(--mx-ease);
}
.app-body .side-item::before, .app-body .side-item::after { content: none !important; }
.app-body .side-item > span:not(.side-badge):not(.admin-tag) { flex: 1 1 auto; min-width: 0; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform var(--mx-t2) var(--mx-ease); }
.app-body .side-item .side-icon {
  width: var(--nv-ic); height: var(--nv-ic); padding: var(--nv-ic-pad); box-sizing: border-box; flex: 0 0 auto;
  border-radius: 8px; opacity: 1;
  background: var(--tile-bg) !important; color: var(--tile) !important; stroke: currentColor; stroke-width: 1.9;
  box-shadow: none !important;
  transition: background-color var(--mx-t2) var(--mx-ease), color var(--mx-t2) var(--mx-ease), transform var(--mx-t2) var(--mx-ease-out) !important;
}
.app-body .side-item:hover { background: rgba(28, 38, 30, .045); color: var(--mx-ink-900); }
.app-body .side-item:hover .side-icon { transform: translateY(-1px) scale(1.06) !important; }
.app-body .side-item:hover > span:not(.side-badge) { transform: translateX(1px); }
[dir="rtl"] .app-body .side-item:hover > span:not(.side-badge) { transform: translateX(-1px); }
.app-body .side-item:active { transform: none; background: rgba(28, 38, 30, .07); }
.app-body .side-item.active { color: var(--mx-ink-900); font-weight: 600; background: var(--mx-surface); box-shadow: 0 1px 2px rgba(20, 32, 24, .06), 0 0 0 1px var(--mx-line); }
.app-body .nav-group:has(> .sb-pill.on) .side-item.active { background: transparent; box-shadow: none; }
.app-body .side-item.active .side-icon { background: var(--tile) !important; color: #fff !important; box-shadow: 0 3px 8px -3px var(--tile) !important; }
/* Karo renkleri (sıcak, düşük doygunluk) */
.app-body .side-item[data-view="tree"]      { --tile: #2b7d50; --tile-bg: rgba(43, 125, 80, .12); }
.app-body .side-item[data-view="chamber"]   { --tile: #a7812f; --tile-bg: rgba(196, 154, 69, .17); }
.app-body .side-item[data-view="interview"] { --tile: #b4623b; --tile-bg: rgba(180, 98, 59, .12); }
.app-body .side-item[data-view="timeline"]  { --tile: #2f7f8f; --tile-bg: rgba(47, 127, 143, .12); }
.app-body .side-item[data-view="dm"]        { --tile: #3d679e; --tile-bg: rgba(61, 103, 158, .12); }
.app-body .side-item[data-view="friends"]   { --tile: #8a4f7d; --tile-bg: rgba(138, 79, 125, .12); }
.app-body .side-item[data-view="upload"]    { --tile: #2b7d6f; --tile-bg: rgba(43, 125, 111, .12); }
.app-body .side-item[data-view="vault"]     { --tile: #87661f; --tile-bg: rgba(135, 102, 31, .13); }
.app-body .side-item[data-view="security"]  { --tile: #4f7a5a; --tile-bg: rgba(79, 122, 90, .13); }
.app-body .side-item[data-view="family"]    { --tile: #a5506f; --tile-bg: rgba(165, 80, 111, .12); }
.app-body .side-item[data-view="profile"]   { --tile: #5b6472; --tile-bg: rgba(91, 100, 114, .12); }
.app-body .side-item[data-view="billing"]   { --tile: #9a6b14; --tile-bg: rgba(196, 154, 69, .15); }
.app-body .side-item[data-view="guide"]     { --tile: #5a5fa0; --tile-bg: rgba(90, 95, 160, .12); }
/* Rozet + kısayol ipucu */
.app-body .side-badge, .app-body #reportBadge {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-grid; place-items: center; position: static;
  border-radius: var(--mx-r-pill); box-shadow: none;
  background: var(--mx-danger); color: #fff; font: 700 .6875rem/1 var(--mx-sans);
  animation: mxPop var(--mx-t3) var(--mx-ease-out);
}
.app-body .side-kbd {
  flex: 0 0 auto; margin-inline-start: auto; padding: 1px 5px; border-radius: 5px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--mx-line-2);
  font: 600 .5625rem var(--mx-sans); letter-spacing: .04em; color: var(--mx-ink-500);
  opacity: 0; transition: opacity var(--mx-t1);
}
.app-body .side-item:hover .side-kbd, .app-body .side-item:focus-visible .side-kbd { opacity: 1; }
.app-body .side-item:has(.side-badge:not([hidden])) .side-kbd { display: none; }

/* Kayan aktif gösterge */
.app-body .sb-pill {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  border-radius: 10px; background: var(--mx-surface);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .06), 0 0 0 1px var(--mx-line), 0 8px 18px -10px rgba(20, 32, 24, .3);
  opacity: 0;
}
.app-body .sb-pill::before {
  content: ""; position: absolute; inset-inline-start: -8px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--mx-gold-500);
}
.app-body .sb-pill.on { opacity: 1; }
.app-body .sb-pill.on-header { opacity: .55; }
.app-body .sb-pill.ready { transition: transform 360ms cubic-bezier(.3, 1.25, .4, 1), width var(--mx-t2) var(--mx-ease), height var(--mx-t2) var(--mx-ease), opacity var(--mx-t1); }

/* Yönetici: ayrı, koyu "Sistem Yönetimi" bölümü */
.app-body .nav-admin {
  padding: 8px 6px 8px; border-radius: 18px;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(196, 154, 69, .16), transparent 60%),
    linear-gradient(170deg, #12341f, #0a1d12);
  box-shadow: 0 18px 36px -20px rgba(8, 22, 13, .8), inset 0 0 0 1px rgba(255, 255, 255, .05);
  gap: var(--nv-gap);
}
.app-body .nav-admin-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; margin: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; z-index: 1; }
.app-body .nav-admin-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, var(--mx-gold-300), var(--mx-gold-600)); color: var(--mx-brand-950); }
.app-body .nav-admin-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-body .nav-admin .nav-label { padding: 0; font: 600 .8125rem var(--mx-sans); letter-spacing: 0; text-transform: none; color: #f6efd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .nav-admin-txt small { font-size: .6875rem; font-weight: 600; color: var(--mx-gold-300); }
.app-body .nav-admin .side-item { --tile: #e5cf97; --tile-bg: rgba(255, 255, 255, .07); color: rgba(236, 244, 238, .78); }
.app-body .nav-admin .side-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-body .nav-admin .side-item.active { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; }
.app-body .nav-admin .side-item.active .side-icon { background: var(--mx-gold-300) !important; color: var(--mx-brand-950) !important; box-shadow: none !important; }
.app-body .nav-admin .side-kbd { color: rgba(236, 244, 238, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.app-body .nav-admin > .sb-pill { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.app-body .nav-admin > .sb-pill::before { inset-inline-start: -6px; }

/* Alt bölüm: plan + kullanıcı (sabit) */
.app-body .sidebar-foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--mx-line);
  background: none; border-radius: 0; box-shadow: none;
}
.app-body .sidebar-foot::before, .app-body .sidebar-foot::after { content: none !important; display: none !important; }
.app-body .sb-plan {
  display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 0; border-radius: var(--mx-r-md); cursor: pointer; text-align: start;
  background: linear-gradient(180deg, var(--mx-surface), var(--mx-gold-50)); color: inherit; font-family: var(--mx-sans);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 0 0 1px var(--mx-line);
  transition: box-shadow var(--mx-t2);
}
.app-body .sb-plan:hover { box-shadow: 0 4px 12px -4px rgba(20, 32, 24, .18), 0 0 0 1px var(--mx-line-2); }
.app-body .sb-plan-top { display: flex; align-items: baseline; gap: 8px; }
.app-body .sb-plan-top b { font-size: .75rem; font-weight: 600; color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .sb-plan-top em { margin-inline-start: auto; font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--mx-brand-700); white-space: nowrap; }
.app-body .sb-plan-bar { display: block; height: 4px; border-radius: 4px; background: var(--mx-surface-3); overflow: hidden; }
.app-body .sb-plan-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mx-brand-500), var(--mx-brand-700)); transition: width 600ms var(--mx-ease-out); }
.app-body .sb-plan-bar i.warn { background: linear-gradient(90deg, var(--mx-gold-500), var(--mx-warn)); }
.app-body .sb-plan small { font-size: .6875rem; color: var(--mx-ink-500); font-variant-numeric: tabular-nums; }
.app-body .sb-user {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 6px 8px 6px 6px; border: 0; border-radius: var(--mx-r-md);
  background: transparent; cursor: pointer; text-align: start; color: inherit; font-family: var(--mx-sans);
  transition: background-color var(--mx-t1);
}
.app-body .sb-user:hover, .app-body .sb-user[aria-expanded="true"] { background: rgba(28, 38, 30, .055); }
.app-body .sb-user-av {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--mx-brand-600), var(--mx-brand-900)); color: #fff; font-size: .75rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--mx-frame), 0 0 0 3px rgba(196, 154, 69, .55);
}
.app-body .sb-user-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.app-body .sb-user-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.app-body .sb-user-txt strong { font-size: .8125rem; font-weight: 600; color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .sb-user-txt small { font-size: .6875rem; color: var(--mx-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .sb-user-go { color: var(--mx-ink-400); flex: 0 0 auto; transition: transform var(--mx-t2); }
.app-body .sb-user[aria-expanded="true"] .sb-user-go { transform: rotate(180deg); }
.app-body .side-quote { display: none; }

/* Açılır menüler (Yeni / kullanıcı) — gövdede, JS konumlar */
.sb-menu {
  position: fixed; z-index: 1300; box-sizing: border-box; max-width: calc(100vw - 16px);
  padding: 6px; border-radius: 16px; background: var(--mx-surface);
  box-shadow: var(--mx-e4); font-family: var(--mx-sans);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity var(--mx-t2) var(--mx-ease), transform var(--mx-t2) var(--mx-ease-out);
}
.sb-menu.on { opacity: 1; transform: none; }
.sb-user-menu { transform-origin: bottom left; }
.sb-menu-h { margin: 0; padding: 8px 10px 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-ink-500); }
.sb-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; box-sizing: border-box;
  padding: 6px 8px; margin: 0; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--mx-ink-800); font: 500 .8125rem var(--mx-sans); text-align: start; text-decoration: none;
  transition: background-color var(--mx-t1);
}
.sb-menu-item:hover, .sb-menu-item:focus-visible { background: var(--mx-surface-2); outline: none; box-shadow: none !important; }
.sb-mi-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--mx-surface-2); color: var(--mx-ink-600); transition: transform var(--mx-t2) var(--mx-ease-out); }
.sb-menu-item:hover .sb-mi-ic { transform: scale(1.06); }
.sb-mi-ic.t-green { background: rgba(43, 125, 80, .12); color: #2b7d50; }
.sb-mi-ic.t-clay  { background: rgba(165, 80, 111, .12); color: #a5506f; }
.sb-mi-ic.t-gold  { background: rgba(196, 154, 69, .17); color: #87661f; }
.sb-mi-ic.t-terra { background: rgba(180, 98, 59, .12); color: #b4623b; }
.sb-mi-ic.t-blue  { background: rgba(61, 103, 158, .12); color: #3d679e; }
.sb-mi-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-mi-tx b { font-weight: 600; color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-mi-tx small { font-size: .71875rem; color: var(--mx-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-menu-item kbd { flex: 0 0 auto; }
.sb-menu-sep { height: 1px; margin: 4px 6px; background: var(--mx-line); }
.sb-menu-item.is-danger, .sb-menu-item.is-danger b { color: var(--mx-danger); }
.sb-menu-item.is-danger .sb-mi-ic { background: var(--mx-danger-50); color: var(--mx-danger); }
body.is-admin .sb-mi-user { display: none; }
.sb-menu kbd { display: inline-flex; padding: 1px 6px; border-radius: 5px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line-2); font: 600 .625rem var(--mx-sans); color: var(--mx-ink-500); }
/* Alt sayfa (mobil) */
.sb-menu.as-sheet {
  left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important; max-width: 560px; margin: 0 auto; padding: 18px 8px 10px; border-radius: 24px;
  transform: translateY(24px); transform-origin: bottom center;
}
.sb-menu.as-sheet.on { transform: none; }
.sb-menu.as-sheet::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--mx-line-2); }
.sb-menu.as-sheet .sb-menu-item { min-height: 52px; }
.sb-menu.as-sheet kbd { display: none; }
.mx-sheet-scrim { position: fixed; inset: 0; z-index: 1290; background: rgba(10, 20, 14, .42); opacity: 0; pointer-events: none; transition: opacity var(--mx-t3) var(--mx-ease); }
.mx-sheet-scrim.on { opacity: 1; pointer-events: auto; }

/* Zengin ipucu (rail modu) */
.mx-tip {
  position: fixed; z-index: 1400; top: 0; left: 0; transform: translate(-4px, -50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 260px;
  padding: 7px 10px; border-radius: 10px; background: var(--mx-ink-900); color: #fff;
  font: 500 .75rem/1.3 var(--mx-sans); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--mx-ease), transform 160ms var(--mx-ease-out);
}
.mx-tip.on { opacity: 1; transform: translate(0, -50%); }
.mx-tip kbd { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); font: 600 .625rem var(--mx-sans); }
.mx-tip-b { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 99px; background: var(--mx-danger); font-size: .625rem; font-weight: 700; }
.mx-tip-s { flex-basis: 100%; color: rgba(255, 255, 255, .62); font-size: .6875rem; }

/* Klavye: G… göstergesi + kısayol penceresi */
.mx-chord { position: fixed; z-index: 1400; left: 50%; bottom: calc(24px + var(--tab-h)); transform: translate(-50%, 10px); display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: var(--mx-ink-900); color: #fff; font: 500 .75rem var(--mx-sans); opacity: 0; pointer-events: none; transition: opacity var(--mx-t1), transform var(--mx-t2) var(--mx-ease-out); }
.mx-chord.on { opacity: 1; transform: translate(-50%, 0); }
.mx-chord kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .14); font: 600 .6875rem var(--mx-sans); }
.mx-keys { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 16px; background: rgba(14, 22, 17, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: mxFade var(--mx-t2) var(--mx-ease); }
.mx-keys[hidden] { display: none !important; }
.mx-keys-box { width: min(560px, 100%); max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--mx-r-xl); background: var(--mx-surface); box-shadow: var(--mx-e4); font-family: var(--mx-sans); animation: mxModalIn var(--mx-t2) var(--mx-ease-out); }
.mx-keys-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--mx-line); }
.mx-keys-h strong { font-family: var(--mx-serif); font-size: 1.5rem; font-weight: 600; color: var(--mx-ink-900); }
.mx-keys-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--mx-surface-2); color: var(--mx-ink-600); cursor: pointer; }
.mx-keys-body { overflow-y: auto; padding: 8px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mx-keys-gt { margin: 14px 0 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-ink-500); }
.mx-keys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--mx-line); font-size: .8125rem; color: var(--mx-ink-800); }
.mx-keys-k { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.mx-keys-k em { font-style: normal; font-size: .6875rem; color: var(--mx-ink-400); }
.mx-keys-k kbd { min-width: 20px; justify-content: center; padding: 2px 6px; border-radius: 6px; background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line-2), 0 1px 0 var(--mx-line-2); font: 600 .6875rem var(--mx-sans); color: var(--mx-ink-700); }
@media (max-width: 560px) { .mx-keys-body { grid-template-columns: 1fr; } }

/* Kısa ekranlar: kompakt yoğunluk (≈650px yükseklikte kaymadan sığar) */
@media (min-width: 861px) and (max-height: 860px) {
  .app-body .sb-plan { display: none; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .app-body .app-sidebar { --nv-item: 30px; --nv-ic: 24px; --nv-ic-pad: 5px; --nv-label: 20px; --nv-gap: 0px; --nv-sec-gap: 2px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 8px; }
  .app-body .sb-head { height: 38px; margin-bottom: 4px; }
  .app-body .app-brand .brand-logo { height: 28px; width: 28px; }
  .app-body .app-brand .brand-text small { display: none; }
  .app-body .sb-top { flex-direction: row; align-items: stretch; gap: 6px; margin-bottom: 6px; }
  .app-body .sb-family { flex: 1 1 auto; min-width: 0; padding: 3px; }
  .app-body .sb-fam-av { width: 30px; height: 30px; border-radius: 9px; }
  .app-body .sb-fam-mono { font-size: 1.0625rem; }
  .app-body .sb-new { width: 44px; height: auto; flex: 0 0 44px; padding: 0; justify-content: center; }
  .app-body .sb-new-l, .app-body .sb-new .sb-new-kbd { display: none; }
  .app-body .sb-new-ic { background: none; }
  .app-body .side-item { font-size: .8125rem; }
  .app-body .nav-sec-toggle { font-size: .625rem; }
  .app-body .sidebar-foot { padding-top: 6px; }
  .app-body .sb-user { padding-block: 4px; }
  .app-body .sb-user-av { width: 30px; height: 30px; }
}

/* Rail (daraltılmış) mod — masaüstü */
@media (min-width: 861px) {
  html.sb-collapsed .app-body .app-sidebar { padding-inline: 10px; }
  html.sb-collapsed .app-body .sb-scroll { margin-inline: -10px; padding-inline: 10px; }
  html.sb-collapsed .app-body .sb-head { flex-direction: column; height: auto; gap: 6px; padding: 0; margin-bottom: 10px; }
  html.sb-collapsed .app-body .app-brand { padding: 4px; }
  html.sb-collapsed .app-body .app-brand .brand-text,
  html.sb-collapsed .app-body .sb-fam-txt, html.sb-collapsed .app-body .sb-fam-copy,
  html.sb-collapsed .app-body .sb-new-l, html.sb-collapsed .app-body .sb-new-kbd,
  html.sb-collapsed .app-body .side-item > span:not(.side-badge), html.sb-collapsed .app-body .side-kbd,
  html.sb-collapsed .app-body .nav-sec-chev, html.sb-collapsed .app-body .nav-sec-badge,
  html.sb-collapsed .app-body .nav-admin-txt, html.sb-collapsed .app-body .sb-plan,
  html.sb-collapsed .app-body .sb-user-txt, html.sb-collapsed .app-body .sb-user-go { display: none !important; }
  html.sb-collapsed .app-body .sb-top { flex-direction: column; align-items: center; gap: 8px; }
  html.sb-collapsed .app-body .sb-family { padding: 0; background: none; box-shadow: none; }
  html.sb-collapsed .app-body .sb-fam-main { padding: 3px; }
  html.sb-collapsed .app-body .sb-fam-av { width: 38px; height: 38px; border-radius: 12px; }
  html.sb-collapsed .app-body .sb-new { width: 44px; height: 40px; flex: 0 0 auto; padding: 0; justify-content: center; }
  html.sb-collapsed .app-body .sb-new-ic { background: none; }
  html.sb-collapsed .app-body .nav-sec-toggle { height: 1px; margin: 8px 12px; padding: 0; font-size: 0; background: var(--mx-line-2); pointer-events: none; border-radius: 0; }
  html.sb-collapsed .app-body .nav-sec:first-child .nav-sec-toggle { margin-top: 2px; background: transparent; }
  html.sb-collapsed .app-body .nav-sec.is-closed .nav-sec-body { grid-template-rows: 1fr; }
  html.sb-collapsed .app-body .nav-sec.is-closed .nav-sec-inner { visibility: visible; }
  html.sb-collapsed .app-body .nav-sec-inner { align-items: center; gap: 2px; }
  html.sb-collapsed .app-body .side-item { width: 44px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
  html.sb-collapsed .app-body .side-item:hover .side-icon { transform: scale(1.08) !important; }
  html.sb-collapsed .app-body .side-item .side-badge { position: absolute; top: 1px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .5625rem; box-shadow: 0 0 0 2px var(--mx-frame); }
  html.sb-collapsed .app-body .nav-admin { padding: 8px 4px; align-items: center; }
  html.sb-collapsed .app-body .nav-admin-head { justify-content: center; padding: 2px 0 8px; }
  html.sb-collapsed .app-body .sb-pill::before { inset-inline-start: -6px; }
  html.sb-collapsed .app-body .sb-user { justify-content: center; padding: 6px; }
}

/* ---------- 4. ÜST BAR ---------- */
.app-body .app-topbar {
  position: fixed; z-index: 100;
  top: 0; inset-inline-start: var(--sb-w); inset-inline-end: 0;
  height: var(--tb-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  padding: env(safe-area-inset-top, 0px) 0 0;
  padding-inline-start: 6px;
  padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
  background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: inset-inline-start var(--mx-t3) var(--mx-ease);
}
body.is-admin .app-topbar { border: 0; }
.app-body .app-menu-toggle { display: none; }

.app-body .tb-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.app-body .tb-mark { display: none; height: 28px; width: 28px; object-fit: contain; }
.app-body .tb-crumb { font-size: .8125rem; color: var(--mx-ink-500); white-space: nowrap; }
.app-body .tb-sep { color: var(--mx-ink-400); flex: 0 0 auto; }
.app-body .tb-page { font-size: .875rem; font-weight: 600; color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-body .tb-search {
  display: inline-flex; align-items: center; gap: 10px;
  margin-inline-start: auto;
  width: clamp(200px, 26vw, 340px); height: 38px; padding: 0 8px 0 12px; box-sizing: border-box;
  border: 0; border-radius: var(--mx-r-md);
  background: var(--mx-surface); color: var(--mx-ink-500);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .04), 0 0 0 1px var(--mx-line);
  font: 400 .8125rem var(--mx-sans); text-align: start; cursor: pointer;
  transition: box-shadow var(--mx-t1), color var(--mx-t1);
}
.app-body .tb-search:hover { color: var(--mx-ink-700); box-shadow: 0 1px 2px rgba(20, 32, 24, .06), 0 0 0 1px var(--mx-line-2); }
.app-body .tb-search-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body kbd, .app-body .tb-kbd {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px; border-radius: 6px;
  background: var(--mx-surface-2); box-shadow: inset 0 0 0 1px var(--mx-line-2);
  font: 600 .6875rem var(--mx-sans); color: var(--mx-ink-600); white-space: nowrap;
}

/* Durum göstergesi (iki eski hap tek zarif göstergede) */
.app-body .topbar-status { position: relative; display: flex; margin: 0; gap: 0; }
.app-body .status-ind {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 12px; border: 0; border-radius: var(--mx-r-pill);
  background: transparent; color: var(--mx-brand-700); cursor: default;
  font: 600 .75rem var(--mx-sans); letter-spacing: .01em;
}
.app-body .status-ind:hover, .app-body .status-ind:focus-visible { background: rgba(43, 125, 80, .08); }
.app-body .status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #2fa36a; box-shadow: 0 0 0 3px rgba(47, 163, 106, .18);
  animation: mxPulse 2.8s var(--mx-ease) infinite;
}
.app-body .status-pop {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 120;
  display: flex; flex-direction: column; gap: 4px; min-width: 230px;
  padding: 8px; border-radius: var(--mx-r-md);
  background: var(--mx-surface); box-shadow: var(--mx-e3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--mx-t2) var(--mx-ease), transform var(--mx-t2) var(--mx-ease), visibility 0s linear var(--mx-t2);
}
.app-body .topbar-status:hover .status-pop,
.app-body .topbar-status:focus-within .status-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.app-body .status-pop .status-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: var(--mx-r-sm);
  background: var(--mx-brand-50); color: var(--mx-brand-800);
  font-size: .8125rem; font-weight: 500; letter-spacing: 0;
}
.app-body .status-pop .status-pill.secure::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fa36a; box-shadow: 0 0 0 3px rgba(47, 163, 106, .18); flex: 0 0 auto;
}
.app-body .status-pop .status-dot { animation: none; }

/* Eylemler */
.app-body .topbar-actions { display: flex; align-items: center; gap: 4px; margin: 0; }
.app-body .notif-btn,
.app-body .app-topbar .lang-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-width: 38px; padding: 0 9px; box-sizing: border-box;
  border: 0; border-radius: var(--mx-r-sm);
  background: transparent; box-shadow: none; color: var(--mx-ink-600);
  font: 600 .75rem var(--mx-sans); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .notif-btn { width: 38px; padding: 0; position: relative; }
.app-body .notif-btn:hover, .app-body .app-topbar .lang-btn:hover { background: rgba(28, 38, 30, .06); color: var(--mx-ink-900); }
.app-body .notif-btn[aria-expanded="true"] { background: var(--mx-surface); color: var(--mx-brand-800); box-shadow: 0 0 0 1px var(--mx-line); }
.app-body .notif-badge {
  position: absolute; top: 5px; inset-inline-end: 5px; right: auto;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: var(--mx-r-pill);
  background: var(--mx-danger); color: #fff; font-size: .625rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--mx-frame);
}
.app-body .app-topbar .lang-btn .lang-flag { display: inline-flex; }
.app-body .app-topbar .lang-btn .lang-flag svg { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.app-body .app-topbar .lang-btn > svg { opacity: .55; }

.app-body .user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 3px 10px 3px 3px; margin-inline-start: 4px; box-sizing: border-box;
  border: 0; border-radius: var(--mx-r-pill);
  background: var(--mx-surface); box-shadow: 0 1px 2px rgba(20, 32, 24, .04), 0 0 0 1px var(--mx-line);
  cursor: pointer; font-family: var(--mx-sans);
  transition: box-shadow var(--mx-t1);
}
.app-body .user-chip:hover { box-shadow: 0 2px 6px rgba(20, 32, 24, .08), 0 0 0 1px var(--mx-line-2); }
.app-body .user-chip .user-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--mx-brand-600), var(--mx-brand-900)); color: #fff;
  font-size: .72rem; font-weight: 700; box-shadow: none;
}
.app-body .user-chip .user-name { font-size: .8125rem; font-weight: 600; color: var(--mx-ink-800); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .user-chip .user-caret { color: var(--mx-ink-400); }

/* Açılır paneller */
.app-body .app-topbar .lang-menu,
.app-body .user-menu,
.app-body .notif-panel {
  background: var(--mx-surface); border: 0; border-radius: var(--mx-r-lg);
  box-shadow: var(--mx-e4);
  animation: mxPop var(--mx-t2) var(--mx-ease-out);
}
.app-body .app-topbar .lang-menu { padding: 6px; min-width: 180px; }
.app-body .app-topbar .lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px;
  border-radius: var(--mx-r-sm); font-size: .8125rem; color: var(--mx-ink-700);
  transition: background-color var(--mx-t1);
}
.app-body .app-topbar .lang-menu button:hover { background: var(--mx-surface-2); }
.app-body .app-topbar .lang-menu button.active { background: var(--mx-brand-50); color: var(--mx-brand-800); font-weight: 600; }
.app-body .user-menu { padding: 16px; width: 320px; }
.app-body .um-head { gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--mx-line); }
.app-body .um-avatar { background: linear-gradient(140deg, var(--mx-brand-600), var(--mx-brand-900)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(196, 154, 69, .6); }
.app-body .um-row { font-size: .8125rem; }
.app-body .um-role { border-radius: var(--mx-r-pill); font-weight: 600; }
.app-body .um-help {
  border-radius: var(--mx-r-sm); background: var(--mx-surface-2); border: 0; color: var(--mx-ink-700);
  font-size: .8125rem; font-weight: 500; min-height: 38px; transition: background-color var(--mx-t1);
}
.app-body .um-help:hover { background: var(--mx-surface-3); }
.app-body .notif-panel { width: 360px; overflow: hidden; }
.app-body .notif-head { padding: 14px 16px; border-bottom: 1px solid var(--mx-line); }
.app-body .notif-head strong { font-size: .875rem; }
.app-body .notif-clear { color: var(--mx-gold-700); font-size: .75rem; font-weight: 600; }

/* ---------- 5. GÖRÜNÜM & SAYFA BAŞLIĞI ---------- */
.app-body .view.active {
  display: block;
  max-width: 1240px; min-height: 0;
  margin: 0 auto; box-sizing: border-box;
  padding: 40px 48px 96px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  animation: mxViewIn var(--mx-t3) var(--mx-ease-out);
}
.app-body #view-tree.active, .app-body #view-dm.active, .app-body #view-admin.active { max-width: 1320px; }

.app-body .view-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px;
  margin: 0 0 32px; padding: 0 0 24px; max-width: none;
  background: none; border: 0; border-bottom: 1px solid var(--mx-line);
  border-radius: 0; box-shadow: none; animation: none;
}
.app-body .view-head::before, .app-body .view-head::after { content: none !important; display: none !important; }
.app-body .view-head h1 {
  grid-column: 1; margin: 0 0 8px;
  font-family: var(--mx-serif); font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1vw, 2.625rem); line-height: 1.08; letter-spacing: -.012em;
  color: var(--mx-ink-900);
}
.app-body .view-head p {
  grid-column: 1; margin: 0; max-width: 68ch;
  font-size: .9375rem; line-height: 1.6; color: var(--mx-ink-600);
}
.app-body .vh-actions {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.app-body .sec-subtitle {
  display: flex; align-items: center; gap: 10px; background: none; box-shadow: none;
  margin: 40px 0 16px; padding: 0;
  font-family: var(--mx-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--mx-ink-900); border: 0;
}
.app-body .sec-subtitle small { font-weight: 400; color: var(--mx-ink-500); font-size: .8125rem; }
/* Görünüm içi alt başlıklar: arayüz yazı tipi (style.css'teki serif h3'ü ez) */
.app-body .view :is(h3, h4, h5) { font-family: var(--mx-sans); letter-spacing: -.01em; }
.app-body .view .profile-hero h3 { font-family: var(--mx-serif); letter-spacing: 0; }
.app-body .back-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 20px;
  padding: 6px 12px 6px 8px; border: 0; border-radius: var(--mx-r-pill);
  background: var(--mx-surface); box-shadow: var(--mx-e1); color: var(--mx-ink-700);
  font: 500 .8125rem var(--mx-sans); cursor: pointer;
}
.app-body .back-link:hover { color: var(--mx-brand-800); box-shadow: var(--mx-e2); }

/* ---------- 6. MOBİL ALT SEKME ÇUBUĞU ---------- */
.mx-tabbar { display: none; }
@media (max-width: 860px) {
  :root { --tab-h: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* Çekmece: tam yükseklik, aynı bileşen dili */
  .app-body .app-sidebar {
    --nv-item: 44px; --nv-ic: 30px; --nv-ic-pad: 6px; --nv-label: 30px; --nv-gap: 2px; --nv-sec-gap: 8px;
    top: 0; bottom: 0; height: 100dvh; width: min(88vw, 340px); z-index: 1200;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px calc(12px + env(safe-area-inset-bottom, 0px));
    padding-inline-start: max(14px, env(safe-area-inset-left, 0px));
    background: var(--mx-frame);
    box-shadow: 0 24px 64px -12px rgba(8, 22, 13, .45);
    border-start-end-radius: 28px; border-end-end-radius: 28px;
    transform: translateX(-104%);
  }
  .app-body .app-sidebar.open { transform: none; }
  [dir="rtl"] .app-body .app-sidebar { transform: translateX(104%); border-radius: 28px 0 0 28px; }
  [dir="rtl"] .app-body .app-sidebar.open { transform: none; }
  .app-body .sb-collapse { width: 40px; height: 40px; background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-line); color: var(--mx-ink-700); }
  .app-body .sb-collapse .ic-rail { display: none; }
  .app-body .sb-collapse .ic-close { display: block; }
  .app-body .sb-new { height: 46px; }
  .app-body .sb-scroll { margin-inline: -14px; padding-inline: 14px; }
  .app-body .side-item { font-size: .9375rem; border-radius: 12px; }
  .app-body .side-item .side-icon { border-radius: 9px; }
  .app-body .side-kbd, .app-body .sb-new-kbd { display: none !important; }
  .app-body .sb-user { min-height: 52px; }
  .app-body .sidebar-scrim {
    position: fixed; inset: 0; z-index: 1150; display: block;
    background: rgba(10, 20, 14, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 260ms var(--mx-ease);
  }
  .app-body .sidebar-scrim.show { opacity: 1; pointer-events: auto; }

  /* Alt sekme çubuğu: yüzen ada + ortada yüzen "+" */
  .mx-tabbar {
    position: fixed; z-index: 1000;
    left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
    height: 64px; box-sizing: border-box; padding: 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(170%) blur(20px); backdrop-filter: saturate(170%) blur(20px);
    box-shadow: 0 1px 2px rgba(20, 32, 24, .06), 0 14px 36px -12px rgba(20, 32, 24, .3), 0 0 0 1px var(--mx-line);
    font-family: var(--mx-sans);
    transition: transform var(--mx-t3) var(--mx-ease-out), opacity var(--mx-t2);
  }
  .mx-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 52px; min-width: 0; padding: 0 2px; margin: 0; border: 0; border-radius: 16px;
    background: transparent; color: var(--mx-ink-500); cursor: pointer;
    font: 500 .625rem var(--mx-sans); letter-spacing: .01em;
    transition: color var(--mx-t1), background-color var(--mx-t1);
  }
  .mx-tab > svg { width: 22px; height: 22px; stroke-width: 1.7; transition: transform var(--mx-t2) var(--mx-ease-out); }
  .mx-tab-l { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-tab.active { color: var(--mx-brand-800); font-weight: 600; background: var(--mx-brand-50); }
  .mx-tab.active > svg { transform: translateY(-1px); }
  .mx-tab:active { background: rgba(28, 38, 30, .06); }
  .mx-tab-fab { background: none !important; overflow: visible; }
  .mx-fab {
    position: relative; top: -14px;
    width: 56px; height: 56px; padding: 0; display: grid; place-items: center;
    border: 0; border-radius: 20px; cursor: pointer; color: #fff;
    background: radial-gradient(80% 80% at 30% 20%, rgba(229, 207, 151, .35), transparent 60%), linear-gradient(160deg, var(--mx-brand-700), var(--mx-brand-900));
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .95), 0 12px 24px -8px rgba(10, 38, 21, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform var(--mx-t2) var(--mx-ease-out), box-shadow var(--mx-t2);
  }
  .mx-fab:active { transform: scale(.94); }
  .mx-fab .mx-fab-ic { width: 26px; height: 26px; stroke-width: 2.2; transition: transform var(--mx-t3) var(--mx-ease-out); }
  .mx-fab[aria-expanded="true"] .mx-fab-ic { transform: rotate(45deg); }
  .mx-tab-badge {
    position: absolute; top: 3px; left: calc(50% + 5px);
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center;
    border-radius: var(--mx-r-pill); background: var(--mx-danger); color: #fff;
    font: 700 .625rem var(--mx-sans); font-style: normal; box-shadow: 0 0 0 2px #fff;
  }
  .mx-tab-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 8px; left: calc(50% + 8px); }
  [dir="rtl"] .mx-tab-badge { left: auto; right: calc(50% + 5px); }
  /* Tam ekran sohbetlerde ve çekmece açıkken ada çekilir */
  html:has(#view-chamber.active #chamberLayout:not([hidden])) .mx-tabbar,
  html:has(#view-dm.active #dmActive:not([hidden])) .mx-tabbar,
  html:has(.app-sidebar.open) .mx-tabbar { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .app-body:has(.app-sidebar.open) .chat-fab { opacity: 0; pointer-events: none; }
  /* Alt adada "Sohbetler" sekmesi varken yüzen sohbet balonu tekrar etmesin */
  body:has(.mx-tabbar.has-fab) .chat-fab { display: none !important; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .app-body .sb-plan { display: none; }
}

/* ---------- 7. HAREKET ---------- */
@keyframes mxViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxPop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mxPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(47, 163, 106, .18); } 50% { box-shadow: 0 0 0 5px rgba(47, 163, 106, .06); } }
@keyframes mxShimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes mxDots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- 8. BUTONLAR & FORM ALANLARI ---------- */
.app-body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 0; border-radius: var(--mx-r-sm);
  font: 600 .875rem/1.2 var(--mx-sans); letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--mx-t1) var(--mx-ease), box-shadow var(--mx-t1) var(--mx-ease), color var(--mx-t1), transform var(--mx-t1);
}
.app-body .btn:active { transform: scale(.98); }
.app-body .btn svg { flex: 0 0 auto; }
.app-body .btn-gold {
  background: var(--mx-brand-800); color: #fff;
  box-shadow: 0 1px 2px rgba(10, 38, 21, .25), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.app-body .btn-gold:hover { background: var(--mx-brand-700); color: #fff; box-shadow: 0 4px 12px -2px rgba(10, 38, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .12); transform: none; }
.app-body .btn-ghost {
  background: var(--mx-surface); color: var(--mx-ink-800);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), inset 0 0 0 1px var(--mx-line-2);
}
.app-body .btn-ghost:hover { background: var(--mx-surface-2); color: var(--mx-ink-900); box-shadow: 0 1px 2px rgba(20, 32, 24, .05), inset 0 0 0 1px var(--mx-line-3); }
.app-body .btn-danger { background: var(--mx-danger); color: #fff; box-shadow: 0 1px 2px rgba(120, 20, 20, .25); }
.app-body .btn-danger:hover { background: #9c2a24; }
.app-body .btn-lg { min-height: 48px; padding: 0 24px; font-size: .9375rem; border-radius: var(--mx-r-md); }
.app-body .btn-sm { min-height: 34px; padding: 0 12px; font-size: .8125rem; border-radius: var(--mx-r-sm); }
.app-body .btn[disabled], .app-body .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Odak halkaları */
.app-body :is(button, a, [role="button"], summary, .cp-card, .side-item, .mx-tab):focus-visible {
  outline: none; box-shadow: var(--mx-ring) !important;
}
.app-body :is(input, select, textarea):focus-visible { outline: none; }

/* Alanlar (tüm formlar tek dil) */
.app-body :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], input[type="tel"], input[type="url"], select, textarea):not(.mx-cmd-q):not(#chatText):not(#dmText):not(#cwText) {
  min-height: 40px; box-sizing: border-box;
  padding: 9px 12px;
  border: 0; border-radius: var(--mx-r-sm);
  background-color: var(--mx-surface);
  box-shadow: inset 0 0 0 1px var(--mx-line-2), 0 1px 2px rgba(20, 32, 24, .03);
  color: var(--mx-ink-900);
  font: 400 .875rem/1.4 var(--mx-sans);
  transition: box-shadow var(--mx-t1) var(--mx-ease), background-color var(--mx-t1);
}
.app-body :is(input, select, textarea):not(.mx-cmd-q):not(#chatText):not(#dmText):not(#cwText):hover { box-shadow: inset 0 0 0 1px var(--mx-line-3), 0 1px 2px rgba(20, 32, 24, .03); }
.app-body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not(.mx-cmd-q):not(#chatText):not(#dmText):not(#cwText):focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--mx-brand-600), var(--mx-ring-field);
}
.app-body textarea { min-height: 104px; line-height: 1.55; resize: vertical; }
.app-body select {
  -webkit-appearance: none; appearance: none;
  padding-inline-end: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b746c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
[dir="rtl"] .app-body select { background-position: left 12px center; }
.app-body ::placeholder { color: var(--mx-ink-400); opacity: 1; }
.app-body input[type="checkbox"], .app-body input[type="radio"] { accent-color: var(--mx-brand-700); }
.app-body label > span:first-child,
.app-body .member-form label,
.app-body .iv-field label { font-size: .8125rem; font-weight: 500; color: var(--mx-ink-700); }

/* Segment kontrolleri */
.app-body .setup-tabs, .app-body .bill-toggle, .app-body .report-filter {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--mx-r-md);
  background: var(--mx-surface-3); box-shadow: inset 0 0 0 1px var(--mx-line);
}
.app-body .setup-tab, .app-body .bill-toggle button, .app-body .report-filter .cat-chip {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--mx-r-sm);
  background: transparent; color: var(--mx-ink-600); box-shadow: none;
  font: 500 .8125rem var(--mx-sans); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1), box-shadow var(--mx-t1);
}
.app-body .setup-tab:hover, .app-body .bill-toggle button:hover, .app-body .report-filter .cat-chip:hover { color: var(--mx-ink-900); }
.app-body .setup-tab.active, .app-body .bill-toggle button.on, .app-body .report-filter .cat-chip.active {
  background: var(--mx-surface); color: var(--mx-ink-900); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 32, 24, .10), 0 0 0 1px var(--mx-line);
}
.app-body .bill-toggle em { font-style: normal; font-weight: 600; color: var(--mx-brand-700); margin-inline-start: 4px; }

/* ---------- 9. KARTLAR · ROZETLER · TABLOLAR ---------- */
.app-body :is(.staff-card, .bill-card, .bill-sec.bill-card, .pf-settings, .sec-card, .iv-setup-card, .fr-addcard, .code-panel > *, .invite-by-code, .ac-card, .digest-test-box, .upload-form, .detail-section, .member-tile, .af-card, .fam-card) {
  background: var(--mx-surface);
  border: 0; border-radius: var(--mx-r-lg);
  box-shadow: var(--mx-e2);
}
.app-body .chip, .app-body .vault-badge, .app-body .cap-badge, .app-body .bill-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--mx-r-pill);
  font: 600 .6875rem/1.3 var(--mx-sans); letter-spacing: .02em; white-space: nowrap;
}
.app-body code, .app-body .copyable { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.app-body .admin-table-wrap, .app-body .bill-tablewrap {
  background: var(--mx-surface); border: 0; border-radius: var(--mx-r-lg);
  box-shadow: var(--mx-e2); overflow: auto;
}
.app-body .admin-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8125rem; }
.app-body .admin-table thead tr { background: var(--mx-surface-2) !important; }
.app-body .admin-table th {
  padding: 12px 16px; text-align: start;
  color: var(--mx-ink-600) !important; background: var(--mx-surface-2);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--mx-line) !important; border-radius: 0 !important;
  position: sticky; top: 0; z-index: 1;
}
.app-body .admin-table th.sortable:hover { background: var(--mx-surface-3); color: var(--mx-ink-900) !important; }
.app-body .admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--mx-line); color: var(--mx-ink-800); vertical-align: middle; }
.app-body .admin-table tbody tr { background: transparent !important; transition: background-color var(--mx-t1); }
.app-body .admin-table tbody tr:last-child td { border-bottom: 0; }
.app-body .admin-table tbody tr:hover { background: var(--mx-surface-2) !important; }
.app-body .admin-table tr.clickable { cursor: pointer; }
.app-body .admin-table code, .app-body .admin-table .chip, .app-body .admin-table .role-badge, .app-body .admin-table td > span { white-space: nowrap; }
.app-body #adminApi :is(h3, h4, span, small, em, b, p, button) { font-family: var(--mx-sans); }
.app-body .admin-search {
  width: 100%; max-width: 440px; margin: 0 0 16px; display: block;
}

/* ---------- 10. EKRANLAR ---------- */

/* 10.1 HAFIZA AĞACI */
.app-body .today-strip {
  margin: 0 0 24px; padding: 18px 20px; border: 0; border-radius: var(--mx-r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(196, 154, 69, .28), transparent 55%),
    linear-gradient(135deg, var(--mx-brand-900), var(--mx-brand-800));
  box-shadow: 0 12px 32px -12px rgba(10, 38, 21, .45);
}
.app-body .today-title { color: var(--mx-gold-300); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.app-body .today-card { border-radius: var(--mx-r-md); border-color: rgba(229, 207, 151, .28); }

.app-body .tree-stage2 {
  position: relative; margin: 0; padding: 0;
  background: var(--mx-surface); border: 0; border-radius: var(--mx-r-xl);
  box-shadow: var(--mx-e2); overflow: hidden;
}
.app-body #genChart {
  position: relative;
  min-height: 520px; max-height: calc(100dvh - 320px);
  padding: 16px 24px 32px; box-sizing: border-box; overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(28, 38, 30, .07) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--mx-gold-50), var(--mx-surface) 40%);
  border: 0; border-radius: 0; cursor: grab;
}
.app-body #genChart.dragging { cursor: grabbing; }
/* Yüzen zoom denetimi */
.app-body .tree-zoom {
  position: sticky; top: 0; left: 0; z-index: 20;
  display: flex; width: max-content; align-items: center; gap: 2px;
  margin: 0 0 20px; padding: 4px;
  background: rgba(255, 255, 255, .92); border: 0; border-radius: var(--mx-r-md);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--mx-e3);
}
.app-body .tree-zoom button {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--mx-r-sm);
  background: transparent; color: var(--mx-ink-700); cursor: pointer;
  font: 500 1.05rem/1 var(--mx-sans);
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .tree-zoom button:hover { background: var(--mx-surface-2); color: var(--mx-ink-900); }
.app-body .tree-zoom span { min-width: 48px; text-align: center; font: 600 .75rem var(--mx-sans); color: var(--mx-ink-600); font-variant-numeric: tabular-nums; }
.app-body .tree-zoom #tzFit { border-inline-start: 1px solid var(--mx-line); border-radius: 0 var(--mx-r-sm) var(--mx-r-sm) 0; }

/* Kişi kartları */
.app-body .famtree2 .gc-node, .app-body .gc-node {
  width: 136px; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 10px 12px;
  background: var(--mx-surface) !important;
  border: 0; border-radius: var(--mx-r-lg);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 6px 16px -8px rgba(20, 32, 24, .16), 0 0 0 1px var(--mx-line);
  text-align: center; cursor: pointer;
  transition: transform var(--mx-t2) var(--mx-ease), box-shadow var(--mx-t2) var(--mx-ease);
}
.app-body .gc-node::before {
  content: ""; position: absolute; inset: 0 24px auto; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--mx-gold-300), var(--mx-gold-500), var(--mx-gold-300));
}
.app-body .gc-node.live::before { background: linear-gradient(90deg, #9fd3b4, var(--mx-brand-500), #9fd3b4); }
.app-body .gc-node::after { display: none !important; }
.app-body .famtree2 .gc-node:hover, .app-body .gc-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 32, 24, .05), 0 16px 32px -12px rgba(20, 32, 24, .28), 0 0 0 1px var(--mx-line-2);
}
.app-body .gc-node.marriedin { box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 0 0 1px var(--mx-gold-300); border: 0; background: var(--mx-gold-50) !important; }
.app-body .gc-photo {
  width: 60px; height: 60px; margin: 0 0 8px; border-radius: 50% !important; overflow: hidden;
  border: 0; box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-gold-500);
  animation: none !important;
}
.app-body .gc-photo.live { box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-brand-500); }
.app-body .gc-node.marriedin .gc-photo { border: 0; box-shadow: 0 0 0 2px var(--mx-gold-50), 0 0 0 3.5px var(--mx-gold-300); }
.app-body .gc-photo img, .app-body .gc-photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-body .gc-node strong { font-family: var(--mx-sans); font-size: .8125rem; font-weight: 600; color: var(--mx-ink-900); line-height: 1.25; }
.app-body .gc-role { display: block; padding: 0; background: none !important; border-radius: 0; font-size: .75rem; line-height: 1.3; color: var(--mx-ink-600); }
.app-body .gc-role::before { content: none !important; }
.app-body .gc-years { font-size: .6875rem; color: var(--mx-ink-500); font-variant-numeric: tabular-nums; }
.app-body .gc-status {
  margin-top: 8px; padding: 2px 8px; border-radius: var(--mx-r-pill);
  font-size: .625rem; font-weight: 600; letter-spacing: .02em;
  background: var(--mx-gold-100); color: var(--mx-gold-800); border: 0;
}
.app-body .gc-status.live { background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .gc-marriedin {
  margin: 2px 0; padding: 1px 7px; border-radius: var(--mx-r-pill);
  background: var(--mx-gold-100); color: var(--mx-gold-800); font-size: .625rem; font-weight: 600; border: 0;
}
/* Bağlantı çizgileri: ince, sıcak altın */
.app-body .anc-drop { width: 1.5px; background: var(--mx-gold-300); border-radius: 0; }
.app-body .tree-children::before,
.app-body .tree-children > .tree-union::before { width: 1.5px; background: var(--mx-gold-300); }
.app-body .tree-children > .tree-union::after { height: 1.5px; background: var(--mx-gold-300); }
.app-body .tree-couple > .gc-heart, .app-body .gc-heart {
  width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 0 !important; line-height: 1; border-radius: 50%; color: var(--mx-gold-600);
  background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-gold-300), 0 2px 6px rgba(20, 32, 24, .08);
  animation: none !important;
}
.app-body .gc-heart::before { content: "♥"; font-size: 12px; line-height: 1; }
.app-body .gc-heart.divorced { color: var(--mx-ink-400); }
.app-body .gc-heart.divorced::before { content: "♡"; }
.app-body .gc-heart small { display: none !important; }
/* Lejant */
.app-body .tree-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin: 0; padding: 14px 20px;
  border-top: 1px solid var(--mx-line); background: var(--mx-surface);
  font-size: .75rem; color: var(--mx-ink-600);
}
.app-body .tree-legend > span { display: inline-flex; align-items: center; gap: 2px; }
.app-body .tree-legend .dot { width: 8px; height: 8px; box-shadow: none !important; }
.app-body .tree-legend .dot-live { background: var(--mx-brand-500); }
.app-body .tree-legend .dot-memorial { background: var(--mx-gold-500); }

/* 10.2 BİLGELİK ODASI — kişi seçici */
.app-body .chamber-picker { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.app-body .cp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 28px;
}
.app-body .cp-title { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 1.0625rem; font-weight: 600; color: var(--mx-ink-900); }
.app-body .cp-title small { font-size: .8125rem; font-weight: 400; color: var(--mx-ink-500); }
.app-body .cp-search {
  position: relative; display: flex; align-items: center; width: min(320px, 100%);
}
.app-body .cp-search svg { position: absolute; inset-inline-start: 12px; color: var(--mx-ink-500); pointer-events: none; }
.app-body .cp-search input { width: 100%; padding-inline-start: 36px !important; border-radius: var(--mx-r-pill) !important; }
.app-body .cp-grid { display: block; margin: 0; }
.app-body .cp-section { margin: 0 0 48px; }
.app-body .cp-sec-head { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.app-body .cp-sec-head h2 {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mx-serif); font-size: 1.625rem; font-weight: 600; color: var(--mx-ink-900); letter-spacing: -.01em;
}
.app-body .cp-sec-head p { margin: 0; font-size: .8125rem; color: var(--mx-ink-500); }
.app-body .cp-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: var(--mx-r-pill); background: var(--mx-surface-3);
  font: 600 .6875rem var(--mx-sans); color: var(--mx-ink-600);
}
.app-body .cp-sec-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* Sinematik portre kartı (vefat edenler) */
.app-body .cp-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
  aspect-ratio: 4 / 5; min-height: 0; width: 100%;
  padding: 0; margin: 0; overflow: hidden;
  border: 0; border-radius: var(--mx-r-xl);
  background: var(--mx-brand-950); color: #fff;
  box-shadow: 0 2px 4px rgba(10, 30, 18, .08), 0 18px 36px -18px rgba(10, 30, 18, .55);
  text-align: start; cursor: pointer;
  transition: transform var(--mx-t3) var(--mx-ease-out), box-shadow var(--mx-t3) var(--mx-ease-out);
  animation: mxRise 420ms var(--mx-ease-out) both;
}
.app-body .cp-card::before, .app-body .cp-card::after { content: none; }
.app-body .cp-sec-grid > .cp-card:nth-child(2) { animation-delay: 40ms; }
.app-body .cp-sec-grid > .cp-card:nth-child(3) { animation-delay: 80ms; }
.app-body .cp-sec-grid > .cp-card:nth-child(4) { animation-delay: 120ms; }
.app-body .cp-sec-grid > .cp-card:nth-child(n+5) { animation-delay: 160ms; }
.app-body .cp-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(10, 30, 18, .10), 0 28px 48px -20px rgba(10, 30, 18, .65); }
.app-body .cp-card .cp-photo {
  position: absolute; inset: 0; z-index: -1;
  width: auto; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 25%, rgba(196, 154, 69, .22), transparent 70%),
    linear-gradient(180deg, var(--mx-brand-800), var(--mx-brand-950));
}
.app-body .cp-card .cp-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: saturate(.82) contrast(1.02);
  transform: scale(1.001);
  transition: transform 600ms var(--mx-ease-out), filter var(--mx-t3);
}
.app-body .cp-card:hover .cp-photo img { transform: scale(1.05); filter: saturate(1) contrast(1.03); }
.app-body .cp-card .cp-photo.no-photo { place-items: start center; padding-top: 22%; box-sizing: border-box; }
.app-body .cp-mono {
  font-family: var(--mx-serif); font-weight: 600; font-size: 3.5rem; letter-spacing: .04em; line-height: 1;
  color: var(--mx-gold-300); opacity: .92; margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.app-body .cp-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 13, 0) 35%, rgba(8, 22, 13, .55) 62%, rgba(8, 22, 13, .92) 100%);
}
.app-body .cp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 54px; }
.app-body .cp-card strong {
  font-family: var(--mx-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: #fff; letter-spacing: -.005em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.app-body .cp-card .cp-role { font-size: .75rem; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.app-body .cp-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px;
  padding: 3px 9px; border-radius: var(--mx-r-pill); border: 0;
  font: 600 .625rem/1.3 var(--mx-sans); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(229, 207, 151, .16); color: var(--mx-gold-300);
  box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.app-body .cp-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.app-body .cp-cta {
  position: absolute; inset-inline: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; border-radius: var(--mx-r-md);
  background: rgba(255, 255, 255, .14); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 .8125rem var(--mx-sans);
  transition: background-color var(--mx-t2), color var(--mx-t2), transform var(--mx-t2);
}
.app-body .cp-card:hover .cp-cta, .app-body .cp-card:focus-visible .cp-cta { background: var(--mx-gold-300); color: var(--mx-brand-950); box-shadow: none; }
.app-body .cp-card:hover .cp-cta svg { transform: translateX(2px); }
.app-body .cp-cta svg { transition: transform var(--mx-t2); }
[dir="rtl"] .app-body .cp-cta svg { transform: scaleX(-1); }

/* Yaşayanlar: daha hafif, yatay kart */
.app-body .is-living .cp-sec-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.app-body .is-living .cp-card {
  aspect-ratio: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 12px 14px; border-radius: var(--mx-r-lg);
  background: var(--mx-surface); color: var(--mx-ink-900);
  box-shadow: var(--mx-e2);
}
.app-body .is-living .cp-card:hover { transform: translateY(-2px); box-shadow: var(--mx-e3); }
.app-body .is-living .cp-card .cp-photo, .app-body .is-living .cp-card .cp-photo.no-photo {
  position: relative; inset: auto; z-index: 0; flex: 0 0 auto; padding: 0; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--mx-brand-50); box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-brand-200);
}
.app-body .is-living .cp-card .cp-photo img { filter: none; object-position: center; }
.app-body .is-living .cp-card:hover .cp-photo img { transform: none; }
.app-body .is-living .cp-mono { font-size: 1.25rem; color: var(--mx-brand-700); margin: 0; text-shadow: none; }
.app-body .is-living .cp-shade { display: none; }
.app-body .is-living .cp-info { padding: 0; gap: 2px; flex: 1 1 auto; min-width: 0; }
.app-body .is-living .cp-card strong { font-family: var(--mx-sans); font-size: .9375rem; color: var(--mx-ink-900); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-body .is-living .cp-card .cp-role { color: var(--mx-ink-500); }
.app-body .is-living .cp-badge {
  order: 3; margin: 2px 0 0; background: var(--mx-brand-50); color: var(--mx-brand-700); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.app-body .is-living .cp-cta {
  position: static; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: var(--mx-surface-2); color: var(--mx-ink-700); box-shadow: inset 0 0 0 1px var(--mx-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0; gap: 0;
}
.app-body .is-living .cp-card:hover .cp-cta { background: var(--mx-brand-800); color: #fff; }

/* 10.3 BİLGELİK ODASI — sohbet */
.app-body .chamber-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.app-body .chamber-layout[hidden] { display: none !important; }
.app-body #view-chamber:has(#chamberLayout:not([hidden])) .view-head { margin-bottom: 24px; }
@media (min-width: 701px) {
  .app-body #chamberLayout { height: calc(100dvh - var(--tb-h) - 250px); min-height: 560px; }
  .app-body #chamberLayout .chamber-avatar {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 24px 28px !important; margin: 0; overflow: hidden;
    border: 0; border-radius: var(--mx-r-xl);
    background:
      radial-gradient(70% 45% at 50% 38%, rgba(196, 154, 69, .20), transparent 70%),
      radial-gradient(120% 60% at 50% 115%, rgba(43, 125, 80, .45), transparent 70%),
      linear-gradient(180deg, #0b1e13 0%, #10301e 60%, #154a2c 100%) !important;
    box-shadow: 0 24px 48px -24px rgba(8, 22, 13, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
    color: #fff; text-align: center;
  }
  .app-body #chamberLayout .avatar-stage { width: 220px; height: 220px; margin: 0 auto 24px; }
  .app-body #chamberLayout .chamber-avatar h3 { font-family: var(--mx-serif); font-weight: 600; font-size: 1.875rem; color: #f6efd9; margin: 0 0 6px; letter-spacing: -.005em; }
  .app-body #chamberLayout .avatar-kin { color: rgba(236, 244, 238, .70); font-size: .8125rem; margin: 0; }
  .app-body #chamberLayout .avatar-status {
    display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 4px 10px; border-radius: var(--mx-r-pill);
    background: rgba(229, 207, 151, .12); color: var(--mx-gold-300); font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .28);
  }
  .app-body #chamberLayout .avatar-scene {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin: auto 0 0; padding: 18px 0 0; width: 100%;
    border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none;
    font-size: .75rem; color: rgba(236, 244, 238, .55);
  }
  .app-body #chamberLayout .chamber-profile-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
    border: 0; border-radius: var(--mx-r-pill); cursor: pointer;
    background: rgba(255, 255, 255, .10); color: #f1f6f2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    font: 600 .75rem var(--mx-sans); transition: background-color var(--mx-t1);
  }
  .app-body #chamberLayout .chamber-profile-btn:hover { background: rgba(255, 255, 255, .18); }
  .app-body #chamberLayout .chamber-back {
    position: absolute; top: 16px; inset-inline-start: 16px; margin: 0;
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
    border: 0; border-radius: var(--mx-r-pill); cursor: pointer;
    background: rgba(255, 255, 255, .10); color: #eaf3ec; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    font: 600 .75rem var(--mx-sans);
  }
  .app-body #chamberLayout .chamber-back:hover { background: rgba(255, 255, 255, .18); }
  .app-body #chamberLayout .anchor-short { display: none; }
  .app-body #chamberLayout .liveav-badge { color: var(--mx-gold-300); font-size: .75rem; margin: 8px 0 0; }
}
.app-body .avatar-ring { box-shadow: 0 0 0 1px rgba(229, 207, 151, .45), 0 0 60px rgba(196, 154, 69, .18); }
.app-body .avatar-face { font-family: var(--mx-serif); }

.app-body .chamber-chat {
  display: flex; flex-direction: column; min-height: 0; height: auto;
  padding: 0; overflow: hidden;
  background: var(--mx-surface); border: 0; border-radius: var(--mx-r-xl);
  box-shadow: var(--mx-e2);
}
.app-body .reality-anchor {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 12px 16px;
  background: var(--mx-surface); border: 0; border-bottom: 1px solid var(--mx-line); border-radius: 0;
  font-size: .75rem; color: var(--mx-ink-600);
}
.app-body .reality-anchor > span { display: none; }
.app-body .reality-anchor > p {
  order: 5; flex: 1 1 100%; margin: 2px 0 0; padding: 8px 12px; border-radius: var(--mx-r-sm);
  background: var(--mx-gold-50); color: var(--mx-gold-800); font-size: .75rem; line-height: 1.5;
}
.app-body .chamber-back-top, .app-body .voice-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: var(--mx-r-pill); cursor: pointer;
  background: var(--mx-surface-2); color: var(--mx-ink-700); box-shadow: inset 0 0 0 1px var(--mx-line);
  font: 600 .75rem var(--mx-sans); transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .chamber-back-top:hover, .app-body .voice-toggle:hover { background: var(--mx-surface-3); color: var(--mx-ink-900); }
.app-body #voiceToggleBtn { margin-inline-start: auto; }
.app-body .voice-toggle.on { background: var(--mx-brand-50); color: var(--mx-brand-800); box-shadow: inset 0 0 0 1px var(--mx-brand-200); }
.app-body .voice-toggle.off { opacity: .8; }
.app-body .liveav-toggle.on { background: var(--mx-gold-100); color: var(--mx-gold-800); box-shadow: inset 0 0 0 1px var(--mx-gold-300); }

.app-body .chat-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; margin: 0; height: auto; max-height: none;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(196, 154, 69, .06), transparent 70%),
    var(--mx-panel);
}
.app-body .msg {
  max-width: min(78%, 620px); margin: 0; padding: 12px 16px;
  border: 0; border-radius: 18px;
  font-size: .9375rem; line-height: 1.6;
  animation: mxRise var(--mx-t3) var(--mx-ease-out);
  overflow-wrap: anywhere;
}
.app-body .msg.avatar {
  align-self: flex-start;
  background: var(--mx-surface); color: var(--mx-ink-800);
  border-end-start-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 0 0 1px var(--mx-line);
}
.app-body .msg.user {
  align-self: flex-end;
  background: var(--mx-brand-800); color: #f4f8f5;
  border-end-end-radius: 6px; box-shadow: 0 2px 8px -2px rgba(10, 38, 21, .35);
}
.app-body .msg.user .msg-user { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: rgba(244, 248, 245, .7); margin-bottom: 2px; }
.app-body .msg .msg-ref, .app-body .msg.avatar .msg-ref {
  display: block; margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--mx-line-2); color: var(--mx-gold-700); font-size: .75rem;
}
.app-body .msg.typing {
  color: var(--mx-ink-500); font-size: .8125rem; font-style: normal;
  display: inline-flex; align-items: center; gap: 10px;
}
.app-body .msg.typing::after {
  content: "• • •"; letter-spacing: 2px; font-size: .9rem; color: var(--mx-gold-600);
  animation: mxDots 1.2s ease-in-out infinite;
}
.app-body .msg-replay { border-radius: var(--mx-r-pill); }

.app-body .chamber-chat { --sugg-order: 1; }
.app-body .chat-suggestions {
  order: 2; display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 12px 16px 0; background: var(--mx-surface); border: 0;
}
.app-body .chat-input { order: 3; }
.app-body .chat-suggestions button {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--mx-r-pill); cursor: pointer;
  background: var(--mx-surface-2); color: var(--mx-ink-700); box-shadow: inset 0 0 0 1px var(--mx-line);
  font: 500 .8125rem var(--mx-sans); transition: background-color var(--mx-t1), color var(--mx-t1), box-shadow var(--mx-t1);
}
.app-body .chat-suggestions button:hover { background: var(--mx-gold-50); color: var(--mx-gold-800); box-shadow: inset 0 0 0 1px var(--mx-gold-300); }
.app-body .chat-input, .app-body .dm-input {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px 16px; padding: 6px; border: 0; border-radius: var(--mx-r-lg);
  background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line-2), 0 2px 8px -4px rgba(20, 32, 24, .12);
  transition: box-shadow var(--mx-t1);
}
.app-body .chat-input:focus-within, .app-body .dm-input:focus-within { box-shadow: inset 0 0 0 1px var(--mx-brand-600), var(--mx-ring-field); }
.app-body #chatText, .app-body #dmText {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 10px;
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  font: 400 .9375rem var(--mx-sans); color: var(--mx-ink-900);
}
.app-body .chat-mic, .app-body .dm-emoji-btn {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--mx-r-md); background: transparent; color: var(--mx-ink-600); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .chat-mic:hover, .app-body .dm-emoji-btn:hover { background: var(--mx-surface-2); color: var(--mx-ink-900); }
.app-body .chat-input .btn, .app-body .dm-input .btn { min-height: 40px; border-radius: var(--mx-r-md); padding: 0 18px; }

/* 10.4 SOHBETLER (DM) */
.app-body .dm-layout {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100dvh - var(--tb-h) - 250px); min-height: 520px;
  background: var(--mx-surface); border: 0; border-radius: var(--mx-r-xl);
  box-shadow: var(--mx-e2); overflow: hidden;
}
.app-body .dm-side { display: flex; flex-direction: column; min-height: 0; background: var(--mx-surface); border: 0; border-inline-end: 1px solid var(--mx-line); }
.app-body .dm-search-wrap {
  position: relative; display: flex; align-items: center; margin: 14px; padding: 0;
  background: none; border: 0;
}
.app-body .dm-search-wrap svg { position: absolute; inset-inline-start: 12px; color: var(--mx-ink-500); }
.app-body .dm-search-wrap input { width: 100%; padding-inline-start: 36px !important; background: var(--mx-surface-2) !important; box-shadow: none !important; }
.app-body .dm-search-wrap input:focus { box-shadow: inset 0 0 0 1px var(--mx-brand-600), var(--mx-ring-field) !important; background: var(--mx-surface) !important; }
.app-body .dm-list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 12px; max-height: none; }
.app-body .dm-person {
  display: flex; align-items: center; gap: 12px; margin: 0 0 2px; padding: 10px; border: 0;
  border-radius: var(--mx-r-md); cursor: pointer; background: transparent;
  transition: background-color var(--mx-t1);
}
.app-body .dm-person:hover { background: var(--mx-surface-2); }
.app-body .dm-person.active { background: var(--mx-brand-50); box-shadow: inset 0 0 0 1px var(--mx-brand-100); }
.app-body .dm-p-avatar .uav, .app-body .dm-uav { width: 42px; height: 42px; font-size: .8rem; }
.app-body .online-dot { box-shadow: 0 0 0 2px var(--mx-surface); }
.app-body .dm-p-info strong { font-size: .875rem; font-weight: 600; color: var(--mx-ink-900); }
.app-body .dm-p-info small { font-size: .75rem; color: var(--mx-ink-500); }
.app-body .dm-tag { border-radius: var(--mx-r-pill); font-size: .625rem; font-weight: 600; padding: 1px 6px; }
.app-body .dm-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--mx-panel); }
.app-body .dm-empty { margin: auto; padding: 32px; text-align: center; }
.app-body .dm-empty-ic {
  width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 4px;
  border-radius: 20px; font-size: 1.6rem; background: var(--mx-surface); box-shadow: var(--mx-e2);
}
.app-body .dm-empty p { color: var(--mx-ink-600); font-size: .875rem; }
.app-body .dm-active { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.app-body .dm-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--mx-surface); border: 0; border-bottom: 1px solid var(--mx-line);
}
.app-body .dm-head-info strong { font-size: .9375rem; font-weight: 600; color: var(--mx-ink-900); }
.app-body .dm-head-info small { font-size: .75rem; color: var(--mx-ink-500); }
.app-body .dm-head-info small.typing { color: var(--mx-brand-600); }
.app-body .dm-call-btns { margin-inline-start: auto; display: flex; gap: 4px; }
.app-body .dm-call-btn {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--mx-r-sm); background: transparent !important; color: var(--mx-ink-600) !important; box-shadow: none !important; cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .dm-call-btn:hover { background: var(--mx-brand-50) !important; color: var(--mx-brand-800) !important; transform: none; }
.app-body .dm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; background: none; }
.app-body .dm-msg {
  max-width: min(72%, 560px); padding: 9px 14px 7px; border-radius: 18px; border: 0;
  font-size: .9063rem; line-height: 1.5; box-shadow: 0 1px 1px rgba(20, 32, 24, .04);
}
.app-body .dm-msg.theirs { align-self: flex-start; background: var(--mx-surface); color: var(--mx-ink-800); border-end-start-radius: 6px; box-shadow: 0 0 0 1px var(--mx-line); }
.app-body .dm-msg.mine { align-self: flex-end; background: var(--mx-brand-800); color: #f4f8f5; border-end-end-radius: 6px; }
.app-body .dm-msg.mine .dm-meta { color: rgba(244, 248, 245, .7); }
.app-body .dm-meta { font-size: .6875rem; color: var(--mx-ink-500); }
.app-body .chat-daysep span { padding: 3px 10px; border-radius: var(--mx-r-pill); background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-line); font-size: .6875rem; font-weight: 600; color: var(--mx-ink-600); }
.app-body .dm-input { margin: 0 16px 16px; }

/* 10.5 ARKADAŞLAR */
.app-body .fr-addcard {
  display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; margin: 0 0 32px;
}
.app-body .fr-addcard-ic {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--mx-r-md);
  background: var(--mx-brand-50); color: var(--mx-brand-700); box-shadow: none;
}
.app-body .fr-addcard-body strong { font-size: .9375rem; color: var(--mx-ink-900); }
.app-body .fr-addcard-body small { display: block; color: var(--mx-ink-600); font-size: .8125rem; margin: 2px 0 12px; }
.app-body .fr-addform { display: flex; gap: 8px; flex-wrap: wrap; }
.app-body .fr-addform input { flex: 1 1 200px; max-width: 320px; font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.app-body .fr-h { display: flex; align-items: center; gap: 8px; margin: 32px 0 12px; font-size: 1.0625rem; font-weight: 600; color: var(--mx-ink-900); }
.app-body .fr-count { padding: 1px 8px; border-radius: var(--mx-r-pill); background: var(--mx-surface-3); color: var(--mx-ink-600); font-size: .75rem; }
.app-body .fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.app-body .fr-card { padding: 16px; border: 0; border-radius: var(--mx-r-lg); background: var(--mx-surface); box-shadow: var(--mx-e2); transition: box-shadow var(--mx-t2); }
.app-body .fr-card:hover { box-shadow: var(--mx-e3); }
.app-body .fr-uav { width: 44px; height: 44px; }
.app-body .fr-card-info strong { font-size: .9375rem; color: var(--mx-ink-900); }
.app-body .fr-code { font-size: .6875rem; border-radius: 6px; }

/* 10.6 ANI EMANET ET */
.app-body .upload-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.app-body .upload-form { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.app-body .upload-form > label, .app-body .upload-row label, .app-body .visibility-block label { display: flex; flex-direction: column; gap: 6px; }
.app-body .upload-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--mx-r-md); background: var(--mx-surface-3); }
.app-body .mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 10px;
  border: 0; border-radius: var(--mx-r-sm); background: transparent; color: var(--mx-ink-600); cursor: pointer;
  font: 500 .8125rem var(--mx-sans); box-shadow: none;
  transition: background-color var(--mx-t1), color var(--mx-t1), box-shadow var(--mx-t1);
}
.app-body .mode-btn:hover { color: var(--mx-ink-900); }
.app-body .mode-btn.active { background: var(--mx-surface); color: var(--mx-brand-800); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 32, 24, .10), 0 0 0 1px var(--mx-line); }
.app-body .upload-drop { border: 1.5px dashed var(--mx-line-3); border-radius: var(--mx-r-lg); background: var(--mx-surface-2); }
.app-body .upload-drop:hover { border-color: var(--mx-brand-500); background: var(--mx-brand-50); }
.app-body .subjects-label { font-size: .8125rem; font-weight: 500; color: var(--mx-ink-700); }
.app-body .private-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--mx-r-md); background: var(--mx-surface-2); font-size: .8125rem; color: var(--mx-ink-700); }
.app-body .upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-body .btn-seal { width: 100%; }
.app-body .seal-stage {
  position: sticky; top: 24px; min-height: 420px;
  display: grid; place-items: center; padding: 32px;
  border: 0; border-radius: var(--mx-r-xl);
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(196, 154, 69, .20), transparent 70%),
    linear-gradient(180deg, #0c2216, #133a24);
  color: #eef5f0; box-shadow: 0 24px 48px -24px rgba(8, 22, 13, .7);
}
.app-body .seal-idle p, .app-body .seal-step { color: rgba(238, 245, 240, .78); font-size: .875rem; }
.app-body .seal-ring-static { border-color: rgba(229, 207, 151, .45); color: var(--mx-gold-300); }
.app-body .seal-hash { color: var(--mx-gold-300); }

/* 10.7 ZAMAN TÜNELİ */
.app-body .tl-reminders { margin: 0 0 20px; }
.app-body .tl-tools {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 -8px 24px; padding: 8px;
  background: rgba(252, 251, 247, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--mx-r-lg);
}
.app-body .tl-search, .app-body .vt-search { position: relative; flex: 1 1 280px; display: flex; align-items: center; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.app-body .tl-search svg, .app-body .vt-search svg { position: absolute; inset-inline-start: 12px; color: var(--mx-ink-500); pointer-events: none; z-index: 1; }
.app-body .tl-search input, .app-body .vt-search input { width: 100%; padding-inline-start: 38px !important; }
.app-body .tl-tools select, .app-body .vault-tools select { flex: 0 1 200px; }
.app-body .tl-cine-btn, .app-body .tl-book-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: var(--mx-r-sm); cursor: pointer;
  font: 600 .8125rem var(--mx-sans); white-space: nowrap;
  transition: background-color var(--mx-t1), box-shadow var(--mx-t1);
}
.app-body .tl-cine-btn { background: var(--mx-surface); color: var(--mx-ink-800); box-shadow: 0 1px 2px rgba(20, 32, 24, .05), inset 0 0 0 1px var(--mx-line-2); }
.app-body .tl-cine-btn:hover { background: var(--mx-surface-2); }
.app-body .tl-book-btn { background: var(--mx-brand-800); color: #fff; box-shadow: 0 1px 2px rgba(10, 38, 21, .25); }
.app-body .tl-book-btn:hover { background: var(--mx-brand-700); }

.app-body .tl-list { position: relative; padding: 0; padding-inline-start: 120px; margin: 0; }
.app-body .tl-list::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 99px; width: 1.5px;
  background: linear-gradient(180deg, var(--mx-gold-300), var(--mx-line-2) 80%, transparent);
}
.app-body .tl-year {
  position: sticky; top: 64px; z-index: 2;
  float: inline-start; clear: both;
  width: 84px; margin: 0; margin-inline-start: -120px; padding: 6px 0;
  font-family: var(--mx-serif); font-size: 1.75rem; font-weight: 600; line-height: 1;
  color: var(--mx-gold-700); text-align: end; font-variant-numeric: lining-nums tabular-nums;
  background: none; border: 0;
  animation: mxRise var(--mx-t3) var(--mx-ease-out) both;
}
.app-body .tl-item { position: relative; margin: 0 0 12px; padding: 0; animation: mxRise var(--mx-t3) var(--mx-ease-out) both; cursor: pointer; }
.app-body .tl-dot {
  position: absolute; top: 22px; inset-inline-start: -26px; width: 11px; height: 11px; box-sizing: border-box;
  border-radius: 50%; background: var(--mx-surface); border: 2px solid var(--mx-gold-500);
  box-shadow: 0 0 0 4px var(--mx-panel);
}
.app-body .tl-card {
  padding: 16px 20px; border: 0; border-radius: var(--mx-r-lg);
  background: var(--mx-surface); box-shadow: var(--mx-e1);
  transition: box-shadow var(--mx-t2) var(--mx-ease), transform var(--mx-t2) var(--mx-ease);
}
.app-body .tl-item:hover .tl-card { box-shadow: var(--mx-e3); transform: translateY(-1px); }
.app-body .tl-card-head { display: flex; align-items: center; gap: 12px; margin: 0; }
.app-body .tl-av { width: 36px; height: 36px; font-size: .75rem; flex: 0 0 auto; }
.app-body .tl-card-head strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--mx-ink-900); line-height: 1.35; }
.app-body .tl-card-head small { display: block; font-size: .75rem; color: var(--mx-ink-500); margin-top: 1px; }
.app-body .tl-card p {
  margin: 10px 0 0; font-size: .875rem; line-height: 1.6; color: var(--mx-ink-700);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.app-body .tl-by { display: inline-block; margin-top: 8px; font-size: .75rem; font-style: italic; color: var(--mx-gold-700); }
/* Sinema modu: daha sinematik çerçeve */
.app-body .cine { border-radius: var(--mx-r-xl); overflow: hidden; margin: 0 0 24px; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .6); }
.app-body .cine-ctrl button { border-radius: var(--mx-r-pill); }

/* 10.8 EMANET KASASI */
.app-body .capsules-box {
  margin: 0 0 32px; padding: 24px; border: 0; border-radius: var(--mx-r-xl);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(196, 154, 69, .16), transparent 60%),
    var(--mx-gold-50);
  box-shadow: inset 0 0 0 1px rgba(196, 154, 69, .22);
}
.app-body .cap-head .sec-subtitle { margin: 0; font-family: var(--mx-serif); font-size: 1.5rem; }
.app-body .cap-sub { color: var(--mx-ink-600); font-size: .875rem; margin: 6px 0 18px; }
.app-body .cap-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.app-body .cap-card { padding: 16px; border: 0; border-radius: var(--mx-r-lg); background: var(--mx-surface); box-shadow: var(--mx-e1); }
.app-body .cap-card.sealed { background: var(--mx-surface); }
.app-body .cap-card.ready { box-shadow: 0 0 0 1.5px var(--mx-gold-500), 0 10px 28px -10px rgba(196, 154, 69, .5); }
.app-body .cap-gift { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--mx-r-md); background: var(--mx-gold-100); font-size: 1.5rem; }
.app-body .cap-badge.sealed { background: var(--mx-surface-3); color: var(--mx-ink-600); }
.app-body .cap-badge.ready { background: var(--mx-gold-500); color: #2a1f08; }
.app-body .cap-badge.opened { background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .cap-open-btn { border-radius: var(--mx-r-sm); background: var(--mx-gold-500); color: #2a1f08; font-weight: 700; animation: none; box-shadow: 0 4px 14px -4px rgba(196, 154, 69, .7); }
.app-body .cap-replay-btn { border-radius: var(--mx-r-sm); border: 0; box-shadow: inset 0 0 0 1px var(--mx-gold-300); color: var(--mx-gold-800); }
.app-body .cap-empty { padding: 0; }
.app-body .cap-empty .mx-empty { padding: 20px 12px 8px; }
.app-body .cap-empty .mx-empty-ic { width: 52px; height: 52px; margin-bottom: 10px; }
.app-body .cap-empty .mx-empty-t { font-size: 1.25rem; }
.app-body .cap-empty .mx-empty-acts { display: none; }
.app-body .vault-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.app-body .vt-count { margin-inline-start: auto; font-size: .75rem; font-weight: 600; color: var(--mx-ink-500); font-variant-numeric: tabular-nums; }
.app-body .vault-list { display: flex; flex-direction: column; gap: 0; background: var(--mx-surface); border-radius: var(--mx-r-lg); box-shadow: var(--mx-e2); overflow: hidden; }
.app-body .vault-list:has(> .mx-empty) { background: none; box-shadow: none; }
.app-body .vault-item.row {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 18px;
  border: 0; border-bottom: 1px solid var(--mx-line); border-radius: 0; background: transparent; box-shadow: none;
  transition: background-color var(--mx-t1);
}
.app-body .vault-item.row:last-child { border-bottom: 0; }
.app-body .vault-item.row:hover { background: var(--mx-surface-2); transform: none; box-shadow: none; }
.app-body .vault-item.row .v-ic { width: 36px; height: 36px; border: 0; border-radius: var(--mx-r-sm); background: var(--mx-surface-2); font-size: 1rem; }
.app-body .vault-item.row .vault-badge { margin-inline-start: auto; margin-left: 0; }
[dir="ltr"] .app-body .vault-item.row .vault-badge { margin-left: auto; }
.app-body .v-ic { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--mx-r-sm); background: var(--mx-surface-2); font-size: 1rem; }
.app-body .v-title { font-size: .9063rem; font-weight: 600; color: var(--mx-ink-900); }
.app-body .vault-code { font-size: .6875rem; padding: 1px 6px; border-radius: 6px; background: var(--mx-surface-3); color: var(--mx-ink-600); }
.app-body .vault-badge.sealed { background: var(--mx-gold-100); color: var(--mx-gold-800); }
.app-body .vault-badge.open { background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .vault-badge.locked { background: #f3e9e8; color: #8a2f28; }
.app-body .v-meta { font-size: .75rem; color: var(--mx-ink-500); margin: 4px 0 0; }
.app-body .v-hash { font-family: ui-monospace, Menlo, monospace; font-size: .6875rem; color: var(--mx-ink-400); margin: 4px 0 0; overflow-wrap: anywhere; }

/* 10.9 GÜVENLİK */
.app-body .sec-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.app-body .sec-card { padding: 20px; border: 0 !important; position: relative; }
.app-body .sec-card .sec-check {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: var(--mx-r-sm);
  background: var(--mx-brand-50); color: var(--mx-brand-700); font-weight: 700; box-shadow: none;
}
.app-body .sec-card h3 { font-size: .9375rem; font-weight: 600; color: var(--mx-ink-900); margin: 0 0 4px; }
.app-body .sec-card p { font-size: .8125rem; color: var(--mx-ink-600); margin: 0; }
.app-body .genesis-chain { border-radius: var(--mx-r-lg); }

/* 10.10 AİLE YÖNETİMİ */
.app-body .fam-hub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 32px; align-items: stretch; }
.app-body .fam-invite-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; margin: 0; padding: 28px; border: 0; border-radius: var(--mx-r-xl);
  color: #eef5f0;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(196, 154, 69, .32), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(43, 125, 80, .45), transparent 65%),
    linear-gradient(150deg, var(--mx-brand-800), var(--mx-brand-950));
  box-shadow: 0 28px 56px -28px rgba(8, 22, 13, .75), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.app-body .fic-tree { position: absolute; z-index: -1; inset-inline-end: -18px; bottom: -22px; width: 230px; height: 230px; color: rgba(229, 207, 151, .13); }
.app-body .fic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-body .fic-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mx-gold-300); }
.app-body .fic-rename {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--mx-r-pill); cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #f1f6f2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 600 .75rem var(--mx-sans); transition: background-color var(--mx-t1);
}
.app-body .fic-rename:hover { background: rgba(255, 255, 255, .18); }
.app-body .fic-name { margin: 18px 0 4px; font-family: var(--mx-serif); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 600; line-height: 1.05; color: #f6efd9; letter-spacing: -.01em; }
.app-body .fic-name small, .app-body #familyNameLabel { display: none; }
.app-body .fic-meta { margin: 0 0 22px; font-size: .8125rem; color: rgba(236, 244, 238, .7); min-height: 1.2em; }
.app-body .fic-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.app-body .fam-invite-card #familyCodeEl {
  padding: 10px 16px; border-radius: 12px; background: rgba(0, 0, 0, .2); color: var(--mx-gold-300);
  box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .32);
  font: 700 1.1875rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em;
}
.app-body .fam-invite-card .fic-btn { background: rgba(255, 255, 255, .1); color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.app-body .fic-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.app-body .fam-invite-card .fic-btn-primary { background: var(--mx-gold-300); color: var(--mx-brand-950) !important; border: 0 !important; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.app-body .fam-invite-card .fic-btn-primary:hover { background: #efdcaa; color: var(--mx-brand-950) !important; }
.app-body .fic-hint { display: block; margin-top: 16px; font-size: .75rem; line-height: 1.55; color: rgba(236, 244, 238, .62); max-width: 52ch; }
.app-body .fic-hint b { color: #fff; font-weight: 600; }
.app-body .fam-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.app-body .fam-card { margin: 0; padding: 20px; border: 0; border-radius: var(--mx-r-lg); background: var(--mx-surface); box-shadow: var(--mx-e2); }
.app-body .fam-card-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.app-body .fam-card-ic { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .invite-by-code .fam-card-ic { background: rgba(165, 80, 111, .12); color: #a5506f; }
.app-body .fam-card-h label, .app-body .fam-card .fam-card-h label {
  display: block; margin: 0; font: 600 .9375rem/1.3 var(--mx-sans); letter-spacing: -.005em; text-transform: none; color: var(--mx-ink-900);
}
.app-body .fam-card .code-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.app-body .fam-card .code-row input { flex: 1 1 140px; min-width: 0; font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.app-body .fam-card small { display: block; margin-top: 10px; font-size: .75rem; line-height: 1.5; color: var(--mx-ink-500); }
.app-body .join-rel { margin-top: 12px; padding: 12px; border-radius: var(--mx-r-md); background: var(--mx-surface-2); }
.app-body .join-rel-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.app-body .join-rel-row select { flex: 1 1 140px; }
.app-body .request-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 16px 18px;
  border: 0; border-radius: var(--mx-r-lg); background: var(--mx-gold-50); box-shadow: inset 0 0 0 1px var(--mx-gold-300);
}
.app-body .request-card p { flex: 1 1 100%; margin: 0; font-size: .875rem; color: var(--mx-ink-800); }
.app-body .request-pending { font-size: .8125rem; color: var(--mx-ink-600); padding: 10px 14px; border-radius: var(--mx-r-md); background: var(--mx-surface-2); }

/* Kuşak başlıkları + üye kartları */
.app-body .family-group-title {
  display: flex; align-items: center; gap: 10px; margin: 36px 0 14px; padding: 0; text-align: start;
  font-size: inherit; color: var(--mx-ink-900); background: none; border: 0;
}
.app-body .family-group-title:first-child { margin-top: 8px; }
.app-body .family-group-title::before { content: none !important; display: none !important; }
.app-body .family-group-title::after { content: "" !important; display: block !important; flex: 1 1 auto; height: 1px; background: var(--mx-line); transform: none !important; width: auto !important; position: static !important; }
.app-body .family-group-title .fg-pill {
  padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important;
  font: 600 1.375rem/1.1 var(--mx-serif); letter-spacing: -.005em; color: var(--mx-ink-900);
}
.app-body .fg-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: var(--mx-r-pill); background: var(--mx-surface-3); color: var(--mx-ink-600); font: 600 .6875rem var(--mx-sans); }
.app-body .family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.app-body .member-tile {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "ph name st" "ph role role" "ph years code";
  align-items: center; column-gap: 14px; row-gap: 2px;
  margin: 0; padding: 14px 16px; text-align: start; cursor: pointer;
  border: 0; border-radius: var(--mx-r-lg); background: var(--mx-surface);
  box-shadow: var(--mx-e1);
  transition: box-shadow var(--mx-t2) var(--mx-ease), transform var(--mx-t2) var(--mx-ease);
}
.app-body .member-tile:hover { box-shadow: var(--mx-e3); transform: translateY(-2px); border: 0; }
.app-body .member-tile.live, .app-body .member-tile.live:hover { border: 0; }
.app-body .member-tile .tile-photo {
  grid-area: ph; width: 52px; height: 52px; margin: 0; border: 0; border-radius: 50%; overflow: hidden; font-size: 1.1rem;
  box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-gold-500);
}
.app-body .member-tile.live .tile-photo { box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-brand-500); }
.app-body .member-tile .tile-photo svg, .app-body .member-tile .tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-body .member-tile h3 { grid-area: name; margin: 0; font: 600 .9375rem/1.3 var(--mx-sans); color: var(--mx-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body .member-tile .tile-role { grid-area: role; justify-self: start; margin: 0; padding: 0; background: none !important; color: var(--mx-ink-600) !important; font-size: .75rem; border-radius: 0; }
.app-body .member-tile .tile-years { grid-area: years; margin: 0; font-size: .75rem; color: var(--mx-ink-500); font-variant-numeric: tabular-nums; }
.app-body .member-tile .tile-status {
  grid-area: st; justify-self: end; display: inline-flex; align-items: center; gap: 5px; margin: 0;
  padding: 2px 8px; border-radius: var(--mx-r-pill); font-size: .625rem; font-weight: 600; letter-spacing: .02em;
  background: var(--mx-gold-100); color: var(--mx-gold-800);
}
.app-body .member-tile .tile-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.app-body .member-tile .tile-status.live { background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .member-tile .tile-code { grid-area: code; justify-self: end; margin: 0; padding: 2px 6px; border-radius: 6px; background: var(--mx-surface-2); color: var(--mx-ink-500); font-size: .625rem; letter-spacing: .03em; }
.app-body .member-tile .tile-code.muted { opacity: .75; }
.app-body .family-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.app-body .fg-pill { border-radius: var(--mx-r-pill); }

/* Emoji yerine gelen SVG ikonlar (app-shell.js dekoratörü) */
.app-body .mx-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.app-body :is(.sec-subtitle, .fr-h, .cap-head h2, .ac-card > h3, .staff-card > h3) > .mx-ic,
.app-body .pf-section-h .fg-pill > .mx-ic, .app-body .gd-section-h .fg-pill > .mx-ic {
  width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 9px;
  background: var(--mx-gold-100); color: var(--mx-gold-700); vertical-align: middle; margin-inline-end: 4px;
}
.app-body .pf-section-h .fg-pill, .app-body .gd-section-h .fg-pill { display: inline-flex; align-items: center; gap: 8px; }
.app-body :is(.bill-sec > h2, .bill-card > h2) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-body :is(.bill-sec > h2, .bill-card > h2) > .mx-ic { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 9px; background: var(--mx-gold-100); color: var(--mx-gold-700); }
.app-body .pf-av-edit .mx-ic { width: 14px; height: 14px; color: var(--mx-ink-700); }
.app-body .fr-h { display: flex; align-items: center; gap: 8px; }

/* 10.11 PROFİL */
.app-body .pf-card {
  position: relative; overflow: hidden; margin: 0 0 32px; padding: 0;
  border: 0; border-radius: var(--mx-r-xl);
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(196, 154, 69, .30), transparent 60%),
    linear-gradient(135deg, var(--mx-brand-900), var(--mx-brand-800));
  box-shadow: 0 24px 48px -24px rgba(8, 22, 13, .6);
}
.app-body .pf-card::after { content: none; }
.app-body .pf-hero { display: flex; align-items: center; gap: 24px; padding: 32px; background: none; }
.app-body .pf-hero::before, .app-body .pf-hero::after { content: none; }
.app-body .pf-av-btn { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.app-body .pf-av { width: 96px !important; height: 96px !important; font-size: 1.75rem !important; box-shadow: 0 0 0 3px var(--mx-brand-900), 0 0 0 5px var(--mx-gold-500); }
.app-body .pf-av-edit { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mx-surface); box-shadow: var(--mx-e2); font-size: .8rem; }
.app-body .pf-hero-info h2 { font-family: var(--mx-serif); font-size: 2.25rem; font-weight: 600; color: #f6efd9; background: none; -webkit-text-fill-color: #f6efd9; margin: 0 0 2px; line-height: 1.1; }
.app-body .pf-hero-info p { color: rgba(236, 244, 238, .72); font-size: .875rem; margin: 0 0 14px; }
.app-body .pf-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.app-body .pf-badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--mx-r-pill);
  background: rgba(255, 255, 255, .10); color: #f1f6f2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: .75rem; font-weight: 600; border: 0;
}
.app-body .pf-badge.code { background: rgba(229, 207, 151, .14); color: var(--mx-gold-300); box-shadow: inset 0 0 0 1px rgba(229, 207, 151, .32); font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.app-body .pf-section-h { margin: 32px 0 12px; }
.app-body .pf-section-h .fg-pill { padding: 0; background: none; border: 0; box-shadow: none; color: var(--mx-ink-900); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.app-body .pf-settings { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.app-body .pf-settings > label { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--mx-ink-700); }
.app-body .pf-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.app-body .pf-set-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--mx-ink-700); }
.app-body .pf-set-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app-body .pf-set-actions .btn { flex: 0 0 auto; }
.app-body .pf-set-actions .btn-danger { margin-inline-start: auto; background: var(--mx-surface); color: var(--mx-danger); box-shadow: inset 0 0 0 1px rgba(180, 50, 43, .3); }
.app-body .pf-set-actions .btn-danger:hover { background: var(--mx-danger-50); }
.app-body .pf-privacy-grid { gap: 12px; }
.app-body .pf-toggle { padding: 14px 16px; border: 0; border-radius: var(--mx-r-md); background: var(--mx-surface-2); box-shadow: none; }
.app-body .pf-toggle-txt strong { font-size: .8125rem; color: var(--mx-ink-900); }
.app-body .pf-toggle-txt small { font-size: .75rem; color: var(--mx-ink-600); }

/* 10.12 ABONELİK */
.app-body .bill-sec { margin: 0 0 32px; }
.app-body .bill-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.app-body .bill-sec-head h2, .app-body .bill-sec > h2, .app-body .bill-card > h2 { font-family: var(--mx-sans); font-size: 1.0625rem; font-weight: 600; color: var(--mx-ink-900); margin: 0; }
.app-body .bill-card > h2 small { font-weight: 400; color: var(--mx-ink-500); font-size: .8125rem; }
.app-body .bill-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.app-body .bill-plan {
  position: relative; display: flex; flex-direction: column; gap: 0;
  padding: 28px 24px 24px; border: 0; border-radius: var(--mx-r-xl);
  background: var(--mx-surface); box-shadow: var(--mx-e2);
  transition: box-shadow var(--mx-t2), transform var(--mx-t2);
}
.app-body .bill-plan:hover { box-shadow: var(--mx-e3); transform: translateY(-2px); }
.app-body .bill-plan.family {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(196, 154, 69, .28), transparent 60%),
    linear-gradient(160deg, var(--mx-brand-900), var(--mx-brand-800));
  color: #eef5f0; box-shadow: 0 24px 48px -20px rgba(8, 22, 13, .55);
}
.app-body .bill-plan.current { box-shadow: 0 0 0 2px var(--mx-brand-600), var(--mx-e2); }
.app-body .bill-plan.family.current { box-shadow: 0 0 0 2px var(--mx-gold-500), 0 24px 48px -20px rgba(8, 22, 13, .55); }
.app-body .bill-plan h3 { font-family: var(--mx-serif); font-size: 1.75rem; font-weight: 600; margin: 0 0 4px; color: var(--mx-ink-900); }
.app-body .bill-plan.family h3 { color: #f6efd9; }
.app-body .bill-desc { font-size: .8125rem; color: var(--mx-ink-600); margin: 0 0 20px; min-height: 2.6em; }
.app-body .bill-plan.family .bill-desc { color: rgba(236, 244, 238, .72); }
.app-body .bill-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--mx-line); }
.app-body .bill-plan.family .bill-price { border-color: rgba(255, 255, 255, .12); }
.app-body .bill-price b { font-family: var(--mx-sans); font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; color: var(--mx-ink-900); }
.app-body .bill-plan.family .bill-price b { color: #fff; }
.app-body .bill-price small { font-size: .8125rem; color: var(--mx-ink-500); }
.app-body .bill-plan.family .bill-price small { color: rgba(236, 244, 238, .65); }
.app-body .bill-feats { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.app-body .bill-feats li { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--mx-ink-700); border: 0; padding: 0; }
.app-body .bill-feats li span { display: inline-flex; align-items: center; gap: 8px; }
.app-body .bill-feats li span::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  background: var(--mx-brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231c6a3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.app-body .bill-plan.family .bill-feats li, .app-body .bill-plan.family .bill-feats li span { color: rgba(236, 244, 238, .85); }
.app-body .bill-plan.family .bill-feats li span::before { background-color: rgba(229, 207, 151, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23e5cf97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.app-body .bill-feats li b { font-weight: 600; color: var(--mx-ink-900); }
.app-body .bill-plan.family .bill-feats li b { color: #fff; }
.app-body .bill-actions { display: flex; flex-direction: column; gap: 8px; }
.app-body .bill-actions .btn { width: 100%; }
.app-body .bill-plan.family .bill-actions .btn-gold { background: var(--mx-gold-300); color: var(--mx-brand-950); }
.app-body .bill-plan.family .bill-actions .btn-gold:hover { background: #efdcaa; }
.app-body .bill-plan.family .bill-actions .btn-ghost { background: rgba(255, 255, 255, .08); color: #eef5f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.app-body .bill-badge { position: static; align-self: flex-start; margin: 0 0 14px; box-shadow: none; text-transform: uppercase; letter-spacing: .06em; }
.app-body .bill-plan:not(:has(> .bill-badge)) > h3 { margin-top: 37px; }
.app-body .bill-badge.pop { background: var(--mx-gold-300); color: var(--mx-brand-950); }
.app-body .bill-badge.cur { background: var(--mx-brand-50); color: var(--mx-brand-700); }
.app-body .bill-plan.family .bill-badge.cur { background: rgba(255, 255, 255, .14); color: #fff; }
.app-body .bill-card { padding: 24px; }
.app-body .bill-usage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; margin-top: 16px; }
.app-body .bill-use-top { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--mx-ink-600); margin-bottom: 8px; }
.app-body .bill-use-top b { color: var(--mx-ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-body .bill-bar { height: 6px; border-radius: var(--mx-r-pill); background: var(--mx-surface-3); overflow: hidden; }
.app-body .bill-bar span { display: block; height: 100%; border-radius: inherit; background: var(--mx-brand-600); }
.app-body .bill-bar span.warn { background: var(--mx-warn); }
.app-body .bill-bar span.unl { background: linear-gradient(90deg, var(--mx-brand-500), var(--mx-gold-500)); }
.app-body .bill-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0 0 32px; }
.app-body .bill-grid2 > * { margin: 0; min-width: 0; }
.app-body .bill-grid2 form { min-width: 0; }
.app-body .bill-grid2 .code-row { flex-wrap: wrap; }
.app-body .bill-grid2 .code-row input { min-width: 0; flex: 1 1 160px; }
.app-body .bill-muted { color: var(--mx-ink-500); }
.app-body .bill-pending { padding: 12px 16px; border-radius: var(--mx-r-md); background: var(--mx-gold-50); color: var(--mx-gold-800); box-shadow: inset 0 0 0 1px var(--mx-gold-300); font-size: .8125rem; }

/* 10.13 YÖNETİM */
.app-body .admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 24px; }
.app-body .admin-stat {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 18px; min-height: 0; border: 0; border-radius: var(--mx-r-lg);
  background: var(--mx-surface) !important; color: var(--mx-ink-900);
  box-shadow: var(--mx-e2); text-align: start;
  animation: mxRise var(--mx-t3) var(--mx-ease-out) both;
  transition: box-shadow var(--mx-t2), transform var(--mx-t2);
}
.app-body .admin-stat:hover { transform: translateY(-2px); box-shadow: var(--mx-e3); }
.app-body .admin-stat::after, .app-body .admin-stat::before { display: none !important; }
.app-body .admin-stat .as-ic {
  flex: 0 0 auto; width: 44px; height: 44px; margin: 0; display: grid; place-items: center;
  border-radius: var(--mx-r-md); background: var(--mx-brand-700);
}
.app-body .admin-stat .as-ic svg { width: 22px; height: 22px; filter: none; }
.app-body .admin-stat.c-cyan .as-ic { background: #2f7f8f; }
.app-body .admin-stat.c-violet .as-ic { background: #6a5a9e; }
.app-body .admin-stat.c-green .as-ic { background: var(--mx-brand-700); }
.app-body .admin-stat.c-amber .as-ic { background: var(--mx-gold-600); }
.app-body .admin-stat.c-pink .as-ic { background: #a5506f; }
.app-body .admin-stat.c-blue .as-ic { background: #3d679e; }
.app-body .admin-stat.c-orange .as-ic { background: #b36a2c; }
.app-body .admin-stat.c-red .as-ic { background: #a63c36; }
.app-body .admin-stat.c-teal .as-ic { background: #2b7d6f; }
.app-body .as-frame { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
.app-body .as-frame b, .app-body .admin-stat b { font-family: var(--mx-sans); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--mx-ink-900) !important; line-height: 1; font-variant-numeric: tabular-nums; }
.app-body .as-frame span, .app-body .admin-stat span:not(.as-ic) { font-size: .75rem; font-weight: 500; color: var(--mx-ink-600) !important; }
.app-body .admin-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 0 0 8px; }
.app-body .ac-card { padding: 24px; }
.app-body .ac-card h3 { font-size: .9375rem; font-weight: 600; color: var(--mx-ink-900); margin: 0 0 20px; }
.app-body .ac-bar { border-radius: 8px; background: var(--mx-surface-2); }
.app-body .ac-bar span { border-radius: 8px; background: linear-gradient(180deg, var(--mx-brand-500), var(--mx-brand-800)) !important; }
.app-body .ac-bar-col b { font-size: .8125rem; color: var(--mx-ink-900); }
.app-body .ac-bar-col small { font-size: .6875rem; color: var(--mx-ink-500); }
.app-body .ac-legend li { font-size: .8125rem; color: var(--mx-ink-700); }
.app-body .digest-test-box { padding: 20px 24px; margin-top: 32px; }
.app-body .digest-test-box .sec-subtitle { margin-top: 0; }
.app-body .staff-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.app-body .staff-card { padding: 24px; }
.app-body .staff-card h3 { font-size: 1rem; font-weight: 600; color: var(--mx-ink-900); }

/* 10.14 RÖPORTAJ + KILAVUZ */
.app-body .iv-setup-card { padding: 24px; }
.app-body .iv-setup-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.app-body .iv-field { display: flex; flex-direction: column; gap: 6px; }
.app-body .iv-stage { border-radius: var(--mx-r-xl); overflow: hidden; background: var(--mx-surface); box-shadow: var(--mx-e2); }
.app-body #guidePage { max-width: 820px; font-size: .9375rem; line-height: 1.7; color: var(--mx-ink-700); }
.app-body #guidePage h2, .app-body #guidePage h3 { color: var(--mx-ink-900); }

/* 10.15 ÜYE DETAYI */
.app-body .member-page-head {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 8px 12px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 0; border-radius: var(--mx-r-lg); box-shadow: var(--mx-e2);
}
.app-body .member-page-head::before { content: none; }
.app-body .member-page-head .back-link { margin: 0; background: var(--mx-surface-2); box-shadow: none; color: var(--mx-ink-700); font-weight: 500; border: 0; }
.app-body .member-page-head .back-link:hover { background: var(--mx-surface-3); transform: none; }
.app-body .member-page-head .mp-title { font-family: var(--mx-sans); font-size: .9375rem; font-weight: 600; color: var(--mx-ink-900); background: none; -webkit-text-fill-color: var(--mx-ink-900); }
.app-body #view-member #memberModalBody { border: 0; border-radius: var(--mx-r-xl); box-shadow: var(--mx-e2); }
.app-body .profile-hero {
  padding: 48px 32px 32px; border: 0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(196, 154, 69, .16), transparent 70%),
    linear-gradient(180deg, var(--mx-gold-50), var(--mx-surface));
}
.app-body .profile-hero::before { content: none; }
.app-body .profile-hero::after { height: 1px; background: var(--mx-line); }
.app-body .profile-hero .detail-photo { border: 0; box-shadow: 0 0 0 4px var(--mx-surface), 0 0 0 6px var(--mx-gold-500), 0 18px 40px -16px rgba(20, 32, 24, .45); }
.app-body .profile-hero h3 { font-weight: 600; font-size: 2.5rem; color: var(--mx-ink-900); }
.app-body .detail-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.app-body .detail-chips .chip { background: var(--mx-surface) !important; color: var(--mx-ink-700) !important; box-shadow: 0 0 0 1px var(--mx-line-2); border: 0; }
.app-body .detail-chips .chip.c-legacy { background: var(--mx-gold-100) !important; color: var(--mx-gold-800) !important; box-shadow: none; }
.app-body .detail-chips .chip.c-live { background: var(--mx-brand-50) !important; color: var(--mx-brand-700) !important; box-shadow: none; }
.app-body #view-member .profile-actions.top { padding: 16px 20px; border-bottom: 1px solid var(--mx-line); }
.app-body .profile-actions-inner { gap: 8px; }
.app-body .pa-btn {
  flex: 0 1 auto; min-width: 0; min-height: 40px; padding: 0 14px 0 8px; gap: 8px;
  border: 0; border-radius: var(--mx-r-sm);
  background: var(--mx-surface) !important; color: var(--mx-ink-800);
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), inset 0 0 0 1px var(--mx-line-2);
  font: 600 .8125rem var(--mx-sans);
  transition: background-color var(--mx-t1), box-shadow var(--mx-t1);
}
.app-body .pa-btn::after { content: none; }
.app-body .pa-btn .pa-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--mx-surface-2); color: var(--mx-ink-700); box-shadow: none; }
.app-body .pa-btn:hover { background: var(--mx-surface-2) !important; transform: none; box-shadow: 0 1px 2px rgba(20, 32, 24, .05), inset 0 0 0 1px var(--mx-line-3); filter: none; }
.app-body .pa-btn.chat { order: -1; flex: 1 1 100%; justify-content: center; min-height: 48px; background: var(--mx-brand-800) !important; color: #fff; box-shadow: 0 6px 18px -8px rgba(10, 38, 21, .6); font-size: .875rem; }
.app-body .pa-btn.chat .pa-ic { background: rgba(255, 255, 255, .14); color: #fff; }
.app-body .pa-btn.chat:hover { background: var(--mx-brand-700) !important; }
.app-body .pa-btn.danger { margin-inline-start: auto; color: var(--mx-danger); box-shadow: inset 0 0 0 1px rgba(180, 50, 43, .3); }
.app-body .pa-btn.danger .pa-ic { background: var(--mx-danger-50); color: var(--mx-danger); }
.app-body .pa-btn.danger:hover { background: var(--mx-danger-50) !important; }

/* ---------- 11. MODALLAR · TOAST · KOMUT PALETİ ---------- */
.app-body .modal-backdrop {
  background: rgba(14, 22, 17, .44);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  animation: mxFade var(--mx-t2) var(--mx-ease);
}
.app-body .modal {
  border: 0; border-radius: var(--mx-r-xl); background: var(--mx-surface);
  box-shadow: var(--mx-e4);
  animation: mxModalIn var(--mx-t3) var(--mx-ease-out);
}
@keyframes mxModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.app-body .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--mx-line); }
.app-body .modal-head h2 { font-family: var(--mx-serif); font-weight: 600; font-size: 1.625rem; color: var(--mx-ink-900); margin: 0; }
.app-body .modal-close {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--mx-r-sm); background: var(--mx-surface-2); color: var(--mx-ink-600); cursor: pointer;
  transition: background-color var(--mx-t1), color var(--mx-t1);
}
.app-body .modal-close:hover { background: var(--mx-surface-3); color: var(--mx-ink-900); transform: none; }
.app-body .modal-body { padding: 24px; }

/* Giriş penceresi */
.app-body #loginModal {
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(196, 154, 69, .25), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(43, 125, 80, .30), transparent 60%),
    rgba(10, 24, 15, .78);
}
.app-body .login-modal { border-radius: var(--mx-r-2xl); }
#loginModal .modal-body { padding: 32px; }
#loginModal h2 { font-family: var(--mx-serif); font-weight: 600; color: var(--mx-ink-900); }
#loginModal .auth-forgot { color: var(--mx-gold-700); }

.app-body .toast {
  border: 0 !important; border-radius: var(--mx-r-md) !important;
  background: var(--mx-ink-900) !important; color: #f4f6f4 !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45) !important;
  font: 500 .8125rem var(--mx-sans) !important;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--tab-h)) !important;
}
.app-body .chat-fab {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--tab-h));
  right: max(24px, env(safe-area-inset-right, 0px));
  width: 52px; height: 52px; border: 0;
  background: var(--mx-brand-800); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(10, 38, 21, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform var(--mx-t2), background-color var(--mx-t2);
}
.app-body .chat-fab:hover { background: var(--mx-brand-700); transform: translateY(-2px); }
[dir="rtl"] .app-body .chat-fab { right: auto; left: max(24px, env(safe-area-inset-left, 0px)); }
.app-body .chat-fab svg { width: 22px; height: 22px; }
.app-body .cw-panel { border: 0; border-radius: var(--mx-r-xl); box-shadow: var(--mx-e4); overflow: hidden; }

/* Bildirim izni şeridi (JS satır içi stilini zarifleştir) */
#pushBanner {
  background: var(--mx-ink-900) !important; border-radius: var(--mx-r-lg) !important;
  padding: 8px 8px 8px 16px !important; gap: 12px !important;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--tab-h)) !important;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .5) !important;
  font: 500 .8125rem/1.4 var(--mx-sans) !important; color: #eef2ee !important;
  animation: mxRise var(--mx-t3) var(--mx-ease-out);
}
#pushBanner #pushBannerOk { background: var(--mx-gold-300) !important; color: var(--mx-brand-950) !important; border-radius: var(--mx-r-sm) !important; min-height: 34px; padding: 0 14px !important; }
#pushBanner #pushBannerClose { width: 34px; height: 34px; border-radius: var(--mx-r-sm) !important; color: rgba(255, 255, 255, .7) !important; }
#pushBanner #pushBannerClose:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }

/* Komut paleti */
.mx-cmd { position: fixed; inset: 0; z-index: 2600; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.mx-cmd-scrim { position: absolute; inset: 0; background: rgba(14, 22, 17, .40); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: mxFade var(--mx-t2) var(--mx-ease); }
.mx-cmd-box {
  position: relative; width: min(640px, 100%); max-height: min(560px, 76vh);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--mx-r-xl); background: var(--mx-surface); box-shadow: var(--mx-e4);
  animation: mxModalIn var(--mx-t2) var(--mx-ease-out);
  font-family: var(--mx-sans);
}
.mx-cmd-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--mx-line); color: var(--mx-ink-500); }
.mx-cmd-q { flex: 1 1 auto; min-width: 0; height: 56px; border: 0; outline: none; background: transparent; font: 400 1rem var(--mx-sans); color: var(--mx-ink-900); }
.mx-cmd-q::placeholder { color: var(--mx-ink-400); }
.mx-cmd-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.mx-cmd-group { padding: 10px 10px 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-ink-500); }
.mx-cmd-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 10px;
  border: 0; border-radius: var(--mx-r-sm); background: transparent; cursor: pointer; text-align: start;
  font: 500 .875rem var(--mx-sans); color: var(--mx-ink-800);
}
.mx-cmd-item.on { background: var(--mx-brand-50); color: var(--mx-brand-900); }
.mx-cmd-ic {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--mx-r-sm); background: var(--mx-surface-2); color: var(--mx-ink-600);
  font-size: .6875rem; font-weight: 700;
}
.mx-cmd-ic svg { width: 17px; height: 17px; }
.mx-cmd-ic img { width: 100%; height: 100%; object-fit: cover; }
.mx-cmd-item.on .mx-cmd-ic { background: var(--mx-surface); color: var(--mx-brand-700); }
.mx-cmd-tx { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-cmd-item small { flex: 0 0 auto; font-size: .75rem; color: var(--mx-ink-500); font-weight: 400; }
.mx-cmd-none { padding: 32px; text-align: center; color: var(--mx-ink-500); font-size: .875rem; }
.mx-cmd-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--mx-line); background: var(--mx-surface-2); font-size: .6875rem; color: var(--mx-ink-500); }
.mx-cmd-foot em { font-style: normal; }
.mx-cmd kbd { display: inline-flex; padding: 1px 5px; border-radius: 5px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line-2); font: 600 .6875rem var(--mx-sans); color: var(--mx-ink-600); margin-inline-end: 2px; }

/* ---------- 12. BOŞ DURUM & İSKELET ---------- */
.mx-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  margin: 0 auto; padding: 56px 24px; max-width: 520px;
  font-family: var(--mx-sans);
}
.mx-empty-ic {
  width: 64px; height: 64px; margin: 0 0 14px; display: grid; place-items: center;
  border-radius: 20px; color: var(--mx-gold-700);
  background: linear-gradient(180deg, var(--mx-surface), var(--mx-gold-50));
  box-shadow: 0 1px 2px rgba(20, 32, 24, .05), 0 10px 24px -10px rgba(196, 154, 69, .45), 0 0 0 1px rgba(196, 154, 69, .25);
}
.mx-empty-t { font-family: var(--mx-serif); font-size: 1.5rem; font-weight: 600; color: var(--mx-ink-900); line-height: 1.2; }
.mx-empty-s { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--mx-ink-600); }
.mx-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.app-body .tl-list:has(> .mx-empty) { padding-inline-start: 0; }
.app-body .tl-list:has(> .mx-empty)::before { display: none; }

.mx-skel { position: relative; overflow: hidden; border-radius: var(--mx-r-lg); background: var(--mx-surface); box-shadow: var(--mx-e1); }
.mx-skel i, .mx-skel b, .mx-skel span, .mx-skel-row > div > * {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--mx-surface-3) 0, #f6f2e8 40%, var(--mx-surface-3) 80%) 0 0 / 800px 100%;
  animation: mxShimmer 1.4s linear infinite;
}
.mx-skel-stat { display: flex; align-items: center; gap: 14px; padding: 18px; height: 80px; box-sizing: border-box; }
.mx-skel-stat i { width: 44px; height: 44px; border-radius: var(--mx-r-md); flex: 0 0 auto; }
.mx-skel-stat b { width: 60px; height: 22px; }
.mx-skel-stat span { width: 80px; height: 10px; margin-top: 8px; }
.mx-skel-stat { flex-wrap: wrap; align-content: center; }
.mx-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.mx-skel-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; height: 260px; box-sizing: border-box; }
.mx-skel-card i { width: 40%; height: 22px; }
.mx-skel-card b { width: 55%; height: 34px; }
.mx-skel-card span { width: 90%; height: 10px; }
.mx-skel-card span.w60 { width: 60%; }
.mx-skel-list { display: flex; flex-direction: column; gap: 8px; }
.mx-skel-row { display: flex; align-items: center; gap: 12px; padding: 14px; }
.mx-skel-row i { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.mx-skel-row > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.mx-skel-row > div > b { width: 40%; height: 12px; }
.mx-skel-row > div > span { width: 70%; height: 10px; }
.app-body .admin-stats > .mx-skel { grid-column: auto; }

/* ---------- 13. MOBİL ---------- */
@media (max-width: 1180px) {
  .app-body .view.active { padding: 32px 32px 88px; }
  .app-body .bill-plans { grid-template-columns: 1fr; max-width: 560px; }
  .app-body .admin-charts { grid-template-columns: 1fr; }
  .app-body .tb-search { width: 44px; padding: 0; justify-content: center; }
  .app-body .tb-search-txt, .app-body .tb-search .tb-kbd { display: none; }
}
@media (max-width: 1100px) { .app-body .fam-hub { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .app-body .chamber-layout { grid-template-columns: 1fr; }
  .app-body #chamberLayout { height: auto; }
  .app-body #chamberLayout .chamber-avatar { min-height: 0; }
  .app-body .chamber-chat { height: 640px; }
  .app-body .upload-layout { grid-template-columns: 1fr; }
  .app-body .seal-stage { position: relative; top: 0; min-height: 260px; }
  .app-body .sec-status-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --tb-core: 56px; --tab-h: calc(76px + env(safe-area-inset-bottom, 0px)); --gutter: 0px; }
  html.sb-collapsed { --sb-w: 264px; }
  .app-body .app-shell { padding-inline-start: 0; padding-top: var(--tb-h); }
  .app-body .app-main { height: 100%; margin: 0; border-radius: 0; box-shadow: none; scrollbar-gutter: auto; }
  .app-body .view.active { padding: 20px 16px calc(var(--tab-h) + 32px); }

  /* Üst bar */
  .app-body .app-topbar {
    inset-inline-start: 0; gap: 4px;
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
    background: rgba(242, 238, 227, .92);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    box-shadow: 0 1px 0 var(--mx-line);
  }
  .app-body .app-menu-toggle {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: var(--mx-r-sm);
    background: transparent; color: var(--mx-ink-800); cursor: pointer;
  }
  .app-body .app-menu-toggle svg { width: 22px; height: 22px; }
  .app-body .tb-title { flex: 1 1 auto; gap: 8px; }
  .app-body .tb-mark { display: block; }
  .app-body .tb-crumb, .app-body .tb-sep { display: none; }
  .app-body .tb-page { font-family: var(--mx-serif); font-size: 1.25rem; font-weight: 600; }
  .app-body .topbar-status { display: none; }
  .app-body .tb-search { width: 44px; height: 44px; margin: 0; padding: 0; border-radius: var(--mx-r-sm); background: transparent; box-shadow: none; color: var(--mx-ink-700); }
  .app-body .notif-btn { width: 44px; height: 44px; }
  .app-body .app-topbar .lang-btn { height: 44px; min-width: 44px; padding: 0 6px; }
  .app-body .app-topbar .lang-btn > svg, .app-body #langCurrent { display: none; }
  .app-body .user-chip { width: 44px; height: 44px; padding: 0; margin: 0; justify-content: center; background: transparent; box-shadow: none; }
  .app-body .user-chip .user-name, .app-body .user-chip .user-caret { display: none; }
  .app-body .user-chip .user-avatar { width: 32px; height: 32px; }

  /* Başlık */
  .app-body .view-head { grid-template-columns: 1fr; margin-bottom: 20px; padding-bottom: 18px; }
  .app-body .view-head h1 { font-size: 1.875rem; }
  .app-body .view-head p { font-size: .875rem; }
  .app-body .vh-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 14px; }
  .app-body .vh-actions .btn, .app-body .vh-actions button { min-height: 44px; width: auto; padding: 0 16px; }

  /* Bileşenler */
  .app-body .btn { min-height: 44px; }
  .app-body .btn-sm { min-height: 40px; }
  .app-body .modal-close { width: 44px; height: 44px; }
  .app-body :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], select, textarea) { font-size: 16px !important; min-height: 44px; }
  .app-body .fam-hub, .app-body .staff-add-grid, .app-body .bill-grid2, .app-body .bill-usage { grid-template-columns: 1fr; }
  .app-body .fam-invite-card { padding: 22px 20px; }
  .app-body .family-grid { grid-template-columns: 1fr; }
  .app-body .iv-setup-row { grid-template-columns: 1fr; }
  .app-body .upload-row { grid-template-columns: 1fr; }
  .app-body .upload-form { padding: 20px; }
  .app-body #genChart { min-height: 420px; max-height: calc(100dvh - var(--tb-h) - var(--tab-h) - 180px); padding: 12px 12px 24px; }
  .app-body .tl-list { padding-inline-start: 22px; }
  .app-body .tl-list::before { inset-inline-start: 5px; }
  .app-body .tl-year { float: none; position: sticky; top: 52px; width: auto; margin: 16px 0 10px; margin-inline-start: -22px; padding: 6px 0 6px 22px; text-align: start; font-size: 1.375rem; background: linear-gradient(180deg, var(--mx-panel) 70%, transparent); }
  [dir="rtl"] .app-body .tl-year { padding: 6px 22px 6px 0; }
  .app-body .tl-dot { inset-inline-start: -22px; }
  .app-body .tl-tools { top: 0; margin: 0 -4px 20px; padding: 6px 4px; }
  .app-body .tl-tools select { flex: 1 1 140px; }
  .app-body .dm-layout { height: auto; min-height: 0; border-radius: var(--mx-r-lg); }
  .app-body .pf-hero { flex-direction: column; text-align: center; padding: 28px 20px; gap: 16px; }
  .app-body .pf-badges { justify-content: center; }
  .app-body .pf-set-grid { grid-template-columns: 1fr; }
  .app-body .pf-set-actions .btn { flex: 1 1 auto; }
  .app-body .pf-set-actions .btn-danger { margin-inline-start: 0; }
  .app-body .chat-fab { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tab-h) + 14px); width: 50px; height: 50px; }
  [dir="rtl"] .app-body .chat-fab { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
  .app-body .cp-head { margin-bottom: 20px; }
  .app-body .cp-search { width: 100%; }
  .app-body .user-menu { width: min(320px, calc(100vw - 16px)); }
  .app-body .notif-panel { width: min(360px, calc(100vw - 16px)); }
}

/* Bilgelik Odası — mobil immersif (app.css düzenini korur, yalnız rafine eder) */
@media (max-width: 700px) {
  .app-body #chamberLayout:not([hidden]) { top: var(--tb-h); height: calc(100dvh - var(--tb-h)); background: var(--mx-brand-950); }
  .app-body #chamberLayout .chamber-avatar {
    background:
      radial-gradient(70% 55% at 50% 45%, rgba(196, 154, 69, .18), transparent 70%),
      radial-gradient(120% 70% at 50% 115%, rgba(43, 125, 80, .5), transparent 70%),
      linear-gradient(180deg, #0b1e13 0%, #10301e 70%, #154a2c 100%) !important;
  }
  .app-body #chamberLayout .chamber-avatar h3 { color: #f6efd9; font-weight: 600; font-size: 1.25rem; }
  .app-body #chamberLayout .chamber-back,
  .app-body #chamberLayout #voiceToggleBtn,
  .app-body #chamberLayout #liveAvatarBtn {
    min-height: 0; height: 36px; background: rgba(255, 255, 255, .12); color: #eef5f0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); border: 0;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .app-body #chamberLayout #voiceToggleBtn, .app-body #chamberLayout #liveAvatarBtn { width: 36px; padding: 0; border-radius: 50%; }
  .app-body #chamberLayout #voiceToggleBtn { margin: 0; }
  .app-body #chamberLayout .chamber-back { display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--mx-r-pill); font-size: .75rem; }
  .app-body #chamberLayout .chamber-chat { border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
  .app-body #chamberLayout .chat-scroll { padding: 16px 14px; gap: 10px; }
  .app-body #chamberLayout .msg { max-width: 86%; font-size: .9375rem; }
  .app-body #chamberLayout .chat-input { margin: 8px 10px 6px; padding: 4px; }
  .app-body #chamberLayout .chat-input button[type="submit"] { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; border-radius: 12px; }
  .app-body #chamberLayout .chat-suggestions { padding: 10px 10px 0; }
  .app-body #chamberLayout .chat-suggestions button { min-height: 36px; }
  .app-body .cp-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-body .is-living .cp-sec-grid { grid-template-columns: 1fr; gap: 8px; }
  .app-body .cp-card { border-radius: var(--mx-r-lg); }
  .app-body .cp-info { padding: 12px 12px 52px; }
  .app-body .cp-card strong { font-size: 1.1875rem; }
  .app-body .cp-badge { font-size: .5625rem; padding: 2px 7px; }
  .app-body .cp-cta { inset-inline: 8px; bottom: 8px; height: 36px; font-size: .75rem; }
  .app-body .cp-mono { font-size: 2.5rem; }
  .app-body .cp-sec-head h2 { font-size: 1.375rem; }
  .app-body .cp-section { margin-bottom: 32px; }
  .app-body .is-living .cp-card { min-height: 72px; }
  .app-body .is-living .cp-cta { width: 40px; height: 40px; }

  /* DM mobil: tam ekran konuşma app.css'te; rafine */
  .app-body #view-dm .dm-layout { background: none; box-shadow: none; border-radius: 0; }
  .app-body #view-dm .dm-side { background: var(--mx-surface); border: 0; border-radius: var(--mx-r-lg); box-shadow: var(--mx-e2); overflow: hidden; }
  .app-body .dm-head { padding: 8px 10px; }
  .app-body .dm-call-btn { width: 44px; height: 44px; }
  .app-body .dm-input { margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .app-body .dm-msg { max-width: 84%; }
}

@media (max-width: 560px) {
  .app-body .view-head h1 { font-size: 1.75rem; }
  .app-body .modal { border-radius: var(--mx-r-xl); }
  .app-body .modal-body { padding: 20px; }
  .app-body .modal-head { padding: 14px 16px 14px 20px; }
  #loginModal .modal-body { padding: 26px 20px 22px; }
  .app-body .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-body .admin-stat { gap: 10px; padding: 12px; }
  .app-body .admin-stat .as-ic { width: 36px; height: 36px; border-radius: var(--mx-r-sm); }
  .app-body .admin-stat .as-ic svg { width: 18px; height: 18px; }
  .app-body .as-frame b, .app-body .admin-stat b { font-size: 1.375rem; }
  #pushBanner { font-size: .75rem !important; width: calc(100vw - 24px); box-sizing: border-box; }
  .app-body .vault-tools > * { flex: 1 1 100%; }
  .app-body .vt-count { margin-inline-start: 0; }
  .app-body .vault-item.row { padding: 12px 14px; }
  .app-body .bill-plan { padding: 24px 20px 20px; }
  .app-body .fr-addcard { flex-direction: column; padding: 18px; }
  .app-body .fr-addform input { max-width: none; }
  .app-body .mx-empty { padding: 40px 12px; }
  .mx-cmd { padding: 8px; align-items: flex-start; }
  .mx-cmd-box { max-height: 82vh; }
  .mx-cmd-foot { display: none; }
}
@media (max-width: 380px) {
  .app-body .topbar-actions { gap: 0; }
  .app-body .tb-mark { display: none; }
  .app-body .tb-page { font-size: 1.125rem; }
  .app-body .cp-sec-grid { gap: 10px; }
  .mx-tab { font-size: .6rem; }
}

/* ---------- 14. RTL ---------- */
[dir="rtl"] .app-body .tb-sep { transform: scaleX(-1); }
[dir="rtl"] .app-body .tree-zoom #tzFit { border-radius: var(--mx-r-sm) 0 0 var(--mx-r-sm); }
[dir="rtl"] .app-body .cp-card:hover .cp-cta svg { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .app-body .status-pop { inset-inline-end: auto; inset-inline-start: 0; }
[dir="rtl"] .app-body .view-head h1, [dir="rtl"] .app-body .cp-sec-head h2, [dir="rtl"] .app-body .mx-empty-t { font-family: var(--mx-sans); font-weight: 700; letter-spacing: 0; }

/* ---------- 15. HAREKET TERCİHİ ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-body *, .app-body *::before, .app-body *::after, .mx-cmd *, .mx-tabbar * {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .app-body .cp-card:hover, .app-body .gc-node:hover, .app-body .bill-plan:hover, .app-body .admin-stat:hover,
  .app-body .tl-item:hover .tl-card, .app-body .member-tile:hover, .app-body .chat-fab:hover { transform: none !important; }
  .app-body .cp-card:hover .cp-photo img { transform: none; }
  .app-body .sb-pill.ready, .sb-menu, .mx-tip { transition: none !important; }
  .app-body .side-item:hover .side-icon, .app-body .sb-new:hover .sb-new-ic { transform: none !important; }
}