/* ============ MyTime ============ */
/* ============ Tema tokenları ============
   Koyu tema (varsayılan): derin lacivert zemin, yüksek kontrast açık metin.
   Açık tema: WCAG AA gözetilerek seçilmiş koyu tonlar (metin/vurgu ≥ 4.5:1). */
:root {
  --bg: #0b1020;
  --bg2: #101736;
  --card: #161f3f;
  --card2: #1c2750;
  --line: #27335f;
  --txt: #e6eaf6;
  --muted: #8b95b8;
  --accent: #6366f1;
  --accent-deep: #4f46e5;
  --accent2: #22d3ee;
  --good: #34d399;
  --good-strong: #10b981;
  --good-deep: #059669;
  --warn: #fbbf24;
  --warn-deep: #d97706;
  --bad: #f87171;
  --bad-strong: #ef4444;
  --bad-deep: #dc2626;
  --body-grad: radial-gradient(1200px 800px at 80% -10%, #1b2450 0%, var(--bg) 55%);
  --sidebar-bg: rgba(13, 18, 40, .85);
  --nav-active-bg: linear-gradient(90deg, rgba(99, 102, 241, .25), rgba(34, 211, 238, .12));
  --nav-active-ring: rgba(99, 102, 241, .35);
  --clock-from: #ffffff;
  --clock-to: #b6c3f5;
  --flash-to: #6b1d1d;
  --rang-bg: #3b2c10;
  --rang-border: #b45309;
  --dist-active-bg: rgba(251, 191, 36, .14);
  --complete-bg: rgba(52, 211, 153, .08);
  --chip-play-bg: rgba(34, 211, 238, .12);
  --overlay: rgba(5, 8, 20, .88);
  --overlay2: rgba(5, 8, 20, .7);
  --scale: 1;
  font-size: 16px;
}

html[data-theme="light"] {
  --bg: #eef1f8;
  --bg2: #ffffff;
  --card: #ffffff;
  --card2: #f2f5fb;
  --line: #d7ddee;
  --txt: #1a2340;         /* beyaz üstünde ~14.9:1 */
  --muted: #5a6486;       /* beyaz üstünde ~5.5:1 */
  --accent: #4f46e5;      /* beyaz üstünde 6.3:1 — buton zemini + metin için güvenli */
  --accent-deep: #4338ca;
  --accent2: #0e7490;     /* camgöbeği koyulaştı: beyazda 5.3:1, sayaçlar okunur */
  --good: #047857;        /* 5.1:1 */
  --good-strong: #059669;
  --good-deep: #065f46;
  --warn: #b45309;        /* 4.8:1 */
  --warn-deep: #92400e;
  --bad: #dc2626;         /* 4.5:1 */
  --bad-strong: #dc2626;
  --bad-deep: #b91c1c;
  --body-grad: radial-gradient(1200px 800px at 80% -10%, #dfe6fb 0%, var(--bg) 55%);
  --sidebar-bg: rgba(255, 255, 255, .92);
  --nav-active-bg: linear-gradient(90deg, rgba(79, 70, 229, .12), rgba(14, 116, 144, .08));
  --nav-active-ring: rgba(79, 70, 229, .35);
  --clock-from: #1a2340;
  --clock-to: #4338ca;
  --flash-to: #fecaca;
  --rang-bg: #fef3c7;
  --rang-border: #f59e0b;
  --dist-active-bg: rgba(180, 83, 9, .12);
  --complete-bg: rgba(4, 120, 87, .08);
  --chip-play-bg: rgba(14, 116, 144, .10);
  --overlay: rgba(226, 232, 246, .88);
  --overlay2: rgba(226, 232, 246, .75);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--body-grad);
  color: var(--txt);
  min-height: 100vh;
}

.app { display: flex; min-height: 100vh; }

/* ============ Sidebar ============ */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-icon { width: 34px; height: 34px; }
.brand-name { font-size: 1.35rem; font-weight: 300; letter-spacing: .5px; }
.brand-name b { font-weight: 700; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-btn, .pip-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: .95rem; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.nav-btn:hover, .pip-btn:hover { background: var(--card); color: var(--txt); }
.nav-btn.active { background: var(--nav-active-bg); color: var(--txt); box-shadow: inset 0 0 0 1px var(--nav-active-ring); }
.nav-ico { font-size: 1.1rem; width: 24px; text-align: center; }
.pip-btn { border: 1px dashed var(--line); justify-content: flex-start; }

/* ============ Main ============ */
.main { flex: 1; padding: 28px 34px 60px; max-width: 1100px; }
.tab { display: none; }
.tab.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.tab-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.tab-head h1 { font-size: 1.5rem; font-weight: 600; }
/* Notlar: liste alanı geniş kalsın — başlık yukarıda, altındaki boşluk dar */
.tab-head.tight { margin-bottom: 10px; }
#tab-notes { margin-top: -10px; }
.tab-desc { color: var(--muted); margin: -6px 0 18px; line-height: 1.5; max-width: 720px; }
.section-title { margin: 22px 0 10px; font-size: 1.02rem; color: var(--muted); font-weight: 600; }

/* ============ Buttons ============ */
.btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--txt);
  font-family: inherit; font-size: .92rem;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.25); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; color: #fff; }
.btn.good { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); border-color: transparent; color: #fff; }
.btn.danger { background: linear-gradient(135deg, var(--bad-deep), var(--bad-strong)); border-color: transparent; color: #fff; }
.btn.big { padding: 13px 26px; font-size: 1.05rem; border-radius: 12px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.icon-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 1.05rem; cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.icon-btn:hover { background: var(--card2); color: var(--txt); }

/* ============ Cards ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 14px; font-size: 1.05rem; }
.card-list { display: flex; flex-direction: column; gap: 12px; }
.empty { color: var(--muted); padding: 30px 10px; text-align: center; display: none; }

.item-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.item-card.off { opacity: .55; }
.item-main { flex: 1; min-width: 180px; }
.item-title { font-weight: 600; font-size: 1.05rem; }
.item-sub { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.item-big {
  font-size: calc(1.9rem * var(--scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.item-actions { display: flex; align-items: center; gap: 8px; }

/* toggle switch */
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { display: none; }
.switch .sl {
  position: absolute; inset: 0; border-radius: 13px;
  background: var(--line); transition: background .2s;
}
.switch .sl::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: left .2s;
  box-shadow: 0 1px 3px rgba(10, 15, 35, .35);
}
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::after { left: 23px; }

/* progress bar */
.pbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; width: 100%; margin-top: 10px; }
.pbar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; transition: width .5s linear; }

