/* =========================================================================
   Çevik Yaşam — uygulama stilleri (Multiligo tokenları üzerine kurulu)
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ml-font-sans);
  color: var(--ml-ink);
  background: var(--ml-paper-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: var(--ml-tracking-body);
}
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--ml-red-100); }

/* ---- scrollbars ---- */
.cy-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cy-scroll::-webkit-scrollbar-thumb { background: var(--ml-line-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.cy-scroll::-webkit-scrollbar-thumb:hover { background: var(--ml-ink-5); background-clip: content-box; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
#root { min-height: 100vh; }

.cy-app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  background: var(--ml-paper);
}
.cy-app.side-collapsed { grid-template-columns: 72px 1fr; }
.cy-side-toggle { position: absolute; top: 22px; right: -12px; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--ml-on-night-line); background: var(--ml-night-2); color: var(--ml-on-night-2); display: grid; place-items: center; z-index: 40; transition: background .14s, color .14s; }
.cy-side-toggle:hover { background: var(--ml-card); color: var(--ml-ink); }
.cy-side-toggle .ic { width: 14px; height: 14px; }
.cy-side { position: relative; }
.cy-app.side-collapsed .cy-brand .cy-brand-sub,
.cy-app.side-collapsed .cy-nav-item .lbl,
.cy-app.side-collapsed .cy-nav-group-label,
.cy-app.side-collapsed .cy-user-meta { display: none; }
.cy-app.side-collapsed .cy-nav-item { justify-content: center; padding: 11px; }
.cy-app.side-collapsed .cy-brand { justify-content: center; padding: 4px 0 18px; }
.cy-app.side-collapsed .cy-brand img { height: 18px; }
.cy-app.side-collapsed .cy-nav-badge { position: absolute; top: 4px; right: 6px; }
.cy-app.side-collapsed .cy-nav-item { position: relative; }
.cy-app.side-collapsed .cy-user { justify-content: center; }

/* ---- sidebar ---- */
.cy-side {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--ml-night);
  color: var(--ml-on-night);
  padding: 22px 16px 16px;
  z-index: 30;
}
.cy-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }
.cy-brand img { height: 22px; width: auto; }
.cy-brand .cy-brand-sub {
  font-size: 11px; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase;
  color: var(--ml-on-night-2); border-left: 1px solid var(--ml-on-night-line); padding-left: 11px; line-height: 1.25;
}
.cy-nav { display: flex; flex-direction: column; gap: 2px; }
.cy-nav-group-label {
  font-size: 10.5px; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase;
  color: var(--ml-on-night-2); padding: 16px 12px 6px;
}
.cy-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--ml-r-md);
  color: var(--ml-on-night-2); background: transparent; border: 0;
  width: 100%; text-align: left; font-size: 14.5px; font-weight: 500;
  letter-spacing: var(--ml-tracking-body); transition: background .14s ease, color .14s ease;
}
.cy-nav-item:hover { background: var(--ml-night-2); color: var(--ml-on-night); }
.cy-nav-item.active { background: var(--ml-card); color: var(--ml-ink); font-weight: 600; }
.cy-nav-item.active .cy-nav-ic { color: var(--ml-red); }
.cy-nav-ic { width: 18px; height: 18px; flex: none; }
.cy-nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--ml-red); color: #fff;
}
.cy-nav-item.active .cy-nav-badge { background: var(--ml-red); }
.cy-side-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--ml-on-night-line); }
.cy-user { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--ml-r-md); }
.cy-user:hover { background: var(--ml-night-2); }
.cy-ava {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  background: var(--ml-red); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: 0;
}
.cy-user-meta { line-height: 1.25; min-width: 0; }
.cy-user-meta b { font-size: 13.5px; font-weight: 600; color: var(--ml-on-night); display: block; }
.cy-user-meta span { font-size: 11.5px; color: var(--ml-on-night-2); }

/* ---- main column ---- */
.cy-main { min-width: 0; display: flex; flex-direction: column; }
.cy-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 32px; min-height: 72px;
  background: rgba(250,250,247,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ml-line);
}
.cy-topbar h1 { margin: 0; font: 700 22px/1.15 var(--ml-font-sans); letter-spacing: var(--ml-tracking-tight); white-space: nowrap; }
.cy-topbar .cy-tb-sub { font-size: 13px; color: var(--ml-ink-3); margin-top: 2px; }
.cy-tb-spacer { flex: 1; }
.cy-tb-week { font-family: var(--ml-font-mono); font-size: 12px; color: var(--ml-ink-3); letter-spacing: 0; }

.cy-canvas { padding: 28px 32px 80px; max-width: 1240px; width: 100%; }
.cy-canvas.narrow { max-width: 920px; }

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.cy-card {
  background: var(--ml-card); border-radius: var(--ml-r-lg);
  box-shadow: var(--ml-shadow-1); padding: 24px;
}
.cy-card.flat { box-shadow: none; border: 1px solid var(--ml-line); }
.cy-card.pad-lg { padding: 28px 32px; }
.cy-card.tint { background: var(--ml-paper); border: 1px solid var(--ml-line); box-shadow: none; }

.cy-eyebrow { font: 500 11px/1 var(--ml-font-sans); letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-ink-3); }
.cy-h2 { font: 700 var(--ml-fs-h2)/1.15 var(--ml-font-sans); letter-spacing: var(--ml-tracking-tight); margin: 0; text-wrap: balance; }
.cy-h3 { font: 600 20px/1.25 var(--ml-font-sans); letter-spacing: var(--ml-tracking-snug); margin: 0; }
.cy-h4 { font: 600 16px/1.3 var(--ml-font-sans); letter-spacing: var(--ml-tracking-snug); margin: 0; }
.cy-muted { color: var(--ml-ink-3); }
.cy-mono { font-family: var(--ml-font-mono); letter-spacing: var(--ml-tracking-mono); }
.cy-prose { font-size: 15px; line-height: var(--ml-lh-loose); color: var(--ml-ink-2); }
.cy-prose strong { color: var(--ml-ink); font-weight: 600; }

.cy-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  background: var(--ml-paper-2); color: var(--ml-ink-2); border: 1px solid var(--ml-line);
}
.cy-pill.red { background: var(--ml-red-050); color: var(--ml-red-700); border-color: var(--ml-red-100); }
.cy-pill.green { background: var(--ml-success-bg); color: var(--ml-success); border-color: transparent; }
.cy-pill.warn { background: var(--ml-warn-bg); color: var(--ml-warn); border-color: transparent; }
.cy-pill.info { background: var(--ml-info-bg); color: var(--ml-info); border-color: transparent; }
.cy-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

.cy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--ml-r-md);
  border: 1px solid var(--ml-line-2); background: var(--ml-card); color: var(--ml-ink);
  transition: transform .08s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.cy-btn:hover { border-color: var(--ml-ink-4); }
.cy-btn:active { transform: scale(.98); }
.cy-btn:focus-visible { outline: none; box-shadow: var(--ml-shadow-focus); }
.cy-btn.primary { background: var(--ml-red); border-color: var(--ml-red); color: #fff; }
.cy-btn.primary:hover { background: var(--ml-red-600); border-color: var(--ml-red-600); }
.cy-btn.primary:active { background: var(--ml-red-700); }
.cy-btn.ghost { background: transparent; border-color: transparent; color: var(--ml-ink-2); }
.cy-btn.ghost:hover { background: var(--ml-paper-2); }
.cy-btn.sm { padding: 7px 12px; font-size: 13px; }
.cy-btn.block { width: 100%; }
.cy-btn .ic { width: 16px; height: 16px; }

.cy-iconbtn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--ml-r-md);
  border: 1px solid var(--ml-line); background: var(--ml-card); color: var(--ml-ink-2);
  transition: background .14s ease, color .14s ease, border-color .14s;
}
.cy-iconbtn:hover { background: var(--ml-paper-2); color: var(--ml-ink); }
.cy-iconbtn.on { background: var(--ml-ink); color: #fff; border-color: var(--ml-ink); }
.cy-iconbtn .ic { width: 18px; height: 18px; }

/* grids */
.cy-grid { display: grid; gap: 20px; }
.cy-row { display: flex; gap: 20px; }
.cy-row.wrap { flex-wrap: wrap; }
.cy-stack { display: flex; flex-direction: column; gap: 16px; }
.cy-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* =========================================================================
   STAT / METRIC
   ========================================================================= */
.cy-stat { }
.cy-stat .num { font: 700 34px/1 var(--ml-font-sans); letter-spacing: var(--ml-tracking-tight); }
.cy-stat .lab { font-size: 12.5px; color: var(--ml-ink-3); margin-top: 6px; }
.cy-trend { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.cy-trend.up { color: var(--ml-success); }
.cy-trend.down { color: var(--ml-red); }
.cy-trend.flat { color: var(--ml-ink-4); }

/* =========================================================================
   STRESS METER (genel rahatlık)
   ========================================================================= */
.cy-stress-track {
  position: relative; height: 12px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, #1A8A4E 0%, #7FB23B 28%, #E0B400 52%, #E68A00 74%, var(--ml-red) 100%);
}
.cy-stress-knob {
  position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 999px;
  background: var(--ml-card); border: 3px solid var(--ml-ink); transform: translate(-50%,-50%);
  box-shadow: var(--ml-shadow-2); cursor: grab;
}
.cy-stress-knob:active { cursor: grabbing; }
.cy-scale-ticks { display: flex; justify-content: space-between; margin-top: 8px; }
.cy-scale-ticks span { font-family: var(--ml-font-mono); font-size: 10.5px; color: var(--ml-ink-4); }

/* =========================================================================
   TASK / RİTÜEL
   ========================================================================= */
.cy-task {
  display: flex; gap: 14px; padding: 16px; border-radius: var(--ml-r-md);
  border: 1px solid var(--ml-line); background: var(--ml-card); align-items: flex-start;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.cy-task:hover { box-shadow: var(--ml-shadow-2); transform: translateY(-1px); }
.cy-task.done { opacity: .62; }
.cy-task.done .cy-task-title { text-decoration: line-through; text-decoration-color: var(--ml-ink-5); }
.cy-task.active-task { border-color: var(--ml-red); box-shadow: 0 0 0 1px var(--ml-red); }
.cy-check {
  width: 24px; height: 24px; border-radius: 999px; border: 1.75px solid var(--ml-line-2);
  background: var(--ml-card); flex: none; display: grid; place-items: center; margin-top: 1px;
  transition: background .14s, border-color .14s;
}
.cy-check:hover { border-color: var(--ml-ink-3); }
.cy-check.on { background: var(--ml-success); border-color: var(--ml-success); }
.cy-check.on .ic { color: #fff; }
.cy-check .ic { width: 14px; height: 14px; color: transparent; }
.cy-task-body { flex: 1; min-width: 0; }
.cy-task-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.cy-task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.cy-proj-tag { font-size: 11.5px; font-weight: 600; color: var(--ml-ink-3); display: inline-flex; align-items: center; gap: 6px; }
.cy-proj-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* =========================================================================
   MATRIX (yükte hafif pahada ağır)
   ========================================================================= */
.cy-matrix-wrap { position: relative; }
.cy-matrix {
  position: relative; aspect-ratio: 1.32 / 1; width: 100%;
  border-radius: var(--ml-r-lg); border: 1px solid var(--ml-line); overflow: hidden;
  background:
    linear-gradient(0deg, rgba(255,41,57,0.025), rgba(255,41,57,0.025)),
    var(--ml-card);
}
.cy-quad { position: absolute; width: 50%; height: 50%; padding: 16px; }
.cy-quad .ql { font-size: 11px; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-ink-4); font-weight: 600; }
.cy-quad .qd { font-size: 12px; color: var(--ml-ink-4); margin-top: 3px; max-width: 200px; }
.cy-quad.tl { top: 0; left: 0; }
.cy-quad.tr { top: 0; right: 0; text-align: right; }
.cy-quad.bl { bottom: 0; left: 0; }
.cy-quad.br { bottom: 0; right: 0; text-align: right; }
.cy-quad.sweet { background: var(--ml-success-bg); }
.cy-quad .qd.right { margin-left: auto; }
.cy-matrix .axis-x, .cy-matrix .axis-y { position: absolute; background: var(--ml-line-2); }
.cy-matrix .axis-x { left: 0; right: 0; top: 50%; height: 1px; }
.cy-matrix .axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.cy-axislabel { font-size: 11.5px; color: var(--ml-ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cy-node {
  position: absolute; transform: translate(-50%,-50%); z-index: 3;
  display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px;
  background: var(--ml-card); border: 1px solid var(--ml-line-2); border-radius: 999px;
  box-shadow: var(--ml-shadow-2); cursor: grab; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.cy-node:hover { box-shadow: var(--ml-shadow-3); border-color: var(--ml-ink-4); z-index: 5; }
.cy-node:active { cursor: grabbing; }
.cy-node .nd { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* =========================================================================
   KANBAN (haftalık döngü)
   ========================================================================= */
.cy-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.cy-col { background: var(--ml-paper-2); border-radius: var(--ml-r-lg); padding: 14px; min-height: 200px; }
.cy-col-head { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.cy-col-head .step { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-family: var(--ml-font-mono); font-size: 11px; font-weight: 600; background: var(--ml-ink); color: #fff; }
.cy-col-head h4 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: var(--ml-tracking-snug); }
.cy-col-head .cnt { margin-left: auto; font-size: 12px; color: var(--ml-ink-4); font-family: var(--ml-font-mono); }
.cy-cardlet {
  background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-md);
  padding: 13px; margin-bottom: 10px; box-shadow: var(--ml-shadow-1);
  transition: box-shadow .14s ease, transform .14s ease; cursor: default;
}
.cy-cardlet:hover { box-shadow: var(--ml-shadow-2); transform: translateY(-1px); }
.cy-cardlet .ct { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.cy-cardlet .cm { font-size: 12px; color: var(--ml-ink-3); margin-top: 7px; line-height: 1.45; }

/* =========================================================================
   ORBIT (deneyim kainatı / park mesafeleri)
   ========================================================================= */
.cy-orbit-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto;
  border-radius: var(--ml-r-xl);
  background: radial-gradient(circle at center, #16161A 0%, #0E0E0F 70%);
  overflow: hidden;
}
.cy-orbit-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 999px; border: 1px solid rgba(255,255,255,0.07); }
.cy-orbit-ring .rl { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-family: var(--ml-font-mono); font-size: 9px; color: rgba(255,255,255,0.3); background: #0E0E0F; padding: 0 5px; }
.cy-self {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 999px; background: var(--ml-red); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; z-index: 4;
  box-shadow: 0 0 0 6px rgba(255,41,57,0.18), 0 0 40px rgba(255,41,57,0.4);
}
.cy-concern {
  position: absolute; transform: translate(-50%,-50%); z-index: 5; cursor: grab;
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; text-align: center;
}
.cy-concern:active { cursor: grabbing; }
.cy-concern .bubble {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px); color: #fff;
  transition: transform .14s ease, background .14s ease;
}
.cy-concern:hover .bubble { transform: scale(1.08); background: rgba(255,255,255,0.16); }
.cy-concern .bubble .ic { width: 17px; height: 17px; }
.cy-concern .lbl { font-size: 10.5px; color: rgba(255,255,255,0.82); line-height: 1.2; font-weight: 500; }
.cy-concern.hot .bubble { background: rgba(255,41,57,0.85); border-color: var(--ml-red); box-shadow: 0 0 24px rgba(255,41,57,0.5); }
.cy-concern-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 11px; border-radius: 999px; border: 1px solid var(--ml-line); background: var(--ml-card); font-size: 12.5px; font-weight: 500; color: var(--ml-ink-2); }
.cy-chip-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 0; background: var(--ml-paper-2); color: var(--ml-ink-4); }
.cy-chip-x:hover { background: var(--ml-red-050); color: var(--ml-red); }

/* =========================================================================
   J CURVE / chart
   ========================================================================= */
.cy-chart { width: 100%; height: auto; display: block; }
.cy-level-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--ml-line); }
.cy-level-row:last-child { border-bottom: 0; }
.cy-level-num { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; font-family: var(--ml-font-mono); font-size: 13px; font-weight: 600; background: var(--ml-paper-2); color: var(--ml-ink-2); border: 1px solid var(--ml-line); }
.cy-level-row.reached .cy-level-num { background: var(--ml-ink); color: #fff; border-color: var(--ml-ink); }
.cy-level-row.current .cy-level-num { background: var(--ml-red); color: #fff; border-color: var(--ml-red); }

/* =========================================================================
   5 NEDEN chain
   ========================================================================= */
.cy-why-step { position: relative; padding-left: 36px; padding-bottom: 18px; }
.cy-why-step:before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: var(--ml-line); }
.cy-why-step:last-child:before { display: none; }
.cy-why-num { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--ml-ink); color: #fff; display: grid; place-items: center; font-family: var(--ml-font-mono); font-size: 12px; font-weight: 600; }
.cy-why-q { font-size: 12px; color: var(--ml-ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ml-tracking-caps); }
.cy-why-a { font-size: 15px; line-height: 1.5; margin-top: 4px; color: var(--ml-ink); }
.cy-why-step.root .cy-why-num { background: var(--ml-red); }
.cy-root-box { margin-top: 6px; padding: 14px 16px; border-radius: var(--ml-r-md); background: var(--ml-red-050); border: 1px solid var(--ml-red-100); }

/* =========================================================================
   MODAL / SHEET (rituals)
   ========================================================================= */
.cy-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(14,14,15,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 24px; overflow-y: auto;
}
.cy-sheet {
  background: var(--ml-card); border-radius: var(--ml-r-xl); width: 100%; max-width: 540px;
  box-shadow: var(--ml-shadow-3); max-height: 90vh; overflow: hidden; margin: auto;
  display: flex; flex-direction: column;
  animation: cy-pop .22s cubic-bezier(.2,.6,.2,1);
}
@keyframes cy-pop { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
.cy-sheet-head { padding: 22px 28px 0; flex: none; }
.cy-sheet-body { padding: 18px 28px 24px; overflow-y: auto; flex: 1 1 auto; }
.cy-sheet-foot { padding: 15px 28px; border-top: 1px solid var(--ml-line); display: flex; gap: 10px; justify-content: flex-end; background: var(--ml-card); flex: none; }

/* inputs */
.cy-input, .cy-textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ml-ink);
  padding: 11px 13px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2);
  background: var(--ml-card); transition: border-color .14s, box-shadow .14s; resize: vertical;
}
.cy-input:focus, .cy-textarea:focus { outline: none; border-color: var(--ml-ink-3); box-shadow: var(--ml-shadow-focus); }
.cy-label { font-size: 12.5px; font-weight: 600; color: var(--ml-ink-2); display: block; margin-bottom: 7px; }
.cy-field { margin-bottom: 18px; }

/* range input */
.cy-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--ml-line-2); outline: none; }
.cy-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--ml-red); cursor: pointer; box-shadow: var(--ml-shadow-1); }
.cy-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 999px; background: var(--ml-red); cursor: pointer; }

/* chips toggle */
.cy-choice {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--ml-r-md);
  border: 1px solid var(--ml-line-2); background: var(--ml-card); font-size: 13.5px; font-weight: 500; color: var(--ml-ink-2);
  transition: all .14s ease;
}
.cy-choice:hover { border-color: var(--ml-ink-4); }
.cy-choice.on { background: var(--ml-ink); color: #fff; border-color: var(--ml-ink); }

/* segment toggle for AAE */
.cy-aae { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cy-aae-card {
  border: 1px solid var(--ml-line-2); border-radius: var(--ml-r-md); padding: 14px; text-align: center;
  background: var(--ml-card); transition: all .14s ease;
}
.cy-aae-card:hover { border-color: var(--ml-ink-4); }
.cy-aae-card.on { border-color: var(--ml-red); background: var(--ml-red-050); box-shadow: 0 0 0 1px var(--ml-red); }
.cy-aae-card .ic { width: 22px; height: 22px; margin-bottom: 8px; color: var(--ml-ink-2); }
.cy-aae-card.on .ic { color: var(--ml-red); }
.cy-aae-card b { font-size: 14px; display: block; }
.cy-aae-card span { font-size: 11.5px; color: var(--ml-ink-3); }

.cy-core-btn { flex: none; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: var(--ml-r-sm); border: 1px solid var(--ml-line-2); background: var(--ml-card); color: var(--ml-ink-4); transition: all .12s ease; min-width: 58px; }
.cy-core-btn:hover { border-color: var(--ml-ink-4); }
.cy-core-btn.on { background: var(--ml-red-050); border-color: var(--ml-red-100); color: var(--ml-red-700); }
.cy-kind3 { display: inline-flex; gap: 3px; flex: none; background: var(--ml-paper-2); border-radius: var(--ml-r-sm); padding: 2px; }
.cy-kind3-btn { font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 6px; border: 0; background: transparent; color: var(--ml-ink-4); transition: all .12s ease; white-space: nowrap; }
.cy-kind3-btn:hover { color: var(--ml-ink-2); }
.cy-kind3-btn.on.esas { background: var(--ml-red); color: #fff; }
.cy-kind3-btn.on.ilgi { background: var(--ml-warn); color: #fff; }
.cy-kind3-btn.on.takip { background: var(--ml-info); color: #fff; }

.cy-complete-opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; cursor: pointer; }
.cy-next-opt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2); background: var(--ml-card); transition: all .14s ease; }
.cy-next-opt:hover { border-color: var(--ml-ink-4); }
.cy-next-opt.on { border-color: var(--ml-red); box-shadow: inset 0 0 0 1px var(--ml-red); }

.cy-now-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.cy-now-stat { text-align: center; padding: 10px 4px; border-radius: var(--ml-r-md); background: var(--ml-paper-2); }
.cy-now-stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.cy-now-stat span { display: block; font-size: 10.5px; color: var(--ml-ink-4); margin-top: 5px; }

.cy-date-badge { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }

/* KRİTİK UYARI (ADHD koçu) */
.cy-critical { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--ml-r-lg); background: var(--ml-red); color: #fff; margin-bottom: 22px; box-shadow: 0 4px 20px rgba(255,41,57,0.32); animation: cy-crit-in .3s cubic-bezier(.2,.6,.2,1); }
@keyframes cy-crit-in { from { transform: scale(.985); } to { transform: none; } }
.cy-critical-pulse { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: grid; place-items: center; flex: none; animation: cy-pulse 1.6s ease-in-out infinite; }
.cy-critical-pulse .ic { width: 24px; height: 24px; color: #fff; }
@keyframes cy-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }
.cy-critical-title { font-size: 16px; font-weight: 700; letter-spacing: var(--ml-tracking-snug); }
.cy-critical-body { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.92); margin-top: 4px; }
.cy-critical-body u { text-underline-offset: 2px; }
.cy-critical-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cy-critical-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--ml-r-md); border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; transition: background .14s; }
.cy-critical-btn:hover { background: rgba(255,255,255,0.14); }
.cy-critical-btn.solid { background: #fff; color: var(--ml-red); border-color: #fff; }
.cy-critical-btn .ic { width: 15px; height: 15px; }
.cy-critical-count { font-size: 13px; font-weight: 700; background: rgba(255,255,255,0.2); padding: 4px 11px; border-radius: 999px; flex: none; }

/* KRİTİK UYARI son */
/* ODAK SAYFASI */
.cy-odak { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - 72px); }
.cy-odak-left { background: var(--ml-night); color: var(--ml-on-night); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; text-align: center; }
.cy-odak-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-on-night-2); margin-bottom: 16px; }
.cy-odak-active { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; margin-bottom: 28px; max-width: 340px; }
.cy-odak-active.dim { color: var(--ml-on-night-2); font-weight: 400; font-size: 13.5px; }
.cy-odak-ring { width: 240px; height: 240px; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--ring) var(--pct), rgba(255,255,255,0.1) 0); position: relative; margin-bottom: 28px; }
.cy-odak-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 999px; background: var(--ml-night); }
.cy-odak-time { position: relative; font-family: var(--ml-font-mono); font-size: 54px; font-weight: 700; letter-spacing: -0.02em; }
.cy-odak-sub { position: relative; font-size: 13px; color: var(--ml-on-night-2); margin-top: 2px; }
.cy-odak-presets { display: flex; gap: 8px; margin-bottom: 22px; }
.cy-odak-preset { width: 60px; padding: 10px 0; border-radius: var(--ml-r-md); border: 1px solid var(--ml-on-night-line); background: var(--ml-night-2); color: var(--ml-on-night); font-size: 13px; font-weight: 600; transition: all .14s; }
.cy-odak-preset.on { background: var(--ml-red); border-color: var(--ml-red); }
.cy-odak-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cy-odak-right { padding: 40px 36px; overflow-y: auto; }
.cy-odak-task { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--ml-line); border-radius: var(--ml-r-md); background: var(--ml-card); transition: border-color .14s; }
.cy-odak-task.focus { border-color: var(--ml-red); box-shadow: inset 0 0 0 1px var(--ml-red); }
.cy-odak-task.done { opacity: .55; }
.cy-odak-task.done > div > div:first-child { text-decoration: line-through; text-decoration-color: var(--ml-ink-5); }
@media (max-width: 860px) { .cy-odak { grid-template-columns: 1fr; } .cy-odak-left { min-height: 60vh; } }
/* ODAK son */
.cy-nav-group-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; cursor: pointer; }
.cy-nav-group-toggle:hover { color: var(--ml-on-night); }

.cy-proj-pick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cy-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cy-plan-pick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2); background: var(--ml-card); transition: all .12s; }
.cy-plan-pick:hover { border-color: var(--ml-ink-4); }
.cy-plan-pick.on { border-color: var(--ml-red); box-shadow: inset 0 0 0 1px var(--ml-red); }
@media (max-width: 720px) { .cy-proj-pick { grid-template-columns: 1fr; } }

/* BÜTÇE */
.cy-budget-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cy-bstat { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; font-family: var(--ml-font-mono); }
.cy-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cy-debt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.cy-debt-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--ml-line); border-radius: var(--ml-r-md); background: var(--ml-card); }
.cy-cf-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ml-line); font-size: 11px; font-weight: 600; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-ink-4); }
.cy-cf-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ml-line); transition: background .12s; }
.cy-cf-row:last-child { border-bottom: 0; }
.cy-cf-row:hover { background: var(--ml-paper-2); }
.cy-cf-row.done { opacity: .62; }
.cy-cf-num { width: 110px; text-align: right; font-family: var(--ml-font-mono); font-size: 13px; flex: none; }
.cy-cf-run { color: var(--ml-ink-3); }
.cy-cf-row.is-today { background: var(--ml-red-050); }
.cy-status-pill { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 0; cursor: pointer; width: 100%; }
@media (max-width: 900px) { .cy-budget-stats { grid-template-columns: repeat(2, 1fr); } .cy-cf-run, .cy-cf-head span.cy-cf-run { display: none; } }
/* BÜTÇE end */

/* FOCUS MODE */
.cy-focus { position: relative; background: var(--ml-night); color: var(--ml-on-night); border-radius: var(--ml-r-xl); width: 100%; max-width: 460px; padding: 36px 32px 28px; text-align: center; box-shadow: var(--ml-shadow-3); animation: cy-pop .22s cubic-bezier(.2,.6,.2,1); }
.cy-focus-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-on-night-2); margin-bottom: 16px; }
.cy-focus-title { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 24px; letter-spacing: var(--ml-tracking-tight); }
.cy-focus-ring { width: 200px; height: 200px; border-radius: 999px; margin: 0 auto 26px; display: grid; place-items: center; background: conic-gradient(var(--ring) var(--pct), rgba(255,255,255,0.1) 0); position: relative; }
.cy-focus-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 999px; background: var(--ml-night); }
.cy-focus-time { position: relative; font-family: var(--ml-font-mono); font-size: 44px; font-weight: 700; letter-spacing: -0.02em; }
.cy-focus-sub { position: relative; font-size: 12.5px; color: var(--ml-on-night-2); margin-top: 2px; }
.cy-focus-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.cy-focus-preset { padding: 11px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-on-night-line); background: var(--ml-night-2); color: var(--ml-on-night); text-align: left; transition: all .14s; }
.cy-focus-preset:hover { border-color: var(--ml-on-night-2); }
.cy-focus-preset.on { background: var(--ml-red); border-color: var(--ml-red); }
.cy-focus-preset b { display: block; font-size: 14px; }
.cy-focus-preset span { font-size: 11px; opacity: .8; }
.cy-focus-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cy-focus-foot { margin-top: 20px; font-size: 12px; color: var(--ml-on-night-2); line-height: 1.5; }
/* FOCUS MODE end */

/* FOCUS MODE marker for insertion */
.cy-clock { font-family: var(--ml-font-mono); font-size: 13px; font-weight: 600; color: var(--ml-ink-2); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; }
.cy-clock .ic { width: 14px; height: 14px; color: var(--ml-ink-4); }

.cy-stress-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ml-line); background: var(--ml-card); }
.cy-stress-chip i { width: 7px; height: 7px; border-radius: 999px; }

.cy-dl-box { margin-top: 18px; padding: 16px; border-radius: var(--ml-r-md); background: var(--ml-red-050); border: 1px solid var(--ml-red-100); }
.cy-dl-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }

/* DASHBOARD */
.cy-dash-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cy-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.cy-widget-wrap { border-radius: var(--ml-r-lg); }
.cy-widget-wrap.over { outline: 2px dashed var(--ml-red); outline-offset: 3px; }
.cy-widget { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-lg); box-shadow: var(--ml-shadow-1); overflow: hidden; transition: box-shadow .14s; }
.cy-widget:hover { box-shadow: var(--ml-shadow-2); }
.cy-widget-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 2px solid var(--ml-line); }
.cy-widget-grip { color: var(--ml-ink-5); cursor: grab; display: grid; place-items: center; }
.cy-widget-grip:active { cursor: grabbing; }
.cy-widget-title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: var(--ml-tracking-snug); min-width: 0; }
.cy-widget-body { padding: 6px 16px 16px; }
.cy-widget-sec { padding: 12px 0; border-bottom: 1px solid var(--ml-line); }
.cy-widget-sec:last-child { border-bottom: 0; }
.cy-widget-sec-label { font-size: 11px; font-weight: 700; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-ink-3); margin-bottom: 9px; }
.cy-widget-links { display: flex; flex-wrap: wrap; gap: 7px; }
.cy-widget-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--ml-paper-2); color: var(--ml-info); text-decoration: none; border: 1px solid var(--ml-line); transition: all .12s ease; }
.cy-widget-link:hover { border-color: var(--ml-info); background: var(--ml-info-bg); }
.cy-widget-link.disabled { color: var(--ml-ink-4); pointer-events: none; }
.cy-widget-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 1.5px dashed var(--ml-line-2); border-radius: var(--ml-r-lg); background: transparent; color: var(--ml-ink-4); font-size: 13.5px; font-weight: 600; transition: all .14s; }
.cy-widget-add:hover { border-color: var(--ml-ink-4); color: var(--ml-ink); background: var(--ml-paper-2); }
.cy-we-section { border: 1px solid var(--ml-line); border-radius: var(--ml-r-md); padding: 13px; margin-bottom: 12px; background: var(--ml-paper-2); }
@media (max-width: 900px) { .cy-dash-widgets { grid-template-columns: repeat(2, 1fr); } }
/* DASHBOARD end */

.cy-week-strip { display: flex; gap: 10px; }
.cy-week-strip > div { flex: 1; text-align: center; padding: 14px; background: var(--ml-paper-2); border-radius: var(--ml-r-md); }
.cy-week-strip b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.cy-week-strip span { display: block; font-size: 11.5px; color: var(--ml-ink-4); margin-top: 4px; }

