/* ============================================================
   AHTAPOT v3 — "Mürekkep & Kâğıt"
   Koyu: mürekkep-siyahı zemin, mor TEK vurgu. Açık: kâğıt + mürekkep.
   Zanaat: saç-teli ayraçlar (color-mix), katmanlı yumuşak gölgeler,
   ferah boşluk ritmi, editorial serif anlar. Sert kutu YOK.
   Display: Fraunces · Gövde: Hanken Grotesk (gömülü, offline).
   ============================================================ */

/* ---------- fontlar ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./fonts/fraunces-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/hanken-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/hanken-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokenlar ---------- */

:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 11px;
  --r-md: 16px;
  --r-lg: 22px;
  --pad: 18px;
  --speed: 200ms;
  /* Premium hareket eğrileri: basışta minik yaylanma, çıkışta yumuşak frenleme.
     Kaliteli his bu eğrilerden gelir — ne sert ne sünger. */
  --speed-fast: 130ms;
  --speed-slow: 360ms;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

:root[data-theme='dark'] {
  --bg: #0b0a12;
  --bg2: #14121e;
  --bg3: #1c1929;
  --text: #edeaf7;
  --mut: #9b94b8;
  --faint: #5f5879;
  --hair: rgba(237, 234, 247, 0.08);
  --hair-2: rgba(237, 234, 247, 0.14);
  --acc: #8c6ae6;
  --acc-deep: #6847c8;
  --acc-soft: rgba(140, 106, 230, 0.12);
  --acc-line: rgba(140, 106, 230, 0.32);
  --acc-ink: #140f26;
  --danger: #c97a6f;
  --scrim: rgba(5, 4, 10, 0.74);
  --grain-op: 0.04;
  --glow: radial-gradient(120% 70% at 50% -10%, rgba(122, 85, 232, 0.16), transparent 60%);
  /* Premium derinlik: 3 katman (yakın temas + orta + uzak yumuşak yayılma).
     Tek katman gölge ucuz durur; katmanlı gölge nesneyi yüzeyden kaldırır. */
  --shadow-soft: 0 1px 1px rgba(0, 0, 0, 0.20), 0 3px 6px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -8px rgba(0, 0, 0, 0.30);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.30), 0 8px 18px -4px rgba(0, 0, 0, 0.34), 0 18px 44px -8px rgba(0, 0, 0, 0.48);
  --ring: 0 0 0 1px rgba(237, 234, 247, 0.04) inset;
}

:root[data-theme='light'] {
  --bg: #f6f3eb;
  --bg2: #fffefa;
  --bg3: #efeadf;
  --text: #1c1726;
  --mut: #6e6783;
  --faint: #a59eba;
  --hair: rgba(28, 23, 38, 0.08);
  --hair-2: rgba(28, 23, 38, 0.15);
  --acc: #6b46d6;
  --acc-deep: #5736b6;
  --acc-soft: rgba(107, 70, 214, 0.1);
  --acc-line: rgba(107, 70, 214, 0.35);
  --acc-ink: #fffefa;
  --danger: #b25c50;
  --scrim: rgba(28, 23, 38, 0.52);
  --grain-op: 0.03;
  --glow: radial-gradient(120% 70% at 50% -10%, rgba(107, 70, 214, 0.07), transparent 60%);
  --shadow-soft: 0 1px 1px rgba(26, 23, 30, 0.04), 0 2px 6px -1px rgba(26, 23, 30, 0.06), 0 10px 22px -8px rgba(26, 23, 30, 0.09);
  --shadow-float: 0 2px 8px rgba(26, 23, 30, 0.08), 0 10px 24px -4px rgba(26, 23, 30, 0.10), 0 20px 44px -8px rgba(26, 23, 30, 0.14);
  --ring: 0 0 0 1px rgba(28, 23, 38, 0.03) inset;
}

/* ---------- temel ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  letter-spacing: -0.005em;     /* premium gövde: harfler hafif sıkı, daha okunur */
  /* Yerli uygulama hissi: basılı tutunca metin seçimi/kopyala balonu çıkmaz.
     Yazı alanları (input/textarea) aşağıda istisna — oralarda seçim serbest. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--glow);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-op);
  pointer-events: none;
  z-index: 99;
}

::selection { background: var(--acc); color: var(--acc-ink); }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}
input, textarea, select { font: inherit; color: inherit; }

svg { display: block; width: 100%; height: 100%; }

.noscript { padding: 40px 24px; text-align: center; color: var(--mut); font-size: 15px; }

/* ---------- kabuk ---------- */

.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100dvh;
  max-width: 560px; margin: 0 auto;
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) var(--pad) 10px;
}
.top-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wordmark {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-weight: 650; font-size: 21px;
  letter-spacing: 0.01em;
}
.wm-mark { width: 24px; height: 24px; color: var(--acc); }
.top-date { font-size: 13px; color: var(--faint); letter-spacing: 0.02em; }

.main {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 4px var(--pad) 28px;
  scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent;
}
/* Giriş animasyonu TEK SEFERLİK: yalnız sekme değişiminde (.view-enter).
   Her dokunuşta tüm ekranın yeniden oynaması ucuz his verir — verilmez. */
.view-enter > * { animation: rise 300ms var(--ease) both; }
.view-enter > *:nth-child(2) { animation-delay: 35ms; }
.view-enter > *:nth-child(3) { animation-delay: 70ms; }
.view-enter > *:nth-child(4) { animation-delay: 105ms; }
.view-enter > *:nth-child(n + 5) { animation-delay: 140ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

/* Overlay girişleri de TEK SEFERLİK (ui bayrakları ekler, render tüketir).
   Açıkken her render'da animasyonun baştan oynaması titretir; kısılmış
   cihazlarda yarıda donup ekranı yarı saydam bırakır. Zeminler daima OPAK —
   okunabilirlik blur'a/animasyona emanet edilmez. */
.ov-enter { animation: fade 220ms both; }
.sheet-enter { animation: sheetup 280ms var(--ease) both; }

/* ---------- sekme çubuğu ---------- */

.tabbar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 9px; color: var(--faint);
  position: relative; min-height: 56px;
  transition: color var(--speed), transform 120ms;
}
.tab:active { transform: scale(0.94); }
.tab-ic { width: 22px; height: 22px; transition: transform var(--speed) var(--ease-spring); }
.tab-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.tab.is-on { color: var(--text); }
.tab.is-on .tab-ic { transform: translateY(-2px) scale(1.06); color: var(--acc); }
.tab.is-on .tab-label { font-weight: 750; }
.tab.is-on::after {
  content: ''; position: absolute; bottom: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--acc);
}

/* ---------- ortak parçalar ---------- */

.ibtn {
  width: 40px; height: 40px; min-width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--mut);
  transition: background var(--speed), color var(--speed), transform 120ms;
}
.ibtn svg { width: 19px; height: 19px; }
.ibtn:active { transform: scale(0.92); background: var(--bg3); }
.ibtn[disabled] { opacity: 0.3; pointer-events: none; }
.ibtn-lg { color: var(--mut); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: 14px; font-weight: 650; font-size: 16px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-soft);
  transition: transform 120ms, background var(--speed), border-color var(--speed);
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--acc);
  border-color: var(--acc); color: var(--acc-ink);
  box-shadow: var(--shadow-soft);
}
.btn-ghost { background: transparent; box-shadow: none; }
.btn-small { min-height: 38px; padding: 0 13px; font-size: 14px; border-radius: 11px; }
.btn-small svg { width: 15px; height: 15px; }
.btn-wide { width: 100%; }
.btn-suz { margin: 2px 0 18px; min-height: 54px; font-size: 16px; }
.btn-drop { color: var(--mut); }
/* v4.2: "en son sürüme güncelle" — belirgin, büyük ama uyumlu birincil aksiyon */
.btn-update { min-height: 58px; font-size: 17px; margin-top: 2px; letter-spacing: 0.01em; }

.card {
  background: var(--bg2);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title { font-family: var(--serif); font-weight: 650; font-size: 17px; }
.card-sub { color: var(--mut); font-size: 14px; margin: 6px 0 12px; }
.card-nudge, .card-calm { text-align: center; padding: 30px 22px; position: relative; overflow: hidden; }
.wm {
  position: absolute; right: 18px; bottom: 16px;
  width: 54px; height: 54px; color: var(--text);
  opacity: 0.04; pointer-events: none;
}
.nudge-big {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  margin: 0 0 4px; line-height: 1.25;
}
.card-nudge .btn { margin-top: 14px; }
.card-calm { background: transparent; box-shadow: none; }
.card-dump { padding-bottom: 8px; }

.pts {
  font-size: 12px; font-weight: 700; color: var(--acc);
  letter-spacing: 0.02em; white-space: nowrap;
}
.gpill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 2.5px 9px; white-space: nowrap;
}
.gp-hayati { background: var(--acc); color: var(--acc-ink); }
.gp-ilerletir { background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); }
.gp-gerekli { background: var(--bg3); color: var(--mut); border: 1px solid var(--hair); }

.age { font-size: 12px; color: var(--faint); white-space: nowrap; }
.today-dot { font-size: 12px; font-weight: 700; color: var(--acc); white-space: nowrap; }

.quiet-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 44px; color: var(--faint);
  font-size: 14px; font-weight: 600;
}
.quiet-link svg { width: 14px; height: 14px; }
.empty-line { color: var(--faint); font-size: 14px; padding: 2px 6px 12px; margin: 0; }
.empty-sorted { text-align: center; margin-top: 8px; }
.life-line { color: var(--faint); font-size: 14px; text-align: center; margin: 4px 0 12px; }
.life-line b { color: var(--mut); }

/* ---------- BUGÜNÜ KAZAN: sakin gün şeridi (v3.9) ---------- */
/* Kocaman ◆ puan kartı kaldırıldı. ◆ soyutlaması ekranı ele geçirmesin diye
   günün ölçüsü ince, tek bakışta okunur bir şeride indi; asıl hero (yapılacak
   tek iş) öne çıkar. Oyun/zincir/aktarım hepsi durur — yalnız sakin. */
.win-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.daystrip { margin: 4px 2px 18px; }
.ds-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.ds-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.daystrip.is-won .ds-label { color: var(--acc); }
.ds-meta { display: inline-flex; align-items: center; gap: 8px; }
.ds-pts { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ds-chain {
  font-size: 11px; font-weight: 700; color: var(--acc);
  background: var(--acc-soft); border: 1px solid var(--acc-line);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.win-bar {
  height: 9px; border-radius: 999px; background: var(--bg3);
  overflow: hidden; border: 1px solid var(--hair);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}
.win-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: width var(--speed-slow) var(--ease-out);
}
.daystrip.is-won .win-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.ds-foot { margin-top: 9px; }
.ds-note { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.ds-note-on, .ds-note-acc { color: var(--acc); font-weight: 600; }

/* ---------- ŞİMDİ BUNU (hero) ---------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--acc-soft), var(--bg2) 60%);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--acc);
  border-radius: var(--r-lg); padding: 17px 18px 17px; margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
/* premium kart imzası artık asıl eyleme ait: üstten ince ışık çizgisi */
.hero::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-line), transparent);
  opacity: 0.6; pointer-events: none;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--acc);
}
.hero-title {
  font-family: var(--serif); font-weight: 600; font-size: 25px;
  line-height: 1.2; margin: 5px 0 10px; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.hero-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.hero-actions { display: flex; gap: 10px; }
.hero-actions .btn-primary { flex: 1.4; }
.hero-actions .btn-ghost { flex: 1; }

/* ---------- listeler (saç-teli ayraçlı yüzeyler) ---------- */

.list, .list-inset { margin-bottom: 14px; }
.list {
  background: var(--bg2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.list-quiet { background: transparent; border: 0; box-shadow: none; }
.list-inset { margin-bottom: 4px; }

.row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; min-height: 58px;
  border-bottom: 1px solid var(--hair);
  transition: background var(--speed);
}
.row:has(.row-main:active) { background: var(--acc-soft); }
.list > .row:last-child, .list-inset > .row:last-child { border-bottom: 0; }
.list-quiet .row { padding-left: 6px; padding-right: 6px; }
.row-plain { min-height: 50px; padding: 7px 2px 7px 6px; }

.row-check {
  width: 26px; height: 26px; min-width: 26px;
  border: 2px solid var(--faint); border-radius: 50%;
  position: relative; transition: border-color var(--speed), background var(--speed), transform 120ms;
}
.row-check::after { content: ''; position: absolute; inset: -10px; }
.row-check:active { transform: scale(0.85); border-color: var(--acc); background: var(--acc-soft); }
.row-check-sm { width: 22px; height: 22px; min-width: 22px; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 16px; font-weight: 550; overflow-wrap: anywhere; }
.row-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.row-acts { display: flex; align-items: center; gap: 1px; }
.row-acts .ibtn { width: 36px; height: 36px; min-width: 36px; }
.row-done .row-title { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--faint); }
.row-cloud .row-title { color: var(--mut); }
.row-suggest { min-height: 60px; }

.fold {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; padding: 0 6px;
  color: var(--mut); font-size: 14px; font-weight: 650;
  border-radius: var(--r-sm);
  transition: background var(--speed);
}
.fold:active, .sec-head:active { background: var(--acc-soft); }
.fold b { color: var(--text); font-weight: 700; }
.sec-chev { width: 17px; height: 17px; color: var(--faint); transition: transform var(--speed); }
.fold.is-open .sec-chev, .sec-head.is-open .sec-chev { transform: rotate(90deg); }

.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 52px; padding: 0 6px;
  font-family: var(--serif); font-size: 17px; font-weight: 650; color: var(--text);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 10px;
}
.sec-title { display: inline-flex; align-items: center; min-width: 0; }
.sec-count {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--mut); background: var(--bg3); border-radius: 999px;
  padding: 2px 9px; margin-left: 8px;
}

/* ---------- HAVUZ: dök ---------- */

.banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--acc-soft); border: 1px solid var(--acc-line);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px;
}
.banner-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.banner-main b { font-family: var(--serif); font-size: 16px; }
.banner-main span { font-size: 13px; color: var(--mut); }

.dok { display: flex; gap: 8px; margin-bottom: 14px; }
.dok-input {
  flex: 1; min-height: 52px; padding: 0 16px;
  background: var(--bg2); border: 1px solid var(--hair-2);
  border-radius: var(--r-md); font-size: 16px;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.dok-input::placeholder { color: var(--faint); }
.dok-input:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
.dok-btn {
  width: 52px; min-width: 52px; border-radius: var(--r-md);
  background: var(--acc); color: var(--acc-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--speed-fast) var(--ease-spring);
}
.dok-btn svg { width: 20px; height: 20px; }
.dok-btn:active { transform: scale(0.94); }

/* ---------- SÜZME OTURUMU (tam ekran) ---------- */

.sieveov {
  position: fixed; inset: 0; z-index: 58;
  background: var(--glow), var(--bg);
  display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
}
.sieveov-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) var(--pad) 8px;
}
.sieve-track {
  height: 2px; margin: 0 var(--pad) 6px;
  border-radius: 999px; background: var(--hair);
  overflow: hidden;
}
.sieve-track span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--acc);
}
.sieve-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
  flex: 1;
}
.sieve-count { font-size: 13px; font-weight: 700; color: var(--acc); }
.sieveov-body {
  flex: 1; overflow-y: auto;
  padding: 8px var(--pad) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
}

.hayal-peek {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  background: var(--bg2); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.hp-star { width: 16px; height: 16px; min-width: 16px; color: var(--acc); margin-top: 2px; }
.hp-text {
  font-family: var(--serif); font-size: 14px; line-height: 1.5;
  color: var(--mut);
}
.hayal-peek.is-full .hp-text { color: var(--text); }
.hp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }

.sieve-q { font-size: 14px; color: var(--mut); margin: 0 0 6px; }
.sieve-title {
  font-family: var(--serif); font-weight: 600; font-size: 26px;
  line-height: 1.22; margin: 0 0 14px; overflow-wrap: anywhere;
}
/* kart geçişi yalnız YENİ kayıt gelince — aynı kartın render'larında değil */
.sieve-title.card-in { animation: cardIn 280ms var(--ease) both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.sieve-stale {
  font-size: 13px; color: var(--acc); font-weight: 600;
  margin: -6px 0 12px;
}

.gates-col { display: flex; flex-direction: column; gap: 9px; }
.gate {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 60px; padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair-2); background: var(--bg2);
  box-shadow: var(--shadow-soft);
  transition: transform 120ms;
}
.gate:active { transform: scale(0.97); }
.gate-l { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
.gate-l b { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.gate-l i { font-style: normal; font-size: 12px; color: var(--mut); }
.gate-pts { font-size: 14px; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }

.gate-hayati {
  background: var(--acc);
  border-color: var(--acc); color: var(--acc-ink);
  box-shadow: var(--shadow-soft);
  min-height: 64px;
}
.gate-hayati .gate-l i, .gate-hayati .gate-pts { color: var(--acc-ink); opacity: 0.8; }
.gate-ilerletir { background: var(--acc-soft); border-color: var(--acc-line); }
.gate-ilerletir .gate-l b { color: var(--acc); }
.gate-gerekli .gate-pts { color: var(--mut); }

.gates-quiet {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; flex-wrap: wrap;
}
.quiet-gate {
  min-height: 40px; padding: 0 6px;
  font-size: 14px; font-weight: 600; color: var(--faint);
  transition: color var(--speed), transform 120ms;
}
.quiet-gate:active { color: var(--mut); transform: scale(0.96); }
.qg-dot { color: var(--faint); }
.sieve-help { font-size: 13px; color: var(--faint); text-align: center; line-height: 1.45; margin: 16px 0 0; }

/* ---------- çipler ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.chips-center { justify-content: center; margin-bottom: 14px; }
.chip {
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: var(--bg3);
  font-size: 14px; font-weight: 650; color: var(--mut);
  transition: all var(--speed);
}
.chip:active { transform: scale(0.95); }
.chip.is-on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.chip-big { min-height: 46px; padding: 0 19px; font-size: 15px; }

/* ---------- İZ ---------- */

.card-chain { display: flex; flex-direction: column; }
/* zincirin hedefi: N / eşik + ilerleme barı (7 kıvılcım → 21 ritim → 66 alışkanlık) */
.chain-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.chain-big { display: flex; align-items: baseline; gap: 8px; }
.chain-big b {
  font-family: var(--serif); font-weight: 650; font-size: 44px;
  line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums;
}
.chain-big .ct {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stage-chip {
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--acc); background: var(--acc-soft);
  border: 1px solid var(--acc-line); border-radius: 999px;
  padding: 3px 11px; white-space: nowrap;
}
.chain-bar {
  height: 8px; border-radius: 999px; background: var(--bg3);
  border: 1px solid var(--hair); overflow: hidden;
  margin: 14px 0 8px;
}
.chain-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc));
}
.card-chain .card-sub { margin: 0; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-month { font-family: var(--serif); font-size: 18px; font-weight: 650; margin: 0; text-transform: capitalize; }
.cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--faint); text-align: center; margin-bottom: 5px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 7px; }
.cal-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 38px; padding-top: 4px;
}
.cal-cell i { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; }
.cal-cell em { font-style: normal; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cal-won i { background: var(--acc); box-shadow: 0 0 0 1px var(--acc-line); }
.cal-lost i { border: 2px solid var(--mut); background: var(--bg2); }
.cal-idle i { background: var(--hair-2); width: 6px; height: 6px; margin: 2.5px 0; }
.cal-future i { background: transparent; border: 0; }
.cal-tdy em { color: var(--acc); font-weight: 800; }
.cal-tdy.cal-idle i, .cal-tdy.cal-future i {
  background: transparent; border: 1.5px solid var(--acc-line);
  width: 9px; height: 9px; margin: 1px 0;
}

/* zincir çizgisi: ardışık aktif günler nokta merkezinden bağlanır;
   hafta sınırında uç soluklaşarak taşar (zincir satır atlar, kopmaz) */
.cl-r::before, .cl-er::before, .cl-el::after {
  content: ''; position: absolute; top: 8.5px; height: 2px;
  background: var(--acc-line); z-index: 0;
}
.cl-r::before { left: 50%; width: 100%; }
.cl-r.cl-strong::before { background: var(--acc); }
.cl-er::before { left: 50%; width: 58%; background: linear-gradient(90deg, var(--acc-line), transparent); }
.cl-el::after { right: 50%; width: 58%; background: linear-gradient(270deg, var(--acc-line), transparent); }
.cal-legend {
  display: flex; gap: 14px; justify-content: center;
  font-size: 12px; color: var(--faint); margin-top: 12px;
}
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.leg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.leg-won { background: var(--acc); }
.leg-lost { border: 2px solid var(--mut); width: 7px; height: 7px; }
.leg-idle { background: var(--hair-2); }

.stat-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat b {
  font-family: var(--serif); font-size: 24px; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.stat span { font-size: 13px; color: var(--mut); }

.care-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.care-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.care-text { flex: 1; font-size: 14px; color: var(--mut); line-height: 1.45; }
.care-text b { color: var(--text); }

/* ---------- sheet'ler (ayar + düzenleme) ---------- */

.sheet-scrim {
  position: fixed; inset: 0; background: var(--scrim);
  z-index: 60;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 560px; margin: 0 auto;
  background: var(--bg2); border: 1px solid var(--hair); border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-float);
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-bar { width: 40px; height: 4px; border-radius: 999px; background: var(--hair-2); margin: 4px auto 14px; }
.sheet-title { font-family: var(--serif); font-size: 21px; font-weight: 650; margin: 0 0 16px; }

.sheet-scrim-edit { z-index: 63; }
.sheet-edit { z-index: 64; }

.set-block { margin-bottom: 22px; }
.set-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.set-hint { font-size: 13px; color: var(--faint); margin: 8px 0 0; }
.set-hint-inline { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }

.set-textarea {
  width: 100%; padding: 12px 14px; resize: none; margin-bottom: 9px;
  background: var(--bg3); border: 1px solid var(--hair-2);
  border-radius: var(--r-md); font-size: 15px; line-height: 1.55;
  font-family: var(--serif);
}
.set-textarea:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }

.segs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.segs-2 { grid-template-columns: 1fr 1fr; }
.seg {
  min-height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--hair-2); background: var(--bg3);
  font-size: 14px; font-weight: 650; color: var(--mut);
  transition: all var(--speed);
}
.seg.is-on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

.set-select {
  width: 100%; min-height: 48px; padding: 0 40px 0 14px;
  background: var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 10l6 6 6-6' stroke='%23857da1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 17px;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-sm); font-size: 15px; appearance: none; -webkit-appearance: none;
}

.tog {
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.tog input { width: 20px; height: 20px; accent-color: var(--acc); }

.set-btns { display: flex; gap: 9px; }
.set-btns .btn { flex: 1; }

.danger-link {
  color: var(--danger); font-size: 14px; font-weight: 650;
  min-height: 44px; width: 100%; text-align: left;
}
.ver-line { text-align: center; font-size: 12px; color: var(--faint); margin: 6px 0 2px; }
.ver-link { color: var(--mut); text-decoration: underline; text-underline-offset: 2px; }

/* düzenleme sheet'i */
.sheet-edit form { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.edit-input {
  flex: 1; min-height: 48px; padding: 0 14px;
  background: var(--bg3); border: 1px solid var(--hair-2);
  border-radius: var(--r-sm); font-size: 16px; min-width: 0;
}
.edit-input:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
.edit-status { font-size: 13px; color: var(--faint); margin: 0 0 16px; }
.edit-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 6px; }
.edit-acts .btn { flex: 1 1 40%; min-height: 46px; font-size: 15px; }

/* ---------- odak ---------- */

.focus {
  position: fixed; inset: 0; z-index: 70;
  background: var(--glow), var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.focus-inner {
  width: 100%; max-width: 420px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.focus-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acc); margin: 0 0 10px;
}
.focus-title {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  line-height: 1.22; margin: 0 0 6px; overflow-wrap: anywhere;
}
.focus-sub { color: var(--mut); font-size: 14px; margin: 0 0 18px; }
.focus-custom { display: flex; gap: 9px; width: 100%; max-width: 290px; margin: 4px 0 16px; }
.focus-custom input {
  width: 86px; min-height: 48px; text-align: center;
  background: var(--bg3); border: 1px solid var(--hair-2);
  border-radius: var(--r-sm); font-size: 16px; font-weight: 700;
}
.focus-custom .btn { flex: 1; }
.focus-note { font-size: 13px; color: var(--faint); margin: 14px 0 0; }

.ring-wrap { position: relative; width: 210px; height: 210px; margin: 8px 0 20px; }
.ring { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bg3); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: var(--acc); stroke-width: 7; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--acc-line));
  transition: stroke-dashoffset 1s linear;
}
.ring-time {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 44px; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.focus .hero-actions { width: 100%; max-width: 320px; }

/* ---------- onboarding ---------- */

.ob {
  height: 100dvh; display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top)) 26px calc(22px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
}
.ob-lang { display: flex; gap: 7px; justify-content: flex-end; flex: 0 0 auto; }
.ob-lang .seg { flex: 0 0 auto; min-width: 56px; }
.ob-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto; /* klavye açıkken içerik kırpılmaz, üst üste binmez */
  min-height: 0;
}
.ob-mark { width: 64px; height: 64px; color: var(--acc); margin: 0 0 14px; }
.ob-word {
  font-family: var(--serif); font-size: 46px; font-weight: 650;
  letter-spacing: -0.01em; margin: 0 0 18px; line-height: 1;
}
.ob-line { font-size: 19px; line-height: 1.5; color: var(--text); margin: 0 0 14px; }
.ob-line em, .ob-sub em { font-style: normal; color: var(--acc); font-weight: 650; }
.ob-tag {
  font-family: var(--serif); font-size: 15px; color: var(--mut);
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.ob-h { font-family: var(--serif); font-size: 30px; font-weight: 650; margin: 0 0 8px; }
.ob-sub { color: var(--mut); font-size: 15px; margin: 0 0 16px; line-height: 1.55; }
/* hayal örneği: kutunun DIŞINDA, açıkça "örnek" — içerikle karışmasın diye */
.ob-eg { font-size: 13px; color: var(--faint); line-height: 1.5; margin: 8px 2px 18px; }
.ob-dump {
  width: 100%; padding: 14px 16px; resize: none;
  background: var(--bg2); border: 1px solid var(--hair-2);
  border-radius: var(--r-md); font-size: 16px; line-height: 1.6;
  box-shadow: var(--shadow-soft);
}
.ob-dump:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
.ob-nudge {
  color: var(--acc); font-size: 14px; font-weight: 650;
  margin: 10px 2px 0; /* kutunun çizgisine girmez — net boşluk */
}
.ob-nudge.nudge-in { animation: rise 240ms var(--ease) both; }
.ob-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); transition: background var(--speed); }
.ob-dots i.is-on { background: var(--acc); }
.ob-row { display: flex; gap: 10px; }
.ob-row .btn-primary { flex: 1.6; }
.ob-row .btn-ghost { flex: 1; }

/* ---------- kazanma anı ---------- */

.winov {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  animation: fade 240ms both; cursor: pointer;
  transition: opacity 500ms;
}
.winov.is-out { opacity: 0; }
.winov-stamp {
  position: relative;
  border: 1.5px solid var(--acc-line); border-radius: 18px;
  padding: 26px 34px; text-align: center;
  background: var(--bg2);
  transform: rotate(-3deg);
  box-shadow: var(--shadow-float);
  animation: stamp 420ms var(--ease) both;
}
@keyframes stamp {
  0% { transform: scale(1.7) rotate(-9deg); opacity: 0; }
  62% { transform: scale(0.96) rotate(-2.4deg); opacity: 1; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}
.winov-word {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  line-height: 1.08; letter-spacing: 0.005em; color: var(--acc);
  text-transform: uppercase;
}
.winov-sub { margin-top: 10px; font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }
.winov-stage {
  margin-top: 8px; font-size: 13px; font-weight: 700;
  color: var(--acc); letter-spacing: 0.04em; text-transform: uppercase;
}
/* ikinci vuruş: tikli çember, kaşenin köşesine damga gibi iner */
.winov-seal {
  position: absolute; top: -18px; right: -18px;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--acc-line); color: var(--acc);
  background: var(--bg2);
  box-shadow: var(--shadow-soft);
  animation: sealSlam 360ms var(--ease) 430ms both;
}
.winov-seal svg { width: 28px; height: 28px; display: block; }
@keyframes sealSlam {
  0% { transform: scale(2.3); opacity: 0; }
  58% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- su duruldu ---------- */

.duru {
  position: fixed; inset: 0; z-index: 78;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 26px; animation: fade 380ms both;
}
.duru-card {
  width: 100%; max-width: 360px;
  background: var(--bg2); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 30px 26px 24px;
  text-align: center;
  box-shadow: var(--shadow-float);
  animation: settle 620ms var(--ease) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
.duru-word {
  font-family: var(--serif); font-size: 32px; font-weight: 650;
  letter-spacing: -0.01em;
}
.duru-sub { color: var(--mut); font-size: 15px; margin: 8px 0 14px; }
.duru-stats { font-size: 14px; color: var(--faint); margin: 0 0 20px; line-height: 1.7; }
.duru-stats b { color: var(--acc); font-weight: 700; }

/* ---------- görev bitince mikro-ödül ---------- */

.gain {
  position: fixed; top: 17vh; left: 0; right: 0; z-index: 74;
  display: flex; justify-content: center;
  pointer-events: none;
}
.gain-chip {
  font-family: var(--serif); font-size: 30px; font-weight: 700;
  color: var(--acc); font-variant-numeric: tabular-nums;
  animation: gainUp 1100ms var(--ease) both;
}
@keyframes gainUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.85); }
  16% { opacity: 1; transform: translateY(0) scale(1.08); }
  30% { transform: translateY(-2px) scale(1); }
  68% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px) scale(0.96); }
}

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px); z-index: 75;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--hair-2); border-radius: 999px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-float);
  opacity: 0; transition: opacity 220ms, transform 220ms var(--ease);
  max-width: calc(100vw - 40px); white-space: nowrap;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast button { color: var(--acc); font-weight: 700; font-size: 14px; min-height: 32px; }

/* ---------- boot ---------- */

.boot {
  height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.boot-mark {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2.5px solid var(--acc); border-top-color: transparent;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-word { font-family: var(--serif); font-size: 30px; font-weight: 650; animation: bootRise 560ms var(--ease-out) both; }
.boot-tag { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); animation: bootRise 560ms var(--ease-out) 110ms both; }
@keyframes bootRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- v4: YAŞAYAN AHTAPOT (uygulamanın yüzü + kanca) ---------- */
/* Mürekkep ahtapotu kullanıcının ivmesiyle canlanır. Tüm görünüm vitality()'den
   (saf state) türer: --vita 0..1 ışıma/nefes şiddetini, octo--KADEME rengi/tonu
   sürer. Kart chrome'u YOK — asıl eylem (hero) öne çıksın diye hafif/havadar;
   varlık figürün kalitesinden gelir. Hareket azaltmada (global kural) nefes
   donar, renk/ışıma okunur kalır — kademe yine anlaşılır. */
.octo {
  display: flex; align-items: center; gap: 15px;
  padding: 8px 4px 14px; margin: 0;
}
.octo-figure {
  position: relative; flex: none;
  width: 76px; min-height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.octo-aura {
  position: absolute; top: 50%; left: 50%;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle, var(--acc) 0%, transparent 68%);
  /* canlılıkla büyüyen/parlayan hale */
  opacity: calc(0.04 + var(--vita) * 0.24);
  transform: translate(-50%, -52%) scale(calc(0.6 + var(--vita) * 0.45));
  filter: blur(9px); pointer-events: none;
  transition: opacity var(--speed-slow) var(--ease-out), transform var(--speed-slow) var(--ease-out);
}
.octo-mark {
  position: relative; width: 54px; height: 54px;
  color: var(--acc); display: block;
  transform-origin: 50% 56%;
  /* nefes: canlılık arttıkça hızlanır (5.4s → ~2.6s) */
  animation: octoBreathe calc(5.4s - var(--vita) * 2.8s) var(--ease-out) infinite;
  transition: color var(--speed-slow) var(--ease-out), filter var(--speed-slow) var(--ease-out);
}
.octo-mark svg { width: 100%; height: 100%; }
.octo-state {
  margin-top: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  transition: color var(--speed-slow);
}
.octo-say { min-width: 0; }
.octo-greet {
  font-size: 13px; color: var(--mut); font-weight: 600;
  margin: 0 0 3px; overflow-wrap: anywhere;
}
.octo-name { color: var(--acc); }
.octo-voice {
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--text);
  margin: 0; overflow-wrap: anywhere;
}

/* Kademeler — mürekkebin koyuluğu = ivme. */
.octo--yeni   .octo-mark { color: var(--acc); opacity: 0.92; }
.octo--parlak .octo-mark { color: var(--acc); filter: drop-shadow(0 0 calc(2px + var(--vita) * 5px) var(--acc-line)); }
.octo--akista .octo-mark { color: var(--acc); }
.octo--sonuk  .octo-mark { color: var(--mut); }
.octo--solgun .octo-mark { color: var(--faint); filter: grayscale(0.55) opacity(0.7); animation-duration: 7.5s; }
.octo--solgun .octo-aura { opacity: 0.06; }
.octo--parlak .octo-state { color: var(--acc); }

@keyframes octoBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---------- v4: takvim gün paneli (planları görme aracı) ---------- */
.cal-tap { cursor: pointer; }
.cal-cell.cal-sel { box-shadow: inset 0 0 0 2px var(--acc); border-radius: 10px; }
.cal-cell.cal-sel em { color: var(--acc); font-weight: 700; }

.daypanel { animation: cardIn 240ms var(--ease) both; }
.dp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dp-date {
  font-family: var(--serif); font-weight: 650; font-size: 16px;
  margin: 0; text-transform: capitalize; flex: 1; min-width: 0;
}
.dp-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 2.5px 9px; white-space: nowrap;
}
.dp-won { background: var(--acc); color: var(--acc-ink); }
.dp-lost { background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); }
.dp-idle { background: var(--bg3); color: var(--mut); border: 1px solid var(--hair); }
.dp-future { background: var(--bg3); color: var(--faint); border: 1px solid var(--hair); }
.dp-close { flex: none; width: 34px; height: 34px; color: var(--faint); }
.dp-close svg { width: 16px; height: 16px; }
.dp-meta { font-size: 13px; color: var(--mut); margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.dp-carry { color: var(--acc); }
.dp-sec { margin-bottom: 12px; }
.dp-sec:last-child { margin-bottom: 0; }
.dp-sec-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.dp-cat { margin-bottom: 8px; }
.dp-cat-h {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 9px; margin-bottom: 5px;
}
.dp-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 4px; min-height: 40px; border-bottom: 1px solid var(--hair);
  transition: background var(--speed);
}
.dp-row:last-child { border-bottom: 0; }
.dp-row:active { background: var(--acc-soft); }
.dp-row-title { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.dp-empty { color: var(--faint); font-size: 14px; text-align: center; margin: 6px 0 2px; }

/* ---------- v4: onboarding yüzen ahtapot sürüsü (ilk izlenim) ---------- */
.ob-1 { position: relative; }
.ob-swarm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ob-1 .ob-body, .ob-1 .ob-dots, .ob-1 .btn-wide { position: relative; z-index: 1; }
.ob-oct {
  position: absolute; width: var(--size); height: var(--size); color: var(--acc);
  opacity: 0; will-change: transform, opacity;
  animation: obDriftR var(--dur) linear var(--delay) infinite;
}
.ob-oct svg { width: 100%; height: 100%; }
.ob-oct--l { animation-name: obDriftL; }
.ob-line2 { color: var(--mut); font-size: 14px; margin: 8px 0 0; line-height: 1.4; }
@keyframes obDriftR {
  0% { transform: translateX(-24vw) rotate(-8deg); opacity: 0; }
  14% { opacity: 0.1; }
  86% { opacity: 0.1; }
  100% { transform: translateX(120vw) rotate(8deg); opacity: 0; }
}
@keyframes obDriftL {
  0% { transform: translateX(120vw) rotate(8deg); opacity: 0; }
  14% { opacity: 0.1; }
  86% { opacity: 0.1; }
  100% { transform: translateX(-24vw) rotate(-8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ob-swarm { display: none; } }

/* kart başlığı flex başlıkta sıfır marjla oturur (Bu hafta + Karneyi paylaş) */
.card-head .card-title { margin: 0; }

/* ayarlar: isim formu */
.isim-form { display: flex; gap: 8px; align-items: center; }

/* onboarding: isim alanı */
.ob-mini {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 8px;
}
.ob-name {
  width: 100%; min-height: 50px; padding: 0 16px;
  background: var(--bg2); border: 1px solid var(--hair-2);
  border-radius: var(--r-md); font-size: 16px;
  box-shadow: var(--shadow-soft);
}
.ob-name:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
.ob-mini-hint { font-size: 12px; color: var(--faint); margin: 7px 2px 16px; }

/* danış: alt karttan yükselen sakin diyalog */
.danisov {
  position: fixed; inset: 0; z-index: 72;
  background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
}
.danis-card {
  width: 100%; max-width: 560px;
  background: var(--bg2); border: 1px solid var(--hair); border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-float);
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
}

/* hızlı tur: spot ışığı — gerçek ekran üstünde gezdirir */
.tourov { position: fixed; inset: 0; z-index: 72; }
.tourov.tourov-bg { background: var(--scrim); }
.tour-spot {
  position: fixed; border-radius: 18px;
  box-shadow: 0 0 0 200vmax var(--scrim);
  border: 2px solid var(--acc);
  pointer-events: none;
  transition: left 260ms var(--ease), top 260ms var(--ease),
    width 260ms var(--ease), height 260ms var(--ease);
}
.tour-tip {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: min(92vw, 430px);
  background: var(--bg2); border: 1px solid var(--hair);
  border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: var(--shadow-float);
}
.danis-h { font-family: var(--serif); font-size: 24px; font-weight: 650; margin: 6px 0 6px; }
.danis-sub { color: var(--mut); font-size: 14px; margin: 0 0 14px; }
.danis-p { color: var(--mut); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.danis-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 16px; margin-bottom: 9px;
  background: var(--bg3); border: 1px solid var(--hair-2);
  border-radius: var(--r-md); font-size: 16px; font-weight: 650;
  text-align: left;
  transition: transform 120ms, border-color var(--speed);
}
.danis-opt:active { transform: scale(0.97); border-color: var(--acc-line); }
.danis-opt svg { width: 17px; height: 17px; min-width: 17px; color: var(--faint); }
.danis-foot { display: flex; gap: 8px; }
.danis-foot .quiet-link { flex: 1; }
.tour-dots { margin: 4px 0 16px; }
.tour-row { display: flex; align-items: center; gap: 10px; }
.tour-row .quiet-link { flex: 1; min-height: 48px; }
.tour-row .btn { flex: 1.6; }

/* süzgeç sessiz satırı: bunların da seçenek olduğu belli olsun (ince çerçeve) */
.quiet-gate {
  border: 1px solid var(--hair-2); border-radius: 999px;
  padding: 0 14px; background: var(--bg2);
}
.qg-dot { display: none; }
.gates-quiet { gap: 8px; }

/* ---------- v3.8: Dönüp Bak (yolculuk farkındalığı) ---------- */

.card-journey {
  background: linear-gradient(180deg, var(--acc-soft), transparent 62%), var(--bg2);
  border-color: var(--acc-line);
}
.journey-title {
  font-family: var(--serif); font-weight: 650; font-size: 22px;
  line-height: 1.2; margin: 6px 0 14px; letter-spacing: -0.01em;
}
.journey-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.jstat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.jstat b {
  font-family: var(--serif); font-size: 30px; font-weight: 650; line-height: 1;
  color: var(--acc); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.jstat span { font-size: 12px; color: var(--mut); margin-top: 5px; }
.journey-line {
  font-family: var(--serif); font-size: 15px; color: var(--text);
  line-height: 1.5; margin: 0 0 14px;
}
.journey-next { display: flex; justify-content: space-between; font-size: 13px; color: var(--mut); margin-bottom: 7px; }
.jn-left { color: var(--acc); font-weight: 700; }
.journey-next-done { font-size: 13px; color: var(--acc); font-weight: 650; margin: 0 0 10px; }
.journey-share { margin-top: 14px; }

/* bu hafta vs geçen hafta — ivme rozetleri + trend cümlesi */
.delta { font-family: var(--sans); font-size: 13px; font-weight: 700; vertical-align: middle; }
.delta.up { color: var(--acc); }
.delta.dn { color: var(--faint); }
.week-trend { font-size: 13px; margin: 12px 0 0; line-height: 1.45; }
.week-trend.up { color: var(--acc); font-weight: 650; }
.week-trend.dn { color: var(--mut); }

/* dönüm noktası kutlaması (kaşe + yıldız) */
.mileov {
  position: fixed; inset: 0; z-index: 80; background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  animation: fade 240ms both; cursor: pointer; transition: opacity 500ms;
}
.mileov.is-out { opacity: 0; }
.mile-stamp {
  position: relative; text-align: center;
  border: 1.5px solid var(--acc-line); border-radius: 22px;
  padding: 28px 40px; background: var(--bg2);
  box-shadow: var(--shadow-float);
  animation: stamp 420ms var(--ease) both;
}
.mile-badge { width: 42px; height: 42px; color: var(--acc); margin: 0 auto 4px; }
.mile-num {
  font-family: var(--serif); font-size: 66px; font-weight: 700; line-height: 1;
  color: var(--acc); font-variant-numeric: tabular-nums;
}
.mile-word {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; color: var(--text);
}
.mile-sub { font-size: 13px; color: var(--mut); margin-top: 12px; max-width: 240px; }

/* ---------- v3.8 PREMIUM CİLA: dokunuş hissi + tipografi ---------- */

/* Basış geri bildirimi: minik yaylanmayla "press" hissi — kaliteli his buradan
   gelir. Mevcut :active görünümleri korunur, yalnız hareket eğrisi premium olur. */
.btn, .ibtn, .gate, .chip, .seg, .tab, .dok-btn, .danis-opt,
.sec-head, .fold, .hayal-peek, .quiet-gate, .row-check {
  transition: transform var(--speed-fast) var(--ease-spring),
    background var(--speed) var(--ease), border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease), color var(--speed) var(--ease);
}
.btn:active, .dok-btn:active { transform: scale(0.965); }
.gate:active { transform: scale(0.975); }
.chip:active, .seg:active { transform: scale(0.95); }
.ibtn:active { transform: scale(0.9); }
.tab:active { transform: scale(0.93); }
.row-check:active { transform: scale(0.82); }
/* basışta gölge yüzeye yaklaşır — fiziksel derinlik hissi */
.btn-primary:active, .dok-btn:active { box-shadow: var(--shadow-soft); }

/* Büyük serif başlıklarda optik sıkılaştırma — display tipografi imzası */
.hero-title, .sieve-title, .journey-title, .ob-h, .ob-word,
.sheet-title, .cal-month, .duru-word, .focus-title, .danis-h,
.nudge-big, .mile-num, .boot-word, .chain-big b {
  letter-spacing: -0.02em;
}

/* İlerleme barları premium frenlemeyle dolar (ani değil, yumuşak otururlar) */
.win-fill, .chain-fill { transition: width var(--speed-slow) var(--ease-out); }

/* Kart giriş animasyonu yumuşak frenlemeli — sekme geçişi daha akıcı */
.view-enter > * { animation-timing-function: var(--ease-out); }

/* ---------- hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}