/* ToDoList — tek sütun mobil uygulama kabuğu: üstte gün şeridi, ortada zaman çizelgesi, altta sabit sekme çubuğu */
:root {
  --bg: #EDF0F5;
  --surface: #FFFFFF;
  --surface-2: #F5F7FA;
  --ink: #131A25;
  --muted: #5B6676;
  --line: #DCE1E9;
  --accent: #2F57E0;
  --accent-soft: #E3E9FD;
  --on-accent: #FFFFFF;
  --danger: #D2433B;
  --warn: #C98A06;
  --ok: #10956F;
  --shadow: 0 1px 2px rgba(19, 26, 37, .06), 0 6px 18px rgba(19, 26, 37, .06);
  --scrim: rgba(10, 14, 22, .45);

  --c-uyku: #6A5FD6;
  --c-is: #2C6BD6;
  --c-gelisim: #10956F;
  --c-medya: #D13F87;
  --c-spor: #DD7417;
  --c-yasam: #B58F0A;
  --c-genel: #64748B;

  --f-title: "Fraunces", "Iowan Old Style", Georgia, serif;
  --on-cat: #FFFFFF;
  --bar-full: #0A9F45;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --nav-h: 64px;
  --s1: #8E1B1B; --s2: #D93A30; --s3: #E2740C; --s4: #B89200; --s5: #4FA845; --s6: #12703D;
  --cd-s: 78%; --cd-l: 40%;
  --cs: light;
  --we: #A3191B;
  --ic-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  --ic-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D121A; --surface: #161D28; --surface-2: #1D2633; --ink: #E7ECF3; --muted: #93A0B3;
    --line: #283242; --accent: #7390FF; --accent-soft: #1F2A4A; --on-accent: #0D121A;
    --danger: #FF6B61; --warn: #F0B232; --ok: #3CCB9C;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.25); --scrim: rgba(0,0,0,.6);
    --c-uyku: #9189FF; --c-is: #5E95FF; --c-gelisim: #3CCB9C; --c-medya: #FF6FB0; --c-spor: #FF9C47; --c-yasam: #E8C23A; --c-genel: #94A3B8;
    --s1: #D24545; --s2: #FF6B5E; --s3: #FF9D3D; --s4: #F2CE3A; --s5: #8FD872; --s6: #2FB866; --cd-s: 80%; --cd-l: 60%; --on-cat: #0D121A; --bar-full: #22D46A; --cs: dark; --we: #FF6F6F; --ic-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); --ic-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D121A; --surface: #161D28; --surface-2: #1D2633; --ink: #E7ECF3; --muted: #93A0B3;
  --line: #283242; --accent: #7390FF; --accent-soft: #1F2A4A; --on-accent: #0D121A;
  --danger: #FF6B61; --warn: #F0B232; --ok: #3CCB9C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.25); --scrim: rgba(0,0,0,.6);
  --c-uyku: #9189FF; --c-is: #5E95FF; --c-gelisim: #3CCB9C; --c-medya: #FF6FB0; --c-spor: #FF9C47; --c-yasam: #E8C23A; --c-genel: #94A3B8;
  --s1: #D24545; --s2: #FF6B5E; --s3: #FF9D3D; --s4: #F2CE3A; --s5: #8FD872; --s6: #2FB866; --cd-s: 80%; --cd-l: 60%; --on-cat: #0D121A; --bar-full: #22D46A; --cs: dark; --we: #FF6F6F; --ic-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); --ic-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--bg);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.app {
  max-width: 600px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 8px calc(var(--nav-h) + 96px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Üst başlık ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--bg);
  padding-block: 12px 10px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.topbar .eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.topbar h1 { font: 600 28px/1.1 var(--f-title); font-variation-settings: "SOFT" 100, "opsz" 72; margin: 2px 0 0; letter-spacing: -.01em; text-wrap: balance; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; flex: none;
}
.icon-btn svg { width: 20px; height: 20px; }
.ring { position: relative; width: 52px; height: 52px; flex: none; }
.ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.ring .track { stroke: var(--line); }
.ring .bar { stroke: var(--accent); transition: stroke-dashoffset .5s ease; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--f-mono); }

