/* Yönetim paneli. Sitenin diliyle aynı: Geist, mürekkep siyahı, taş rengi, sakin boşluklar. */
:root {
  --ink: #111; --ink-2: #2b2b2b; --muted: #6e6e6e; --faint: #9a958e;
  --line: #e9e6e1; --line-2: #dedad3; --bg: #faf9f7; --panel: #fff; --stone: #f4f1ec; --stone-2: #ece7df;
  --accent: #8a6a45; --ok: #2f6b4f; --ok-bg: #e9f2ec; --warn: #8a5a12; --warn-bg: #fbf1de; --bad: #a3332e; --bad-bg: #fbeceb;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 4px 16px rgba(17,17,17,.04);
  --shadow-lg: 0 10px 40px rgba(17,17,17,.14), 0 2px 6px rgba(17,17,17,.06);
  --ease: cubic-bezier(.2,.7,.2,1);
  --side: 248px;
  --on-ink: #fff; --ink-hover: #333; --hover-line: #cfc9bf; --top-bg: rgba(250,249,247,.86); --sel: #e7dccd; --sk: #f9f7f4; --stage: #ebe8e3;
  --lt-n: #e5e0d8; --lt-f: #d9cbb6; --lt-l: #cfc8bd; --lt-t: #d6d1ca; --lt-s: #ece7df; --lt-p: #bdb5a9;
  color-scheme: light;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5;
}
/* Gece modu: cihazın ayarını izler */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #ece8e1; --ink-2: #d3cec6; --muted: #9c968d; --faint: #6f6a63;
    --line: #33302d; --line-2: #3e3a36; --bg: #1a1917; --panel: #211f1d; --stone: #2a2826; --stone-2: #34312e;
    --accent: #c9a77c; --ok: #7cc39c; --ok-bg: #1d2b23; --warn: #e2b46a; --warn-bg: #2e2516; --bad: #ec8a84; --bad-bg: #331d1c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    --on-ink: #1a1917; --ink-hover: #fff; --hover-line: #4a4540; --top-bg: rgba(26,25,23,.86); --sel: #4a3d2c; --sk: #302d2a; --stage: #121110;
    --lt-n: #2f2b27; --lt-f: #4d4030; --lt-l: #46413b; --lt-t: #3a3632; --lt-s: #26231f; --lt-p: #5a544c;
  }
  .lp-opt.on .lt-f { fill: #8a6f4c; }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- ikon ---------- */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }

/* ---------- düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; white-space: nowrap;
  font-weight: 500; font-size: 14px; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--stone); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--stone); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad-bg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn .kbd { margin-left: 4px; }
.kbd { font-size: 11px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; font-family: inherit; background: var(--panel); }
.btn-primary .kbd { color: var(--on-ink); opacity: .6; border-color: currentColor; background: transparent; }

/* ---------- yerleşim ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; border-right: 1px solid var(--line); background: var(--panel);
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; text-decoration: none; }
.side-brand .logo { width: 24px; height: 24px; background: #002466; -webkit-mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; }
.side-brand strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.side-brand small { color: var(--muted); font-size: 12px; }
.side-search {
  display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 2px 10px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; font-size: 14px; text-align: left;
}
.side-search:hover { border-color: var(--line-2); }
.side-search span:not(.kbd) { flex: 1; }
.nav-label { padding: 14px 10px 6px; font-size: 12px; color: var(--faint); }
.nav-item {
  display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: 14px; transition: background .12s;
}
.nav-item:hover { background: var(--stone); }
.nav-item.on { background: var(--stone-2); color: var(--ink); font-weight: 500; }
.nav-item .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; display: grid; place-items: center; font-weight: 500; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--stone-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.me div { min-width: 0; flex: 1; }
.me strong { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me small { color: var(--muted); font-size: 12px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 32px;
  background: var(--top-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
}
.top.stuck { border-color: var(--line); }
.top h1 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.top .crumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.top .crumb:hover { color: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.content { padding: 8px 32px 64px; max-width: 1180px; width: 100%; }
.content.wide { max-width: none; }
.content.narrow { max-width: 860px; }

/* ---------- kart / bölüm ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px 24px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 15px; font-weight: 500; }
.card-head .more { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; }
.card-head .more:hover { color: var(--ink); }
.section-title { font-size: 13px; color: var(--muted); margin: 28px 0 10px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.editor > * { min-width: 0; }
.rte-area { overflow-x: auto; }
.m-only { display: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* ---------- genel bakış ---------- */
.hello { padding: 18px 0 26px; }
.hello h2 { font-size: 30px; font-weight: 400; letter-spacing: -.03em; }
.hello p { color: var(--muted); margin-top: 6px; }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.quick a {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius); text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s var(--ease), border-color .15s;
}
.quick a:hover { transform: translateY(-2px); border-color: var(--line-2); }
.quick a .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--stone); display: grid; place-items: center; }
.quick a strong { font-weight: 500; font-size: 15px; }
.quick a small { color: var(--muted); font-size: 13px; margin-top: -10px; }
.quick a.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.quick a.dark .ic { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
.quick a.dark small { color: var(--on-ink); opacity: .6; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line); }
.li { display: flex; align-items: center; gap: 12px; padding: 13px 20px; text-decoration: none; }
a.li:hover, button.li:hover { background: var(--bg); }
button.li { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.li .t { flex: 1; min-width: 0; }
.li .t strong { display: block; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .t span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li time, .li .meta { color: var(--faint); font-size: 12px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.empty .i { width: 28px; height: 28px; color: var(--faint); margin-bottom: 8px; }

.checks { display: grid; gap: 2px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 14px; }
.check-row .i { margin-top: 2px; }
.check-row.ok .i { color: var(--ok); }
.check-row.warn .i { color: var(--warn); }
.check-row.bad .i { color: var(--bad); }
.check-row a { color: var(--ink); }
.check-row small { display: block; color: var(--muted); font-size: 13px; }

/* ---------- rozet ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--stone); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.dark { background: var(--ink); color: var(--on-ink); }
.pill .dot { width: 6px; height: 6px; background: currentColor; }

/* ---------- form ---------- */
.field { display: grid; gap: 7px; }
.field + .field { margin-top: 18px; }
.label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.label .counter { margin-left: auto; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.label .counter.warn { color: var(--warn); }
.label .counter.ok { color: var(--ok); }
.hint { font-size: 12.5px; color: var(--muted); }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 15px;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--hover-line); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.07); }
.textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.input-xl { font-size: 30px; font-weight: 400; letter-spacing: -.03em; border: 0; padding: 4px 0; background: transparent; border-radius: 0; box-shadow: none !important; }
.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.input-group:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.07); }
.input-group span { display: flex; align-items: center; padding: 0 10px; background: var(--bg); color: var(--muted); font-size: 14px; border-right: 1px solid var(--line); white-space: nowrap; }
.input-group input { border: 0; outline: none; padding: 9px 12px; flex: 1; min-width: 0; background: transparent; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; }
.switch input { appearance: none; width: 36px; height: 21px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(15px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; font-size: 13.5px; transition: all .15s; }
.chip:hover { border-color: var(--hover-line); }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip .x { opacity: .5; cursor: pointer; display: grid; }
.chip .x:hover { opacity: 1; }
.chip-input { border: 0; outline: none; min-width: 140px; flex: 1; font-size: 14px; padding: 6px 4px; background: transparent; }
.chips-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px; background: var(--panel); }
.chips-box:focus-within { border-color: var(--ink); }
.chips-box .chip { height: 28px; cursor: default; background: var(--stone); border-color: transparent; }

/* ---------- editör sayfaları ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.editor-side { position: sticky; top: 80px; display: grid; gap: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tab { height: 40px; padding: 0 14px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 500; }
.tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.tab .pill { height: 20px; padding: 0 7px; }
.save-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.save-state .dot { background: var(--faint); }
.save-state.dirty .dot { background: var(--warn); }
.save-state.saved .dot { background: var(--ok); }

/* ---------- zengin metin ---------- */
.rte { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); }
.rte:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.07); }
.rte-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rte-bar button { height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-2); }
.rte-bar button:hover { background: var(--stone); }
.rte-bar button.on { background: var(--stone-2); color: var(--ink); }
.rte-bar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.rte-area { min-height: 200px; padding: 18px 20px; outline: none; font-size: 16px; line-height: 1.7; }
.rte-area.short { min-height: 90px; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--faint); }
.rte-area > * + * { margin-top: .8em; }
.rte-area > :first-child { margin-top: 0; }
.rte-area h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-top: 1.4em; }
.rte-area h3 { font-size: 18px; font-weight: 500; margin-top: 1.2em; }
.rte-area ul, .rte-area ol { padding-left: 1.3em; }
.rte-area blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--ink); font-size: 17px; }
.rte-area a { text-decoration: underline; }
.rte-area table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rte-area th, .rte-area td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.rte-area img { max-width: 100%; height: auto; border-radius: 6px; }

