/* Tasarım token'ları — tanım: SITE_YAPISI.md §4, gerekçe: DECISIONS.md #16, #17
   ---------------------------------------------------------------------------
   SABİT RENK YAZMA. Bu dosyada ve JS'te #RRGGBB / rgba() doğrudan geçmez; her
   renk aşağıdaki token'lardan gelir. Koyu mod bu sayede tek blokluk iş kalıyor.
   Tek istisna: token'ların KENDİ tanımları ve saf beyaz/siyah üzerinden türetilen
   saydamlık katmanları (--tint-*, --shade-*). */

/* ------------------------------------------------------------------- fontlar */
/* Alt kümelenmiş, ekseni sabitlenmiş değişken fontlar (DECISIONS.md #16).
   İkisi de tek dosyada tüm ağırlıkları taşır — ayrı ayrı ağırlık dosyası yok. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk.woff2') format('woff2-variations');
  font-weight: 500 700;   /* Space Grotesk 700'de duruyor; 800/900 yok */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Var';
  src: url('fonts/inter.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Space Grotesk', 'Inter Var', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter Var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;

  /* zemin ve cam */
  --bg: #F1F0ED;
  /* Camın bulanıklaştıracağı ŞEY bunlar. Eskiden çok soluktular (.20/.14) ve
     zeminle kartın rengi neredeyse aynı çıkıyordu — cam görünmüyordu. */
  --blob-1: rgba(var(--accent-rgb),.30);   /* turuncu  */
  --blob-2: rgba(255,180,90,.24);          /* kehribar */
  --blob-3: rgba(120,170,255,.20);         /* soğuk karşı ton — bulanınca renk oynaması verir */

  --tint: 255,255,255;          /* camın aydınlatıcı rengi  */
  --shade: 18,16,14;            /* kenar ve gölgenin rengi  */

  /* Cam yüzeyler. Saydamlık ÖLÇÜLEREK seçildi: %50'de en düşük kontrast 4,61:1
     (AA üstü), %40'ta 4,43'e düşüp eşiğin altına iniyor. Bkz. DECISIONS.md #26. */
  --glass-top:    rgba(var(--tint),.62);   /* kartın üst ucu */
  --glass-bottom: rgba(var(--tint),.50);   /* alt ucu — ölçülen alt sınır */
  --surface:   rgba(var(--tint),.56);      /* düz yüzey karşılığı */
  --surface-2: rgba(var(--tint),.72);
  --surface-3: rgba(var(--tint),.94);
  --surface-sunken: rgba(var(--shade),.045);

  --border:        rgba(var(--shade),.10);
  --border-strong: rgba(var(--shade),.22);
  --glass-edge:      rgba(var(--tint),.65);  /* camın kendi ışıklı kenarı */
  --glass-highlight: rgba(var(--tint),.92);  /* üst spekülar çizgi */
  --glass-shade:     rgba(var(--shade),.05); /* alt iç gölge */

  /* metin */
  --text:  #12100E;
  --muted: #5A544D;
  --faint: #6E675F;

  /* vurgu — turuncu değiştirilmedi, kullanıcı beğendi.
     Her durum renginin bir de bileşen (-rgb) hâli var; soft/line/gölge türevleri
     ondan üretiliyor ki koyu modda tek satır değişsin. */
  --accent-rgb: 255,122,26;
  --accent: rgb(var(--accent-rgb));  /* YALNIZCA dolgu, metin rengi olarak kullanılmaz */
  --accent-2: #FFA24A;
  --accent-ink: #2B1403;             /* turuncu dolgunun üstündeki metin */
  --accent-text: #9C4200;            /* metin/ikon olarak turuncu */
  --accent-soft: rgba(var(--accent-rgb),.12);
  --accent-line: rgba(var(--accent-rgb),.34);

  --danger-rgb: 190,31,22;
  --danger: rgb(var(--danger-rgb));
  --danger-soft: rgba(var(--danger-rgb),.09);
  --danger-line: rgba(var(--danger-rgb),.30);

  --ok-rgb: 6,96,62;
  --ok: rgb(var(--ok-rgb));
  --ok-2: #0B8A5A;
  --ok-soft: rgba(var(--ok-rgb),.10);
  --ok-line: rgba(var(--ok-rgb),.30);

  --warn-rgb: 122,70,0;
  --warn: rgb(var(--warn-rgb));
  --warn-soft: rgba(var(--warn-rgb),.10);
  --warn-line: rgba(var(--warn-rgb),.30);

  --on-fill: rgb(var(--tint));       /* dolu renkli zeminin üstündeki metin */

  /* ölçü */
  --r-card: 16px;
  --r-btn: 12px;
  --r-dialog: 22px;
  --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --tabs-h: 74px;
  --topbar-h: 116px;            /* app.js gerçek yüksekliği ölçüp üzerine yazar */

  /* malzeme — gölge az ve yakın, derinlik kenar ve saydamlıkla kuruluyor */
  --sheen: linear-gradient(168deg, var(--glass-top), var(--glass-bottom));
  /* Cam kenarı: üstte spekülar çizgi, altta ince iç gölge, dışta hafif halka.
     Kalın kenarlık yerine bunlar kullanılıyor — kenarlık camı opaklaştırıyor. */
  --inset: inset 0 1px 0 var(--glass-highlight),
           inset 0 -1px 0 var(--glass-shade),
           inset 0 0 0 1px var(--glass-edge);
  --sh-1: 0 1px 2px rgba(var(--shade),.04), 0 8px 24px rgba(var(--shade),.07);
  --sh-2: 0 2px 6px rgba(var(--shade),.06), 0 18px 48px rgba(var(--shade),.12);
  --sh-accent: 0 4px 16px rgba(var(--accent-rgb),.36);
  --blur: blur(24px) saturate(185%);
  --blur-soft: blur(14px) saturate(160%);

  /* hareket */
  --ease: cubic-bezier(.22,.7,.3,1);
  --ease-out: cubic-bezier(.3,.9,.4,1);
  --t-micro: .12s;
  --t-enter: .26s;
  --t-measure: .32s;
}

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