/* ---------- Gün şeridi ---------- */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-block: 4px 14px; }
.day-chip {
  position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 8px 0 7px; display: grid; justify-items: center; gap: 2px; min-width: 0;
  transition: transform .4s cubic-bezier(.34, 1.4, .5, 1), background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.day-chip .dn { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.day-chip .dd { font: 700 17px/1 var(--f-display); }
.day-chip .dp { width: 70%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 4px; }
.day-chip .dp i { display: block; height: 100%; border-radius: 4px; background: hsl(var(--h, 0) var(--cd-s) var(--cd-l)); transition: width .4s ease, background-color .4s ease; }
.day-chip .dp i.full { background: var(--bar-full); box-shadow: 0 0 6px color-mix(in srgb, var(--bar-full) 60%, transparent); }
.day-chip.today .dd { color: var(--accent); }
.days { padding-block: 6px 4px; }
.day-chip.sel {
  z-index: 1; background: var(--sel, var(--accent)); border-color: transparent;
  transform: translateY(-3px) scale(1.12);
  box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--sel, var(--accent)) 60%, transparent),
              0 3px 8px color-mix(in srgb, var(--sel, var(--accent)) 25%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}
.day-chip.sel .dn, .day-chip.sel .dd { color: var(--on-cat); }
.day-chip.sel .dn { opacity: .85; }
.day-chip.sel .dp { background: color-mix(in srgb, var(--on-cat) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-cat) 35%, transparent); }

/* ---------- Şu an kartı ---------- */
.now-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 13px 15px; margin-bottom: 14px; display: grid; gap: 7px;
  border: 0;
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--cat), 0 4px 14px color-mix(in srgb, var(--cat) 12%, transparent); }
  50% { box-shadow: 0 0 0 3.5px var(--cat), 0 8px 28px color-mix(in srgb, var(--cat) 38%, transparent); }
}
.now-card .lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cat, var(--accent)); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.now-card h2 { margin: 0; font: 700 19px/1.2 var(--f-display); letter-spacing: -.01em; }
.now-card .meta { display: flex; justify-content: space-between; color: var(--muted); font: 500 13px var(--f-mono); }
.progress {
  height: 12px; border-radius: 999px; overflow: hidden; padding: 1px;
  background: color-mix(in srgb, var(--ink) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, .22);
}
.progress i {
  display: block; height: 100%; min-width: 8px; border-radius: 999px;
  background-color: var(--cat, var(--accent));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 55%, rgba(0, 0, 0, .06));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
}
.now-card .next { font-size: 13px; color: var(--muted); }
.now-card .next b { color: var(--ink); font-weight: 600; }