/* day chips */
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  width: 38px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted);
  font-size: .8rem; cursor: pointer; font-family: inherit;
}
.day-chip.on { background: var(--accent); color: #fff; border-color: transparent; }

/* ============ Dashboard ============ */
/* Günlük odak hedefi çubuğu */
.focus-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 14px; cursor: pointer; transition: border-color .12s;
}
.focus-bar:hover { border-color: var(--accent); }
.fb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fb-label { font-weight: 600; font-size: .95rem; }
.fb-val { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-track { height: 10px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.fb-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s ease; }
.focus-bar.done { border-color: var(--good); }
.focus-bar.done .fb-fill { background: linear-gradient(90deg, var(--good-deep), var(--good)); }
.focus-bar.done .fb-val { color: var(--good); font-weight: 600; }
/* Odak detay modalı */
.fd-total { font-size: 1.05rem; margin-bottom: 2px; }
.fd-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.fd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.fd-when { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.fd-dur { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.dash-w {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; position: relative;
  transition: transform .12s, opacity .12s;
}
.dash-w.dragging { opacity: .4; transform: scale(.98); border-style: dashed; border-color: var(--accent); }
.dash-w.drop-before { box-shadow: -4px 0 0 0 var(--accent2); }
.dash-w.drop-after { box-shadow: 4px 0 0 0 var(--accent2); }
.dash-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--card2); cursor: grab; user-select: none;
}
.dash-head:active { cursor: grabbing; }
.dash-grab { color: var(--muted); font-size: .9rem; }
.dash-title { font-weight: 600; font-size: .95rem; flex: 1; }
.dash-body { padding: 14px 16px; min-height: 64px; display: flex; flex-direction: column; gap: 8px; }
.dw-clock { font-size: calc(2.6rem * var(--scale)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--clock-from), var(--clock-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-date { color: var(--muted); font-size: .95rem; }
.dw-row { display: flex; align-items: center; gap: 10px; }
.dw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.dw-time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; }
.dw-time.accent { color: var(--accent2); }
.dw-time.good { color: var(--good); }
.dw-time.warn { color: var(--warn); }
.dw-muted { color: var(--muted); }
.dw-sub { color: var(--muted); font-size: .84rem; }
.dw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-actions .btn { padding: 6px 12px; font-size: .85rem; }
.btn.sm { padding: 4px 10px; font-size: .8rem; }

/* ============ Clock tab ============ */
.clock-hero { text-align: center; padding: 7vh 0 4vh; }
.clock-time {
  font-size: calc(clamp(4rem, 11vw, 8.5rem) * var(--scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  background: linear-gradient(180deg, var(--clock-from), var(--clock-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.05;
}
.clock-date { color: var(--muted); font-size: calc(1.2rem * var(--scale)); margin-top: 10px; }
.clock-next { color: var(--accent2); font-size: 1rem; margin-top: 16px; min-height: 1.4em; }
.clock-summary { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mini-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 20px; text-align: center; min-width: 150px; cursor: pointer;
}
.mini-stat:hover { border-color: var(--accent); }
.mini-stat .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-stat .k { color: var(--muted); font-size: .8rem; margin-top: 4px; }

/* ============ Pomodoro ============ */
.pomo-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pomo-ring-box { position: relative; width: min(320px, 78vw); }
.pomo-svg { width: 100%; transform: rotate(-90deg); }
.pomo-track { fill: none; stroke: var(--line); stroke-width: 10; }
.pomo-prog {
  fill: none; stroke: url(#pomoGrad); stroke: var(--accent);
  stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 741.4; stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s linear, stroke .3s;
}
.pomo-prog.break { stroke: var(--good); }
.pomo-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.pomo-phase { color: var(--muted); letter-spacing: 3px; font-size: .85rem; font-weight: 600; }
.pomo-time { font-size: calc(3.4rem * var(--scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.pomo-session { color: var(--accent2); font-size: .9rem; min-height: 1.2em; }
.pomo-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pomo-today { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .95rem; }
.pomo-today .tomato { font-size: 1.1rem; }
.pomo-settings { width: 100%; max-width: 640px; }

/* ============ Tasks ============ */
/* arama + proje ekleme aynı satırı yarı yarıya paylaşır */
.task-toolrow { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.task-toolrow > #task-search { flex: 1 1 0; min-width: 220px; margin: 0; }
.task-toolrow > .proj-addrow { flex: 1 1 0; min-width: 260px; margin: 0; }
/* iki kutu aynı yükseklikte dursun (arama girdisiyle proje girdisi/düğmesi) */
.task-toolrow .proj-addrow #proj-name { flex: 1 1 auto; width: auto; padding: 11px 15px; border-radius: 12px; font-size: .95rem; }
.task-toolrow .proj-addrow .btn { padding: 12px 16px; }
.task-idle { display: flex; gap: 12px; flex-wrap: wrap; }
.task-idle input {
  flex: 1; min-width: 220px;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: 1rem; font-family: inherit;
}
.task-idle input:focus { outline: none; border-color: var(--accent); }
/* yeni iş satırındaki proje / bölüm seçicileri (girdiyle aynı yükseklik) */
.task-idle select {
  padding: 13px 12px; border-radius: 12px; max-width: 200px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: .95rem; font-family: inherit; cursor: pointer;
}
.task-idle select:focus { outline: none; border-color: var(--accent); }
.task-active { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.task-active-name { font-size: 1.15rem; font-weight: 600; }
.task-active-timer {
  font-size: calc(2.6rem * var(--scale)); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent2);
}
.task-active-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* aktif bölücü: kart amber vurgulu (iş değil, dikkat dağıtıcı) */
.task-active.dist { box-shadow: 0 0 0 1px var(--warn); border-radius: 12px; }
.task-active.dist .task-active-timer { color: var(--warn); }
.dist-tag { font-size: .72rem; font-weight: 600; color: var(--warn); border: 1px solid var(--warn); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }

/* Bölücü ızgarası */
.distraction-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 8px; }
.dist-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 8px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); cursor: pointer; font-family: inherit;
  transition: border-color .15s, transform .05s, background .15s;
}
.dist-btn:hover { border-color: var(--accent2); }
.dist-btn:active { transform: scale(.96); }
.dist-btn .di { font-size: 2.1rem; line-height: 1; }
.dist-btn .dn { font-size: .92rem; text-align: center; }
.dist-btn .dcount { font-size: .7rem; color: var(--muted); }
.dist-btn .dtimer { font-size: .8rem; color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; }
.dist-btn.active { border-color: var(--warn); background: var(--dist-active-bg); box-shadow: 0 0 0 1px var(--warn); }
.dist-btn .dx {
  position: absolute; top: 4px; right: 6px; opacity: 0;
  color: var(--muted); font-size: .85rem; transition: opacity .15s;
}
.dist-btn:hover .dx { opacity: .6; }
.dist-btn .dx:hover { opacity: 1; color: var(--bad); }
.dist-btn.dist-add { border-style: dashed; color: var(--muted); }
.dist-btn.dist-add .di { font-size: 1.5rem; }
.item-card.rec-dist { border-left: 3px solid var(--warn); }

/* galeriden gelen görsel butonlar: daha büyük ve net */
.dist-btn { min-height: 92px; }
.dist-btn .di-img { width: 52px; height: 52px; object-fit: contain; }

/* hazır galeri seçici (ekleme modalı) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; }
.gal-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.gal-item:hover { border-color: var(--accent2); }
.gal-item img { width: 46px; height: 46px; object-fit: contain; }
.gal-item span:not(.gal-check) { font-size: .78rem; text-align: center; }
.gal-item.added { border-color: var(--good); background: rgba(52, 211, 153, .1); }
.gal-check { display: none; position: absolute; top: 4px; right: 6px; color: var(--good); font-weight: 800; }
.gal-item.added .gal-check { display: block; }

/* İşlerim: arama, tamamlama, kayıt filtreleri */
.task-search-row { margin: 4px 0 14px; }
.task-search-row input, .task-toolrow > #task-search {
  width: 100%; padding: 11px 15px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem;
}
.task-search-row input::placeholder, .task-toolrow > #task-search::placeholder { color: var(--hint); }
.task-search-row input:focus, .task-toolrow > #task-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* 🔒 Şifreli Kasa */
.vault-card { border-color: var(--accent2); }
.vault-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.vault-head .hint { display: block; margin-top: 4px; }
.vault-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.vault-form input[type="password"] {
  flex: 1; min-width: 200px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem;
}
.vault-form input[type="password"]:focus { outline: none; border-color: var(--accent); }
.vault-bar { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.vault-list { display: flex; flex-direction: column; gap: 8px; }
.vault-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.vi-main { flex: 1; min-width: 0; }
.vi-title { font-weight: 600; font-size: .95rem; }
.vi-val { margin-top: 3px; }
.vi-secret { font-family: "Consolas", "Courier New", monospace; font-size: .9rem; color: var(--accent2); word-break: break-all; background: var(--card2); padding: 2px 8px; border-radius: 6px; }
.vi-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ☁️ Hesap & Bulut */
.acct-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.acct-email { font-weight: 600; font-size: .98rem; }
.acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.acct-form input { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .95rem; }
.acct-form input:focus { outline: none; border-color: var(--accent); }
.acct-btns { display: flex; gap: 10px; }
.acct-btns .btn { flex: 1; }
/* OAuth düğmeleri (Google/Apple/Microsoft) + "ya da" ayracı */
.acct-oauth {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt); font-weight: 600;
}
.acct-oauth:hover { border-color: var(--accent); }
.acct-oauth svg { flex: none; }
.acct-sep {
  display: flex; align-items: center; gap: 10px; margin: 2px 0;
  color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.acct-sep span { height: 1px; flex: 1; background: var(--line); }

.btn.complete {
  border-color: var(--good); color: var(--good); background: var(--complete-bg);
  transition: background .15s, color .15s, transform .05s;
}
.btn.complete:hover { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); color: #fff; }
.btn.complete.big { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); color: #fff; border-color: transparent; }

.item-card.done-def { opacity: .8; border-left: 3px solid var(--good); }
.item-card.done-def .item-title { color: var(--good); }

.rec-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rec-dates { display: flex; gap: 8px; align-items: center; }
.rec-dates input {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .85rem;
}
.rec-totals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rec-totals .tot {
  padding: 8px 14px; border-radius: 10px; font-size: .9rem;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.rec-totals .tot b { color: var(--txt); font-variant-numeric: tabular-nums; }
.rec-totals .tot.work { border-left: 3px solid var(--accent2); }
.rec-totals .tot.dist { border-left: 3px solid var(--warn); }
.item-card.running { border-color: var(--good); box-shadow: 0 0 0 1px rgba(52, 211, 153, .25); }
.run-dot { color: var(--good); font-size: .78rem; font-weight: 600; }

/* iş kartı: başlık satırı + açılır madde listesi */
.item-card.task-def { display: block; }
.def-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.todo-chip.all-done { border-color: var(--good); color: var(--good); }
.todo-box {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.todo-item label { display: flex; gap: 10px; align-items: center; cursor: pointer; flex: 1; }
.todo-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.todo-item.done span { text-decoration: line-through; color: var(--muted); }
.todo-addrow { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.todo-add-input {
  flex: 1; min-width: 160px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .9rem;
}
.todo-add-input:focus { outline: none; border-color: var(--accent); }

/* saat/dakika seçici (native time input yerine — sarmaz, uçlarda durur) */
.time-sel { display: inline-flex; gap: 6px; align-items: center; }
.time-sel select { width: auto; min-width: 64px; }
.time-sel b { color: var(--muted); }

/* iş kartı sürükleme tutamacı */
.def-grab { cursor: grab; color: var(--muted); user-select: none; padding: 4px 6px; font-size: 1rem; flex-shrink: 0; touch-action: none; }
.def-grab:active { cursor: grabbing; }
.item-card.dragging { opacity: .4; border-style: dashed; border-color: var(--accent); }
.item-card.drop-above { box-shadow: 0 -4px 0 0 var(--accent2); }
.item-card.drop-below { box-shadow: 0 4px 0 0 var(--accent2); }
.desc-line { color: var(--accent2); opacity: .85; }
.te-area {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem; resize: vertical;
}
.te-area:focus { outline: none; border-color: var(--accent); }
.ttext, .ttext-view { flex: 1; min-width: 0; }
.todo-item .ttext { cursor: text; }
.di-img { width: 34px; height: 34px; object-fit: contain; }
body.compact .di-img { width: 24px; height: 24px; }

/* madde sürükleme tutamacı + yerleştirme göstergeleri (iş düzenleyici) */
.tgrab { cursor: grab; color: var(--muted); user-select: none; padding: 0 4px; font-size: .95rem; flex-shrink: 0; touch-action: none; }
.tgrab:active { cursor: grabbing; }
.todo-item { position: relative; }
.todo-item.dragging { opacity: .45; }
.todo-item.drop-above::before, .todo-item.drop-below::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.todo-item.drop-above::before { top: -2px; }
.todo-item.drop-below::after { bottom: -2px; }

/* alarmı çalan kart: zemin yanıp söner; susturulunca kehribar renkte kalır */
.item-card.flash {
  animation: cardFlash .55s ease-in-out infinite alternate;
  border-color: var(--bad);
  opacity: 1;
}
@keyframes cardFlash {
  from { background: var(--card); }
  to   { background: var(--flash-to); }
}
.item-card.rang { background: var(--rang-bg); border-color: var(--rang-border); opacity: 1; }

/* ön uyarı: süre yaklaşıyor — amber nabız (tıklayınca susar) */
.item-card.prewarn {
  animation: prewarnPulse .8s ease-in-out infinite alternate;
  border-color: var(--warn); cursor: pointer; opacity: 1;
}
@keyframes prewarnPulse {
  from { box-shadow: 0 0 0 1px var(--warn); }
  to   { box-shadow: 0 0 14px 2px var(--warn); background: var(--rang-bg); }
}

/* ============ Analytics ============ */
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button {
  padding: 8px 16px; border: none; background: transparent; color: var(--muted);
  font-family: inherit; font-size: .88rem; cursor: pointer;
}
.seg button.active { background: var(--accent); color: #fff; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-tile {
  flex: 1; min-width: 160px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.stat-tile .v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .k { color: var(--muted); font-size: .82rem; margin-top: 4px; }

.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hbar-label { width: 160px; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--muted); flex-shrink: 0; }
.hbar-track { flex: 1; height: 22px; background: var(--bg2); border-radius: 6px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; min-width: 2px; }
.hbar-fill.good { background: linear-gradient(90deg, var(--good-deep), var(--good)); }
.hbar-fill.warn { background: linear-gradient(90deg, var(--warn-deep), var(--warn)); }
.hbar-val { width: 90px; font-size: .85rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.hours-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 8px; }
.hours-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.hours-bar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent2), var(--accent)); min-height: 2px; }
.hours-bar.peak { background: linear-gradient(180deg, var(--warn), var(--warn-deep)); }
.hours-lbl { font-size: .62rem; color: var(--muted); }

/* ============ Settings ============ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; font-size: .88rem; color: var(--muted); }
.form-grid input, .form-grid select, .modal input, .modal select {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: .95rem; font-family: inherit;
}
.form-grid input:focus, .modal input:focus, .modal select:focus { outline: none; border-color: var(--accent); }
input[type="range"] { padding: 0; accent-color: var(--accent); }
/* onay/seçim kutulu satır (ayarlar + modal içi seçenek listeleri) */
label.row-chk { display: flex; flex-direction: row; align-items: center; gap: 9px; color: var(--txt); padding: 6px 0; cursor: pointer; }
label.row-chk input { flex: none; width: 17px; height: 17px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.form-grid label.row-chk { padding: 0; }
/* bölüm başlığındaki "+ İş Ekle" sağa yaslanır */
.section-title.with-act { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.section-title.with-act .sec-add { margin-left: auto; }
input[type="date"], input[type="time"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
.hint { color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* Notlar */
#note-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: 1rem; resize: vertical; min-height: 60px;
}
#note-input:focus { outline: none; border-color: var(--accent); }
.note-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
/* Not kartı: aksiyonlar sağ ÜST köşede, alt satırda klasör solda / tarih sağda */
.note-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.note-actions { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; align-items: center; }
/* düzenlerken kart aksiyonları gizlenir — biçim çubuğunun altında kalıyorlardı */
.note-card.editing .note-actions { display: none; }
.note-card .note-text { padding-right: 190px; min-height: 22px; }
.note-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; color: var(--muted); font-size: .8rem; flex-wrap: wrap;
}
.note-foot-l { display: flex; gap: 8px; align-items: center; }
/* yerinde düzenleme: yükseklik içerikle büyür */
.note-editbox { position: relative; }
.note-edit {
  width: 100%; min-height: 60px; overflow: hidden; resize: none;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .95rem; line-height: 1.5;
}
.note-edit:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
/* biçimlendirme çubuğu (yerinde düzenleme + açılır not penceresi) */
.md-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.md-btn {
  min-width: 34px; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .85rem; font-weight: 700;
}
.md-btn:hover { border-color: var(--accent); }
.md-hint { margin-left: auto; font-size: .76rem; }
.note-text code, .note-edit code { background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font-size: .9em; }
/* yerinde düzenleme: altta kategori (klasör) seçimi */
.note-editfoot { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: .82rem; flex-wrap: wrap; }
.ne-fsel {
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .85rem;
}
.ne-fsel:focus { outline: none; border-color: var(--accent); }
/* sağ tık menüsü — notu tek adımda klasöre atar */
.ctx-menu {
  position: fixed; z-index: 80; min-width: 190px; max-height: 60vh; overflow-y: auto;
  padding: 6px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.ctx-head { padding: 4px 10px 8px; color: var(--muted); font-size: .76rem; }
.ctx-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; border: 0; background: none;
  color: var(--txt); font-family: inherit; font-size: .88rem;
}
.ctx-item:hover { background: var(--bg2); }
.ctx-item.on { font-weight: 600; color: var(--accent); }
.ctx-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.ctx-new { color: var(--muted); }

.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sound-chip {
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); cursor: pointer;
  font-family: inherit; font-size: .88rem; text-align: center;
  transition: border-color .15s;
}
.sound-chip:hover { border-color: var(--accent2); }
.sound-chip.playing { border-color: var(--accent2); background: var(--chip-play-bg); }

/* ============ Ring overlay ============ */
.ring-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.ring-box {
  text-align: center; padding: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 90vw;
}
.ring-anim { font-size: 5rem; animation: ringshake .5s infinite; }
@keyframes ringshake {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
.ring-item { margin-bottom: 6px; }
.ring-item .t { font-size: 2rem; font-weight: 700; }
.ring-item .s { color: var(--muted); margin-top: 4px; }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: var(--overlay2); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
/* uzun metin düzenleyicileri: geniş pencere, alan pencereyle birlikte büyür */
.modal.wide { width: 860px; max-width: 94vw; }
.modal.wide .te-area { min-height: 46vh; resize: vertical; }
.modal h2 { font-size: 1.2rem; margin-bottom: 18px; }
.modal .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; font-size: .88rem; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ============ Raporlar ============ */
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.score-badge {
  text-align: center; padding: 16px 26px; border-radius: 16px; min-width: 150px;
  border: 1px solid var(--line); background: var(--card2);
}
.score-badge .sc-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.score-badge .sc-lbl { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.score-badge.good .sc-num { color: var(--good); }
.score-badge.mid .sc-num { color: var(--warn); }
.score-badge.low .sc-num { color: var(--bad); }
.score-badge.none { color: var(--muted); padding: 24px; }
.score-badge .trend { display: block; margin-top: 8px; font-size: .9rem; font-weight: 700; }
.score-badge .trend.up { color: var(--good); }
.score-badge .trend.down { color: var(--bad); }
.score-badge .trend.flat { color: var(--muted); }
.score-badge .sc-prev { color: var(--muted); font-size: .74rem; margin-top: 4px; }
.rep-warn { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.rep-ozet { line-height: 1.65; font-size: 1.02rem; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rep-cols .card { margin-bottom: 0; }
.rep-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rep-list li { line-height: 1.5; }

/* sesli kayıt durumu */
.btn.recording, .b.recording {
  background: linear-gradient(135deg, var(--bad-deep), var(--bad-strong)) !important;
  color: #fff !important; border-color: transparent;
  animation: recPulse 1s ease-in-out infinite alternate;
}
@keyframes recPulse { from { box-shadow: 0 0 0 1px rgba(239,68,68,.4); } to { box-shadow: 0 0 12px 3px rgba(239,68,68,.55); } }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ Responsive ============ */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .brand { padding-bottom: 4px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-btn span:last-child { display: none; }
  .main { padding: 18px; }
  .hbar-label { width: 90px; }
  .distraction-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Kısayollar (Ayarlar) ============ */
.sc-form { margin-top: 12px; }
.sc-kinds { display: flex; gap: 8px; margin-bottom: 10px; }
.sc-kind {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font-family: inherit; font-size: .86rem;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.sc-kind:hover { border-color: var(--accent); color: var(--txt); }
.sc-kind.on { border-color: var(--accent); background: var(--accent-soft, rgba(99,102,241,.14)); color: var(--txt); font-weight: 600; }
.sc-kind span:first-child { font-size: 1.05rem; }

.sc-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-fields input {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .9rem; padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s;
}
.sc-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.sc-in-icon { width: 54px; text-align: center; font-size: 1.05rem; }
.sc-in-name { width: 170px; }
.sc-in-target { flex: 1; min-width: 200px; }

.sc-msg { min-height: 18px; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.sc-msg.good { color: var(--good-strong); }
.sc-msg.warn { color: var(--warn); }

.sc-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sc-empty { color: var(--muted); font-size: .86rem; padding: 14px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }

.sc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg2); transition: border-color .15s, opacity .15s;
}
.sc-item:hover { border-color: var(--accent); }
.sc-grab { cursor: grab; color: var(--muted); user-select: none; font-size: 1rem; flex: none; padding: 2px 2px 2px 0; touch-action: none; }
.sc-grab:active { cursor: grabbing; }
.sc-item.dragging { opacity: .4; border-style: dashed; border-color: var(--accent); }
.sc-item.drop-above { box-shadow: 0 -4px 0 0 var(--accent2); }
.sc-item.drop-below { box-shadow: 0 4px 0 0 var(--accent2); }
.sc-item.off { opacity: .5; }
.sc-item.alien { opacity: .45; }
.sc-ico {
  width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; background: var(--card); border: 1px solid var(--line); border-radius: 11px;
}
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-weight: 600; color: var(--txt); font-size: .92rem; }
.sc-target { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.sc-tags { display: flex; gap: 5px; flex: none; }
.sc-tag { font-size: .68rem; padding: 3px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.sc-tag.warn { border-color: var(--warn); color: var(--warn); }
.sc-acts { display: flex; align-items: center; gap: 6px; flex: none; }

/* aç/kapa anahtarı */
.sc-switch { position: relative; width: 38px; height: 21px; flex: none; cursor: pointer; }
.sc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-switch span {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .18s;
}
.sc-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.sc-switch input:checked + span { background: var(--good-strong); }
.sc-switch input:checked + span::after { transform: translateX(17px); }

.sc-pip-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.sc-pip-toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* kısayol ikonu: otomatik çekilen görsel (uygulama ikonu / favicon) */
.sc-ico img { width: 32px; height: 32px; object-fit: contain; display: block; image-rendering: -webkit-optimize-contrast; }

/* ==== Takvimler (ICS aboneliği) ==== */
.cal-help { margin: 6px 0 14px; font-size: .86rem; color: var(--muted); }
.cal-help summary { cursor: pointer; color: var(--txt); }
.cal-help-body { margin-top: 8px; line-height: 1.6; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
/* sekme şeridi (her takvim + Tümü) */
.cal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.cal-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .85rem; padding: 7px 14px;
  transition: border-color .12s, background .12s;
}
.cal-tab:hover { border-color: var(--accent); }
.cal-tab.on { border-color: var(--accent); background: var(--accent-soft, rgba(99,102,241,.14)); font-weight: 600; }
.cal-tab.off { opacity: .5; }
.cal-back { background: none; border: none; color: var(--accent); cursor: pointer; font-family: inherit; font-size: .88rem; padding: 0 0 12px; }
.cal-settings { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.cal-settings.off { opacity: .55; }
.cal-defaults { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.cal-defaults label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.cal-defaults label.cal-ring-lbl { flex-direction: row; align-items: center; gap: 7px; color: var(--txt); font-size: .88rem; align-self: flex-end; padding-bottom: 8px; }
.cal-defaults select {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--txt); font-family: inherit; font-size: .85rem; padding: 8px 10px;
}
.cal-defaults input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.cal-open { width: 100%; text-align: left; cursor: pointer; }
.cal-open:hover { border-color: var(--accent); }
.cal-item-name { flex: 1; font-weight: 600; }
.cal-item-status { font-size: .78rem; }
.cal-open-arrow { color: var(--muted); font-size: 1.2rem; }
.cal-events { display: flex; flex-direction: column; gap: 6px; }
.cal-ev-ctl { display: inline-flex; gap: 5px; flex: none; }
.cal-ev-ctl select {
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--txt); font-family: inherit; font-size: .74rem; padding: 4px 6px;
}
.cal-ev.pinned { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.cal-ev.passed { opacity: .5; }
.cal-ev.passed .cal-ev-title { text-decoration: line-through; text-decoration-color: var(--muted); }

.cal-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-form input, .cal-item input[type="text"], .cal-item input[type="password"] {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .9rem; padding: 9px 11px;
}
.cal-form input:focus, .cal-item input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.cal-in-name { width: 150px; }
.cal-in-url { flex: 1; min-width: 240px; }
.cal-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cal-item { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.cal-item.off { opacity: .5; }
.cal-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-row2 { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cal-row2 .cal-in-url { flex: 1; font-size: .78rem; color: var(--muted); }
.cal-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cal-colors { display: inline-flex; gap: 4px; }
.cal-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cal-swatch.on { border-color: var(--txt); }
.cal-pre {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .82rem; padding: 7px 9px;
}
.cal-status { margin-top: 6px; font-size: .78rem; min-height: 16px; }
.cal-status .muted { color: var(--muted); }
.cal-ok { color: var(--good-strong); }
.cal-err { color: var(--warn); }
.cal-up-title { margin: 18px 0 8px; font-size: .95rem; }
.cal-upcoming { display: flex; flex-direction: column; gap: 6px; }
.cal-ev {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); font-size: .86rem;
}
.cal-ev-when { color: var(--accent2); flex: none; font-variant-numeric: tabular-nums; }
.cal-ev-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-cal { color: var(--muted); font-size: .74rem; flex: none; }

/* ==== İşlerim kaynak sekmeleri (Benim / Jira hesapları) ==== */
.src-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.src-tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .9rem; padding: 8px 16px;
  transition: border-color .12s, background .12s;
}
.src-tab:hover { border-color: var(--accent); }
.src-tab.on { border-color: var(--accent); background: var(--accent-soft, rgba(99,102,241,.14)); font-weight: 600; }

.jtask-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jtask-acc { font-weight: 700; }
.jtask-list { display: flex; flex-direction: column; gap: 8px; }
.jtask {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
}
.jtask.running { border-color: var(--stop); box-shadow: inset 3px 0 0 var(--stop); }
.jtask.done { opacity: .62; }
.jtask.done .jtask-summary { text-decoration: line-through; text-decoration-color: var(--muted); }
.jira-due { font-size: .76rem; color: var(--muted); flex: none; }
.jira-due.soon { color: var(--accent2); }
.jira-due.over { color: var(--warn); font-weight: 600; }
.jira-parent { font-size: .76rem; color: var(--accent); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.jtask .chip { background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.jtask .chip.chip-done { color: var(--good-strong); border-color: var(--good-strong); }
/* alt görevler (Jira sub-task = bizim alt maddeler) */
.jsubs { flex-basis: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.jsub { display: flex; align-items: center; gap: 9px; font-size: .9rem; cursor: pointer; }
.jsub input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
.jsub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsub.done .jsub-name { text-decoration: line-through; color: var(--muted); }
.jira-key.sm { font-size: .74rem; }
.jsub-empty { color: var(--muted); font-size: .84rem; }
.jsub-add { display: flex; gap: 6px; margin-top: 4px; }
.jsub-input { flex: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .86rem; padding: 7px 9px; }
.jsub-input:focus { outline: none; border-color: var(--accent); }
.jtask-main { flex: 1; min-width: 0; }
.jtask-line1 { display: flex; align-items: center; gap: 9px; }
.jtask-summary { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jtask-line2 { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: .78rem; color: var(--muted); }
.jtask-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ==== Jira entegrasyonu (çoklu hesap) ==== */
.jira-toolbar { margin-bottom: 12px; }
.jira-acct { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); padding: 12px; margin-bottom: 12px; }
.jira-acct.off { opacity: .6; }
.jira-acct.jira-editing { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.jira-acct-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jira-acct-label { font-weight: 700; }
.jira-acct-host { font-size: .74rem; color: var(--muted); }
.jira-mode {
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--txt); font-family: inherit; font-size: .78rem; padding: 5px 7px; margin-left: auto;
}
.jira-form-actions { display: flex; gap: 8px; }
.jira-fld { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); }
.jira-fld input {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .9rem; padding: 9px 11px;
}
.jira-fld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.jira-tok { display: flex; gap: 6px; }
.jira-tok input { flex: 1; }
.jira-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jira-me { font-weight: 600; }
.jira-actions { display: flex; gap: 6px; }
.jira-status { min-height: 18px; margin: 8px 0; font-size: .82rem; }
.jira-list { display: flex; flex-direction: column; gap: 8px; }
.jira-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
.jira-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jira-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.jira-key { font-weight: 700; color: var(--accent); text-decoration: none; font-family: ui-monospace, monospace; }
.jira-key:hover { text-decoration: underline; }
.jira-summary { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jira-proj { font-size: .74rem; color: var(--muted); flex: none; }
.jira-badge { font-size: .68rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); flex: none; }
.jira-badge.todo { color: var(--muted); }
.jira-badge.prog { color: var(--accent2); border-color: var(--accent2); }
.jira-badge.done { color: var(--good-strong); border-color: var(--good-strong); }
.jira-imported { color: var(--good-strong); font-size: .8rem; }
.jira-tracked { font-size: .8rem; color: var(--muted); }
.jira-tracked b { color: var(--accent2); }
.jira-trans {
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--txt); font-family: inherit; font-size: .78rem; padding: 5px 7px; margin-left: auto;
}
.jira-soon { opacity: .6; }

/* Notion database eşleme */
.notion-dbs { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.notion-db { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; }
.notion-db.off { opacity: .55; }
.notion-db-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ndb-on { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ndb-on input { width: 16px; height: 16px; accent-color: var(--accent); }
.ndb-map { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); }
.ndb-map select { border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .8rem; padding: 5px 7px; }
.notion-tasks { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* uygulama kataloğu modalı */
.sc-cat-search {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .92rem;
}
.sc-cat-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.sc-cat-list {
  margin-top: 10px; max-height: 46vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
}
.sc-cat-item {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .86rem;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.sc-cat-item:hover { border-color: var(--accent); background: var(--card2); }
.sc-cat-ico { flex: none; font-size: 1rem; }
.sc-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Döngü türleri + alışkanlık takibi ============ */
.lp-kinds { display: flex; gap: 8px; margin-top: 6px; }
.lp-kind {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font-family: inherit; font-size: .85rem;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.lp-kind:hover { border-color: var(--accent); color: var(--txt); }
.lp-kind.on { border-color: var(--accent); background: rgba(99,102,241,.14); color: var(--txt); font-weight: 600; }

.lp-todo-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px dashed var(--line); }
.lp-todo-text { flex: 1; color: var(--txt); font-size: .9rem; }

.lp-streak {
  font-size: .74rem; font-weight: 700; color: var(--warn);
  background: rgba(251,191,36,.13); border: 1px solid rgba(251,191,36,.4);
  border-radius: 999px; padding: 1px 8px; vertical-align: 2px;
}

.lp-todos-card { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.lp-todo { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: .88rem; cursor: pointer; padding: 3px 2px; }
.lp-todo input { width: 16px; height: 16px; accent-color: var(--good-strong); cursor: pointer; }
.lp-todo.tdone span { text-decoration: line-through; color: var(--muted); }

/* alışkanlık saat mini-grafiği (analitik) */
.habit-hours { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 6px 0 2px; }
.habit-hours .hc { flex: 1; min-width: 3px; background: var(--line); border-radius: 2px 2px 0 0; }
.habit-hours .hc.warn { background: var(--warn); }
.habit-hours .hc.good { background: var(--good-strong); }
.habit-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }

/* ============ Kenar çubuğu alt menüsü (Ayarlar ailesi) ============ */
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 2px 14px; padding-left: 8px; border-left: 2px solid var(--line); }
.nav-sub.open { display: flex; }
.nav-btn.sub { font-size: .84rem; padding-top: 7px; padding-bottom: 7px; opacity: .9; }
.nav-btn.sub .nav-ico { font-size: .92rem; }

/* ============ Profil ============ */
.prof-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.prof-grid select, .prof-grid input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .92rem; padding: 9px 11px;
}
.prof-grid select:focus, .prof-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.prof-grid select:disabled { opacity: .5; cursor: not-allowed; }
.prof-privacy { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ============ Projeler (işleri gruplayan üst başlık) ============ */
.proj-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.proj-addrow input {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .9rem; padding: 8px 11px;
}
.proj-addrow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
#proj-name { width: 240px; }

.proj-group { margin-bottom: 14px; border: 1px solid transparent; border-radius: 14px; transition: border-color .15s, background .15s; }
.proj-group.proj-drop { border-color: var(--accent2); background: rgba(34,211,238,.07); }
.proj-head {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin-bottom: 6px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
}
.proj-head.loose { background: transparent; border-style: dashed; opacity: .75; }
/* başlığa tıkla → grubu katla (durum kalıcı) */
.proj-head { cursor: pointer; user-select: none; }
.proj-head:hover { border-color: var(--accent); }
.proj-caret { color: var(--muted); font-size: .8rem; width: 12px; }
.proj-group.closed .proj-body { display: none; }
.proj-group.closed .proj-head { margin-bottom: 0; }
.proj-ico { font-size: 1.05rem; }
.proj-name { font-weight: 600; color: var(--txt); }
.proj-meta { color: var(--muted); font-size: .78rem; }
.proj-actions { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.proj-body { display: flex; flex-direction: column; gap: 8px; padding-left: 10px; border-left: 2px solid var(--line); margin-left: 10px; }
.proj-group.loose .proj-body { border-left-color: transparent; }

.proj-group.proj-empty .proj-head { border-style: dashed; opacity: .8; }
.proj-group.proj-empty { margin-bottom: 8px; }
.proj-group.proj-empty.proj-drop .proj-head { border-style: solid; border-color: var(--accent2); opacity: 1; }
#te-project, #f-defproj {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .92rem; padding: 9px 11px;
}

/* ============ DragKit — uygulama geneli sürükleme görselleri ============ */
.dk-ghost {
  position: fixed !important; left: 0; top: 0; margin: 0 !important;
  z-index: 99999; pointer-events: none; opacity: .95;
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 2px var(--accent);
  border-radius: 12px; background: var(--card);
}
.dk-src {
  opacity: .35;
  box-shadow: inset 0 0 0 2px var(--accent) !important;
  border-radius: 12px;
}
.dk-line {
  height: 5px; margin: 3px 6px; border-radius: 3px; list-style: none;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 10px var(--accent2);
}
.dk-into {
  outline: 2px solid var(--accent2) !important; outline-offset: 2px;
  background: rgba(34,211,238,.10) !important; border-radius: 14px;
}
/* ---- Giriş kapısı: oturum yokken uygulamanın tamamı kilitli ---- */
.auth-gate {
  position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: var(--bg); background-image: radial-gradient(60% 60% at 50% 0%, rgba(99,102,241,.16), transparent 70%);
}
.auth-gate-box {
  width: min(420px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.auth-gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.3rem; }
.auth-gate-brand .brand-icon { width: 30px; height: 30px; }
body.gated .app { filter: blur(3px); pointer-events: none; user-select: none; }

/* ---- Profil: aranabilir seçici (ADR-001 Kural 7) + ilgi alanı rozetleri ---- */
.pf-combo { position: relative; }
.pf-combo-in {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem;
}
.pf-combo-in:focus { outline: none; border-color: var(--accent); }
.pf-combo.disabled .pf-combo-in { opacity: .5; cursor: not-allowed; }
.pf-combo-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--accent); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.pf-opt { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .92rem; color: var(--txt); }
.pf-opt:hover { background: var(--btn); color: var(--btn-txt); }
.pf-opt.on { border: 1px solid var(--accent); }
.pf-opt.empty { color: var(--muted); cursor: default; }
.pf-opt.empty:hover { background: transparent; color: var(--muted); }
.pf-int-label { display: block; margin: 16px 0 8px; font-size: .88rem; color: var(--muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--txt);
  font-family: inherit; font-size: .86rem; transition: transform .12s ease, border-color .12s ease;
}
.pf-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.pf-chip.on { border-color: var(--accent); background: var(--btn); color: var(--btn-txt); font-weight: 600; }

/* ---- Not klasörleri: şerit + bırakma hedefleri ---- */
.nf-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.nf-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); font-size: .88rem; user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nf-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.nf-chip.on { border-color: var(--accent); background: var(--btn); color: var(--btn-txt); font-weight: 600; }
.nf-chip.nf-add { border-style: dashed; color: var(--muted); }
/* sıralama seçicisi — başlık satırında, diğer düğmelerle aynı yükseklikte */
#note-order {
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .9rem;
}
#note-order:focus { outline: none; border-color: var(--accent); }
/* elle sıralamada klasör/etiket sürüklenebilir olduğunu belli et */
.nf-chip[data-fid]:not(.nf-add):not([data-fid="all"]):not([data-fid="none"]),
.nf-chip.nf-tag { cursor: grab; }
.nf-cnt { font-size: .74rem; color: var(--muted); background: var(--bg2); border-radius: 999px; padding: 1px 7px; }
.nf-chip.on .nf-cnt { color: var(--btn-txt); background: rgba(255,255,255,.18); }
.nf-acts { display: inline-flex; gap: 4px; margin-left: 2px; }
.nf-act { opacity: .75; font-size: .82rem; }
.nf-act:hover { opacity: 1; }
.nf-tag { font-size: .74rem; color: var(--accent2); border: 1px solid var(--accent2); border-radius: 6px; padding: 1px 6px; }
/* sürüklerken hedef klasör nabız gibi atar — nereye bırakıldığı tartışmasız */
.nf-chip.dk-into { animation: nf-pulse .9s ease-in-out infinite; }
@keyframes nf-pulse {
  0%, 100% { transform: scale(1.06); box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
  50%      { transform: scale(1.12); box-shadow: 0 0 14px 5px rgba(34,211,238,.28); }
}
/* bırakıldıktan sonra: hedef klasör zıplar, taşınan not kısa süre parlar */
.nf-chip.nf-bump { animation: nf-bump .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes nf-bump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.note-card.nf-landed { animation: nf-landed .9s ease-out; }
@keyframes nf-landed {
  0%   { box-shadow: inset 0 0 0 2px var(--accent2); background: rgba(34,211,238,.14); }
  100% { box-shadow: inset 0 0 0 0 transparent; background: transparent; }
}
/* etiketler: klasörlerden ayrı küme — aralarında dikey sınır çizgisi */
.nf-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.nf-chip.nf-tag { border-style: dashed; color: var(--accent2); }
.nf-chip.nf-tag.on { border-style: solid; background: var(--accent2); color: #06202a; font-weight: 600; }
.nf-chip.nf-tag.on .nf-cnt { background: rgba(0,0,0,.18); color: inherit; }
/* not metnindeki #etiket — tıklayınca o etiketi süzer */
.note-tag { color: var(--accent2); cursor: pointer; font-weight: 600; }
.note-tag:hover { text-decoration: underline; }
/* "#" yazarken çıkan etiket önerileri */
/* Konum JS'ten geliyor (imlecin hemen altı): `top: 100%` metin alanının
   TAMAMININ altına koyuyordu ve uzun notta öneri yazdığın yerden çok uzakta
   çıkıyordu. Genişlik de sabit — sağa taşmasın diye JS sola sınır koyuyor. */
.tag-ac {
  position: absolute; left: 0; top: 0; z-index: 70;
  width: min(280px, 92%);
  max-height: 190px; overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.tag-ac-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px;
  cursor: pointer; font-size: .9rem; color: var(--accent2);
}
.tag-ac-item .nf-cnt { margin-left: auto; }
.tag-ac-item.on, .tag-ac-item:hover { background: var(--btn); color: var(--btn-txt); }

/* not içindeki bağlantılar — karttan doğrudan tıklanır */
.note-link { color: var(--accent2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.note-link:hover { filter: brightness(1.2); }
#note-folder-sel {
  padding: 9px 12px; border-radius: 10px; max-width: 220px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .92rem;
}
#note-folder-sel:focus { outline: none; border-color: var(--accent); }

.dk-edge-before { box-shadow: -5px 0 0 0 var(--accent2), 0 0 12px rgba(34,211,238,.35) !important; }
.dk-edge-after  { box-shadow:  5px 0 0 0 var(--accent2), 0 0 12px rgba(34,211,238,.35) !important; }

/* ============ Dil seçim modalı ============ */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.lang-opt {
  user-select: none;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .88rem;
  cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.lang-opt:hover { border-color: var(--accent); }
.lang-opt.on { border-color: var(--accent); background: rgba(99,102,241,.16); font-weight: 600; }
#btn-lang-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }