/* Yumak'la 8 Hafta — pastel piksel dünya
   Düzen: ortalanmış tek sütun; üstte tanıtım + haftalık aylar, ortada takvim, altta "neden".
   Yumak ekranın altındaki evinde yaşar ve sayfadaki kartların üstüne zıplayabilir. */
:root {
  --ink: #3d2a3f;
  --ink-soft: #6f5a73;
  --paper: #fffaf3;
  --paper-2: #fff1e4;
  --sky-1: #c9b8ff;
  --sky-2: #f7c6e0;
  --sky-3: #ffe3cb;
  --pink: #ff6f98;
  --pink-soft: #ffc4d8;
  --peach: #ffd2ad;
  --mint: #c4f1df;
  --blue: #cfe2ff;
  --butter: #fff0a6;
  --lilac: #e4d8ff;
  --ground: #c4f0dc;
  --ground-edge: #8fd4bc;
  --shadow: 5px 5px 0 var(--ink);
  --font-pixel: "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --home-h: 76px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100%;
  font: 500 17px/1.55 var(--font-body); color: var(--ink);
  background: var(--sky-3);
  padding-bottom: calc(var(--home-h) + 24px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
}
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
.sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }
#moon { position: absolute; left: 50%; top: 12px; width: 60px; transform: translateX(-50%); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--font-pixel); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(34px, 5.2vw, 58px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
.h-small { font-size: 24px; }
p { margin: 0; }
b { font-weight: 800; }
.muted { color: var(--ink-soft); }
.eyebrow { font: 500 14px/1.2 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }

/* ---------- ortak parçalar ---------- */
.card { background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 22px; position: relative; }
.pbtn {
  font: 600 16px/1 var(--font-pixel); color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); padding: 11px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.pbtn:hover { background: #fff; }
.pbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pbtn.small { font-size: 14px; padding: 8px 11px; }
.pbtn.primary { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.pbtn.ghost { background: transparent; box-shadow: none; }
.pbtn[aria-pressed="true"] { background: var(--butter); }
:focus-visible { outline: 3px dashed var(--pink); outline-offset: 3px; }
.chip { font: 500 14px/1 var(--font-pixel); background: var(--paper); border: 2px solid var(--ink); padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- üst şerit ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--font-pixel); color: var(--ink); text-decoration: none; }
.brand canvas { width: 32px; height: 32px; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- izleme modu ---------- */
.izle-bar { margin-top: 4px; }
.izle-inner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--butter); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 10px 14px; font: 500 15px/1.3 var(--font-pixel); }
.izle-actions { margin-left: auto; display: flex; gap: 8px; }
body.izle .setbox, body.izle .kg, body.izle .done-btn, body.izle [data-walk], body.izle #startInput, body.izle #saveStart, body.izle #resetBtn, body.izle #loadBackup { pointer-events: none; opacity: .7; }