/* ---------- Zaman çizelgesi ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.section-head h3 { margin: 0; font: 700 17px var(--f-display); }
.section-head .sub { color: var(--muted); font-size: 13px; }
.text-btn { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; padding: 6px 4px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.slot { display: grid; grid-template-columns: 58px 22px minmax(0, 1fr); align-items: stretch; }
.slot .time { font: 500 13px/1.2 var(--f-mono); color: var(--muted); padding-top: 15px; text-align: right; padding-right: 2px; font-variant-numeric: tabular-nums; }
.slot .time small { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }
.slot .time sup { font-size: 9px; color: var(--accent); margin-left: 1px; }
.slot .rail { position: relative; }
.slot .rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); }
.slot:first-child .rail::before { top: 20px; }
.slot:last-child .rail::before { bottom: calc(100% - 20px); }
.slot .rail i { position: absolute; left: 50%; top: 16px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--surface); border: 3px solid var(--cat); }
.slot.done .rail i { background: var(--cat); }
.slot.current .rail i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 25%, transparent); }

.item {
  margin: 4px 0 6px; padding: 12px 12px 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  transition: transform .12s ease, opacity .2s ease;
}
.item:active { transform: scale(.985); }
.slot.current .item { border-color: var(--cat); box-shadow: var(--shadow); }
.item .t { font-weight: 650; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.slot.done .item .t, .task.done .t { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.slot.done .item { opacity: .72; }
.item .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; grid-column: 1; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.35; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; color: var(--cat, var(--muted));
  background: color-mix(in srgb, var(--cat, var(--muted)) 13%, transparent);
}
.tag.plain { --cat: var(--muted); }
.tag button { border: 0; background: none; padding: 0; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.check {
  grid-row: 1 / span 2; grid-column: 2; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent; display: grid; place-items: center; padding: 0;
}
.check svg { width: 16px; height: 16px; opacity: 0; color: var(--on-accent); }
.done .check, .task.done .check { background: var(--ok); border-color: var(--ok); }
.done .check svg, .task.done .check svg { opacity: 1; }

/* ---------- Görevler ---------- */
.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 14px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; border: 1px solid var(--line); background: var(--surface); padding: 7px 14px;
  border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted);
}
.seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg button .n { font: 500 12px var(--f-mono); margin-left: 4px; opacity: .7; }

.task-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.task {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
}
.task .check { grid-row: 1 / span 3; grid-column: 1; margin-top: 1px; }
.task .t { font-weight: 650; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.task .d { grid-column: 2; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.task .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.task .more { grid-column: 3; grid-row: 1; border: 0; background: none; color: var(--muted); padding: 2px 4px; border-radius: 8px; }
.task .more svg { width: 18px; height: 18px; }
.prio { --cat: var(--c-genel); }
.prio.acil { --cat: var(--danger); }
.prio.normal { --cat: var(--accent); }
.prio.dusuk { --cat: var(--c-genel); }
.overdue { --cat: var(--danger); }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); display: grid; gap: 6px; justify-items: center; }
.empty strong { color: var(--ink); font: 700 17px var(--f-display); }

