/* =====================================================================
   OmniSpace — tasarım sistemi
   Koyu lacivert/antrasit taban · elektrik mavisi, mor, turkuaz geçişler
   ===================================================================== */

:root {
  --bg: #060a16;
  --bg-2: #0a1020;
  --bg-3: #0f172b;
  --panel: rgba(18, 26, 50, 0.62);
  --panel-solid: #101830;
  --panel-hi: rgba(32, 44, 82, 0.55);
  --border: rgba(150, 172, 255, 0.13);
  --border-strong: rgba(150, 172, 255, 0.26);
  --text: #e9edff;
  --muted: #a1abcc;
  --dim: #6f7a9e;
  --blue: #3f7dff;
  --violet: #8d5cf6;
  --cyan: #1fd6c6;
  --danger: #ff5d73;
  --warn: #ffb547;
  --ok: #33e3a0;
  --grad: linear-gradient(135deg, #3f7dff 0%, #8d5cf6 52%, #1fd6c6 100%);
  --grad-soft: linear-gradient(135deg, rgba(63,125,255,.22), rgba(141,92,246,.18) 55%, rgba(31,214,198,.16));
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 0 1px rgba(120, 150, 255, 0.18), 0 18px 60px -20px rgba(63, 125, 255, 0.45);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --topbar: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: #8fb1ff; text-decoration: none; }
a:hover { color: #c3d4ff; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(63, 125, 255, .45); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Hareketli arka plan ---------- */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
  radial-gradient(1200px 600px at 80% -10%, rgba(63,125,255,.16), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(141,92,246,.14), transparent 60%), var(--bg); }
.bg-scene::after { content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(150,172,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(150,172,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
/* Arka plan lekeleri durağan: hareket eden bulanık arka plan, üstündeki tüm cam kartların her karede yeniden bulanıklaştırılmasına yol açıyor ve siteyi kasıyordu. */
.blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .32; }
.blob.b1 { background: #2f62ff; top: -160px; left: 8%; }
.blob.b2 { background: #7c3aed; bottom: -220px; right: 4%; animation-duration: 32s; }
.blob.b3 { background: #12b5a8; top: 40%; left: 55%; width: 380px; height: 380px; opacity: .18; animation-duration: 38s; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.12); } }

/* ---------- Cam paneller ---------- */
.glass {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.card { padding: 22px; }
.card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.divider { height: 1px; background: var(--border); margin: 18px 0; border: 0; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); letter-spacing: -.02em; }
.logo:hover { color: var(--text); }
.logo svg { width: 32px; height: 32px; flex: none; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--panel-hi); color: var(--text); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s, opacity .18s;
  white-space: nowrap; user-select: none; text-decoration: none;
}
.btn:hover { background: rgba(50, 66, 118, .6); border-color: rgba(150,172,255,.4); color: var(--text); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.is-loading { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 28px -10px rgba(63,125,255,.75); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 10px 34px -8px rgba(141,92,246,.7); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(120, 140, 220, .1); color: var(--text); border-color: transparent; }
.btn-danger { background: rgba(255, 93, 115, .12); border-color: rgba(255, 93, 115, .4); color: #ffb3bf; }
.btn-danger:hover { background: rgba(255, 93, 115, .22); border-color: rgba(255,93,115,.6); color: #fff; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }
.btn-block { width: 100%; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
  background: rgba(6, 10, 22, .55); border: 1px solid var(--border-strong); color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s; outline: none;
}
.textarea { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1abcc' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.select option { background: var(--panel-solid); }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(63, 125, 255, .8); box-shadow: 0 0 0 4px rgba(63, 125, 255, .16); background: rgba(6,10,22,.75); }
.input[aria-invalid="true"] { border-color: rgba(255, 93, 115, .7); }
.input-sm { height: 36px; font-size: 14px; border-radius: 10px; }
.hint { font-size: 12.5px; color: var(--dim); }
.field-error { font-size: 12.5px; color: #ff9aa9; min-height: 0; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 46px; }
.input-wrap .peek { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--violet); flex: none; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.strength span { height: 5px; border-radius: 4px; background: rgba(150,172,255,.14); transition: background .25s; }
.strength[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] span:nth-child(-n+2) { background: var(--warn); }
.strength[data-score="3"] span:nth-child(-n+3) { background: #7fd3ff; }
.strength[data-score="4"] span { background: var(--ok); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 42px; height: 24px; border-radius: 99px; background: rgba(150,172,255,.18); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .22s var(--ease); }
.switch input:checked + .track { background: var(--grad); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Uyarı kutuları ---------- */
.alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert-error { background: rgba(255,93,115,.1); border-color: rgba(255,93,115,.35); color: #ffc2cb; }
.alert-ok { background: rgba(51,227,160,.08); border-color: rgba(51,227,160,.3); color: #b7f7dd; }
.alert-info { background: rgba(63,125,255,.1); border-color: rgba(63,125,255,.32); color: #c9d8ff; }
.alert-warn { background: rgba(255,181,71,.09); border-color: rgba(255,181,71,.35); color: #ffe0b0; }

/* ---------- Rozetler ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: rgba(150,172,255,.12); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.badge-blue { background: rgba(63,125,255,.15); color: #a9c3ff; border-color: rgba(63,125,255,.35); }
.badge-violet { background: rgba(141,92,246,.16); color: #cdb6ff; border-color: rgba(141,92,246,.38); }
.badge-cyan { background: rgba(31,214,198,.12); color: #92f1e7; border-color: rgba(31,214,198,.35); }
.badge-danger { background: rgba(255,93,115,.13); color: #ffaab7; border-color: rgba(255,93,115,.38); }
.badge-warn { background: rgba(255,181,71,.12); color: #ffd497; border-color: rgba(255,181,71,.36); }
.badge-ok { background: rgba(51,227,160,.1); color: #9ff3d1; border-color: rgba(51,227,160,.32); }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Avatar ---------- */
.avatar { width: 38px; height: 38px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--grad); overflow: hidden; position: relative; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.avatar.lg { width: 84px; height: 84px; border-radius: 24px; font-size: 30px; }
.avatar-wrap { position: relative; display: inline-flex; }
.presence { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg-2); }

/* ---------- Sekmeler ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(6,10,22,.45); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .18s, color .18s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--panel-hi); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tab svg { width: 16px; height: 16px; }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 12px 14px; background: rgba(6,10,22,.45); white-space: nowrap; }
.table td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: rgba(120,140,220,.04); }

/* ---------- Menü ---------- */
.menu { position: fixed; z-index: 80; min-width: 210px; padding: 6px; border-radius: 14px; background: rgba(14, 21, 42, .96); border: 1px solid var(--border-strong); box-shadow: var(--shadow); animation: pop .16s var(--ease); backdrop-filter: blur(18px); }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text); text-align: left; }
.menu button:hover, .menu button:focus-visible { background: rgba(120, 140, 220, .14); outline: none; }
.menu button.danger { color: #ff9aa9; }
.menu button svg { width: 16px; height: 16px; color: var(--muted); }
.menu hr { border: 0; height: 1px; background: var(--border); margin: 5px 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(2, 4, 12, .66); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .18s ease; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: var(--radius-lg); background: rgba(14, 21, 42, .97); border: 1px solid var(--border-strong); box-shadow: var(--shadow-glow); animation: rise .24s var(--ease); }
.modal.wide { width: min(860px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h3 { margin: 0; font-size: 19px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- Bildirim balonları ---------- */
.toasts { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; background: rgba(14, 21, 42, .97); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 14px; animation: rise .24s var(--ease); }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast.ok svg { color: var(--ok); }
.toast.error { border-color: rgba(255,93,115,.45); }
.toast.error svg { color: var(--danger); }
.toast.leaving { animation: fade .2s reverse forwards; }

/* ---------- İskelet yükleme ---------- */
.skeleton { position: relative; overflow: hidden; background: rgba(120,140,220,.08); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(160,180,255,.12), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-row { height: 52px; margin-bottom: 10px; }
.sk-card { height: 120px; }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(150,172,255,.2); border-top-color: var(--cyan); animation: spin .8s linear infinite; }
.center-screen { min-height: 100vh; display: grid; place-items: center; }

/* ---------- Boş durum ---------- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); }
.empty .empty-icon svg { width: 28px; height: 28px; color: #b9c9ff; }
.empty h4 { color: var(--text); font-size: 17px; }

/* ---------- İlerleme çubuğu / kota ---------- */
.progress { height: 7px; border-radius: 99px; background: rgba(150,172,255,.12); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width .3s var(--ease); }
.progress.warn > span { background: linear-gradient(90deg, var(--warn), var(--danger)); }

/* =====================================================================
   AÇILIŞ SAYFASI
   ===================================================================== */
.site-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: rgba(6,10,22,.6); border-bottom: 1px solid var(--border); }
.site-nav .inner { max-width: 1200px; margin: 0 auto; height: 70px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav nav { display: flex; align-items: center; gap: 6px; }
.site-nav nav a.link { color: var(--muted); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.site-nav nav a.link:hover { color: var(--text); background: rgba(120,140,220,.1); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: calc(100vh - 70px); padding: 40px 0 60px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(63,125,255,.1); border: 1px solid rgba(63,125,255,.3); color: #b9cbff; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.eyebrow b { background: var(--grad); color: #fff; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -.035em; margin-bottom: 20px; }
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 560px; margin-bottom: 30px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .cta .btn { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 14px; }
.hero-meta { display: flex; gap: 22px; margin-top: 34px; color: var(--dim); font-size: 13.5px; flex-wrap: wrap; }
.hero-meta span { display: inline-flex; gap: 7px; align-items: center; }
.hero-meta svg { width: 16px; height: 16px; color: var(--cyan); }

/* 3D OmniSpace sahnesi */
.orb-scene { position: relative; height: min(560px, 70vw); perspective: 1300px; display: grid; place-items: center; }
.orb { position: relative; width: 340px; height: 340px; transform-style: preserve-3d; transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -18deg)); transition: transform .6s var(--ease); }
.orb-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: orbit 34s linear infinite; }
@keyframes orbit { to { transform: rotateY(360deg); } }
.core { position: absolute; inset: 70px; border-radius: 50%; transform: translateZ(0);
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #9cc0ff 9%, #4a7dff 26%, #6a3fe0 52%, #0f1a44 78%, #070b1a 100%);
  box-shadow: 0 0 80px 10px rgba(63,125,255,.45), 0 0 160px 40px rgba(141,92,246,.25), inset -20px -30px 60px rgba(0,0,0,.6); }
.core::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(circle at 70% 75%, rgba(31,214,198,.55), transparent 45%); mix-blend-mode: screen; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(150,180,255,.35); transform-style: preserve-3d; box-shadow: 0 0 24px rgba(63,125,255,.18), inset 0 0 24px rgba(141,92,246,.12); }
.ring.r1 { transform: rotateX(72deg); border-color: rgba(31,214,198,.5); }
.ring.r2 { transform: rotateX(72deg) rotateY(58deg); inset: -28px; border-color: rgba(141,92,246,.45); }
.ring.r3 { transform: rotateX(72deg) rotateY(-58deg); inset: -56px; border-style: dashed; border-color: rgba(63,125,255,.38); }
.ring .dot { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 4px rgba(31,214,198,.8); }
.tile { position: absolute; width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; text-align: center;
  background: linear-gradient(160deg, rgba(40,56,110,.7), rgba(14,20,44,.75)); border: 1px solid rgba(160,185,255,.3);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(8px); transform-style: preserve-3d; }
.tile svg { width: 34px; height: 34px; color: #cfdcff; }
.tile small { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.tile.t1 { top: -20px; left: -40px; transform: translateZ(120px); }
.tile.t2 { top: 30px; right: -70px; transform: translateZ(60px) rotateY(-14deg); }
.tile.t3 { bottom: -10px; left: -70px; transform: translateZ(40px) rotateY(16deg); }
.tile.t4 { bottom: -40px; right: -20px; transform: translateZ(140px); }
.tile.t1 svg { color: #8fb4ff; } .tile.t2 svg { color: #c3a6ff; } .tile.t3 svg { color: #7debe0; } .tile.t4 svg { color: #ffd38f; }
.float { animation: bob 6s ease-in-out infinite; }
.float.d2 { animation-delay: -2s; } .float.d3 { animation-delay: -4s; }
@keyframes bob { 50% { translate: 0 -12px; } }
.orb-shadow { position: absolute; bottom: 6%; left: 50%; width: 360px; height: 60px; margin-left: -180px; border-radius: 50%; background: radial-gradient(ellipse, rgba(63,125,255,.35), transparent 70%); filter: blur(10px); }

.section { padding: 90px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); }
.section-head p { color: var(--muted); font-size: 17px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.feature { padding: 26px; border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.feature:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.feature .ficon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--grad-soft); border: 1px solid var(--border-strong); }
.feature .ficon svg { width: 24px; height: 24px; color: #cddbff; }
.feature h3 { font-size: 20px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }
.feature ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.feature li { display: flex; gap: 8px; align-items: center; }
.feature li svg { width: 14px; height: 14px; color: var(--ok); flex: none; }
.feature.soon { opacity: .82; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sec-list { display: grid; gap: 14px; }
.sec-item { display: flex; gap: 14px; padding: 16px; border-radius: 16px; }
.sec-item svg { width: 22px; height: 22px; color: var(--cyan); flex: none; margin-top: 2px; }
.sec-item b { display: block; margin-bottom: 2px; }
.sec-item span { color: var(--muted); font-size: 14px; }
.cta-band { text-align: center; padding: 56px 24px; border-radius: 28px; background: linear-gradient(135deg, rgba(63,125,255,.18), rgba(141,92,246,.16), rgba(31,214,198,.12)); border: 1px solid var(--border-strong); }
.site-foot { border-top: 1px solid var(--border); padding: 30px 0; color: var(--dim); font-size: 13.5px; }
.site-foot .inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   GİRİŞ / KAYIT
   ===================================================================== */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border-right: 1px solid var(--border); }
.auth-side h2 { font-size: clamp(28px, 3vw, 40px); max-width: 440px; }
.auth-side .mini-orb { width: 220px; height: 220px; margin: 30px 0; }
.auth-side .mini-orb .orb { width: 180px; height: 180px; }
.auth-side .mini-orb .core { inset: 36px; }
.auth-main { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(440px, 100%); padding: 32px; }
.auth-card h1 { font-size: 28px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 24px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 13px; }
.otp { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 700; font-family: ui-monospace, monospace; }
.qr { background: #fff; padding: 12px; border-radius: 14px; width: 200px; margin: 0 auto 14px; }
.steps { display: flex; gap: 8px; margin-bottom: 20px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: rgba(150,172,255,.15); }
.steps span.on { background: var(--grad); }

/* =====================================================================
   UYGULAMA KABUĞU
   ===================================================================== */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--border); background: rgba(8, 12, 26, .72); backdrop-filter: blur(18px); z-index: 30; }
.sidebar .logo { padding: 4px 10px 18px; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 14.5px; transition: background .18s, color .18s; position: relative; }
.nav-item:hover { background: rgba(120,140,220,.09); color: var(--text); }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item[aria-current="page"] { background: var(--grad-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.nav-item .count { margin-left: auto; }
.nav-sep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); padding: 16px 12px 6px; }
.sidebar .spacer { flex: 1; }
.storage-meter { padding: 14px; border-radius: 14px; background: rgba(6,10,22,.5); border: 1px solid var(--border); font-size: 13px; }
.storage-meter .row { margin-bottom: 8px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 25; height: var(--topbar); display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--border); background: rgba(6,10,22,.7); backdrop-filter: blur(16px); }
.search { position: relative; flex: 1; max-width: 520px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.search .input { padding-left: 40px; height: 40px; border-radius: 12px; }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: background .18s, color .18s; }
.icon-btn:hover { background: rgba(120,140,220,.1); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 14px; border: 1px solid var(--border); background: rgba(16,24,46,.6); cursor: pointer; }
.user-chip:hover { border-color: var(--border-strong); }
.user-chip .name { font-size: 13.5px; font-weight: 700; max-width: 140px; }
.banner { padding: 10px 22px; font-size: 14px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid; }
.banner svg { width: 18px; height: 18px; flex: none; }
.banner.warn { background: rgba(255,181,71,.1); border-color: rgba(255,181,71,.3); color: #ffe0b0; }
.banner.info { background: rgba(63,125,255,.1); border-color: rgba(63,125,255,.3); color: #cfdcff; }
.view { padding: 26px; flex: 1; min-width: 0; animation: viewIn .38s var(--ease); }
.view.flush { padding: 0; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: 28px; margin: 0; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.mobile-nav { display: none; }

/* Bildirim paneli */
.panel-pop { position: fixed; z-index: 70; top: 70px; right: 16px; width: min(400px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; border-radius: 18px; background: rgba(14,21,42,.97); border: 1px solid var(--border-strong); box-shadow: var(--shadow-glow); animation: pop .18s var(--ease); }
.panel-pop .head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.panel-pop .body { overflow: auto; padding: 6px; }
.notif { display: flex; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; }
.notif:hover { background: rgba(120,140,220,.08); }
.notif .nicon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); flex: none; }
.notif .nicon svg { width: 17px; height: 17px; color: #c8d6ff; }
.notif.unread { background: rgba(63,125,255,.07); }
.notif.unread .ntitle::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); margin-left: 7px; vertical-align: middle; }
.notif .ntitle { font-weight: 700; font-size: 14px; }
.notif .nbody { font-size: 13px; color: var(--muted); }

/* =====================================================================
   OMNIDRIVE
   ===================================================================== */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 15px; font-weight: 600; min-width: 0; }
.crumbs button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; font-weight: 600; }
.crumbs button:hover { color: var(--text); background: rgba(120,140,220,.1); }
.crumbs button[aria-current="true"] { color: var(--text); }
.crumbs .sep { color: var(--dim); }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.item { position: relative; padding: 16px; border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); background: rgba(16,24,46,.55); transition: transform .22s var(--ease), border-color .22s, background .22s, box-shadow .22s; outline: none; }
.item:hover, .item:focus-visible { transform: translateY(-3px); border-color: var(--border-strong); background: rgba(24,34,64,.65); box-shadow: 0 14px 40px -18px rgba(63,125,255,.5); }
.item .thumb { height: 86px; border-radius: 12px; display: grid; place-items: center; background: rgba(6,10,22,.5); overflow: hidden; }
.item .thumb svg { width: 36px; height: 36px; }
.item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item .name { font-weight: 700; font-size: 14px; }
.item .meta { font-size: 12px; color: var(--dim); display: flex; gap: 8px; align-items: center; }
.item .more { position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .18s; }
.item:hover .more, .item:focus-within .more { opacity: 1; }
.item.drop-target { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(31,214,198,.25); }
.ic-folder { color: #8fb4ff; } .ic-image { color: #7debe0; } .ic-video { color: #ff9ac2; } .ic-audio { color: #ffd38f; }
.ic-pdf { color: #ff8f8f; } .ic-doc { color: #a6c1ff; } .ic-archive { color: #c3a6ff; } .ic-file { color: #b4bdd9; }
.drive-list .table td { padding: 10px 14px; }
.drive-list .fname { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.drive-list .fname svg { width: 22px; height: 22px; flex: none; }
.dropzone { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(4,8,20,.72); backdrop-filter: blur(4px); pointer-events: none; animation: fade .15s; }
.dropzone .box { padding: 44px 60px; border-radius: 28px; border: 2px dashed rgba(31,214,198,.7); text-align: center; background: rgba(12,20,40,.85); }
.dropzone svg { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--cyan); }
.uploads { position: fixed; z-index: 75; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); border-radius: 18px; overflow: hidden; background: rgba(14,21,42,.97); border: 1px solid var(--border-strong); box-shadow: var(--shadow-glow); }
.uploads .head { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border); }
.uploads .body { max-height: 260px; overflow: auto; padding: 8px 12px; }
.up-row { padding: 8px 4px; font-size: 13px; }
.up-row .row { margin-bottom: 6px; }
.up-row.done .progress > span { background: var(--ok); }
.up-row.fail .progress > span { background: var(--danger); }
.preview-body { display: grid; place-items: center; min-height: 240px; background: rgba(4,8,20,.6); border-radius: 14px; overflow: hidden; }
.preview-body img, .preview-body video { max-height: 70vh; width: auto; }
.preview-body iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.preview-body pre { width: 100%; max-height: 70vh; overflow: auto; margin: 0; padding: 18px; white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.folder-pick { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; }
.folder-pick button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.folder-pick button:hover { background: rgba(120,140,220,.1); }
.folder-pick button[aria-pressed="true"] { background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.folder-pick svg { width: 18px; height: 18px; color: #8fb4ff; flex: none; }
.link-box { display: flex; gap: 8px; }
.link-box .input { font-family: ui-monospace, monospace; font-size: 13px; }

/* =====================================================================
   OMNICHAT
   ===================================================================== */
.chat { display: grid; grid-template-columns: 330px 1fr; height: calc(100vh - var(--topbar)); min-height: 0; }
.chat.embedded { height: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.chat-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: rgba(8,12,26,.45); }
.chat-list .head { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border); }
.chat-list .items { overflow: auto; padding: 8px; flex: 1; }
.conv { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; transition: background .15s; }
.conv:hover { background: rgba(120,140,220,.08); }
.conv[aria-current="true"] { background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.conv .ctitle { font-weight: 700; font-size: 14px; }
.conv .cprev { font-size: 13px; color: var(--muted); }
.conv .ctime { font-size: 11.5px; color: var(--dim); }
.conv.unread .ctitle, .conv.unread .cprev { color: var(--text); }
.chan-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(120,140,220,.12); flex: none; }
.chan-ic svg { width: 16px; height: 16px; color: var(--muted); }
.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.thread-head { height: 64px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); flex: none; }
.thread-head .ttitle { font-weight: 700; }
.thread-head .tsub { font-size: 12.5px; color: var(--muted); }
.messages { flex: 1; overflow: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 2px; }
.msg { display: flex; gap: 10px; padding: 4px 8px; border-radius: 12px; position: relative; max-width: 100%; }
.msg:hover { background: rgba(120,140,220,.05); }
.msg .bubble-wrap { min-width: 0; max-width: min(640px, 82%); }
.msg .who { font-size: 13px; font-weight: 700; margin-bottom: 2px; display: flex; gap: 8px; align-items: baseline; }
.msg .who time { font-weight: 500; color: var(--dim); font-size: 11.5px; }
.msg .bubble { display: inline-block; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: rgba(28,40,76,.7); border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; font-size: 14.5px; }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .bubble-wrap { text-align: right; }
.msg.mine .who { justify-content: flex-end; }
.msg.mine .bubble { border-radius: 16px 4px 16px 16px; background: linear-gradient(135deg, rgba(63,125,255,.4), rgba(141,92,246,.35)); border-color: rgba(141,150,255,.35); text-align: left; }
.msg.cont .who, .msg.cont .avatar { visibility: hidden; height: 0; margin: 0; }
.msg.cont .avatar { height: 0; }
.msg .deleted { font-style: italic; color: var(--dim); }
.msg .edited { font-size: 11px; color: var(--dim); margin-left: 6px; }
.msg .reply-ref { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--violet); padding: 2px 8px; margin-bottom: 4px; background: rgba(141,92,246,.08); border-radius: 0 8px 8px 0; text-align: left; cursor: pointer; }
.msg .actions { position: absolute; top: -12px; right: 10px; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(14,21,42,.97); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.msg.mine .actions { right: auto; left: 10px; }
.msg:hover .actions, .msg:focus-within .actions { display: flex; }
.msg .actions button { width: 28px; height: 28px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.msg .actions button:hover { background: rgba(120,140,220,.15); color: var(--text); }
.msg .actions svg { width: 15px; height: 15px; }
.msg .seen { font-size: 11px; color: var(--cyan); margin-top: 2px; }
.attach { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; background: rgba(6,10,22,.5); border: 1px solid var(--border); cursor: pointer; max-width: 320px; text-align: left; }
.attach svg { width: 22px; height: 22px; flex: none; }
.attach-img { margin-top: 6px; max-width: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; background: rgba(6,10,22,.5); }
.attach-img img { max-height: 260px; width: auto; }
.day-sep { text-align: center; font-size: 12px; color: var(--dim); margin: 14px 0 8px; display: flex; align-items: center; gap: 12px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.typing { height: 22px; padding: 0 26px; font-size: 12.5px; color: var(--muted); flex: none; }
.typing .dots span { display: inline-block; width: 4px; height: 4px; margin: 0 1px; border-radius: 50%; background: var(--cyan); animation: blink 1.2s infinite; }
.typing .dots span:nth-child(2) { animation-delay: .2s; } .typing .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .2; } }
.composer { padding: 12px 16px 16px; border-top: 1px solid var(--border); flex: none; }
.composer .replying { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 6px 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(141,92,246,.1); border-left: 3px solid var(--violet); }
.composer .box { display: flex; gap: 8px; align-items: flex-end; padding: 6px; border-radius: 16px; background: rgba(6,10,22,.6); border: 1px solid var(--border-strong); }
.composer .box:focus-within { border-color: rgba(63,125,255,.7); box-shadow: 0 0 0 4px rgba(63,125,255,.12); }
.composer textarea { flex: 1; min-height: 40px; max-height: 160px; resize: none; border: 0; background: none; outline: none; padding: 9px 6px; font-size: 14.5px; }
.no-thread { display: grid; place-items: center; height: 100%; }
.thread-host > .thread, .thread-host > .no-thread { flex: 1; min-width: 0; }
.readonly-note { padding: 14px; text-align: center; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--border); }

/* =====================================================================
   OMNISPACES
   ===================================================================== */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.ws-card { padding: 22px; border-radius: var(--radius-lg); cursor: pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; display: flex; flex-direction: column; gap: 12px; text-align: left; color: var(--text); }
.ws-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.ws-mark { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; background: var(--grad); }
.ws-body { height: calc(100vh - var(--topbar) - 170px); min-height: 460px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: 0; }

/* =====================================================================
   PROFİL & YÖNETİCİ
   ===================================================================== */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; align-items: start; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { padding: 18px; border-radius: 18px; }
.stat .k { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.stat .k svg { width: 16px; height: 16px; color: var(--cyan); }
.stat .v { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 6px; }
.stat.alert-stat { border-color: rgba(255,181,71,.4); }
.admin-shell .sidebar { background: rgba(14, 8, 26, .78); }
.admin-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd497; padding: 3px 8px; border-radius: 6px; background: rgba(255,181,71,.12); border: 1px solid rgba(255,181,71,.35); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.legal { max-width: 820px; margin: 0 auto; padding: 50px 20px 80px; }
.legal h1 { font-size: 36px; }
.legal h2 { font-size: 21px; margin-top: 30px; }
.legal p, .legal li { color: var(--muted); }

/* =====================================================================
   DUYARLI TASARIM
   ===================================================================== */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 30px; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero .cta, .hero-meta { justify-content: center; }
  .orb-scene { height: 440px; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-nav { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 64px; padding: 0 6px env(safe-area-inset-bottom); background: rgba(8,12,26,.94); border-top: 1px solid var(--border); backdrop-filter: blur(16px); justify-content: space-around; align-items: center; }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--dim); padding: 6px 10px; border-radius: 12px; position: relative; }
  .mobile-nav a svg { width: 22px; height: 22px; }
  .mobile-nav a[aria-current="page"] { color: var(--text); }
  .mobile-nav a .count { position: absolute; top: 0; right: 4px; transform: scale(.85); }
  .main { padding-bottom: 64px; }
  .view { padding: 18px 14px; }
  .topbar { padding: 0 12px; }
  .user-chip .name { display: none; }
  .chat { grid-template-columns: 1fr; height: calc(100vh - var(--topbar) - 64px); }
  .chat .thread { display: none; }
  .chat.has-active .chat-list { display: none; }
  .chat.has-active .thread { display: flex; }
  .chat:not(.has-active) .thread-host { display: none !important; }
  .ws-body { height: calc(100vh - var(--topbar) - 64px - 190px); }
  .site-nav nav a.link { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .drive-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
  .hide-mobile { display: none !important; }
}
@media (min-width: 901px) { .show-mobile { display: none !important; } }
@media (max-width: 520px) {
  .orb { width: 240px; height: 240px; }
  .core { inset: 50px; }
  .tile { width: 70px; height: 70px; border-radius: 18px; }
  .tile svg { width: 26px; height: 26px; }
  .tile.t2 { right: -40px; } .tile.t3 { left: -40px; }
  .auth-card { padding: 24px 20px; }
  .modal { padding: 20px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .blob, .orb-spin, .float { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}
#admin-tag-row { padding: 0 10px 14px; }
button.nav-item { width: 100%; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
#mobile-nav { width: auto; }
.ev-row td { font-size: 13.5px; }
.logo img { width: 32px; height: 32px; }

/* ---------- Giriş/kayıt yardımcıları ---------- */
.boot-warning { display: none; }
/* form-ui.js bile çalışamadıysa (ör. dosya olarak açılınca) genel uyarı 3 sn sonra kendiliğinden çıkar */
html:not(.omni-js):not(.omni-ready) .boot-warning { display: flex; opacity: 0; visibility: hidden; animation: lateShow .3s ease 3s forwards; }
.boot-warning.show { display: flex !important; opacity: 1; visibility: visible; animation: none; }
@keyframes lateShow { to { opacity: 1; visibility: visible; } }
.diag ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.diag b { font-size: 15px; }
.boot-warning code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 6px; }
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; }
.pw-rules li { display: flex; gap: 6px; align-items: center; color: var(--dim); transition: color .2s; }
.pw-rules li::before { content: "○"; font-size: 11px; width: 12px; text-align: center; }
.pw-rules li.ok { color: #9ff3d1; }
.pw-rules li.ok::before { content: "✓"; color: var(--ok); font-weight: 800; }
.pw-rules li.bad { color: #ff9aa9; }
.pw-rules li.bad::before { content: "✕"; }
.input.valid { border-color: rgba(51,227,160,.55); }
.peek svg { width: 18px; height: 18px; }
.mt-12 { margin-top: 12px; }
@media (max-width: 520px) { .pw-rules { grid-template-columns: 1fr; } }
.mb-16 { margin-bottom: 16px; }

/* =====================================================================
   v3 — Simge boyutları, 3D şekiller, profil, yapay zekâ, destek
   ===================================================================== */
.card-title svg, .member-row > svg, .alert svg, .nicon svg { width: 18px; height: 18px; flex: none; }
.member-row > svg { color: var(--muted); }

/* ---------- 3D şekiller (CSS 3D, hareket azaltma tercihine uyar) ---------- */
.scene3d { position: relative; perspective: 900px; transform-style: preserve-3d; pointer-events: none; }
.cube3d { --s: 86px; position: absolute; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: cubeSpin 22s linear infinite; }
.cube3d span { position: absolute; inset: 0; border-radius: 18px; border: 1px solid rgba(170, 195, 255, .38);
  background: linear-gradient(140deg, rgba(63,125,255,.42), rgba(141,92,246,.30) 55%, rgba(31,214,198,.22));
  box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 0 30px rgba(63,125,255,.18); backdrop-filter: blur(3px); }
.cube3d span:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.cube3d span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube3d span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube3d span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube3d span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube3d span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes cubeSpin { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.torus3d { position: absolute; border-radius: 50%; border: 10px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box;
  box-shadow: 0 0 40px rgba(141,92,246,.35), inset 0 0 18px rgba(31,214,198,.25); animation: torusTilt 14s ease-in-out infinite alternate; opacity: .9; }
@keyframes torusTilt { from { transform: rotateX(68deg) rotateZ(0); } to { transform: rotateX(58deg) rotateZ(180deg); } }
.sphere3d { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #a7c3ff 10%, #4a7dff 32%, #6a3fe0 62%, #120f3a 100%);
  box-shadow: 0 0 50px rgba(63,125,255,.45), inset -12px -16px 30px rgba(0,0,0,.45); animation: bob 7s ease-in-out infinite; }
.pyramid3d { --s: 60px; position: absolute; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: cubeSpin 26s linear infinite reverse; }
.pyramid3d span { position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: calc(var(--s) / 2) solid transparent; border-right: calc(var(--s) / 2) solid transparent;
  border-bottom: var(--s) solid rgba(31,214,198,.45); transform-origin: 50% 100%; filter: drop-shadow(0 0 12px rgba(31,214,198,.35)); }
.pyramid3d span:nth-child(1) { transform: translateZ(calc(var(--s) / 2)) rotateX(26deg); }
.pyramid3d span:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)) rotateX(26deg); border-bottom-color: rgba(63,125,255,.45); }
.pyramid3d span:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)) rotateX(26deg); border-bottom-color: rgba(141,92,246,.45); }
.pyramid3d span:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--s) / 2)) rotateX(26deg); border-bottom-color: rgba(63,125,255,.35); }

/* ---------- Simge rozeti (kart başlıkları) ---------- */
.ico-badge { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--grad-soft); border: 1px solid var(--border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px rgba(63,125,255,.6); transform: perspective(200px) rotateX(8deg); }
.ico-badge svg { width: 19px; height: 19px; color: #d4e0ff; }
.ico-badge.danger { background: rgba(255,93,115,.14); border-color: rgba(255,93,115,.4); }
.ico-badge.danger svg { color: #ffb3bf; }
.card-title.big { font-size: 17px; gap: 12px; margin-bottom: 16px; }
.card-title .sub { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--dim); margin-top: 2px; }
.section-label { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.tilt-card { transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.tilt-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }

/* ---------- Profil kahraman kartı ---------- */
.profile-hero { position: relative; overflow: hidden; padding: 30px; border-radius: 28px; display: grid; grid-template-columns: 1fr 300px; gap: 24px; min-height: 250px;
  background: radial-gradient(600px 300px at 85% 10%, rgba(141,92,246,.25), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(31,214,198,.14), transparent 60%), var(--panel); }
.profile-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(150,172,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,172,255,.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.hero-id { position: relative; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero-avatar { position: relative; padding: 4px; border-radius: 30px; background: var(--grad); box-shadow: 0 18px 50px -14px rgba(63,125,255,.75); }
.hero-avatar .avatar { width: 104px; height: 104px; border-radius: 26px; font-size: 36px; border: 3px solid var(--bg-2); }
.hero-avatar .cam { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-solid); border: 1px solid var(--border-strong); cursor: pointer; color: var(--text); }
.hero-avatar .cam:hover { background: #1b2750; }
.hero-name { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0; }
.hero-meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--cyan); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; max-width: 640px; }
.hstat { padding: 14px 16px; border-radius: 18px; background: rgba(6,10,22,.45); border: 1px solid var(--border); }
.hstat .k { font-size: 12px; color: var(--dim); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hstat .v { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-top: 4px; }
.hstat .progress { margin-top: 8px; }
.hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-scene { position: relative; height: 230px; }
.hero-scene .cube3d { left: 60px; top: 40px; }
.hero-scene .torus3d { width: 190px; height: 190px; left: 40px; top: 20px; }
.hero-scene .sphere3d { width: 46px; height: 46px; right: 26px; top: 18px; }
.hero-scene .pyramid3d { right: 40px; bottom: 26px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 18px; align-items: start; }
.danger-zone { border-color: rgba(255,93,115,.3) !important; background: linear-gradient(160deg, rgba(255,93,115,.07), transparent 50%), var(--panel) !important; }
.session-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(6,10,22,.35); border: 1px solid var(--border); margin-bottom: 8px; }
.session-row .sicon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); flex: none; }
.session-row .sicon svg { width: 18px; height: 18px; color: #cfdcff; }

/* ---------- Sağ üst kullanıcı menüsü ---------- */
.menu .menu-head { display: flex; gap: 12px; align-items: center; padding: 12px 12px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu .menu-head .avatar { width: 44px; height: 44px; border-radius: 14px; }
.menu .menu-head b { display: block; font-size: 14.5px; }
.menu .menu-head span { display: block; font-size: 12.5px; color: var(--dim); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.user-menu { min-width: 260px; }

/* ---------- Yapay zekâ ---------- */
.ai-shell { display: grid; grid-template-columns: 290px 1fr; gap: 0; height: calc(100vh - var(--topbar)); min-height: 0; }
.ai-list { border-right: 1px solid var(--border); padding: 18px 14px; overflow: auto; background: rgba(8,12,26,.45); }
.ai-list h2 { font-size: 20px; margin: 4px 6px 4px; }
.ai-list .sub { color: var(--muted); font-size: 13px; margin: 0 6px 16px; }
.ai-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; color: var(--text); margin-bottom: 6px; transition: background .2s, border-color .2s, transform .2s; }
.ai-item:hover { background: rgba(120,140,220,.08); transform: translateX(2px); }
.ai-item[aria-current="true"] { background: var(--grad-soft); border-color: var(--border-strong); }
.ai-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -10px var(--c, #3f7dff); background: linear-gradient(145deg, var(--c, #3f7dff), color-mix(in srgb, var(--c, #3f7dff) 55%, #0a1020)); transform: perspective(200px) rotateX(10deg); }
.ai-item .t { font-weight: 700; font-size: 14.5px; }
.ai-item .s { font-size: 12px; color: var(--dim); }
.ai-item .state { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(150,172,255,.25); flex: none; }
.ai-item .state.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ai-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-head { height: 66px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); flex: none; }
.ai-head .ai-mark { width: 38px; height: 38px; font-size: 15px; border-radius: 12px; }
.ai-head select { width: auto; max-width: 260px; }
.ai-body { flex: 1; overflow: auto; padding: 22px; }
.ai-connect { max-width: 760px; margin: 0 auto; }
.ai-connect .scene3d { height: 150px; margin-bottom: 8px; }
.ai-connect .scene3d .cube3d { --s: 70px; left: calc(50% - 35px); top: 30px; }
.ai-connect .scene3d .torus3d { width: 150px; height: 150px; left: calc(50% - 75px); top: 0; }
.ai-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.ai-option { padding: 22px; border-radius: 22px; }
.ai-option h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.ai-option p { color: var(--muted); font-size: 14px; }
.ai-msgs { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; gap: 12px; align-items: flex-start; }
.ai-msg .who { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 13px; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg .bubble { max-width: min(720px, 85%); padding: 12px 16px; border-radius: 18px; background: rgba(28,40,76,.6); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.ai-msg.user .bubble { background: linear-gradient(135deg, rgba(63,125,255,.38), rgba(141,92,246,.32)); border-color: rgba(141,150,255,.35); white-space: pre-wrap; }
.ai-msg .bubble p { margin: 0 0 .7em; } .ai-msg .bubble p:last-child { margin: 0; }
.ai-msg .bubble pre { margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: rgba(2,4,12,.7); border: 1px solid var(--border); overflow: auto; font-size: 13px; white-space: pre; }
.ai-msg .bubble code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: rgba(2,4,12,.5); padding: 1px 5px; border-radius: 6px; }
.ai-msg .bubble pre code { background: none; padding: 0; }
.ai-msg.error .bubble { border-color: rgba(255,93,115,.45); background: rgba(255,93,115,.08); color: #ffc2cb; }
.ai-cursor::after { content: "▍"; animation: blink 1s infinite; color: var(--cyan); }
.ai-composer { padding: 14px 20px 18px; border-top: 1px solid var(--border); flex: none; }
.ai-composer .box { max-width: 860px; margin: 0 auto; }
.ai-empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ai-suggest button { border: 1px solid var(--border-strong); background: rgba(16,24,46,.6); color: var(--text); border-radius: 99px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.ai-suggest button:hover { border-color: var(--cyan); }

/* ---------- Destek ---------- */
.support-hero { position: relative; overflow: hidden; padding: 30px; border-radius: 28px; display: grid; grid-template-columns: 1fr 260px; gap: 20px; margin-bottom: 22px;
  background: radial-gradient(600px 300px at 90% 0%, rgba(31,214,198,.18), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(63,125,255,.18), transparent 60%), var(--panel); }
.support-hero h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 8px 0; }
.support-hero p { color: var(--muted); max-width: 560px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: rgba(51,227,160,.1); border: 1px solid rgba(51,227,160,.35); color: #9ff3d1; font-size: 12.5px; font-weight: 700; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(51,227,160,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(51,227,160,0); } 100% { box-shadow: 0 0 0 0 rgba(51,227,160,0); } }
.support-hero .scene3d { height: 200px; }
.support-hero .scene3d .sphere3d { width: 120px; height: 120px; left: 70px; top: 30px; }
.support-hero .scene3d .torus3d { width: 200px; height: 200px; left: 30px; top: 0; }
.support-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; background: rgba(6,10,22,.35); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--cyan); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 16px 14px; color: var(--muted); font-size: 14px; }
.ticket-row { width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(6,10,22,.35); cursor: pointer; text-align: left; color: var(--text); margin-bottom: 8px; }
.ticket-row:hover { border-color: var(--border-strong); }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; padding: 4px; margin: 12px 0; }
.tmsg { max-width: 85%; padding: 10px 14px; border-radius: 14px; background: rgba(28,40,76,.6); border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.tmsg.mine { align-self: flex-end; background: linear-gradient(135deg, rgba(63,125,255,.35), rgba(141,92,246,.3)); }
.tmsg.staff { border-color: rgba(31,214,198,.4); }
.tmsg .meta { font-size: 11.5px; color: var(--dim); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }

@media (max-width: 1100px) {
  .profile-hero, .support-hero { grid-template-columns: 1fr; }
  .hero-scene, .support-hero .scene3d { display: none; }
  .support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ai-shell { grid-template-columns: 1fr; height: calc(100vh - var(--topbar) - 64px); }
  .ai-shell.has-active .ai-list { display: none; }
  .ai-shell:not(.has-active) .ai-pane { display: none; }
  .ai-options { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cube3d, .torus3d, .sphere3d, .pyramid3d, .live-pill i { animation: none !important; } }
.nav-item .nav-new { margin-left: auto; height: 19px; font-size: 10.5px; }

/* ===== v4: giriş iyileştirmeleri ===== */
.caps-hint { color: var(--warn, #f5b84a); margin-top: 6px; }
.setup-guide { border: 1px solid var(--border-strong); background: var(--grad-soft);
  border-radius: 14px; padding: 14px 16px; margin: 14px 0; }
.setup-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.setup-head svg { width: 18px; height: 18px; flex: none; }
.setup-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: .9rem; line-height: 1.45; }
.sql-box { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.sql-box .sql-line { flex: 1; min-width: 0; font-size: .78rem; overflow-wrap: anywhere; user-select: all; }
.sql-box .btn { flex: none; }
.mt-8 { margin-top: 8px; }

/* ===== v5: e-posta onay sayfası ===== */
.btn-lg { height: 52px; font-size: 16px; border-radius: 14px; }
.confirm-card { text-align: center; }
.confirm-state { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; }
.confirm-badge { position: relative; width: 92px; height: 92px; margin-bottom: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 55%), var(--grad-soft);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-glow); display: grid; place-items: center; }
.confirm-badge svg { position: absolute; inset: 14px; width: 64px; height: 64px; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.confirm-check { stroke: var(--ok); }
.confirm-x { stroke: var(--warn); }
.confirm-badge svg circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.confirm-badge svg path { stroke-dasharray: 48; stroke-dashoffset: 48; }
.confirm-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: var(--blue); animation: spin .8s linear infinite; }
.confirm-state[data-state="ok"] .confirm-spinner, .confirm-state[data-state="error"] .confirm-spinner { display: none; }
.confirm-state[data-state="ok"] .confirm-check, .confirm-state[data-state="error"] .confirm-x { opacity: 1; }
.confirm-state[data-state="ok"] .confirm-check circle, .confirm-state[data-state="error"] .confirm-x circle { animation: draw .6s var(--ease) forwards; }
.confirm-state[data-state="ok"] .confirm-check path, .confirm-state[data-state="error"] .confirm-x path { animation: draw .45s .45s var(--ease) forwards; }
.confirm-state[data-state="ok"] .confirm-badge { animation: pop .5s .2s var(--ease) both; }
.confirm-actions { margin-top: 16px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .confirm-badge svg circle, .confirm-badge svg path { stroke-dashoffset: 0 !important; animation: none !important; } }

/* ===== v5: WebGL 3D sahneler (js/scene3d.js) ===== */
[data-scene3d] { position: relative; }
.scene3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.orb-scene.webgl-on .orb-shadow, .orb-scene.webgl-on .orb-spin, .orb-scene.webgl-on .core { display: none; }
.orb-scene.webgl-on .orb { z-index: 1; }
.orb-scene.webgl-on .scene3d-canvas { inset: -8% -12%; width: 124%; height: 116%; }
.auth-side .mini-orb.webgl-on { width: 100%; height: 320px; margin: 0 0 14px; }
.auth-side .mini-orb.webgl-on .orb { display: none; }
.scene3d.webgl-on > :not(canvas) { display: none; }
.scene3d.webgl-on { position: absolute; inset: 0; perspective: none; }

/* =====================================================================
   v5: ANA SAYFA, NOTLAR, GÖREVLER
   ===================================================================== */
.title-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 12px; vertical-align: -9px; border-radius: 13px;
  background: var(--grad-soft); border: 1px solid var(--border-strong); box-shadow: var(--shadow-glow); }
.title-ico svg { width: 21px; height: 21px; color: #cfdcff; }
.search-mini { position: relative; display: flex; align-items: center; }
.search-mini svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
.search-mini .input { padding-left: 36px; width: min(260px, 60vw); }
.gap-8 { gap: 8px; }
.chip { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: rgba(150,172,255,.07); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .18s; }
.chip:hover { color: var(--text); border-color: var(--border-strong); background: rgba(150,172,255,.14); }

/* ---------- Ana sayfa ---------- */
.home-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 10px; padding: 30px 34px; border-radius: 26px; overflow: hidden; margin-bottom: 18px; min-height: 300px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(141,92,246,.28), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(31,214,198,.14), transparent 60%), var(--panel); }
.home-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(150,172,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150,172,255,.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at 75% 50%, #000 10%, transparent 70%); pointer-events: none; }
.home-hero-text { position: relative; z-index: 1; }
.home-hero h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 12px 0 8px; line-height: 1.15; }
.home-hero .lead { color: var(--muted); margin: 0 0 22px; max-width: 520px; font-size: 15.5px; }
.home-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: capitalize; }
.home-hero .eyebrow svg { width: 16px; height: 16px; color: var(--warn); }
.home-hero-3d { position: relative; height: 290px; margin: -20px -24px -20px 0; }
.home-hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.home-hero-fallback .core { position: relative; inset: auto; width: 170px; height: 170px; animation: bob 6s ease-in-out infinite; }
.home-hero-3d.webgl-on .home-hero-fallback { display: none; }
.quick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 7px; border-radius: 14px; color: var(--text); font-weight: 650; font-size: 14px; text-decoration: none;
  background: rgba(10,16,34,.55); border: 1px solid var(--border); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.quick-btn:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 14px 30px -14px rgba(63,125,255,.6); color: #fff; }
.quick-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.quick-ico svg { width: 17px; height: 17px; }
.q-blue .quick-ico { background: rgba(63,125,255,.2); color: #9cbcff; }
.q-violet .quick-ico { background: rgba(141,92,246,.22); color: #c9b2ff; }
.q-cyan .quick-ico { background: rgba(31,214,198,.18); color: #7ff0e4; }
.q-amber .quick-ico { background: rgba(255,181,71,.18); color: #ffd28f; }
.q-pink .quick-ico { background: rgba(255,111,181,.18); color: #ffb1d6; }

.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.home-stat { position: relative; display: block; padding: 18px; border-radius: 20px; color: inherit; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; overflow: hidden; }
.home-stat::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(141,92,246,.22), transparent 70%); pointer-events: none; }
.home-stat:hover { transform: translateY(-4px) perspective(600px) rotateX(3deg); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.home-stat-top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 42px; }
.home-stat-v { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 10px; }
.home-stat-k { font-weight: 650; font-size: 13.5px; color: var(--muted); margin-bottom: 2px; }
.ring-wrap { position: relative; width: 52px; height: 52px; }
.ring-svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 7; }
.ring-bg { stroke: rgba(150,172,255,.14); }
.ring-fg { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dasharray 1s var(--ease); filter: drop-shadow(0 0 6px rgba(31,214,198,.6)); }
.ring-fg.warn { stroke: var(--warn); }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-panel { padding: 18px 18px 12px; border-radius: 22px; min-width: 0; }
.home-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.home-panel-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; }
.home-panel-head h3 svg { width: 18px; height: 18px; color: var(--cyan); }
.home-list { display: grid; gap: 4px; }
.home-list .empty, .home-notes .empty { padding: 18px 8px; }
.home-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; min-width: 0; }
a.home-row:hover { background: rgba(150,172,255,.08); }
.home-row.unread .grow > span:first-child { font-weight: 700; color: #fff; }
.home-row .chan-ic svg { width: 18px; height: 18px; }
.home-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 6px; }
.mini-note { position: relative; display: grid; gap: 4px; text-align: left; padding: 12px 14px; min-height: 86px; border-radius: 14px; border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; transition: transform .25s var(--ease); }
.mini-note:hover { transform: translateY(-3px) rotate(-.4deg); }
.mini-note .tiny { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Not renkleri ---------- */
.note-c-default { --nc: 150,172,255; }
.note-c-blue { --nc: 63,125,255; } .note-c-violet { --nc: 141,92,246; } .note-c-cyan { --nc: 31,214,198; }
.note-c-green { --nc: 51,227,160; } .note-c-amber { --nc: 255,181,71; } .note-c-pink { --nc: 255,111,181; }
.note-card, .mini-note, .note-editor { background: linear-gradient(160deg, rgba(var(--nc), .2), rgba(var(--nc), .06) 60%, rgba(10,16,34,.5)); border-color: rgba(var(--nc), .32); }

/* ---------- Notlar ---------- */
.notes-grid { columns: 4 240px; column-gap: 14px; }
.note-card { position: relative; break-inside: avoid; margin: 0 0 14px; padding: 16px 16px 12px; border-radius: 18px; border: 1px solid; cursor: pointer; box-shadow: 0 14px 30px -18px rgba(0,0,0,.8);
  transition: transform .3s var(--ease), box-shadow .3s; transform-style: preserve-3d; }
.note-card:hover, .note-card:focus-visible { transform: translateY(-4px) perspective(700px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 22px 40px -18px rgba(var(--nc), .55); outline: none; }
.note-card h3 { margin: 0 22px 6px 0; font-size: 16px; overflow-wrap: anywhere; }
.note-card p { margin: 0; color: var(--muted); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { margin-top: 10px; color: var(--dim); }
.note-pin { position: absolute; top: 12px; right: 12px; color: rgb(var(--nc)); }
.note-pin svg { width: 16px; height: 16px; }
.note-editor { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid; transition: background .3s; }
.note-editor .input { background: rgba(6,10,22,.45); }
.note-title-input { font-size: 18px; font-weight: 700; }
.note-body-input { min-height: 240px; resize: vertical; line-height: 1.55; font-family: inherit; padding: 12px 14px; height: auto; }
.note-editor-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-swatches { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: rgb(var(--nc)); box-shadow: inset 0 0 0 2px rgba(6,10,22,.5); transition: transform .15s; }
.swatch.note-c-default { background: #3a4466; }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-checked="true"] { border-color: #fff; }
.btn.is-on { border-color: rgba(255,181,71,.5); color: #ffd28f; background: rgba(255,181,71,.12); }
.btn-danger-text { color: #ff9fae; }

/* ---------- Görevler ---------- */
.task-add { padding: 14px; border-radius: 20px; margin-bottom: 16px; }
.task-add-row { display: flex; gap: 10px; align-items: center; }
.task-add-row > .input:first-of-type { flex: 1; min-width: 0; font-size: 15px; }
.task-add-row input[type=date] { width: 160px; color-scheme: dark; }
.task-add-row .select { width: 120px; }
.task-add-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.task-add-ico svg { width: 18px; height: 18px; }
.quick-dates { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0 44px; }
.task-tabs { margin-bottom: 16px; width: max-content; max-width: 100%; }
.task-group { margin-bottom: 18px; }
.task-group-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.task-group-head .count { background: rgba(150,172,255,.15); color: var(--text); }
.g-late .task-group-head { color: #ff9fae; } .g-late .task-group-head .count { background: rgba(255,93,115,.25); }
.g-today .task-group-head { color: #7ff0e4; }
.task-list { border-radius: 18px; padding: 4px; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 13px; transition: background .2s, opacity .3s, transform .3s; }
.task-row + .task-row { border-top: 1px solid rgba(150,172,255,.07); }
.task-row:hover { background: rgba(150,172,255,.06); }
.task-row.pulse { transform: scale(.985); opacity: .6; }
.task-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(150,172,255,.45); background: transparent; display: grid; place-items: center; cursor: pointer; color: transparent; transition: all .2s var(--ease); padding: 0; }
.task-check svg { width: 14px; height: 14px; stroke-width: 3; }
.task-check:hover { border-color: var(--ok); color: rgba(51,227,160,.6); }
.task-check.done { background: var(--ok); border-color: var(--ok); color: #05261a; box-shadow: 0 0 14px rgba(51,227,160,.5); }
.prio-2 .task-check { border-color: rgba(255,93,115,.7); } .prio-1 .task-check { border-color: rgba(255,181,71,.7); }
.task-main { min-width: 0; }
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.is-done .task-title { text-decoration: line-through; color: var(--dim); }
.task-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.due-chip, .prio-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.due-chip svg, .prio-chip svg { width: 13px; height: 13px; }
.due-chip.late { color: #ff9fae; } .due-chip.today { color: #7ff0e4; } .due-chip.soon { color: #c9b2ff; }
.prio-chip.p1 { color: #ffd28f; } .prio-chip.p2 { color: #ff9fae; }
.task-more { opacity: .55; } .task-row:hover .task-more { opacity: 1; }

@media (max-width: 1100px) { .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; padding: 22px 18px; }
  .home-hero-3d { height: 220px; margin: 0 -18px -22px; order: -1; margin-top: -10px; }
  .home-grid { grid-template-columns: 1fr; }
  .task-add-row { flex-wrap: wrap; }
  .task-add-row > .input:first-of-type { flex-basis: calc(100% - 44px); }
  .task-add-row input[type=date], .task-add-row .select { flex: 1; width: auto; }
  .quick-dates { margin-left: 0; }
}
@media (max-width: 520px) { .home-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .home-stat-v { font-size: 22px; } .home-notes { grid-template-columns: 1fr; } .quick-btn { flex: 1 1 calc(50% - 10px); } }
.home-hero-3d .scene3d-canvas { left: -35%; width: 135%; }

/* =====================================================================
   v6: SAYFA BAŞLIĞI 3D, ORTAK BİRLEŞTİRME, DOSYA ARAÇLARI
   ===================================================================== */
.page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); align-items: center; gap: 8px;
  padding: 26px 30px; border-radius: 24px; overflow: hidden; margin-bottom: 18px; min-height: 230px;
  background: radial-gradient(110% 140% at 100% 0%, rgba(141,92,246,.24), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(31,214,198,.12), transparent 60%), var(--panel); }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(150,172,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,172,255,.05) 1px, transparent 1px);
  background-size: 30px 30px; mask-image: radial-gradient(ellipse at 80% 50%, #000 10%, transparent 70%); pointer-events: none; }
.page-hero-text { position: relative; z-index: 1; min-width: 0; }
.page-hero h1 { font-size: clamp(24px, 3vw, 34px); margin: 8px 0 6px; display: flex; align-items: center; }
.page-hero .lead, .page-hero .sub { color: var(--muted); margin: 0 0 16px; max-width: 560px; font-size: 15px; }
.page-hero .eyebrow svg { width: 14px; height: 14px; }
.page-hero-actions { margin-top: 6px; }
.page-hero-3d { position: relative; height: 220px; margin: -26px -30px -26px 0; }
.page-hero-3d .scene3d-canvas { left: -25%; width: 125%; }
.page-hero-fallback { position: absolute; inset: 0; }
.page-hero-fallback .scene3d { position: absolute; inset: 0; }
.page-hero-fallback .torus3d { width: 150px; height: 150px; left: calc(50% - 75px); top: 30px; }
.page-hero-fallback .cube3d { --s: 60px; left: 18%; top: 40px; }
.page-hero-fallback .sphere3d { width: 54px; height: 54px; right: 18%; top: 120px; }
.page-hero-3d.webgl-on .page-hero-fallback { display: none; }
.page-hero.compact { min-height: 170px; padding: 20px 26px; }
.page-hero.compact .page-hero-3d { height: 170px; margin: -20px -26px -20px 0; }
.page-hero.compact .lead, .page-hero.compact .sub { margin-bottom: 10px; }
.page-hero .search-mini .input { width: min(240px, 50vw); }
.no-thread { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.no-thread-3d { position: relative; width: min(460px, 92%); height: 240px; margin-bottom: -40px; pointer-events: none; }
.no-thread .empty { position: relative; z-index: 1; }
.ok-text { color: var(--ok); font-weight: 650; }
.warn-text { color: var(--warn); font-weight: 650; }
.icon-btn.mv-up svg { transform: rotate(-90deg); }
.icon-btn.mv-down svg { transform: rotate(90deg); }
.btn-ok { background: rgba(51,227,160,.14); border-color: rgba(51,227,160,.45); color: #8ff5c9; }

/* Nasıl çalışır */
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.how-step { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 18px; }
.how-n { position: absolute; top: 12px; right: 14px; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: rgba(150,172,255,.16); }

/* Birleştirme listesi */
.merge-list { display: grid; gap: 10px; }
.merge-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
.merge-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.merge-card-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-strong); flex: none; }
.merge-card-ico svg { width: 22px; height: 22px; color: #cfdcff; }
.merge-progress { width: 210px; display: grid; gap: 5px; }
.merge-plan { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px; margin-bottom: 6px; }
.merge-plan h3 { margin: 6px 0 4px; }
.merge-plan.ready { border-color: rgba(51,227,160,.45); box-shadow: 0 0 0 1px rgba(51,227,160,.2), 0 18px 40px -20px rgba(51,227,160,.5); }
.merge-go { flex: none; }
.merge-members { display: grid; gap: 12px; }
.merge-member { display: flex; gap: 14px; padding: 16px; border-radius: 20px; transition: border-color .3s, box-shadow .3s; }
.merge-member.mine { border-color: var(--border-strong); }
.merge-member.approved { border-color: rgba(51,227,160,.4); }
.merge-pos { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; background: var(--grad); color: #fff; }
.merge-who { margin-bottom: 10px; }
.merge-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(6,10,22,.45); border: 1px solid var(--border); }
.merge-file.empty { color: var(--dim); font-size: 14px; border-style: dashed; justify-content: center; padding: 16px; }
.merge-file.empty svg { width: 18px; height: 18px; }
.merge-file.bad { border-color: rgba(255,93,115,.5); }
.merge-controls { margin-top: 10px; }
.merge-order { display: flex; flex-direction: column; gap: 6px; }
.merge-result { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; margin-bottom: 14px; border-color: rgba(51,227,160,.45);
  background: linear-gradient(135deg, rgba(51,227,160,.14), rgba(31,214,198,.06) 60%, transparent), var(--panel); }
.merge-result h3 { margin: 4px 0 2px; overflow-wrap: anywhere; }
.merge-result-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(51,227,160,.16); flex: none; }
.merge-result-ico svg { width: 26px; height: 26px; }
.merge-steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.merge-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.merge-steps li svg { width: 16px; height: 16px; flex: none; }
.merge-steps li.done { color: var(--text); } .merge-steps li.done svg { color: var(--ok); }
.merge-steps li.fail { color: #ff9fae; }

/* Drive seçici ve dosya listesi */
.picker { display: grid; gap: 10px; }
.picker-list { display: grid; gap: 4px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.picker-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.picker-row:hover { background: rgba(150,172,255,.08); }
.picker-row.on { border-color: var(--border-strong); background: rgba(63,125,255,.12); }
.picker-row.disabled { opacity: .45; cursor: not-allowed; }
.picker-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(150,172,255,.35); display: grid; place-items: center; color: transparent; flex: none; }
.picker-check svg { width: 13px; height: 13px; stroke-width: 3; }
.picker-row.on .picker-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.fl { display: grid; gap: 10px; margin: 10px 0; }
.fl-list { display: grid; gap: 6px; }
.fl-empty { padding: 16px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 14px; }
.fl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(6,10,22,.45); border: 1px solid var(--border); }
.fl-num { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(150,172,255,.14); flex: none; }
.result-box { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; margin-top: 12px; border: 1px solid rgba(51,227,160,.45); background: rgba(51,227,160,.08); flex-wrap: wrap; }
.result-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ok); color: #05261a; flex: none; }
.result-ico svg { width: 20px; height: 20px; stroke-width: 2.6; }
.tool-dialog .alert { margin-top: 12px; }
.tool-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.range { width: 100%; accent-color: var(--blue); }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }

/* Araç kartları */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.tool-card { position: relative; display: grid; gap: 8px; align-content: start; text-align: left; padding: 18px; min-height: 170px; border-radius: 20px; color: var(--text); font: inherit; cursor: pointer; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.tool-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(141,92,246,.2), transparent 70%); }
.tool-card:hover { transform: translateY(-5px) perspective(700px) rotateX(3deg); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.tool-card b { font-size: 16px; }
.tool-ico { width: 42px; height: 42px; border-radius: 13px; }
.tool-ico svg { width: 21px; height: 21px; }
.tool-go { display: inline-flex; align-items: center; gap: 4px; color: #9cbcff; margin-top: auto; font-weight: 700; }
.tool-go svg { width: 13px; height: 13px; }

@media (max-width: 980px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .page-hero { grid-template-columns: 1fr; padding: 20px 18px; }
  .page-hero-3d, .page-hero.compact .page-hero-3d { height: 150px; margin: -10px -18px 0; order: -1; }
  .page-hero-3d .scene3d-canvas { left: 0; width: 100%; }
  .merge-plan, .merge-result { flex-direction: column; align-items: stretch; }
  .merge-card { flex-wrap: wrap; } .merge-progress { width: 100%; }
  .tool-opts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .how-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   v6: YÖNETİCİ — grafikler, canlı girişler, kullanıcı paneli
   ===================================================================== */
.viz-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.viz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.viz { margin: 0; padding: 14px 16px 10px; border-radius: 18px; min-width: 0; }
.viz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.viz-head b { font-size: 14px; }
.viz-total { font-size: 12px; color: var(--muted); font-weight: 650; white-space: nowrap; }
.viz-toggle { height: 26px; padding: 0 8px; font-size: 12px; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid { stroke: rgba(150,172,255,.12); stroke-width: 1; }
.viz-axis { fill: var(--dim); font-size: 8.5px; font-family: var(--font); }
.viz-label { fill: var(--text); font-size: 9.5px; font-weight: 700; font-family: var(--font); }
.viz-bar { fill: #3987e5; }
.viz-bar.peak { fill: #5598e7; }
.viz-hit { fill: transparent; cursor: default; outline: none; }
.viz-hit:hover, .viz-hit:focus-visible { fill: rgba(150,172,255,.07); }
.viz-table { max-height: 220px; overflow: auto; }
.viz-table .table { font-size: 12.5px; }
.viz-bars { display: grid; gap: 10px; padding: 6px 0 4px; }
.viz-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr; gap: 10px; align-items: center; }
.viz-row-label { font-size: 13px; color: var(--muted); }
.viz-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.viz-hbar { height: 14px; border-radius: 0 4px 4px 0; background: #3987e5; flex: none; max-width: 60%; outline: none; }
.viz-hbar:hover, .viz-hbar:focus-visible { background: #5598e7; }
.viz-row-value { font-size: 12px; color: var(--text); white-space: nowrap; flex: none; }
.viz-tip { position: fixed; z-index: 1000; pointer-events: none; display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; font-size: 12px;
  background: #0b1124; border: 1px solid var(--border-strong); box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.viz-tip.on { opacity: 1; transform: none; }
.viz-tip span { color: var(--muted); }
.live-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.live-tile { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; min-width: 220px; }
.live-v { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: none; vertical-align: middle; }
.live-dot.on, .live-tile.on .live-dot { background: var(--ok); box-shadow: 0 0 0 0 rgba(51,227,160,.6); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(51,227,160,.55); } 70% { box-shadow: 0 0 0 8px rgba(51,227,160,0); } 100% { box-shadow: 0 0 0 0 rgba(51,227,160,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot.on, .live-tile.on .live-dot { animation: none; } }
.ip-cell { display: inline-flex; align-items: center; gap: 4px; }
.ip-cell code { font-size: 13px; padding: 2px 7px; border-radius: 7px; background: rgba(63,125,255,.12); border: 1px solid rgba(63,125,255,.25); }
.ip-cell .icon-btn { width: 28px; height: 28px; }
.ip-cell .icon-btn svg { width: 15px; height: 15px; }
.online-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-radius: 16px; margin-bottom: 14px; background: rgba(51,227,160,.07); border: 1px solid rgba(51,227,160,.25); }
.online-chip { padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 650; background: rgba(51,227,160,.14); color: #8ff5c9; text-decoration: none; }
.up-hero { position: relative; display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: 24px; margin: 10px 0 18px; overflow: hidden;
  background: radial-gradient(100% 140% at 100% 0%, rgba(141,92,246,.24), transparent 55%), var(--panel); }
.up-hero h1 { margin: 0 0 4px; font-size: 28px; }
.up-hero .grow { position: relative; z-index: 1; min-width: 0; max-width: calc(100% - 200px); }
.up-avatar { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 26px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #fff;
  background: var(--grad); box-shadow: 0 18px 40px -16px rgba(141,92,246,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.up-hero-3d { position: absolute; right: -20px; top: 0; bottom: 0; width: 300px; opacity: .85; pointer-events: none; }
.up-pane { margin-top: 14px; }
.notif-preview { display: flex; gap: 12px; padding: 14px; border-radius: 14px; }
.notif-preview .nicon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-soft); flex: none; }
.notif-preview .nicon svg { width: 18px; height: 18px; }
tr.clickable:hover td { background: rgba(150,172,255,.04); }
.user-link { color: var(--text); }
.user-link:hover { color: #9cbcff; }
@media (max-width: 760px) {
  .viz-grid4, .viz-grid2 { grid-template-columns: 1fr; }
  .up-hero { flex-direction: column; align-items: flex-start; } .up-hero-3d { opacity: .35; } .up-hero .grow { max-width: 100%; }
}

.analytics .select { width: auto; min-width: 150px; }

/* ===== v7: hafif mod (yavaş cihazlar / kullanıcı tercihi) ===== */
html.lite .glass, html.lite .modal, html.lite .topbar, html.lite .sidebar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .glass { background: var(--panel-solid); }
html.lite .bg-scene .blob { animation: none !important; filter: blur(60px); opacity: .6; }
html.lite .float, html.lite .orb-spin { animation: none !important; }
html.lite .home-stat:hover, html.lite .tool-card:hover, html.lite .note-card:hover { transform: none; }
html.no3d .scene3d-canvas { display: none !important; }
.scene-still .scene3d-canvas { opacity: .95; }

/* ===================== v8: medya araçları ===================== */
.media-wave { display: block; width: 100%; height: 84px; border-radius: 12px; background: rgba(150,172,255,.06); border: 1px solid var(--border); margin: 8px 0 12px; }
.media-info { margin: 4px 0 6px; }
.recorder { display: grid; gap: 14px; }
.rec-stage { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 18px; background: rgba(150,172,255,.06); border: 1px solid var(--border); }
.rec-stage > div { flex: 1; min-width: 0; display: grid; gap: 8px; }
.rec-btn { width: 68px; height: 68px; flex: none; border-radius: 50%; border: 2px solid rgba(255,93,115,.45); background: rgba(255,93,115,.12); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.rec-btn:hover { transform: scale(1.05); background: rgba(255,93,115,.2); }
.rec-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 3px; }
.rec-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--danger); transition: border-radius .2s var(--ease), width .2s, height .2s; }
.rec-btn.on .rec-dot { width: 22px; height: 22px; border-radius: 6px; }
.rec-btn.on { animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,93,115,.45); } 50% { box-shadow: 0 0 0 12px rgba(255,93,115,0); } }
.rec-time { font: 600 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rec-meter { height: 8px; border-radius: 99px; background: rgba(150,172,255,.12); overflow: hidden; }
.rec-meter > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--warn) 70%, var(--danger)); border-radius: inherit; transition: width .08s linear; }

/* ===================== v8: sesli odalar ===================== */
.voice-list { display: grid; gap: 10px; }
.voice-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: var(--text); text-decoration: none; transition: transform .2s var(--ease), border-color .2s; }
.voice-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.voice-card .grow { min-width: 0; }
.voice-card-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); }
.voice-card.live .voice-card-ico { background: rgba(51,227,160,.14); border-color: rgba(51,227,160,.35); color: var(--ok); }
.voice-card.live { border-color: rgba(51,227,160,.28); }
.voice-stage { padding: 22px; border-radius: 22px; min-height: 260px; display: grid; place-items: center; margin-top: 14px; }
.voice-prejoin { text-align: center; max-width: 420px; display: grid; justify-items: center; gap: 10px; }
.voice-prejoin h3 { margin: 4px 0 0; }
.voice-orb { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 0 0 10px rgba(141,92,246,.12), 0 0 0 22px rgba(63,125,255,.06); }
.voice-orb svg { width: 38px; height: 38px; color: #fff; }
.voice-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; }
.voice-tile { --lvl: 0; position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 14px; border-radius: 18px; background: rgba(150,172,255,.05); border: 1px solid var(--border); text-align: center; min-width: 0; transition: border-color .15s, background .15s; }
.voice-tile b { max-width: 100%; }
.voice-tile.me { background: rgba(141,92,246,.08); }
.voice-tile.pending { opacity: .6; }
.voice-tile.speaking { border-color: rgba(51,227,160,.6); background: rgba(51,227,160,.07); }
.voice-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: #fff; font: 700 1.3rem var(--font-display); transition: box-shadow .1s linear; }
.voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voice-tile.speaking .voice-avatar { box-shadow: 0 0 0 3px var(--ok), 0 0 calc(6px + var(--lvl) * 26px) rgba(51,227,160,.75); }
.voice-tile .tiny svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--danger); }
.voice-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.voice-controls:empty { display: none; }
.vbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--panel-hi); color: var(--text); font: 600 .92rem var(--font); cursor: pointer; transition: background .15s, transform .15s; }
.vbtn:hover { transform: translateY(-1px); background: rgba(63,125,255,.2); }
.vbtn svg { width: 18px; height: 18px; }
.vbtn.off { background: rgba(255,181,71,.16); border-color: rgba(255,181,71,.45); color: var(--warn); }
.vbtn.leave { background: rgba(255,93,115,.16); border-color: rgba(255,93,115,.45); color: var(--danger); }
.vbtn.leave:hover { background: rgba(255,93,115,.28); }
.voice-note { text-align: center; margin-top: 12px; }
@media (max-width: 560px) {
  .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vbtn { padding: 10px 14px; font-size: .86rem; }
  .voice-stage { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rec-btn.on { animation: none; } }
.voice-warn { margin-top: 14px; }
.check.remember { margin: 2px 0 16px; font-size: 13.5px; } .check.remember .dim { font-size: 12.5px; }
.trusted-dev { padding: 8px 0; border-top: 1px solid var(--border); gap: 10px; }

/* ===================== v9: sesli oda — görüntü, ekran paylaşımı, sohbet ===================== */
.voice-room { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 14px; }
.voice-main { min-width: 0; }
.voice-room .voice-stage { margin-top: 0; }
.voice-screens { display: grid; gap: 12px; margin-bottom: 14px; }
.voice-screens.multi { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.voice-screen { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--border-strong); }
.voice-screen video { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }
.voice-screen-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 12px; background: rgba(6,10,22,.72); font-size: 13px; }
.voice-screen-cap span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-screen-cap svg { width: 16px; height: 16px; flex: none; }
.voice-media { position: relative; display: grid; place-items: center; }
.voice-video { display: none; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #000; }
.voice-video.mirror { transform: scaleX(-1); }
.voice-tile.has-video { padding-top: 10px; }
.voice-tile.has-video .voice-video { display: block; }
.voice-tile.has-video .voice-avatar { display: none; }
.voice-tile.has-video.speaking .voice-video { box-shadow: 0 0 0 3px var(--ok); }
.voice-grid:has(.has-video) { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.voice-badge { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: rgba(63,125,255,.2); color: #b9cdff; }
.vbtn.on { background: rgba(63,125,255,.22); border-color: rgba(63,125,255,.55); color: #cfe0ff; }
.vbtn:disabled { opacity: .6; cursor: progress; }

.voice-chat { display: flex; flex-direction: column; height: min(70vh, 620px); border-radius: 20px; overflow: hidden; position: sticky; top: calc(var(--topbar) + 12px); }
.voice-chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.voice-chat-head svg { width: 18px; height: 18px; }
.voice-chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.voice-chat-empty { margin: auto 0; text-align: center; }
.voice-msg { max-width: 92%; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: rgba(150,172,255,.08); align-self: flex-start; }
.voice-msg.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: rgba(63,125,255,.2); }
.voice-msg.system { align-self: center; background: none; padding: 0; }
.voice-msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 2px; }
.voice-msg-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-msg-text a { color: #9cbcff; }
.voice-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.voice-chat-form .input { flex: 1; min-width: 0; }

@media (max-width: 1000px) {
  .voice-room { grid-template-columns: 1fr; }
  .voice-chat { position: static; height: 420px; }
}
@media (max-width: 560px) {
  .voice-grid:has(.has-video) { grid-template-columns: 1fr; }
  .voice-chat { height: 360px; }
}

/* ===================== v10: ünvanlar ===================== */
.title-badge { --tc1: #7d8bb5; --tc2: #5b6890; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px;
  font: 700 11px/1.5 var(--font); letter-spacing: .01em; color: #fff; white-space: nowrap; vertical-align: middle; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc1) 100%, #fff 18%), var(--tc2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 6px -2px var(--tc2); text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.title-badge svg { width: 12px; height: 12px; flex: none; }
.title-badge.t1 { --tc1: #8a9bc4; --tc2: #55628a; }
.title-badge.t2 { --tc1: #2bc7e8; --tc2: #1673a8; }
.title-badge.t3 { --tc1: #3fe0a2; --tc2: #11895c; }
.title-badge.t4 { --tc1: #b18cff; --tc2: #6a3fd6; }
.title-badge.t5 { --tc1: #ffcf5a; --tc2: #e2477f; }
.title-badge.t4::after, .title-badge.t5::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: titleShine 3.6s ease-in-out infinite; }
.title-badge.t5::after { animation-duration: 2.6s; }
@keyframes titleShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.title-badge.big { padding: 5px 14px 5px 10px; font-size: 14px; gap: 7px; transform: perspective(300px) rotateX(8deg); }
.title-badge.big svg { width: 17px; height: 17px; }
.name-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.who .title-badge { font-size: 10px; padding: 1px 6px 1px 5px; }
.who .title-badge svg { width: 10px; height: 10px; }
.hero-title { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; flex-wrap: wrap; }
.user-card { display: grid; gap: 12px; }
.user-card-top { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 12px 16px; border-radius: 18px; background: var(--grad-soft); overflow: hidden; }
.user-card-top.t5 { background: linear-gradient(135deg, rgba(255,207,90,.22), rgba(226,71,127,.22)); }
.user-card-top.t4 { background: linear-gradient(135deg, rgba(177,140,255,.25), rgba(106,63,214,.18)); }
.user-card-top h3 { margin: 8px 0 0; }
.user-card-av .avatar { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.user-card-title { display: grid; justify-items: center; gap: 6px; margin-top: 10px; }
.user-card-bio { margin: 0; text-align: center; color: var(--muted); }
.title-pick { display: grid; gap: 8px; }
.title-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); cursor: pointer; background: rgba(150,172,255,.04); }
.title-opt:hover { border-color: var(--border-strong); }
.title-opt input { accent-color: var(--violet); }
.title-opt .grow { min-width: 0; }
.title-ladder { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.title-ladder i { width: 14px; height: 2px; background: var(--border-strong); }
.clickable-name { cursor: pointer; }
.clickable-name:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .title-badge::after { animation: none !important; display: none; } }
html.lite .title-badge::after { display: none; }
.voice-title:empty { display: none; }

/* ===================== v10: 3D efektler ===================== */
.tilt-on { position: relative; transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px) !important; transition: transform .12s linear, box-shadow .2s, border-color .2s !important; box-shadow: var(--shadow-glow); }
.tilt-on::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.13), rgba(255,255,255,.03) 30%, transparent 55%); }
/* Sayfa geçişi: içerik hafif 3D açıyla yerine oturur */
@keyframes viewIn { from { opacity: 0; transform: perspective(1400px) translateY(14px) rotateX(3deg); } }
.view { transform-origin: 50% 0; }
.view > * { animation: rise3d .55s var(--ease) both; }
.view > *:nth-child(2) { animation-delay: .05s; } .view > *:nth-child(3) { animation-delay: .1s; } .view > *:nth-child(4) { animation-delay: .15s; } .view > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes rise3d { from { opacity: 0; transform: perspective(1000px) translateY(18px) rotateX(6deg) scale(.985); } }
.view.flush > * { animation: none; }
html.lite .view, html.lite .view > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .view, .view > * { animation: none !important; } }

/* ===================== v10: takvim ===================== */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cal-main { padding: 16px; border-radius: 22px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-title { margin: 0; font-size: 20px; }
.cal-next svg { transform: scaleX(-1); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--dim); padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 86px; padding: 7px 8px; border-radius: 14px; border: 1px solid var(--border); background: rgba(150,172,255,.04); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.cal-day:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cal-day.other { opacity: .45; }
.cal-day.today .cal-num { background: var(--grad); color: #fff; }
.cal-day.sel { border-color: rgba(141,92,246,.7); background: rgba(141,92,246,.12); box-shadow: 0 0 0 1px rgba(141,92,246,.4), 0 10px 26px -14px rgba(141,92,246,.8); }
.cal-day.late { border-color: rgba(255,93,115,.45); }
.cal-num { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.cal-dots i.p1 { background: var(--warn); } .cal-dots i.p2 { background: var(--danger); } .cal-dots i.done { background: var(--dim); opacity: .6; }
.cal-chip { max-width: 100%; font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: rgba(63,125,255,.18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 11px; color: var(--muted); }
.cal-side { padding: 16px; border-radius: 22px; display: grid; gap: 10px; position: sticky; top: calc(var(--topbar) + 12px); }
.cal-side-head { display: flex; align-items: center; gap: 12px; }
.cal-big { font: 700 40px/1 var(--font-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 52px; }
.cal-add { display: grid; gap: 8px; }
.cal-add .row .select { flex: 1; }
.cal-empty { margin: 4px 0; }
@media (max-width: 1000px) { .cal-wrap { grid-template-columns: 1fr; } .cal-side { position: static; } }
@media (max-width: 560px) { .cal-day { min-height: 54px; padding: 4px; border-radius: 10px; } .cal-chip, .cal-more { display: none; } .cal-num { min-width: 22px; height: 22px; font-size: 12px; } .cal-grid { gap: 4px; } .cal-main { padding: 10px; } }

/* ===================== v10: odak zamanlayıcı ===================== */
.focus-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.focus-card { padding: 22px; border-radius: 24px; display: grid; justify-items: center; gap: 16px; }
.focus-tabs { justify-content: center; }
.focus-ring { --fc: var(--violet); position: relative; width: min(340px, 78vw); aspect-ratio: 1; transform: perspective(900px) rotateX(10deg); transform-style: preserve-3d; filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)); }
.focus-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fr-bg { fill: rgba(150,172,255,.05); stroke: rgba(150,172,255,.12); stroke-width: 16; }
.fr-fg { fill: none; stroke: url(#fg); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset .3s linear; filter: drop-shadow(0 0 10px rgba(141,92,246,.55)); }
.focus-ring.running .fr-fg { animation: ringGlow 2.4s ease-in-out infinite; }
@keyframes ringGlow { 50% { filter: drop-shadow(0 0 18px rgba(31,214,198,.7)); } }
.focus-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; transform: translateZ(30px); }
.focus-time { font: 700 clamp(46px, 11vw, 72px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 6px 24px rgba(0,0,0,.5); }
.focus-mode { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fc); }
.focus-task { max-width: 220px; margin: 0 auto; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-rounds { display: flex; align-items: center; gap: 6px; }
.focus-rounds i { width: 10px; height: 10px; border-radius: 50%; background: rgba(150,172,255,.15); border: 1px solid var(--border-strong); }
.focus-rounds i.on { background: var(--grad); border-color: transparent; box-shadow: 0 0 8px rgba(141,92,246,.7); }
.focus-actions { justify-content: center; }
.focus-go { min-width: 170px; }
.focus-side { display: grid; gap: 14px; }
.focus-mins { display: grid; gap: 8px; }
.focus-min { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 8px; }
.focus-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.focus-kpis > div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(150,172,255,.06); }
.focus-kpis b { font: 700 18px var(--font-display); }
.focus-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 110px; align-items: end; }
.focus-bars .fb { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; font-size: 11px; color: var(--dim); }
.focus-bars .fb i { align-self: end; display: block; min-height: 3px; border-radius: 6px 6px 3px 3px; background: var(--grad); }
.focus-chip { --fc: var(--violet); position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: rgba(14,21,42,.92); border: 1px solid var(--border-strong); box-shadow: var(--shadow); color: var(--text); text-decoration: none; font-size: 13px; }
.focus-chip svg { width: 16px; height: 16px; color: var(--fc); }
.focus-chip b { font-variant-numeric: tabular-nums; font-size: 15px; }
@media (max-width: 1000px) { .focus-wrap { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .focus-chip { bottom: 76px; right: 12px; } }
html.lite .focus-ring { filter: none; }

/* ===================== v11: Omni AI asistanı ===================== */
.asst-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.asst-tools { display: grid; gap: 8px; position: sticky; top: calc(var(--topbar) + 12px); }
.asst-tool { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.asst-tool .grow { display: grid; gap: 2px; min-width: 0; }
.asst-tool:hover { transform: translateX(3px); border-color: var(--border-strong); }
.asst-tool.on { border-color: rgba(141,92,246,.6); background: linear-gradient(135deg, rgba(141,92,246,.18), rgba(63,125,255,.1)); box-shadow: 0 10px 30px -18px rgba(141,92,246,.9); }
.asst-main { display: grid; gap: 14px; min-width: 0; }
.asst-work, .asst-out { padding: 20px; border-radius: 22px; }
.asst-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.asst-head h2 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.asst-head .select { width: auto; }
.asst-input { display: grid; gap: 8px; }
.asst-text { min-height: 200px; resize: vertical; }
.asst-text.mono, .textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.asst-opts { margin-top: 12px; }
.asst-opt { display: grid; gap: 4px; }
.asst-opt .select { width: auto; min-width: 150px; }
.asst-actions { margin-top: 14px; }
.asst-result .bubble { background: rgba(150,172,255,.05); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; max-width: none; }
.asst-result .bubble p { margin: 0 0 10px; } .asst-result .bubble p:last-child { margin-bottom: 0; }
.asst-result pre { overflow: auto; }
.asst-out-actions { margin-top: 12px; }
.asst-task { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px 110px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.asst-task input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--violet); }
.asst-connect { max-width: 760px; }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: blink 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; }
@media (max-width: 900px) {
  .asst-wrap { grid-template-columns: 1fr; }
  .asst-tools { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asst-tool .tiny { display: none; }
  .asst-task { grid-template-columns: auto minmax(0, 1fr); }
  .asst-task input[type=date], .asst-task select { grid-column: 2; }
}

/* ===================== v11: akıllı ana sayfa ===================== */
.home-continue { margin: 4px 0 18px; }
.continue-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.continue-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: var(--text); text-decoration: none; min-width: 0; transition: transform .2s var(--ease), border-color .2s; }
.continue-card:hover { border-color: var(--border-strong); }
.continue-go { opacity: .5; } .continue-go svg { width: 16px; height: 16px; }
.continue-card:hover .continue-go { opacity: 1; transform: translateX(2px); }
button.home-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.home-row-end { display: grid; justify-items: end; gap: 3px; flex: none; }
.home-row-end .count { position: static; }
.home-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-ai-btn { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--border); background: rgba(150,172,255,.04); color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center; transition: transform .15s var(--ease), border-color .15s; }
.home-ai-btn:hover { transform: translateY(-3px) perspective(500px) rotateX(6deg); border-color: var(--border-strong); }
@media (max-width: 560px) { .home-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================
   v12 · MOBİL TAŞMA KORUMASI
   Uzun dosya adı, bağlantı veya e-posta gibi bölünemeyen metinler
   kart/ızgara sütunlarını ekrandan geniş itip sayfayı sağa taşırıyordu.
   ===================================================================== */
html { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { word-break: break-word; overflow-wrap: anywhere; }
table, .table-wrap, pre, code, .ellipsis, .btn, .tab, .badge { overflow-wrap: normal; word-break: normal; }
img, video, iframe { max-width: 100%; }
:where(.strength, .hero, .orb-scene, .tile, .features, .feature ul, .split, .sec-list, .auth-shell, .auth-main, .app, .drive-grid, .item .thumb, .dropzone, .preview-body, .chat, .msg .actions button, .no-thread, .ws-grid, .settings-grid, .stat-grid, .kv, .diag ol, .pw-rules, .ico-badge, .profile-hero, .hero-stats, .profile-grid, .ai-shell, .ai-options, .support-hero, .support-grid, .setup-steps, .confirm-state, .confirm-badge, .home-hero, .home-hero-fallback, .home-stats, .home-grid, .home-list, .home-notes, .mini-note, .note-editor, .page-hero, .how-grid, .how-step, .merge-list, .merge-progress, .merge-members, .merge-steps, .picker, .picker-list, .fl, .fl-list, .tool-opts, .tools-grid, .tool-card, .viz-grid4, .viz-grid2, .viz-bars, .viz-row, .viz-tip, .up-avatar, .recorder, .rec-stage > div, .voice-list, .voice-stage, .voice-prejoin, .voice-grid, .voice-tile, .voice-room, .voice-screens, .voice-media, .user-card, .user-card-top, .user-card-title, .title-pick, .cal-wrap, .cal-grid, .cal-side, .cal-add, .focus-wrap, .focus-card, .focus-center, .focus-side, .focus-mins, .focus-kpis, .focus-kpis > div, .focus-bars, .focus-bars .fb, .asst-wrap, .asst-tools, .asst-tool .grow, .asst-main, .asst-input, .asst-opt, .asst-task, .continue-row, .home-row-end, .home-ai-grid, .home-ai-btn) > * { min-width: 0; }
.auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-main { grid-template-columns: minmax(0, 1fr); }
.auth-card { max-width: 100%; justify-self: center; }
.boot-warning, .boot-warning * { overflow-wrap: anywhere; }
.modal { max-width: calc(100vw - 24px); }
.modal pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@supports (height: 100dvh) {
  body, .app, .auth-shell, .center-screen { min-height: 100dvh; }
  .sidebar { height: 100dvh; }
  .modal { max-height: calc(100dvh - 32px); }
  .chat, .ai-shell { height: calc(100dvh - var(--topbar)); }
  .ws-body { height: calc(100dvh - var(--topbar) - 170px); }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  @supports (height: 100dvh) {
    .chat, .ai-shell { height: calc(100dvh - var(--topbar) - 64px); }
    .ws-body { height: calc(100dvh - var(--topbar) - 64px - 190px); }
  }
  .page-hero { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { max-width: 100%; }
}
/* iOS Safari 16px altındaki alanlara dokununca sayfayı yakınlaştırıp öyle bırakıyordu */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea, .input, .select, .textarea { font-size: 16px !important; }
}
/* Tanıtım sayfası üst menüsü dar ekranda sığsın */
@media (max-width: 480px) {
  .site-nav .inner { padding: 0 14px; gap: 8px; }
  .site-nav .logo { font-size: 16px; gap: 8px; }
  .site-nav .logo svg { width: 28px; height: 28px; }
  .site-nav nav, #nav-auth { gap: 4px; min-width: 0; }
  .site-nav .btn-sm { padding: 0 11px; font-size: 13px; }
}
@media (max-width: 370px) {
  .site-nav .logo { font-size: 0; gap: 0; }
  .hero .cta { flex-direction: column; align-items: stretch; }
}

/* ---------- Mobil alt menü: "Menü" çekmecesi ---------- */
.mobile-nav .mnav-btn { border: 0; background: none; font: inherit; cursor: pointer; }
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .mobile-nav .mnav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--dim); padding: 6px 10px; border-radius: 12px; position: relative; }
  .mobile-nav .mnav-btn svg { width: 22px; height: 22px; }
  .mobile-nav .mnav-btn .count { position: absolute; top: 0; right: 4px; transform: scale(.85); }
  .app.menu-open .mnav-btn { color: var(--text); }
  .mobile-nav a { min-width: 0; }
  .app.menu-open .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: 100%; overflow-y: auto; overscroll-behavior: contain; z-index: 70; background: #0a1020; box-shadow: 30px 0 60px -20px rgba(0,0,0,.7); animation: drawerIn .22s var(--ease); padding-bottom: 24px; }
  .app.menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(2,4,12,.62); backdrop-filter: blur(2px); }
  .app.menu-open .sidebar .spacer { display: none; }
}
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: none; } }
@media (max-width: 360px) { .mobile-nav a, .mobile-nav .mnav-btn { padding: 6px 4px; font-size: 10.5px; } }

/* =====================================================================
   v12 · OMNI AI (ChatGPT benzeri sohbet)
   ===================================================================== */
.omni-ai-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: conic-gradient(from 210deg, #3f7dff, #8d5cf6, #1fd6c6, #3f7dff); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -10px rgba(141,92,246,.9); }
.omni-ai-mark svg { width: 20px; height: 20px; }
.omni-ai-mark.sm { width: 32px; height: 32px; border-radius: 10px; }
.omni-ai-mark.sm svg { width: 17px; height: 17px; }
.omni-ai-mark.who { width: 34px; height: 34px; border-radius: 11px; }
.omni-ai-mark.who svg { width: 18px; height: 18px; }
.omni-ai-mark.xl { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 18px; animation: omniPulse 3.2s ease-in-out infinite; }
.omni-ai-mark.xl svg { width: 36px; height: 36px; }
@keyframes omniPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 40px -14px rgba(141,92,246,.9); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 60px -10px rgba(31,214,198,.7); } }
.ai-list-head { display: flex; align-items: center; gap: 10px; margin: 2px 4px 14px; }
.ai-list-head h2 { margin: 0; font-size: 19px; }
.ai-chat-list { display: grid; gap: 2px; margin-top: 14px; }
.ai-chat-item { display: flex; align-items: center; gap: 6px; padding: 9px 8px 9px 12px; border-radius: 12px; cursor: pointer; color: var(--text); border: 1px solid transparent; min-width: 0; }
.ai-chat-item:hover { background: rgba(120,140,220,.08); }
.ai-chat-item[aria-current="true"] { background: var(--grad-soft); border-color: var(--border-strong); }
.ai-chat-item .t { font-size: 14px; font-weight: 600; }
.ai-chat-item .s { font-size: 11.5px; color: var(--dim); }
.ai-chat-del { width: 30px; height: 30px; opacity: 0; flex: none; }
.ai-chat-del svg { width: 16px; height: 16px; }
.ai-chat-item:hover .ai-chat-del, .ai-chat-item[aria-current="true"] .ai-chat-del, .ai-chat-del:focus-visible { opacity: .8; }
@media (hover: none) { .ai-chat-del { opacity: .6; } }
.ai-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; max-width: min(760px, 88%); }
.ai-msg.user .ai-col { justify-items: end; }
.ai-col > .bubble { max-width: 100%; }
.omni-ai .ai-msg.assistant .bubble { background: transparent; border-color: transparent; padding: 6px 2px; }
.omni-ai .ai-msg.assistant.error .bubble { background: rgba(255,93,115,.08); border-color: rgba(255,93,115,.45); padding: 12px 16px; }
.ai-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-act { width: 30px; height: 30px; border-radius: 9px; border: 0; background: none; color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.ai-act:hover { color: var(--text); background: rgba(120,140,220,.1); }
.ai-act svg { width: 16px; height: 16px; }
.ai-msg .bubble ul, .ai-msg .bubble ol { margin: 0 0 .7em; padding-left: 1.3em; }
.ai-msg .bubble li { margin: .2em 0; }
.ai-msg .bubble .md-h { margin: .9em 0 .4em; font-size: 1.08em; }
.ai-msg .bubble .md-h:first-child { margin-top: 0; }
.ai-msg .bubble blockquote { margin: 0 0 .7em; padding: 4px 12px; border-left: 3px solid var(--violet); color: var(--muted); }
.ai-msg .bubble hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.ai-msg .bubble a { text-decoration: underline; text-underline-offset: 2px; }
.code-block { margin: 8px 0 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(2,4,12,.75); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border); }
.code-copy { border: 0; background: none; color: var(--dim); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.code-copy:hover { color: var(--text); background: rgba(120,140,220,.12); }
.code-copy svg { width: 15px; height: 15px; }
.ai-msg .bubble .code-block pre { margin: 0; border: 0; border-radius: 0; background: none; }
.omni-welcome { padding: 8vh 12px 20px; }
.omni-welcome h2 { color: var(--text); font-size: clamp(21px, 4vw, 28px); margin-bottom: 8px; }
.omni-welcome .ai-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 22px auto 0; }
.omni-welcome .ai-suggest button { display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.35; }
.omni-welcome .ai-suggest button svg { width: 18px; height: 18px; flex: none; color: #c9b2ff; }
.ai-note { text-align: center; margin: 8px 0 0; }
.omni-ai .ai-composer .box textarea { font-size: 15px; }
@media (max-width: 900px) {
  .omni-ai.ai-shell.show-list .ai-list { display: block; }
  .omni-ai.ai-shell.show-list .ai-pane { display: none; }
  .omni-ai .ai-head { height: 58px; padding: 0 10px; gap: 8px; }
  .omni-ai .ai-body { padding: 14px 12px; }
  .omni-ai .ai-composer { padding: 10px 10px 12px; }
  .ai-col { max-width: calc(100% - 46px); }
  .omni-welcome { padding-top: 4vh; }
}
@media (max-width: 520px) { .omni-welcome .ai-suggest { grid-template-columns: minmax(0, 1fr); } .ai-note { font-size: 11px; } }

/* =====================================================================
   v12 · QR KOD
   ===================================================================== */
.qr-tabs { width: max-content; max-width: 100%; margin: 0 0 16px; }
.qr-make { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.qr-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qr-type { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(150,172,255,.04); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.qr-type svg { width: 16px; height: 16px; }
.qr-type[aria-checked="true"] { color: var(--text); border-color: rgba(141,92,246,.6); background: linear-gradient(135deg, rgba(141,92,246,.2), rgba(63,125,255,.12)); }
.qr-fields { display: grid; gap: 2px; }
.qr-more { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.qr-more summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--muted); list-style: none; }
.qr-more summary::-webkit-details-marker { display: none; }
.qr-more summary svg { width: 17px; height: 17px; }
.qr-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.qr-opt { display: grid; gap: 4px; }
.qr-opt input[type=color] { width: 100%; height: 40px; padding: 3px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(6,10,22,.6); cursor: pointer; }
.qr-preview { position: sticky; top: calc(var(--topbar) + 12px); display: grid; gap: 10px; }
.qr-stage { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: repeating-conic-gradient(rgba(150,172,255,.06) 0 25%, transparent 0 50%) 0 0 / 22px 22px; border: 1px dashed var(--border-strong); padding: 14px; }
.qr-canvas { width: 100%; height: auto; max-width: 380px; border-radius: 12px; image-rendering: pixelated; box-shadow: 0 20px 50px -24px rgba(0,0,0,.8); }
.qr-empty { display: grid; justify-items: center; gap: 10px; color: var(--dim); text-align: center; font-size: 13.5px; padding: 20px; }
.qr-empty svg { width: 54px; height: 54px; opacity: .5; }
.qr-info { text-align: center; }
.qr-warn { color: #ffd28f; text-align: center; }
.qr-acts { justify-content: center; }
.qr-scan { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; align-items: start; }
.qr-cam-card { display: grid; gap: 12px; }
.qr-cam { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #02040c; }
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-cam.idle .qr-video, .qr-cam.idle .qr-frame { visibility: hidden; }
.qr-cam-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); }
.qr-cam-msg > div { display: grid; justify-items: center; gap: 6px; max-width: 320px; }
.qr-cam-msg > div > svg { width: 46px; height: 46px; opacity: .6; }
.qr-cam:not(.idle) .qr-cam-msg { display: none; }
.qr-frame { position: absolute; inset: 14% 22%; pointer-events: none; }
@media (max-aspect-ratio: 1/1) { .qr-frame { inset: 18% 14%; } }
.qr-frame i { position: absolute; width: 26%; height: 26%; border: 3px solid #fff; filter: drop-shadow(0 0 6px rgba(31,214,198,.8)); }
.qr-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.qr-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.qr-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.qr-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.qr-laser { position: absolute; left: 6%; right: 6%; height: 2px; top: 50%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 12px var(--cyan); animation: qrLaser 2.2s ease-in-out infinite; }
@keyframes qrLaser { 0%,100% { top: 12%; } 50% { top: 88%; } }
.qr-cam.hit::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--ok); border-radius: 18px; animation: qrHit .6s ease-out; }
@keyframes qrHit { from { opacity: 1; } to { opacity: 0; } }
.qr-cam-acts { justify-content: center; }
.qr-drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 14px; border: 1.5px dashed var(--border-strong); color: var(--muted); font-size: 13.5px; cursor: pointer; text-align: center; }
.qr-drop svg { width: 20px; height: 20px; flex: none; }
.qr-drop.over { border-color: var(--cyan); background: rgba(31,214,198,.08); color: var(--text); }
.qr-side { display: grid; gap: 16px; }
.qr-text { padding: 12px 14px; border-radius: 12px; background: rgba(2,4,12,.5); border: 1px solid var(--border); font-size: 14px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.qr-kv { grid-template-columns: auto minmax(0, 1fr); }
.qr-hist-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.qr-hist-item:last-child { border-bottom: 0; }
.qr-hist-item:hover { background: rgba(120,140,220,.06); }
.qr-hist-item .grow { display: grid; gap: 2px; }
.qr-hist { display: grid; gap: 4px; }
@media (max-width: 900px) {
  .qr-make, .qr-scan { grid-template-columns: minmax(0, 1fr); }
  .qr-preview { position: static; order: -1; }
  .qr-canvas { max-width: 260px; }
  .qr-cam { aspect-ratio: 3 / 4; max-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) { .qr-laser, .omni-ai-mark.xl { animation: none; } }

.ai-msg > .bubble, .ai-col > .bubble { min-width: 0; }
.asst-result .bubble { max-width: 100%; width: 100%; }
.ai-msg .bubble pre { max-width: 100%; }

/* ---------- v13 · Omni AI cihaz modeli kurulum kartı ---------- */
.lm-card { text-align: left; margin: 18px auto 0; max-width: 620px; padding: 16px; border-radius: 18px; border: 1px solid var(--border-strong); background: linear-gradient(135deg, rgba(141,92,246,.12), rgba(63,125,255,.06)); color: var(--text); }
.ai-col .lm-card { margin: 0; }
.lm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-head b { font-size: 15px; }
.lm-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lm-opt { display: grid; gap: 4px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(6,10,22,.45); color: var(--text); font: inherit; cursor: pointer; }
.lm-opt[aria-pressed="true"] { border-color: rgba(141,92,246,.75); box-shadow: 0 0 0 3px rgba(141,92,246,.18); }
.lm-opt:disabled { opacity: .5; cursor: not-allowed; }
.lm-bar { margin: 12px 0 6px; }
@media (max-width: 520px) { .lm-opts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v14 · Omni AI fotoğraf ekleme ---------- */
.ai-attach { width: 40px; height: 40px; flex: none; align-self: flex-end; }
.ai-previews { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ai-prev { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); }
.ai-prev img { width: 100%; height: 100%; object-fit: cover; }
.ai-prev-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(2,4,12,.75); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ai-prev-x svg { width: 13px; height: 13px; }
.ai-thumbs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ai-thumbs img { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border-strong); }
@media (max-width: 520px) { .ai-thumbs img { width: 96px; height: 96px; } }

/* ---------- v14 · Favoriler ve geri al ---------- */
.fav-star { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--dim); cursor: pointer; flex: none; transition: color .15s, transform .15s, background .15s; }
.fav-star svg { width: 18px; height: 18px; }
.fav-star:hover { color: #ffd166; background: rgba(255,209,102,.1); }
.fav-star.on { color: #ffc547; }
.fav-star.on svg { fill: currentColor; }
.fav-star:active { transform: scale(.85); }
.item { position: relative; }
.item-star { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(6,10,22,.55); opacity: 0; }
.item:hover .item-star, .item:focus-within .item-star, .item-star.on { opacity: 1; }
@media (hover: none) { .item-star { opacity: .9; } }
.row-star { width: 26px; height: 26px; margin-left: auto; }
.note-card, .merge-card, .voice-card { position: relative; }
.note-card .card-star { position: absolute; bottom: 8px; right: 8px; }
.merge-card .card-star, .voice-card .card-star { position: absolute; top: 8px; right: 8px; z-index: 2; }
.ws-card .fav-star { width: 28px; height: 28px; }
.fav-wrap { display: grid; gap: 16px; }
.fav-sec { display: grid; gap: 2px; }
.fav-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; min-width: 0; }
.fav-row:hover { background: rgba(120,140,220,.07); }
.fav-go { opacity: .5; display: grid; } .fav-go svg { width: 16px; height: 16px; }
.count-pill { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: rgba(150,172,255,.12); color: var(--muted); }
.toast-act { border: 0; background: rgba(255,255,255,.14); color: inherit; font: inherit; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 9px; cursor: pointer; flex: none; }
.toast-act:hover { background: rgba(255,255,255,.24); }
@media (max-width: 900px) { .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; width: calc(100vw - 24px); } }

/* ---------- v15 · Yönetici › Platform ayarları düzeni ---------- */
.settings-grid.settings-masonry { display: block; columns: 2 420px; column-gap: 18px; }
.settings-masonry > * { break-inside: avoid; page-break-inside: avoid; display: block; width: 100%; margin: 0 0 18px; }
.settings-masonry .card-title { margin-bottom: 10px; }
.settings-masonry .input, .settings-masonry .textarea { width: 100%; }
.settings-masonry .btn { margin-top: 4px; }

/* ---------- v15 · Omni AI mikrofon ve sesli mesaj ---------- */
.ai-mic { width: 40px; height: 40px; flex: none; align-self: flex-end; }
.ai-mic.on { color: #fff; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: micPulse 1.4s infinite; }
.ai-mic.busy { opacity: .6; pointer-events: none; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 12px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
.composer .box.ai-recbar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; }
.ai-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; animation: blink 1s infinite; }
.ai-rec-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; min-width: 38px; }
.ai-rec-lvl { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.ai-rec-lvl i { flex: 1; max-width: 6px; height: 4px; border-radius: 3px; background: linear-gradient(180deg, #8d5cf6, #1fd6c6); transition: height .08s; }
.ai-voice { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 16px; background: linear-gradient(135deg, rgba(63,125,255,.3), rgba(141,92,246,.26)); border: 1px solid rgba(141,150,255,.35); max-width: 100%; justify-self: end; }
.ai-voice svg { width: 16px; height: 16px; flex: none; }
.ai-voice audio { height: 34px; max-width: min(260px, 60vw); }
.ai-voice span { font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ai-mic.on, .ai-rec-dot { animation: none; } }
.upload-window { margin-top: 12px; display: grid; gap: 6px; } .upload-window .progress > span { background: linear-gradient(90deg, #1fd6c6, #3f7dff); }

/* v17 · destek başlığı: 3B nesneler başlığın üstüne binmesin (sağ sütunda kalsın) */
.support-hero .scene3d.webgl-on { position: relative; inset: auto; height: 200px; align-self: center; }
.support-hero .scene3d.webgl-on .scene3d-canvas { inset: -20% -15%; width: 130%; height: 140%; }
.support-hero > div:first-child { position: relative; z-index: 1; }
/* v17 · kısa ekranlarda (ör. 1366×720 dizüstü) sol menünün altı kesilmesin: menü kendi içinde kaysın */
@media (min-width: 761px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
}

/* ===== v17: yönetici / admin rozetleri ===== */
.badge-owner { background: linear-gradient(120deg, rgba(255,196,82,.22), rgba(255,140,60,.18)); color: #ffd98f; border-color: rgba(255,196,82,.5); box-shadow: 0 0 14px -4px rgba(255,190,80,.6); }
.badge-owner svg, .badge-prot svg { width: 12px; height: 12px; }
.badge-prot { background: rgba(255,255,255,.05); color: var(--text-dim, #a9b3d6); border-color: rgba(255,255,255,.14); }
.badge-xs { font-size: 10.5px; padding: 1px 7px; gap: 4px; }
.badge-xs svg { width: 10px; height: 10px; }
.avatar.xs { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }

/* ===== v17: Genel sohbet ===== */
.lobby { display: grid; grid-template-columns: 1fr 280px; height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); min-height: 0; }
.lobby .thread { min-height: 0; }
.lobby-ic { background: linear-gradient(135deg, rgba(63,125,255,.35), rgba(31,214,198,.3)); }
.lobby-ic svg { color: #dff6ff; }
.lobby-side { border-left: 1px solid var(--border); background: rgba(8,12,26,.45); display: flex; flex-direction: column; min-height: 0; }
.lobby-side-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 12px; border-bottom: 1px solid var(--border); }
.lobby-side-head .count { margin-left: auto; position: static; }
.lobby-online-list { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.lobby-person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; width: 100%; font-size: 13.5px; }
.lobby-person:hover { background: rgba(120,140,220,.08); }
.lobby-person .av-wrap { position: relative; display: inline-flex; flex: none; }
.lobby-side-btn { display: none; }
.lobby-msgs { scroll-behavior: auto; }
.lobby-av, .lobby-name { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.lobby-av { border-radius: 12px; align-self: flex-start; }
.lobby-name { font-weight: 700; }
.lobby-name:hover { text-decoration: underline; }
.lobby-av:focus-visible, .lobby-name:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.msg .who .badge { align-self: center; }
.lobby-media { padding: 5px; }
.lobby-img { display: block; border: 0; padding: 0; background: rgba(0,0,0,.25); border-radius: 12px; overflow: hidden; cursor: zoom-in; min-width: 120px; min-height: 90px; }
.lobby-img img { display: block; width: auto; height: auto; max-width: min(320px, 62vw); max-height: 320px; object-fit: cover; }
.lobby-img.loading { min-height: 160px; }
.lobby-media > div { padding: 6px 8px 3px; text-align: left; }
.lobby-img-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 12px; }
.lobby-voice { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 10px !important; }
.lobby-voice svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.lobby-voice audio { height: 34px; max-width: 230px; }
.lobby-sys { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 8px auto; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; color: #ffd98f; background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.22); max-width: 92%; }
.lobby-sys svg { width: 13px; height: 13px; flex: none; }
.lobby-sys time { color: var(--dim); font-size: 11px; }
.lobby-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 11.5px; color: var(--dim); }
.lobby-day::before, .lobby-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lobby-more { display: flex; justify-content: center; padding: 6px 0 10px; }
.lobby-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; font-size: 13px; color: #ffc3cc; background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.3); }
.lobby-notice svg { width: 16px; height: 16px; flex: none; }
.lobby-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: rgba(255,93,115,.08); border: 1px solid rgba(255,93,115,.32); font-size: 13.5px; flex-wrap: wrap; }
.lobby-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5d73; animation: livePulse 1.2s infinite; }
.lobby-rec-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.lobby-rec-meter { width: 90px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.lobby-rec-level { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5d73, #ffb547); transform-origin: left; transform: scaleX(.04); transition: transform .08s linear; }
.lobby .composer .box .icon-btn { flex: none; }
.lobby-sanction { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lobby-sanction:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; position: relative; overflow: hidden; height: calc(100dvh - var(--topbar) - 64px); }
  .lobby-side { position: absolute; top: 64px; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 5; transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 40px -20px rgba(0,0,0,.6); background: #0b1024; }
  .lobby.side-open .lobby-side { transform: none; }
  .lobby-side-btn { display: inline-flex; }
  .lobby .thread-head { padding: 0 12px; }
  .lobby .thread-head .btn span { display: none; }
  .lobby .msg .bubble-wrap { max-width: 86%; }
  .lobby-voice audio { max-width: 170px; }
}

/* ===== v17: sohbet odası üye seçici ===== */
.user-picker { display: flex; flex-direction: column; gap: 8px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chips:empty { display: none; }
.pick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; border-radius: 99px; font-size: 13px; font-weight: 600; background: rgba(63,125,255,.14); border: 1px solid rgba(63,125,255,.35); }
.pick-chip > span:not(.avatar) { padding: 0 2px; }
.pick-chip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pick-chip button:hover { background: rgba(255,93,115,.25); color: #fff; }
.pick-chip button svg { width: 12px; height: 12px; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.pick-list:empty { display: none; }
.pick-title { padding: 4px 6px; }
.pick-empty { padding: 6px; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; text-align: left; width: 100%; position: relative; font-size: 13.5px; }
.pick-item:hover { background: rgba(120,140,220,.08); }
.pick-item.on { background: rgba(63,125,255,.12); border-color: rgba(63,125,255,.3); }
.pick-item .presence { position: static; border: 0; width: 8px; height: 8px; flex: none; }
.pick-check { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.06); flex: none; }
.pick-item.on .pick-check { background: var(--grad); color: #fff; }
.pick-check svg { width: 14px; height: 14px; }

/* ===== v18: salt okunur ayarlar ===== */
.readonly-note { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.readonly-note svg { width: 18px; height: 18px; flex: none; }
.settings-readonly .switch, .settings-readonly input, .settings-readonly textarea, .settings-readonly select { opacity: .6; cursor: not-allowed; }
.settings-readonly .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ===== v18: Bakım molası sayfası ===== */
html.in-maint .sidebar, html.in-maint .mobile-nav, html.in-maint #search-form, html.in-maint #banners { display: none !important; }
html.in-maint .app { grid-template-columns: 1fr; }
html.in-maint .main { padding-bottom: 0; }
.maint { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); min-height: 0; }
.maint-hero { margin: 20px; padding: 30px 28px; border-radius: var(--radius-lg, 22px); display: flex; flex-direction: column; gap: 14px; align-self: start; position: relative; overflow: hidden; }
.maint-hero::after { content: ""; position: absolute; inset: auto -40% -60% -40%; height: 70%; background: radial-gradient(closest-side, rgba(255,181,71,.18), transparent); pointer-events: none; }
.maint-hero h1 { margin: 2px 0 0; font: 700 30px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.maint-hero .lead { margin: 0; color: var(--muted); line-height: 1.55; }
.maint-hero .eyebrow { color: #ffd497; }
.maint-text { display: flex; flex-direction: column; gap: 8px; }
.maint-art { position: relative; width: 120px; height: 120px; margin-bottom: 4px; }
.maint-art .gear { position: absolute; border-radius: 50%; border: 10px dotted rgba(255,190,90,.75); }
.maint-art .g1 { inset: 0 28px 28px 0; animation: maintSpin 9s linear infinite; }
.maint-art .g2 { width: 58px; height: 58px; right: 0; bottom: 0; border-color: rgba(141,92,246,.8); border-width: 8px; animation: maintSpin 6s linear infinite reverse; }
.maint-ico { position: absolute; left: 26px; top: 26px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb547, #ff7a59); color: #1a0f00; box-shadow: 0 8px 24px -8px rgba(255,150,60,.8); }
.maint-ico svg { width: 22px; height: 22px; }
@keyframes maintSpin { to { transform: rotate(360deg); } }
.maint-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.maint-ann { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(63,125,255,.1); border: 1px solid rgba(63,125,255,.3); font-size: 14px; }
.maint-ann svg { width: 18px; height: 18px; flex: none; color: #9cc0ff; margin-top: 2px; }
.maint-note { margin: 0; }
.maint-chat { min-height: 0; border-left: 1px solid var(--border); }
.maint .lobby { height: 100%; }
@media (max-width: 1100px) { .maint { grid-template-columns: 320px 1fr; } .maint .lobby { grid-template-columns: 1fr; position: relative; overflow: hidden; } .maint .lobby-side { position: absolute; top: 64px; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 5; transform: translateX(105%); transition: transform .25s ease; background: #0b1024; } .maint .lobby.side-open .lobby-side { transform: none; } .maint .lobby-side-btn { display: inline-flex; } }
@media (max-width: 900px) {
  .maint { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .maint-hero { margin: 10px 10px 0; padding: 14px 16px; gap: 8px; display: grid; grid-template-columns: 56px 1fr; align-items: center; }
  .maint-hero > :not(.maint-art):not(.maint-text) { grid-column: 1 / -1; }
  .maint-art { width: 56px; height: 56px; margin: 0; }
  .maint-art .gear { border-width: 5px; }
  .maint-art .g1 { inset: 0 12px 12px 0; }
  .maint-art .g2 { width: 28px; height: 28px; border-width: 4px; }
  .maint-ico { left: 11px; top: 11px; width: 22px; height: 22px; border-radius: 7px; }
  .maint-ico svg { width: 13px; height: 13px; }
  .maint-hero h1 { font-size: 19px; }
  .maint-hero .lead, .maint-note { display: none; }
  .maint-text { gap: 3px; }
  .maint-status { font-size: 12px; }
  .maint-actions { position: absolute; top: 12px; right: 12px; }
  .maint-actions .btn { padding: 0 10px; }
  .maint-chat { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .maint-art .gear { animation: none; } }
.maint-text .eyebrow { align-self: flex-start; }