/* ---------- tanıtım ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 30px; }
.hero-card h1 { margin-bottom: 14px; }
.lede { font-size: 18px; max-width: 58ch; }
.today { margin-top: 20px; display: grid; gap: 10px; padding: 16px; border: 3px solid var(--ink); background: var(--peach); }
.today .t-label { font: 500 14px/1.2 var(--font-pixel); letter-spacing: .04em; }
.today .t-title { font: 600 24px/1.1 var(--font-pixel); }
.today .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.moons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-top: 14px; }
.moon-item { display: grid; justify-items: center; gap: 4px; font: 500 14px/1 var(--font-pixel); background: none; border: 0; color: var(--ink); cursor: pointer; padding: 4px; }
.moon-item canvas { width: 48px; height: 48px; }
.moon-item.now { outline: 2px dashed var(--pink); outline-offset: 2px; }
.week-meter { margin-top: 18px; display: grid; gap: 6px; font: 500 14px/1.3 var(--font-pixel); }
.bar { height: 16px; border: 3px solid var(--ink); background: var(--paper-2); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--pink) 0 8px, #ff8fb0 8px 16px); }

/* ---------- takvim ---------- */
.cal-card { margin-top: 30px; }
.cal-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 14px/1.2 var(--font-pixel); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 14px; height: 14px; border: 2px solid var(--ink); display: inline-block; }
.t-A { background: var(--peach); } .t-B { background: var(--pink-soft); } .t-yuruyus { background: var(--mint); }
.t-uzun { background: var(--blue); } .t-aralikli { background: var(--butter); } .t-dinlenme { background: var(--lilac); }
.calendar { display: grid; gap: 14px; }
.week { display: grid; grid-template-columns: 96px repeat(7, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.week-label { display: grid; align-content: center; justify-items: start; gap: 4px; font: 600 16px/1.1 var(--font-pixel); }
.week-label canvas { width: 32px; height: 32px; }
.week-label small { font: 500 12px/1.2 var(--font-pixel); color: var(--ink-soft); }
.day {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; min-height: 96px; padding: 7px 6px;
  border: 3px solid var(--ink); color: var(--ink); cursor: pointer; text-align: left; font: inherit;
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.day:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.day .d-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font: 600 13px/1 var(--font-pixel); }
.day .d-date { font-weight: 400; color: var(--ink-soft); }
.day canvas.d-icon { width: 32px; height: 32px; align-self: center; justify-self: center; }
.day .d-label { font: 600 13px/1.15 var(--font-pixel); }
.day.is-today { box-shadow: 0 0 0 3px var(--pink), 4px 4px 0 3px var(--ink); }
.day.is-today::before { content: "bugün"; position: absolute; top: -12px; right: 6px; font: 600 11px/1 var(--font-pixel); background: var(--pink); color: #fff; padding: 3px 5px; border: 2px solid var(--ink); }
/* tamamlanan gün: koca yeşil tik */
.day.is-done { box-shadow: inset 0 0 0 3px #3cc97c; }
.day.is-done:hover { box-shadow: inset 0 0 0 3px #3cc97c, 4px 4px 0 var(--ink); }
.day.is-done canvas.d-icon { opacity: .22; }
.day.is-done .d-label, .day.is-done .d-top { opacity: .75; }
.day.is-today.is-done { box-shadow: inset 0 0 0 3px #3cc97c, 0 0 0 3px var(--pink), 4px 4px 0 3px var(--ink); }
.day .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); height: auto; pointer-events: none; filter: drop-shadow(2px 2px 0 rgba(61, 42, 63, .35)); }
.stamp.pop { animation: pop .55s steps(6) both; }
@keyframes pop { 0% { transform: translate(-50%, -40%) scale(0) rotate(-20deg); } 60% { transform: translate(-50%, -40%) scale(1.35) rotate(6deg); } 100% { transform: translate(-50%, -40%) scale(1) rotate(0); } }
.done-chip { background: #e9fbef; border-color: #1c5e3b; gap: 8px; }
.day.is-past:not(.is-done) { opacity: .78; }

/* ---------- neden ---------- */
.why-card { margin-top: 30px; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.why-item { border: 3px solid var(--ink); padding: 14px; background: var(--paper-2); }
.why-item h3 { font-size: 19px; margin-bottom: 6px; }
.why-item p { font-size: 16px; }
.sources { margin-top: 16px; }
.sources summary { font: 600 16px/1.3 var(--font-pixel); cursor: pointer; }
.sources a { color: var(--ink); }
.note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); max-width: 75ch; }
.foot { padding-block: 26px 10px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Yumak'ın evi ---------- */
.home {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--home-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  background: var(--ground); border-top: 4px solid var(--ground-edge);
}
.home::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: repeating-linear-gradient(90deg, #b2e8d1 0 12px, transparent 12px 24px); }
.item { position: relative; background: none; border: 0; padding: 0 0 8px; cursor: pointer; display: grid; justify-items: center; }
.item canvas { width: auto; height: 36px; }
#bedItem canvas { height: 32px; }
#litterItem canvas { height: 34px; }
.need { position: absolute; top: -10px; right: -6px; font: 700 14px/1 var(--font-pixel); color: var(--pink); text-shadow: 1px 1px 0 var(--ink); }
.home .spacer { flex: 1; }

/* ---------- Yumak katmanı ---------- */
.pet-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.yumak { position: absolute; left: 0; top: 0; width: 154px; height: 154px; transform-origin: 50% 95.45%; will-change: transform; } /* köken = ayak hizası (84/88) */
.yumak-face { position: absolute; left: 50%; bottom: 0; width: min(92vw, 540px); height: auto; transform: translate(-50%, 110%); will-change: transform; }
.fx { position: fixed; z-index: 65; pointer-events: none; }
.fx-text { font: 700 21px/1 "Pixelify Sans", system-ui, sans-serif; color: #ff5f8f; white-space: nowrap; letter-spacing: .5px;
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink), 0 5px 0 rgba(61, 42, 63, .22); }
.prop { position: fixed; left: 0; top: 0; z-index: 64; pointer-events: none; will-change: transform, opacity; }
.bubble {
  position: fixed; z-index: 70; max-width: min(320px, 80vw); background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 11px 14px; font: 500 17px/1.35 var(--font-pixel); pointer-events: none; opacity: 0; transform: translateY(6px);
  transition: opacity .15s steps(3), transform .15s steps(3);
}
.bubble.on { opacity: 1; transform: none; }
.bubble::after { content: ""; position: absolute; left: var(--tail, 40px); bottom: -13px; width: 12px; height: 12px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) translateY(-50%); }
.bubble.below::after { bottom: auto; top: -13px; transform: rotate(225deg) translateY(-50%); }
.bubble.side::after { display: none; }
.bubble b { color: #e0507c; }

/* ---------- gün ayrıntısı ---------- */
.sheet { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 0; background: var(--paper); color: var(--ink); width: min(820px, calc(100% - 20px)); max-height: 90vh; }
/* Yumak pencerenin üstüne oturabilsin diye üstte boşluk */
@media (min-height: 620px) { .sheet { margin-top: 128px; margin-bottom: 16px; max-height: calc(100dvh - 148px); } }
#dayBody { display: grid; gap: 16px; }
.sheet.small { width: min(460px, calc(100% - 20px)); }
.sheet::backdrop { background: rgba(61, 42, 63, .45); }
.sheet-inner { padding: 22px; display: grid; gap: 18px; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; position: sticky; top: 0; background: var(--paper); padding-block: 4px 12px; z-index: 2; border-bottom: 3px dashed #e8d9ce; }
.sec-title { font: 600 20px/1.2 var(--font-pixel); display: flex; align-items: center; gap: 8px; }
.ex-list { display: grid; gap: 16px; }
.ex { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; border: 3px solid var(--ink); padding: 14px; background: #fff; }
.ex.compact { grid-template-columns: 120px minmax(0, 1fr); }
.stage { background: linear-gradient(180deg, #f3ecff 0 78%, #d9f3e8 78% 100%); border: 3px solid var(--ink); aspect-ratio: 1; display: grid; place-items: center; }
.stage canvas { width: 100%; height: 100%; }
.ex h3 { font-size: 22px; }
.ex .dose { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ex ol { margin: 6px 0 8px; padding-left: 20px; font-size: 16px; }
.ex .tip { font-size: 15px; background: var(--butter); border: 2px solid var(--ink); padding: 6px 9px; display: inline-block; }
.ex .warn { font-size: 15px; margin-top: 6px; color: #9a3d5b; }
.sets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; font: 500 14px/1 var(--font-pixel); }
.setbox { width: 34px; height: 34px; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; font: 600 15px/1 var(--font-pixel); color: var(--ink); }
.setbox[aria-pressed="true"] { background: var(--pink); color: #fff; }
.kg { width: 70px; font: 600 15px/1 var(--font-pixel); padding: 7px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.video { margin-top: 10px; }
.lite-yt { position: relative; display: block; width: 100%; max-width: 420px; aspect-ratio: 16 / 9; border: 3px solid var(--ink); background: #1b1422 center / cover no-repeat; cursor: pointer; padding: 0; }
.lite-yt::after { content: "▶ İzle"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 17px/1 var(--font-pixel); background: var(--pink); color: #fff; border: 3px solid var(--ink); padding: 9px 13px; box-shadow: 3px 3px 0 var(--ink); }
.yt-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 16 / 9; border: 3px solid var(--ink); background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chip.strong { background: #fff; font-weight: 700; border-width: 2px; }
.chip.kg-chip { background: var(--mint); }
.warn.soft { color: var(--ink-soft); }
.tracker { margin-top: 12px; padding-top: 10px; border-top: 2px dashed #e8d9ce; display: grid; gap: 6px; }
.tr-help, .tr-last { font-size: 14px; color: var(--ink-soft); margin: 0; }
.tr-last b { color: var(--ink); }
.kg-field { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-pixel); margin-left: 4px; }
.done-btn {
  display: inline-flex; align-items: center; gap: 12px; font: 600 21px/1.1 var(--font-pixel); color: #fff; text-shadow: 1px 1px 0 var(--ink);
  background: var(--pink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 14px 20px; cursor: pointer; text-align: left;
}
.done-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.done-btn[aria-pressed="true"] { background: #e9fbef; color: #1c5e3b; text-shadow: none; border-color: #1c5e3b; box-shadow: 4px 4px 0 #1c5e3b; }
.done-btn small { display: block; font: 500 12px/1.2 var(--font-body); color: var(--ink-soft); margin-top: 3px; }
.video a { font: 500 14px/1.3 var(--font-pixel); color: var(--ink); }
.walk-box { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; align-items: start; }
.done-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 3px dashed #e8d9ce; padding-top: 16px; }
.check { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--font-pixel); cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--pink); }
.field { display: grid; gap: 6px; font: 600 16px/1 var(--font-pixel); }
.field input { font: 600 17px/1 var(--font-body); padding: 10px; border: 3px solid var(--ink); background: #fff; color: var(--ink); }
.row-end { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.backup { display: grid; gap: 10px; border: 3px dashed #e8d9ce; padding: 12px; }
.backup summary { font: 600 16px/1.3 var(--font-pixel); cursor: pointer; }
.backup[open] { gap: 12px; }
.widget-link { color: var(--ink); text-decoration: none; gap: 4px; }
.widget-link:hover .sec-title { color: #c2335f; }
.field textarea { font: 500 13px/1.4 ui-monospace, monospace; padding: 8px; border: 3px solid var(--ink); background: #fff; color: var(--ink); resize: vertical; }

/* ---------- dar ekran ---------- */
/* ---------- kapı (şifreyle giriş) ---------- */
.kapi::backdrop { background: linear-gradient(180deg, rgba(201, 184, 255, .96), rgba(247, 198, 224, .96)); }
.kapi-ic { text-align: left; }
.kapi-yumak { width: 132px; height: 132px; justify-self: center; }
.kapi h2 { margin: 0 0 6px; }
.kapi-satir { display: flex; gap: 6px; align-items: center; }
.kapi-satir input { flex: 1; min-width: 0; }
.kapi input[type="password"], .kapi input[type="text"] { font: 600 18px/1.2 var(--font-body); padding: 10px 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); width: 100%; }
.kapi-oneri { justify-content: flex-start; flex-wrap: wrap; }
.kapi-mesaj { min-height: 1.4em; margin: 0; font-weight: 700; }
.kapi-mesaj.hata { color: #c2335f; } .kapi-mesaj.ok { color: #1f8a52; }
.kapi-eski summary { font: 600 14px/1.3 var(--font-pixel); cursor: pointer; }
.kapi-eski input { margin-top: 6px; }
.kapi-mesaj:empty { display: none; }
@media (max-width: 520px) {
  .kapi-ic > .row-end:last-child { flex-direction: column-reverse; align-items: stretch; }
  .kapi-ic > .row-end:last-child .pbtn { width: 100%; justify-content: center; }
}

/* ---------- tur özeti (tur sürerken) ---------- */
.ozet h2 { margin: 0; }
.ozet h2:focus { outline: none; }
.oz-bas { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.oz-bas p { margin: 0 0 4px; }
.oz-yumak { width: 104px; height: 104px; flex: none; }
.oz-aylar { display: grid; grid-template-columns: repeat(8, minmax(0, 34px)); justify-content: space-between; gap: 4px; margin: 6px 0; }
.oz-ay { display: grid; justify-items: center; gap: 2px; font: 700 12px/1 var(--font-body); }
.oz-ay canvas { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; }
.oz-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oz-kutu { border: 3px solid var(--ink); background: #fff; padding: 10px; display: grid; gap: 4px; }
.oz-kutu b { font: 800 24px/1 var(--font-body); }
.oz-kutu span { font-size: 13px; color: var(--ink-soft); line-height: 1.25; }
.oz-alt { font: 600 18px/1.2 var(--font-pixel); margin: 6px 0 0; }
.oz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.oz-liste li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px dashed #e8d9ce; padding-bottom: 4px; font-size: 15px; }
.oz-liste em { font-style: normal; color: #1f8a52; }
.oz-yorum { margin: 0; background: var(--lilac); border: 2px solid var(--ink); padding: 10px 12px; }
.oz-not { margin: 0; font-size: 14px; }
@media (max-width: 520px) { .oz-izgara { grid-template-columns: 1fr 1fr; } }
.ar-ipucu { margin: 0; font-size: 14px; }

/* ---------- hikâye (Ay nasıl geçti?) ---------- */
body.hk-acik { overflow: hidden; }
.hikaye { position: fixed; inset: 0; z-index: 1000; background: #1b1330; display: grid; place-items: center; }
.hk-kutu { position: relative; height: min(100dvh, calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; max-width: 100vw; }
.hk-tuval { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hk-kapat { position: absolute; top: calc(1.875% + 14px); right: 10px; width: 40px; height: 40px; font: 700 20px/1 var(--font-pixel); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.hk-alt { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); display: grid; gap: 10px; background: linear-gradient(180deg, rgba(255, 210, 173, 0), rgba(255, 210, 173, .9) 18%); }
.hk-soru { margin: 0; font: 700 18px/1.2 var(--font-pixel); text-align: center; }
.hk-secenek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hk-secenek .pbtn { display: grid; gap: 2px; justify-items: center; padding: 8px 4px; }
.hk-secenek .pbtn span { font: 500 12px/1.1 var(--font-body); }
.hk-indir { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hk-mesaj { margin: 0; min-height: 1.2em; text-align: center; font-weight: 700; font-size: 14px; }
.hk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- arşiv sekmesi ---------- */
.arsiv { display: grid; gap: 22px; margin-top: 18px; }
.ar-bas { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.ar-bas h2 { margin: 0 0 6px; }
.ar-yumak { width: 120px; height: 120px; flex: none; }
.ar-kart { display: grid; gap: 10px; }
.ar-kart h3 { margin: 0; font: 800 21px/1.25 var(--font-body); }
.ar-kart .eyebrow { margin: 0; }
.ar-hazir { background: var(--butter); }
.ar-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ar-yuzde { font: 800 34px/1 var(--font-body); color: var(--pink); text-shadow: 2px 2px 0 var(--ink); }
.ar-aylar { display: grid; grid-template-columns: repeat(8, minmax(0, 34px)); gap: 6px; }
.ar-aylar canvas { width: 100%; height: auto; aspect-ratio: 1; }
.ar-sayi { margin: 0; color: var(--ink-soft); }
.ar-sayi b { color: var(--ink); }
.ar-dugme { justify-content: flex-start; flex-wrap: wrap; }
.ar-baslik { margin: 6px 0 -6px; font: 700 24px/1.2 var(--font-pixel); }
.ar-bos { text-align: center; }
@media (max-width: 520px) { .ar-yumak { width: 92px; height: 92px; } }

/* ---------- sekmeler ---------- */
[hidden] { display: none !important; } /* gizli sekme, display kuralları olsa da görünmesin */
.tabs { display: flex; gap: 10px; padding-bottom: 4px; }
.tab { font: 600 17px/1 var(--font-pixel); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 9px 14px 9px 10px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tab canvas { width: 26px; height: 26px; }
.tab.on { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.tab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (max-width: 520px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tab { justify-content: center; padding: 8px 4px; font-size: 15px; gap: 5px; }
  .tab canvas { width: 22px; height: 22px; }
}

/* ---------- Yumak'ın Mutfağı ---------- */
.mutfak { display: grid; gap: 22px; margin-top: 18px; }
.m-bas-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.m-bas h1 { margin: 0 0 10px; }
.m-tarih { display: flex; gap: 6px; align-items: center; }
.m-tarih-ad { min-width: 190px; }
.m-gun { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.m-gun-ipucu { color: var(--ink-soft); font-size: 16px; }
.m-ogunler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.m-ogun { padding: 18px; display: grid; gap: 12px; }
.m-ogun-bas { display: flex; align-items: center; gap: 10px; }
.m-ogun-bas h2 { font-size: 24px; margin: 0; }
.m-ogun-bas canvas { width: 30px; height: auto; }
.m-saat { margin-left: auto; font: 500 13px/1 var(--font-pixel); color: var(--ink-soft); }
.m-ipucu { margin: 0; font-size: 14px; background: var(--peach); border: 2px dashed var(--ink); padding: 6px 8px; }
.m-secenekler { display: grid; gap: 12px; }
.m-sec { border: 3px solid var(--ink); background: #fff; }
.m-sec.on { background: #fff4f8; box-shadow: 4px 4px 0 var(--pink); }
.m-sec.kucuk { opacity: .78; }
.m-sec.kucuk .m-sec-bas { border-bottom: 0; }
.m-sec-bas { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "h a d" "h t t"; gap: 2px 10px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 2px dashed #e8d9ce; padding: 10px 12px; cursor: pointer; color: var(--ink); }
.m-harf { grid-area: h; font: 700 22px/1 var(--font-pixel); width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--lilac); }
.m-sec.on .m-harf { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.m-sec-ad { grid-area: a; font: 600 18px/1.15 var(--font-pixel); }
.m-dk { grid-area: d; font: 500 13px/1 var(--font-pixel); color: var(--ink-soft); }
.m-tik { grid-area: t; font: 500 13px/1.2 var(--font-pixel); color: #c2335f; }
.m-kalemler { list-style: none; margin: 0; padding: 8px 12px 10px; display: grid; gap: 6px; }
.m-kalem { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.m-kalem-ad { font-size: 16px; line-height: 1.35; }
.m-degis { flex: none; font: 500 12px/1 var(--font-pixel); color: var(--ink); background: var(--mint); border: 2px solid var(--ink); padding: 4px 6px; cursor: pointer; }
.m-degis.on { background: var(--butter); }
.m-altlar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; padding: 8px; background: var(--paper-2); border: 2px dashed var(--ink); }
.m-alt { font: 500 14px/1.2 var(--font-body); text-align: left; color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 5px 8px; cursor: pointer; }
.m-alt:hover { background: var(--mint); }
.m-not { margin: 0; padding: 0 12px 10px; font-size: 14px; color: var(--ink-soft); }
/* protein çipi: kalori gizli, dokununca (ya da fareyle üstüne gelince) görünür */
.m-sec-besin { padding: 8px 12px 0; }
.m-besin { position: relative; font: 800 13px/1 var(--font-body); color: #1f6b47; background: var(--mint); border: 2px solid var(--ink); padding: 5px 8px; cursor: pointer; }
.m-besin.acik { background: #fff0a6; color: var(--ink); }
@media (hover: hover) {
  .m-besin:not(.acik):hover::after { content: attr(data-ipucu); position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; white-space: nowrap; font: 700 12px/1 var(--font-body); color: var(--ink); background: #fff0a6; border: 2px solid var(--ink); padding: 4px 6px; }
}
.m-neden { margin: 0 12px 10px; padding: 8px 10px; font-size: 14px; line-height: 1.4; background: var(--paper-2); border-left: 4px solid var(--pink); }
.m-neden b { font: 600 13px/1 var(--font-pixel); margin-right: 4px; }
.m-alt-p { font: 800 12px/1 var(--font-body); color: #1f6b47; margin-left: 4px; }
.m-gr { font-size: .86em; color: var(--ink-soft); white-space: normal; }
.m-k-not { margin: -4px 0 6px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.m-sec-besin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.m-denge-rozet { font: 700 12px/1.2 var(--font-body); color: #fff; background: #3a8fd6; border: 2px solid var(--ink); padding: 4px 7px; }
.m-denge { display: grid; gap: 12px; }
.m-denge-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-denge-bas h2 { margin: 0; }
.m-denge-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-denge-satir { display: grid; grid-template-columns: 110px auto 1fr; grid-template-areas: "a n s" "e e e"; gap: 2px 10px; align-items: center; border-bottom: 2px dashed #e8d9ce; padding-bottom: 8px; }
.m-denge-ad { grid-area: a; font: 600 16px/1.1 var(--font-pixel); }
.m-denge-nokta { grid-area: n; display: flex; gap: 4px; }
.m-denge-nokta i { width: 14px; height: 14px; border: 2px solid var(--ink); background: #fff; }
.m-denge-nokta i.dolu { background: #5cc8a8; } .m-denge-nokta i.fazla { background: #ff8f6d; }
.m-denge-say { grid-area: s; font: 800 14px/1.2 var(--font-body); }
.m-denge-satir.tamam .m-denge-say { color: #1f8a52; } .m-denge-satir.fazla .m-denge-say { color: #c2335f; }
.m-denge-satir.bilgi { grid-template-areas: "a s s" "e e e"; }
.m-denge-neden { grid-area: e; font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.m-kaynak { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
.m-liste-bos { margin: 0; padding: 12px; background: var(--paper-2); border: 2px dashed var(--ink); font-size: 15px; }
.m-liste-kapsam { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.m-liste-uyari { list-style: none; margin: 0 0 10px; padding: 8px 10px; display: grid; gap: 4px; background: #fff0a6; border: 2px solid var(--ink); font-size: 14px; line-height: 1.4; }
.m-gun-link { font: 700 14px/1.2 var(--font-body); color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-style: dotted; cursor: pointer; }
.m-pmos { display: grid; gap: 8px; }
.m-pmos .eyebrow, .m-pmos h2, .m-pmos p { margin: 0; }
.m-pmos summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "e o" "b o"; gap: 4px 10px; align-items: center; }
.m-pmos summary::-webkit-details-marker { display: none; }
.m-pmos summary .eyebrow { grid-area: e; }
.m-pmos-baslik { grid-area: b; font: 700 22px/1.2 var(--font-pixel); }
.m-pmos-ok { grid-area: o; font: 700 16px/1 var(--font-body); border: 2px solid var(--ink); background: var(--mint); padding: 6px 8px; transition: transform .2s; }
.m-pmos[open] .m-pmos-ok { transform: rotate(180deg); }
.m-pmos[open] summary { margin-bottom: 8px; }
.m-denge-dur { margin: 0; padding: 8px 12px; font-size: 14px; line-height: 1.4; background: #ffe0e8; border-top: 2px dashed var(--ink); }
.m-liste-denge { margin: 0 0 8px; padding: 8px 10px; font-size: 14px; line-height: 1.45; background: #ffe0e8; border: 2px solid var(--ink); }
.m-pmos .lede-kucuk { font-size: 16px; line-height: 1.5; }
.m-pmos-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.m-ek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; background: #fff8d6; border: 2px dashed var(--ink); }
.m-ek-bas { font: 600 13px/1.2 var(--font-pixel); color: var(--ink-soft); }
.m-gece-p { font: 700 12px/1 var(--font-body); color: #1f6b47; }
.m-besin-gun { margin-top: 14px; display: grid; gap: 6px; }
.m-besin-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.m-besin-baslik { font: 600 16px/1 var(--font-pixel); }
.m-cubuk { height: 14px; border: 3px solid var(--ink); background: #fff; }
.m-cubuk span { display: block; height: 100%; background: linear-gradient(90deg, #5cc8a8, #3fae86); transition: width .4s; }
.m-besin-not { margin: 0; font-size: 14px; color: var(--ink-soft); }
.m-gece { font-size: 15px; border-top: 2px dashed #e8d9ce; padding-top: 10px; }
.m-gece-bas { font: 600 14px/1 var(--font-pixel); display: block; margin-bottom: 4px; color: var(--ink-soft); }
.m-baska { justify-self: start; font: 500 14px/1 var(--font-pixel); color: var(--ink); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; }
.m-alt-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.m-kontrol, .m-liste { display: grid; gap: 12px; }
.m-kontrol h2, .m-liste h2 { margin: 0; }
.m-k-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-k-ad { font: 600 16px/1 var(--font-pixel); width: 64px; }
.m-k-say { font: 500 13px/1 var(--font-pixel); color: var(--ink-soft); }
.m-ikonlar { display: flex; gap: 4px; flex-wrap: wrap; }
.m-ikon-btn { background: none; border: 2px solid transparent; padding: 2px; cursor: pointer; line-height: 0; }
.m-ikon-btn canvas { filter: grayscale(1); opacity: .35; }
.m-ikon-btn.dolu canvas { filter: none; opacity: 1; }
.m-ikon-btn:focus-visible { border-color: var(--pink); }
.m-togs { display: flex; gap: 6px; flex-wrap: wrap; }
.m-tog { font: 500 14px/1.1 var(--font-pixel); color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 7px 9px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.m-tog.on { background: var(--mint); box-shadow: 2px 2px 0 var(--ink); }
.m-tog.on::after { content: "✓"; }
.m-k-iki { gap: 8px; }
.m-yorum { margin: 0; background: var(--lilac); border: 2px solid var(--ink); padding: 8px 10px; font-size: 15px; }
.m-liste-bas { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.m-liste-bas p { margin: 4px 0 0; font-size: 14px; }
.m-reyonlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.m-reyon h3 { font: 600 15px/1.2 var(--font-pixel); margin: 6px 0 4px; color: #c2335f; }
.m-reyon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.m-liste-satir { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; padding: 2px 0; }
.m-liste-satir input { width: 18px; height: 18px; accent-color: #2fb56d; flex: none; }
.m-liste-satir.tikli span { text-decoration: line-through; opacity: .5; }
.m-miktar { margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.m-hep { font-size: 14px; margin: 0; }
.m-notlar { display: grid; gap: 14px; }
.m-notlar h2 { margin: 0; }
.m-ilkeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.m-ilke { border: 2px solid var(--ink); background: #fff; padding: 10px 12px; }
.m-ilke b { font: 600 16px/1.2 var(--font-pixel); display: block; margin-bottom: 4px; }
.m-ilke p { margin: 0; font-size: 15px; line-height: 1.4; }
.m-alt-baslik { font: 600 18px/1.2 var(--font-pixel); margin: 6px 0 0; }
.m-mitler { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.m-mit { text-align: left; font: 500 15px/1.35 var(--font-body); color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); padding: 10px 12px; cursor: pointer; display: grid; gap: 6px; align-content: start; }
.m-mit.acik { background: #fff; }
.m-mit-s { font-weight: 700; }
.m-mit-c { font: 700 13px/1 var(--font-pixel); justify-self: start; padding: 4px 7px; border: 2px solid var(--ink); }
.m-mit-c.g { background: var(--mint); } .m-mit-c.m { background: var(--pink-soft); } .m-mit-c.k { background: var(--butter); }
.m-mit-ipucu { font: 500 12px/1 var(--font-pixel); color: var(--ink-soft); }
.m-takviye li { margin: 6px 0; }
body.izle .m-sec-bas, body.izle .m-alt, body.izle .m-baska, body.izle .m-ikon-btn, body.izle .m-tog, body.izle .m-liste-satir, body.izle [data-temizle] { pointer-events: none; }
@media (max-width: 980px) { .m-ogunler { grid-template-columns: 1fr 1fr; } .m-ogun[data-ogun="aksam"] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .m-ogunler, .m-alt-izgara { grid-template-columns: 1fr; } .m-ogun[data-ogun="aksam"] { grid-column: auto; } .m-reyonlar { grid-template-columns: 1fr; } .m-tarih-ad { min-width: 0; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .ex, .walk-box { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .card { padding: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .week-label { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
  .week-label canvas { width: 24px; height: 24px; }
  .day { min-height: 74px; padding: 4px 3px; border-width: 2px; }
  .day .d-top { font-size: 11px; flex-direction: column; gap: 1px; }
  .day canvas.d-icon { width: 24px; height: 24px; }
  .day .d-label { font-size: 10.5px; }
  .day .stamp { width: 38px !important; }
  .why-grid { grid-template-columns: 1fr; }
  .ex, .walk-box { grid-template-columns: 1fr; }
  .ex.compact { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .ex.compact h3 { font-size: 19px; }
  .ex.compact ol { font-size: 15px; }
  .stage { max-width: 240px; }
  .yumak { width: 132px; height: 132px; }
  #moon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .day, .bubble { transition: none; }
}

/* ---------- yeni sürüm bandı ---------- */
.yeni-surum { position: fixed; left: 50%; bottom: calc(var(--home-h) + 14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 900; display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); font: 600 15px/1.2 var(--font-body); max-width: calc(100vw - 32px); }
.m-gece-tog { margin-top: 6px; font-size: 13px; }