/* Satır içi SVG'nin doğal boyutu yok; kap onu daraltınca kayboluyordu.
   Taban ölçü burada verilir, bileşenler kendi kuralıyla üzerine yazar. */
svg { width: 18px; height: 18px; flex: none; }

html { background: var(--bg); }
html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Ambiyans — camın bulanıklaştıracağı ŞEY.
   İki sabit katman, her biri yavaşça sürükleniyor. Hareket `transform` ile
   yapılıyor (kompozitörde çalışır, yeniden yerleşim tetiklemez); `inset: -25%`
   ile katmanlar taşırıldı ki sürüklenirken kenar açılmasın.
   Bu katman olmadan cam görünmüyordu: beyaz kartın arkasında bakılacak bir şey
   yoktu (DECISIONS.md #26). */
/* body'nin KENDİ arka planı olmamalı: negatif z-index'li sözde öğeler onun
   arkasında kalıyor ve bloblar hiç görünmüyordu. Taban renk html'de duruyor. */
body { background: transparent; }
body::before, body::after {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  /* will-change YOK: iki tam ekran katmanı kalıcı GPU dokusunda tutmak, üstlerinde
     backdrop-filter'lı yüzeyler varken telefonda bellek baskısı yaratıyor.
     Sürüklenme zaten çok yavaş, kalıcı katmana değmez. */
  contain: strict;
}
body::before {
  background:
    radial-gradient(48vmax 42vmax at 18% 12%, var(--blob-1), transparent 62%),
    radial-gradient(52vmax 46vmax at 88% 86%, var(--blob-3), transparent 60%);
  animation: drift-a 90s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(46vmax 40vmax at 78% 22%, var(--blob-2), transparent 62%),
    radial-gradient(38vmax 34vmax at 26% 82%, var(--blob-1), transparent 58%);
  animation: drift-b 120s ease-in-out infinite alternate;
}
/* Ölçek değişimi kaldırıldı: `scale` her karede bulanıklığın yeniden
   hesaplanmasını gerektiriyor, saf öteleme çok daha ucuz. */
@keyframes drift-a {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(3%, -2%, 0); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-3%, 3%, 0); }
}

/* Başlıklar Space Grotesk ile. Geniş kesimden vazgeçildiği için harf aralığı
   yeniden negatife çekildi — geometrik grotesk sıkışınca daha iyi duruyor. */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.3px;
}
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.8px; line-height: 1.12; }
h2 { font-size: 21px; letter-spacing: -.5px; }
h3 { font-size: 16.5px; letter-spacing: -.3px; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent-text); }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Mikro etiket — büyük harf, geniş kesim, pozitif harf aralığı */
.eyebrow, .field > span, .stat .l, .set-head span, .badge, .sub-h {
  font-family: var(--font-display);
  text-transform: uppercase; font-weight: 700; letter-spacing: .8px;
}

/* ------------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(var(--tint),.72), rgba(var(--tint),.46));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 -1px 0 var(--glass-shade);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-flex; align-items: center;
  filter: drop-shadow(0 3px 8px rgba(var(--accent-rgb),.34));
}
/* Genel `svg { width:18px }` kuralı marka işaretini de eziyordu; marka
   kendi boyutunu öznitelikten alır. */
.brand-mark svg.mark, .auth-mark svg.mark { width: auto !important; height: auto !important; }
.brand-text {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted);
  text-transform: uppercase;
}
.brand-text b { font-weight: 700; color: var(--accent-text); }
.topbar-right { display: flex; align-items: center; gap: var(--s2); }

.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-btn);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--inset);
  color: var(--text); cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}
.icon-btn svg { width: 21px; height: 21px; display: block; }
.icon-btn:hover { border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.93); background-color: var(--surface-3); }

/* -------------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 5px; }
.tabs-top { max-width: 1240px; margin: 0 auto; padding: 0 var(--s4) var(--s3); }
/* Alt çubukta dört sekme 390px'i paylaşıyor ve "HAREKETLER" sığmıyordu.
   Alt sekmeler gövde fontunu kullanır — görüntü fontundan daha dar. */
.tabs-bottom .tab { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .2px; }
.tabs-bottom {
  position: fixed; left: var(--s3); right: var(--s3); z-index: 40;
  bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(var(--tint),.74), rgba(var(--tint),.58));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; border-radius: 20px;
  box-shadow: var(--sh-2), var(--inset);
  padding: 5px;
}
.tab {
  flex: 1; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 1px solid transparent; border-radius: 15px;
  color: var(--muted);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer; padding: 6px 4px; text-decoration: none;
  transition: color var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease-out);
}
.tab .ti { display: block; width: 22px; height: 22px; }
.tab .ti svg { width: 100%; height: 100%; display: block; }
/* Etiket dar ekranda kırpılır ama satır atlamaz — sekme yüksekliği sabit kalsın. */
.tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:active { transform: scale(.95); }
.tab.on {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent-line);
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(var(--tint),.5);
}
.tab.on .ti svg { stroke-width: 2.2; }
.tabs-top .tab {
  flex-direction: row; gap: var(--s2); font-size: 11.5px; min-height: 44px;
  letter-spacing: .7px; border-radius: var(--r-btn);
}
.tabs-top .tab .ti { width: 18px; height: 18px; }
.tabs-top .tab:not(.on) {
  background-color: var(--surface); background-image: var(--sheen);
  border-color: var(--border); box-shadow: var(--inset);
}
.tabs-top .tab:not(.on):hover { border-color: var(--border-strong); color: var(--text); }

@media (max-width: 719px) { .tabs-top { display: none; } }
@media (min-width: 720px) { .tabs-bottom { display: none; } }

/* -------------------------------------------------------------------- view */
.view {
  max-width: 860px; margin: 0 auto;
  padding: var(--s4) var(--s4) calc(var(--tabs-h) + var(--s6));
}
@media (min-width: 720px) { .view { padding-bottom: var(--s6); } }

.page-head { margin-bottom: var(--s4); }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Masaüstü: yapışkan yan kolon + geniş içerik (SITE_YAPISI §4).
   max-height + overflow şart: yan kolon ekrandan uzunsa sticky onu üstte kilitliyor
   ve altı hiç görünmüyordu — "menü aşağı yukarı kayıyor" şikâyeti buydu (#10). */
@media (min-width: 1080px) {
  /* Genişlik 1240px'de sabitti; 1920'de 680px, 2560'ta 1320px boş kalıyordu —
     ekranın yarısından fazlası. Artık ekranla birlikte büyüyor, ama sınırsız
     değil: ana kolon çok genişlerse metin satırları okunmaz uzunluğa çıkıyor. */
  .view { max-width: 1560px; }
  .view-grid {
    display: grid; grid-template-columns: minmax(340px, 400px) 1fr;
    gap: var(--s4); align-items: start;
  }
  /* Yan kolon SABİT durur ve KENDİ İÇİNDE KAYDIRILMAZ. Kaydırma yalnızca sağ
     kolonda olur. Bunun bedeli şudur: yan kolona sığmayan her şey ana kolona
     taşınmak zorunda — İlerleme'deki ölçüm formu ve Kütüphane'deki filtreler
     bu yüzden sağa alındı (DECISIONS.md #28). */
  .view-side {
    position: sticky; top: calc(var(--topbar-h) + var(--s3));
  }
  /* Yan kolon kaydırılmadığı için her piksel önemli: kartlar biraz daha sıkı. */
  .view-side > .card { padding: var(--s3); margin-bottom: var(--s2); }
  .view-side > .card:last-child { margin-bottom: 0; }
  .view-main { min-width: 0; }
  /* Yan kolon dar (~372px). Dört istatistik yan yana konunca her kutu ~79px kalıyor
     ve geniş kesim etiketler ("HEDEFE KALAN") taşıyordu. Yan kolonda 2×2 dizilir. */
  .view-side .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
  /* Çok geniş ekranda biraz daha aç, ama ana kolonu şişirmeden. */
  @media (min-width: 2100px) { .view { max-width: 1800px; } }
  .lib-grid .ex-card { margin-bottom: 0; }
  .chart-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .chart-2 > .card { margin-bottom: 0; }
}
/* .chart-2'nin kendi alt boşluğu yoktu; altındaki kalori kartı yapışık duruyordu (#11) */
.chart-2 { margin-bottom: var(--s3); }

/* ------------------------------------------------------------------- cards */
/* Kart artık GERÇEKTEN cam: arkasını bulanıklaştırıyor.
   DECISIONS.md #8'deki ölçüm (37 kart mobil Safari'de kaydırmayı tutukluyor)
   hâlâ geçerli — ama o ölçüm kütüphanenin `.ex-card`'ları içindi. `.card` bir
   ekranda 3–10 taneden fazla olmuyor. Tekrarlayan öğeler (.ex-card, .food-hit,
   .list-item, .pe-item, .cafe-row) bulanıklık ALMAZ; sınır bilinçli (DECISIONS.md #26). */
.card {
  background-image: var(--sheen);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; box-shadow: var(--inset), var(--sh-1);
  border-radius: var(--r-card); padding: var(--s4); margin-bottom: var(--s3);
  transition: box-shadow var(--t-enter) var(--ease),
              transform var(--t-enter) var(--ease);
}
/* Telefonda bulanıklık yarıçapı pahalı; kısılıyor. Ayrıca ambiyans HAREKETİ
   tamamen durur: arka plan her karede değişince backdrop-filter'lı her yüzey
   yeniden hesaplanıyor. Renk yerinde kaldığı için cam yine görünür — kaybolan
   tek şey sürüklenme. */
@media (max-width: 719px) {
  .card { -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft); }
  body::before, body::after { animation: none; }
}
.card-tight { padding: var(--s3); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}

.note {
  background-color: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 4px var(--r-btn) var(--r-btn) 4px;
  padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  font-size: 13px; color: var(--text);
}
.note.warn { border-left-color: var(--warn); }
.note.danger { border-left-color: var(--danger); }
.note.ok { border-left-color: var(--ok); }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.hint { color: var(--muted); font-size: 12.5px; margin: var(--s2) 0; }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.row.gap-8 { gap: var(--s2); }
.row.gap-12 { gap: var(--s3); }
.grow { flex: 1; }
.w-full { width: 100%; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.stack > * + * { margin-top: var(--s3); }
.sub-h { font-size: 10.5px; color: var(--muted); margin-bottom: 7px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-btn); border: 1px solid var(--border);
  background-color: var(--surface-2); background-image: var(--sheen);
  box-shadow: var(--inset), var(--sh-1);
  color: var(--text);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  transition: transform var(--t-micro) var(--ease-out),
              filter var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { border-color: var(--border-strong); }
.btn:active { transform: scale(.975); filter: brightness(.97); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-accent {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-line);
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(var(--tint),.5);
  font-weight: 700;
}
.btn-ghost { background-color: transparent; background-image: none; box-shadow: none; }
.btn-danger {
  background-color: var(--danger-soft); background-image: none; box-shadow: none;
  color: var(--danger); border-color: var(--danger-line);
}
.btn-ok {
  background-color: var(--ok); background-image: linear-gradient(180deg, var(--ok-2), var(--ok));
  color: var(--on-fill); border-color: var(--ok-line);
  box-shadow: 0 3px 12px var(--ok-soft), inset 0 1px 0 rgba(var(--tint),.3);
  font-weight: 700;
}
.btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: 13px; border-radius: 10px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-chip {
  min-height: 38px; padding: 0 var(--s3); border-radius: var(--r-pill);
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--inset);
  color: var(--text); font-family: var(--font-body);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease);
}
.btn-chip:hover { border-color: var(--border-strong); }
.btn-chip:active { transform: scale(.95); }
.btn-chip.on {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-line); font-weight: 700;
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(var(--tint),.5);
}

/* Simge düğmeler — sil / bilgi / düzenle. Hepsi SVG, tipografik sembol yok. */
.mini-btn {
  width: 36px; height: 36px; flex: none; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); text-decoration: none;
  transition: transform var(--t-micro) var(--ease-out),
              color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}
.mini-btn svg { width: 17px; height: 17px; display: block; }
.mini-btn:active { transform: scale(.92); }
.mini-btn:hover { border-color: var(--border-strong); color: var(--text); }
.mini-btn.danger {
  background-color: var(--danger-soft); border-color: var(--danger-line); color: var(--danger);
}
.mini-btn.accent {
  background-color: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text);
}

/* ------------------------------------------------------------------ inputs */
.field { display: block; margin-bottom: var(--s3); }
.field > span {
  display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 6px;
}
input, select, textarea {
  width: 100%; min-height: 44px; padding: 0 var(--s3);
  background-color: var(--surface-3); background-image: none;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  box-shadow: inset 0 1px 2px rgba(var(--shade),.05);
  color: var(--text); font-family: var(--font-body);
  font-size: 16px; /* iOS otomatik yakınlaştırmasını engeller */
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}
textarea { min-height: 80px; padding: var(--s3); resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(var(--shade),.05);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; background-image: none; cursor: pointer; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--r-pill); font-size: 10.5px; letter-spacing: .6px;
  background-color: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  box-shadow: var(--inset); white-space: nowrap;
}
.badge-accent {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-line);
}
.badge-ok { background-color: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.badge-warn { background-color: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge-danger { background-color: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

/* --------------------------------------------------------------- tarih şeridi */
/* Ham <input type="date"> yerine gezinilebilir şerit (SITE_YAPISI §4, kullanıcı
   isteği: "tarih kısmı çok kara düzen"). Gerçek date input gizli durur, "takvim"
   düğmesi onu açar — böylece uzak bir tarihe atlamak da mümkün kalıyor. */
.datebar { margin-bottom: var(--s3); }
.datebar-head {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
}
.datebar-nav {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-btn); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--inset);
  color: var(--text);
  transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease);
}
.datebar-nav svg { width: 18px; height: 18px; }
.datebar-nav:hover { border-color: var(--border-strong); }
.datebar-nav:active { transform: scale(.9); }
.datebar-now { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.datebar-now .dn-day {
  display: block; font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: -.3px;
}
.datebar-now .dn-date {
  display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.datebar-now .dn-rel {
  display: inline-block; margin-top: 5px; padding: 2px 8px;
  border-radius: var(--r-pill); font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  background-color: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-line);
}

/* Gün şeridi — son 7 gün, dokunmatik kaydırmalı */
.daystrip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.daystrip::-webkit-scrollbar { display: none; }
.daystrip { scrollbar-width: none; }
.daychip {
  /* Sabit genişlikte 7 çip dar yan kolona sığmayıp sağdan kesiliyordu; artık
     kalan alanı paylaşıyorlar, taşarsa yine kaydırılabilir. */
  flex: 1 1 0; min-width: 40px; scroll-snap-align: center;
  padding: 7px 4px 8px; border-radius: var(--r-btn); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--inset);
  color: var(--muted); font-family: var(--font-body);
  transition: transform var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.daychip .dc-w {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
}
.daychip .dc-n {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.2px;
}
.daychip .dc-dot {
  width: 4px; height: 4px; border-radius: var(--r-pill);
  background-color: var(--accent); margin-top: 1px;
}
.daychip:active { transform: scale(.94); }
.daychip:hover { border-color: var(--border-strong); }
.daychip.on {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent-line); color: var(--accent-ink);
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(var(--tint),.5);
}
.daychip.on .dc-n { color: var(--accent-ink); }
.daychip.on .dc-dot { background-color: var(--accent-ink); }
.daychip.today:not(.on) { border-color: var(--accent-line); }
.datebar input[type="date"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- antrenman: set satırı */
.ex-block {
  border: 1px solid var(--border); border-radius: var(--r-card);
  margin-bottom: var(--s3); overflow: hidden;
  box-shadow: var(--sh-1), var(--inset);
  background-color: var(--surface-2);
}
.ex-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3);
  background-color: var(--surface); background-image: var(--sheen);
}
.ex-head .ex-name { flex: 1; min-width: 0; }
.ex-head .ex-name b {
  display: block; font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
}
.ex-head .ex-name span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sets { background-color: rgba(var(--tint),.45); padding: var(--s2) var(--s3) var(--s3); }
.set-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 50px 44px;
  gap: 6px; align-items: center; margin-top: 6px;
}
.set-row .sn {
  font-family: var(--font-display); font-size: 12px; color: var(--muted);
  font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.set-row .sn svg { width: 15px; height: 15px; color: var(--muted); }
.set-row input {
  min-height: 42px; padding: 0 var(--s2); font-size: 16px;
  text-align: center; font-weight: 600;
}
.set-row .target {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--muted); text-align: center; font-variant-numeric: tabular-nums;
}
.chk {
  width: 44px; height: 42px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--surface-3);
  border: 1px solid var(--border); box-shadow: var(--inset);
  color: var(--faint);
  transition: transform var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.chk svg { width: 19px; height: 19px; }
.chk:active { transform: scale(.9); }
.chk.on {
  background-color: var(--ok); background-image: linear-gradient(180deg, var(--ok-2), var(--ok));
  border-color: var(--ok-line); color: var(--on-fill);
  box-shadow: 0 3px 10px var(--ok-soft), inset 0 1px 0 rgba(var(--tint),.3);
}
.set-head { display: grid; grid-template-columns: 28px 1fr 1fr 50px 44px; gap: 6px; }
.set-head span { font-size: 9.5px; color: var(--muted); text-align: center; letter-spacing: .7px; }
.set-head span svg { width: 13px; height: 13px; vertical-align: middle; }
.last-time {
  font-size: 11.5px; color: var(--muted); padding: var(--s2) 0 0;
  font-variant-numeric: tabular-nums;
}
.last-time b { color: var(--accent-text); font-weight: 700; }

.rules-card > summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; }
.rules-card ul { margin: var(--s3) 0 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.rules-card ul li { margin-bottom: 5px; }

/* Antrenmanı kaydet / onayla (DECISIONS.md #19) */
.finish-card { text-align: center; }
.finish-card .fc-state {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s3);
}
.finish-card.done { border-color: var(--ok-line); background-color: var(--ok-soft); }
.finish-card.done .fc-state { color: var(--ok); }

/* --------------------------------------------------- program düzenleme */
.pe-week { padding: var(--s3); }
.pe-week-head { display: flex; align-items: center; gap: var(--s2); }
/* Dar ekranda başlık + rozet + üç düğme tek satıra sığmıyor; başlık kendi
   satırına, işlem düğmeleri altına iner. */
@media (max-width: 560px) {
  .pe-week-head { flex-direction: column; align-items: stretch; }
  .pe-week-head .li-actions { justify-content: flex-end; }
  .pe-day-head { flex-direction: column; }
  .pe-day-head .li-actions { justify-content: flex-end; align-self: stretch !important; }
}
.pe-week-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2);
  background: transparent; border: 0; cursor: pointer; padding: 6px 2px;
  color: var(--text); font-family: inherit; text-align: left;
}
.pe-week-toggle .pw-title {
  flex: 1; min-width: 0; font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  /* Kırpmak yerine sarılır: dar ekranda "Hafta 2 — Upper / Lower" başlığının
     215px'i kesiliyordu, yani başlığın çoğu görünmüyordu. */
  overflow-wrap: anywhere;
}
.pe-week-toggle svg { color: var(--muted); }
.pe-week.open { border-color: var(--accent-line); }
.pe-week-body {
  border-top: 1px solid var(--border); margin-top: var(--s3); padding-top: var(--s3);
  animation: rise .2s var(--ease) both;
}

.pe-day {
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background-color: var(--surface-2);
  padding: var(--s3); margin-top: var(--s3);
}
.pe-day-head { display: flex; gap: var(--s2); margin-bottom: var(--s3); }

.pe-item {
  border: 1px solid var(--border); border-radius: 10px;
  background-color: var(--surface-3);
  padding: var(--s2) var(--s3) var(--s3); margin-bottom: 6px;
}
.pe-item-head {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
}
.pe-item-name { flex: 1; min-width: 0; }
.pe-item-name b {
  display: block; font-size: 13.5px; font-weight: 600;
  /* Uzun hareket adları ("Dumbbell Romanian Deadlift") kırpılıyordu; sarsın. */
  overflow-wrap: anywhere;
}
.pe-item-name span {
  display: block; font-family: var(--font-display);
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-top: 1px;
}
.pe-item-fields { display: grid; grid-template-columns: 70px 1fr 90px; gap: 6px; }
.pe-item-fields .field { margin-bottom: var(--s2); }
@media (max-width: 480px) {
  .pe-item-fields { grid-template-columns: 1fr 1fr; }
}

.pe-add {
  border-top: 1px dashed var(--border-strong);
  margin-top: var(--s3); padding-top: var(--s3);
}
.mini-btn:disabled { opacity: .35; cursor: default; }
.mini-btn:disabled:active { transform: none; }

/* ------------------------------------------------------------------- liste */
.list-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-main b { font-size: 14px; font-weight: 600; }
.list-item .li-main span {
  display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.li-actions { display: flex; gap: 6px; flex: none; }

/* ------------------------------------------------------- beslenme geçmişi */
.day-row { border-bottom: 1px solid var(--border); }
.day-row:last-child { border-bottom: 0; }
.day-row > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0; cursor: pointer; list-style: none;
}
.day-row > summary::-webkit-details-marker { display: none; }
.day-row .dr-main { flex: 1; min-width: 0; }
.day-row .dr-main b { display: block; font-size: 14px; font-weight: 600; }
.day-row .dr-main span {
  display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.day-row .dr-body { padding: 0 0 var(--s3); }
.day-row .dr-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 3px 0 3px var(--s3); font-size: 12.5px; color: var(--muted);
  border-left: 2px solid var(--border);
}
.day-row .dr-item b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
@media (max-width: 480px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.stat {
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--inset);
  border-radius: var(--r-btn); padding: var(--s3) var(--s1); text-align: center;
  min-width: 0;
}
.stat .n {
  display: block; font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat .l {
  display: block; font-size: 9.5px; color: var(--muted);
  letter-spacing: .4px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat.accent .n { color: var(--accent-text); }
.stat.ok .n { color: var(--ok); }
.stat.warn .n { color: var(--warn); }

/* --------------------------------------------------------------- progress bar */
.bar {
  height: 10px; border-radius: var(--r-pill); overflow: hidden;
  background-color: var(--surface-sunken); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(var(--shade),.08);
}
.bar > i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(var(--tint),.45);
  transition: width var(--t-measure) var(--ease);
}
.bar.ok > i { background: linear-gradient(90deg, var(--ok), var(--ok-2)); }
.bar.warn > i { background: linear-gradient(90deg, var(--warn), var(--accent)); }

/* --------------------------------------------------------------- kütüphane */
.search-wrap { position: relative; margin-bottom: var(--s3); }
.search-wrap input { padding-left: 42px; }
.search-wrap .search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; z-index: 1;
  display: flex; align-items: center;
}
.search-wrap .search-ico svg { width: 18px; height: 18px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s3); }
.chips::-webkit-scrollbar { display: none; }
.chips { scrollbar-width: none; }
.chips .btn-chip { flex: none; }

.ex-card {
  background-color: var(--surface); background-image: var(--sheen);
  border: 1px solid var(--border); box-shadow: var(--sh-1), var(--inset);
  border-radius: var(--r-card); padding: var(--s4); margin-bottom: var(--s3);
}
.ex-card > .spread { margin-bottom: var(--s3); }
.ex-card img {
  width: 100%; border-radius: var(--r-btn); border: 1px solid var(--border);
  display: block; background-color: var(--surface-3); margin-bottom: var(--s3);
}
.ex-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.ex-card ul { margin: 0 0 var(--s3); padding-left: 18px; font-size: 13px; color: var(--text); }
.ex-card ul li { margin-bottom: 5px; }
.no-img {
  background-color: var(--surface-sunken); border: 1px dashed var(--border-strong);
  border-radius: var(--r-btn);
  padding: var(--s4); text-align: center; color: var(--muted);
  font-size: 12.5px; margin-bottom: var(--s3);
}

/* Kütüphane kartı — görselli, tıklanabilir döşeme */
.ex-tile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0; overflow: hidden; border: 0;
  transition: transform var(--t-micro) var(--ease-out);
}
.ex-tile:active { transform: scale(.985); }
.ex-thumb {
  aspect-ratio: 4 / 3; background-color: var(--surface-sunken);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ex-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  margin: 0; border: 0; border-radius: 0;
}
.ex-tile-body { padding: var(--s3); }
.ex-tile-body b {
  display: block; font-family: var(--font-display);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.2px;
  margin-bottom: 6px; overflow-wrap: anywhere;
}
.ex-tile-body .meta { margin-bottom: 0; }

/* Detaydaki iki görsel: başlangıç ve bitiş pozisyonu */
.ex-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.ex-shots img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-btn); background-color: var(--surface-sunken);
  display: block; margin: 0; border: 0;
}
.card ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.card ol li { margin-bottom: 8px; }

/* ----------------------------------------------------------- besin seçici */
.food-results { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s3); }
.food-results:empty { display: none; }
.food-hit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 46px; padding: 8px var(--s3); text-align: left;
  background-color: var(--surface-2); background-image: var(--sheen);
  border: 1px solid var(--border); border-radius: var(--r-btn);
  box-shadow: var(--inset);
  color: var(--text); font-family: var(--font-body); font-size: 14px; cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease);
}
.food-hit:active { transform: scale(.985); }
.food-hit:hover { border-color: var(--accent-line); }
.food-hit .fh-name { font-weight: 600; min-width: 0; }
.food-hit .fh-meta {
  color: var(--muted); font-size: 11px; flex: none; font-variant-numeric: tabular-nums;
}

.picked-box {
  background-color: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-card); padding: var(--s3); margin-bottom: var(--s3);
}
.picked-box .chips { margin-bottom: var(--s3); }
.picked-box .stat { background-color: var(--surface-3); }

.manual-entry > summary {
  cursor: pointer; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--accent-text); padding: var(--s2) 0; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.manual-entry > summary::-webkit-details-marker { display: none; }
.manual-entry > summary::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform var(--t-micro) var(--ease);
}
.manual-entry[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }

/* ----------------------------------------------------------- yemekhane */
.cafe-card { border-color: var(--accent-line); }
.cafe-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.cafe-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-btn);
  background-color: var(--surface-2); border: 1px solid var(--border);
  transition: opacity var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.cafe-row.off { opacity: .42; }
.cafe-row .cr-main { flex: 1; min-width: 0; }
.cafe-row .cr-main b { display: block; font-size: 13.5px; font-weight: 600; }
.cafe-row .cr-main span {
  display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.cafe-row .cr-portion {
  display: flex; gap: 3px; flex: none;
}
.portion-btn {
  min-width: 34px; height: 30px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  background-color: var(--surface-3); border: 1px solid var(--border);
  color: var(--muted); font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform var(--t-micro) var(--ease-out);
}
.portion-btn:active { transform: scale(.92); }
.portion-btn.on {
  background-color: var(--accent); background-image: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-line);
}

/* ----------------------------------------------------- öğün düzenleme */
.meal-edit {
  border: 1px solid var(--accent-line); border-radius: var(--r-btn);
  background-color: var(--accent-soft);
  padding: var(--s3); margin: var(--s2) 0;
  animation: rise .2s var(--ease) both;
}
.meal-edit .field { margin-bottom: var(--s2); }

/* Öğünler arası taşıma menüsü */
.move-wrap { position: relative; }
.move-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 132px; padding: 5px; border-radius: var(--r-btn);
  background: linear-gradient(180deg, rgba(var(--tint),.96), rgba(var(--tint),.9));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--border); box-shadow: var(--sh-2), var(--inset);
}
.move-menu.open { display: block; animation: rise .16s var(--ease) both; }
.move-opt {
  display: block; width: 100%; min-height: 38px; padding: 0 var(--s3);
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--text); font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background-color var(--t-micro) var(--ease);
}
.move-opt:hover { background-color: var(--accent-soft); color: var(--accent-text); }

/* ------------------------------------------------------- yemek tavsiyesi */
.suggest {
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background-color: var(--surface-2); padding: var(--s3); margin-bottom: var(--s2);
  transition: border-color var(--t-micro) var(--ease);
}
.suggest:hover { border-color: var(--accent-line); }
.suggest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.suggest-head b { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; }
.suggest-items {
  font-size: 12.5px; color: var(--muted); margin-bottom: var(--s2);
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.suggest-macros { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: var(--s3); }

/* ------------------------------------------------------------------ dialog */
.dialog {
  border: none; padding: 0; background: transparent;
  max-width: 520px; width: calc(100% - 24px); margin: auto;
}
.dialog::backdrop {
  background: rgba(var(--shade),.34);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
.dialog-inner {
  background: linear-gradient(168deg, rgba(var(--tint),.82), rgba(var(--tint),.68));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; border-radius: var(--r-dialog);
  box-shadow: var(--sh-2), var(--inset);
  padding: var(--s5); max-height: 88vh; overflow-y: auto;
}
.dialog-inner h2 { margin-bottom: var(--s4); }
.dl-section { border-top: 1px solid var(--border); padding-top: var(--s4); margin-top: var(--s4); }
.dl-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.dl-section h3 {
  font-size: 10.5px; margin-bottom: var(--s3); color: var(--accent-text);
  text-transform: uppercase; letter-spacing: .9px; font-weight: 700;
}

/* ------------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-h) + 20px + env(safe-area-inset-bottom)); z-index: 60;
  background: linear-gradient(180deg, rgba(var(--tint),.82), rgba(var(--tint),.7));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; color: var(--text);
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-2), var(--inset); max-width: calc(100% - 32px);
}
.toast.err { border-color: var(--danger-line); color: var(--danger); }
@media (min-width: 720px) { .toast { bottom: 24px; } }

/* ------------------------------------------------------------------ canvas */
.chart-wrap { position: relative; height: 220px; }

/* ------------------------------------------------------------------ kurulum */
.setup { max-width: 560px; margin: 8vh auto; }
.setup ol { padding-left: 20px; font-size: 14px; color: var(--text); }
.setup ol li { margin-bottom: var(--s3); }
.setup code {
  background-color: var(--surface-sunken); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 6px; font-size: 12.5px; word-break: break-all; color: var(--accent-text);
}

/* --------------------------------------------------------------- giriş ekranı */
.auth-screen { max-width: 420px; margin: 10vh auto; }
.auth-screen .card { padding: var(--s5); }
.auth-mark {
  display: inline-flex; margin-bottom: var(--s4);
  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb),.38));
}
.auth-screen .btn-accent { margin-top: var(--s2); }

/* ------------------------------------------------------------------- hesap */
.account-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.account-avatar {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  box-shadow: var(--sh-accent), inset 0 1px 0 rgba(var(--tint),.5);
}
.account-meta { min-width: 0; }
.account-meta b { display: block; font-size: 14px; word-break: break-all; }
.account-meta span { display: block; font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------- odak halkası */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .btn-chip:focus-visible, .tab:focus-visible,
.daychip:focus-visible, .mini-btn:focus-visible, .chk:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}
.dialog:focus, .dialog:focus-visible, .dialog-inner:focus { outline: none; }

/* --------------------------------------------------------------- animasyon */
/* Giriş animasyonu öğe başına BİR KEZ oynar. Sekme DOM'u bellekte tutulduğu için
   (DECISIONS.md #10) `hidden` kalkınca display none→block oluyor ve CSS animasyonu
   baştan tetikleniyordu; "sayfalar titriyor" şikâyeti buydu (DECISIONS.md #18).
   app.js pane'e .anim-in ekler, animasyon bitince kaldırır — sonraki gösterimlerde
   eşleşecek kural kalmaz. */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop {
  0%   { transform: scale(.86); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.anim-in { animation: fade .16s var(--ease) both; }
.anim-in .card, .anim-in .ex-card {
  animation: rise var(--t-enter) var(--ease) both;
}
.anim-in .card:nth-child(1) { animation-delay: .02s; }
.anim-in .card:nth-child(2) { animation-delay: .05s; }
.anim-in .card:nth-child(3) { animation-delay: .08s; }
.anim-in .card:nth-child(n+4) { animation-delay: .1s; }

/* -------------------------------------------------- sayfa/gün geçişleri */
/* View Transitions API: tarayıcı eski ve yeni hâlin görüntüsünü alıp kendisi
   çapraz geçiriyor. replaceChildren tek başına sert bir kesme yapıyordu
   (DECISIONS.md #27). */
::view-transition-old(root) {
  animation: vt-out .18s var(--ease) both;
}
::view-transition-new(root) {
  animation: vt-in .26s var(--ease) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Gezinme düğmesi basılıyken veri beklerken hafifçe soluklaşır. */
.datebar-nav.pending { opacity: .55; }

/* Camın "canlı" durması: yüzeyler ışığa tepki verir.
   Hepsi transform/opacity üzerinden — kompozitörde çalışır, yerleşimi bozmaz. */

/* Kart: imleç üstündeyken hafifçe kalkar ve kenarı parlar. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-1px);
    box-shadow: var(--inset), var(--sh-2);
  }
}

/* Turuncu düğmelerde yavaşça geçen spekülar ışık. Dolgunun üstünde döner,
   düğmeyi "cam altında ışık var" gibi gösterir. */
.btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%, rgba(var(--tint),.42) 46%, transparent 62%);
  transform: translateX(-120%);
}
/* Süpürme SONSUZ değil, temas tepkisi. Sonsuz olduğunda ekrandaki her turuncu
   düğme sürekli kompozisyon işi üretiyordu. */
@media (hover: hover) { .btn-accent:hover::after { animation: sweep 1.1s var(--ease); } }
.btn-accent:active::after { animation: sweep .7s var(--ease); }
@keyframes sweep {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Aktif sekme de aynı ışığı alır. */
.tab.on { position: relative; overflow: hidden; isolation: isolate; }
.tab.on::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 32%, rgba(var(--tint),.36) 48%, transparent 64%);
  transform: translateX(-120%);
  /* Sekme etkinleşince bir kez geçer; sonsuz döngü değil. */
  animation: sweep 1.2s var(--ease);
}

.fade-in { animation: rise var(--t-enter) var(--ease) both; }
.chk.on svg { animation: pop .22s var(--ease-out); }
.toast { animation: rise .2s var(--ease) both; }
.dialog[open] .dialog-inner { animation: rise var(--t-enter) var(--ease) both; }

/* ------------------------------------------------- geri düşüş / erişilebilirlik */

/* backdrop-filter yoksa cam katmanlar opak zemine düşer */
/* backdrop-filter yoksa cam bulanıklaşamaz; saydamlık düşürülüp yüzey opaklaşır,
   yoksa arkadaki renkli ambiyans metnin altında ham hâliyle görünürdü. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-top: rgba(var(--tint),.95);
    --glass-bottom: rgba(var(--tint),.92);
  }
  .topbar, .tabs-bottom, .dialog-inner, .toast, .card {
    background: var(--surface-3); background-image: none;
  }
  .dialog::backdrop { background: rgba(var(--shade),.55); }
}

/* Saydamlık azaltma tercihi: cam yerine düz yüzey */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface: rgba(var(--tint),1);
    --surface-2: rgba(var(--tint),1);
    --surface-3: rgba(var(--tint),1);
    --glass-top: rgba(var(--tint),1);
    --glass-bottom: rgba(var(--tint),1);
    --border: rgba(var(--shade),.22);
    --sheen: none;
    --glass-edge: rgba(var(--shade),.14);
  }
  .topbar, .tabs-bottom, .dialog-inner, .toast, .card {
    background: var(--surface-3); background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--border);
  }
  /* Ambiyans blobları tamamen kapanır — saydamlık yoksa arkasını görmenin anlamı yok. */
  body::before, body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Sürüklenme ve ışık süpürme tamamen durur — süre kısaltmak yetmez, sonsuz
     döngüler .01ms'de titremeye dönerdi. */
  body::before, body::after,
  .btn-accent::after, .tab.on::after { animation: none !important; }
  .btn-accent::after, .tab.on::after { display: none; }
}