/* ---------- Kartlar / ayarlar ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 14px; overflow: hidden; }
.panel > h3 { margin: 0; padding: 14px 16px 4px; font: 700 16px var(--f-display); }
.panel > p.hint { margin: 0; padding: 0 16px 8px; color: var(--muted); font-size: 13px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.panel > h3 + .row, .panel > p.hint + .row { border-top: 0; }
.row .k { display: grid; gap: 2px; min-width: 0; }
.row .k b { font-weight: 600; }
.row .k small { color: var(--muted); font-size: 13px; }
.row.col { flex-direction: column; align-items: stretch; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700; font-size: 15px;
  background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 140px; }
.status-pill { font: 600 12px var(--f-mono); padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.status-pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.status-pill.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px;
  padding: 11px 12px; font-size: 16px; min-width: 0;
}
textarea.input { resize: vertical; min-height: 84px; }
textarea.mono { font: 14px/1.5 var(--f-mono); min-height: 200px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-num { width: 76px; text-align: center; padding: 8px; font-family: var(--f-mono); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.swatches span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.swatches span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.swatches input:checked + span { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, transparent); color: var(--ink); }
.swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Listeler ---------- */
.list-items { list-style: none; margin: 0; padding: 0; }
.list-items li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.list-items li:first-child { border-top: 0; }
.list-items .no { font: 500 12px var(--f-mono); color: var(--muted); text-align: right; }
.list-items .nm { overflow-wrap: anywhere; }
.list-items .nm small { display: block; color: var(--muted); font-size: 12px; }
.list-items li.rated .nm { color: var(--muted); }
.score { width: 64px; text-align: center; font: 500 14px var(--f-mono); padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.del { border: 0; background: none; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; padding: 0; }
.del svg { width: 16px; height: 16px; }
.add-line { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.add-line .input { flex: 1; }
.feature { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.feature .k small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.feature .k b { display: block; font: 700 19px var(--f-display); }

/* ---------- Alt gezinme ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.nav-inner {
  pointer-events: auto; position: relative; max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); height: var(--nav-h); padding: 6px;
  border-radius: 24px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 32px -8px rgba(10, 14, 22, .28), 0 2px 6px rgba(10, 14, 22, .08);
}
.nav-pill {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4);
  border-radius: 18px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .5s cubic-bezier(.34, 1.3, .5, 1);
}
.nav button {
  position: relative; z-index: 1; border: 0; background: none; border-radius: 18px;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  color: var(--muted); font-size: 11.5px; font-weight: 600; transition: color .3s ease;
}
.nav button:active .ni { transform: scale(.88); }
.nav .ni { position: relative; display: grid; transition: transform .4s cubic-bezier(.34, 1.4, .5, 1); }
.nav .ni svg { width: 23px; height: 23px; }
.nav .nl { transition: letter-spacing .3s ease; }
.nav button.on { color: var(--accent); font-weight: 700; }
.nav button.on .ni { transform: translateY(-1px) scale(1.1); }
.nav .badge { position: absolute; top: -6px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font: 600 10px/17px var(--f-mono); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.nav .dot { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); animation: pulse 2s infinite; color: var(--ok); }

.fab {
  position: fixed; z-index: 24;
  right: max(18px, calc((100vw - 600px) / 2 + 18px), calc(env(safe-area-inset-right, 0px) + 18px));
  bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 18px; border: 0;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  display: grid; place-items: center;
}
.fab svg { width: 26px; height: 26px; }

/* ---------- Alt sayfa (sheet) ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity .2s; }
.scrim.open { opacity: 1; }
.sheet {
  bottom: var(--kb, 0px) !important;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 600px; margin: 0 auto; max-height: calc(var(--vvh, 100dvh) * .92);
  background: var(--surface); border-radius: 24px 24px 0 0;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto; transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.open { transform: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 5px; background: var(--line); margin: 4px auto 12px; }
.sheet h2 { margin: 0 0 14px; font: 700 22px var(--f-display); }
.sheet form { display: grid; gap: 14px; }
.sheet .actions { display: flex; gap: 8px; margin-top: 4px; }
.sheet .actions .btn { flex: 1; }
.sheet .preview { font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; max-height: 180px; overflow-y: auto; }
.sheet .preview b { color: var(--ink); }
.confirm-box { display: grid; gap: 10px; }

/* ---------- Bildirim izni şeridi ---------- */
.banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--accent-soft); margin-bottom: 14px;
}
.banner svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.banner .k { flex: 1; min-width: 0; font-size: 14px; }
.banner .k b { display: block; }
.banner .btn { padding: 8px 12px; font-size: 14px; }

.toast {
  position: fixed; left: 50%; z-index: 60; transform: translate(-50%, 20px); opacity: 0;
  bottom: calc(var(--nav-h) + 90px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
  transition: all .25s; pointer-events: none; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 380px) {
  .slot { grid-template-columns: 50px 18px minmax(0, 1fr); }
  .day-chip .dd { font-size: 15px; }
  .topbar h1 { font-size: 24px; }
}
.tag:has(button) { display: inline-block; line-height: 1.5; }

/* Geri sayım: renk kalan süreye göre yeşilden kırmızıya akar */
.now-card .cd { color: hsl(var(--h, 140) var(--cd-s) var(--cd-l)); font-weight: 600; transition: color 1s linear; }
.now-card .cd-bar { background-color: hsl(var(--h, 140) var(--cd-s) var(--cd-l)); transition: width 1s linear, background-color 1s linear; }

/* Puan renkleri */
.list-items li .score.b1 { --sc: var(--s1); }
.list-items li .score.b2 { --sc: var(--s2); }
.list-items li .score.b3 { --sc: var(--s3); }
.list-items li .score.b4 { --sc: var(--s4); }
.list-items li .score.b5 { --sc: var(--s5); }
.list-items li .score.b6 { --sc: var(--s6); }
.list-items li .score[class*=" b"] { color: var(--sc); border-color: var(--sc); background: color-mix(in srgb, var(--sc) 13%, transparent); font-weight: 600; }
.list-items.noscore li { grid-template-columns: 28px minmax(0, 1fr) auto; }

/* Tarih/saat alanları: dokununca metin seçilmesin */
input[type="date"], input[type="time"] {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
input[type="date"]::selection, input[type="time"]::selection { background: transparent; }
input::-webkit-datetime-edit { -webkit-user-select: none; user-select: none; }
input::-webkit-datetime-edit-day-field:focus { background: transparent; color: inherit; }
input::-webkit-datetime-edit-month-field:focus { background: transparent; color: inherit; }
input::-webkit-datetime-edit-year-field:focus { background: transparent; color: inherit; }
input::-webkit-datetime-edit-hour-field:focus { background: transparent; color: inherit; }
input::-webkit-datetime-edit-minute-field:focus { background: transparent; color: inherit; }
input::-webkit-datetime-edit-ampm-field:focus { background: transparent; color: inherit; }

/* ---------- Araçlar ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-card {
  position: relative; overflow: hidden; isolation: isolate;
  text-align: left; border-radius: var(--r-lg); padding: 16px; display: grid; align-content: start; gap: 4px; min-height: 148px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 11%, var(--surface)) 0%, var(--surface) 62%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 2px 4px rgba(19, 26, 37, .04), 0 12px 26px -12px color-mix(in srgb, var(--tc) 45%, transparent);
  transition: transform .25s cubic-bezier(.34, 1.4, .5, 1), box-shadow .25s ease;
}
.tool-card::before {
  content: ""; position: absolute; z-index: -1; width: 130px; height: 130px; right: -46px; top: -56px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 26%, transparent), transparent 70%);
}
.tool-card:active { transform: scale(.97); }
.tool-ic {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--on-cat); font: 600 22px var(--f-body);
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 78%, #fff), var(--tc) 55%, color-mix(in srgb, var(--tc) 80%, #000));
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--tc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.tool-ic svg { width: 24px; height: 24px; }
.tool-go {
  position: absolute; top: 16px; right: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--surface));
}
.tool-go svg { width: 16px; height: 16px; }
.tool-nm { font: 700 17px var(--f-display); }
.tool-sub { font-size: 13px; color: var(--muted); }
.tool-live { font-family: var(--f-mono); color: var(--ok); font-weight: 600; }
.tool-card.soon { --tc: var(--muted); box-shadow: none; border-style: dashed; background: transparent; opacity: .7; }
.tool-card.soon::before { display: none; }
.tool-card.soon .tool-ic { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); box-shadow: none; }

.timer-wrap { display: grid; justify-items: center; gap: 18px; padding-top: 6px; }
.timer-dial { position: relative; width: min(280px, 78vw); aspect-ratio: 1; max-width: 100%; }
.timer-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.t-track { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, var(--surface-2)); stroke-width: 14; }
.t-bar { fill: none; stroke: hsl(var(--h, 140) var(--cd-s) var(--cd-l)); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke 1s linear; }
.timer-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.timer-read b { font: 600 46px/1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.timer-read span { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.timer-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.timer-inputs .input { text-align: center; font: 600 20px var(--f-mono); }
.presets { width: 100%; margin: 0; }
.timer-actions { display: flex; gap: 10px; width: 100%; }
.timer-actions .btn { flex: 1; padding-block: 14px; }
@media (prefers-reduced-motion: reduce) { .now-card { box-shadow: 0 0 0 2px var(--cat); } }

/* ---------- Sabit üst alan (Program) ---------- */
.pin {
  position: sticky; z-index: 15;
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 76px));
  background: var(--bg); padding-top: 6px; margin-inline: -4px; padding-inline: 4px;
}
.pin::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(var(--bg), transparent); opacity: 0; transition: opacity .2s;
}
.pin.stuck::after { opacity: 1; }
.pin .section-head { margin-bottom: 4px; padding-bottom: 6px; }
.add-mini {
  width: 36px; height: 36px; flex: none; border-radius: 12px; border: 0; padding: 0;
  display: grid; place-items: center; color: var(--on-accent); background: var(--accent);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s cubic-bezier(.34, 1.4, .5, 1);
}
.add-mini svg { width: 18px; height: 18px; }
.add-mini:active { transform: scale(.9) rotate(90deg); }

