:root {
      --bg-dark: #eef8e8;
      --card-bg: #fffdf7;
      --accent-blue: #4f8a3c;
      --accent-green: #5f9b49;
      --accent-purple: #7a5aa6;
      --accent-amber: #b98527;
      --text-main: #17351c;
      --text-muted: #55705a;
      --border-color: #b9d8ad;
      --group-bg: rgba(255,255,255,.56);
      --card-male-bg: rgba(255,255,255,.82);
      --card-male-border: rgba(79,138,60,.38);
      --card-female-bg: rgba(255,255,255,.82);
      --card-female-border: rgba(79,138,60,.38);
    }


    

    
    
    

    /* Cinsiyet renkleri temadan bağımsız */
    [data-theme] {
      --card-male-bg:rgba(191, 226, 255, .78);
      --card-male-border:rgba(74, 156, 219, .62);
      --card-female-bg:rgba(255, 205, 218, .78);
      --card-female-border:rgba(220, 105, 139, .58);
    }
    #viewport, #fab-wrapper, .role-badge-floating, #app-toast-host, .modal-overlay, .active-filter-bar {
      z-index: 1;
    }
    .modal-overlay { z-index: 2000; }
    #fab-wrapper { z-index: 1000; }
    .role-badge-floating { z-index: 999; }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      touch-action: none;
      transition: background-color 0.3s ease;
    }

    .active-filter-bar {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 998;
      background: rgba(34, 197, 94, 0.15);
      border: 1px solid var(--accent-green);
      color: var(--accent-green);
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      display: none;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    }
    .active-filter-bar button {
      background: rgba(239, 68, 68, 0.25);
      border: 1px solid #ef4444;
      color: #ef4444;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: 9px;
      cursor: pointer;
      font-weight: bold;
    }
    .active-filter-bar button:hover {
      background: #ef4444;
      color: #fff;
    }
    /* FAB menü */
    #fab-wrapper {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      gap: 10px;
    }
    #fab-main-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent-blue);
      color: white;
      border: none;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background 0.2s ease;
    }
    #fab-wrapper.open #fab-main-btn {
      transform: rotate(135deg);
      background: #ef4444;
    }
    #fab-menu-list {
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      max-height: 75vh;
      overflow-y: auto;
      padding-right: 2px;
    }
    #fab-wrapper.open #fab-menu-list {
      display: flex;
    }
    .fab-item-btn {
      background: var(--card-bg);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: transform 0.15s ease, background 0.2s ease;
    }
    .fab-item-btn:hover {
      transform: translateY(-2px);
      background: var(--accent-blue);
      color: white;
    }
    .fab-menu-panel {
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      width: 100%;
    }
    .fab-menu-panel.active {
      display: flex;
    }
    .fab-chevron {
      margin-left: auto;
      padding-left: 10px;
      font-size: 16px;
      line-height: 1;
      opacity: .65;
    }
    .fab-back-btn {
      opacity: .82;
      font-weight: 750;
    }
    .fab-about-main {
      margin-top: 3px;
      border-width: 1.5px;
      font-weight: 800;
    }
