/* ===== MNEMOS Uygulama Paneli ===== */
/* Marka teması: derin orman yeşili + krem, altın (logo) vurgular — ışık modu */
.app-body {
  --bg: #eef1e8;            /* yumuşak krem-adaçayı zemin */
  --bg-alt: #e7ebde;
  --panel: #ffffff;         /* beyaz kartlar */
  --panel-2: #f4f3ea;
  --line: rgba(27, 59, 47, .13);
  --gold: #1b4332;          /* birincil marka yeşili */
  --gold-bright: #14532d;   /* başlıklar için koyu yeşil */
  --gold-dim: #6f8578;      /* soluk yeşil-gri */
  --violet: #b08a3c;        /* "Yaşayan Miras" → altın-taba */
  --pink: #c9a24b;
  --amber: #c9a24b;         /* Altın Mühür — logo altını */
  --text: #21302a;
  --muted: #5f6f64;
  --green: #40916c;         /* "Hayatta" / başarı yeşili */
  --shadow: 0 14px 40px rgba(27, 59, 47, .12);
}
.app-body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(64, 145, 108, .10), transparent 60%),
    var(--bg);
  min-height: 100vh; overflow: hidden;
}

/* Üst bar */
.app-topbar {
  height: 64px; display: flex; align-items: center; gap: 24px;
  padding: 0 22px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  position: relative; z-index: 20;
}
.app-brand { padding: 4px 0; }
.brand-logo { height: 52px; width: auto; display: block; }
.topbar-status { display: flex; gap: 10px; margin-inline-start: auto; }
.status-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; color: var(--muted); letter-spacing: .04em;
  border: 1px solid var(--line); padding: 6px 13px; border-radius: 30px;
}
.status-pill.secure { color: var(--green); border-color: rgba(52, 211, 153, .3); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2.4s infinite;
}
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #241a09; font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: .8rem; color: var(--muted); }

/* Kabuk */
.app-shell { display: flex; height: calc(100vh - 64px); }

