/* ============ Grafik değişkenleri (tek ton: kehribar) ============ */
:root, :root[data-ui="gece"] {
  --viz-surface: #1d1611;
  --viz-series: #e8a95e;
  --viz-series-soft: #8a6339;
  --viz-grid: #2e251e;
  --viz-base: #4a3d32;
  --viz-ink: #f4eadc;
  --viz-muted: #9b8a76;
  --seq-0: rgba(255, 238, 214, .06);
  --seq-1: #4d3420;
  --seq-2: #80552f;
  --seq-3: #b77d43;
  --seq-4: #eaa85c;
}
:root[data-ui="gunduz"] {
  --viz-surface: #fbf6ee;
  --viz-series: #b5652b;
  --viz-series-soft: #dcb48c;
  --viz-grid: #ebe1d3;
  --viz-base: #cdbca6;
  --viz-ink: #2b1f15;
  --viz-muted: #806c58;
  --seq-0: rgba(80, 50, 20, .07);
  --seq-1: #f0d3a9;
  --seq-2: #dfa76b;
  --seq-3: #c27b3b;
  --seq-4: #8e4d1c;
}

/* ============ Sayfa ============ */
.stats-view { max-width: 1240px; margin: 0 auto; padding: calc(var(--safe-top) + 30px) clamp(16px, 4vw, 48px) 40px; }
.stats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.stats-head h1 { font-size: clamp(30px, 5vw, 44px); }
.wrapped-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.stats-body { display: flex; flex-direction: column; gap: 16px; }
.stats-empty { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.stats-empty span { font-size: 26px; }

.grid-3 { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-3 .today-card { grid-column: 1 / -1; } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  padding: 22px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  animation: rise .7s var(--ease-out) both;
  min-width: 0;
}
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-top h2 { font-size: 20px; }
.card-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.card-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
/* Büyük sayılar arayüz yazı tipinde, orantılı rakamlarla */
.hero-num { font-family: var(--font-ui); font-size: 52px; font-weight: 650; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 6px; }
.hero-num small { font-size: 18px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.today-card { display: flex; align-items: center; gap: 24px; }
.ring-box { flex-shrink: 0; }
.viz-ring .ring-track { fill: none; stroke: color-mix(in srgb, var(--viz-series) 18%, transparent); }
.viz-ring .ring-fill { fill: none; stroke: var(--viz-series); stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease-out); }
.viz-ring .ring-fill.over { stroke: color-mix(in srgb, var(--viz-series) 70%, white); transition-delay: .9s; }
.good-note { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-weight: 600; font-size: 14px; margin: 4px 0; }

.streak-card { position: relative; overflow: hidden; }
.flame-wrap { position: absolute; right: 18px; top: 18px; color: var(--faint); }
.streak-card.on .flame-wrap { color: var(--accent); animation: flicker 2.2s ease-in-out infinite; }
.streak-card.on .flame-wrap svg { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(3deg); } }

.meter { position: relative; height: 10px; border-radius: 10px; background: color-mix(in srgb, var(--viz-series) 18%, transparent); margin: 12px 0 10px; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: var(--viz-series); animation: grow-x 1.3s .2s var(--ease-out) both; transform-origin: left; }
.meter-mark { position: absolute; top: -4px; width: 2px; height: 18px; border-radius: 2px; background: var(--text); opacity: .6; }

/* ---- Ekran süresi ---- */
.chart-total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-total .big { font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.delta { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.delta.up { color: var(--good); }
.chart-box { transition: opacity .3s; min-height: 230px; }
.chart-box.refetch { opacity: .45; }

/* ---- Kutucuklar ---- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; animation: rise .7s var(--ease-out) both; }
.tile-label { font-size: 13px; color: var(--muted); }
.tile-value { font-size: 23px; font-weight: 650; letter-spacing: -.01em; }
.tile-sub { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Tahminler ---- */
.eta-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.eta-item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; transition: background .2s; }
.eta-item:hover { background: var(--surface-2); }
.eta-item img, .eta-ph { width: 52px; aspect-ratio: 2/3; object-fit: cover; border-radius: 2px 5px 5px 2px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); flex-shrink: 0; position: relative; }
.eta-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.eta-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eta-bar { height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--viz-series) 18%, transparent); overflow: hidden; }
.eta-bar i { display: block; height: 100%; background: var(--viz-series); border-radius: 5px; }

.insight { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); }
.insight-emoji { font-size: 28px; }
.insight b { margin-right: 6px; }

.author-list { display: flex; flex-direction: column; gap: 14px; }
.author-row { display: flex; flex-direction: column; gap: 6px; }
.author-text { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.author-bar { height: 8px; border-radius: 0 4px 4px 0; overflow: hidden; }
.author-bar i { display: block; height: 100%; background: var(--viz-series); border-radius: 0 4px 4px 0; animation: grow-x 1s var(--ease-out) both; transform-origin: left; }

.fun-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .fun-card { grid-template-columns: 1fr; } }
.fun { display: flex; gap: 14px; align-items: center; }
.fun > div { display: flex; flex-direction: column; }
.fun b { font-size: 19px; }
.fun-emoji { font-size: 34px; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 16px 10px; border-radius: 18px; border: 1px dashed var(--line-2);
  color: var(--faint); font-size: 12px;
  animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms);
}
.badge b { color: var(--muted); font-size: 13.5px; }
.badge-emoji { font-size: 32px; filter: grayscale(1) opacity(.35); }
.badge.earned { border-style: solid; border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.badge.earned b { color: var(--text); }
.badge.earned .badge-emoji { filter: none; animation: pop .7s var(--ease-spring) both; animation-delay: calc(var(--i) * 40ms + .2s); }

/* ============ Grafik işaretleri ============ */
.viz { position: relative; width: 100%; }
.viz svg { display: block; overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-tick { fill: var(--viz-muted); font-size: 11px; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.viz-tick.strong { fill: var(--viz-ink); font-weight: 700; }
.viz-bar { fill: var(--viz-series-soft); transform-box: fill-box; transform-origin: bottom; animation: bar-grow .8s var(--ease-out) both; animation-delay: var(--d); transition: fill .2s; }
.viz-bar.hl { fill: var(--viz-series); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.viz-hit { fill: transparent; cursor: pointer; outline: none; }
.viz-hit:hover, .viz-hit:focus-visible { fill: color-mix(in srgb, var(--viz-ink) 5%, transparent); }
.viz-line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.viz-area { fill: var(--viz-series); opacity: .1; }
.viz-dot { fill: var(--viz-series); stroke: var(--viz-surface); stroke-width: 2; }
.viz-dot.hover { opacity: 0; transition: opacity .15s; pointer-events: none; }
.viz-dot.hover.in { opacity: 1; }
.viz-end { fill: var(--viz-ink); font-size: 12px; font-weight: 600; font-family: var(--font-ui); }
.viz-cross { stroke: var(--viz-base); stroke-width: 1; opacity: 0; pointer-events: none; }
.viz-cross.in { opacity: 1; }

.viz-tip {
  position: fixed; left: 0; top: 0; z-index: 1500;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  pointer-events: none; opacity: 0; transition: opacity .12s;
  max-width: 240px;
}
.viz-tip.in { opacity: 1; }
.viz-tip strong { font-size: 15px; color: var(--text); }
.viz-tip span { font-size: 12px; color: var(--muted); }

/* Isı haritası: 7 gün × 24 saat */
.heat-grid { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 3px; align-items: center; }
.heat-label, .heat-hour { font-size: 11px; color: var(--viz-muted); }
.heat-hour { text-align: left; }
.heat-cell { aspect-ratio: 1; border-radius: 4px; background: var(--seq-0); animation: cell-in .5s var(--ease-out) both; animation-delay: var(--d, 0ms); outline: none; }
.heat-cell:hover, .heat-cell:focus-visible { box-shadow: 0 0 0 2px var(--viz-ink); }
@keyframes cell-in { from { opacity: 0; transform: scale(.4); } }
.heat-cell.l1, .cal-cell.l1 { background: var(--seq-1); }
.heat-cell.l2, .cal-cell.l2 { background: var(--seq-2); }
.heat-cell.l3, .cal-cell.l3 { background: var(--seq-3); }
.heat-cell.l4, .cal-cell.l4 { background: var(--seq-4); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; font-size: 11.5px; color: var(--viz-muted); }
.heat-legend .heat-cell { width: 12px; height: 12px; animation: none; }
.heat-legend span { margin: 0 4px; }

/* Takvim */
.cal-scroll { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.cal-months, .cal-grid { display: grid; grid-template-columns: repeat(var(--weeks), 13px); gap: 3px; width: max-content; }
.cal-months { height: 16px; font-size: 11px; color: var(--viz-muted); margin-bottom: 4px; }
.cal-months span { white-space: nowrap; overflow: visible; grid-row: 1; }
.cal-grid { grid-template-rows: repeat(7, 13px); grid-auto-flow: column; }
.cal-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--seq-0); animation: cell-in .4s var(--ease-out) both; animation-delay: var(--d); outline: none; }
.cal-cell.empty { visibility: hidden; }
.cal-cell:hover, .cal-cell:focus-visible { box-shadow: 0 0 0 2px var(--viz-ink); }

.viz-table { margin-top: 12px; font-size: 13px; }
.viz-table summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.viz-table table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.viz-table th, .viz-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.viz-table th { color: var(--muted); font-weight: 600; }

/* ============ Ayarlar ============ */
.settings-view { max-width: 820px; margin: 0 auto; padding: calc(var(--safe-top) + 30px) clamp(16px, 4vw, 48px) 40px; }
.settings-body { display: flex; flex-direction: column; gap: 16px; }
.set-card { display: flex; flex-direction: column; gap: 16px; }
.set-head h2 { font-size: 21px; margin-bottom: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.set-label { display: flex; flex-direction: column; font-weight: 550; }
.set-sub { display: flex; flex-direction: column; gap: 10px; font-weight: 550; }
.set-sub .theme-swatches { margin: 0; }
.inline-form { display: flex; gap: 8px; flex: 1 1 320px; justify-content: flex-end; flex-wrap: wrap; }
.inline-form .input { flex: 1 1 140px; height: 40px; }
.note-input { font-family: var(--font-hand); font-size: 22px; line-height: 1.3; min-height: 140px; height: auto; padding: 12px 16px; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.user-row > div { flex: 1; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip.you { height: 26px; font-size: 12px; }
.add-user { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; }
.add-user .input { height: 40px; }
@media (max-width: 640px) { .add-user { grid-template-columns: 1fr; } }
.tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.tips code { background: var(--surface-2); padding: 2px 8px; border-radius: 6px; color: var(--text); }
.set-actions { display: flex; justify-content: flex-end; }

/* ============ Okuma Karnesi ============ */
.wrapped-view { position: fixed; inset: 0; background: #0c0806; color: #f6ecdf; z-index: 60; }
.w-shell { position: absolute; inset: 0; max-width: 560px; margin: 0 auto; overflow: hidden; }
@media (min-width: 700px) { .w-shell { inset: 20px auto; left: 50%; transform: translateX(-50%); width: min(480px, 60vh); border-radius: 28px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); } }
.w-progress { position: absolute; top: calc(var(--safe-top) + 12px); left: 14px; right: 56px; z-index: 5; display: flex; gap: 4px; }
.w-progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.w-progress i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.w-progress .done i { transform: scaleX(1); }
.w-progress .run i { animation: w-run linear forwards; }
.w-progress.paused .run i { animation-play-state: paused; }
@keyframes w-run { to { transform: scaleX(1); } }
.w-close { position: absolute; top: calc(var(--safe-top) + 2px); right: 8px; z-index: 6; color: #fff; }
.w-nav { position: absolute; bottom: calc(var(--safe-bottom) + 14px); right: 14px; z-index: 6; display: flex; gap: 6px; }
.w-nav .icon-btn { color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.w-nav .flip { transform: scaleX(-1); }
.w-stage { position: absolute; inset: 0; }

.w-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 80px 34px 70px;
  opacity: 0; visibility: hidden;
  transform: scale(1.04);
  transition: opacity .6s ease, transform .8s var(--ease-out), visibility .6s;
  user-select: none;
}
.w-card.active { opacity: 1; visibility: visible; transform: none; }
.w-card.past { transform: scale(.96); }
.w-card > * { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.w-card.active > * { opacity: 1; transform: none; }
.w-card.active > *:nth-child(2) { transition-delay: .15s; }
.w-card.active > *:nth-child(3) { transition-delay: .35s; }
.w-card.active > *:nth-child(4) { transition-delay: .6s; }
.w-card.active > *:nth-child(5) { transition-delay: .85s; }

.w-intro { background: radial-gradient(ellipse at 70% 20%, #7a3c1d, transparent 60%), radial-gradient(ellipse at 20% 90%, #4b2a63, transparent 55%), #140c08; }
.w-time { background: radial-gradient(ellipse at 30% 30%, #8a4a1c, transparent 60%), #1a0f08; }
.w-pages { background: radial-gradient(ellipse at 70% 70%, #2e5a52, transparent 60%), #0b1714; }
.w-books { background: radial-gradient(ellipse at 50% 80%, #6b2333, transparent 60%), #160a0d; }
.w-month { background: radial-gradient(ellipse at 20% 20%, #5b4a14, transparent 60%), #141005; }
.w-hour { background: radial-gradient(ellipse at 50% 15%, #26346b, transparent 60%), #080b18; }
.w-streak { background: radial-gradient(ellipse at 50% 30%, #8a3410, transparent 60%), #1a0a04; }
.w-faves { background: radial-gradient(ellipse at 80% 20%, #4a2d63, transparent 60%), #0f0a14; }
.w-summary { background: radial-gradient(ellipse at 70% 20%, rgba(232,169,94,.35), transparent 60%), linear-gradient(160deg, #3a2213, #0e0906); }

.w-kicker { font-size: 14px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: rgba(255,240,220,.7); }
.w-year { font-family: var(--font-display); font-size: clamp(90px, 28vw, 150px); font-weight: 700; line-height: .9; letter-spacing: -.04em; background: linear-gradient(135deg, #ffd59a, #e8a95e 40%, #d0764e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-card h2 { font-size: 34px; }
.w-big { font-family: var(--font-ui); font-size: clamp(64px, 20vw, 104px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.w-big small { font-size: 28px; font-weight: 500; letter-spacing: 0; opacity: .8; }
.w-word { font-family: var(--font-display); letter-spacing: -.02em; }
.w-sub { font-size: 20px; line-height: 1.35; color: rgba(255,240,220,.88); }
.w-note { font-size: 15px; color: rgba(255,240,220,.65); }
.w-emoji { font-size: 64px; }
.w-emoji.flame { animation: flicker 1.8s ease-in-out infinite; display: inline-block; }

.w-stack { position: relative; height: 180px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 0; }
.w-stack i { width: calc(130px + (var(--i) % 3) * 14px); height: calc(var(--h) / 14 * 1.6); min-height: 6px; max-height: 12px; margin-top: 1px; border-radius: 2px; background: linear-gradient(90deg, #e9dcc3, #fff8ea); box-shadow: 0 2px 0 rgba(0,0,0,.25); transform: translateX(calc((var(--i) % 4 - 1.5) * 4px)); }
.w-card.active .w-stack i { animation: drop .6s var(--ease-spring) both; animation-delay: calc(.3s + var(--i) * 70ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-120px); } }

.w-fan { position: relative; height: 220px; margin-top: 10px; }
.w-fan > * { position: absolute; left: 50%; bottom: 0; width: 110px; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px 7px 7px 3px; box-shadow: 0 18px 30px -10px rgba(0,0,0,.8); transform-origin: 50% 120%; transform: translateX(-50%) rotate(var(--r)); font-size: 12px; }
.w-card.active .w-fan > * { animation: fan-in .8s var(--ease-spring) both; animation-delay: calc(.4s + var(--i) * 90ms); }
@keyframes fan-in { from { transform: translateX(-50%) rotate(0) translateY(60px); opacity: 0; } }

.w-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.w-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.w-bar i { width: 100%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; background: rgba(255,230,180,.35); transform-origin: bottom; }
.w-bar.top i { background: #f1c26b; }
.w-card.active .w-bar i { animation: bar-grow .9s var(--ease-out) both; animation-delay: calc(.4s + var(--i) * 50ms); }
.w-bar span { font-size: 11px; opacity: .6; }

.w-fave { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.06); }
.w-fave img, .w-fave .cover-ph { width: 64px; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px 6px 6px 3px; flex-shrink: 0; position: relative; }
.w-fave > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-fave small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.w-fave b { font-family: var(--font-display); font-size: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-fave span { opacity: .75; font-size: 14px; }

.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-tile { padding: 18px; border-radius: 20px; background: rgba(255,238,214,.07); display: flex; flex-direction: column; }
.w-tile b { font-size: 38px; font-weight: 700; letter-spacing: -.03em; }
.w-tile span { opacity: .7; font-size: 14px; }
.w-download { align-self: flex-start; margin-top: 8px; }