/* Tema paletleri için dekorasyon uyumluluğu */
    body::before, body::after { background-image:none !important; }

    #viewport {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
      cursor: grab;
      touch-action: none;
    }
    #viewport.is-panning {
      cursor: grabbing;
    }
    #zoom-container {
      transform-origin: 0 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 5000px;
      height: 5000px;
    }
    #svg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 5000px;
      height: 5000px;
      pointer-events: none;
      z-index: 1;
    }
    #tree-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 5000px;
      height: 5000px;
      padding: 60px;
      z-index: 2;
    }
    .lineage-headers {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      gap: 16px;
      margin-bottom: 24px;
      padding-left: 10px;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .lineage-nav-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .lineage-nav-children {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      align-items: flex-start;
      padding-top: 4px;
      border-top: 2px solid color-mix(in srgb, var(--border-color) 60%, transparent);
      margin-top: 2px;
    }
    .lineage-family-header, .lineage-sub-header {
      width: 300px;
      max-width: 300px;
      min-width: 160px;
      box-sizing: border-box;
      border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
      border-radius: 16px;
      padding: 10px 12px 12px;
      text-align: left;
      user-select: none;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 92%, #fff) 0%, var(--card-bg) 55%, color-mix(in srgb, var(--card-bg) 88%, #000) 100%);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.2s;
      backdrop-filter: blur(6px);
    }
    .lineage-family-header:hover, .lineage-sub-header:hover {
      transform: translateY(-2px);
      box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .lineage-family-header {
      font-weight: 800;
      font-size: 12px;
      border-left: 4px solid var(--accent-blue);
    }
    .lineage-sub-header {
      cursor: pointer;
      border-left: 4px solid var(--accent-green);
      opacity: 0.95;
    }
    .lineage-sub-header.is-collapsed,
    .lineage-family-header.is-collapsed {
      opacity: 0.72;
      border-style: dashed;
    }
    .lineage-color-code {
      position: absolute;
      left: 50%;
      top: 4px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: calc(100% - 18px);
      pointer-events: none;
    }
    .lineage-color-code span {
      display: block;
      width: 28px;
      height: 3px;
      border-radius: 99px;
    }
    .lineage-header-content {
      position: relative;
      z-index: 1;
      padding: 6px 8px 8px;
      display: flex;
      align-items: stretch;
      gap: 8px;
      min-height: 52px;
    }
    .lineage-left-block {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
    }
    .lineage-name-row {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lineage-location-tag {
      font-size: 8.5px;
      color: var(--accent-amber);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 600;
    }
    .lineage-member-count {
      font-size: 8.5px;
      opacity: 0.8;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body:not(.is-authenticated) #viewport,
    body:not(.is-authenticated) #fab-wrapper,
    body:not(.is-authenticated) #roleBadgeDisplay,
    body:not(.is-authenticated) .active-filter-bar {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    body:not(.is-authenticated) {
      overflow: hidden;
    }
    .lineage-right-block {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 4px;
    }
    .lineage-stats-bar {
      display: flex;
      justify-content: flex-end;
      gap: 4px;
      font-size: 8px;
      flex-wrap: wrap;
    }
    .lineage-stat-badge {
      background: rgba(255, 255, 255, 0.06);
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      color: var(--text-main);
      font-weight: 600;
      white-space: nowrap;
    }
    .lineage-collapse-arrow {
      position: absolute;
      right: 6px;
      bottom: 4px;
      font-size: 10px;
      opacity: 0.65;
      line-height: 1;
      pointer-events: none;
    }
    .lineage-family-header, .lineage-sub-header {
      position: relative;
    }
.lineage-members-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
      width: max-content;
    }

    .family-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--group-bg);
      padding: 8px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      position: relative;
      align-items: center;
      align-self: flex-start;
      width: max-content;
    }
    .member-card {
      width: 145px;
      border-radius: 10px;
      padding: 8px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: all 0.25s ease;
      user-select: none;
      cursor: pointer;
      border: 1px solid var(--border-color);
      padding-bottom: 22px;
    }

    .member-card.compact-card {
      width: 130px;
      padding: 5px;
      padding-bottom: 14px;
    }
    .member-card.compact-card .avatar-wrapper {
      width: 24px;
      height: 24px;
      font-size: 13px;
      margin: 3px auto 1px auto;
    }
    .member-card.compact-card .member-name {
      font-size: 9.5px;
    }
    .member-card.compact-card .member-info {
      font-size: 7.5px;
    }
    .member-card.compact-card .member-note-preview {
      font-size: 6.5px;
    }
    .member-card.compact-card .kinship-tag {
      font-size: 6.5px;
      padding: 1px 4px;
    }
    .member-card.gender-male {
      background-color: var(--card-male-bg);
      border-color: var(--card-male-border);
    }
    .member-card.gender-female {
      background-color: var(--card-female-bg);
      border-color: var(--card-female-border);
    }
    .member-card.is-focus {
      border-color: #f59e0b !important;
      box-shadow: 0 0 18px rgba(245, 158, 11, 0.9) !important;
      transform: scale(1.02);
    }
    .member-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24);
    }
    .member-card.is-filter-match {
      border-color: var(--accent-green) !important;
      box-shadow: 0 0 22px rgba(34, 197, 94, 0.95) !important;
      transform: scale(1.04);
      z-index: 50;
    }
    .member-card.is-filter-dimmed {
      opacity: 0.15 !important;
      filter: grayscale(80%);
    }
    .genetic-bar {
      position: absolute;
      top: 0;
      left: 7px;
      width: calc(100% - 14px);
      height: 5px;
      z-index: 10;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
    }
    .genetic-marker-segment {
      display: block;
      height: 100%;
      min-width: 2px;
    }
    .card-top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 2px;
      gap: 4px;
    }
    .kinship-tag {
      background: var(--accent-purple);
      color: white;
      font-size: 7.5px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 4px;
      line-height: 1.1;
      text-align: center;
      max-width: 95px;
      word-break: break-word;
      white-space: normal;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    .kinship-tag.is-self {
      background: #f59e0b;
      color: #000;
    }
    .avatar-wrapper {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      margin: 6px auto 2px auto;
      background: rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border: 1.5px solid var(--border-color);
      overflow: hidden;
    }
    .avatar-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .member-name {
      text-align: center;
      font-weight: 700;
      font-size: 10.5px;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .member-info {
      text-align: center;
      font-size: 8.5px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .member-note-preview {
      text-align: center;
      font-size: 7.5px;
      color: var(--accent-amber);
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .marriage-union-node {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      z-index: 20;
      margin: -1px 0;
      min-height: 28px;
    }
    .union-control {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 2px;
    }
    .spouse-connector-heart {
      background: var(--card-bg);
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      cursor: pointer;
      color: #e11d48;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(225, 29, 72, 0.35);
      transition: transform 0.18s, background 0.18s;
    }
    .spouse-connector-heart:hover {
      transform: scale(1.1);
      background: rgba(225, 29, 72, 0.15);
    }
    .child-add-btn {
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 7px;
      background: var(--card-bg);
      color: var(--accent-blue);
      border: 1px solid rgba(59, 130, 246, 0.35);
      font-size: 12px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    .child-add-btn:hover {
      transform: scale(1.1);
      background: rgba(59, 130, 246, 0.15);
    }
    path.tree-link {
      fill: none;
      stroke-width: 3px;
      stroke-linecap: round;
      transition: stroke 0.3s ease;
    }
    /* Modallar */
    .search-modal-results {
      max-height: 250px;
      overflow-y: auto;
      margin: 8px 0 2px;
    }
    .search-modal-card {
      width: min(430px, calc(100vw - 28px));
    }
    .search-result {
      padding: 9px 10px;
      border: 1px solid var(--border-color);
      margin-bottom: 5px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 10px;
      background: var(--bg-dark);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-result:hover {
      background: var(--accent-blue);
      color: #fff;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    .modal-card {
      position: relative;
      background: var(--card-bg);
      color: var(--text-main);
      border-radius: 14px;
      width: 90%;
      max-width: 440px;
      padding: 18px;
      border: 1px solid var(--border-color);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
      max-height: 85vh;
      overflow-y: auto;
    }

    .modal-card h2 {
      font-size: 14px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-group {
      margin-bottom: 10px;
    }
    .form-group label {
      display: block;
      font-size: 10px;
      color: var(--text-muted);
      margin-bottom: 3px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 6px 8px;
      background: var(--bg-dark);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-main);
      font-size: 11px;
    }
    .modal-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 14px;
    }
    .lineage-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px;
      background: var(--bg-dark);
      border-radius: 6px;
      margin-bottom: 4px;
    }
    .member-id-corner {
      position: absolute;
      top: 14px;
      right: 14px;
      display: none;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border: 1px solid var(--border-color);
      border-radius: 7px;
      background: var(--bg-dark);
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 800;
      user-select: none;
    }
    .member-id-corner input {
      width: 80px;
      padding: 2px 4px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text-main);
      font-size: 9px;
      font-weight: 800;
      text-align: right;
      cursor: not-allowed;
    }
    .modal-quick-actions {
      display: flex;
      gap: 6px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }
    .stat-box {
      background: var(--bg-dark);
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 11px;
      border: 1px solid var(--border-color);
    }
    .stat-title {
      font-weight: 700;
      color: var(--accent-amber);
      margin-bottom: 4px;
    }
    .member-stats-card-btn {
      position: absolute;
      right: 5px;
      bottom: 5px;
      width: 23px;
      height: 23px;
      min-width: 23px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      background: var(--card-bg);
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      z-index: 8;
      box-shadow: 0 1px 4px rgba(0,0,0,.14);
    }
    .member-stats-card-btn:hover {
      transform: scale(1.06);
    }
    .member-card.compact-card .member-stats-card-btn {
      width: 20px;
      height: 20px;
      min-width: 20px;
      right: 4px;
      bottom: 4px;
      font-size: 10px;
    }

    .stats-dashboard {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 7px;
    }
    .stats-kpi {
      position: relative;
      overflow: hidden;
      min-width: 0;
      background: var(--bg-dark);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
    }
    .stats-kpi .kpi-icon {
      display: block;
      font-size: 12px;
      line-height: 1;
    }
    .stats-kpi .kpi-value {
      display: block;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.05;
      margin-top: 2px;
      white-space: nowrap;
    }
    .stats-kpi .kpi-label {
      display: block;
      font-size: 6.5px;
      line-height: 1.05;
      letter-spacing: 0.15px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 800;
      white-space: nowrap;
    }
    @media (max-width: 430px) {
      .stats-dashboard {
        gap: 3px;
      }
      .stats-kpi {
        padding: 5px 2px;
      }
      .stats-kpi .kpi-icon {
        font-size: 11px;
      }
      .stats-kpi .kpi-value {
        font-size: 11.5px;
      }
      .stats-kpi .kpi-label {
        font-size: 5.8px;
        letter-spacing: 0;
      }
    }
    .gender-picker-group {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .gender-option-btn {
      flex: 1;
      padding: 7px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: var(--bg-dark);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .gender-option-btn.selected-male {
      background: rgba(59, 130, 246, 0.25);
      border-color: #3b82f6;
      color: #60a5fa;
    }
    .gender-option-btn.selected-female {
      background: rgba(236, 72, 153, 0.25);
      border-color: #ec4899;
      color: #f472b6;
    }
    button {
      background: var(--accent-blue);
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      font-size: 11px;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    button.btn-success { background: var(--accent-green); }
    button.btn-danger { background: #ef4444; }
    button.btn-warning { background: var(--accent-amber); color: #000; }
    button.btn-dark { background: #475569; }
    button.btn-mini { padding: 3px 6px; font-size: 9px; }
    .log-item {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-color);
      font-size: 10px;
    }
    .log-item:last-child { border-bottom: none; }
    .log-time { color: var(--text-muted); font-size: 8.5px; }
    .log-user { font-weight: bold; color: var(--accent-blue); }

    /* PDF / Yazdırma: menü ve kontroller gizlensin */
    @media print {
      #fab-wrapper,
      #roleBadgeDisplay,
      .active-filter-bar,
      .modal-overlay,
      .theme-icon-btn {
        display: none !important;
      }
      body {
        background: white !important;
        color: black !important;
      }
      #viewport, #zoom-container, #tree-container {
        transform: none !important;
        overflow: visible !important;
        height: auto !important;
      }
    }

  @keyframes memorySheetUp{from{transform:translateY(100%);opacity:.65}to{transform:translateY(0);opacity:1}}
  .contact-quick-menu{
    display:none;position:fixed;right:16px;bottom:84px;z-index:1205;width:min(92vw,330px);
    padding:11px;border:1px solid var(--border-color);border-radius:15px;background:var(--card-bg);
    color:var(--text-main);box-shadow:0 16px 42px rgba(0,0,0,.34)
  }
  .contact-quick-menu.open{display:block;animation:memorySheetUp .18s ease-out}
  .contact-quick-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
  .contact-quick-head button{border:0;background:transparent;color:var(--text-main);font-size:16px;cursor:pointer}
  .contact-quick-sub{font-size:10px;color:var(--text-muted);margin-bottom:8px}
  .contact-quick-menu a{display:flex;justify-content:space-between;gap:8px;padding:9px 7px;text-decoration:none;color:var(--text-main);font-size:12px;border-top:1px solid var(--border-color)}
  .contact-quick-menu a span{font-size:10px;color:var(--text-muted)}
  @media(max-width:640px){
    .contact-quick-menu{right:10px;bottom:78px}
  }
.union-status-tag {
      font-size: 8px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 4px;
      background: rgba(148, 163, 184, 0.25);
      color: var(--text-muted);
      white-space: nowrap;
    }
.union-manage-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 10px 0;
      max-height: 200px;
      overflow-y: auto;
    }
    .union-manage-item {
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 10px;
      background: var(--bg-dark);
      font-size: 11px;
    }
    .union-manage-item .um-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    #undoFabBtn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    :focus-visible {
      outline: 2px solid var(--accent-blue);
      outline-offset: 2px;
    }
    .member-name { font-size: 12px !important; }
    .member-info { font-size: 9.5px !important; }
    .member-note-preview { font-size: 8.5px !important; }
    .member-card.compact-card .member-name { font-size: 10.5px !important; }
    .member-card.compact-card .member-info { font-size: 8.5px !important; }
    .kinship-tag { font-size: 8px !important; }
    .lineage-name-row { font-size: 15px !important; }
    .lineage-location-tag, .lineage-member-count { font-size: 9.5px !important; }
    .search-result { font-size: 12px !important; padding: 10px 12px !important; }
    .fab-item-btn { font-size: 12px !important; }
    .empty-tree-state {
      padding: 48px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.6;
      max-width: 420px;
      margin: 40px auto;
    }
    .empty-tree-state strong { color: var(--text-main); display: block; margin-bottom: 8px; font-size: 16px; }
    #app-toast-host {
      position: fixed;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      width: min(420px, calc(100vw - 24px));
    }
    .app-toast {
      pointer-events: auto;
      background: var(--card-bg);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 13px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
      animation: toastIn 0.25s ease;
    }
    .app-toast.toast-error { border-color: #ef4444; }
    .app-toast.toast-success { border-color: var(--accent-green); }
    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .member-card, .lineage-family-header, .lineage-sub-header, .fab-item-btn, .app-toast {
        transition: none !important;
        animation: none !important;
      }
    }





    .unknown-parents-row{display:flex;align-items:center;justify-content:center;gap:7px;margin:2px auto 5px;position:relative;z-index:20}
    .unknown-parent-card{width:105px;min-height:55px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;cursor:pointer;background:rgba(255,255,255,.48);box-shadow:0 2px 7px rgba(15,23,42,.08);transition:.16s ease}
    .unknown-parent-card:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.13)}
    .unknown-parent-card.father{border:1.5px dashed var(--card-male-border);background:color-mix(in srgb,var(--card-male-bg) 58%,transparent)}
    .unknown-parent-card.mother{border:1.5px dashed var(--card-female-border);background:color-mix(in srgb,var(--card-female-bg) 58%,transparent)}
    .unknown-parent-add{font-size:11px;font-weight:900}.unknown-parent-sub{font-size:8px;color:var(--text-muted);font-weight:700}
    .unknown-parent-card.father .unknown-parent-add{color:#2878b8}.unknown-parent-card.mother .unknown-parent-add{color:#cf547b}
    .unknown-parent-union{min-width:43px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:15px}
    .unknown-parent-union .unknown-plus{width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-size:15px;font-weight:900}


/* === FAB Zincir Bildirim Sistemi === */
.fab-notify-host{position:relative!important;overflow:visible!important}
.fab-notify-badge{
  position:absolute;top:-7px;right:-7px;z-index:9999;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  display:none;visibility:visible!important;opacity:1!important;align-items:center;justify-content:center;
  background:#ef4444;color:#fff;border:2px solid #fff;
  font-size:11px;font-weight:900;line-height:1;
  box-shadow:0 2px 7px rgba(239,68,68,.45);
  pointer-events:none
}
.fab-notify-host.has-fab-alert>.fab-notify-badge{display:flex!important}
.fab-notify-host.fab-alert-pulse{animation:fabAlertPulse 1.55s ease-in-out infinite}
@keyframes fabAlertPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,.20)}
}
@media (prefers-reduced-motion:reduce){
  .fab-notify-host.fab-alert-pulse{animation:none!important}
}




#generalChatCompose{flex:0 0 auto!important;position:relative;z-index:4}
#generalChatBlockedNote{flex:0 0 auto!important}

/* Soy ağacı yerleşimi */
.lineage-members-row.lineage-root-row{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:34px!important;
  width:max-content!important;
}
.family-subtree{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:max-content!important;
  min-width:max-content!important;
  position:relative!important;
}
.family-subtree>.family-group{flex:0 0 auto!important}
.family-children-row{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:12px!important;
  width:max-content!important;
  margin-left:42px!important;
  padding:0!important;
  border:0!important;
}
.lineage-nav-node{
  align-items:center!important;
  width:max-content!important;
}
.lineage-branch-members{
  align-items:center!important;
  width:max-content!important;
}

/* === SOY ÜYE KÜMELERİ — ana soy dahil ===
   Her soyun yalnızca üye kartlarını kendi soy rengiyle gruplar. */
.lineage-branch-members.lineage-member-cluster{
  width:max-content!important;
  max-width:none!important;
  align-self:center!important;
  box-sizing:border-box!important;
  padding:12px 14px!important;
  margin:10px 0 12px!important;
  border:2px dashed var(--lineage-cluster-color, var(--border-color))!important;
  border-radius:16px!important;
  background:color-mix(in srgb, var(--lineage-cluster-color, var(--accent-blue)) 5%, transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lineage-cluster-color, var(--accent-blue)) 8%, transparent)!important;
}
.lineage-nav-children{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:42px!important;
  width:max-content!important;
  border:0!important;
  padding-top:14px!important;
}
@media(max-width:700px){
  .lineage-members-row.lineage-root-row{gap:24px!important}
  .family-children-row{margin-left:30px!important;gap:9px!important}
  .lineage-nav-children{gap:28px!important}
}

    /* Masaüstü/web okunaklılık; mobil görünüm korunur */
    @media (min-width: 761px) {
      .member-name { font-size:13px; line-height:1.3; }
      .member-info { font-size:10.5px; line-height:1.4; }
      .member-note-preview { font-size:9px; line-height:1.35; }
      .kinship-tag { font-size:9px; }
      .member-card.compact-card .member-name { font-size:11.5px; }
      .member-card.compact-card .member-info { font-size:9.5px; }
      .lineage-name-row { font-size:16px; }
      .lineage-location-tag, .lineage-member-count { font-size:10px; }
      .fab-item-btn { font-size:13px; }
      .search-result { font-size:12px; }
      .form-group label { font-size:12px; }
      .form-group input, .form-group select, .form-group textarea { font-size:13px; }
    }
    .member-detail-topbar{
      display:grid;
      grid-template-columns:92px minmax(0,1fr);
      gap:12px;
      align-items:start;
      margin:0 0 7px 6px;
    }
    .member-detail-photo-wrap{
      position:relative;
      width:92px;
      min-width:92px;
    }
    .member-detail-photo{
      width:92px;
      height:116px;
      box-sizing:border-box;
      border:1px solid var(--border-color);
      border-radius:10px;
      overflow:hidden;
      background:var(--bg-dark);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
    }
    .member-detail-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .member-detail-photo-placeholder{
      font-size:31px;
      opacity:.68;
      line-height:1;
    }
    .member-detail-photo-menu{
      display:none;
      position:absolute;
      z-index:20;
      left:4px;
      top:calc(100% + 5px);
      width:142px;
      padding:5px;
      border:1px solid var(--border-color);
      border-radius:9px;
      background:var(--card-bg);
      box-shadow:0 8px 22px rgba(0,0,0,.22);
    }
    .member-detail-photo-menu.open{display:grid;gap:4px;}
    .member-detail-photo-menu button{
      width:100%;
      padding:6px 7px;
      border:1px solid var(--border-color);
      border-radius:7px;
      background:var(--bg-dark);
      color:var(--text-main);
      font-size:9px;
      font-weight:800;
      text-align:left;
      cursor:pointer;
    }
    .member-detail-right{min-width:0;}
    .member-detail-id{
      min-height:12px;
      margin:0 3px 3px 0;
      text-align:right;
      font-size:8px;
      line-height:1.2;
      color:var(--text-muted);
      white-space:nowrap;
    }
    .member-detail-search{position:relative;min-width:0;}
    .member-detail-identity{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-top:8px;
      min-width:0;
    }
    .member-detail-name{
      flex:1 1 auto;
      min-width:0;
      font-size:12px;
      font-weight:800;
      white-space:normal;
      overflow-wrap:anywhere;
      line-height:1.25;
    }
    @media(max-width:480px){
      .member-detail-topbar{
        grid-template-columns:82px minmax(0,1fr);
        gap:9px;
        margin-left:4px;
      }
      .member-detail-photo-wrap{width:82px;min-width:82px;}
      .member-detail-photo{width:82px;height:104px;}
      .member-detail-photo-placeholder{font-size:28px;}
      .member-detail-photo-menu{width:134px;}
    }
    .modal-card.modal-has-close-x{position:relative;}
    .modal-close-x{position:absolute;top:10px;right:10px;z-index:40;width:34px;height:34px;padding:0;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-card);color:var(--text-main);display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.16);}
    .modal-close-x:hover{transform:scale(1.04);}
    #memberModal .modal-card{padding-top:18px;}
    #memberModal .modal-close-x{top:10px;right:10px;}
    #memberModal .member-id-corner{top:13px;max-width:calc(100% - 82px);}
    #aboutModal .modal-card{padding-top:50px !important;}
    #aboutModal .modal-close-x{top:9px;right:9px;}
    .contact-quick-head{position:relative;padding-right:34px;min-height:30px;}
    .contact-quick-head .contact-close-x{
      position:absolute;top:-3px;right:0;width:30px;height:30px;padding:0;
      border:1px solid var(--border-color);border-radius:50%;
      background:var(--bg-card);color:var(--text-main);font-size:19px;line-height:1;
      display:flex;align-items:center;justify-content:center;
    }
    .contact-quick-menu a span{display:none;}
    #memberModal.member-edit-mode #modalTitle{
      display:block;max-width:calc(100% - 150px);margin-right:150px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    #memberModal.member-edit-mode .modal-card{padding-top:18px;}
    #memberModal .member-id-corner{right:52px;padding:3px 5px;gap:3px;}
    #memberModal .member-id-corner input{width:58px;max-width:58px;padding:2px 2px;}
    .contact-quick-menu{width:min(82vw,230px)!important;padding:8px!important;border-radius:13px!important;}
    .contact-quick-sub{font-size:9px!important;margin:0 2px 5px!important;line-height:1.3;}
    .contact-quick-menu a{padding:7px 5px!important;font-size:11px!important;}
    @media(min-width:521px){
      #generalChatModal{align-items:flex-end!important;justify-content:flex-start!important;padding:0 0 76px 14px!important;background:transparent!important;backdrop-filter:none!important;pointer-events:none!important;}
      #generalChatModal .general-chat-card{width:min(92vw,390px)!important;height:min(70vh,600px)!important;pointer-events:auto!important;border-radius:16px!important;box-shadow:0 16px 42px rgba(0,0,0,.34)!important;}
    }
    #generalChatModal .chat-close{
      width:30px;height:30px;padding:0;border:1px solid var(--border-color)!important;
      border-radius:50%;background:var(--card-bg)!important;color:var(--text-main);
      display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
    }




/* Genel sohbet */
#general-chat-btn{position:fixed;bottom:20px;left:74px;z-index:1000;width:46px;height:46px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card-bg);color:var(--text-main);border:1px solid var(--border-color);box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:20px;cursor:pointer;transition:transform .15s ease,box-shadow .15s}
#general-chat-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.chat-unread-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--card-bg);font:800 9px/14px Arial;text-align:center;display:none}
#generalChatModal{z-index:2147483100}.general-chat-card{width:min(94vw,440px)!important;height:min(78vh,680px);padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-color);background:var(--card-bg)}
.chat-head-title{font-size:14px;font-weight:900}.chat-head-sub{font-size:8px;color:var(--text-muted);margin-top:2px}.chat-close{border:0;background:transparent;color:var(--text-main);font-size:18px;cursor:pointer;padding:4px 7px}
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:8px;background:var(--bg-dark);overscroll-behavior:contain}
.chat-load-old{align-self:center;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-muted);border-radius:999px;padding:5px 10px;font-size:9px;cursor:pointer}
.chat-row{display:flex;align-items:flex-end;gap:6px;max-width:88%}.chat-row.mine{align-self:flex-end;flex-direction:row-reverse}.chat-row.other{align-self:flex-start}
.chat-bubble{min-width:70px;padding:7px 9px;border-radius:13px;border:1px solid rgba(255,255,255,.13);box-shadow:0 2px 6px rgba(0,0,0,.12);color:#17202a;word-break:break-word}
.chat-row.mine .chat-bubble{border-bottom-right-radius:4px}.chat-row.other .chat-bubble{border-bottom-left-radius:4px}
.chat-meta{display:flex;gap:7px;align-items:center;justify-content:space-between;margin-bottom:3px;font-size:8px;font-weight:800;opacity:.72}.chat-text{font-size:12px;line-height:1.35;white-space:pre-wrap}.chat-admin-tools{display:flex;gap:3px;margin-top:5px;justify-content:flex-end}.chat-admin-tools button{border:0;border-radius:6px;padding:3px 5px;font-size:8px;cursor:pointer;background:rgba(255,255,255,.58);color:#222}
.chat-compose{display:flex;align-items:flex-end;gap:7px;padding:9px;border-top:1px solid var(--border-color);background:var(--card-bg)}
#generalChatInput{flex:1;resize:none;max-height:92px;min-height:38px;border:1px solid var(--border-color);border-radius:18px;padding:10px 12px;background:var(--bg-dark);color:var(--text-main);font:inherit;font-size:12px;outline:none}
#generalChatSend{width:40px;height:40px;border:0;border-radius:50%;background:var(--accent-green);color:#fff;font-size:16px;cursor:pointer}.chat-block-note{display:none;padding:9px 12px;text-align:center;font-size:10px;color:#ef4444;background:rgba(239,68,68,.08);border-top:1px solid rgba(239,68,68,.2)}
.chat-empty{margin:auto;text-align:center;color:var(--text-muted);font-size:11px;padding:25px}.chat-error{margin:auto;text-align:center;color:#ef4444;font-size:10px;padding:18px;line-height:1.45}

#social-quick-dock{
  position:fixed;left:20px;bottom:20px;z-index:1000;
  display:flex;align-items:center;gap:0;padding:4px;
  background:var(--card-bg);border:1px solid var(--border-color);border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
#social-quick-dock #general-chat-btn{
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:46px!important;height:46px!important;min-width:46px!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;
  color:var(--text-main);font-size:20px;cursor:pointer;transform:none!important;
}
#social-quick-dock #general-chat-btn:hover{background:rgba(127,127,127,.12)!important;box-shadow:none!important;transform:none!important}

#social-quick-dock .chat-unread-badge{right:-1px;top:-3px;border-color:var(--card-bg)}
body:not(.is-authenticated) #social-quick-dock{display:none!important}

#generalChatModal .chat-head{flex:0 0 auto!important;min-height:48px!important;position:relative!important;z-index:6!important}
#generalChatModal .chat-head>div:first-child{min-width:0!important;display:block!important}
#generalChatModal .chat-head-title{display:block!important;visibility:visible!important;opacity:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#generalChatModal .chat-head-sub{display:block!important;visibility:visible!important;opacity:.82!important}

.dashboard-quick-btn{position:fixed;top:60px;right:12px;z-index:999;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-main);box-shadow:0 4px 15px rgba(0,0,0,.25);backdrop-filter:blur(12px);font-size:17px;cursor:pointer;align-items:center;justify-content:center;padding:0}
body.is-authenticated .dashboard-quick-btn{display:flex!important}
#social-quick-dock{padding:3px!important;border-radius:50%!important}
#social-quick-dock #general-chat-btn{width:48px!important;height:48px!important;min-width:48px!important}

.person-search-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}.person-search-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-card-jump{flex:0 0 auto;border:1px solid var(--border-color);background:var(--card-bg);color:var(--accent-blue);border-radius:999px;padding:4px 8px;font-size:9px;font-weight:900;cursor:pointer}
@media(max-width:520px){.dashboard-quick-btn{top:58px;right:10px;width:36px;height:36px;font-size:16px}}

/* === 105: Mobil tam ekran sohbet === */
@media(max-width:520px){
  body.chat-open{overflow:hidden!important;}
  body.chat-open #social-quick-dock{z-index:2147483646!important;}
  #generalChatModal{
    z-index:2147483100!important;
    inset:0!important;top:0!important;left:0!important;
    width:100vw!important;height:auto!important;max-height:none!important;
    bottom:var(--chat-dock-bottom,76px)!important;
    padding:0!important;margin:0!important;
    align-items:stretch!important;justify-content:stretch!important;
    background:var(--bg-dark)!important;backdrop-filter:none!important;overflow:hidden!important;
  }
  #generalChatModal .general-chat-card{
    width:100vw!important;height:100%!important;max-width:none!important;max-height:none!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  #generalChatModal .chat-messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;}
  #generalChatModal .chat-compose{flex:0 0 auto!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important;}
  #generalChatModal .chat-close{display:none!important;}
}



.family-subtree{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:max-content;min-width:max-content;position:relative}
.family-subtree>.family-group{align-self:center!important}
.family-children-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:10px;width:max-content;margin-top:18px;position:relative}
.lineage-members-row.lineage-root-row{align-items:flex-start!important;justify-content:center!important;gap:18px!important}



#fab-main-btn{padding:0!important;overflow:visible!important;background:var(--card-bg)!important;border:2px solid color-mix(in srgb,var(--accent-amber) 72%,#fff)!important}
#fab-main-btn img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;pointer-events:none}
#fab-wrapper.open #fab-main-btn{transform:rotate(135deg)!important;background:var(--card-bg)!important}
.about-bapire-logo{width:74px;height:74px;border-radius:50%;overflow:hidden;border:1px solid var(--border-color);background:transparent;flex:0 0 74px}
.about-bapire-logo img{width:100%;height:100%;display:block;object-fit:contain}


.online-presence{position:fixed;top:12px;left:12px;right:auto;z-index:999;background:transparent;color:var(--text-main,#222);border:0;padding:0;font-size:11px;box-shadow:none;max-width:min(180px,42vw);white-space:normal;pointer-events:auto}body.chat-open #fab-wrapper{pointer-events:none!important}body.chat-open #fab-menu-list{display:none!important} .online-presence .presence-heading{font-weight:700;margin-bottom:3px}.online-presence .presence-list{max-height:125px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.online-presence .presence-person{padding:2px 0;overflow-wrap:anywhere}.online-presence .is-recent{color:#b18413}.online-presence .presence-empty{opacity:.65}


.role-editor-only{display:none;}



.modal-close-x,.chat-close{background:#ef4444!important;color:#111!important;border:2px solid #111!important;border-radius:50%!important;font-weight:900!important;}