/* ---------- Google önizlemesi ---------- */
.serp { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-family: Arial, sans-serif; }
.serp .site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.serp .fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; display: grid; place-items: center; }
.serp .fav i { width: 13px; height: 13px; background: #111; -webkit-mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; }
.serp .name { font-size: 14px; color: #202124; line-height: 1.2; }
.serp .url { font-size: 12px; color: #4d5156; }
.serp .title { color: #1a0dab; font-size: 19px; line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp .desc { color: #4d5156; font-size: 14px; line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- sıralanabilir liste ---------- */
.sortable li { transition: background .15s; }
.sortable li.dragging { opacity: .4; }
.sortable li.over { box-shadow: inset 0 2px 0 var(--ink); }
.handle { cursor: grab; color: var(--faint); display: grid; padding: 4px; border-radius: 6px; background: none; border: 0; }
.handle:hover { color: var(--ink); background: var(--stone); }
.area-li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.area-li .t { flex: 1; min-width: 0; text-decoration: none; }
.area-li .t strong { font-weight: 500; }
.area-li .t span { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star { border: 0; background: none; cursor: pointer; color: var(--faint); display: grid; padding: 6px; border-radius: 6px; }
.star:hover { background: var(--stone); color: var(--ink); }
.star.on { color: var(--accent); }
.star.on .i { fill: currentColor; }
.hidden-row { opacity: .55; }

/* ---------- soru oluşturucu ---------- */
.q-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 14px 16px; display: grid; gap: 12px; }
.q-card + .q-card { margin-top: 10px; }
.q-top { display: flex; gap: 10px; align-items: center; }
.q-top .input { flex: 1; }
.q-top .select { width: 150px; flex: none; }
.q-preview { background: var(--stone); border-radius: var(--radius); padding: 22px; }
.q-preview .pf + .pf { margin-top: 14px; }
.q-preview label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.q-preview .fake { height: 40px; background: var(--panel); border-radius: 2px; display: flex; align-items: center; padding: 0 12px; color: var(--faint); font-size: 14px; }
.q-preview .qhint { margin-top: 14px; font-size: 13px; color: var(--muted); border-left: 1px solid var(--ink); padding-left: 12px; }

/* ---------- gelen kutusu ---------- */
.inbox { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: calc(100vh - 64px); border-top: 1px solid var(--line); }
.inbox-list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--panel); }
.inbox-filter { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.msg-li { display: grid; gap: 3px; padding: 14px 18px 14px 26px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; }
.msg-li:hover { background: var(--bg); }
.msg-li.on { background: var(--stone); }
.msg-li .dot { position: absolute; left: 11px; top: 21px; }
.msg-li .r1 { display: flex; gap: 8px; align-items: baseline; }
.msg-li strong { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-li.unread strong { font-weight: 600; }
.msg-li time { font-size: 12px; color: var(--faint); }
.msg-li .area { font-size: 13px; color: var(--ink-2); }
.msg-li .pre { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-view { overflow-y: auto; padding: 32px 40px; }
.msg-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.msg-head h2 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.msg-head .sub { color: var(--muted); margin-top: 4px; font-size: 14px; }
.msg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 26px; }
.qa { display: grid; grid-template-columns: 220px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.qa div { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.qa div:nth-last-child(-n+2) { border-bottom: 0; }
.qa .q { color: var(--muted); background: var(--bg); }
.msg-text { margin-top: 22px; white-space: pre-wrap; font-size: 16px; line-height: 1.7; }

/* ---------- sayfada düzenle ---------- */
.live { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.live-bar { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.live-bar .select { width: auto; min-width: 260px; height: 36px; padding: 0 10px; font-size: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--stone); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.live-stage { flex: 1; background: var(--stage); display: flex; justify-content: center; overflow: hidden; position: relative; }
.live-stage iframe { border: 0; width: 100%; height: 100%; background: #fff; transition: width .35s var(--ease); }
.live-stage.phone { padding: 24px 0; }
.live-stage.phone iframe { width: 390px; border-radius: 28px; box-shadow: var(--shadow-lg); }
.live-tip { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 14px 10px 16px; border-radius: 999px; font-size: 13.5px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); }
.live-tip button { color: var(--on-ink); border: 0; background: color-mix(in srgb, var(--on-ink) 14%, transparent); border-radius: 999px; height: 26px; padding: 0 10px; cursor: pointer; font-size: 12.5px; }

/* ---------- görseller ---------- */
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); background: var(--panel); cursor: pointer; transition: all .15s; }
.drop:hover, .drop.over { border-color: var(--ink); color: var(--ink); background: var(--stone); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.media-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); text-align: left; padding: 0; cursor: pointer; display: block; width: 100%; position: relative; }
.media-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stone); }
.media-item div { padding: 8px 10px; font-size: 12.5px; }
.media-item div span { display: block; color: var(--faint); }
.media-item.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.img-field { display: flex; gap: 14px; align-items: center; }
.img-field .thumb { width: 84px; height: 105px; border-radius: 8px; background: var(--stone); object-fit: cover; display: grid; place-items: center; color: var(--faint); font-size: 12px; flex: none; }

/* ---------- komut paleti / modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(17,17,17,.32); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal { width: 100%; max-width: 560px; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .2s var(--ease); }
.modal.lg { max-width: 920px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 16px; font-weight: 500; }
.modal-body { padding: 20px; max-height: 64vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.palette input { width: 100%; border: 0; outline: none; padding: 18px 20px; font-size: 17px; border-bottom: 1px solid var(--line); }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palette li button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14.5px; }
.palette li button.on { background: var(--stone); }
.palette li button span { flex: 1; }
.palette li button small { color: var(--faint); font-size: 12px; }
.palette .group { padding: 10px 12px 4px; font-size: 12px; color: var(--faint); }
.palette-foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; background: var(--bg); }

/* ---------- bildirim ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 380px; padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-lg); font-size: 14px; animation: pop .2s var(--ease); }
.toast.bad { background: var(--bad); }
.toast button { margin-left: auto; color: inherit; background: color-mix(in srgb, currentColor 15%, transparent); border: 0; border-radius: 999px; height: 26px; padding: 0 10px; cursor: pointer; font-size: 12.5px; }

/* ---------- giriş ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-art { position: relative; background: #1a1714 url(/assets/img/panel-giris.webp) center 20% / cover; color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.login-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,10,.55), rgba(14,12,10,.78)); }
.login-art > * { position: relative; }
.login-art .logo { width: 40px; height: 40px; background: #fff; -webkit-mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; mask: url(/assets/img/logo-mark.svg) center / contain no-repeat; }
.login-art blockquote { margin: 0; font-size: 30px; font-weight: 300; letter-spacing: -.03em; line-height: 1.2; max-width: 16ch; }
.login-art p { color: rgba(255,255,255,.6); font-size: 14px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--panel); }
.login-form form { width: 100%; max-width: 360px; }
.login-form h1 { font-size: 28px; font-weight: 400; letter-spacing: -.03em; margin-bottom: 6px; }
.login-form .sub { color: var(--muted); margin-bottom: 30px; }
.login-form .btn { width: 100%; height: 44px; margin-top: 22px; font-size: 15px; }
.login-err { margin-top: 16px; padding: 10px 14px; background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-sm); font-size: 14px; }

/* ---------- yükleniyor ---------- */
.skeleton { background: linear-gradient(90deg, var(--stone) 0%, var(--sk) 50%, var(--stone) 100%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.boot { min-height: 100vh; display: grid; place-items: center; }

/* ---------- mobil ---------- */
@media (max-width: 1100px) {
  .editor { grid-template-columns: 1fr; }
  .editor-side { position: static; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(17,17,17,.3); }
  .menu-btn { display: inline-flex; }
  .top { padding: 10px 16px; }
  .content { padding: 8px 16px 48px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox.has-sel .inbox-list { display: none; }
  .inbox:not(.has-sel) .msg-view { display: none; }
  .msg-view { padding: 20px 16px; }
  .qa { grid-template-columns: 1fr; }
  .qa .q { border-bottom: 0; padding-bottom: 2px; }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .live-bar { padding: 10px 12px; }
  .live-bar .select { min-width: 0; flex: 1; }
  .top-actions .hide-m { display: none; }
  .m-only { display: inline-flex; }
}

/* ---------- görünüm seçici ---------- */
.lp { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lp-opt { display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lp-opt:hover { border-color: var(--hover-line); }
.lp-opt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lp-opt strong { font-weight: 500; font-size: 14px; margin-top: 4px; }
.lp-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.lt { display: block; width: 100%; height: auto; padding: 0; background: var(--bg); border-radius: 6px; }
.lt-n { fill: var(--lt-n); } .lt-f { fill: var(--lt-f); } .lt-l { fill: var(--lt-l); } .lt-t { fill: var(--lt-t); } .lt-d { fill: #2b2b2b; }
.lt-s { fill: var(--lt-s); } .lt-p { fill: none; stroke: var(--lt-p); stroke-width: .8; } .lt-c { fill: var(--panel); stroke: var(--lt-p); stroke-width: .8; }
.lt-k { fill: #1d1d1d; } .lt-w { fill: #f4f1ec; } .lt-g { fill: #5c5853; }
.lp-opt.on .lt-f { fill: #c4ad8c; }

/* ---------- giriş görselleri ---------- */
.hero-field { gap: 12px; }
.hero-prev { position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius-sm); overflow: hidden; background: #1a1714 center / cover no-repeat; display: grid; place-items: center; text-align: center; color: #fff; user-select: none; }
.hero-prev.has-img { cursor: crosshair; }
.hp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,10,calc(var(--shade) + .02)), rgba(14,12,10,calc(var(--shade) - .1)) 45%, rgba(14,12,10,calc(var(--shade) + .1))); pointer-events: none; }
.hp-text { position: relative; padding: 20px 28px; pointer-events: none; }
.hp-title { font-size: clamp(20px, 3vw, 34px); font-weight: 300; letter-spacing: -.04em; line-height: 1.08; max-width: 18ch; margin: 0 auto; }
.hp-title b { font-weight: 600; transition: opacity .3s; }
.hp-title .hp-word { pointer-events: auto; cursor: default; opacity: .5; }
.hp-title .hp-word.on { opacity: 1; }
.hp-sub { font-size: 12.5px; color: rgba(255,255,255,.75); max-width: 44ch; margin: 12px auto 0; line-height: 1.5; }
.hp-focus { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3); pointer-events: none; transition: left .2s var(--ease), top .2s var(--ease); }
.hero-group { display: grid; gap: 8px; margin-top: 6px; }
.hero-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ht { position: relative; border-radius: 8px; overflow: hidden; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .15s; }
.ht.on { outline-color: var(--ink); }
.ht-img { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: var(--stone) center / cover no-repeat; cursor: pointer; }
.ht-tools { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; opacity: 0; transition: opacity .15s; }
.ht:hover .ht-tools, .ht:focus-within .ht-tools { opacity: 1; }
.ht-tools button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(17,17,17,.72); color: #fff; cursor: pointer; }
.ht-tools button:hover { background: #111; }
.ht-tools button:last-child { margin-left: auto; }
.ht-add { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--line-2); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 13px; }
.ht-add:hover { border-color: var(--ink); color: var(--ink); background: var(--stone); }
.hero-settings { display: grid; gap: 12px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.range { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; align-items: center; gap: 12px; font-size: 14px; }
.range input { accent-color: var(--ink); width: 100%; }
.range output { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
@media (hover: none) { .ht-tools { opacity: 1; } }

/* ---------- giriş: slogan ve fotoğraflı kelimeler ---------- */
.hero-field { gap: 16px; }
.hf-step { display: grid; gap: 8px; }
.hf-title { font-size: 20px; letter-spacing: -.02em; line-height: 1.35; resize: none; }
.hf-tokens { display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.tk { border: 0; background: none; padding: 4px 6px; border-radius: 6px; font-family: inherit; font-size: 24px; font-weight: 300; line-height: 1.25; letter-spacing: -.03em; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.tk:hover { background: var(--stone); color: var(--ink); }
.tk.in { font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 -2px 0 var(--c); border-radius: 6px 6px 2px 2px; }
.tk.in.act { background: color-mix(in srgb, var(--c) 24%, transparent); box-shadow: inset 0 -3px 0 var(--c); }
.tk.near { box-shadow: inset 0 0 0 1px dashed var(--line-2); outline: 1px dashed var(--line-2); outline-offset: -1px; }
.tk.near:hover { outline-color: var(--ink); }
.hf-cards { display: grid; gap: 10px; }
.hw { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: default; transition: border-color .15s, box-shadow .15s, background .15s; }
.hw.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.hw.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: 0 0 0 2px var(--accent); }
.hw-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-head strong { font-weight: 500; font-size: 15px; }
.hw-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hw-status { font-size: 12.5px; color: var(--muted); }
.hw-status.warn { color: var(--warn); }
.hw-remove { margin-left: auto; }
.hw-lib { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hw-lib:hover { color: var(--ink); }
.ht-add { flex-direction: column; gap: 2px; text-align: center; padding: 6px; line-height: 1.25; }
.ht-add span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.ht-add small { font-size: 11.5px; color: var(--faint); }
.ht-add.is-busy { flex-direction: row; gap: 8px; cursor: default; }

/* giriş önizlemesi: yanında telefon görünümü (odak noktasının etkisi burada görünür) */
.hp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: start; }
.hp-phone { display: grid; gap: 6px; justify-items: center; }
.hp-phone small { font-size: 12px; color: var(--muted); }
.hp-phone-screen { position: relative; width: 132px; aspect-ratio: 9 / 19; border-radius: 18px; overflow: hidden; background: #1a1714 center / cover no-repeat; box-shadow: 0 0 0 4px var(--ink), var(--shadow); display: grid; place-items: center; transition: background-position .25s var(--ease); }
.hp-phone-title { position: relative; padding: 0 10px; color: #fff; text-align: center; font-size: 13px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; pointer-events: none; }
.hp-phone-title b { font-weight: 600; }
.hp-phone-title .hp-word:not(.on) { opacity: .5; }
.hero-prev { transition: background-position .25s var(--ease); }
@media (max-width: 700px) { .hp-wrap { grid-template-columns: 1fr; } .hp-phone { display: none; } }

/* ---------- sosyal medya stüdyosu ---------- */
.soc-title { margin: 2px 0 16px; }
.soc-setup { display: grid; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.soc-thumb { width: 44px; height: 55px; border-radius: 6px; object-fit: cover; flex: none; background: var(--stone); }
.soc-thumb-empty { display: grid; place-items: center; color: var(--faint); }
.soc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.soc-canvas-card { display: grid; gap: 14px; min-width: 0; }
.soc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soc-toolbar .seg button { padding: 0 10px; }
.soc-add-layer { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.soc-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.soc-main { width: 100%; justify-self: center; }
.soc-stage-box { position: relative; width: 100%; touch-action: none; user-select: none; }
.soc-stage-box > .soc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.soc-canvas { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--shadow); background: var(--stone); }
.soc-hit { position: absolute; cursor: move; border-radius: 2px; transform-origin: center; }
.soc-hit:hover { outline: 1px dashed rgba(138,106,69,.9); outline-offset: 1px; }
.soc-hit.on { outline: 2px solid #3b82f6; outline-offset: 1px; }
.soc-hit.layer.on { outline-color: #e08a1e; }
.soc-hit.is-hidden { opacity: .5; outline-style: dashed; }
.soc-h { position: absolute; width: 14px; height: 14px; border-radius: 3px; background: #fff; border: 2px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.soc-hit.layer .soc-h { border-color: #e08a1e; }
.soc-h-size { right: -8px; bottom: -8px; cursor: nwse-resize; }
.soc-h-rot { left: 50%; top: -28px; margin-left: -7px; border-radius: 50%; cursor: grab; }
.soc-guide { position: absolute; background: #e0457b; pointer-events: none; z-index: 5; }
.soc-guide.x { top: 0; bottom: 0; width: 1px; }
.soc-guide.y { left: 0; right: 0; height: 1px; }
.soc-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; }
.soc-mini { flex: none; width: 96px; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; gap: 4px; text-align: left; }
.soc-mini .soc-canvas { box-shadow: none; border: 1px solid var(--line); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.soc-mini.on .soc-canvas { outline-color: var(--ink); }
.soc-mini small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-add { align-self: start; min-height: 96px; place-content: center; justify-items: center; border: 1.5px dashed var(--line-2); color: var(--muted); font-size: 12.5px; }
.soc-add:hover { border-color: var(--ink); color: var(--ink); }
.soc-slide-tools { flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.soc-side { position: sticky; top: 80px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 18px 20px; max-height: calc(100vh - 100px); overflow-y: auto; }
.soc-side .tabs { position: sticky; top: -6px; background: var(--panel); z-index: 2; margin: 0 -18px 16px; padding: 0 8px; }
.soc-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.soc-fields:disabled { opacity: .7; }
.soc-sel-title { font-weight: 500; font-size: 15px; }
.soc-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-theme { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 13px; }
.soc-theme i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(127,127,127,.35); }
.soc-theme.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.soc-colors { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.soc-colors button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(127,127,127,.4); }
.soc-colors button.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.soc-colors input { width: 30px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.soc-photo { display: flex; gap: 12px; align-items: center; }
.soc-photo img, .soc-photo-empty { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; flex: none; background: var(--stone); display: grid; place-items: center; color: var(--faint); }
.soc-photos { display: grid; gap: 10px; }
.soc-ph { position: relative; width: 84px; }
.soc-ph img { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; display: block; }
.soc-ph button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(17,17,17,.75); color: #fff; display: grid; place-items: center; cursor: pointer; }
.soc-channels { display: grid; gap: 6px; }
.soc-ch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.soc-ch:has(input:checked) { border-color: var(--ink); background: var(--stone); }
.soc-ch img, .soc-ch .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; }
.soc-ch span:last-child { display: grid; line-height: 1.25; }
.soc-ch strong { font-weight: 500; font-size: 14px; }
.soc-ch small { color: var(--muted); font-size: 12px; }
.soc-results { display: grid; gap: 2px; }
@media (max-width: 1100px) { .soc-layout { grid-template-columns: 1fr; } .soc-side { position: static; max-height: none; } }
.pick-list { max-height: 60vh; overflow-y: auto; }
.pw-warn { margin-bottom: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bad-bg); }

/* katmanlar listesi */
.soc-stack { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.soc-stack li { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 6px; cursor: pointer; font-size: 13.5px; background: var(--panel); }
.soc-stack li + li { border-top: 1px solid var(--line); }
.soc-stack li:hover { background: var(--bg); }
.soc-stack li.on { background: var(--stone); }
.soc-stack li.dragging { opacity: .4; }
.soc-stack li.over { box-shadow: inset 0 2px 0 var(--ink); }
.soc-stack li.is-hidden .soc-stack-name { opacity: .45; text-decoration: line-through; }
.soc-stack .handle { cursor: grab; padding: 2px; }
.soc-stack-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-stack-kind { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; vertical-align: middle; }
.soc-stack-kind.b { background: #3b82f6; }
.soc-stack-kind.l { background: #e08a1e; }

/* ---------- ziyaretçiler ---------- */
.an-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.an-tile { display: grid; gap: 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.an-tile-label { font-size: 13px; color: var(--muted); }
.an-tile strong { font-size: 30px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.an-tile small { font-size: 12.5px; color: var(--muted); }
.an-tile .up { color: var(--ok); } .an-tile .down { color: var(--bad); }
.an-h { font-size: 15px; font-weight: 500; }
.an-chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 220px auto; gap: 6px 10px; }
.an-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; margin: -7px 0; }
.an-plot { position: relative; }
.an-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.an-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.an-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.an-bar { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: .85; transition: opacity .15s; }
.an-col.on .an-bar { opacity: 1; box-shadow: 0 0 0 2px var(--panel); }
.an-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: var(--on-ink); padding: 8px 12px; border-radius: 8px; font-size: 12.5px; display: grid; gap: 2px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 3; }
.an-xlabels { grid-column: 2; display: flex; gap: 2px; font-size: 11px; color: var(--faint); }
.an-xlabels span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.an-list { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; gap: 4px; }
.an-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 14px; overflow: hidden; }
.an-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; }
.an-name, .an-val, .an-share { position: relative; }
.an-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-name small { color: var(--muted); margin-left: 6px; font-size: 12px; }
.an-val { font-variant-numeric: tabular-nums; font-weight: 500; }
.an-share { width: 44px; text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-table th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table td:first-child { white-space: normal; min-width: 240px; }
.an-table td a { text-decoration: none; display: grid; }
.an-table td a:hover strong { text-decoration: underline; }
.an-table td strong { font-weight: 500; }
.an-table td small { color: var(--faint); font-size: 12px; }
.an-table tr:last-child td { border-bottom: 0; }
.an-recent time { width: 110px; flex: none; }
@media (max-width: 1100px) { .an-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.an-skip { display: grid; }
.an-skip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.an-skip-row strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.an-click-n { display: grid; grid-template-columns: 72px 56px; text-align: right; font-variant-numeric: tabular-nums; }
.an-click-n strong { font-weight: 500; }

/* Mahmut Karaçalı: liste küçük görselleri, kapak seçici */
.li-thumb { width: 52px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--stone, #eee); flex: none; }
.cover-pick { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: none; }
.cover-pick img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* Randevular: haftalık görünüm */
.week-title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; }
.day.today { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.day.past { opacity: .72; }
.day header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 2px 2px 6px; }
.day header span { grid-column: 1; }
.day header .btn { grid-row: 1 / span 2; grid-column: 2; }
.day header strong { font-weight: 500; font-size: 14px; }
.day header span { font-size: 13px; color: var(--muted); }
.day-empty { color: var(--muted); font-size: 13px; margin: 6px 2px; }
.appt { text-align: left; display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--bg); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.appt:hover { border-color: var(--ink-2, #555); }
.appt time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.appt strong { font-weight: 500; font-size: 14px; line-height: 1.3; }
.appt span { font-size: 12px; color: var(--muted); }
.appt i { font-style: normal; justify-self: start; margin-top: 4px; }
.appt.st-Scheduled { border-left-color: #c68a1d; }
.appt.st-Confirmed { border-left-color: #2f6fd6; }
.appt.st-Completed { border-left-color: #2f8f5b; }
.appt.st-Cancelled { border-left-color: #c24b4b; opacity: .6; }
.appt.st-Cancelled strong { text-decoration: line-through; }
.pill.info { background: #e7eefb; color: #2556a8; }
.show-m { display: none; }
@media (max-width: 1100px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .week { grid-template-columns: 1fr; } .day { min-height: 0; } .show-m { display: inline-flex; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }
.suggest { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.suggest button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.suggest button:hover { background: var(--bg); }
.suggest span { color: var(--muted); font-size: 13px; }
.picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.picked strong { display: block; font-weight: 500; }
.picked small { color: var(--muted); }
.patient-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
.patient-head h2 { font-size: 26px; font-weight: 400; letter-spacing: -.03em; margin: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
/* Instagram */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ig-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; }
.ig-item.off .ig-img img { opacity: .45; }
.ig-img { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg); }
.ig-img img { width: 100%; height: 100%; object-fit: cover; }
.ig-img .pill { position: absolute; left: 8px; top: 8px; }
.ig-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ig-strip a { position: relative; flex: none; width: 92px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--bg); }
.ig-strip img { width: 100%; height: 100%; object-fit: cover; }
.ig-strip i { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }