/* Göz Kararı — prototip. Kurallar Bölüm 2'den: dokunma alanı ≥ 48 px (ana düğme 192 px),
   en küçük yazı 22 px, bütün yazılarda kontrast ≥ 7:1, gizli hareket yok, şifre yok.
   Yazılar rem: telefonun yazı büyütme ayarı uygulanır. Büyük yazılar %200'de doğrusal büyümez (Android 14 gibi). */
@font-face { font-family: "Jakarta"; src: url(fonts/PlusJakartaSans-VF.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --bg: #FFF7EA; --card: #FFFFFF; --ink: #13204A; --ink2: #26335C; --line: #E9DCC4;
  --or: #E8590C; --ok: #1F7A4D; --press: #0B1530;
  --f-title: min(2.375rem, 14.4vw);   /* 38 px → %200'de en çok 56 px */
  --f-head:  min(2.125rem, 13.8vw);   /* 34 → 54 */
  --f-btn:   min(1.875rem, 13.3vw);   /* 30 → 52 */
  --f-body:  min(1.625rem, 12.8vw);   /* 26 → 50 */
  --f-small: min(1.375rem, 11.3vw);   /* 22 → 44 */
  --btn-h: max(84px, 2.8em);
  color-scheme: light;
}
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }  /* iPhone: Dinamik Yazı */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: "Jakarta", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
       -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; hyphens: auto; }
[hidden] { display: none !important; }

.screen { min-height: 100dvh; display: flex; flex-direction: column; gap: min(18px, 2.2vh);
          padding: max(18px, env(safe-area-inset-top)) 22px 0; }
.spacer { flex: 1; }
.center { text-align: center; }

.brand { display: flex; align-items: center; gap: 10px; font: 800 var(--f-small)/1.15 "Jakarta", sans-serif; }
.spoon { width: 30px; height: 30px; border-radius: 9px; background: var(--or) url(icons/spoon.svg) center/18px no-repeat; flex: none; }
.title { font: 800 var(--f-title)/1.1 "Jakarta", sans-serif; letter-spacing: -.01em; }
.head  { font: 800 var(--f-head)/1.12 "Jakarta", sans-serif; letter-spacing: -.01em; }
.body  { font: 600 var(--f-body)/1.25 "Jakarta", sans-serif; }
.small { font: 600 var(--f-small)/1.25 "Jakarta", sans-serif; color: var(--ink2); }
.label { font: 800 var(--f-small)/1.2 "Jakarta", sans-serif; margin-top: 8px; }

/* Ana düğme: 192 px'lik daire + altındaki yazı, ikisi birlikte tek dokunma alanı; ıskalanamaz */
.tell { font: inherit; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 6vh 0 2vh;
        border: 0; background: none; color: var(--ink); cursor: pointer; }
.tell:active .big { transform: scale(.97); }
.big { width: min(192px, 62vw); aspect-ratio: 1; border-radius: 50%; background: var(--or); display: grid; place-items: center;
       box-shadow: 0 0 0 14px rgba(232, 89, 12, .14), 0 18px 30px rgba(150, 60, 10, .25); }
.mic { display: block; width: 48%; aspect-ratio: 1; background: url(icons/mic.svg) center/contain no-repeat; }
.tell-caption { font: 800 var(--f-head)/1.12 "Jakarta", sans-serif; text-align: center; }
.small-big { align-self: center; width: 116px; margin-top: 6vh; box-shadow: 0 0 0 10px rgba(232, 89, 12, .14); }

/* Düğmeler: en az 84 px yüksek, yazı büyüdükçe büyür; asıl düğme hep ekranın altında görünür */
.btn { min-height: var(--btn-h); width: 100%; padding: 10px 24px; border: 0; border-radius: 999px;
       background: var(--ink); color: var(--bg); font: 800 var(--f-btn)/1.1 "Jakarta", sans-serif; cursor: pointer; }
.btn:active { background: var(--press); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
/* Asıl düğme hep ekranın altında: yazı büyüyüp sayfa uzasa da kaybolmaz, üstteki yazıyı örtmez */
.actions { position: sticky; bottom: 0; margin: auto -22px 0; padding: 18px 22px max(22px, env(safe-area-inset-bottom));
           background: linear-gradient(to bottom, rgba(255, 247, 234, 0), var(--bg) 18px); }
:focus-visible { outline: 4px solid var(--or); outline-offset: 4px; }
h1:focus { outline: none; }  /* başlığa odak yalnızca ekran okuyucu için */

/* Önceki tarifler */
.recipes { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; }
.recipe { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; text-align: left;
          border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); cursor: pointer; }
.recipe .pl { width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--ink) url(icons/play.svg) 55% center/20px no-repeat; }
.recipe b { display: block; font: 700 var(--f-body)/1.2 "Jakarta", sans-serif; }
.recipe small { display: block; font: 600 var(--f-small)/1.25 "Jakarta", sans-serif; color: var(--ink2); }
/* Çalan tarif görünür olsun (Bölüm 6): turuncu çerçeve + durdur simgesi; hareket yok */
.recipe.playing { box-shadow: inset 0 0 0 4px var(--or); }
.recipe.playing .pl { background: var(--or) url(icons/stop.svg) center/20px no-repeat; }
.recipe.playing small { color: var(--ink); font-weight: 800; }

/* Kayıt */
#waves { width: 100%; height: 140px; margin-top: 4vh; }
.saved { display: flex; align-items: center; gap: 10px; }
.okc { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--ok) url(icons/check.svg) center/62% no-repeat; }
.okc.huge { width: min(132px, 15vh); height: auto; aspect-ratio: 1; align-self: center; margin-top: 5vh; }

/* Tarif kartı */
.ainote { display: flex; gap: 10px; align-items: flex-start; }
.ings { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ing { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 16px;
       border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); }
/* Yazı büyüyünce gram alt satıra iner; kelimeler harf harf bölünmez */
.ing b { flex: 1 1 9ch; min-width: 0; font: 800 var(--f-body)/1.2 "Jakarta", sans-serif; overflow-wrap: normal; hyphens: none; }
.ing .g { flex: 0 0 auto; font: 700 var(--f-small)/1.2 "Jakarta", sans-serif; color: var(--ink2); white-space: nowrap; }
.ing .g:empty { display: none; }
.ing .chip { flex-basis: 100%; max-width: max-content; font: 800 var(--f-small)/1.2 "Jakarta", sans-serif; font-style: normal;
             padding: 4px 12px; border-radius: 999px; }
.chip.eye { background: #E3F2EA; color: #145236; }
.chip.takes { background: #FFE8D6; color: #8A3204; }
.chip.ask { background: #FDE4E4; color: #8B1A1A; }
.ing.ask { box-shadow: inset 0 0 0 3px #C0392B; }
.oven { font-weight: 800; }
.glass { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); scroll-margin-top: 16px; }
.glass-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.glass-row span { white-space: nowrap; }
#card.glass-open .actions { position: static; }   /* bardak kutusu açıkken düğmeler sayfanın sonuna */
.glass-row input { width: 7ch; min-height: 64px; padding: 8px 14px; border-radius: 16px; border: 3px solid var(--ink);
                   font: 800 var(--f-btn)/1 "Jakarta", sans-serif; color: var(--ink); background: #fff; }
.actions.two { display: flex; flex-wrap: wrap; gap: 12px; }
.actions.two .btn { flex: 1 1 7ch; overflow-wrap: normal; hyphens: none; }   /* yazı büyüyünce iki düğme alt alta */