/* Yan menü */
.app-sidebar {
  width: 240px; flex-shrink: 0; padding: 18px 12px;
  border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .55);
}
.side-item {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; color: var(--muted);
  font-family: var(--sans); font-size: .9rem; font-weight: 500; text-align: start;
  padding: 11px 14px; border-radius: 12px; cursor: pointer;
  transition: background .2s, color .2s, transform .1s; position: relative;
}
.side-item:active { transform: scale(.98); }
.side-item:hover { background: rgba(27, 59, 47, .06); color: var(--text); }
.side-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, .05));
  color: var(--gold-bright); border-inline-start: 2px solid var(--gold);
}
.side-icon { width: 21px; height: 21px; flex-shrink: 0; stroke: currentColor; opacity: .85; transition: opacity .2s, transform .2s; }
.side-item:hover .side-icon { opacity: 1; }
.side-item.active .side-icon { opacity: 1; stroke: #1b4332; }
.sidebar-foot { margin-top: auto; padding: 14px; }
.side-back { font-size: .82rem; color: var(--muted); display: block; margin-bottom: 14px; }
.side-back:hover { color: var(--gold-bright); }
.side-quote { font-family: var(--serif); font-style: italic; font-size: .85rem; color: var(--gold-dim); }

/* Ana alan */
.app-main {
  flex: 1; overflow-y: auto; padding: 30px 36px 60px;
  background:
    radial-gradient(ellipse 90% 40% at 100% 0%, rgba(64,145,108,.05), transparent 60%),
    linear-gradient(180deg, #eaeee4, #e7ece1);
}
.view { display: none; animation: viewIn .35s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Başlık çerçevesi — her görünümde belirgin */
.view-head {
  margin-bottom: 16px; max-width: none;
  background: linear-gradient(135deg, #ffffff, #f2f7ee);
  border: 1px solid rgba(27,59,47,.14);
  border-inline-start: 5px solid var(--green);
  border-radius: 16px; padding: 16px 24px;
  box-shadow: 0 3px 14px rgba(27,59,47,.07);
}
.view-head h1 { font-size: 1.9rem; color: #14532d; margin-bottom: 6px; font-weight: 700; }
.view-head p { color: #46564c; font-size: .95rem; }
.view-head h1 small { color: var(--muted); font-weight: 400; }

/* Alt başlıklar da çerçeveli/belirgin */
.sec-subtitle {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(64,145,108,.1); border: 1px solid rgba(64,145,108,.25);
  border-radius: 10px; padding: 8px 16px; color: #14532d; font-weight: 700;
  font-size: 1rem; margin: 6px 0 16px;
}
.sec-subtitle small { color: var(--muted); font-weight: 400; }

/* ---- Hafıza Ağacı ---- */
.tree-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; max-width: 860px; }
.tree-stage {
  background:
    radial-gradient(ellipse 55% 45% at 50% 32%, rgba(64, 145, 108, .12), transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(94, 74, 46, .06), transparent 70%),
    linear-gradient(180deg, #fbfdf9, #f3f6ee);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 18px; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(27,59,47,.06);
}
#familyTree { width: 100%; height: auto; display: block; }
.tree-logo {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 62px; height: auto; z-index: 2;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 720px) { .tree-logo { width: 48px; top: 10px; } }

.tree-branch { stroke: #7a6748; fill: none; stroke-linecap: round; }
.tree-root { stroke: #5e4f36; fill: none; stroke-linecap: round; opacity: .8; }

.member-node { cursor: pointer; }
.member-node circle.node-bg { stroke: #cdb98a; stroke-width: 2.5; transition: stroke .2s, r .2s; }
.member-node.live circle.node-bg { stroke: #7cc9a2; }
.member-node:hover circle.node-bg { stroke: var(--gold-bright); }
.member-node.selected circle.node-bg { stroke: var(--gold-bright); stroke-width: 3.5; }
.member-node text.node-initials { fill: var(--gold-bright); font-family: var(--serif); font-size: 17px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.member-node text.node-name { fill: #2a3a30; font-family: var(--sans); font-size: 12px; font-weight: 600; text-anchor: middle; stroke: #fbfdf9; stroke-width: 3.5px; paint-order: stroke; }
.member-node.live circle.halo { animation: haloPulse 2.6s ease-in-out infinite; }
.member-node.memorial circle.halo { opacity: .5; }
circle.halo { fill: none; stroke-width: 1.5; }
.member-node.live circle.halo { stroke: var(--green); }
.member-node.memorial circle.halo { stroke: var(--gold); }
@keyframes haloPulse { 0%,100% { opacity: .25; r: 26; } 50% { opacity: .9; } }

.tree-legend {
  display: flex; gap: 22px; justify-content: center; padding: 10px 0 12px;
  font-size: .78rem; color: var(--muted); flex-wrap: wrap;
}
.tree-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; }
.dot-live { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-memorial { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

.member-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; min-height: 320px;
}
.member-empty { color: var(--muted); font-size: .9rem; text-align: center; padding-top: 120px; }
.member-card { text-align: center; }
.member-card .m-avatar {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  background: radial-gradient(circle at 30% 30%, #ffffff, #eef1e8);
  border: 2px solid var(--gold); color: var(--gold-bright);
}
.member-card h3 { color: var(--gold-bright); margin-bottom: 4px; }
.member-card .m-years { color: var(--muted); font-size: .84rem; margin-bottom: 14px; }
.member-card .m-status {
  display: inline-block; font-size: .72rem; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
}
.member-card .m-status.live { color: var(--green); border: 1px solid rgba(111,191,143,.35); }
.member-card .m-status.memorial { color: var(--gold); border: 1px solid rgba(212,169,79,.35); }
.member-card .m-bio { color: var(--muted); font-size: .87rem; margin-bottom: 18px; text-align: start; }
.member-card .m-synth { margin-bottom: 18px; text-align: start; }
.member-card .m-synth label { font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.synth-bar { height: 7px; background: rgba(212,169,79,.14); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.synth-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.member-card .btn { width: 100%; }

/* ---- Bilgelik Odası ---- */
.chamber-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.chamber-layout[hidden] { display: none; }

/* ---- Kişi seçim ızgarası (kare kare) ---- */
.chamber-picker[hidden] { display: none; }
.cp-title { font-size: 1.05rem; color: var(--text); margin-bottom: 18px; font-weight: 600; }
.cp-title small { color: var(--muted); font-weight: 400; font-size: .85rem; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.cp-card {
  position: relative; cursor: pointer; text-align: center; font-family: var(--sans);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #fff, #fbfcfa); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 16px 18px; box-shadow: 0 4px 16px rgba(27,59,47,.07);
  transition: transform .16s, box-shadow .22s, border-color .2s; overflow: hidden;
}
.cp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg,#c9a24b,#8a6d33); }
.cp-card.live::before { background: linear-gradient(90deg,#34d399,#0f9d6b); }
.cp-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(27,59,47,.16); border-color: var(--gold-dim); }
.cp-photo {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 6px 0 8px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #6b7280;
  background: radial-gradient(circle at 30% 30%, #fff, #eef1e8); border: 3px solid #c9a24b;
  box-shadow: 0 6px 16px rgba(27,59,47,.14);
}
.cp-photo.live { border-color: #34d399; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-card strong { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
.cp-role { font-size: .76rem; color: var(--muted); }
.cp-badge { margin-top: 6px; font-size: .68rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; background: rgba(201,162,75,.16); color: #8a6d1f; }
.cp-badge.live { background: rgba(52,211,153,.15); color: #0f9d6b; }
.cp-empty { color: var(--muted); grid-column: 1/-1; text-align: center; padding: 30px; }
.chamber-back {
  align-self: flex-start; margin-bottom: 10px; cursor: pointer;
  background: rgba(27,59,47,.06); border: 0; color: var(--green); font-family: var(--sans);
  font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 20px; transition: .15s;
}
.chamber-back:hover { background: rgba(27,59,47,.12); }
.chamber-avatar {
  background:
    radial-gradient(ellipse 80% 55% at 50% 20%, rgba(64, 145, 108, .12), transparent 70%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 24px; text-align: center;
}
.avatar-ring {
  width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%;
  padding: 5px; background: conic-gradient(var(--gold), var(--gold-dim), var(--gold-bright), var(--gold));
  animation: ringSpin 9s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.avatar-face {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(64,145,108,.10), #eef1e8), var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.3rem; font-weight: 700; color: var(--gold-bright);
  animation: ringSpin 9s linear infinite reverse;
}
.chamber-avatar h3 { color: var(--gold-bright); font-size: 1.4rem; margin-bottom: 6px; }
.avatar-status { color: var(--green); font-size: .78rem; margin-bottom: 18px; }
.avatar-scene {
  border: 1px dashed var(--gold-dim); border-radius: 10px; padding: 10px;
  font-size: .78rem; color: var(--muted);
}

.chamber-chat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 420px;
}
.reality-anchor {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(27, 59, 47, .05); border-bottom: 1px solid var(--line);
  padding: 12px 18px; font-size: .78rem; color: var(--muted);
  border-radius: var(--radius) var(--radius) 0 0;
}
.chat-scroll { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 78%; padding: 13px 17px; border-radius: 14px; font-size: .92rem; line-height: 1.6; animation: viewIn .3s ease; }
.msg.user { align-self: flex-end; background: rgba(34, 211, 238, .16); border: 1px solid rgba(34, 211, 238, .25); color: var(--text); border-bottom-right-radius: 4px; }
.msg.avatar { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }
.msg.avatar .msg-ref { display: block; margin-top: 10px; font-size: .72rem; color: var(--gold-dim); border-top: 1px dashed rgba(212,169,79,.25); padding-top: 8px; }
.msg.typing { color: var(--muted); font-style: italic; }
.chat-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.chat-input input {
  flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 12px 16px; font-family: var(--sans); font-size: .92rem;
}
.chat-input input:focus { outline: none; border-color: var(--gold-dim); }
.chat-suggestions { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
.chat-suggestions button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: .78rem; padding: 6px 13px; border-radius: 20px; cursor: pointer;
  font-family: var(--sans); transition: .2s;
}
.chat-suggestions button:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---- Anı Emanet Et ---- */
.upload-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
.upload-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 18px;
}
.upload-modes { display: flex; gap: 10px; }
.mode-btn {
  flex: 1; background: var(--bg); border: 1.5px solid var(--line); color: var(--muted);
  padding: 13px 10px; border-radius: 13px; cursor: pointer; font-family: var(--sans);
  font-size: .84rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .15s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.mode-btn svg { transition: transform .2s; }
.mode-btn:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(27,59,47,.1); }
.mode-btn:hover svg { transform: scale(1.08); }
.mode-btn.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  box-shadow: 0 8px 20px rgba(27,59,47,.28);
}
.upload-form label { display: flex; flex-direction: column; gap: 7px; font-size: .82rem; color: var(--muted); }
.upload-form input, .upload-form textarea, .upload-form select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 12px 14px; font-family: var(--sans); font-size: .92rem;
  resize: vertical;
}
.upload-form input:focus, .upload-form textarea:focus, .upload-form select:focus { outline: none; border-color: var(--gold-dim); }
.upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type="date"] { color-scheme: dark; }

.seal-stage {
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(201, 162, 75, .12), transparent 70%),
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.seal-idle { text-align: center; color: var(--muted); font-size: .88rem; }
.seal-ring-static {
  width: 110px; height: 110px; margin: 0 auto 18px; border-radius: 50%;
  border: 2px dashed var(--gold-dim); display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; opacity: .8; color: var(--gold-bright);
}
.seal-anim { text-align: center; }
.seal-ring {
  width: 130px; height: 130px; margin: 0 auto 22px; border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 40px rgba(201, 162, 75, .4), inset 0 0 30px rgba(201, 162, 75, .18);
  display: flex; align-items: center; justify-content: center;
  animation: sealGlow 1.6s ease-in-out infinite;
}
@keyframes sealGlow {
  0%,100% { box-shadow: 0 0 26px rgba(212,169,79,.35), inset 0 0 22px rgba(212,169,79,.15); }
  50% { box-shadow: 0 0 60px rgba(212,169,79,.65), inset 0 0 40px rgba(212,169,79,.3); }
}
.seal-core {
  font-family: var(--serif); font-size: 3.4rem; font-weight: 700; color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(201, 162, 75, .6);
}
.seal-step { color: var(--gold-bright); font-size: .92rem; margin-bottom: 12px; min-height: 24px; }
.seal-hash {
  display: block; font-size: .72rem; color: var(--green); word-break: break-all;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  max-width: 300px; margin: 0 auto;
}

/* ---- Emanet Kasası ---- */
.vault-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.vault-item {
  background: #fff; border: 1px solid var(--line); border-inline-start: 5px solid var(--line);
  border-radius: 14px; padding: 18px 20px; transition: transform .15s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.vault-item.sealed { border-inline-start-color: #c9a24b; }
.vault-item.open   { border-inline-start-color: #2d6a4f; }
.vault-item.locked { border-inline-start-color: #e07b39; }
.vault-item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(27,59,47,.12); }
.v-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vault-item h3 { font-size: 1.02rem; line-height: 1.35; color: var(--text); margin: 0 0 8px; }
.vault-item .v-meta { font-size: .78rem; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.vault-item .v-hash {
  font-size: .66rem; color: #94a89b; font-family: monospace; word-break: break-all;
  margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
}
.vault-badge {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: 4px 11px; border-radius: 20px;
}
.vault-badge.sealed { color: #8a6d1f; background: rgba(201,162,75,.16); }
.vault-badge.locked { color: #b45309; background: rgba(224,123,57,.16); }
.vault-badge.open   { color: #1b6e4a; background: rgba(45,106,79,.14); }

/* ---- Güvenlik Paneli ---- */
.sec-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.sec-card {
  background: linear-gradient(135deg, #f4f8f5, #ffffff); border: 1px solid #d8e7dc;
  border-inline-start: 5px solid #2d6a4f; border-radius: 14px;
  padding: 22px 24px; position: relative; transition: transform .15s, box-shadow .2s;
}
.sec-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27,59,47,.1); }
.sec-card.ok { border-inline-start-color: #34d399; }
.sec-check {
  position: absolute; top: 20px; inset-inline-end: 20px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(52, 211, 153, .15); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  box-shadow: 0 0 12px rgba(52, 211, 153, .3);
}
.sec-card h3 { font-size: 1.05rem; color: var(--text); margin-bottom: 6px; padding-inline-end: 34px; }
.sec-card p { font-size: .8rem; color: var(--muted); }
.sec-subtitle.plain { font-size: 1.3rem; color: var(--gold-bright); margin-bottom: 20px; background: none; border: 0; padding: 0; display: block; }

.genesis-chain { display: flex; flex-direction: column; gap: 0; }
.genesis-block {
  display: grid; grid-template-columns: 130px 1fr; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: 12px;
  padding: 18px 22px; position: relative; transition: transform .15s, box-shadow .2s;
}
.genesis-block:hover { transform: translateX(3px); box-shadow: 0 8px 20px rgba(201,162,75,.14); }
.genesis-block + .genesis-block { margin-top: 26px; }
.genesis-block + .genesis-block::before {
  content: ""; position: absolute; top: -27px; inset-inline-start: 60px;
  width: 3px; height: 26px; background: linear-gradient(180deg, var(--gold), #2d6a4f);
}
.genesis-code {
  font-family: monospace; font-size: .72rem; color: #8a6d1f; align-self: center;
  background: rgba(201,162,75,.12); padding: 8px 10px; border-radius: 8px; line-height: 1.5;
}
.genesis-block h4 { font-size: .95rem; color: var(--text); margin-bottom: 4px; font-family: var(--sans); }
.genesis-block p { font-size: .8rem; color: var(--muted); }

/* ---- Aile Yönetimi ---- */
.family-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.family-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px;
}
.family-row .f-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: var(--gold-bright);
  background: var(--panel-2); border: 1.5px solid var(--gold-dim);
}
.family-row .f-info { flex: 1; }
.family-row .f-info strong { display: block; font-size: .95rem; color: var(--text); }
.family-row .f-info span { font-size: .78rem; color: var(--muted); }
.f-role {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px;
}
.f-role.admin { color: var(--gold); border: 1px solid rgba(212,169,79,.4); }
.f-role.member { color: var(--muted); border: 1px solid var(--line); }
.f-role.memorial { color: var(--gold-bright); border: 1px solid rgba(212,169,79,.5); background: rgba(212,169,79,.08); }

/* ---- Aile kartları (gruplu) ---- */
.family-group-title {
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin: 30px 0 16px;
}
.family-group-title:first-child { margin-top: 0; }
.family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.member-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 18px; text-align: center; cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.member-tile:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: 0 10px 30px rgba(167,139,250,.15); }
.member-tile.live { border-color: rgba(52, 211, 153, .35); }
.member-tile.live:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(52,211,153,.15); }
.tile-photo {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #ffffff, #eef1e8);
  border: 2px solid var(--violet);
}
.member-tile.live .tile-photo { border-color: var(--green); }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-tile h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; }
.tile-role {
  display: inline-block; font-size: .7rem; padding: 3px 11px; border-radius: 20px;
  background: rgba(167, 139, 250, .12); color: var(--violet); margin-bottom: 10px;
}
.member-tile.live .tile-role { background: rgba(52, 211, 153, .12); color: var(--green); }
.tile-years { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.tile-status { font-size: .78rem; }
.tile-status.live { color: var(--green); }
.tile-status.memorial { color: var(--violet); }
.family-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ---- Modal ---- */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20, 40, 32, .45); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  width: min(520px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: viewIn .25s ease;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.25rem; color: var(--gold-bright); }
.modal-close {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .9rem;
}
.modal-close:hover { color: var(--text); border-color: var(--violet); }
.modal-body { padding: 26px; overflow-y: auto; }

/* Detay içeriği */
.detail-center { text-align: center; margin-bottom: 22px; }
.detail-photo {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  overflow: hidden; border: 3px solid var(--violet);
  background: radial-gradient(circle at 30% 30%, #ffffff, #eef1e8);
}
.detail-photo.live { border-color: var(--green); }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-center h3 { font-family: var(--serif); font-size: 1.6rem; color: var(--text); margin-bottom: 6px; }
.detail-years { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.detail-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip {
  font-size: .74rem; padding: 4px 13px; border-radius: 20px;
  background: rgba(167, 139, 250, .12); color: var(--violet);
}
.chip.green { background: rgba(52, 211, 153, .12); color: var(--green); }
.chip.cyan { background: rgba(64, 145, 108, .12); color: var(--green); }
/* Üye detayı — canlı renkli rozetler */
.detail-chips .chip { font-size: .8rem; padding: 6px 15px; font-weight: 600; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.chip.c-role   { background: linear-gradient(135deg, #7c5cff, #5b3fd6); }
.chip.c-live   { background: linear-gradient(135deg, #2fbf71, #1f9d5b); }
.chip.c-legacy { background: linear-gradient(135deg, #d4af37, #b8860b); }
.chip.c-synth  { background: linear-gradient(135deg, #34c9c9, #1f9ba8); }
.chip.c-count  { background: linear-gradient(135deg, #f0872b, #d96b1e); }
.profile-hero .detail-years { font-size: 1rem; color: #5a6b5f; font-weight: 500; }
.detail-section { margin-bottom: 18px; }
.detail-section label {
  display: inline-flex; align-items: center; font-size: .68rem; letter-spacing: .1em; font-weight: 700;
  text-transform: uppercase; color: #1b6e4a; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(45,106,79,.12), rgba(64,145,108,.08));
  border-inline-start: 3px solid #2d6a4f; border-radius: 6px; padding: 5px 12px;
}
.detail-section p { color: var(--text); font-size: .92rem; line-height: 1.65; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.detail-actions .btn-photo { grid-column: 1 / -1; }
.btn-danger {
  background: none; border: 1px solid rgba(251, 113, 133, .5); color: #fb7185;
}
.btn-danger:hover { background: rgba(251, 113, 133, .1); }

/* Üye ekleme formu */
.member-form { display: flex; flex-direction: column; gap: 16px; }
.member-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); }
.member-form input, .member-form select, .member-form textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 11px 14px; font-family: var(--sans); font-size: .92rem;
}
.member-form input:focus, .member-form select:focus, .member-form textarea:focus { outline: none; border-color: var(--gold-dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-pick { display: flex; align-items: center; gap: 18px; }
.photo-preview {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  overflow: hidden; border: 2px dashed var(--gold-dim); background: var(--bg);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.btn-file { cursor: pointer; }

/* Ağaçtaki fotoğraflar */
.member-node image { clip-path: circle(21px at center); }

/* ---- Bilgelik Odası: kişi seçimi & mekân fonları ---- */
.persona-pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; text-align: start; }
.persona-pick span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.persona-pick select {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font-family: var(--sans); font-size: .9rem;
}
.avatar-kin { color: var(--muted); font-size: .82rem; margin-bottom: 6px; }
.chamber-avatar { transition: background .5s; }
.chamber-avatar.scene-sofra   { background: linear-gradient(180deg, #fdf3e3, #fff 65%); }
.chamber-avatar.scene-koyevi  { background: linear-gradient(180deg, #f0e8d8, #fff 65%); }
.chamber-avatar.scene-salon   { background: linear-gradient(180deg, #ece4ef, #fff 65%); }
.chamber-avatar.scene-bahce   { background: linear-gradient(180deg, #e2f2e0, #fff 65%); }
.chamber-avatar.scene-deniz   { background: linear-gradient(180deg, #dceff5, #fff 65%); }
.chamber-avatar.scene-calisma { background: linear-gradient(180deg, #efeadd, #fff 65%); }
.chamber-avatar.scene-atolye  { background: linear-gradient(180deg, #ede3d3, #fff 65%); }
.msg .msg-user { display: block; font-size: .68rem; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }

/* ---- Ağaç etiketleri ---- */
.member-node text.node-sub { fill: var(--muted); font-family: var(--sans); font-size: 9.5px; text-anchor: middle; stroke: #fbfdf9; stroke-width: 3px; paint-order: stroke; }
.member-node text.node-sub .status-live { fill: var(--green); }

/* ---- İzinler ---- */
.perm-set { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.perm-set legend { font-size: .78rem; color: var(--muted); padding: 0 8px; }
.perm-set .perm { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: .88rem !important; color: var(--text) !important; margin: 6px 0; }
.perm-set input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1b4332; }

/* ---- Giriş penceresi ---- */
.login-modal { width: min(420px, 100%); text-align: center; }
.login-logo { width: 90px; margin: 6px auto 14px; }
.login-modal h2 { font-family: var(--serif); color: var(--gold-bright); font-size: 1.6rem; margin-bottom: 8px; }
.login-sub { color: var(--muted); font-size: .88rem; margin-bottom: 20px; }
.login-modal .member-form { text-align: start; }

/* ---- Detay: medya listesi ---- */
.media-list { display: flex; flex-direction: column; gap: 8px; }
.media-item {
  display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.media-item a { color: var(--gold); text-decoration: underline; }
.detail-actions .btn-media { grid-column: 1 / -1; }

/* ===== Üye Detayı — gerçek sayfa (view), header/menü/footer yerinde ===== */
#memberModal { display: none !important; }
.chamber-profile-btn {
  display: inline-flex; align-items: center; margin-top: 10px; cursor: pointer;
  background: rgba(64,145,108,.1); border: 1px solid rgba(64,145,108,.35); color: var(--green);
  padding: 7px 14px; border-radius: 20px; font-family: var(--sans); font-size: .78rem; font-weight: 600; transition: .15s;
}
.chamber-profile-btn:hover { background: rgba(64,145,108,.18); }
.member-page-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 14px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(27,59,47,.07); position: sticky; top: 8px; z-index: 20;
}
.member-page-head::before {
  content: ""; width: 5px; height: 30px; border-radius: 4px;
  background: linear-gradient(180deg, #2d6a4f, #d4af37);
}
.member-page-head .back-link {
  margin: 0; padding: 8px 16px; border-radius: 20px; background: linear-gradient(135deg, #eef6f0, #e3f0e8);
  color: #1b6e4a; font-weight: 700; border: 1px solid rgba(45,106,79,.18);
}
.member-page-head .back-link:hover { text-decoration: none; background: linear-gradient(135deg, #e0f0e6, #d3e9dc); transform: translateX(-2px); }
.member-page-head .mp-title {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 700;
  background: linear-gradient(135deg, #1b4332, #b8860b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#view-member #memberModalBody {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 14px rgba(27,59,47,.06);
}
#view-member .profile-hero .detail-photo { width: 128px; height: 128px; }
#view-member .profile-cols { min-height: auto; }
#view-member .profile-info, #view-member .profile-media { overflow: visible; }
#view-member .profile-actions.top {
  position: static; padding: 16px 20px; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: none;
}

.profile-hero {
  position: relative; padding: 48px 40px 34px; text-align: center;
  background:
    radial-gradient(ellipse 50% 70% at 22% 0%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 78% 8%, rgba(45,106,79,.20), transparent 62%),
    linear-gradient(180deg, #eef6ef 0%, #f7f3e8 55%, #ffffff 100%);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,.6), transparent 45%);
  pointer-events: none;
}
.profile-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #2d6a4f, #40916c, #d4af37, #b8860b);
}
.profile-hero > * { position: relative; }
.profile-hero .detail-photo {
  width: 128px; height: 128px; font-size: 3rem; margin-bottom: 16px;
  border-width: 4px; box-shadow: 0 10px 30px rgba(27,59,47,.2);
}
.profile-hero h3 { font-family: var(--serif); font-size: 2.1rem; color: #1b4332; margin-bottom: 6px; }
.profile-hero .detail-years { font-size: .95rem; }
.profile-hero .detail-chips { margin-top: 14px; }

.profile-cols {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 0;
  flex: 1; min-height: 0;
}
.profile-info { padding: 30px 34px; overflow-y: auto; border-inline-end: 1px solid var(--line); background: #fff; }
.profile-media { padding: 30px 34px; overflow-y: auto; background: linear-gradient(180deg, #fbfcfa, #f6f8f4); }
.profile-media h4 {
  display: inline-flex; align-items: center; font-size: .72rem; letter-spacing: .08em; font-weight: 700;
  text-transform: uppercase; color: #8a6d1f; margin-bottom: 16px; font-family: var(--sans);
  background: rgba(201,162,75,.14); border-inline-start: 3px solid var(--gold); border-radius: 6px; padding: 6px 12px;
}

/* Medya önizleme galerisi */
.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.media-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s;
}
.media-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(27,59,47,.12); }
.media-thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: pointer;
  background: #eef1e8;
}
.media-card audio { width: 100%; margin-top: auto; }
.media-card video { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #000; display: block; }
.media-doc {
  aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 2.4rem; color: var(--gold-dim); text-decoration: none; background: #f1f4ec;
}
.media-doc span { font-size: .8rem; color: var(--gold); }
.media-cap {
  padding: 9px 12px; font-size: .76rem; color: var(--text); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.media-cap .ai-tag { color: var(--green); font-size: .68rem; white-space: nowrap; }
.media-cap a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-empty { color: var(--muted); font-size: .88rem; padding: 30px 0; text-align: center; border: 2px dashed var(--line); border-radius: 14px; }

/* Önizleme altı AI analiz açıklaması */
.media-analysis { border-top: 1px solid var(--line); }
.media-analysis summary {
  cursor: pointer; padding: 8px 12px; font-size: .74rem; color: var(--green);
  list-style: none; user-select: none;
}
.media-analysis summary::-webkit-details-marker { display: none; }
.media-analysis summary::before { content: "▸ "; }
.media-analysis[open] summary::before { content: "▾ "; }
.media-analysis > div {
  padding: 0 12px 12px; font-size: .78rem; color: var(--muted); line-height: 1.55;
  max-height: 200px; overflow-y: auto;
}
.reanalyze-btn {
  margin-top: 8px; display: inline-block; background: rgba(64,145,108,.1);
  border: 1px solid rgba(64,145,108,.35); color: var(--green);
  font-size: .74rem; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--sans);
}
.reanalyze-btn:hover { background: rgba(64,145,108,.18); }
.reanalyze-btn:disabled { opacity: .6; cursor: default; }
.reanalyze-btn.solo { margin: 0 12px 12px; }
.reanalyze-btn.media-del-btn { background: #fff; border-color: #f0c2bc; color: #c0392b; margin: 0 12px 12px; }
.reanalyze-btn.media-del-btn:hover { background: #fdecec; border-color: #e0483d; }
.reanalyze-btn.colorize-btn { background: linear-gradient(135deg, rgba(236,111,168,.14), rgba(139,92,246,.12)); border-color: rgba(207,63,140,.4); color: #b83b7f; margin: 6px 12px 8px; }
.reanalyze-btn.colorize-btn:hover { background: linear-gradient(135deg, rgba(236,111,168,.22), rgba(139,92,246,.18)); }
.pers-report { background: linear-gradient(135deg, rgba(45,106,79,.06), rgba(64,145,108,.04)); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .88rem; line-height: 1.65; color: var(--text); max-height: 340px; overflow-y: auto; }

/* Sohbette görsel/video anı balonu */
.chat-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 4px; }
.chat-media-thumb {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); transition: transform .15s;
}
.chat-media-thumb:hover { transform: scale(1.03); }
.chat-media-vid { width: 100%; border-radius: 10px; background: #000; }

.profile-actions-inner { display: flex; gap: 9px; flex-wrap: wrap; }
.pa-btn {
  --c1: #2d6a4f; --c2: #1b4332; --sh: rgba(27,59,47,.28);
  flex: 1 1 auto; min-width: 116px; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; font-family: var(--sans);
  font-size: .84rem; font-weight: 600; letter-spacing: .01em; border: 0; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 4px 12px var(--sh), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .2s, filter .2s;
  white-space: nowrap;
}
.pa-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
.pa-btn .pa-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 9px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.pa-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--sh), inset 0 1px 0 rgba(255,255,255,.25); filter: saturate(1.05); }
.pa-btn:active { transform: translateY(-1px); }
.pa-btn.photo  { --c1: #4c93f0; --c2: #2f66c9; --sh: rgba(47,102,201,.32); }
.pa-btn.media  { --c1: #a877f5; --c2: #7c4fdb; --sh: rgba(124,79,219,.32); }
.pa-btn.memory { --c1: #e6a53c; --c2: #c67f22; --sh: rgba(198,127,34,.32); }
.pa-btn.edit   { --c1: #34c48b; --c2: #0f9d6b; --sh: rgba(15,157,107,.32); }
.pa-btn.brain  { --c1: #ee6fa8; --c2: #cf3f8c; --sh: rgba(207,63,140,.32); }
.pa-btn.voice  { --c1: #f0a24b; --c2: #d97a1e; --sh: rgba(217,122,30,.32); }
.pa-btn.death  { --c1: #8a94a6; --c2: #5b6472; --sh: rgba(91,100,114,.3); }
.pa-btn.chat   { --c1: #2f7d54; --c2: #17402f; --sh: rgba(23,64,47,.36); flex: 1.5 1 auto; }
.pa-btn.danger {
  background: #fff; color: #c0392b; border: 1.5px solid #f0c2bc; box-shadow: 0 4px 12px rgba(192,57,43,.12);
  flex: 0 1 auto; min-width: 96px;
}
.pa-btn.danger .pa-ic { background: rgba(192,57,43,.1); box-shadow: none; }
.pa-btn.danger:hover { background: #fdecec; box-shadow: 0 8px 18px rgba(192,57,43,.18); }

/* Görsel büyütme (lightbox) */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(6,12,9,.86);
  display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

@media (max-width: 820px) {
  #memberModal .modal { height: 96vh; }
  .profile-cols { grid-template-columns: 1fr; overflow-y: auto; }
  .profile-info { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

/* ---- Sohbetler (WhatsApp benzeri) ---- */
.side-badge {
  margin-inline-start: auto; background: #25d366; color: #fff;
  font-size: .68rem; font-weight: 700; min-width: 19px; height: 19px;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.dm-layout {
  display: grid; grid-template-columns: 290px 1fr; gap: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; height: calc(100vh - 250px); min-height: 480px;
}
.dm-side { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--line); background: #fff; }
.dm-search-wrap {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: 1px solid var(--line); color: var(--muted); background: #fbfaf6;
}
.dm-search-wrap svg { flex-shrink: 0; }
.dm-search-wrap input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--sans); font-size: .86rem; color: var(--text); }
.dm-list { flex: 1; overflow-y: auto; background: #fff; }
.dm-empty-note { padding: 18px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.dm-tag { font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.dm-tag.friend { background: rgba(201,162,75,.18); color: #8a6d1f; }
.dm-tag.fam { background: rgba(45,106,79,.14); color: #1b6e4a; }
.dm-p-avatar .uav { width: 100%; height: 100%; font-size: .9rem; }
.dm-head-avatar .uav { width: 100%; height: 100%; font-size: .85rem; }
.dm-person {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; border-bottom: 1px solid rgba(27, 59, 47, .06);
  transition: background .15s;
}
.dm-person:hover { background: rgba(27, 59, 47, .04); }
.dm-person.active { background: rgba(64, 145, 108, .1); }
.dm-p-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, #2d6a4f, #1b4332); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
}
.dm-p-avatar .online-dot {
  position: absolute; bottom: 0; inset-inline-end: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #25d366; border: 2px solid #fff;
}
.dm-p-avatar .online-dot.off { background: #b8c4bc; }
.dm-p-info { flex: 1; min-width: 0; }
.dm-p-info strong { display: block; font-size: .92rem; color: var(--text); }
.dm-p-info small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dm-p-info small.dm-online, .dm-head-info small.dm-online { color: #2d9d5f; font-weight: 600; }
.dm-p-badge { background: #25d366; color: #fff; font-size: .68rem; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

.dm-chat { display: flex; flex-direction: column; position: relative; background: #eee8dd; min-height: 0; min-width: 0; overflow: hidden; }
.dm-active[hidden], .dm-empty[hidden] { display: none !important; }

/* Bilgelik Odası sesli cevap aç/kapa */
.reality-anchor { position: relative; }
.voice-toggle {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: .76rem; font-weight: 600;
  font-family: var(--sans); transition: .15s;
}
.voice-toggle.on { border-color: var(--green); color: var(--green); background: rgba(64,145,108,.08); }
.voice-toggle.off { opacity: .6; }
.voice-toggle:hover { border-color: var(--green); }

/* Bilgelik Odası sesli konuşma butonu */
.chat-mic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--green);
  display: inline-flex; align-items: center; justify-content: center; transition: .15s;
}
.chat-mic:hover { border-color: var(--green); background: rgba(64,145,108,.08); }
.chat-mic.recording { background: #e0483d; border-color: #e0483d; color: #fff; animation: micPulse 1.1s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,72,61,.5); } 50% { box-shadow: 0 0 0 8px rgba(224,72,61,0); } }
.dm-empty { margin: auto; color: var(--muted); font-size: .95rem; }
.dm-active { display: flex; flex-direction: column; height: 100%; }
.dm-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.dm-head-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #2d6a4f, #1b4332); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.dm-head-info strong { display: block; font-size: .95rem; color: var(--text); }
.dm-head-info small { color: var(--green); font-size: .75rem; }
.dm-head-info small.off { color: var(--muted); }
.dm-head-info small.typing { color: #25d366; font-style: italic; }

.dm-scroll {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 6px;
  background-color: #e6ddd0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%231b3b2f' stroke-opacity='0.05' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 24c4-6 10-6 14 0'/%3E%3Ccircle cx='104' cy='30' r='9'/%3E%3Cpath d='M96 64h16M96 70h10'/%3E%3Cpath d='M30 92l6 6 12-12'/%3E%3Cpath d='M108 104c-5 0-9 4-9 9s4 9 9 9 9-4 9-9'/%3E%3Cpath d='M58 118c3-5 9-5 12 0'/%3E%3Cpath d='M18 58a7 7 0 1 0 14 0'/%3E%3C/g%3E%3C/svg%3E");
}
.dm-msg {
  max-width: 68%; padding: 8px 12px; border-radius: 10px; font-size: .92rem;
  line-height: 1.5; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  word-wrap: break-word;
}
.dm-msg.mine { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.dm-msg.theirs { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.dm-meta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .66rem; color: #7a8c80; margin-inline-start: 8px;
  float: inline-end; margin-top: 8px;
}
.tick { font-size: .78rem; letter-spacing: -2px; color: #9aada0; }
.tick.read { color: #21b558; font-weight: 700; }  /* okundu: çift YEŞİL tik */

.dm-input {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; background: #f6f3ec; border-top: 1px solid var(--line);
}
.dm-input input {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 11px 18px; font-family: var(--sans); font-size: .94rem; color: var(--text);
}
.dm-input input:focus { outline: none; border-color: var(--green); }
.dm-input .btn { border-radius: 50%; width: 44px; height: 44px; padding: 0; font-size: 1.05rem; }
.dm-emoji-btn { background: none; border: 0; font-size: 1.4rem; cursor: pointer; padding: 4px; }

.emoji-panel[hidden] { display: none; }
.emoji-panel {
  position: absolute; bottom: 68px; inset-inline-start: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px; z-index: 30;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  max-height: 220px; overflow-y: auto; width: 300px;
}
.emoji-panel button {
  background: none; border: 0; font-size: 1.3rem; cursor: pointer;
  padding: 4px; border-radius: 8px;
}
.emoji-panel button:hover { background: rgba(27, 59, 47, .07); }

/* ---- Mnemos kodu paneli ---- */
.code-panel {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 20px;
}
.code-panel label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.code-row code {
  background: rgba(64, 145, 108, .1); border: 1px dashed var(--green);
  color: var(--gold-bright); font-weight: 700; letter-spacing: .1em;
  padding: 9px 16px; border-radius: 10px; font-size: 1rem;
}
.code-row input, .code-row select {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-family: var(--sans); font-size: .88rem; color: var(--text);
}
.code-row input { text-transform: uppercase; width: 140px; }
.btn-sm { padding: 9px 16px; font-size: .82rem; }
.code-panel small { display: block; color: var(--muted); font-size: .76rem; margin-top: 8px; }

/* Vefat bildirimi & onay */
.death-notice-info {
  background: rgba(180, 83, 9, .08); border: 1px solid rgba(180, 83, 9, .3);
  border-radius: 12px; padding: 13px 16px; font-size: .82rem; color: #92500c;
  margin-bottom: 18px; line-height: 1.6;
}
.death-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(180, 83, 9, .08), var(--panel));
  border: 1px solid rgba(180, 83, 9, .35); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 14px;
}
.death-card p { flex: 1; font-size: .88rem; color: var(--text); min-width: 220px; }
.death-card .appr { font-size: .76rem; color: var(--muted); }
.death-card .btn { padding: 8px 16px; font-size: .82rem; }
.locked-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-top: 6px;
}

/* Gelen istek kartı */
.request-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(64, 145, 108, .1), var(--panel));
  border: 1px solid var(--green); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 18px;
}
.request-card p { flex: 1; font-size: .9rem; color: var(--text); min-width: 200px; }
.request-card .btn { padding: 8px 18px; font-size: .82rem; }
.request-pending { color: var(--muted); font-size: .82rem; margin-bottom: 14px; }

@media (max-width: 900px) {
  .dm-layout { grid-template-columns: 1fr; height: auto; }
  .dm-list { max-height: 200px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .code-panel { grid-template-columns: 1fr; }
}

/* ===== Profesyonel rafine geçişi ===== */
.view-head h1 { letter-spacing: -.01em; }
.view-head { animation: none; }

/* Üst bar: daha ferah ve modern */
.app-topbar { box-shadow: 0 1px 0 rgba(27,59,47,.05); }
.status-pill { background: rgba(255,255,255,.6); font-weight: 500; }
.status-pill.secure { background: rgba(64,145,108,.08); }
.user-avatar { box-shadow: 0 2px 8px rgba(27,59,47,.18); }

/* Üye kartları: yumuşak yükselti, foto halkası */
.member-tile { border-radius: 18px; box-shadow: 0 2px 10px rgba(27,59,47,.05); }
.member-tile:hover { box-shadow: 0 14px 34px rgba(27,59,47,.14); }
.tile-photo { box-shadow: 0 3px 10px rgba(27,59,47,.14); border-width: 2.5px; }
.family-group-title {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  letter-spacing: .06em; text-transform: none; font-weight: 700; font-size: .82rem;
}
.family-group-title::before, .family-group-title::after {
  content: ""; flex: 0 0 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.family-group-title::after { transform: scaleX(-1); }
.family-group-title span, .family-group-title { color: var(--green); }
.family-group-title .fg-pill {
  display: inline-block; padding: 7px 18px; border-radius: 30px; color: #fff;
  background: linear-gradient(135deg, #2d6a4f, #1b4332); box-shadow: 0 6px 16px rgba(27,59,47,.2);
  letter-spacing: .04em;
}
.tile-code {
  display: inline-block; margin-top: 10px; font-family: monospace; font-size: .66rem;
  color: #5b7a67; background: rgba(27,59,47,.07); padding: 2px 8px; border-radius: 6px; letter-spacing: .03em;
}
.tile-code.muted { color: #aab6ad; background: rgba(0,0,0,.03); }

/* Kartlarda tutarlı yumuşak gölge */
.vault-item, .sec-card, .genesis-block, .family-row, .quote-card, .code-panel { box-shadow: 0 2px 10px rgba(27,59,47,.05); }

/* Bilgelik Odası kartı ve sohbet balonları */
.chamber-avatar { border-radius: 20px; box-shadow: 0 6px 24px rgba(27,59,47,.07); }
.chamber-chat { border-radius: 20px; box-shadow: 0 6px 24px rgba(27,59,47,.06); }
.msg { box-shadow: 0 1px 4px rgba(27,59,47,.05); }

/* Butonlarda ince odak halkası (erişilebilirlik) */
.btn:focus-visible, .side-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Kaydırma çubuğu inceltme */
.app-main::-webkit-scrollbar, .dm-scroll::-webkit-scrollbar, .chat-scroll::-webkit-scrollbar,
.profile-info::-webkit-scrollbar, .profile-media::-webkit-scrollbar { width: 9px; }
.app-main::-webkit-scrollbar-thumb, .dm-scroll::-webkit-scrollbar-thumb, .chat-scroll::-webkit-scrollbar-thumb,
.profile-info::-webkit-scrollbar-thumb, .profile-media::-webkit-scrollbar-thumb {
  background: rgba(27,59,47,.18); border-radius: 6px;
}
.app-main::-webkit-scrollbar-thumb:hover { background: rgba(27,59,47,.3); }

/* ===== Anı: katılımcılar (aile havuzu) & özel ===== */
.subjects-block { display: flex; flex-direction: column; gap: 8px; }
.subjects-label { font-size: .82rem; color: var(--muted); }
.subjects-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.upload-form label.subject-chip {
  position: relative;
  display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 40px;
  padding: 5px 16px 5px 5px; font-size: .86rem; color: var(--text); cursor: pointer;
  white-space: nowrap; line-height: 1;
  transition: transform .15s, box-shadow .2s, border-color .2s, background .2s;
}
.subject-chip:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(27,59,47,.09); }
.subject-chip input { position: absolute; opacity: 0; pointer-events: none; }
.subject-chip .subj-av { width: 30px; height: 30px; font-size: .72rem; flex-shrink: 0; }
.subject-chip .subj-check {
  width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; margin-left: 2px;
}
.subject-chip:has(input:checked) {
  background: linear-gradient(135deg, rgba(45,106,79,.14), rgba(64,145,108,.1));
  border-color: var(--green); color: #1b4332; font-weight: 600;
}
.subject-chip:has(input:checked) .subj-check { display: inline-flex; }
.subject-chip:has(input:checked) .subj-av { box-shadow: 0 0 0 2px var(--green); }
.btn-seal { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-seal svg { flex-shrink: 0; }
.upload-form label.private-toggle {
  display: flex; flex-direction: row; align-items: center; gap: 11px;
  background: #fff7ed; border: 1.5px solid #fbcfa0; border-radius: 12px;
  padding: 12px 15px; font-size: .88rem; color: #92400e; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.private-toggle:hover { border-color: #f59e0b; }
.private-toggle:has(input:checked) { background: #fef3c7; border-color: #f59e0b; }
.private-toggle input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #ea8f1e; cursor: pointer; margin: 0; }
.mem-subjects-tag { font-size: .72rem; color: var(--green); }

/* ===== Giriş / Kayıt (auth) ===== */
.auth-role-tabs { margin-bottom: 16px; }
.auth-sub { margin-bottom: 14px; background: transparent; padding: 0; gap: 18px; }
.auth-sub .setup-tab { flex: none; background: none; box-shadow: none; padding: 6px 2px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--muted); }
.auth-sub .setup-tab.active { background: none; color: var(--gold-bright); border-bottom-color: var(--green); box-shadow: none; }
.auth-pane[hidden] { display: none; }
.auth-form[hidden] { display: none; }
.auth-form { text-align: start; }
.admin-login-note {
  background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.3); color: #92500c;
  border-radius: 12px; padding: 12px 14px; font-size: .82rem; margin-bottom: 16px; text-align: start;
}

/* ===== Profil menüsü (üst sağ) ===== */
.user-menu-wrap { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: 0; font-family: var(--sans); padding: 4px 8px; border-radius: 30px; transition: background .15s;
}
.user-chip:hover { background: rgba(27,59,47,.06); }
.user-caret { color: var(--muted); }
.user-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(27,59,47,.18); padding: 16px; z-index: 60; animation: viewIn .18s ease;
}
.user-menu[hidden] { display: none; }
.um-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.um-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#2d6a4f,#1b4332); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.um-head strong { display: block; color: var(--text); font-size: 1rem; }
.um-role { font-size: .72rem; color: #fff; background: linear-gradient(135deg,#b45309,#92400e); padding: 2px 9px; border-radius: 20px; }
.um-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.um-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--muted); }
.um-row code { background: rgba(64,145,108,.1); color: var(--gold-bright); padding: 3px 10px; border-radius: 8px; font-size: .78rem; letter-spacing: .04em; }
.um-row b { color: var(--text); }
.um-field { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--muted); }
.um-field input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-family: var(--sans); font-size: .88rem; color: var(--text); }
.um-field input:focus { outline: none; border-color: var(--green); }
.um-actions { display: flex; gap: 8px; }
.um-actions .btn { flex: 1; }

/* Anı kodu rozeti (kasada) */
.vault-code {
  font-family: monospace; font-size: .66rem; color: #5b7a67;
  background: rgba(27,59,47,.07); padding: 3px 9px; border-radius: 6px; letter-spacing: .04em;
}

/* ===== Durum rozetleri ===== */
.st-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.st-on { background: rgba(37,211,102,.14); color: #059669; }
.st-off { background: rgba(148,163,184,.16); color: #64748b; }
.st-alive { background: rgba(64,145,108,.14); color: #059669; }
.st-memorial { background: rgba(176,138,60,.16); color: #b0803a; }
.st-banned { background: rgba(185,28,28,.12); color: #b91c1c; font-size: .68rem; }
.row-banned { background: rgba(185,28,28,.03); }
.admin-table td .muted { font-size: .82rem; }

/* ===== Kopyalanabilir kodlar ===== */
.copyable { cursor: pointer; position: relative; transition: background .15s, color .15s; user-select: all; }
.copyable::after {
  content: "⧉"; margin-inline-start: 5px; font-size: .8em; opacity: 0; transition: opacity .15s;
}
.copyable:hover { background: rgba(64,145,108,.22); color: var(--gold-bright); }
.copyable:hover::after { opacity: .7; }

/* ===== Onay penceresi ===== */
.confirm-modal { width: min(430px, 100%); border-radius: 22px; overflow: hidden; padding: 0; animation: confPop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes confPop { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.confirm-body { text-align: center; padding: 30px 28px 24px; position: relative; }
.confirm-body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201,162,75,.16), transparent 70%); pointer-events: none; }
.confirm-icon {
  position: relative; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
  background: linear-gradient(140deg, #fff, #f3f7f2); border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(27,59,47,.14), inset 0 1px 0 #fff;
}
.confirm-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid rgba(201,162,75,.25); }
.confirm-body h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--gold-bright); margin-bottom: 10px; }
.confirm-body p { color: var(--muted); line-height: 1.65; margin-bottom: 24px; font-size: .92rem; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-actions .btn { flex: 1; padding: 13px; border-radius: 13px; font-weight: 700; transition: transform .12s, box-shadow .2s, filter .2s; }
.confirm-actions .btn:hover { transform: translateY(-2px); }
.confirm-actions #confirmOk { background: linear-gradient(135deg, #e05a4a, #c0392b); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(192,57,43,.3); }
.confirm-actions #confirmOk:hover { box-shadow: 0 12px 24px rgba(192,57,43,.4); filter: brightness(1.05); }
.confirm-actions #confirmCancel { background: #fff; border: 1.5px solid var(--line); color: var(--muted); }
.confirm-actions #confirmCancel:hover { border-color: var(--green); color: var(--green); }

/* ===== Ban & Uyarı ===== */
.ban-banner { background: rgba(185,28,28,.08); border: 1px solid rgba(185,28,28,.35); color: #b91c1c; border-radius: 12px; padding: 12px 16px; font-size: .88rem; margin-bottom: 16px; }
.ban-banner b { font-weight: 700; }
.ban-banner small { color: #94a3b8; }
.ban-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ban-form input[type="text"] { flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--sans); font-size: .9rem; color: var(--text); }
.ban-form select, .ban-form input[type="date"] { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--sans); font-size: .9rem; color: var(--text); }
.warn-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.warn-item { display: flex; justify-content: space-between; gap: 10px; background: rgba(217,119,6,.06); border: 1px solid rgba(217,119,6,.25); border-radius: 10px; padding: 9px 13px; font-size: .85rem; color: var(--text); flex-wrap: wrap; }
.warn-item small { color: var(--muted); }

/* Kullanıcı ekranı uyarı çubuğu */
.warning-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.warn-notice { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #f59e0b; border-radius: 14px; padding: 14px 18px; box-shadow: 0 4px 14px rgba(245,158,11,.18); }
.wn-ic { font-size: 1.6rem; }
.wn-body { flex: 1; }
.wn-body b { color: #92400e; font-size: .95rem; }
.wn-body p { color: #78350f; font-size: .92rem; margin: 2px 0 4px; font-weight: 500; }
.wn-body small { color: #b45309; font-size: .76rem; }
.wn-close { background: #92400e; color: #fff; border: 0; border-radius: 10px; padding: 8px 16px; cursor: pointer; font-family: var(--sans); font-size: .84rem; white-space: nowrap; }
.wn-close:hover { background: #78350f; }

/* ===== Canlı renkli yönetim ===== */
.admin-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.admin-stat { position: relative; overflow: hidden; border: 0; color: #fff; }
.admin-stat b, .admin-stat span { color: #fff; position: relative; z-index: 1; }
.admin-stat .as-ic { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.admin-stat.c-cyan   { background: linear-gradient(140deg, #22d3ee, #0891b2); }
.admin-stat.c-violet { background: linear-gradient(140deg, #a78bfa, #7c3aed); }
.admin-stat.c-green  { background: linear-gradient(140deg, #34d399, #059669); }
.admin-stat.c-amber  { background: linear-gradient(140deg, #fbbf24, #d97706); }
.admin-stat.c-pink   { background: linear-gradient(140deg, #f472b6, #db2777); }
.admin-stat.c-blue   { background: linear-gradient(140deg, #60a5fa, #2563eb); }
.admin-stat.c-orange { background: linear-gradient(140deg, #fb923c, #ea580c); }
.admin-stat.c-red    { background: linear-gradient(140deg, #fb7185, #e11d48); }
.admin-stat.c-teal   { background: linear-gradient(140deg, #2dd4bf, #0d9488); }
.admin-stat b { font-size: 1.9rem; }

.fam-no { font-family: monospace; font-weight: 700; color: var(--gold); }
.table-more { color: var(--muted); font-size: .84rem; margin-top: 12px; }

/* Aile detay sayfası */
.back-link { background: none; border: 0; color: var(--green); font-size: .9rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 14px; font-family: var(--sans); }
.back-link:hover { text-decoration: underline; }
.fam-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.fdh-icon { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(140deg, #34d399, #1b4332); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(27,59,47,.2); }
.fam-detail-head h1 { font-size: 1.7rem; color: var(--gold-bright); }
.fam-detail-head p { color: var(--muted); font-size: .88rem; }
.fam-detail-head p code { background: rgba(27,59,47,.06); padding: 2px 8px; border-radius: 6px; color: var(--gold-bright); }
.fam-detail-head .btn { margin-inline-start: auto; }
.fam-no-badge { font-size: .9rem; font-family: monospace; color: var(--gold); background: rgba(64,145,108,.12); padding: 2px 10px; border-radius: 20px; vertical-align: middle; }
.fam-detail-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.fd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(27,59,47,.05); }
.fd-card span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.fd-card b { font-size: 1.3rem; color: var(--gold-bright); }
.fd-card small { display: block; color: var(--muted); font-size: .76rem; }

/* Canlı kenar menü ikonları */
.nav-admin .side-item:nth-child(2) .side-icon { color: #22d3ee; }
.nav-admin .side-item:nth-child(3) .side-icon { color: #a78bfa; }
.nav-admin .side-item:nth-child(4) .side-icon { color: #34d399; }
.nav-admin .side-item:nth-child(5) .side-icon { color: #fb923c; }
.nav-admin .side-item:nth-child(6) .side-icon { color: #f472b6; }
.nav-admin .side-item:nth-child(7) .side-icon { color: #2563eb; }
.nav-admin .side-item:nth-child(8) .side-icon { color: #14b8a6; }
.nav-admin .side-item .side-icon { opacity: 1; }
.nav-user .side-item:nth-child(1) .side-icon { color: #2d6a4f; }
.nav-user .side-item:nth-child(2) .side-icon { color: #a78bfa; }
.nav-user .side-item:nth-child(3) .side-icon { color: #22d3ee; }
.nav-user .side-item:nth-child(4) .side-icon { color: #fb923c; }
.nav-user .side-item:nth-child(5) .side-icon { color: #d97706; }
.nav-user .side-item:nth-child(6) .side-icon { color: #2563eb; }
.nav-user .side-item:nth-child(7) .side-icon { color: #34d399; }
.nav-user .side-item .side-icon, .nav-admin .side-item .side-icon { opacity: .92; }
.app-brand { background: none; border: 0; cursor: pointer; border-radius: 12px; padding: 4px 8px; transition: background .15s, transform .12s; }
.app-brand:hover { background: rgba(45,106,79,.08); transform: translateY(-1px); }
.app-brand:active { transform: translateY(0); }

/* ===== Ayrı yönetim paneli ===== */
.nav-group[hidden] { display: none; }
.nav-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 14px 8px; }
body.is-admin .app-topbar { border-bottom-color: rgba(180,83,9,.25); }
.um-help {
  width: 100%; text-align: center; background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.25);
  color: #92500c; border-radius: 10px; padding: 10px; font-size: .84rem; cursor: pointer; margin-bottom: 12px; font-family: var(--sans);
}
.um-help:hover { background: rgba(180,83,9,.14); }

.admin-search {
  width: 100%; max-width: 360px; margin-bottom: 16px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 12px; font-family: var(--sans); font-size: .9rem; background: #fff; color: var(--text);
}
.admin-search:focus { outline: none; border-color: var(--green); }

.admin-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(27,59,47,.05); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.admin-table th { text-align: start; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.admin-table td { padding: 13px 16px; border-bottom: 1px solid rgba(27,59,47,.05); color: var(--text); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.clickable { cursor: pointer; transition: background .12s; }
.admin-table tr.clickable:hover { background: rgba(64,145,108,.06); }
.admin-table code { background: rgba(27,59,47,.06); padding: 2px 8px; border-radius: 6px; font-size: .74rem; color: var(--gold-bright); }
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25d366; margin-inline-end: 6px; }
.mini-btn { background: rgba(64,145,108,.1); border: 1px solid rgba(64,145,108,.3); color: var(--green); font-size: .76rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.mini-btn:hover { background: rgba(64,145,108,.2); }
.mini-btn.danger { background: rgba(229,72,77,.08); border-color: rgba(229,72,77,.3); color: #e5484d; }
.mini-btn.danger:hover { background: rgba(229,72,77,.16); }
.admin-family.clickable { cursor: pointer; }
.admin-family.clickable:hover { border-color: var(--green); }

/* Şikayet & rapor — canlı, belirgin */
.report-filter { display: flex; gap: 8px; margin-bottom: 18px; }
.report-summary { display: grid; grid-template-columns: repeat(3, minmax(0,180px)); gap: 12px; margin-bottom: 20px; }
.rs-box { border-radius: 14px; padding: 14px 18px; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.rs-box b { display: block; font-size: 1.7rem; font-weight: 800; }
.rs-box span { font-size: .82rem; opacity: .95; }
.rs-box.open { background: linear-gradient(140deg, #fb923c, #ea580c); }
.rs-box.done { background: linear-gradient(140deg, #34d399, #059669); }
.rs-box.total { background: linear-gradient(140deg, #60a5fa, #2563eb); }

.report-card { display: flex; align-items: stretch; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(27,59,47,.07); transition: transform .12s, box-shadow .12s; }
.report-card.clickable { cursor: pointer; }
.report-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,59,47,.14); }
.report-card.open { border-inline-start: 5px solid #ea580c; }
.report-card.resolved { border-inline-start: 5px solid var(--green); }
.rc-num { font-family: monospace; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(140deg,#fb923c,#ea580c); border-radius: 12px; min-width: 54px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.report-card.resolved .rc-num { background: linear-gradient(140deg,#34d399,#059669); }
.rc-main { flex: 1; min-width: 0; }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-head strong { color: var(--text); font-size: 1.08rem; font-weight: 700; }
.rc-status { font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding: 3px 11px; border-radius: 20px; }
.rc-status.open { background: rgba(234,88,12,.14); color: #ea580c; }
.rc-status.resolved { background: rgba(64,145,108,.15); color: var(--green); }
.rc-msg { color: #3a4a40; font-size: .95rem; font-weight: 500; line-height: 1.55; margin-bottom: 10px; white-space: pre-wrap; }
.rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.rc-foot b { color: var(--text); }
.rc-resolved { color: var(--green); font-weight: 600; }
.rc-arrow { align-self: center; color: var(--gold-dim); font-size: 1.3rem; }

/* Rapor detay sayfası */
.rd-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rd-num { font-family: monospace; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(140deg,#fb923c,#ea580c); border-radius: 14px; padding: 12px 18px; }
.rd-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-title h1 { font-size: 1.7rem; color: var(--gold-bright); }
.rd-from { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.rd-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#2d6a4f,#1b4332); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rd-from b { display: block; color: var(--text); font-size: 1rem; }
.rd-from small { display: block; color: var(--muted); font-size: .8rem; }
.rd-message { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; font-size: 1.05rem; font-weight: 500; color: #2a3a30; line-height: 1.7; white-space: pre-wrap; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(27,59,47,.05); }
.rd-reply, .rd-answer { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.rd-reply h4, .rd-answer h4 { font-size: 1rem; color: var(--gold-bright); margin-bottom: 12px; }
.rd-reply textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: var(--sans); font-size: .95rem; color: var(--text); margin-bottom: 12px; resize: vertical; }
.rd-reply textarea:focus { outline: none; border-color: var(--green); }
.rd-answer { border-inline-start: 4px solid var(--green); background: rgba(64,145,108,.05); }
.rd-answer-meta { font-size: .86rem; color: var(--muted); margin-bottom: 10px; }
.rd-answer-text { font-size: 1rem; color: var(--text); line-height: 1.65; white-space: pre-wrap; }

/* Detay pencereleri */
.ad-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ad-meta label { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ad-meta b { color: var(--text); }
.ad-meta .muted { display: block; font-size: .78rem; color: var(--muted); }
.ad-meta code { background: rgba(27,59,47,.06); padding: 2px 8px; border-radius: 6px; font-size: .78rem; color: var(--gold-bright); }
.ad-sub { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.ad-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(27,59,47,.05); font-size: .88rem; }
.ad-row small { color: var(--muted); }
.ad-actions { margin-top: 22px; display: flex; gap: 10px; }
.role-manage { display: flex; gap: 10px; align-items: center; }
.role-manage select { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--sans); font-size: .9rem; color: var(--text); }
.muted { color: var(--muted); }

/* Sistem bilgisi */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.info-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(27,59,47,.05); }
.info-card h4 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; font-family: var(--sans); }
.info-card p { color: var(--text); font-size: .92rem; margin-bottom: 3px; }
.info-card p.muted { color: var(--muted); font-size: .82rem; }

/* ===== Süper Admin Yönetim Paneli ===== */
.side-admin { margin-top: 6px; border: 1px dashed rgba(27,59,47,.2); }
.admin-tag {
  margin-inline-start: auto; font-size: .56rem; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(135deg, #b45309, #92400e); color: #fff;
  padding: 2px 7px; border-radius: 20px;
}
.admin-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 34px; }
.admin-stat {
  background: linear-gradient(160deg, #fff, #f4f7ef); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 14px; text-align: center;
  box-shadow: 0 4px 14px rgba(27,59,47,.06);
}
.admin-stat .as-ic { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.admin-stat b { font-size: 1.7rem; color: var(--gold-bright); display: block; font-family: var(--serif); }
.admin-stat span { font-size: .78rem; color: var(--muted); }
.admin-family {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(27,59,47,.05);
}
.af-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.af-head strong { font-size: 1.15rem; color: var(--gold-bright); }
.af-owner { font-size: .78rem; color: var(--muted); margin-inline-start: 8px; }
.af-counts { font-size: .8rem; color: var(--green); font-weight: 600; }
.af-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.af-col h5 { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.af-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(27,59,47,.05); font-size: .86rem; color: var(--text); }
.af-role { font-size: .68rem; padding: 2px 9px; border-radius: 20px; background: var(--panel-2); color: var(--muted); text-transform: capitalize; }
.af-role.superadmin { background: linear-gradient(135deg,#b45309,#92400e); color: #fff; }
.af-role.owner { background: rgba(64,145,108,.15); color: var(--green); }
.af-meta { font-size: .74rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } .af-body { grid-template-columns: 1fr; } }

/* ===== Medya kategori filtresi & rozet ===== */
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-chip {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: 30px; cursor: pointer;
  font-family: var(--sans); transition: .18s; text-transform: capitalize;
}
.cat-chip:hover { border-color: var(--green); color: var(--green); }
.cat-chip.active { background: linear-gradient(135deg, #2d6a4f, #1b4332); color: #fff; border-color: transparent; }
.media-cat {
  font-size: .68rem; color: var(--gold); background: rgba(27,59,47,.07);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap; text-transform: capitalize;
}
.media-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.media-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-rename { background: none; border: 0; cursor: pointer; font-size: .78rem; padding: 0 2px; opacity: .6; }
.media-rename:hover { opacity: 1; }
.media-code-line { padding: 0 12px 8px; font-family: monospace; font-size: .64rem; color: var(--gold-dim); letter-spacing: .04em; }

/* Medya yükleme penceresi */
.media-drop {
  border: 2px dashed var(--gold-dim); border-radius: 14px; padding: 24px;
  text-align: center; color: var(--muted); font-size: .9rem; cursor: pointer;
  transition: .2s; background: var(--panel-2);
}
.media-drop:hover { border-color: var(--green); background: rgba(64,145,108,.05); color: var(--green); }

/* ===== Aile kurulum sekmeleri ===== */
.setup-tabs { display: flex; gap: 8px; background: var(--panel-2); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.setup-tab {
  flex: 1; background: none; border: 0; padding: 10px; border-radius: 9px; cursor: pointer;
  font-family: var(--sans); font-size: .88rem; font-weight: 600; color: var(--muted); transition: .2s;
}
.setup-tab.active { background: #fff; color: var(--gold-bright); box-shadow: 0 2px 8px rgba(27,59,47,.1); }
.setup-pane[hidden] { display: none; }

/* ===== Tam ekran + modern düzenleme formu ===== */
#addModal { padding: 0; }
#addModal .modal {
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; border: 0;
}
#addModal .modal-head {
  max-width: 1000px; margin: 0 auto; width: 100%;
}
#addModal .modal-body { max-width: 1000px; margin: 0 auto; width: 100%; }
#addModal .member-form { padding-bottom: 40px; }

/* Detaylı yaşam bilgileri bloğu */
.rich-fields {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  background: linear-gradient(180deg, #f7faf4, #fff);
}
.rich-head { margin-bottom: 14px; }
.rich-title { font-weight: 700; color: var(--gold-bright); font-size: 1rem; display: block; }
.rich-hint { font-size: .8rem; color: var(--muted); }
.quick-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.quick-adds button {
  background: rgba(64,145,108,.09); border: 1px solid rgba(64,145,108,.3); color: var(--green);
  font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 30px; cursor: pointer;
  font-family: var(--sans); transition: .18s;
}
.quick-adds button:hover { background: rgba(64,145,108,.18); transform: translateY(-1px); }
.custom-fields { display: flex; flex-direction: column; gap: 10px; }
.custom-field-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 10px; align-items: center; animation: viewIn .2s ease; }
.custom-field-row input {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
  font-family: var(--sans); font-size: .9rem; color: var(--text);
}
.custom-field-row .cf-label { font-weight: 600; color: var(--gold-bright); }
.custom-field-row input:focus { outline: none; border-color: var(--green); }
.cf-remove {
  background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.35); color: #e5484d;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: .85rem;
}
.cf-remove:hover { background: rgba(251,113,133,.2); }
@media (max-width: 640px) { .custom-field-row { grid-template-columns: 1fr auto; } .custom-field-row .cf-label { grid-column: 1 / -1; } }

/* Profil detayında özel alanlar */
.detail-fields { display: grid; gap: 8px; }
.detail-field {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid rgba(27,59,47,.06);
}
.detail-field:last-child { border-bottom: 0; }
.df-label { font-size: .8rem; font-weight: 600; color: var(--gold-bright); }
.df-value { font-size: .9rem; color: var(--text); }

/* Toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel-2); border: 1px solid var(--gold); color: var(--gold-bright);
  padding: 13px 26px; border-radius: 12px; font-size: .88rem;
  opacity: 0; pointer-events: none; transition: .3s; z-index: 200;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Marka teması vurguları (yeşil + altın) ===== */
/* Ana butonlar: derin orman yeşili degrade, beyaz metin */
.app-body .btn-gold {
  background: linear-gradient(135deg, #1e5637, #14532d);
  color: #fff;
  box-shadow: 0 6px 20px rgba(27, 59, 47, .25);
}
.app-body .btn-gold:hover { box-shadow: 0 10px 28px rgba(27, 59, 47, .35); }
.app-body .btn-ghost { border-color: var(--gold); color: var(--gold-bright); background: #fff; }
.app-body .btn-ghost:hover { background: rgba(27, 59, 47, .06); }

.app-body .user-avatar {
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  color: #fff;
}
.app-body .side-item.active {
  background: linear-gradient(90deg, rgba(27, 59, 47, .12), rgba(27, 59, 47, .03));
  border-inline-start: 3px solid var(--gold);
}
.app-body .view-head h1 { color: var(--gold-bright); }

/* Ağaç: yaşayanlar yeşil, Yaşayan Miras altın-taba */
.app-body .member-node.memorial circle.halo { stroke: var(--violet); }
.app-body .member-node.memorial circle.node-bg { stroke: #c2a15c; }
.app-body .member-node text.node-initials { fill: var(--gold-bright); }
.app-body .member-node text.node-name { fill: var(--muted); }
.app-body .dot-memorial { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.app-body .m-status.memorial { color: var(--violet); border-color: rgba(176, 138, 60, .4); }
.app-body .member-card .m-avatar { border-color: var(--violet); color: #9a7a34; }
.app-body .synth-fill { background: linear-gradient(90deg, #40916c, #1b4332); }

/* Bilgelik Odası: yeşil-altın avatar halkası */
.app-body .avatar-ring {
  background: conic-gradient(#2d6a4f, #c9a24b, #1b4332, #40916c, #2d6a4f);
}
.app-body .msg.user {
  background: linear-gradient(135deg, rgba(45, 106, 79, .16), rgba(27, 59, 47, .1));
  border-color: rgba(27, 59, 47, .2);
  color: var(--text);
}
.app-body .msg.avatar .msg-ref { color: var(--gold); border-top-color: rgba(27, 59, 47, .18); }

/* Altın Mühür — marka öğesi olarak altın kalır */
.app-body .seal-ring { border-color: var(--amber); }
.app-body .seal-core { color: #b8860b; text-shadow: 0 0 22px rgba(201, 162, 75, .6); }
.app-body .seal-ring-static { border-color: rgba(201, 162, 75, .5); }
@keyframes sealGlow {
  0%,100% { box-shadow: 0 0 26px rgba(201, 162, 75, .3), inset 0 0 22px rgba(201, 162, 75, .12); }
  50% { box-shadow: 0 0 55px rgba(201, 162, 75, .55), inset 0 0 38px rgba(201, 162, 75, .25); }
}
.app-body .seal-hash { color: var(--green); }

/* Kasa rozetleri */

/* Güvenlik & aile */
.app-body .genesis-code { color: var(--gold); }
.app-body .genesis-block + .genesis-block::before { background: linear-gradient(180deg, #40916c, #1b4332); }
.app-body .f-role.admin { color: var(--gold-bright); border-color: rgba(27, 59, 47, .4); }
.app-body .f-role.memorial { color: var(--violet); border-color: rgba(176, 138, 60, .5); background: rgba(176, 138, 60, .1); }
.app-body .side-quote { color: var(--gold); }

/* Responsive */
@media (max-width: 1080px) {
  .tree-layout, .chamber-layout, .upload-layout { grid-template-columns: 1fr; }
  .sec-status-grid { grid-template-columns: 1fr; }
  .chamber-chat { height: auto; }
}
@media (max-width: 860px) {
  .app-body { overflow: auto; }
  .app-shell { flex-direction: column; height: auto; }
  .app-sidebar {
    flex-direction: row; width: 100%; overflow-x: auto;
    border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 10px;
  }
  .side-item { flex-shrink: 0; }
  .sidebar-foot { display: none; }
  .topbar-status { display: none; }
  .app-main { padding: 24px 18px 50px; }
}

/* ================= MODERN ARAYÜZ GEÇİŞİ ================= */
/* Kenar menü: eşit boyda, ikon kutulu, belirgin, modern */
.app-sidebar { padding: 16px 12px; gap: 4px; background: rgba(255,255,255,.68); }
.nav-label { padding: 6px 10px 10px; font-size: .66rem; color: #7a8c80; }
.side-item {
  display: flex; align-items: center; gap: 13px;
  min-height: 48px; padding: 8px 12px; border-radius: 13px;
  font-size: .92rem; font-weight: 600; color: #38493f; text-align: start;
  background: none; border: 0; cursor: pointer; position: relative;
  transition: background .16s, transform .1s, box-shadow .16s;
}
.side-item .side-icon {
  width: 36px; height: 36px; flex-shrink: 0; padding: 8px; border-radius: 11px;
  background: rgba(27,59,47,.06); box-sizing: border-box; opacity: 1;
  transition: background .16s, transform .16s;
}
.side-item:hover { background: rgba(27,59,47,.05); }
.side-item:hover .side-icon { transform: scale(1.06); }
.side-item.active {
  background: linear-gradient(100deg, rgba(64,145,108,.16), rgba(27,59,47,.05));
  color: #14532d; box-shadow: inset 3px 0 0 var(--green);
}
.side-item.active .side-icon { background: rgba(64,145,108,.2); }
.side-badge, #reportBadge { box-shadow: 0 0 0 2px #fff; }

/* Renkli ikon kutuları (kenar menü) */
.nav-admin .side-item:nth-of-type(2) .side-icon { background: rgba(34,211,238,.14); }
.nav-admin .side-item:nth-of-type(3) .side-icon { background: rgba(167,139,250,.16); }
.nav-admin .side-item:nth-of-type(4) .side-icon { background: rgba(52,211,153,.16); }
.nav-admin .side-item:nth-of-type(5) .side-icon { background: rgba(251,146,60,.16); }
.nav-admin .side-item:nth-of-type(6) .side-icon { background: rgba(244,114,182,.16); }
.nav-admin .side-item:nth-of-type(7) .side-icon { background: rgba(37,99,235,.14); }
.nav-admin .side-item:nth-of-type(8) .side-icon { background: rgba(20,184,166,.16); }

/* Büyük içerik çerçevesi — zeminden ayrışan panel */
.app-main {
  background:
    radial-gradient(ellipse 70% 30% at 100% 0%, rgba(64,145,108,.06), transparent 60%),
    linear-gradient(180deg, #e2e8db, #dde5d5);
  padding: 16px 28px 40px;
}
.view.active {
  background: linear-gradient(180deg, #ffffff, #f8fbf4);
  border: 1px solid rgba(27,59,47,.12);
  border-radius: 24px;
  padding: 26px 30px 34px;
  box-shadow: 0 10px 40px rgba(27,59,47,.09);
  min-height: calc(100vh - 128px);
}
/* İç içe çerçeve hafiflet — başlık paneli belirgin ama uyumlu */
.view-head {
  background: linear-gradient(120deg, #f2f9ee, #eaf4e6);
  border: 1px solid rgba(27,59,47,.12);
  border-inline-start: 5px solid var(--green);
  box-shadow: 0 2px 10px rgba(27,59,47,.05);
}

/* Sistem Bilgisi — profesyonel renkli kartlar */
.info-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.info-card {
  position: relative; overflow: hidden; padding: 22px 22px 20px;
  border: 0; border-radius: 18px; box-shadow: 0 6px 22px rgba(27,59,47,.10);
}
.info-card .ic-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.info-card .ic-ico {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.info-card h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #46564c; margin: 0; }
.info-card .ic-main { font-size: 1.02rem; font-weight: 700; color: #21302a; margin-bottom: 8px; }
.info-card .ic-list { list-style: none; padding: 0; margin: 0; }
.info-card .ic-list li { font-size: .84rem; color: #556; padding: 4px 0; display: flex; align-items: center; gap: 7px; }
.info-card .ic-list li::before { content: "▸"; color: var(--green); font-size: .7rem; }
.info-card.tint-green  { background: linear-gradient(160deg,#f0fbf4,#e3f5ea); }
.info-card.tint-blue   { background: linear-gradient(160deg,#eef5ff,#e0edff); }
.info-card.tint-violet { background: linear-gradient(160deg,#f5f1ff,#ece4ff); }
.info-card.tint-amber  { background: linear-gradient(160deg,#fff7e8,#ffeecc); }
.info-card.tint-pink   { background: linear-gradient(160deg,#fff0f6,#ffe0ee); }
.info-card.tint-teal   { background: linear-gradient(160deg,#eafbf7,#d6f5ee); }
.ic-green  { background: linear-gradient(140deg,#34d399,#059669); }
.ic-blue   { background: linear-gradient(140deg,#60a5fa,#2563eb); }
.ic-violet { background: linear-gradient(140deg,#a78bfa,#7c3aed); }
.ic-amber  { background: linear-gradient(140deg,#fbbf24,#d97706); }
.ic-pink   { background: linear-gradient(140deg,#f472b6,#db2777); }
.ic-teal   { background: linear-gradient(140deg,#2dd4bf,#0d9488); }

/* İstatistik kartı: sayı+başlık okunur beyaz çerçevede */
.admin-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; }
.admin-stat .as-ic { font-size: 1.7rem; }
.as-frame {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #ffffff; border-radius: 14px; padding: 8px 18px; min-width: 84px;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
}
.as-frame b { font-size: 1.9rem; font-weight: 800; color: #172219; line-height: 1.1; }
.as-frame span { font-size: .8rem; font-weight: 700; color: #556; letter-spacing: .02em; }

/* Üye detay sayfası */
.member-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.mdh-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px rgba(27,59,47,.2); }
.mdh-avatar.live { background: linear-gradient(140deg,#34d399,#059669); }
.mdh-avatar.memorial { background: linear-gradient(140deg,#c2a15c,#8a6d33); }
.mdh-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.member-detail-head h1 { font-size: 1.7rem; color: var(--gold-bright); }
.member-detail-head p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.member-detail-head .mdh-sub code { background: rgba(27,59,47,.06); padding: 2px 8px; border-radius: 6px; color: var(--gold-bright); }
.mdi-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 20px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(27,59,47,.05); }
.mdi-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(27,59,47,.06); align-items: start; }
.mdi-row:last-child { border-bottom: 0; }
.mdi-row span { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6a7a70; }
.mdi-row b { color: #21302a; font-weight: 500; line-height: 1.6; }
.mdi-box p { color: #3a4a40; line-height: 1.65; padding: 12px 0; }

/* Yönetici & Moderatör ekleme kartları */
.staff-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 20px; }
.staff-card { background: linear-gradient(180deg,#ffffff,#f7faf3); border: 1px solid rgba(27,59,47,.12); border-radius: 18px; padding: 22px 24px; box-shadow: 0 4px 16px rgba(27,59,47,.07); }
.staff-card h3 { font-size: 1.05rem; color: #14532d; margin-bottom: 4px; }
.staff-card > .muted { font-size: .84rem; margin-bottom: 16px; display: block; }
.staff-card .member-form { gap: 14px; }
.staff-card input, .staff-card select { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-family: var(--sans); font-size: .92rem; color: var(--text); }
.staff-card input:focus, .staff-card select:focus { outline: none; border-color: var(--green); }

/* Kenar menü: hepsi eşit yükseklik, tek satır, tam kenara kadar */
.app-sidebar { width: 248px; padding: 16px 8px; }
.side-item {
  width: 100%; box-sizing: border-box;
  height: 50px; min-height: 50px; padding: 0 12px;
  white-space: nowrap;
}
.side-item > span:not(.side-badge):not(.admin-tag) {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem;
}
@media (max-width: 860px) {
  .app-sidebar { width: 100%; }
}

/* Küçük yuvarlak avatarlar */
.uav { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#2d6a4f,#1b4332); overflow: hidden; vertical-align: middle; }
.uav img { width: 100%; height: 100%; object-fit: cover; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell strong { font-weight: 700; }
.f-avatar.uav { width: 42px; height: 42px; font-size: .85rem; }

/* Renkli tablo başlıkları + sıralama ikonları */
.admin-table thead tr { background: linear-gradient(90deg, #1b4332, #2d6a4f); }
.admin-table th { color: #eafff3; border-bottom: 0; font-weight: 700; letter-spacing: .05em; }
.admin-table thead th:first-child { border-top-left-radius: 12px; }
.admin-table thead th:last-child { border-top-right-radius: 12px; }
.admin-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.sortable:hover { background: rgba(255,255,255,.08); }
.admin-table th .sort-ic { opacity: .55; margin-inline-start: 5px; font-size: .8em; }
.admin-table th.sort-asc .sort-ic::after { content: "▲"; opacity: 1; }
.admin-table th.sort-desc .sort-ic::after { content: "▼"; opacity: 1; }
.admin-table th.sortable .sort-ic::after { content: "↕"; }

/* Profil menüsü foto butonu */
.um-avatar-btn { border: 0; cursor: pointer; padding: 0; position: relative; }
.um-avatar-btn::after { content: "📷"; position: absolute; bottom: -2px; right: -2px; font-size: .65rem; background: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.um-photo-link { background: none; border: 0; color: var(--green); font-size: .74rem; cursor: pointer; padding: 3px 0 0; font-family: var(--sans); }
.um-photo-link:hover { text-decoration: underline; }

/* İstatistik SVG ikonları büyük ve net */
.admin-stat .as-ic { font-size: 0; line-height: 0; }
.admin-stat .as-ic svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)); width: 32px; height: 32px; }

/* İstiflenmiş üye avatarları (+N) */
.member-stack { display: flex; align-items: center; }
.stack-av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-inline-start: -8px; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#2d6a4f,#1b4332); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.stack-av:first-child { margin-inline-start: 0; }
.stack-av img { width: 100%; height: 100%; object-fit: cover; }
.stack-more { background: linear-gradient(135deg,#94a3b8,#64748b); font-size: .6rem; }
.stack-count { margin-inline-start: 10px; font-weight: 700; color: var(--gold-bright); }

/* Rapor gönderen bilgisi */
.rd-from { position: relative; }
.rd-from-info { flex: 1; }
.rd-from .btn { margin-inline-start: auto; white-space: nowrap; }
.rd-from code.copyable { background: rgba(27,59,47,.08); padding: 1px 7px; border-radius: 5px; }
.ur-item { cursor: pointer; }
.ur-item:hover { background: rgba(64,145,108,.08); }

/* ===== Sohbet boş durum + Arkadaşlar sayfası ===== */
.dm-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dm-empty-ic {
  width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: rgba(255,255,255,.6); box-shadow: 0 6px 18px rgba(27,59,47,.08);
}
.dm-empty p { font-size: .9rem; max-width: 240px; }

.fr-addcard {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg,#f4f8f5,#eef5ef); border: 1px solid #d8e7dc;
  border-radius: 16px; padding: 20px 22px; margin-bottom: 26px;
}
.fr-addcard-ic {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#2d6a4f,#1b4332); box-shadow: 0 8px 18px rgba(27,59,47,.22);
}
.fr-addcard-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fr-addcard-body strong { font-size: 1.02rem; color: var(--text); }
.fr-addcard-body small { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.fr-addform { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-addform input {
  flex: 1; min-width: 180px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-family: monospace; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
  background: #fff; color: var(--text);
}
.fr-addform input:focus { outline: none; border-color: var(--gold-dim); }
.fr-addform .btn { display: inline-flex; align-items: center; gap: 6px; }

.fr-section { margin-bottom: 26px; }
.fr-h { font-size: 1rem; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.fr-count { color: var(--gold-bright); font-weight: 700; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fr-empty { color: var(--muted); font-size: .86rem; }

.fr-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px; transition: transform .15s, box-shadow .2s;
}
.fr-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,59,47,.1); }
.fr-card-top { display: flex; align-items: center; gap: 12px; }
.fr-uav { width: 48px; height: 48px; font-size: 1rem; }
.fr-card-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-card-info strong { font-size: .95rem; color: var(--text); }
.fr-code { font-family: monospace; font-size: .68rem; color: #5b7a67; background: rgba(27,59,47,.07); padding: 1px 6px; border-radius: 5px; align-self: flex-start; }
.fr-card-info small { font-size: .74rem; color: var(--muted); }
.fr-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-btn { flex: 1; padding: 8px 10px; font-size: .8rem; }
.btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--muted); border-radius: 9px; cursor: pointer; font-family: var(--sans); font-weight: 600; transition: .15s; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-ghost.danger:hover { border-color: #dc7676; color: #c0392b; }
.fr-pending { flex: 1; font-size: .78rem; color: #b45309; display: inline-flex; align-items: center; }

/* Yan menü rozeti (arkadaş istekleri) */
.side-badge {
  min-width: 18px; height: 18px; border-radius: 9px; background: #e0483d; color: #fff;
  font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; margin-inline-start: auto;
}
.side-badge[hidden] { display: none; }

/* ===== Kullanım Kılavuzu ===== */
.gd-intro { display: flex; gap: 18px; align-items: flex-start; background: linear-gradient(135deg,#f4f8f5,#eef5ef); border: 1px solid #d8e7dc; border-radius: 16px; padding: 22px 24px; margin-bottom: 26px; }
.gd-intro-ic { width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: linear-gradient(135deg,#2d6a4f,#1b4332); box-shadow: 0 8px 18px rgba(27,59,47,.22); }
.gd-intro h2 { font-size: 1.3rem; color: var(--text); margin-bottom: 6px; }
.gd-intro p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.gd-section-h { margin: 0 0 16px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 28px; }
.gd-card { position: relative; display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid #2d6a4f; border-radius: 14px; padding: 16px 18px; transition: transform .15s, box-shadow .2s; }
.gd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,59,47,.1); }
.gd-num { position: absolute; top: 12px; inset-inline-end: 14px; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: rgba(45,106,79,.18); }
.gd-ic { font-size: 1.7rem; flex-shrink: 0; }
.gd-body strong { display: block; color: var(--text); font-size: .98rem; margin-bottom: 4px; }
.gd-body p { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.gd-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 28px; }
.gd-code { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; }
.gd-code code { font-family: monospace; font-weight: 700; color: #8a6d1f; background: rgba(201,162,75,.14); padding: 4px 10px; border-radius: 8px; }
.gd-code span { font-size: .82rem; color: var(--muted); }
.gd-tips { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gd-tips li { position: relative; padding: 12px 16px 12px 40px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .88rem; color: var(--text); line-height: 1.5; }
.gd-tips li::before { content: "💡"; position: absolute; inset-inline-start: 14px; top: 12px; }

/* ===== Kuşak/Eş Aile Şeması ===== */
.tree-stage2 {
  background:
    radial-gradient(ellipse 60% 45% at 25% 0%, rgba(64,145,108,.10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 80% 20%, rgba(201,162,75,.10), transparent 60%),
    linear-gradient(180deg, #f4f8f4, #ffffff);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 10px 22px; overflow-x: auto;
}
/* Duruma göre kart rengi + üst renkli şerit + canlı hover */
.gc-node { position: relative; }
.gc-node::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg,#c9a24b,#8a6d33); }
.gc-node.live::before { background: linear-gradient(90deg,#34d399,#0f9d6b); }
.gc-node.memorial { background: linear-gradient(180deg,#fffdf6,#fff); }
.gc-node.live { background: linear-gradient(180deg,#f5fdf8,#fff); }
.gc-role { display: inline-flex; align-items: center; gap: 3px; }
.gc-role::before { content: "👤"; font-size: .72rem; }
/* ---- Soyağacı: atalar üstte, eşler yanda, çocuklar altta ---- */
.famtree2 { display: inline-flex; align-items: flex-start; justify-content: center; gap: 46px; min-width: 100%; padding: 10px 24px; }
.tree-union { display: flex; flex-direction: column; align-items: center; }
.tree-couple { display: flex; align-items: flex-end; gap: 8px; }
.person-col { display: flex; flex-direction: column; align-items: center; }
/* Ata bloğu: kişinin üstünde ebeveyn çifti + iniş çizgisi */
.anc-wrap { display: flex; flex-direction: column; align-items: center; }
.anc-drop { width: 3px; height: 22px; background: linear-gradient(180deg,#c1a15e,#2d6a4f); border-radius: 2px; }
/* Çocuk bağlantıları (org-chart) */
.tree-children { display: flex; justify-content: center; position: relative; padding-top: 30px; }
.tree-children::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 30px; background: #c1a15e; transform: translateX(-50%); }
.tree-children > .tree-union { position: relative; padding-top: 30px; margin: 0 16px; }
.tree-children > .tree-union::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 30px; background: #c1a15e; transform: translateX(-50%); }
.tree-children > .tree-union::after { content: ""; position: absolute; top: 0; height: 3px; background: #c1a15e; left: -16px; right: -16px; }
.tree-children > .tree-union:first-child::after { left: 50%; border-start-start-radius: 6px; }
.tree-children > .tree-union:last-child::after { right: 50%; border-start-end-radius: 6px; }
.tree-children > .tree-union:only-child::after { display: none; }
.tree-children > .tree-union:only-child::before { height: 30px; }
.gc-heart { align-self: flex-end; font-size: 1.2rem; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 52px; }
.gc-heart small { font-size: .54rem; color: #c0392b; font-weight: 700; letter-spacing: .02em; }
.gc-heart.divorced { color: #c0392b; }
.gc-marriedin { font-size: .56rem; font-weight: 700; color: #8a6d1f; background: rgba(201,162,75,.16); padding: 1px 7px; border-radius: 10px; margin-top: 2px; }
.gc-farkli { font-size: .5rem; color: #a08248; margin-top: 1px; }
.gc-node.marriedin .gc-photo { border-style: dashed; }
.gc-node {
  text-align: center; cursor: pointer; width: 138px; min-height: 216px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px 14px;
  box-shadow: 0 4px 14px rgba(27,59,47,.07); transition: transform .15s, box-shadow .2s;
}
/* Durum satırını alta sabitle → tüm kartlar aynı hizada biter */
.gc-node .gc-status { margin-top: auto; padding-top: 4px; }
.gc-node.marriedin { border-style: dashed; border-color: #d8c290; background: #fffdf7; }
.gc-node:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(27,59,47,.13); }
.gc-photo {
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  background: radial-gradient(circle at 30% 30%, #fff, #eef1e8); border: 3px solid #c9a24b;
}
.gc-photo.live { border-color: #40916c; }
.gc-photo img { width: 100%; height: 100%; object-fit: cover; }
.gc-node strong { font-size: .86rem; color: var(--text); line-height: 1.2; }
.gc-role { font-size: .7rem; color: var(--violet); background: rgba(167,139,250,.12); padding: 1px 8px; border-radius: 10px; }
.gc-node .live ~ .gc-role, .gc-node.live .gc-role { }
.gc-years { font-size: .72rem; color: var(--muted); }
.gc-status { font-size: .68rem; font-weight: 600; }
.gc-status.live { color: #2d6a4f; }
.gc-status.memorial { color: #b08a3c; }
.gc-empty { color: var(--muted); text-align: center; padding: 30px; }
@media (max-width: 640px) { .gc-couple { flex-direction: column; align-items: center; } .gc-heart { transform: rotate(90deg); } }

/* ===== Profilim ===== */
.pf-card { position: relative; overflow: hidden; border: 1px solid #dfe8d9; border-radius: 20px; padding: 28px 30px; margin-bottom: 26px;
  background:
    radial-gradient(ellipse 50% 90% at 12% 0%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(ellipse 50% 90% at 90% 10%, rgba(45,106,79,.16), transparent 62%),
    linear-gradient(160deg, #f2f8f2, #fbf8ef 60%, #fff);
  box-shadow: 0 10px 30px rgba(27,59,47,.1); }
.pf-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #2d6a4f, #40916c, #d4af37, #b8860b); }
.pf-hero { display: flex; align-items: center; gap: 22px; }
.pf-av { width: 84px; height: 84px; font-size: 1.6rem;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(212,175,55,.55), 0 8px 22px rgba(27,59,47,.22); }
.pf-hero-info h2 { font-family: var(--serif); font-size: 1.65rem; margin-bottom: 3px;
  background: linear-gradient(120deg, #14532d, #b8860b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf-hero-info p { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.pf-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; padding: 6px 14px; border-radius: 20px;
  background: linear-gradient(135deg, #2f8d5b, #1f7d52); color: #fff; font-weight: 700; box-shadow: 0 3px 9px rgba(31,125,82,.25); }
.pf-badge.code { font-family: ui-monospace, monospace; cursor: pointer; letter-spacing: .03em;
  background: linear-gradient(135deg, #d4af37, #b8860b); color: #2a1f00; box-shadow: 0 3px 9px rgba(184,134,11,.3); transition: transform .15s; }
.pf-badge.code:hover { transform: translateY(-2px); }
.pf-badge.code::before { content: "🆔"; font-size: .8rem; }
.pf-section-h { margin: 0 0 16px; }
.pf-av-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
.pf-av-edit { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; border: 2px solid #fff; }
.pf-settings { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 26px; box-shadow: 0 2px 10px rgba(27,59,47,.05); }
.pf-settings label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.pf-settings input { border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: var(--sans); font-size: .92rem; color: var(--text); }
.pf-settings input:focus { outline: none; border-color: var(--gold-dim); }
.pf-set-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-set-actions .btn { flex: 1; min-width: 130px; }
.pf-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pf-set-grid { grid-template-columns: 1fr; } }
.pf-fam-note { font-size: .84rem; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.join-rel { margin-top: 12px; background: rgba(45,106,79,.06); border: 1px solid #d8e7dc; border-radius: 12px; padding: 14px 16px; }
.join-rel[hidden] { display: none; }
.join-fam-name { font-weight: 700; color: #1b6e4a; margin-bottom: 10px; font-size: .9rem; }
.join-rel-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.join-rel-lbl { font-size: .84rem; color: var(--muted); }
.join-rel-row select { border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; font-family: var(--sans); font-size: .88rem; background: #fff; }
.pf-reports { display: flex; flex-direction: column; gap: 14px; }
.pf-report {
  background: #fff; border: 1px solid var(--line); border-inline-start: 5px solid #e0b03d; border-radius: 12px; padding: 16px 18px;
}
.pf-report.resolved { border-inline-start-color: #2d6a4f; }
.pf-report.closed { border-inline-start-color: #94a3b8; }
.pf-report-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pf-rno { font-family: monospace; font-size: .74rem; color: #8a6d1f; background: rgba(201,162,75,.14); padding: 2px 8px; border-radius: 6px; }
.pf-report-top strong { flex: 1; color: var(--text); font-size: .96rem; }
.pf-rstatus { font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.pf-rstatus.open { background: rgba(224,123,57,.16); color: #b45309; }
.pf-rstatus.resolved { background: rgba(45,106,79,.14); color: #1b6e4a; }
.pf-rstatus.closed { background: rgba(148,163,184,.2); color: #64748b; }
.pf-rmsg { color: var(--text); font-size: .88rem; line-height: 1.55; margin-bottom: 6px; }
.pf-rdate { color: var(--muted); font-size: .74rem; }
.pf-response { margin-top: 12px; background: linear-gradient(135deg, rgba(45,106,79,.08), rgba(64,145,108,.05)); border-radius: 10px; padding: 12px 14px; }
.pf-response-h { display: block; font-size: .74rem; font-weight: 700; color: #1b6e4a; margin-bottom: 5px; }
.pf-response p { font-size: .88rem; color: var(--text); line-height: 1.55; }
.pf-noresponse { margin-top: 10px; font-size: .8rem; color: #b45309; }
.pf-empty { color: var(--muted); font-size: .9rem; }

/* ===== Beyin: Hafıza Ağı (ağaç dalı) ===== */
.brain-overlay[hidden] { display: none; }
.brain-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, #0b2a20 0%, #071b14 55%, #04120d 100%);
  display: flex; flex-direction: column; color: #dbeadf;
}
.brain-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; border-bottom: 1px solid rgba(120,190,150,.14);
}
.brain-title { display: flex; flex-direction: column; gap: 2px; }
.brain-eyebrow { font-size: .64rem; letter-spacing: .28em; color: #6fbf8f; }
.brain-title strong { font-family: var(--serif); font-size: 1.35rem; color: #fff; }
.brain-close {
  background: rgba(255,255,255,.06); border: 1px solid rgba(120,190,150,.25); color: #cfe6d7;
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-family: var(--sans); font-size: .85rem;
  transition: .15s;
}
.brain-close:hover { background: rgba(255,255,255,.12); border-color: #6fbf8f; }
.brain-stage { flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
#brainCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
.brain-panel {
  border-inline-start: 1px solid rgba(120,190,150,.14); padding: 20px 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; background: rgba(4,18,13,.4);
}
.brain-stat {
  background: rgba(255,255,255,.04); border: 1px solid rgba(120,190,150,.16); border-radius: 12px;
  padding: 13px 16px; display: flex; flex-direction: column; gap: 3px;
}
.brain-stat span { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #7ea88e; }
.brain-stat b { font-size: 1.5rem; color: #fff; font-weight: 700; }
.brain-selected {
  margin-top: auto; background: rgba(201,162,75,.1); border: 1px solid rgba(201,162,75,.3);
  border-radius: 12px; padding: 15px 16px;
}
.bs-label { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #d8b866; }
.brain-selected h5 { color: #fff; font-size: 1rem; margin: 6px 0 4px; }
.brain-selected .bs-meta { font-size: .74rem; color: #9fc2ac; margin-bottom: 8px; }
.brain-selected .bs-body { font-size: .82rem; color: #cfe0d5; line-height: 1.55; }
.bs-hint { font-size: .8rem; color: #7ea88e; margin-top: 6px; }
@media (max-width: 820px) {
  .brain-stage { grid-template-columns: 1fr; }
  .brain-panel { display: none; }
}

/* ================= Sesli / Görüntülü Arama ================= */
.dm-call-btns { margin-left: auto; display: flex; gap: 8px; }
.dm-call-btn {
  width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2e9e6b, #1f7d52);
  box-shadow: 0 4px 12px rgba(31,125,82,.35); transition: transform .15s, box-shadow .15s;
}
.dm-call-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(31,125,82,.45); }
#dmVideoCall { background: linear-gradient(135deg, #3b82c4, #2563a8); box-shadow: 0 4px 12px rgba(37,99,168,.35); }

/* Gelen arama zili */
.call-ring { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(8,20,15,.72); backdrop-filter: blur(6px); }
.call-ring[hidden] { display: none; }
.call-ring-card {
  background: linear-gradient(160deg, #123024, #0c211a); border: 1px solid rgba(212,175,55,.35);
  border-radius: 24px; padding: 34px 40px; text-align: center; color: #eaf5ee;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: confPop .3s ease;
}
.call-ring-card strong { display: block; font-size: 1.4rem; margin: 14px 0 4px; }
.call-ring-card small { color: #8fd0a8; }
.call-uav { width: 84px; height: 84px; font-size: 1.8rem; animation: ringPulse 1.4s infinite; }
@keyframes ringPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,158,107,.5); } 50% { box-shadow: 0 0 0 16px rgba(46,158,107,0); } }
.call-ring-actions { display: flex; gap: 44px; justify-content: center; margin-top: 26px; }
.call-btn-accept, .call-btn-reject {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  display: grid; place-items: center; transition: transform .15s;
}
.call-btn-accept { background: linear-gradient(135deg, #2e9e6b, #1f7d52); }
.call-btn-reject { background: linear-gradient(135deg, #e05a5a, #c53030); }
.call-btn-accept { animation: ringPulse 1.4s infinite; }
.call-btn-accept:hover, .call-btn-reject:hover { transform: scale(1.1); }

/* Aktif arama sahnesi */
.call-stage { position: fixed; inset: 0; z-index: 4000; background: #06120d; overflow: hidden; }
.call-stage[hidden] { display: none; }
.call-remote-video { width: 100%; height: 100%; object-fit: cover; background: #06120d; }
.call-audio-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: radial-gradient(circle at 50% 38%, #17392b, #06120d 70%); color: #eaf5ee; }
.call-audio-face[hidden] { display: none; }
.call-audio-avatar { width: 128px; height: 128px; font-size: 2.6rem; }
.call-audio-face strong { font-size: 1.6rem; margin-top: 10px; }
.call-audio-face small { color: #8fd0a8; }
.call-local-video { position: absolute; right: 18px; top: 18px; width: 150px; height: 200px;
  object-fit: cover; border-radius: 16px; border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); background: #0c211a; transform: scaleX(-1); }
.call-local-video[hidden] { display: none; }
.call-topbar { position: absolute; top: 16px; left: 0; right: 0; text-align: center; color: #eaf5ee;
  font-variant-numeric: tabular-nums; font-size: 1.05rem; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.call-controls { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; gap: 20px; justify-content: center; }
.call-ctl { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display: grid; place-items: center; transition: transform .15s, background .15s; }
.call-ctl:hover { transform: translateY(-2px); background: rgba(255,255,255,.26); }
.call-ctl.off { background: #e0b33a; color: #2a1f00; }
.call-ctl-end { background: linear-gradient(135deg, #e05a5a, #c53030); width: 66px; height: 66px; }
.call-ctl-end:hover { background: linear-gradient(135deg, #ef6b6b, #d33b3b); }
@media (max-width: 560px) {
  .call-local-video { width: 104px; height: 140px; }
  .call-controls { gap: 14px; }
}

/* ================= Röportaj Modu ================= */
.iv-setup { padding: 20px 0; }
.iv-setup-card { width: 100%; background: #fff; border: 1px solid #e6ddc9;
  border-radius: 20px; padding: 26px 30px; box-shadow: 0 14px 40px rgba(60,45,20,.1); }
.iv-setup-row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.iv-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.iv-setup-card label { font-weight: 700; color: #5d4b2a; font-size: .9rem; }
.iv-setup-card select { padding: 13px 14px; border: 1px solid #d9cfb6; border-radius: 12px; font-size: .97rem; background: #fbf8f0; width: 100%; }
.iv-setup-card .btn { flex: 0 0 auto; padding: 14px 34px; font-size: 1rem; white-space: nowrap; }
@media (max-width: 640px) {
  .iv-setup-row { align-items: stretch; }
  .iv-setup-card .btn { width: 100%; }
}
.iv-stage[hidden] { display: none !important; }
.iv-stage { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 460px;
  background: linear-gradient(160deg, #fbf7ec, #f3ecd8); border: 1px solid #e6ddc9; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 40px rgba(60,45,20,.08); }

/* Geçmiş röportajlar */
.iv-history { margin-top: 22px; }
.iv-history .ivh-title { font-weight: 800; color: #b8860b; margin-bottom: 12px; font-size: 1.05rem; }
.ivh-card { background: #fff; border: 1px solid #ece3cf; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.ivh-card summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.ivh-card summary::-webkit-details-marker { display: none; }
.ivh-card summary::after { content: "▾"; margin-left: auto; color: #b8860b; transition: transform .2s; }
.ivh-card[open] summary::after { transform: rotate(180deg); }
.ivh-av { width: 40px; height: 40px; }
.ivh-name { font-weight: 700; color: #33291a; }
.ivh-count { background: #eef6ef; color: #1f7d52; font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 20px; }
.ivh-body { padding: 4px 18px 16px; }
.ivh-qa { border-left: 3px solid #e0b33a; padding: 8px 14px; margin: 10px 0; background: #faf6ec; border-radius: 0 8px 8px 0; }
.ivh-q { font-weight: 700; color: #b8860b; font-size: .92rem; }
.ivh-a { color: #4a3f28; margin-top: 4px; line-height: 1.5; }
.ivh-meta { color: #a79b7d; font-size: .78rem; margin-top: 6px; }
.iv-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #ece3cf; }
.iv-who { display: flex; align-items: center; gap: 10px; font-size: .96rem; color: #43351a; }
.iv-who-av { width: 38px; height: 38px; }
.iv-count { margin-left: auto; background: #eef6ef; color: #1f7d52; font-weight: 700; font-size: .82rem; padding: 5px 12px; border-radius: 20px; }
.iv-end { border: none; background: #f2e3e0; color: #c0392b; font-weight: 700; padding: 7px 16px; border-radius: 20px; cursor: pointer; }
.iv-end:hover { background: #ecc9c4; }
.iv-scroll { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.iv-msg { display: flex; gap: 10px; max-width: 78%; }
.iv-msg.iv-q { align-self: flex-start; }
.iv-msg.iv-a { align-self: flex-end; }
.iv-ava { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #f0a24b, #d97a1e); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(217,122,30,.3); }
.iv-bubble { padding: 12px 16px; border-radius: 16px; line-height: 1.5; font-size: .97rem; }
.iv-q .iv-bubble { background: #fff; color: #3a2f18; border-bottom-left-radius: 4px; box-shadow: 0 3px 10px rgba(60,45,20,.08); }
.iv-a .iv-bubble { background: linear-gradient(135deg, #2f8d5b, #1f7d52); color: #fff; border-bottom-right-radius: 4px; }
.iv-input { display: flex; gap: 10px; padding: 14px 18px; background: #fff; border-top: 1px solid #ece3cf; align-items: flex-end; }
.iv-input textarea { flex: 1; resize: none; border: 1px solid #d9cfb6; border-radius: 16px; padding: 12px 14px; font-size: .97rem; font-family: inherit; max-height: 120px; background: #fbf8f0; }
.iv-mic { width: 46px; height: 46px; border-radius: 50%; border: none; background: #eef6ef; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; }
.iv-mic.recording { background: #e05a5a; color: #fff; animation: ringPulse 1.2s infinite; }
.iv-skip { align-self: center; background: none; border: none; color: #8a7a52; font-size: .88rem; cursor: pointer; padding: 8px; text-decoration: underline; }

/* ================= Zaman Tüneli ================= */
.tl-tools { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.tl-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d9cfb6; border-radius: 14px; padding: 0 14px; color: #8a7a52; }
.tl-search input { flex: 1; border: none; outline: none; padding: 13px 0; font-size: .97rem; background: transparent; color: #3a2f18; }
.tl-tools select { border: 1px solid #d9cfb6; border-radius: 14px; padding: 0 14px; background: #fff; font-size: .95rem; color: #3a2f18; }
.tl-list { position: relative; padding-left: 26px; }
.tl-list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#e0b33a, #ece3cf); }
.tl-year { font-weight: 800; color: #b8860b; font-size: 1.1rem; margin: 20px 0 10px -26px; padding-left: 26px; }
.tl-item { position: relative; margin-bottom: 14px; cursor: pointer; }
.tl-dot { position: absolute; left: -25px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
  background: #e0b33a; border: 2px solid #fff; box-shadow: 0 0 0 2px #e0b33a; }
.tl-card { background: #fff; border: 1px solid #ece3cf; border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(60,45,20,.06); transition: transform .15s, box-shadow .15s; }
.tl-item:hover .tl-card { transform: translateX(3px); box-shadow: 0 8px 22px rgba(60,45,20,.12); }
.tl-card-head { display: flex; align-items: center; gap: 12px; }
.tl-av { width: 42px; height: 42px; }
.tl-card-head strong { display: block; color: #3a2f18; font-size: 1rem; }
.tl-card-head small { color: #8a7a52; font-size: .82rem; }
.tl-card p { margin: 10px 0 4px; color: #4a3f28; line-height: 1.55; font-size: .95rem; }
.tl-by { color: #b8860b; font-size: .82rem; font-style: italic; }
.tl-empty { text-align: center; color: #8a7a52; padding: 50px 20px; font-size: 1rem; }

/* ================= Yıldönümü hatırlatıcıları ================= */
.tl-reminders { margin-bottom: 20px; }
.tl-reminders[hidden] { display: none; }
.tl-rem-title { font-weight: 800; color: #b8860b; margin-bottom: 10px; }
.tl-rem-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.tl-rem-card { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: #fff; border: 1px solid #ece3cf; border-left: 4px solid #e0b33a; border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 4px 14px rgba(60,45,20,.06); min-width: 210px; }
.tl-rem-card.memorial { border-left-color: #8a94a6; }
.tl-rem-card.bday { border-left-color: #2e9e6b; }
.tl-rem-ic { font-size: 1.6rem; }
.tl-rem-card strong { display: block; color: #3a2f18; font-size: .95rem; }
.tl-rem-card small { color: #8a7a52; font-size: .8rem; }
.tl-rem-days { margin-left: auto; background: #fbf3dd; color: #b8860b; font-weight: 700;
  font-size: .8rem; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }

/* ================= Sohbette arama günlüğü (WhatsApp tarzı) ================= */
.dm-callrow { display: flex; align-items: center; gap: 12px; align-self: center;
  background: #fff; border: 1px solid #e4ddcb; border-radius: 14px; padding: 10px 14px;
  margin: 6px auto; max-width: 320px; width: 88%; box-shadow: 0 3px 10px rgba(60,45,20,.07); }
.dm-callrow.missed { border-color: #f0cfca; background: #fdf4f2; }
.cl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.cl-ic.voice { background: linear-gradient(135deg, #2e9e6b, #1f7d52); }
.cl-ic.video { background: linear-gradient(135deg, #3b82c4, #2563a8); }
.dm-callrow.missed .cl-ic { background: linear-gradient(135deg, #e05a5a, #c53030); }
.cl-body { flex: 1; min-width: 0; }
.cl-body strong { display: block; font-size: .92rem; color: #33291a; }
.cl-body small { color: #8a7a52; font-size: .78rem; }
.dm-callrow.missed .cl-body strong { color: #c0392b; }
.cl-arrow { font-weight: 700; }
.cl-arrow.out { color: #2e9e6b; }
.cl-arrow.in { color: #3b82c4; }
.cl-arrow.miss { color: #c0392b; }
.cl-back { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: #eef6ef; color: #1f7d52; display: grid; place-items: center; flex-shrink: 0; transition: background .15s; }
.cl-back:hover { background: #d8ecdd; }

/* ================= Yüzen sohbet butonu (FAB) ================= */
.chat-fab { position: fixed; right: 26px; bottom: 26px; width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 1200; color: #fff; display: grid; place-items: center;
  background: linear-gradient(135deg, #2f8d5b, #1f7d52);
  box-shadow: 0 10px 28px rgba(31,125,82,.45); transition: transform .18s, box-shadow .18s; }
.chat-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(31,125,82,.55); }
.chat-fab[hidden] { display: none; }
.chat-fab-badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 12px; background: #e0393b; color: #fff; font-size: .74rem; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.chat-fab-badge[hidden] { display: none; }
/* Sidebar sohbet rozeti kırmızı nokta/sayı */
.side-badge { background: #e0393b; color: #fff; font-size: .72rem; font-weight: 800; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; margin-left: auto; }
.side-badge[hidden] { display: none !important; }
@media (max-width: 560px) { .chat-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } }

/* ================= Aile Kitabı butonu ================= */
.tl-book-btn { border: none; cursor: pointer; border-radius: 14px; padding: 0 18px; font-size: .92rem; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #b8860b, #9a6f08); box-shadow: 0 4px 12px rgba(154,111,8,.32);
  white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.tl-book-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(154,111,8,.42); }

/* ================= QR Kod penceresi ================= */
.pa-btn.qr { --c1: #5b6472; --c2: #3a4150; --sh: rgba(58,65,80,.3); }
.qr-backdrop { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center;
  background: rgba(8,20,15,.6); backdrop-filter: blur(4px); }
.qr-backdrop[hidden] { display: none; }
.qr-card { position: relative; background: #fff; border-radius: 22px; padding: 30px 34px; text-align: center;
  width: min(380px, 92%); box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: confPop .3s ease; }
.qr-close { position: absolute; top: 14px; right: 16px; border: none; background: #f0ece2; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 1rem; color: #5d4b2a; }
.qr-code { width: 220px; height: 220px; margin: 6px auto 16px; }
.qr-code svg { width: 100%; height: 100%; }
.qr-card strong { display: block; font-size: 1.3rem; color: #14532d; }
.qr-card small { color: #8a7a52; }
.qr-actions { display: flex; gap: 10px; justify-content: center; margin: 18px 0 10px; }
.qr-hint { color: #8a7a52; font-size: .8rem; line-height: 1.5; margin: 0; }
.btn-ghost { background: #fff; border: 1.5px solid #d9cfb6; color: #5d4b2a; }

/* ================= Gizlilik toggle + Tehlikeli Bölge ================= */
.pf-privacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 6px; }
label.pf-toggle { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; text-align: center;
  padding: 18px 16px; border: 1px solid #ece3cf; border-radius: 14px; background: #fbf8f0;
  box-shadow: 0 2px 8px rgba(60,45,20,.05); transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
label.pf-toggle:hover { border-color: #d9cfb6; box-shadow: 0 6px 16px rgba(60,45,20,.1); transform: translateY(-2px); }
.pf-toggle-txt { min-width: 0; }
.pf-toggle-txt strong { display: block; color: #33291a; font-size: .9rem; margin-bottom: 4px; }
.pf-toggle-txt small { color: #8a7a52; font-size: .78rem; line-height: 1.4; }
@media (max-width: 1100px) { .pf-privacy-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pf-privacy-grid { grid-template-columns: 1fr; } }
.pf-switch { position: relative; width: 50px; height: 28px; flex-shrink: 0; }
.pf-switch input { opacity: 0; width: 0; height: 0; }
.pf-slider { position: absolute; inset: 0; background: #cfc6b0; border-radius: 20px; cursor: pointer; transition: .25s; }
.pf-slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.pf-switch input:checked + .pf-slider { background: linear-gradient(135deg, #2f8d5b, #1f7d52); }
.pf-switch input:checked + .pf-slider::before { transform: translateX(22px); }
.danger-pill { background: #f2dede !important; color: #c0392b !important; }
.pf-danger { border: 1px solid #f0cfca; background: #fdf6f5; }
.pf-danger-note { color: #8a5a52; font-size: .9rem; line-height: 1.6; margin: 0 0 12px; }
.btn-danger { background: linear-gradient(135deg, #e05a5a, #c53030); color: #fff; border: none; }
.btn-danger:hover { background: linear-gradient(135deg, #ef6b6b, #d33b3b); }

/* ================= Bildirim Çanı ================= */
.notif-wrap { position: relative; }
.notif-wrap[hidden] { display: none; }
.notif-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(27,59,47,.14);
  background: #fff; color: #1b3b2f; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.notif-btn:hover { background: #eef4f0; }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  background: #e0393b; color: #fff; font-size: .68rem; font-weight: 800; border-radius: 10px; display: grid; place-items: center; border: 2px solid #fff; }
.notif-badge[hidden] { display: none; }
.notif-panel { position: absolute; top: 52px; right: 0; width: 340px; max-width: 88vw; background: #fff;
  border: 1px solid #e6ddc9; border-radius: 16px; box-shadow: 0 20px 50px rgba(30,40,30,.22); z-index: 1300;
  overflow: hidden; animation: confPop .22s ease;
  display: flex; flex-direction: column; max-height: min(72vh, calc(100vh - 88px)); }
.notif-panel[hidden] { display: none; }
.notif-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f0ece2; }
.notif-head strong { color: #14532d; }
.notif-clear { border: none; background: none; color: #b8860b; font-size: .78rem; cursor: pointer; font-weight: 600; }
.notif-clear:hover { text-decoration: underline; }
.notif-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
.notif-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none;
  background: none; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid #f6f2e8; transition: background .12s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #faf6ec; }
.notif-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; background: #eef6ef; }
.notif-item.friend .notif-ic { background: #e8f0fb; }
.notif-item.anniv .notif-ic { background: #fbf3dd; }
.notif-txt { min-width: 0; }
.notif-txt strong { display: block; color: #33291a; font-size: .92rem; }
.notif-txt small { color: #8a7a52; font-size: .8rem; }
.notif-empty { padding: 36px 16px; text-align: center; color: #8a7a52; }

/* ================= Köşe mini sohbet penceresi ================= */
.cw-panel { position: fixed; right: 24px; bottom: 96px; width: 640px; max-width: 92vw; height: 560px; max-height: 76vh;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(20,40,25,.32); z-index: 1250;
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e6ddc9; animation: confPop .24s ease; }
.cw-panel[hidden] { display: none; }
.cw-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: #fff;
  background: linear-gradient(135deg, #1b3b2f, #14532d); }
.cw-head strong { font-size: 1.05rem; }
.cw-head small { opacity: .8; font-size: .8rem; }
.cw-close { margin-left: auto; background: rgba(255,255,255,.15); border: none; color: #fff; width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; font-size: .95rem; }
.cw-close:hover { background: rgba(255,255,255,.28); }
.cw-body { flex: 1; display: flex; min-height: 0; }
.cw-side { width: 230px; border-right: 1px solid #eee6d5; display: flex; flex-direction: column; min-height: 0; background: #faf8f2; }
.cw-search { padding: 10px; }
.cw-search input { width: 100%; border: 1px solid #e0d7c0; border-radius: 10px; padding: 8px 12px; font-size: .88rem; background: #fff; }
.cw-list { flex: 1; overflow-y: auto; }
.cw-person { display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f2ede0; transition: background .12s; }
.cw-person:hover, .cw-person.active { background: #eef4ef; }
.cw-p-av { position: relative; flex-shrink: 0; }
.cw-uav { width: 40px; height: 40px; }
.cw-p-av .online-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2ecc71; border: 2px solid #fff; }
.cw-p-av .online-dot.off { background: #b9b9b9; }
.cw-p-info { min-width: 0; }
.cw-p-info strong { display: block; font-size: .88rem; color: #33291a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-p-info small { font-size: .74rem; color: #8a7a52; }
.cw-empty-note { padding: 18px; font-size: .82rem; color: #8a7a52; line-height: 1.5; }
.cw-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cw-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eee6d5; background: #fff; }
.cw-back { display: none; border: none; background: none; font-size: 1.5rem; color: #14532d; cursor: pointer; line-height: 1; }
.cw-peer-info { min-width: 0; }
.cw-peer-info strong { display: block; font-size: .92rem; color: #14532d; }
.cw-peer-info small { font-size: .76rem; color: #8a7a52; }
.cw-call-btns { margin-left: auto; display: flex; gap: 6px; }
.cw-call { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2e9e6b, #1f7d52); display: grid; place-items: center; }
.cw-call.video { background: linear-gradient(135deg, #3b82c4, #2563a8); }
.cw-scroll { flex: 1; overflow-y: auto; padding: 16px; background: #efe7d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000' fill-opacity='0.03'%3E%3Cpath d='M20 12a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/g%3E%3C/svg%3E"); }
.cw-scroll .dm-msg { max-width: 78%; }
.cw-empty { text-align: center; color: #8a7a52; padding: 60px 20px; }
.cw-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee6d5; background: #fff; }
.cw-input input { flex: 1; border: 1px solid #e0d7c0; border-radius: 20px; padding: 10px 16px; font-size: .9rem; outline: none; }
.cw-send { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #2f8d5b, #1f7d52); font-size: 1rem; }
@media (max-width: 560px) {
  .cw-panel { right: 8px; left: 8px; width: auto; bottom: 84px; height: 74vh; }
  .cw-side { width: 100%; }
  .cw-panel.thread-open .cw-side { display: none; }
  .cw-panel:not(.thread-open) .cw-thread { display: none; }
  .cw-back { display: block; }
}

/* ================= Sohbet gün/tarih ayıracı ================= */
.chat-daysep { display: flex; justify-content: center; margin: 14px 0; }
.chat-daysep span {
  background: rgba(255,255,255,.92); color: #5a6b5f; font-size: .74rem; font-weight: 600;
  padding: 5px 14px; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ================= Anı Emanet Et — medya yükleme alanı ================= */
.upload-drop { margin: 4px 0 6px; }
.upload-drop[hidden] { display: none; }
.upload-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 26px 20px; border: 2px dashed #cdbf9e; border-radius: 16px; background: #fbf8f0; color: #8a7a52; cursor: pointer; transition: .15s; }
.upload-drop-inner:hover, .upload-drop.drag .upload-drop-inner { border-color: #2d6a4f; background: #f0f6f1; color: #2d6a4f; }
.upload-drop-inner strong { color: #33291a; font-size: 1rem; }
.upload-drop-inner small { max-width: 420px; line-height: 1.5; }
.upload-preview { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #e6ddc9; background: #000; }
.upload-preview[hidden] { display: none; }
.upload-preview img, .upload-preview video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #111; }
.up-audiochip { padding: 22px; color: #fff; font-size: 1rem; text-align: center; }
.up-clear { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; border: none;
  padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: .82rem; }
.up-clear:hover { background: #c0392b; }

/* ================= Üye detayı — kod satırı ================= */
.detail-code-line { margin: 8px 0 2px; }
.detail-code { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #6b5a2e;
  background: rgba(212,175,55,.16); border: 1px solid rgba(212,175,55,.4);
  padding: 5px 14px; border-radius: 20px; cursor: pointer; transition: .15s; }
.detail-code:hover { background: rgba(212,175,55,.28); }

/* ================= Mobil / Responsive (uygulama) ================= */
.app-menu-toggle { display: none; background: none; border: none; color: #14532d; cursor: pointer; padding: 4px; margin-inline-end: 4px; }
.sidebar-scrim { display: none; }

@media (max-width: 860px) {
  .app-menu-toggle { display: inline-flex; align-items: center; }
  .app-topbar { gap: 10px; padding: 0 12px; height: 58px; }
  .brand-logo { height: 40px; }
  .app-brand .brand-text strong { font-size: .95rem; }
  .app-brand .brand-text small { display: none; }
  .topbar-status { display: none; }          /* durum rozetlerini gizle */
  .topbar-actions { gap: 8px; margin-inline-start: auto; }
  .user-name { display: none; }              /* sadece avatar */
  .lang-btn #langCurrent { display: none; }

  .app-shell { height: calc(100vh - 58px); position: relative; }
  .app-sidebar {
    position: fixed; top: 58px; bottom: 0; left: 0; width: 82vw; max-width: 300px; z-index: 60;
    background: #fff; box-shadow: 6px 0 30px rgba(0,0,0,.18);
    transform: translateX(-100%); transition: transform .28s ease; overflow-y: auto;
  }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-scrim { display: block; position: fixed; inset: 58px 0 0 0; background: rgba(10,20,15,.45);
    opacity: 0; pointer-events: none; transition: opacity .28s; z-index: 55; }
  .sidebar-scrim.show { opacity: 1; pointer-events: auto; }
  .side-item { font-size: 1rem; padding: 13px 16px; }

  .app-main { padding: 16px 14px 90px; }
  .view-head h1 { font-size: 1.5rem; }
  .view-head p { font-size: .9rem; }

  /* Sohbet: tek sütun (liste → sohbet) */
  .dm-layout { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .dm-layout .dm-side { border-inline-end: none; border-bottom: 1px solid var(--line); max-height: 38vh; }

  /* Üye detayı aksiyonları yatay kaydırılabilir */
  #view-member .profile-actions.top .profile-actions-inner { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  #view-member .profile-actions.top .pa-btn { flex: 0 0 auto; }
  .profile-cols { grid-template-columns: 1fr; }
  .profile-hero { padding: 30px 18px 24px; }
  .profile-hero h3 { font-size: 1.7rem; }

  /* Bilgelik odası kişi ızgarası */
  .cp-grid { grid-template-columns: repeat(2, 1fr); }
  /* Zaman tüneli araç çubuğu */
  .tl-tools { flex-direction: column; }
  .tl-book-btn { width: 100%; padding: 12px; }
  /* Röportaj başlığı */
  .iv-setup-card .btn { width: 100%; }
  /* Bildirim paneli tam genişlik */
  .notif-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; max-width: none; }
  /* Aile kitabı / mini sohbet zaten mobil kurallı */
}

@media (max-width: 480px) {
  .cp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .detail-chips { gap: 6px; }
  .detail-chips .chip { font-size: .72rem; padding: 5px 11px; }
  .view-head { padding: 16px 16px; }
}

/* ================= Yaşarken Hazırlık (Avatar Olgunluğu) ================= */
.pf-prep .prep-loading { color: #8a7a52; }
.prep-intro { color: #4a3f28; line-height: 1.6; margin: 0 0 14px; }
.prep-intro small { color: #8a7a52; }
.prep-meter { background: #faf6ec; border: 1px solid #ece3cf; border-radius: 14px; padding: 14px 16px; }
.prep-meter-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.prep-meter-top strong { color: #33291a; }
.prep-pct { font-weight: 800; color: #1f7d52; }
.prep-bar { height: 12px; border-radius: 8px; background: #e6ddc9; overflow: hidden; }
.prep-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2f8d5b, #b8860b); transition: width .6s ease; }
.prep-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.prep-chip { background: #fff; border: 1px solid #e6ddc9; border-radius: 20px; padding: 6px 13px; font-size: .82rem; color: #5d4b2a; font-weight: 600; }
.prep-chip.on { background: #eef6ef; border-color: #bfe0c9; color: #1f7d52; }
.prep-sugg { margin: 0 0 14px; padding-left: 20px; color: #6b5a2e; line-height: 1.7; font-size: .9rem; }
.prep-when { color: #8a7a52; font-size: .82rem; align-self: center; }

/* ================= Yaşarken Hazırlık v2 — gösterge + seviye yolu ================= */
.prep-hero { display: flex; gap: 22px; align-items: center; background: #faf6ec; border: 1px solid #ece3cf;
  border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; flex-wrap: wrap; }
.prep-gauge { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.prep-arc { transition: stroke-dashoffset 1s ease; }
.prep-gauge-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.prep-gauge-ic { font-size: 1.3rem; line-height: 1; }
.prep-gauge-mid b { font-size: 1.25rem; color: #1f7d52; }
.prep-gauge-mid small { font-size: .72rem; color: #8a7a52; font-weight: 700; }
.prep-hero-right { flex: 1; min-width: 240px; }
.prep-path { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.prep-step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; }
.prep-step-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  background: #fff; border: 2px solid #e0d7c0; filter: grayscale(1); opacity: .55; transition: .2s; }
.prep-step small { font-size: .66rem; color: #a79b7d; font-weight: 700; }
.prep-step.done .prep-step-ic { filter: none; opacity: 1; border-color: #2f8d5b; background: #eef6ef; }
.prep-step.done small { color: #1f7d52; }
.prep-step.cur .prep-step-ic { filter: none; opacity: 1; border-color: #d4af37; background: #fbf3dd;
  box-shadow: 0 0 0 4px rgba(212,175,55,.18); transform: scale(1.12); }
.prep-step.cur small { color: #b8860b; }
.prep-step-line { flex: 1; height: 3px; border-radius: 2px; background: #e6ddc9; min-width: 12px; margin-bottom: 14px; }
.prep-step-line.done { background: linear-gradient(90deg, #2f8d5b, #b8860b); }
.prep-next { margin: 0; color: #6b5a2e; font-size: .9rem; }
.prep-next.done { color: #1f7d52; font-weight: 600; }
.prep-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.prep-cat { background: #fff; border: 1px solid #ece3cf; border-radius: 12px; padding: 12px 14px; }
.prep-cat-top { display: flex; justify-content: space-between; font-size: .85rem; color: #4a3f28; margin-bottom: 8px; }
.prep-cat-top b { color: #1f7d52; }
.prep-cat-bar { height: 8px; border-radius: 6px; background: #f0ece2; overflow: hidden; }
.prep-cat-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2f8d5b, #b8860b); transition: width .7s ease; }
.prep-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.prep-act { text-align: left; background: #fff; border: 1px solid #e6ddc9; border-radius: 12px; padding: 11px 15px;
  color: #6b5a2e; font-size: .88rem; cursor: pointer; transition: .15s; font-family: inherit; }
.prep-act:hover { border-color: #2f8d5b; color: #1f7d52; background: #f4faf5; transform: translateX(3px); }
@media (max-width: 620px) { .prep-cats { grid-template-columns: 1fr; } .prep-hero { justify-content: center; } }

/* Admin: eksik servis uyarı kartı */
.sec-card.warn { border-color: #f0d9a8; background: #fdf8ec; }
.sec-card.warn h3 { color: #9a6f08; }
.sec-card.warn p { color: #8a6d2f; }

/* ================= Şikayet kartı — tek satır çerçeveli başlık + MNSKY kodu ================= */
.pf-report .pf-report-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  background: linear-gradient(135deg, #f4f9f4, #fbf7ec);
  border: 1px solid #e0d9c4; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; overflow: hidden;
}
.pf-rcode {
  font-family: ui-monospace, monospace; font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  background: linear-gradient(135deg, #14532d, #1b6e4a); color: #fff;
  padding: 5px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(20,83,45,.25); transition: transform .15s;
}
.pf-rcode:hover { transform: translateY(-1px); }
.pf-rtitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #33291a; }
.pf-report-top .pf-rdate { color: #8a7a52; font-size: .78rem; white-space: nowrap; flex-shrink: 0; }
.pf-report-top .pf-rstatus { flex-shrink: 0; }
.rd-code { font-family: ui-monospace, monospace; font-size: .78rem; background: rgba(20,83,45,.08);
  color: #14532d; border: 1px solid rgba(20,83,45,.2); padding: 4px 10px; border-radius: 8px; cursor: pointer; }
@media (max-width: 640px) {
  .pf-report .pf-report-top { flex-wrap: wrap; }
  .pf-rtitle { white-space: normal; flex-basis: 100%; order: 5; }
}

/* ================= Emanet Kasası — liste görünümü + filtre ================= */
.vault-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.vt-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d9cfb6; border-radius: 14px; padding: 0 14px; color: #8a7a52; }
.vt-search input { flex: 1; border: none; outline: none; padding: 12px 0; font-size: .95rem; background: transparent; color: #3a2f18; font-family: var(--sans); }
.vault-tools select { border: 1px solid #d9cfb6; border-radius: 14px; padding: 11px 14px; background: #fff; font-size: .92rem; color: #3a2f18; font-family: var(--sans); }
.vt-count { margin-left: auto; background: #eef6ef; color: #1f7d52; font-weight: 700; font-size: .82rem; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }

.vault-list.list-mode { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.vault-item.row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; width: 100%; }
.vault-item.row:hover { transform: translateX(4px); }
.vault-item.row .v-ic { font-size: 1.4rem; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #faf6ec; border: 1px solid #ece3cf; }
.vault-item.row .v-main { flex: 1; min-width: 0; }
.vault-item.row .v-line1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.vault-item.row .v-title { font-size: .98rem; color: var(--text); }
.vault-item.row .vault-badge { margin-left: auto; }
.vault-item.row .v-meta { margin: 0 0 6px; }
.vault-item.row .v-hash { margin: 0; }
@media (max-width: 640px) {
  .vault-tools select { flex: 1; }
  .vt-count { margin-left: 0; }
  .vault-item.row .vault-badge { margin-left: 0; }
}

/* ================= Hafıza Ağacı — özel efektler ================= */
/* Yumuşak aurora zemin */
.famtree2 { position: relative; }
#genChart {
  background:
    radial-gradient(ellipse 40% 50% at 15% 8%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(ellipse 45% 55% at 85% 20%, rgba(45,106,79,.09), transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(64,145,108,.07), transparent 65%);
}
/* Kartlar kademeli belirir */
@keyframes gcIn { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
.famtree2 .gc-node { animation: gcIn .55s cubic-bezier(.2,.8,.3,1.1) both; }
/* Hover: kalkma + gradyan ışıltı çerçevesi */
.famtree2 .gc-node { transition: transform .22s ease, box-shadow .22s ease; position: relative; }
.famtree2 .gc-node:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 18px 40px rgba(20,60,35,.2); z-index: 5; }
.famtree2 .gc-node::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: linear-gradient(135deg, rgba(45,106,79,.65), rgba(212,175,55,.7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .22s;
}
.famtree2 .gc-node:hover::after { opacity: 1; }
/* Fotoğraf halkaları: yaşayanlar yeşil nefes, vefat edenler altın ışıltı */
@keyframes gcBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,.38); } 50% { box-shadow: 0 0 0 9px rgba(46,204,113,0); } }
@keyframes gcHalo { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.4); } 50% { box-shadow: 0 0 0 9px rgba(212,175,55,0); } }
.famtree2 .gc-node.live .gc-photo { animation: gcBreathe 3.2s ease-in-out infinite; border-radius: 50%; }
.famtree2 .gc-node.memorial .gc-photo { animation: gcHalo 4s ease-in-out infinite; border-radius: 50%; }
/* Çift kalpleri atar */
@keyframes heartBeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.3); } 24% { transform: scale(1); } 36% { transform: scale(1.22); } 48% { transform: scale(1); } }
.gc-heart { animation: heartBeat 1.8s ease-in-out infinite; transform-origin: center; }
@media (max-width: 640px) { .gc-heart { animation: none; } }

/* ================= Üye Detayı — özel efektler ================= */
/* Hero öğeleri sırayla belirir */
@keyframes mdUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#view-member .profile-hero .detail-photo { animation: mdUp .5s ease both; }
#view-member .profile-hero h3 { animation: mdUp .5s ease .08s both; }
#view-member .profile-hero .detail-years { animation: mdUp .5s ease .14s both; }
#view-member .profile-hero .detail-code-line { animation: mdUp .5s ease .2s both; }
#view-member .detail-chips .chip { animation: mdUp .45s ease both; }
#view-member .detail-chips .chip:nth-child(1) { animation-delay: .26s; }
#view-member .detail-chips .chip:nth-child(2) { animation-delay: .34s; }
#view-member .detail-chips .chip:nth-child(3) { animation-delay: .42s; }
#view-member .detail-chips .chip:nth-child(4) { animation-delay: .5s; }
/* Fotoğrafta dönen altın ışık halkası */
#view-member .profile-hero .detail-photo { position: relative; }
#view-member .profile-hero .detail-photo::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(212,175,55,.85) 82%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: photoOrbit 4.5s linear infinite;
}
@keyframes photoOrbit { to { transform: rotate(360deg); } }
/* Rozetler hover'da zıplar */
#view-member .detail-chips .chip { transition: transform .18s; cursor: default; }
#view-member .detail-chips .chip:hover { transform: translateY(-3px) scale(1.06); }
/* Aksiyon butonları: giriş + parlama süpürmesi */
#view-member .profile-actions-inner .pa-btn { animation: mdUp .4s ease both; position: relative; overflow: hidden; }
#view-member .profile-actions-inner .pa-btn:nth-child(1) { animation-delay: .1s; }
#view-member .profile-actions-inner .pa-btn:nth-child(2) { animation-delay: .16s; }
#view-member .profile-actions-inner .pa-btn:nth-child(3) { animation-delay: .22s; }
#view-member .profile-actions-inner .pa-btn:nth-child(4) { animation-delay: .28s; }
#view-member .profile-actions-inner .pa-btn:nth-child(5) { animation-delay: .34s; }
#view-member .profile-actions-inner .pa-btn:nth-child(6) { animation-delay: .4s; }
#view-member .profile-actions-inner .pa-btn:nth-child(7) { animation-delay: .46s; }
#view-member .profile-actions-inner .pa-btn:nth-child(8) { animation-delay: .52s; }
#view-member .profile-actions-inner .pa-btn:nth-child(9) { animation-delay: .58s; }
#view-member .profile-actions-inner .pa-btn:nth-child(10){ animation-delay: .64s; }
#view-member .pa-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; left: -55px; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transition: none;
}
#view-member .pa-btn:hover::before { animation: paShine .7s ease; }
@keyframes paShine { from { left: -55px; } to { left: 120%; } }
/* Medya küçük resimleri: hover'da yakınlaş */
#view-member .media-card { overflow: hidden; transition: transform .2s, box-shadow .2s; }
#view-member .media-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,60,35,.16); }
#view-member .media-thumb { transition: transform .35s ease; }
#view-member .media-card:hover .media-thumb { transform: scale(1.06); }
/* Bölüm başlıkları hover'da altın alt çizgi */
#view-member .detail-section label { position: relative; }
#view-member .detail-section label::after {
  content: ""; position: absolute; left: 10px; right: 100%; bottom: -3px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, #2d6a4f, #d4af37); transition: right .3s ease;
}
#view-member .detail-section:hover label::after { right: 10px; }

/* Şikayet: yanıtla + çözümle butonları */
.rd-reply-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rd-reply-actions .btn small { font-weight: 500; opacity: .75; font-size: .74rem; }
.rd-open-note { color: #b8860b; font-weight: 600; font-size: .78rem; }

/* ================= Kenar çubuğu alt bölümü — canlı ================= */
.sidebar-foot {
  margin-top: auto; padding: 16px 14px 18px; position: relative;
  background: linear-gradient(170deg, rgba(45,106,79,.06), rgba(212,175,55,.08));
  border-radius: 16px; border: 1px solid rgba(45,106,79,.1);
}
.sidebar-foot::before {
  content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #2d6a4f, #40916c, #d4af37);
  background-size: 200% auto; animation: quoteShine2 5s linear infinite;
}
@keyframes quoteShine2 { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.side-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700; color: #1b6e4a; margin-bottom: 14px;
  background: #fff; border: 1px solid rgba(45,106,79,.18); border-radius: 20px; padding: 7px 14px;
  box-shadow: 0 3px 10px rgba(27,59,47,.08);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.side-back:hover { color: #14532d; text-decoration: none; transform: translateX(-3px);
  background: #f0f7f1; box-shadow: 0 6px 16px rgba(27,59,47,.14); }
.side-quote {
  position: relative; padding-left: 18px; margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: .92rem; line-height: 1.45;
  background: linear-gradient(110deg, #14532d 20%, #b8860b 50%, #14532d 80%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: quoteShine 7s ease-in-out infinite;
}
.side-quote::before {
  content: "“"; position: absolute; left: -2px; top: -12px;
  font-size: 2.2rem; line-height: 1; color: rgba(212,175,55,.55); -webkit-text-fill-color: rgba(212,175,55,.55);
}

/* ================= Genel Bakış — şov: sayaçlar + grafikler ================= */
.admin-stat { animation: gcIn .5s cubic-bezier(.2,.8,.3,1.15) both; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s; }
.admin-stat:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 34px rgba(20,60,35,.22); z-index: 3; }
.admin-stat::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; left: -70px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); pointer-events: none;
  animation: navBtnShine2 4.2s ease-in-out infinite; }
.admin-stat:nth-child(3n)::after { animation-delay: 1.4s; }
.admin-stat:nth-child(3n+1)::after { animation-delay: 2.8s; }
@keyframes navBtnShine2 { 0%, 60% { left: -70px; } 90%, 100% { left: 130%; } }
.admin-stat .as-ic { animation: csFloat 4s ease-in-out infinite; }

.admin-charts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin: 20px 0 26px; }
@media (max-width: 900px) { .admin-charts { grid-template-columns: 1fr; } }
.ac-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(27,59,47,.07); animation: gcIn .5s .3s both; }
.ac-card h3 { font-size: .95rem; color: #14532d; margin: 0 0 14px; }

/* Çubuk grafik */
.ac-bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 0 4px; }
.ac-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; height: 100%; }
.ac-bar-col b { font-size: .82rem; color: #1f7d52; }
.ac-bar { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end;
  background: #f3efe4; border-radius: 10px; overflow: hidden; }
.ac-bar span { display: block; width: 100%; height: var(--h, 0%); border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #d4af37, #2f8d5b); animation: acGrow 1s cubic-bezier(.2,.8,.3,1) both;
  box-shadow: 0 0 12px rgba(45,141,91,.35) inset; }
@keyframes acGrow { from { height: 0; } to { height: var(--h, 0%); } }
.ac-bar-col small { font-size: .68rem; color: #8a7a52; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.ac-bar-col:hover .ac-bar span { filter: brightness(1.12); }

/* Halka grafik */
.ac-donut-wrap { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ac-seg { stroke-dasharray: 0 277; transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.3,1), stroke-dashoffset 1.2s cubic-bezier(.2,.8,.3,1); }
.ac-donut-mid { position: absolute; left: 0; width: 132px; top: 50%; transform: translateY(-50%);
  text-align: center; pointer-events: none; }
.ac-donut-mid b { display: block; font-family: var(--serif); font-size: 1.5rem; color: #14532d; }
.ac-donut-mid small { color: #8a7a52; font-size: .72rem; font-weight: 700; }
.ac-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-legend li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #4a3f28; }
.ac-legend i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.ac-legend b { color: #14532d; }
.ac-legend small { color: #8a7a52; }

/* Genel Bakış: 9 kart daima eşit dolsun (9'un bölenleri: 9 / 3) */
.admin-stats { grid-template-columns: repeat(9, 1fr); }
.admin-stat { padding: 16px 8px; }
.admin-stat .as-frame { min-width: 0; width: 86%; }
@media (max-width: 1350px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } }

/* ================= Kılavuz kartları — animasyonlu sahne şeridi ================= */
.gd-card.viz { flex-direction: column; gap: 12px; }
.gd-viz {
  height: 96px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(140deg, #f4f9f2, #fbf6e8); border: 1px solid rgba(27,59,47,.08);
  overflow: hidden; position: relative;
}
.gd-viz .gt-big { font-size: 2rem; }
.gd-viz .gt-tree { transform: scale(.82); }
.gd-viz .gt-chat { width: 92%; }
.gd-viz .gt-gauge { width: 72%; }
.gd-card.viz .gd-body strong { font-size: .95rem; }

/* Üye detayı başlığı: sticky kaldırıldı — kaydırırken üst barla çakışıp bozuyordu */
.member-page-head { position: static; top: auto; }

/* ================= Bilgelik sohbeti — üstte geri dön ================= */
.chamber-back-top {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(45,106,79,.25); background: #fff; color: #1b6e4a;
  font-weight: 700; font-size: .8rem; font-family: var(--sans);
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  box-shadow: 0 3px 9px rgba(27,59,47,.1); transition: transform .15s, background .15s;
}
.chamber-back-top:hover { transform: translateX(-3px); background: #eef6f0; }

/* ================= Yaşarken Hazırlık — canlı efektler ================= */
.prep-hero { animation: gcIn .5s ease both; }
.prep-step { animation: gcIn .45s cubic-bezier(.2,.8,.3,1.15) both; }
.prep-step:nth-child(1) { animation-delay: .1s; }
.prep-step:nth-child(3) { animation-delay: .22s; }
.prep-step:nth-child(5) { animation-delay: .34s; }
.prep-step:nth-child(7) { animation-delay: .46s; }
.prep-step:nth-child(9) { animation-delay: .58s; }
/* Mevcut seviye nabız atar */
@keyframes prepCur { 0%,100% { box-shadow: 0 0 0 4px rgba(212,175,55,.18); } 50% { box-shadow: 0 0 0 10px rgba(212,175,55,0); } }
.prep-step.cur .prep-step-ic { animation: prepCur 2.2s ease-in-out infinite; }
.prep-gauge-ic { animation: csFloat 3.5s ease-in-out infinite; display: inline-block; }
/* Kategori kutuları sırayla belirir */
.prep-cat { animation: gcIn .45s ease both; }
.prep-cats .prep-cat:nth-child(1) { animation-delay: .15s; }
.prep-cats .prep-cat:nth-child(2) { animation-delay: .27s; }
.prep-cats .prep-cat:nth-child(3) { animation-delay: .39s; }
.prep-cats .prep-cat:nth-child(4) { animation-delay: .51s; }
/* Öneri butonları kayarak gelir */
.prep-act { animation: mdUp .4s ease both; }
.prep-actions .prep-act:nth-child(1) { animation-delay: .55s; }
.prep-actions .prep-act:nth-child(2) { animation-delay: .67s; }
.prep-actions .prep-act:nth-child(3) { animation-delay: .79s; }
.prep-actions .prep-act:nth-child(4) { animation-delay: .91s; }
/* Güçlendir butonundan ışık süpürmesi */
#prepRunBtn { position: relative; overflow: hidden; }
#prepRunBtn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px; left: -70px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  animation: navBtnShine2 3.6s ease-in-out infinite; pointer-events: none;
}

/* ================= Tehlikeli Bölge — yeniden tasarım ================= */
.pf-danger {
  position: relative; overflow: hidden;
  border: 1.5px solid #f2c1bb !important;
  background: linear-gradient(160deg, #fff, #fdf3f1) !important;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
/* Üstte akan uyarı şeridi */
.pf-danger::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(45deg, #e05a5a 0 14px, #f5d24e 14px 28px);
  background-size: 40px 6px; animation: dzStripes 1.6s linear infinite;
}
@keyframes dzStripes { from { background-position: 0 0; } to { background-position: 40px 0; } }
/* Büyük nabız atan uyarı ikonu */
.pf-danger::after {
  content: "⚠️"; font-size: 2.2rem; order: -1; flex-shrink: 0;
  width: 64px; height: 64px; display: grid; place-items: center;
  background: #fff; border: 2px solid #f0cfca; border-radius: 18px;
  box-shadow: 0 6px 16px rgba(192,57,43,.15);
  animation: dzWarn 2s ease-in-out infinite;
}
@keyframes dzWarn {
  0%, 100% { transform: rotate(0) scale(1); box-shadow: 0 6px 16px rgba(192,57,43,.15), 0 0 0 0 rgba(224,90,90,.35); }
  12% { transform: rotate(-8deg) scale(1.06); }
  24% { transform: rotate(8deg) scale(1.06); }
  36% { transform: rotate(0) scale(1); }
  50% { box-shadow: 0 6px 16px rgba(192,57,43,.15), 0 0 0 12px rgba(224,90,90,0); }
}
.pf-danger .pf-danger-note { flex: 1; min-width: 240px; margin: 0; }
.pf-danger .pf-set-actions { flex-basis: 100%; margin: 0; }
.pf-danger .btn-danger {
  position: relative; overflow: hidden; width: 100%;
  box-shadow: 0 8px 22px rgba(197,48,48,.3);
  transition: transform .18s, box-shadow .18s;
}
.pf-danger .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(197,48,48,.42); }
.pf-danger .btn-danger::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40px; left: -60px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  animation: navBtnShine2 4.5s ease-in-out infinite; pointer-events: none;
}

/* ================= Şikayet destek sistemi: kapalı kart + yazışma + yıldız ================= */
details.pf-report { padding: 0; overflow: hidden; }
details.pf-report > summary { list-style: none; cursor: pointer; margin-bottom: 0 !important; border-radius: 0 !important; border: none !important; }
details.pf-report > summary::-webkit-details-marker { display: none; }
.pf-caret { margin-left: 4px; color: #b8860b; transition: transform .25s; flex-shrink: 0; }
details.pf-report[open] .pf-caret { transform: rotate(180deg); }
details.pf-report > summary:hover { filter: brightness(.98); }
.pf-rbody { padding: 14px 16px 18px; border-top: 1px dashed #e6ddc9; animation: mdUp .3s ease; }
.pf-rbody .pf-rmsg { margin-top: 0; }

/* Yazışma balonları */
.pf-thread { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.pf-tmsg { max-width: 88%; padding: 10px 14px; border-radius: 13px; }
.pf-tmsg p { margin: 4px 0 0; line-height: 1.5; color: #33291a; }
.pf-tmsg-h { font-size: .76rem; font-weight: 700; color: #6b5a2e; }
.pf-tmsg.staff { align-self: flex-start; background: #eef6ef; border: 1px solid #cfe6d6; border-bottom-left-radius: 4px; }
.pf-tmsg.staff .pf-tmsg-h { color: #1f7d52; }
.pf-tmsg.user { align-self: flex-end; background: #fbf3dd; border: 1px solid #ecd9a8; border-bottom-right-radius: 4px; }
.pf-tmsg.user .pf-tmsg-h { color: #9a6f08; }

/* Kullanıcı yorum formu */
.pf-comment { display: flex; gap: 10px; margin-top: 12px; }
.pf-comment input { flex: 1; border: 1.5px solid #d9cfb6; border-radius: 12px; padding: 11px 14px;
  font-family: var(--sans); font-size: .92rem; background: #fbf8f0; }
.pf-comment input:focus { outline: none; border-color: #2d6a4f; }

/* Yıldızlı puanlama */
.pf-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  background: #fbf7ec; border: 1px solid #ecd9a8; border-radius: 12px; padding: 12px 16px; }
.pf-rate span:first-child { font-weight: 600; color: #6b5a2e; font-size: .9rem; }
.pf-stars { display: inline-flex; gap: 2px; }
.pf-stars button { border: none; background: none; cursor: pointer; font-size: 1.7rem; line-height: 1;
  color: #ddd0ac; transition: transform .12s, color .12s; padding: 0 2px; }
.pf-stars button.lit, .pf-stars button:hover { color: #f3b71c; transform: scale(1.2); }
.pf-rate.done { color: #1f7d52; font-weight: 600; }
.pf-stars-view { color: #f3b71c; font-size: 1.15rem; letter-spacing: 2px; }

/* Admin: yazışma + puan */
.rd-thread { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.rd-thread h4 { margin: 0 0 12px; color: #14532d; }
.rd-thread .pf-tmsg { max-width: 78%; }
.rd-rating { margin: 6px 0 0; color: #6b5a2e; font-weight: 600; }

/* Yetkili listesi: destek puanı rozeti */
.staff-stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .84rem;
  color: #9a6f08; background: #fbf3dd; border: 1px solid #ecd9a8; padding: 5px 11px; border-radius: 16px; white-space: nowrap; }
.staff-stars small { font-weight: 600; color: #b8a878; }
.staff-stars.none { opacity: .55; }

/* ================= Röportaj Modu — görsel animasyonlar ================= */
/* Sahne yumuşak girer */
.iv-stage { animation: gcIn .45s ease both; }
/* Zemine sıcak aurora ışıltıları */
.iv-scroll {
  background-image:
    radial-gradient(ellipse 45% 55% at 12% 8%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(ellipse 45% 55% at 88% 90%, rgba(45,106,79,.09), transparent 62%),
    linear-gradient(160deg, #fbf7ec, #f3ecd8);
}
/* Sorular soldan süzülür, cevaplar sağdan gelir */
@keyframes ivInL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes ivInR { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.iv-msg.iv-q { animation: ivInL .38s cubic-bezier(.2,.8,.3,1.1) both; }
.iv-msg.iv-a { animation: ivInR .38s cubic-bezier(.2,.8,.3,1.1) both; }
.iv-msg .iv-bubble { transition: box-shadow .2s; }
.iv-msg:hover .iv-bubble { box-shadow: 0 6px 16px rgba(60,45,20,.14); }
/* Mikrofon avatarı canlı: süzülür + konuşma halkası yayar */
.iv-ava { animation: csFloat 3.5s ease-in-out infinite; position: relative; }
.iv-ava::after { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(217,122,30,.5); animation: csTalk 2.2s ease-out infinite; }
/* Sayaç: yeni anıda zıplar */
@keyframes ivBump { 0% { transform: scale(1); } 40% { transform: scale(1.25); background: #d9f2e2; } 100% { transform: scale(1); } }
.iv-count.bump { animation: ivBump .5s cubic-bezier(.2,.8,.3,1.4); }
/* Gönder butonu: ışık süpürmesi + hover kalkış */
#ivSendBtn { position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
#ivSendBtn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(154,111,8,.35); }
#ivSendBtn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38px; left: -58px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  animation: navBtnShine2 4.2s ease-in-out infinite; pointer-events: none; }
/* Mikrofon butonu: bekleme nabzı */
@keyframes ivMicIdle { 0%,100% { box-shadow: 0 0 0 0 rgba(31,125,82,.25); } 50% { box-shadow: 0 0 0 8px rgba(31,125,82,0); } }
.iv-mic { animation: ivMicIdle 2.6s ease-in-out infinite; }
.iv-mic.recording { animation: ringPulse 1.2s infinite; }
/* Geçmiş röportaj kartları: hover kalkış + avatar halkası */
.ivh-card { transition: transform .18s, box-shadow .18s; }
.ivh-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(60,45,20,.12); }
.ivh-av { animation: gcHalo 4s ease-in-out infinite; border-radius: 50%; }
.ivh-card[open] .ivh-body { animation: mdUp .3s ease; }
.ivh-qa { transition: transform .15s, box-shadow .15s; }
.ivh-qa:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(60,45,20,.1); }

/* ================= 🎬 Sinema Modu — Zaman Tüneli şovu ================= */
.tl-cine-btn {
  border: none; cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: .9rem;
  color: #fff; background: linear-gradient(135deg, #1b1b2f, #40315e);
  padding: 12px 20px; border-radius: 14px; position: relative; overflow: hidden;
  box-shadow: 0 8px 20px rgba(27,27,47,.35); transition: transform .18s, box-shadow .18s;
}
.tl-cine-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(64,49,94,.45); }
.tl-cine-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px; left: -66px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  animation: navBtnShine2 3.8s ease-in-out infinite; pointer-events: none;
}

.cine { position: relative; margin: 6px 0 26px; animation: gcIn .6s cubic-bezier(.2,.8,.3,1.1) both; }
/* Projektör ışık hüzmesi */
.cine-beam {
  position: absolute; left: 50%; top: -40px; width: 120%; height: 90px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0, rgba(255,236,170,.35), transparent 65%);
  pointer-events: none; z-index: 1; animation: cineBeam 6s ease-in-out infinite;
}
@keyframes cineBeam { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* Perde: yanlarda kadife kıvrımlar */
.cine-screen {
  position: relative; overflow: hidden; height: min(58vh, 480px); min-height: 300px;
  border-radius: 18px; background: #101018;
  border: 10px solid #2a1a1a; border-top-width: 14px; border-bottom-width: 14px;
  box-shadow: 0 24px 60px rgba(10,10,20,.5), inset 0 0 80px rgba(0,0,0,.7);
}
.cine-screen::before, .cine-screen::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(90deg, #7a1024 0 10px, #5c0a1a 10px 20px);
  box-shadow: inset -8px 0 14px rgba(0,0,0,.5);
}
.cine-screen::before { left: 0; border-radius: 8px 60% 60% 8px / 8px 50% 50% 8px; }
.cine-screen::after  { right: 0; transform: scaleX(-1); border-radius: 8px 60% 60% 8px / 8px 50% 50% 8px; }
.cine.lights .cine-screen::before { animation: cineCur 1.4s cubic-bezier(.3,.9,.3,1) both; }
.cine.lights .cine-screen::after  { animation: cineCur 1.4s cubic-bezier(.3,.9,.3,1) both; }
@keyframes cineCur { from { width: 52%; } to { width: 54px; } }

/* Eski film titremesi */
.cine-flicker {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(255,244,214,.05); mix-blend-mode: overlay;
  animation: cineFlick .9s steps(3) infinite;
}
@keyframes cineFlick { 0% { opacity: .12; } 50% { opacity: .04; } 100% { opacity: .1; } }

/* Slayt katmanları: çapraz geçiş */
.cine-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1.1s ease, transform 1.1s ease; z-index: 2; }
.cine-slide.on { opacity: 1; transform: scale(1); z-index: 3; }
.cine-img { width: 100%; height: 100%; object-fit: cover; animation: cineKen 12s ease-in-out both; filter: sepia(.12) contrast(1.04); }
@keyframes cineKen { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.16) translate(-2.5%, -2%); } }

/* Metin anıları: sinema perdesinde alıntı */
.cine-textbg {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 30px 84px; text-align: center;
  background: radial-gradient(circle at 50% 30%, #2c2c4a, #14141f 75%);
}
.cine-avbig { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(240,210,130,.7);
  box-shadow: 0 0 30px rgba(240,210,130,.35); animation: csFloat 4s ease-in-out infinite; }
.cine-quote-ic { font-size: 3rem; color: rgba(240,210,130,.8); line-height: 1; animation: csFloat 4s ease-in-out infinite; }
.cine-quote { margin: 0; max-width: 640px; color: #f4ead0; font-family: Georgia, serif;
  font-style: italic; font-size: clamp(1rem, 2.2vw, 1.35rem); line-height: 1.7; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  animation: mdUp .9s ease .3s both; }

/* Dev yıl damgası */
.cine-year {
  position: absolute; top: 14px; right: 68px; z-index: 5; pointer-events: none;
  font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: 2px;
  color: rgba(244,224,160,.9); text-shadow: 0 0 24px rgba(240,200,110,.5);
}
.cine-year.pop { animation: cineYear .8s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes cineYear { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: scale(1); } }

/* Alt yazı bandı */
.cine-cap {
  position: absolute; left: 54px; right: 54px; bottom: 0; z-index: 5;
  padding: 34px 22px 16px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent, rgba(8,8,14,.88));
  animation: mdUp .8s ease .25s both;
}
.cine-cap strong { color: #ffe9b3; font-size: 1.1rem; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.cine-cap small { color: #cfc3a0; font-size: .82rem; }

/* Kumanda */
.cine-ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; position: relative; z-index: 2; }
.cine-ctrl button {
  border: 1px solid rgba(64,49,94,.3); background: #fff; color: #2b2440; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(27,27,47,.18); transition: transform .15s, background .15s;
}
.cine-ctrl button:hover { transform: scale(1.12); background: #f3eefc; }
.cine-idx { font-weight: 800; font-size: .85rem; color: #5d5477; min-width: 64px; text-align: center; }

/* Seyirci silüetleri */
.cine-crowd { display: flex; justify-content: center; gap: 14px; margin-top: 10px; overflow: hidden; }
.cine-crowd i {
  width: 34px; height: 22px; background: #241d33; border-radius: 17px 17px 0 0; position: relative; opacity: .85;
  animation: crowdBob 3.4s ease-in-out infinite;
}
.cine-crowd i::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: #241d33;
}
.cine-crowd i:nth-child(2n) { animation-delay: .6s; }
.cine-crowd i:nth-child(3n) { animation-delay: 1.2s; }
.cine-crowd i:nth-child(5n) { animation-delay: 1.8s; }
@keyframes crowdBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Zaman tüneli listesi: film şeridi girişleri */
.tl-item { animation: tlIn .55s cubic-bezier(.2,.8,.3,1.1) both; }
.tl-year { animation: tlIn .55s ease both; }
@keyframes tlIn { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.tl-item .tl-dot { animation: prepCur 2.4s ease-in-out infinite; }
.tl-item .tl-card { transition: transform .2s, box-shadow .2s; }
.tl-item:hover .tl-card { transform: translateY(-3px) scale(1.005); box-shadow: 0 14px 32px rgba(27,59,47,.14); }

/* Mobil */
@media (max-width: 640px) {
  .cine-screen { height: 52vw; min-height: 240px; border-width: 6px; border-top-width: 9px; border-bottom-width: 9px; }
  .cine-screen::before, .cine-screen::after { width: 26px; }
  .cine.lights .cine-screen::before, .cine.lights .cine-screen::after { animation: none; }
  .cine-cap { left: 26px; right: 26px; padding: 24px 12px 10px; }
  .cine-cap strong { font-size: .95rem; }
  .cine-year { right: 36px; top: 8px; }
  .cine-textbg { padding: 20px 40px; }
  .cine-avbig { width: 68px; height: 68px; }
  .cine-crowd i:nth-child(n+7) { display: none; }
  .cine-ctrl button { width: 40px; height: 40px; }
  .tl-cine-btn { width: 100%; }
}

/* Mobil: üst bar kullanıcı çipi taşmasın */
@media (max-width: 560px) {
  .user-chip .user-name { display: none; }
  .user-chip { padding: 6px; }
  .topbar-actions { gap: 6px; }
}

/* Mobil: üst bar tek satıra sığsın */
@media (max-width: 480px) {
  .app-brand .brand-text small { display: none; }
  .app-brand .brand-text strong { font-size: .95rem; }
  .app-brand { gap: 6px; }
  .app-topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 480px) {
  .user-chip svg { display: none; }
  .user-chip { gap: 0; }
  #langSwitch .lang-current, .lang-btn { padding: 5px 8px; }
  .topbar-actions { gap: 4px; }
  #homeBtn .brand-logo { width: 30px; height: 30px; }
}

/* ================= Arama: uygulama içi mikrofon/kamera onayı ================= */
.mc-overlay {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: rgba(15, 25, 20, .55); backdrop-filter: blur(4px);
  animation: gcIn .25s ease both;
}
.mc-overlay[hidden] { display: none; }
.mc-card {
  width: min(420px, calc(100vw - 40px)); background: #fff; border-radius: 22px;
  padding: 28px 26px 22px; text-align: center;
  box-shadow: 0 30px 70px rgba(10, 30, 20, .35);
  animation: mdUp .35s cubic-bezier(.2,.8,.3,1.15) both;
}
.mc-icons { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.mc-ic {
  width: 64px; height: 64px; display: grid; place-items: center; font-size: 1.9rem;
  background: #eef6f0; border: 2px solid #cfe6d6; border-radius: 20px;
  animation: mcPulse 2s ease-in-out infinite;
}
.mc-ic.mc-cam { animation-delay: .5s; }
@keyframes mcPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(45,106,79,.25); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(45,106,79,0); }
}
.mc-card h3 { margin: 0 0 8px; color: #14532d; font-size: 1.2rem; }
.mc-card p { margin: 0 0 8px; color: #4a3f28; line-height: 1.55; font-size: .95rem; }
.mc-card small { display: block; color: #8a7a52; font-size: .8rem; margin-bottom: 18px; }
.mc-btns { display: flex; gap: 10px; }
.mc-btns button {
  flex: 1; border: none; cursor: pointer; font-family: var(--sans); font-weight: 800;
  font-size: .95rem; padding: 13px 10px; border-radius: 14px; transition: transform .15s, box-shadow .15s;
}
.mc-no { background: #f1ece0; color: #6b5a2e; }
.mc-no:hover { background: #e8e1cf; }
.mc-yes { background: linear-gradient(135deg, #2d6a4f, #1f9d61); color: #fff;
  box-shadow: 0 8px 20px rgba(45,106,79,.35); position: relative; overflow: hidden; }
.mc-yes::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40px; left: -60px; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  animation: navBtnShine2 3s ease-in-out infinite; pointer-events: none;
}
.mc-yes:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(45,106,79,.45); }

/* ================= Gelen arama popup — WhatsApp havası ================= */
#callRing { animation: ringIn .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes ringIn { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
#callRingAvatar .call-uav { animation: ringAvBob 1.2s ease-in-out infinite; position: relative; }
@keyframes ringAvBob { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(0); } }
#callRingAvatar { position: relative; display: inline-block; }
#callRingAvatar::before, #callRingAvatar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(46,158,107,.55); animation: ringHalo 1.6s ease-out infinite; pointer-events: none;
}
#callRingAvatar::after { animation-delay: .8s; }
@keyframes ringHalo { from { transform: scale(1); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
#callAccept { animation: acceptPulse 1.4s ease-in-out infinite; }
@keyframes acceptPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,158,107,.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(46,158,107,0); }
}
#callReject:hover { animation: rejShake .35s ease; }
@keyframes rejShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ================= 👥 Grup araması ================= */
.dm-group-btn { color: #7c5cbf !important; }
#gcStage {
  position: fixed; inset: 0; z-index: 2600; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 20%, #223c31, #0d1712 75%);
  animation: gcIn .4s ease both; padding: 14px;
}
#gcStage[hidden] { display: none; }
.gc-top { display: flex; align-items: center; justify-content: space-between; color: #dcd2ac; padding: 4px 8px 12px; }
.gc-top .gc-title { font-weight: 800; }
#gcTimer { font-variant-numeric: tabular-nums; font-weight: 700; color: #9fd8b4; }
.gc-grid { flex: 1; display: grid; gap: 10px; grid-template-columns: 1fr; min-height: 0; }
.gc-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.gc-grid[data-count="3"], .gc-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.gc-tile {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 0;
  background: #16241c; border: 1px solid rgba(160,200,170,.18);
  display: grid; place-items: center; animation: mdUp .4s ease both;
}
.gc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-face { position: relative; z-index: 1; }
.gc-tile.live .gc-face { display: none; }
.gc-tile:not(.live) .gc-face { animation: csFloat 3.5s ease-in-out infinite; }
.gc-uav { width: 84px !important; height: 84px !important; font-size: 1.6rem !important; box-shadow: 0 0 0 4px rgba(150,200,165,.25); }
.gc-name {
  position: absolute; left: 10px; bottom: 8px; z-index: 2; color: #fff; font-size: .82rem; font-weight: 700;
  background: rgba(10,20,14,.55); padding: 4px 10px; border-radius: 12px; backdrop-filter: blur(3px);
}
.gc-wait { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 1rem; animation: csFloat 2s ease-in-out infinite; }
.gc-tile.live .gc-wait { display: none; }
/* Sesli aramada video gizli — avatar görünür kalsın */
.gc-tile.live .gc-face { display: grid; }
.gc-tile.live video[style*="none"] ~ .gc-face { display: grid; }
.gc-tile.live video:not([style*="none"]) ~ .gc-face { display: none; }
.gc-ctrls { display: flex; justify-content: center; gap: 14px; padding: 14px 0 6px; }
.gc-ctrls .call-ctl { font-size: 1.2rem; }
#gcAdd { animation: mcPulse 2.6s ease-in-out infinite; }

/* Kişi seçici */
.gcp-card { text-align: left; }
.gcp-card h3 { text-align: center; }
.gcp-hint { text-align: center; color: #8a7a52 !important; font-size: .85rem !important; }
.gcp-list { max-height: 46vh; overflow-y: auto; margin: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.gcp-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid #e8e0cc; background: #fbf8f0; transition: border-color .15s, background .15s;
}
.gcp-row:hover { background: #f4efe1; }
.gcp-row span { flex: 1; font-weight: 600; color: #3a2f18; }
.gcp-av { width: 38px !important; height: 38px !important; }
.gcp-check {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #d9cfb6; color: transparent; font-size: .85rem; transition: all .15s;
}
.gcp-row.sel { border-color: #2d6a4f; background: #eef6f0; }
.gcp-row.sel .gcp-check { background: #2d6a4f; border-color: #2d6a4f; color: #fff; animation: gcpPop .25s cubic-bezier(.2,.9,.3,1.4); }
@keyframes gcpPop { from { transform: scale(.5); } to { transform: scale(1); } }
.gcp-empty { text-align: center; color: #8a7a52; padding: 20px; }

@media (max-width: 640px) {
  .gc-grid[data-count="2"] { grid-template-columns: 1fr; }
  .gc-grid[data-count="3"], .gc-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .gc-uav { width: 64px !important; height: 64px !important; }
}

/* 🔑 Şifremi unuttum */
.auth-forgot { border: none; background: none; cursor: pointer; font-family: var(--sans);
  color: #b8860b; font-weight: 700; font-size: .85rem; padding: 6px; margin-top: 2px; }
.auth-forgot:hover { text-decoration: underline; color: #9a6f08; }
#authModal .mc-card p { color: #4a3f28; }
#authModal .auth-form label { display: block; margin: 10px 0; }
#authModal .mc-btns { margin-top: 14px; }