/* ===== Keyhan Bebek — sıcak aydınlık tema ===== */
:root {
  --bg-0: #fefefe;       /* sayfa zemini */
  --bg-1: #fefefe;       /* açık panel */
  --card: #ffffff;       /* beyaz kart */
  --card-2: #f3eee7;     /* hafif gri kart */
  --line: #ece4d8;       /* ince çizgi */
  --text: #2f3a44;       /* koyu lacivert metin */
  --dim: #8a93a0;        /* soluk metin */

  --feed: #f0a868;       /* turuncu (beslenme) */
  --feed-soft: #fdf3e3;  /* turuncu kart zemini */
  --sleep: #6f8ad4;      /* mavi (uyku) */
  --sleep-soft: #eef2fb; /* mavi kart zemini */
  --diaper: #7fc8a9;     /* yeşil (bez) */
  --diaper-soft: #eef7f1;
  --note: #c79fe0;       /* mor (not) */
  --note-soft: #f6eefb;
  --medicine: #e88a8a;      /* kırmızımsı (ilaç) */
  --medicine-soft: #fef7f1; /* ilaç kart zemini */
  --uyandir-soft: #f0edfb;
  --danger: #e07a7a;

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 14px;
  --tap: 56px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  /* Çift dokunuşla yakınlaştırmayı ve dokunma vurgusunu engelle */
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: #fefefe;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  /* iOS yatay modda otomatik metin büyütmeyi kapat */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sayfa genelinde çift dokunuş yakınlaştırmasını kapat (pinch-zoom korunur) */
  touch-action: manipulation;
}

body { font-variant-numeric: tabular-nums; }

/* Kayıt sayfası açıkken arka planın kaymasını engelle */
body.sheet-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