/* AAE sıralı araç (Engeller) */
.cy-aae-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }
.cy-aae-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ml-line); background: var(--ml-card); color: var(--ml-ink-4); }
.cy-aae-pill.on { border-color: var(--ml-ink-3); color: var(--ml-ink); }
.cy-aae-pill .ic { width: 14px; height: 14px; }
.cy-aae-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ml-line); }
.cy-aae-steptag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; }


/* reminder / inbox row */
.cy-rem { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--ml-line); }
.cy-rem:last-child { border-bottom: 0; }
.cy-rem-ic { width: 32px; height: 32px; border-radius: var(--ml-r-sm); flex: none; display: grid; place-items: center; background: var(--ml-paper-2); color: var(--ml-ink-2); }
.cy-rem-ic .ic { width: 17px; height: 17px; }

/* progress bar */
.cy-prog { height: 7px; border-radius: 999px; background: var(--ml-paper-2); overflow: hidden; }
.cy-prog > i { display: block; height: 100%; border-radius: 999px; background: var(--ml-ink); }
.cy-prog.red > i { background: var(--ml-red); }
.cy-prog.green > i { background: var(--ml-success); }

/* =========================================================================
   AYARLAR
   ========================================================================= */
.cy-set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-color { width: 38px; height: 38px; padding: 0; border: 1px solid var(--ml-line); border-radius: var(--ml-r-sm); background: none; cursor: pointer; flex: none; }
.cy-color::-webkit-color-swatch-wrapper { padding: 3px; }
.cy-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.cy-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; margin: 8px -4px 0; background: rgba(250,250,247,0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--ml-line); border-radius: var(--ml-r-lg); }

.cy-wd-row { display: flex; gap: 11px; align-items: flex-start; padding: 8px; border-radius: var(--ml-r-sm); }
.cy-wd-row:hover { background: var(--ml-paper-2); }

.cy-level-row.clickable { cursor: pointer; border-radius: var(--ml-r-sm); transition: background .12s ease; }
.cy-level-row.clickable:hover { background: var(--ml-paper-2); }
.cy-track-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cy-track-tab { padding: 9px 15px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2); background: var(--ml-card); font-size: 13.5px; font-weight: 600; color: var(--ml-ink-3); transition: all .14s ease; }
.cy-track-tab:hover { border-color: var(--ml-ink-4); color: var(--ml-ink); }
.cy-track-tab.on { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }

/* =========================================================================
   ÖNCELİK (triyaj)
   ========================================================================= */
.cy-prio-mini-btn { width: 30px; height: 30px; border-radius: var(--ml-r-sm); border: 1px solid var(--ml-line-2); background: var(--ml-card); font-family: var(--ml-font-mono); font-size: 12px; font-weight: 600; color: var(--ml-ink-3); transition: all .12s ease; }
.cy-prio-mini-btn:hover { border-color: var(--c, var(--ml-ink-4)); color: var(--c, var(--ml-ink)); }
.cy-triage { padding: 22px 24px; }
.cy-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--ml-night); color: var(--ml-on-night); border-radius: var(--ml-r-lg); box-shadow: var(--ml-shadow-3); animation: cy-toast-in .25s cubic-bezier(.2,.6,.2,1); }
.cy-toast .cy-muted { color: var(--ml-on-night-2); }
@keyframes cy-toast-in { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* =========================================================================
   RUTİNLER
   ========================================================================= */
.cy-routine { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-md); box-shadow: var(--ml-shadow-1); }
.cy-routine.off { opacity: .55; }
.cy-routine-days { display: flex; gap: 4px; margin-top: 9px; flex-wrap: wrap; }
.cy-day-pill { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid var(--ml-line-2); background: var(--ml-card); color: var(--ml-ink-4); cursor: pointer; transition: all .12s ease; }
.cy-day-pill.on { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff; }
.cy-switch { width: 40px; height: 23px; border-radius: 999px; background: var(--ml-line-2); border: 0; position: relative; flex: none; transition: background .16s ease; cursor: pointer; }
.cy-switch.on { background: var(--ml-success); }
.cy-switch:after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .16s ease; box-shadow: var(--ml-shadow-1); }
.cy-switch.on:after { transform: translateX(17px); }

/* =========================================================================
   GÖREVLER (hiyerarşik liste)
   ========================================================================= */
.cy-toolbar { display: flex; align-items: center; gap: 12px; }
.cy-search { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2); background: var(--ml-card); flex: 0 1 320px; }
.cy-search .ic { width: 16px; height: 16px; color: var(--ml-ink-4); flex: none; }
.cy-search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; color: var(--ml-ink); width: 100%; }

.cy-cat-block { margin-bottom: 18px; }
.cy-cat-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 4px; border: 0; background: transparent; border-bottom: 1px solid var(--ml-line); }
.cy-cat-head:hover { background: var(--ml-paper-2); }
.cy-cat-head h3 { flex: 1; }
.cy-proj-block { margin: 12px 0 12px 22px; }
.cy-proj-head { display: flex; align-items: center; gap: 9px; padding: 4px 2px 10px; }
.cy-proj-name { font-size: 13.5px; font-weight: 600; color: var(--ml-ink-2); }
.cy-sub-block { margin: 8px 0 8px 14px; padding-left: 14px; border-left: 2px solid var(--ml-line); }
.cy-sub-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.cy-sub-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--ml-paper-2); color: var(--ml-ink-4); border: 1px solid var(--ml-line); }
.cy-sub-badge.esas { background: var(--ml-red-050); color: var(--ml-red-700); border-color: var(--ml-red-100); }
.cy-sub-badge.ilgi { background: var(--ml-warn-bg); color: var(--ml-warn); border-color: transparent; }
.cy-sub-badge.takip { background: var(--ml-info-bg); color: var(--ml-info); border-color: transparent; }
.cy-sub-badge.core { background: var(--ml-red-050); color: var(--ml-red-700); border-color: var(--ml-red-100); }
.cy-sub-name { font-size: 13px; font-weight: 600; color: var(--ml-ink); }

.cy-titem { background: var(--ml-card); border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-line-2); border-radius: var(--ml-r-md); box-shadow: var(--ml-shadow-1); transition: box-shadow .14s ease; }
.cy-titem:hover { box-shadow: var(--ml-shadow-2); }
.cy-titem.done { opacity: .6; }
.cy-titem.done .cy-titem-title { text-decoration: line-through; text-decoration-color: var(--ml-ink-5); }
.cy-titem-main { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; }
.cy-titem-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; display: block; }
.cy-titem-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; align-items: center; }
.cy-titem-body { padding: 0 14px 16px 50px; border-top: 1px solid var(--ml-line); margin-top: 2px; padding-top: 14px; }