/* ---------- Klavye açıkken ---------- */
body.kb-open .nav, body.kb-open .fab { display: none !important; }
body.kb-open .app { padding-bottom: 50vh; }

/* Onay çemberi: görünüm aynı, dokunma alanı kartın tüm sağ şeridi */
.item { position: relative; }
.item .check { position: static; }
.item .check::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.reroll { margin-left: 2px; text-decoration: none !important; font-size: 13px; line-height: 1; }

/* Tarih/saat ikonları temaya göre renklenir */
.input { color-scheme: var(--cs); }
/* Tarih/saat alanı: kutunun tamamı dokunma alanı; simge arka planda, metin seçilemez */
input[type="date"].input, input[type="time"].input {
  position: relative; padding-right: 40px;
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
input[type="date"].input { background-image: var(--ic-date); }
input[type="time"].input { background-image: var(--ic-time); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; background: transparent; z-index: 1;
}
input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
input[type="date"]::-webkit-inner-spin-button, input[type="time"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { display: none; }

/* Form düğmeleri her zaman görünür */
.sheet .actions { position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding-block: 10px 6px; margin-bottom: -6px; }

.sheet { overscroll-behavior: contain; }
.scrim { touch-action: none; }
.discard p { margin: 0; font-size: 16px; font-weight: 600; }

/* Geri butonu: dikdörtgen, belirgin */
.back-btn {
  width: 58px; height: 40px; border-radius: 12px; border: 0; flex: none; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .2s ease;
}
.back-btn svg { width: 24px; height: 24px; stroke-width: 2.6; }
.back-btn:active { transform: scale(.94); }

/* Hatırlatıcılar */
.rem-list { display: grid; gap: 14px; margin-bottom: 14px; }
.rem-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 16px;
  border: 1px solid color-mix(in srgb, var(--rc) 22%, var(--line));
  background: linear-gradient(165deg, color-mix(in srgb, var(--rc) 10%, var(--surface)), var(--surface) 55%);
  box-shadow: 0 2px 4px rgba(19, 26, 37, .04), 0 14px 28px -16px color-mix(in srgb, var(--rc) 55%, transparent);
  display: grid; gap: 14px; transition: filter .3s ease, opacity .3s ease;
}
.rem-card::before {
  content: ""; position: absolute; z-index: -1; width: 160px; height: 160px; right: -60px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%);
}
.rem-card.off { filter: grayscale(.85); opacity: .7; }
.rem-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rem-ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--on-cat);
  background: linear-gradient(145deg, color-mix(in srgb, var(--rc) 78%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 80%, #000));
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.rem-ic svg { width: 23px; height: 23px; }
.rem-tt b { display: block; font: 700 17px var(--f-display); }
.rem-tt small { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rem-stats { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rem-next small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.rem-next b { font: 600 30px/1.05 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rem-next span { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.rem-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rem-chips span {
  display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--f-body); padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 20%, var(--line));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rem-chips i { font-style: normal; color: var(--rc); }
.rem-bar { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.rem-bar .win { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 55%, transparent), var(--rc)); }
.rem-bar b { position: absolute; top: 50%; width: 3px; height: 3px; margin-left: -1.5px; margin-top: -1.5px; border-radius: 50%; background: var(--on-cat); opacity: .85; }
.rem-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.rem-scale { display: flex; justify-content: space-between; margin-top: -8px; font: 500 10px var(--f-mono); color: var(--muted); }
.rem-edit { border-top: 1px dashed color-mix(in srgb, var(--rc) 30%, var(--line)); padding-top: 10px; }
.rem-edit summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--rc); display: flex; align-items: center; gap: 6px; }
.rem-edit summary::-webkit-details-marker { display: none; }
.rem-edit summary::before { content: "›"; display: inline-block; font-size: 18px; line-height: 1; transition: transform .2s; }
.rem-edit[open] summary::before { transform: rotate(90deg); }
.rem-edit .rem-fields { margin-top: 12px; }
.rem-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; }
.rem-fields .input { padding: 9px 10px; font-size: 15px; }
.rem-fields .field > span { font-size: 12px; }
.rem-fields .del { justify-self: end; margin-bottom: 6px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); }
.rem-add { padding-block: 14px; border-radius: 14px; }

/* Takvim */
.cal { padding: 14px 12px 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 10px; }
.cal-title b { font: 600 22px var(--f-title); font-variation-settings: "SOFT" 100; }
.cal-title span { color: var(--muted); font: 500 16px var(--f-mono); margin-left: 4px; }
.cal-nav { width: 40px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.cal-nav svg { width: 18px; height: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid.wk { margin-bottom: 4px; }
.cal-grid.wk span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-d {
  position: relative; aspect-ratio: 1 / 1.08; max-width: 100%; border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; padding: 4px 2px 5px; gap: 2px;
  transition: background-color .2s ease, transform .2s ease;
}
.cal-d .n { font: 600 15px var(--f-body); font-variant-numeric: tabular-nums; }
.cal-d.out { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal-d.today .n { color: var(--accent); font-weight: 800; }
.cal-d.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-d.sel { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-1px); }
.cal-d.sel .n { color: var(--on-accent); }
.cal-d .dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-d .dots i, .cal-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--cat); display: inline-block; }
.cal-d .dots i.dn { opacity: .35; }
.cal-d .dots b { font-size: 9px; line-height: 6px; color: var(--muted); }
.cal-d.sel .dots i { box-shadow: 0 0 0 1.5px var(--on-accent); }
.cal-d .cp { width: 60%; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cal-d .cp i { display: block; height: 100%; background: hsl(var(--h, 0) var(--cd-s) var(--cd-l)); }
.cal-d .cp i.full { background: var(--bar-full); }
.cal-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 0; border-top: 1px solid var(--line); margin-top: 8px; font-size: 12px; color: var(--muted); }
.cal-foot span { display: flex; align-items: center; gap: 5px; }
.cal-foot i { margin-left: 6px; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 46px 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.agenda li:first-child { border-top: 0; }
.agenda .at { font: 500 13px var(--f-mono); color: var(--muted); }
.agenda .ad { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.agenda .an { font-weight: 600; overflow-wrap: anywhere; }
.agenda .check { width: 26px; height: 26px; grid-row: auto; grid-column: auto; }
.agenda li.done .an { text-decoration: line-through; color: var(--muted); }
.agenda li.done .check { background: var(--ok); border-color: var(--ok); }
.agenda li.done .check svg { opacity: 1; }

/* Takvim: hafta sonu */
.cal-d.we .n { color: var(--we); }
.cal-d.we.out .n { color: color-mix(in srgb, var(--we) 40%, transparent); }
.cal-d.sel.we .n { color: var(--on-accent); }

/* Zaman çizelgesi grup başlıkları */
.tl-sep { padding: 10px 0 4px 80px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 380px) { .tl-sep { padding-left: 68px; } }