button {
  font-family: inherit; color: inherit; cursor: pointer;
  /* Hızlı dokunuşta metin seçimini ve çift dokunuş yakınlaştırmasını önle */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
input { font-family: inherit; }

h1, h2 { font-family: var(--serif); font-weight: 600; }

.section-title {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5b6675;
  margin: 24px 4px 14px;
}

/* ===== Giriş ekranı ===== */
.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  z-index: 50;
  background: linear-gradient(170deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
}
.gate-emoji { font-size: 3rem; }
.gate-title { font-size: 1.6rem; margin: 8px 0 2px; }
.gate-sub { color: var(--dim); margin: 0 0 20px; }
.gate-input {
  width: 100%; height: var(--tap);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 1.2rem; text-align: center;
  padding: 0 14px; margin-bottom: 14px;
}
.gate-error { color: var(--danger); margin: 12px 0 0; font-size: .9rem; }

/* ===== Genel butonlar ===== */
.btn-primary, .btn-danger, .btn-ghost {
  width: 100%; min-height: var(--tap);
  border: none; border-radius: var(--r-md);
  font-size: 1.05rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
}
.btn-primary { background: var(--feed); color: #2a1c0d; }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-ghost { background: var(--card-2); color: var(--text); border: 1px solid var(--line); }
.btn-primary:active, .btn-danger:active, .btn-ghost:active { transform: scale(.98); }

:focus-visible {
  outline: 3px solid var(--note);
  outline-offset: 2px;
}

/* ===== Uygulama yerleşimi ===== */
.app { min-height: 100vh; min-height: 100dvh; }

.topbar {
  position: relative; z-index: 20;
  padding: calc(var(--safe-t) + 18px) 22px 0;
  background: var(--bg-0);
}
.topbar-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.topbar-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  background: #fae6c8;
  box-shadow: 0 4px 14px rgba(193,150,90,.25);
}
.brand-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-hello { color: #6c7682; font-size: 1.15rem; font-weight: 500; }
.brand-name {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
}

.caregiver-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 16px;
  font-weight: 600; font-size: 1.05rem; color: var(--text);
  min-height: 46px; margin-top: 6px;
  box-shadow: 0 4px 12px rgba(120,110,95,.08);
}
.caregiver-chip .cg-user { color: #586374; }
.caregiver-chip svg:last-child { color: #97a0ad; }
.cg-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: #faf3e6;
  flex: 0 0 auto;
}
.cg-avatar[hidden] { display: none; }

/* Bakıcı küçük ikonları (kartlar / zaman çizelgesi) */
.cg-ico {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; vertical-align: middle;
  background: #faf3e6;
}
.cg-ico--sm { width: 16px; height: 16px; }
.tl-cg { display: inline-flex; align-items: center; vertical-align: middle; }

.screens {
  padding: 6px 22px calc(110px + var(--safe-b));
  max-width: 560px; margin: 0 auto;
  background: var(--bg-1);
  border-top-left-radius: 26px; border-top-right-radius: 26px;
  min-height: 60vh;
}

.now-greeting {
  text-align: center; color: #7b8593; font-size: 1.05rem;
  margin: 14px 0 22px;
}
.screen { animation: fade .25s ease; }
.screen[hidden] { display: none; }

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

/* ===== Büyük kartlar ===== */
.cards-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.bigcard {
  position: relative;
  min-width: 0;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
  box-shadow: 0 8px 22px rgba(120,110,95,.08);
}
.bigcard--feed { background: #fefaf1; border-color: #f6ecd6; }
.bigcard--sleep { background: #f5f8fb; border-color: #e3ebf3; }

.bigcard-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  margin-bottom: 16px;
}
.bigcard--feed .bigcard-icon { background: #fbe6c4; }
.bigcard--sleep .bigcard-icon { background: #dfe7f8; }
/* İlaç modu: uyku kartı son 30 saatteki ilaç sayacına dönüşür.
 * İkon dairesi Hızlı İşlemler'deki İlaç butonuyla aynı zemini kullanır. */
.bigcard--sleep.is-medicine { background: #fbe7e0; border-color: #f2d3cb; }
.bigcard--sleep.is-medicine .bigcard-icon { background: var(--medicine-soft); }
.bigcard--sleep.is-medicine .bigcard-label { color: #c25c5c; }
/* Birden fazla ilaç: tür başına küçük sayaç listesi (kart uzamasın diye kompakt) */
.bigcard--sleep.is-multi .bigcard-divider,
.bigcard--sleep.is-multi .bigcard-sub { display: none; }
.bigcard--sleep.is-multi .bigcard-main {
  font-size: 1rem; display: grid; gap: 10px; margin-top: 10px;
}
.med-item { line-height: 1.2; cursor: pointer; }
.med-item + .med-item { border-top: 1px solid rgba(120,120,120,.14); padding-top: 10px; }
.med-ago { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.med-meta { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: #6a7480; margin-top: 2px; }
.bigcard-icon img { width: 40px; height: 40px; object-fit: contain; }

.bigcard-label {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.bigcard--feed .bigcard-label { color: #d9943f; }
.bigcard--sleep .bigcard-label { color: var(--sleep); }

.bigcard-main {
  font-family: var(--serif);
  font-size: 1.85rem; font-weight: 700; line-height: 1.1;
  color: var(--text);
  margin: 8px 0 0;
}
.bigcard-sub { color: #6a7480; font-size: .95rem; margin-top: 4px; }
.bigcard-divider {
  height: 1px; background: rgba(120,120,120,.14);
  margin: 18px 0 12px;
}
.bigcard-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  color: #6a7480; font-size: .82rem;
  min-width: 0; overflow: hidden;
}
.bigcard-meta .meta-item {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.bigcard-meta .meta-sep { color: #d2d7dd; margin: 0 1px; }
.bigcard-meta .meta-ico { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }

/* ===== Eylem ızgarası ===== */
.action-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 6px;
}
.action {
  min-height: 116px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: .98rem; font-weight: 600; color: var(--text);
  transition: transform .08s ease;
}
.action:active { transform: scale(.96); }
.action-ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
}
.action-ico img { width: 52px; height: 52px; object-fit: contain; }
.action--feed { background: #fff8ee; border-color: #f5ebd9; }
.action--diaper { background: #f8f8f1; border-color: #eaeade; }
.action--sleep { background: #f7f3fa; border-color: #e9e1f0; }
.action--medicine { background: var(--medicine-soft); border-color: #f5dcdc; }
.action--note { background: #fdf4f1; border-color: #f3e2db; }

/* ===== Zaman çizelgesi ===== */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  background: transparent; border: none;
  border-radius: var(--r-md); padding: 12px 4px;
  text-align: left; width: 100%;
}
.tl-ico {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  flex: 0 0 auto;
}
.tl-item--feed .tl-ico { background: #fef8ee; }
.tl-item--diaper .tl-ico { background: #f7f7f0; }
.tl-item--sleep .tl-ico { background: #e6e2f7; }
.tl-item--medicine .tl-ico { background: var(--medicine-soft); }
.tl-item--note .tl-ico { background: var(--note-soft); }
.tl-ico img { width: 36px; height: 36px; object-fit: contain; }
.tl-body { min-width: 0; }
.tl-title { display: block; font-weight: 700; color: var(--text); font-size: 1.05rem; }
.tl-title .tl-soft { font-weight: 500; color: #6a7480; }
.tl-meta { display: block; color: #8a93a0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-time {
  color: var(--text); font-size: .92rem; font-weight: 700; text-align: center;
  padding: 6px 12px; border-radius: 999px;
}
.tl-item--feed .tl-time { background: #fbedd6; color: #c98a3b; }
.tl-item--diaper .tl-time { background: var(--diaper-soft); color: #4f9c79; }
.tl-item--sleep .tl-time { background: #e6e2f7; color: #6b62b0; }
.tl-item--medicine .tl-time { background: var(--medicine-soft); color: #c25c5c; }
.tl-item--note .tl-time { background: var(--note-soft); color: #9568bb; }

/* Zaman çizelgesi ipliği (timeline thread) — Şimdi ekranı */
.timeline--thread { position: relative; }
.timeline--thread li { position: relative; }
.timeline--thread li:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  left: 29px; top: 62px; bottom: -1px; width: 2px;
  background: #e3ddf0;
}
.timeline--thread .tl-ico { position: relative; z-index: 1; }

.empty { color: var(--dim); text-align: center; padding: 40px 10px; }

/* "Tümünü gör" bağlantısı */
.recent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 18px 8px;
  box-shadow: 0 8px 22px rgba(120,110,95,.06);
  margin-top: 26px;
}
.recent .section-title { margin: 18px 2px 14px; }
.recent-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.recent .timeline { gap: 0; }
.recent .timeline--thread li:not(:last-child) .tl-item {
  border-bottom: 1px solid var(--line);
}
.see-all {
  display: inline-flex; align-items: center; gap: 2px;
  background: none; border: none; padding: 0;
  color: var(--sleep); font-weight: 600; font-size: .95rem;
  margin-top: 10px;
}

/* ===== Gün gezinme ===== */
.daynav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0 16px;
}
.daynav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  font-size: 1.5rem; color: var(--text);
}
.daynav-label { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }

/* ===== İstatistik ===== */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; text-align: center;
}
.stat-num { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.stat-lbl { color: var(--dim); font-size: .85rem; }
.stat--feed   { background: #fff8ee; border-color: #f5ebd9; }
.stat--milk   { background: #f0f7ff; border-color: #dcebfa; }
.stat--diaper { background: var(--diaper-soft); border-color: #dcefe4; }
.stat--sleepy { background: #f3f2fb; border-color: #e5e2f5; }

/* ===== Günlük istatistik kartları (Bez / Uyku) ===== */
.stat-card {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  padding: 18px 16px 16px;
  margin-top: 24px;
  box-shadow: 0 6px 18px rgba(120,110,95,.06);
}
.stat-card--diaper { background: var(--diaper-soft); border-color: #dcefe4; }
.stat-card--sleep  { background: #f2f6fd; border-color: #e0e9f8; }
.stat-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.stat-card-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  flex: 0 0 auto;
}
.stat-card--diaper .stat-card-ico { background: #d3ecdf; }
.stat-card--sleep .stat-card-ico  { background: #dfe7f8; }
.stat-card-ico img { width: 32px; height: 32px; object-fit: contain; }
.stat-card-title {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0;
}
.stat-card--diaper .stat-card-title { color: #4f9c79; }
.stat-card--sleep .stat-card-title  { color: var(--sleep); }
.stat-card-head--chart { margin: 2px 4px 6px; }
.stat-card-ico--feed   { background: #fbe6c4; }
.stat-card-ico--diaper { background: #d3ecdf; }
.stat-card-ico--sleep  { background: #dfe7f8; }
.stat-card-title--feed   { color: #d9943f; }
.stat-card-title--diaper { color: #4f9c79; }
.stat-card-title--sleep  { color: var(--sleep); }
.stat-card .stat { background: #fff; border-color: transparent; }
.stat-card .stat-grid--3 { margin-top: 0; }
.stat-card .insights { margin-top: 10px; }
.stat-card .insight { border-color: transparent; }

/* ===== "Günün saatleri" pil grafiği ===== */
.pillchart-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 14px 12px;
  box-shadow: 0 6px 18px rgba(120,110,95,.06);
}
.pillchart {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; height: 190px; padding: 4px 4px 0;
}
.pill-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; height: 100%; cursor: pointer;
}
.pill {
  width: 100%; max-width: 46px; flex: 1;
  border-radius: 999px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #f2f0ec;
}
.pill--sleep { background: #dce8fb; }
.pill--feed  { background: #fdeec7; }
.pill--future { background: #f7f5f2; }
.pill-fill {
  width: 100%; border-radius: 999px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: height .4s ease;
}
.pill-seg { width: 100%; }
.pill-seg--sleep { background: #8fb4f2; }
.pill-seg--feed  { background: #f4b942; }
.pill-lbl { color: var(--dim); font-size: .8rem; }
.dot--sleepblue { background: #8fb4f2; }
.dot--feedyellow { background: #f4b942; }

/* ===== Dönem ortalaması "kahraman" kartları ===== */
.hero-cards { display: grid; gap: 14px; }
.hero-card {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(120,110,95,.06);
}
.hero--sleep  { background: #f2f6fd; border-color: #e0e9f8; }
.hero--feed   { background: #fdf6e7; border-color: #f5e7c8; }
.hero--milk   { background: #f0f7ff; border-color: #dcebfa; }
.hero--diaper { background: var(--diaper-soft); border-color: #dcefe4; }
.hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.hero-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  font-size: 1.5rem; flex: 0 0 auto;
}
.hero--sleep .hero-ico  { background: #b9cef5; }
.hero--feed .hero-ico   { background: #f4c257; }
.hero--milk .hero-ico   { background: #bcd9f5; }
.hero--diaper .hero-ico { background: #a9d9c1; }
.hero-right { text-align: right; }
.hero-label { color: #6a7480; font-size: .9rem; font-weight: 600; }
.hero-value {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 700;
  color: var(--text); line-height: 1.15;
}
.hero-sub { color: #8a93a0; font-size: .88rem; margin: 10px 0 12px; }
.hero-bar {
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.85);
  overflow: hidden;
}
.hero-bar span {
  display: block; height: 100%; border-radius: 999px;
  transition: width .4s ease;
}
.hero--sleep .hero-bar span  { background: #4a6fb5; }
.hero--feed .hero-bar span   { background: #8a6d1a; }
.hero--milk .hero-bar span   { background: #4a86c2; }
.hero--diaper .hero-bar span { background: #3f8f68; }

.chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 180px; padding: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar {
  width: 100%; max-width: 32px;
  background: linear-gradient(to top, var(--feed), #f6c79a);
  border-radius: 6px 6px 0 0; min-height: 3px;
  transition: height .4s ease;
}
.bar-val { font-size: .7rem; color: var(--dim); }
.bar-lbl { font-size: .72rem; color: var(--dim); }

/* Kart içine gömülü sade grafik — tam boy pil "ray" + renkli dolgu */
.chart--clean {
  background: none; border: none; padding: 4px 0 0;
}
.bar-track {
  width: 100%; max-width: 38px; flex: 1; min-height: 0;
  border-radius: 999px; overflow: hidden;
  background: #f2f0ec;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bar-track .bar {
  max-width: none; border-radius: 999px;
  min-height: 0;
}
.bar-track .bar--stack { border-radius: 999px; }
.chart--dense .bar-track { max-width: 14px; border-radius: 999px; }
.chart--dense .bar-track .bar { border-radius: 999px; }

/* --- İstatistik: ek bileşenler --- */
.period-chips {
  justify-content: center;
  margin: -4px 0 18px;
}
.period-chips .chip { flex: 1; max-width: 120px; min-height: 44px; }

/* Yoğun grafik (14/30 gün): dar çubuklar, değer etiketleri gizli */
.chart--dense { gap: 2px; padding: 12px 8px; }
.chart--dense .bar-col { gap: 3px; }
.chart--dense .bar { max-width: 14px; border-radius: 3px 3px 0 0; }
.chart--dense .bar--stack { border-radius: 3px 3px 0 0; }
.chart--dense .bar-val { display: none; }
.chart--dense .bar-lbl { font-size: .58rem; }
.chart--dense .bar-col:nth-child(even) .bar-lbl { visibility: hidden; }

.stat-grid--3 { grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; }
.stat-num--sm { font-size: 1.25rem; }

/* Yığılmış (stacked) grafik çubukları */
.bar--stack {
  background: none; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 6px 6px 0 0;
}
.bar-seg { width: 100%; }
.bar-seg--day { background: linear-gradient(to top, var(--feed), #f6c79a); }
.bar-seg--night { background: linear-gradient(to top, #5a72c0, #8fa3e0); }
.bar-seg--pee { background: linear-gradient(to top, #6fb3e0, #a7d2f0); }
.bar-seg--poop { background: linear-gradient(to top, #b98a5a, #d4a97c); }

/* Düz çubuk renk çeşitleri */
.bar--avgml { background: linear-gradient(to top, #d98f5f, #f0bc94); }
.bar--gap { background: linear-gradient(to top, #9a8bd0, #c3b8e8); }
.bar--diaper { background: linear-gradient(to top, var(--diaper), #b3e0cc); }
.bar--sleep { background: linear-gradient(to top, var(--sleep), #a6b8e8); }

/* Grafik ipucu (tooltip) */
.chart-tip {
  position: fixed; z-index: 70;
  background: #33404c; color: #fff;
  border-radius: 12px; padding: 10px 14px;
  font-size: .85rem; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  pointer-events: none;
  max-width: 240px;
  animation: fade .15s ease;
}
.chart-tip strong { color: #f6c79a; }

.bar-col { cursor: pointer; }

/* Grafik lejantı */
.chart-legend {
  display: flex; gap: 16px; justify-content: center;
  margin: 8px 0 4px; font-size: .78rem; color: var(--dim);
}
.chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--day { background: var(--feed); }
.dot--night { background: #6f8ad4; }
.dot--pee { background: #6fb3e0; }
.dot--poop { background: #b98a5a; }

/* Gündüz / gece beslenme kartı */
.daynight-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
}
.dn-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dn-side { display: flex; align-items: center; gap: 10px; }
.dn-side--right { text-align: right; }
.dn-emoji { font-size: 1.5rem; }
.dn-num { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.dn-lbl { color: var(--dim); font-size: .78rem; }
.dn-bar {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(to right, #5a72c0, #8fa3e0);
  display: flex;
}
.dn-bar-day {
  display: block; height: 100%;
  background: linear-gradient(to right, var(--feed), #f6c79a);
  border-radius: 999px 0 0 999px;
  transition: width .4s ease;
}
.dn-pct { text-align: center; color: var(--dim); font-size: .8rem; margin-top: 8px; }

/* İçgörüler (kaka & çiş analizi) */
.insights { display: grid; gap: 8px; margin-top: 12px; }
.insight {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
  font-size: .88rem; line-height: 1.45;
}
.insight--ok { border-left: 4px solid var(--diaper); }
.insight--warn { border-left: 4px solid #e2a13c; background: #fdf7ec; }

/* ===== Ayar alanları ===== */
.field { display: block; margin-bottom: 14px; }
.field-lbl { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 6px; }
.field-input {
  width: 100%; height: var(--tap);
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  font-size: 1.05rem; padding: 0 14px;
}
.field--switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.field--switch .field-lbl { margin-bottom: 0; }
.switch {
  -webkit-appearance: none; appearance: none;
  width: 48px; height: 28px; flex: 0 0 auto;
  background: var(--line); border-radius: 999px;
  position: relative; cursor: pointer; transition: background .2s;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: transform .2s;
}
.switch:checked { background: var(--sleep); }
.switch:checked::after { transform: translateX(20px); }
.field-help {
  color: var(--dim); font-size: .82rem; line-height: 1.4;
  margin: -4px 0 16px;
}
.cg-editor { display: grid; gap: 10px; margin-bottom: 12px; }
.cg-row { display: flex; gap: 8px; }
.cg-row input {
  flex: 1; height: 48px; padding: 0 12px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text); font-size: 1rem;
}
.cg-del {
  width: 48px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--line);
  color: var(--danger); font-size: 1.1rem;
}
.settings-actions { margin: 18px 0; }
.app-version { text-align: center; color: var(--dim); font-size: .8rem; margin-top: 28px; }

/* ===== Tab bar ===== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  padding: 12px 8px calc(10px + var(--safe-b));
  background: #fffdfa;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(120,110,95,.06);
}
.tab {
  flex: 1; background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 4px; color: #9aa3af; font-size: .82rem; font-weight: 600;
  border-radius: var(--r-sm); min-height: 56px;
  position: relative;
}
.tab-ico { display: grid; place-items: center; width: 26px; height: 26px; }
.tab-ico img {
  width: 24px; height: 24px; object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter .15s ease;
}
.tab.is-active { color: #e7a13e; }
.tab.is-active .tab-ico img { filter: none; }
.tab.is-active::after {
  content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 3px; background: var(--feed);
}

/* ===== Slide-up sheet ===== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.55);
  animation: fade .2s ease;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--bg-1);
  border-top-left-radius: 26px; border-top-right-radius: 26px;
  border-top: 1px solid var(--line);
  padding: 8px 18px calc(18px + var(--safe-b));
  max-width: 560px; margin: 0 auto;
  max-height: 92vh; overflow-y: auto;
  animation: slideup .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 8px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-title { font-size: 1.3rem; margin: 0; }
.sheet-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  font-size: 1rem;
}
.sheet-body { display: grid; gap: 8px; }
.sheet-foot { display: flex; gap: 10px; margin-top: 10px; }
.sheet-foot .btn-danger { flex: 0 0 90px; }

/* ===== Chips & stepper ===== */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px; padding: 0 15px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; color: var(--text); font-weight: 600; font-size: .95rem;
}
.chip.is-on { background: var(--feed); color: #2a1c0d; border-color: transparent; }
.chip--diaper.is-on { background: var(--diaper); color: #0e2a1f; }
.chip--medicine.is-on { background: var(--medicine); color: #3a1414; }
.chip--method.is-on { background: var(--feed); color: #2a1c0d; }

.stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
.stepper-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  font-size: 1.6rem; color: var(--text);
}
.stepper-val {
  font-family: var(--serif); font-size: 2rem; font-weight: 600;
  min-width: 110px; text-align: center;
}
.stepper-unit { font-size: .9rem; color: var(--dim); }

.field-row { display: grid; gap: 4px; }
.field-row > label { color: var(--dim); font-size: .85rem; }
.sheet textarea, .sheet input[type="datetime-local"] {
  width: 100%; background: var(--bg-0); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text); font-size: 1rem; padding: 10px 14px;
}
.sheet textarea { min-height: 48px; resize: vertical; }

/* ===== Tarih + kolay saat seçici ===== */
.timefield { display: grid; gap: 6px; }
.date-input {
  width: 100%; background: var(--bg-0); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text); font-size: 1.05rem; padding: 9px 12px;
}

.clock-set {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
}
.clock-unit { display: grid; gap: 4px; justify-items: center; }
.clock-btn {
  width: 56px; height: 38px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 1.7rem; line-height: 1; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  /* Saati hızlı ayarlarken çift dokunuş yakınlaştırmasını ve seçimi engelle */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.clock-btn:active { background: var(--feed); color: #2a1c0d; }
.clock-val {
  font-family: var(--serif); font-size: 2rem; font-weight: 600;
  min-width: 56px; text-align: center;
}
.clock-colon {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 600;
  align-self: center; padding: 0 2px;
}
.now-btn { align-self: center; margin-left: 4px; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--text); padding: 12px 20px; border-radius: 999px;
  font-weight: 600; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: fade .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}