.cy-check.sm { width: 19px; height: 19px; border-width: 1.5px; }
.cy-check.sm .ic { width: 11px; height: 11px; }
.cy-cl-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.cy-checklist { }

/* =========================================================================
   ERTELEME AKIŞI
   ========================================================================= */
.cy-defer-reason { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 15px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line-2); background: var(--ml-card); font-size: 14px; font-weight: 500; color: var(--ml-ink-2); transition: all .14s ease; }
.cy-defer-reason:hover { border-color: var(--ml-ink-4); }
.cy-defer-reason.on { border-color: var(--ml-ink); box-shadow: inset 0 0 0 1px var(--ml-ink); color: var(--ml-ink); }
.cy-radio { width: 19px; height: 19px; border-radius: 999px; border: 2px solid var(--ml-line-2); flex: none; position: relative; transition: border-color .14s; }
.cy-radio.on { border-color: var(--ml-ink); }
.cy-radio.on:after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ml-ink); }
.cy-defer-tip { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--ml-r-md); background: var(--ml-paper-2); font-size: 13px; line-height: 1.5; color: var(--ml-ink-2); }
.cy-defer-tip .ic { width: 17px; height: 17px; flex: none; color: var(--ml-red); margin-top: 1px; }
.cy-defer-tip strong { color: var(--ml-ink); font-weight: 600; }

/* =========================================================================
   SEYİR DEFTERİ
   ========================================================================= */
.cy-gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cy-gear { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 8px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line); background: var(--ml-card); color: var(--ml-ink-2); font-size: 12px; font-weight: 600; text-align: center; transition: all .14s ease; }
.cy-gear:hover { border-color: var(--ml-ink-4); }
.cy-gear.on { background: var(--ml-ink); color: #fff; border-color: var(--ml-ink); }
.cy-gear .ic { width: 18px; height: 18px; }
.cy-gear.on .ic { color: #fff; }

.cy-qual { display: flex; flex-direction: column; gap: 8px; }
.cy-qual-opt { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--ml-r-md); border: 1px solid var(--ml-line); background: var(--ml-card); font-size: 13px; font-weight: 500; color: var(--ml-ink-2); transition: all .14s ease; }
.cy-qual-opt:hover { border-color: var(--ml-ink-4); }
.cy-qual-opt i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.cy-qual-opt.on { border-color: var(--qc); box-shadow: inset 0 0 0 1px var(--qc); background: color-mix(in srgb, var(--qc) 7%, var(--ml-card)); }

.cy-typechip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ml-line); background: var(--ml-card); font-size: 13px; font-weight: 600; color: var(--ml-ink-2); transition: all .14s ease; }
.cy-typechip:hover { border-color: var(--tc, var(--ml-ink-4)); }
.cy-typechip i { width: 8px; height: 8px; border-radius: 999px; flex: none; }

.cy-log { display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px; background: var(--ml-card); border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-line-2); border-radius: var(--ml-r-md); box-shadow: var(--ml-shadow-1); transition: box-shadow .14s ease; }
.cy-log:hover { box-shadow: var(--ml-shadow-2); }
.cy-log-ic { width: 34px; height: 34px; border-radius: var(--ml-r-sm); display: grid; place-items: center; flex: none; }
.cy-log-ic .ic { width: 18px; height: 18px; }
.cy-log-count { font-family: var(--ml-font-mono); font-size: 12px; font-weight: 700; color: var(--ml-warn); background: var(--ml-warn-bg); padding: 1px 8px; border-radius: 999px; }
@media (max-width: 720px) { .cy-gear-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   NASIL KULLANILIR? rehberi
   ========================================================================= */
.cy-howto { display: none; }
.cy-howto-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.cy-howto-i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--ml-line-2); background: var(--ml-card); color: var(--ml-ink-4); transition: all .14s ease; }
.cy-howto-i:hover, .cy-howto-i.on { border-color: var(--ml-red); color: var(--ml-red); background: var(--ml-red-050); }
.cy-howto-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 420px; max-width: 86vw; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-lg); box-shadow: var(--ml-shadow-3); padding: 18px; text-align: left; }
.cy-howto-title { font-size: 13px; font-weight: 700; color: var(--ml-ink); }
.cy-howto-when { font-size: 11px; font-weight: 600; color: var(--ml-ink-3); background: var(--ml-paper-2); border: 1px solid var(--ml-line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cy-howto-sum { font-size: 13px; line-height: 1.55; color: var(--ml-ink-2); margin: 0 0 14px; }
.cy-howto-sum strong { color: var(--ml-ink); font-weight: 600; }
.cy-howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cy-howto-steps li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ml-ink-2); }
.cy-howto-steps li .n { flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--ml-ink); color: #fff; display: grid; place-items: center; font-family: var(--ml-font-mono); font-size: 10.5px; font-weight: 600; margin-top: 1px; }
.cy-howto-steps li strong { color: var(--ml-ink); font-weight: 600; }

/* =========================================================================
   PORTFÖY
   ========================================================================= */
.cy-filterbar { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--ml-paper-2); border-radius: var(--ml-r-lg); }
.cy-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cy-fglabel { font-size: 11px; letter-spacing: var(--ml-tracking-caps); text-transform: uppercase; color: var(--ml-ink-4); font-weight: 600; width: 54px; flex: none; }
.cy-fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ml-line); background: var(--ml-card); font-size: 12.5px; font-weight: 500; color: var(--ml-ink-2);
  transition: all .14s ease;
}
.cy-fchip:hover { border-color: var(--ml-ink-4); }
.cy-fchip.on { background: var(--ml-ink); color: #fff; border-color: var(--ml-ink); }

.cy-sec-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; flex-wrap: wrap; }
.cy-sec-head .cy-muted { flex: 1; min-width: 200px; }
.cy-plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)); gap: 14px; }
.cy-plat {
  background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-lg);
  padding: 18px; box-shadow: var(--ml-shadow-1); transition: box-shadow .14s ease, transform .14s ease;
}
.cy-plat:hover { box-shadow: var(--ml-shadow-2); transform: translateY(-1px); }
.cy-plat-name { font-size: 14.5px; font-weight: 600; color: var(--ml-ink); text-decoration: none; }
.cy-plat-name:hover { color: var(--ml-red); }
.cy-focus-set { display: flex; gap: 4px; }
.cy-focus-opt {
  flex: 1; padding: 6px 4px; border-radius: var(--ml-r-sm); border: 1px solid var(--ml-line);
  background: var(--ml-card); font-size: 11.5px; font-weight: 600; color: var(--ml-ink-4); transition: all .12s ease;
}
.cy-focus-opt:hover { border-color: var(--ml-ink-4); color: var(--ml-ink-2); }
.cy-focus-opt.on { color: #fff; }
.cy-focus-opt.on.green { background: var(--ml-success); border-color: var(--ml-success); }
.cy-focus-opt.on.info { background: var(--ml-info); border-color: var(--ml-info); }
.cy-focus-opt.on.warn { background: var(--ml-warn); border-color: var(--ml-warn); }
.cy-focus-opt.on { background: var(--ml-ink); border-color: var(--ml-ink); }

/* =========================================================================
   CRUD (menü, satır aksiyonları, arşiv)
   ========================================================================= */
.cy-iconbtn-sm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ml-r-sm); border: 1px solid transparent; background: transparent; color: var(--ml-ink-4); transition: background .14s, color .14s; flex: none; }
.cy-iconbtn-sm:hover { background: var(--ml-paper-2); color: var(--ml-ink); }
.cy-iconbtn-sm .ic { width: 16px; height: 16px; }
.cy-menu-wrap { position: relative; }
.cy-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 168px;
  background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r-md);
  box-shadow: var(--ml-shadow-3); padding: 5px; animation: cy-pop .15s ease;
}
.cy-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: transparent; border-radius: var(--ml-r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--ml-ink-2); transition: background .12s, color .12s;
}
.cy-menu-item:hover { background: var(--ml-paper-2); color: var(--ml-ink); }
.cy-menu-item.danger { color: var(--ml-red); }
.cy-menu-item.danger:hover { background: var(--ml-red-050); }
.cy-menu-item .ic { width: 16px; height: 16px; flex: none; }
.cy-menu-sep { height: 1px; background: var(--ml-line); margin: 4px 0; }

.cy-archivebar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--ml-line-2); }
.cy-empty { padding: 28px; text-align: center; color: var(--ml-ink-4); font-size: 13.5px; border: 1px dashed var(--ml-line-2); border-radius: var(--ml-r-md); }
.cy-seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cy-addbtn-dashed {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px; border: 1px dashed var(--ml-line-2); border-radius: var(--ml-r-md);
  background: transparent; color: var(--ml-ink-3); font-size: 13.5px; font-weight: 600; transition: all .14s ease;
}
.cy-addbtn-dashed:hover { border-color: var(--ml-ink-4); color: var(--ml-ink); background: var(--ml-paper-2); }
.cy-addbtn-dashed .ic { width: 16px; height: 16px; }

/* =========================================================================
   MOBILE FRAME (device preview)
   ========================================================================= */
.cy-device-wrap { display: grid; place-items: center; padding: 40px 20px 80px; background: var(--ml-paper-2); min-height: 100vh; }
.cy-phone {
  width: 390px; height: 844px; background: #000; border-radius: 54px; padding: 12px;
  box-shadow: var(--ml-shadow-3), 0 0 0 2px #2a2a2c; position: relative;
}
.cy-phone-screen { width: 100%; height: 100%; background: var(--ml-paper); border-radius: 42px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.cy-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 122px; height: 32px; background: #000; border-radius: 999px; z-index: 50; }
.cy-m-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 6px; font-size: 13px; font-weight: 600; }
.cy-m-head { padding: 8px 20px 12px; }
.cy-m-body { flex: 1; overflow-y: auto; padding: 4px 18px 20px; }
.cy-m-tabbar { display: flex; justify-content: space-around; padding: 9px 8px 26px; border-top: 1px solid var(--ml-line); background: rgba(250,250,247,0.9); backdrop-filter: blur(10px); }
.cy-m-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: var(--ml-ink-4); font-size: 10px; font-weight: 500; padding: 4px 8px; }
.cy-m-tab .ic { width: 22px; height: 22px; }
.cy-m-tab.on { color: var(--ml-red); }

/* device switcher */
.cy-viewtoggle { display: flex; gap: 2px; background: var(--ml-paper-2); border-radius: var(--ml-r-md); padding: 3px; }
.cy-viewtoggle button { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ml-ink-3); display: flex; align-items: center; gap: 6px; }
.cy-viewtoggle button.on { background: var(--ml-card); color: var(--ml-ink); box-shadow: var(--ml-shadow-1); }
.cy-viewtoggle button .ic { width: 15px; height: 15px; }

/* misc */
.cy-divider { height: 1px; background: var(--ml-line); border: 0; margin: 0; }
.cy-tag-mini { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ml-paper-2); color: var(--ml-ink-3); }
.cy-kbd { font-family: var(--ml-font-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--ml-paper-2); border: 1px solid var(--ml-line); color: var(--ml-ink-3); }
.cy-fade-in { animation: cy-fadein .45s cubic-bezier(.2,.6,.2,1); }
@keyframes cy-fadein { from { transform: translateY(10px); } to { transform: none; } }

/* toplu uzaklaştırma animasyonu (genişleyen halkalar) */
.cy-pushover-anim { position: relative; width: 96px; height: 96px; }
.cy-pushover-anim:before, .cy-pushover-anim:after,
.cy-pushover-anim > i {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 999px; border: 2px solid var(--ml-red);
  animation: cy-push 2.2s cubic-bezier(.2,.6,.2,1) infinite;
}
.cy-pushover-anim:after { animation-delay: .7s; }
.cy-pushover-anim:before { animation-delay: 1.4s; }
.cy-pushover-anim > i { animation: none; background: var(--ml-red); border: 0; width: 12px; height: 12px; box-shadow: 0 0 16px rgba(255,41,57,.6); }
@keyframes cy-push { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4.4); opacity: 0; } }

/* responsive: collapse sidebar on smaller screens */
@media (max-width: 1080px) {
  .cy-app { grid-template-columns: 72px 1fr; }
  .cy-side { padding: 18px 10px; }
  .cy-brand .cy-brand-sub, .cy-nav-item span.lbl, .cy-nav-group-label, .cy-user-meta { display: none; }
  .cy-nav-item { justify-content: center; padding: 11px; }
  .cy-brand { justify-content: center; padding: 4px 0 18px; }
  .cy-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cy-canvas { padding: 20px 16px 80px; }
  .cy-topbar { padding: 14px 16px; }
  .cy-board { grid-template-columns: 1fr; }
}