/* styles.css — Afiyetim arayüzü.
   Mobil öncelikli; masaüstünde 640 px'e ortalanır. Renkler CSS değişkenlerinde (Grafik de bunları okur).
   Koyu tema: sistem tercihi (prefers-color-scheme) + elle seçim (html[data-tema]). */

:root {
  --arka: #F3F6F4;
  --kart: #FFFFFF;
  --metin: #1B2A23;
  --metin-2: #5F6F67;
  --cizgi: #E1E8E4;
  --vurgu: #2E9E6B;
  --vurgu-2: #3B82F6;
  --uyari: #E0A020;
  --tehlike: #D9534F;
  --basari: #2E9E6B;
  /* Kontrast (bulgu 44, WCAG AA): --vurgu/--uyari arka plan ve grafik rengidir; METİN olarak kullanıldığında
     açık zeminde yeterince koyu tonlar gerekir (--vurgu-yazi 5,3:1, --uyari-yazi 4,9:1 beyaz üstünde).
     --vurgu-metin: --vurgu zeminli düğme/çip/FAB/toast üzerindeki yazı rengi (koyu temada koyu). */
  --vurgu-yazi: #1F7A52;
  --uyari-yazi: #9A6600;
  --vurgu-metin: #FFFFFF;
  --vurgu-yumusak: rgba(46, 158, 107, 0.12);
  --uyari-yumusak: rgba(224, 160, 32, 0.14);
  --tehlike-yumusak: rgba(217, 83, 79, 0.12);
  --makro-p: #3B82F6;   /* protein */
  --makro-k: #E0A020;   /* karbonhidrat */
  --makro-y: #A855F7;   /* yağ */
  --makro-l: #2E9E6B;   /* lif */
  --golge: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 16px;
  --sekme-yuk: 60px;
  --gecis: 0.28s;
  color-scheme: light;
}

/* Sistem koyu tema (elle "açık" seçilmediyse) */
@media (prefers-color-scheme: dark) {
  html:not([data-tema="acik"]) {
    --arka: #121815;
    --kart: #1C2420;
    --metin: #E8EFEA;
    --metin-2: #9AA9A1;
    --cizgi: #2C3731;
    --vurgu: #4CCB8F;          /* bulgu 44: daha açık yeşil; üstündeki yazı koyu (--vurgu-metin) → 8,5:1 */
    --vurgu-2: #60A5FA;
    --uyari: #F0B429;
    --tehlike: #EF6B65;
    --basari: #4CCB8F;
    --vurgu-yazi: #4CCB8F;     /* koyu kart üstünde 7,6:1 */
    --uyari-yazi: #F0B429;
    --vurgu-metin: #0F1A14;
    --vurgu-yumusak: rgba(76, 203, 143, 0.16);
    --uyari-yumusak: rgba(240, 180, 41, 0.16);
    --tehlike-yumusak: rgba(239, 107, 101, 0.16);
    --makro-p: #60A5FA;
    --makro-k: #F0B429;
    --makro-y: #C084FC;
    --makro-l: #4CCB8F;
    --golge: 0 2px 8px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* Elle koyu tema (sistem tercihinden bağımsız) */
html[data-tema="koyu"] {
  --arka: #121815;
  --kart: #1C2420;
  --metin: #E8EFEA;
  --metin-2: #9AA9A1;
  --cizgi: #2C3731;
  --vurgu: #4CCB8F;
  --vurgu-2: #60A5FA;
  --uyari: #F0B429;
  --tehlike: #EF6B65;
  --basari: #4CCB8F;
  --vurgu-yazi: #4CCB8F;
  --uyari-yazi: #F0B429;
  --vurgu-metin: #0F1A14;
  --vurgu-yumusak: rgba(76, 203, 143, 0.16);
  --uyari-yumusak: rgba(240, 180, 41, 0.16);
  --tehlike-yumusak: rgba(239, 107, 101, 0.16);
  --makro-p: #60A5FA;
  --makro-k: #F0B429;
  --makro-y: #C084FC;
  --makro-l: #4CCB8F;
  --golge: 0 2px 8px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Temel ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--arka);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  overflow-wrap: anywhere; /* bulgu 50: boşluksuz uzun kalem adı / URL kartın dışına taşmasın */
}
/* Kalıcılık uyarı şeridi (bulgu 2): Depo bellek yedeğindeyken açılışta gösterilir, kapatılamaz */
.kalici-uyari {
  background: var(--tehlike); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35;
  padding: 10px 14px; border-radius: 12px; margin: 8px 0 0;
}
.sheet:focus { outline: none; } /* odak sheet kabına taşınır (bulgu 46); görsel halka gereksiz */
body.kilitli { overflow: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }
img { max-width: 100%; }
canvas { display: block; width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
.gorsel-gizle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#uygulama {
  max-width: 640px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 12px calc(var(--sekme-yuk) + env(safe-area-inset-bottom) + 96px);
}
.ekran { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.ekran-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px; }
.ekran-ust h1 { flex: 1; }

/* Tarih gezgini */
.tarih-gezgin { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.tarih-baslik {
  flex: 1; text-align: center; background: none; border: 0; font-weight: 700; font-size: 18px; min-height: 44px; color: var(--metin);
}
.tarih-baslik small { display: block; font-size: 12px; font-weight: 600; color: var(--vurgu-yazi); }

/* ---------- Kart ---------- */
.kart { background: var(--kart); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--golge); }
.kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kart-ust h3 { flex: 1; }
.kart-sikistir { padding: 0; overflow: hidden; }
.kart-uyari { background: var(--uyari-yumusak); border-left: 4px solid var(--uyari); }
.kart-vurgu { background: var(--vurgu-yumusak); }
.metin-2 { color: var(--metin-2); }
.kucuk { font-size: 13px; }
.not { font-size: 13px; color: var(--metin-2); margin-top: 6px; }
.tehlike-metin { color: var(--tehlike); }
.basari-metin { color: var(--vurgu-yazi); }
.uyari-metin { color: var(--uyari-yazi); }
.ortala { text-align: center; }
.bosluk { height: 4px; }

/* ---------- Düğmeler ---------- */
.dugme {
  min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--cizgi);
  background: var(--kart); color: var(--metin); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.1s, opacity 0.15s;
}
.dugme:active { transform: scale(0.97); }
.dugme:disabled { opacity: 0.5; cursor: default; transform: none; }
.dugme-birincil { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.dugme-ikincil { background: var(--vurgu-yumusak); border-color: transparent; color: var(--vurgu-yazi); }
.dugme-tehlike { color: var(--tehlike); border-color: var(--tehlike); background: transparent; }
.dugme-tehlike.dolu { background: var(--tehlike); color: #fff; }
.dugme-tam { width: 100%; }
/* bulgu 45: görünüm küçük ama dokunma yüksekliği sözleşmedeki 44 px */
.dugme-kucuk { min-height: 44px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.dugme-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.dugme-satir > .dugme { flex: 1 1 auto; }
.ikon-dugme {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--metin);
  font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ikon-dugme:disabled { opacity: 0.3; cursor: default; }
.ikon-dugme.kucuk { width: 44px; height: 44px; font-size: 15px; margin: -4px; } /* bulgu 45: 36 → 44 px; negatif kenar boşluğu yerleşimi korur */
.baglanti { background: none; border: 0; color: var(--vurgu-yazi); font-weight: 600; padding: 8px; min-height: 44px; }

/* ---------- Form ---------- */
.giris, .secim, .metin-alani {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cizgi);
  background: var(--arka); color: var(--metin); font-size: 16px;
}
.giris:focus, .secim:focus, .metin-alani:focus { outline: 2px solid var(--vurgu); outline-offset: 0; border-color: var(--vurgu); }
.metin-alani { min-height: 96px; resize: vertical; line-height: 1.4; }
.giris-buyuk { font-size: 18px; font-weight: 600; }
.giris-grup { display: flex; gap: 8px; align-items: center; }
.giris-grup .giris, .giris-grup .secim { flex: 1; min-width: 0; }
.form-satir { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-satir label { font-size: 13px; font-weight: 600; color: var(--metin-2); }
.form-satir-yatay { flex-direction: row; align-items: center; justify-content: space-between; }
.form-satir-yatay label { font-size: 15px; color: var(--metin); }
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-hata { color: var(--tehlike); font-size: 13px; }
select.secim { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--metin-2) 50%), linear-gradient(135deg, var(--metin-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Kaydırıcı: büyük başparmak, kalın iz */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--cizgi); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--vurgu);
  border: 3px solid var(--kart); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); margin-top: -10px;
}
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--cizgi); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--vurgu); border: 3px solid var(--kart); }

/* Anahtar (aç/kapat) */
.anahtar { position: relative; width: 52px; height: 32px; flex: none; display: inline-block; }
.anahtar input { opacity: 0; width: 0; height: 0; position: absolute; }
.anahtar span { position: absolute; inset: 0; border-radius: 16px; background: var(--cizgi); transition: background 0.2s; cursor: pointer; }
.anahtar span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.anahtar input:checked + span { background: var(--vurgu); }
.anahtar input:checked + span::after { transform: translateX(20px); }

/* ---------- Çipler ve rozetler ---------- */
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--arka); font-size: 14px; color: var(--metin);
}
button.cip { cursor: pointer; }
button.cip:active { transform: scale(0.96); }
.cip.secili { background: var(--vurgu); color: var(--vurgu-metin); border-color: var(--vurgu); }
.cip.pasif { opacity: 0.85; }
.rozet {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--cizgi); color: var(--metin-2); white-space: nowrap;
}
.rozet-paketli { background: rgba(59, 130, 246, 0.15); color: var(--vurgu-2); }
.rozet-yemek { background: var(--vurgu-yumusak); color: var(--vurgu-yazi); }
.rozet-icecek { background: rgba(14, 165, 233, 0.16); color: #0EA5E9; }
.rozet-belirsiz, .rozet-manuel { background: var(--uyari-yumusak); color: var(--uyari-yazi); }
.rozet-guven-yuksek { background: var(--vurgu-yumusak); color: var(--vurgu-yazi); }
.rozet-guven-orta { background: var(--uyari-yumusak); color: var(--uyari-yazi); }
.rozet-guven-dusuk { background: var(--tehlike-yumusak); color: var(--tehlike); }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Segment */
.segment { display: flex; background: var(--arka); border-radius: 12px; padding: 4px; gap: 4px; }
.segment button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; color: var(--metin-2); }
.segment button.aktif { background: var(--kart); color: var(--metin); box-shadow: var(--golge); }
.kart .segment { background: var(--arka); }

/* ---------- İlerleme ---------- */
.cubuk { height: 10px; border-radius: 5px; background: var(--cizgi); overflow: hidden; }
.cubuk-dolgu { height: 100%; border-radius: 5px; background: var(--vurgu); transition: width 0.3s; }
.cubuk-dolgu.asim { background: var(--tehlike); }
.makro { margin-bottom: 10px; }
.makro:last-child { margin-bottom: 0; }
.makro-ust { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.makro-ust b { font-weight: 600; }

/* ---------- Tavsiye (kompakt: en fazla 3 kart açık, kartta 4 çip; kalori halkası ilk ekranda kalsın) ---------- */
.tavsiyeler { display: flex; flex-direction: column; gap: 8px; }
.tavsiye { display: flex; gap: 8px; align-items: center; border-left: 4px solid var(--vurgu); padding: 8px 4px 8px 12px; }
.tavsiye.oncelik-1 { border-left-color: var(--tehlike); }
.tavsiye.oncelik-2 { border-left-color: var(--uyari); }
.tavsiye-simge { font-size: 18px; line-height: 1.2; flex: none; }
.tavsiye-govde { flex: 1; min-width: 0; }
.tavsiye-govde h4 { font-size: 14px; margin-bottom: 1px; }
.tavsiye-govde p { font-size: 13px; line-height: 1.35; margin: 0 0 4px; color: var(--metin-2); }
.tavsiye .cipler { gap: 4px; }
.tavsiye .cip { min-height: 24px; padding: 2px 8px; font-size: 11px; }
/* bulgu 45: "…" genişletme düğmesi 24 px görünür ama dokunma alanı ::before ile 44 px'e uzatılır */
.tavsiye button.cip { min-width: 44px; justify-content: center; position: relative; }
.tavsiye button.cip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.tavsiye .ikon-dugme.kucuk { align-self: flex-start; margin: -4px 0; }
.tavsiye-ac { align-self: flex-start; min-height: 44px; padding: 4px 8px; font-size: 13px; }

/* ---------- Kalori halkası ---------- */
.kalori-kart { display: flex; align-items: center; gap: 14px; }
.halka-kutu { width: 150px; flex: none; }
.kalori-bilgi { flex: 1; min-width: 0; }
.kalori-bilgi .buyuk { font-size: 30px; font-weight: 800; line-height: 1.1; }
.kalori-bilgi .buyuk small { font-size: 14px; font-weight: 600; color: var(--metin-2); }
.kalan { margin-top: 6px; font-weight: 600; }
.kalan.asim { color: var(--tehlike); }

/* ---------- Su ---------- */
.su-liste li { display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-top: 1px solid var(--cizgi); min-height: 44px; }
.su-liste .ikon-dugme.kucuk { margin: 0 -4px; }
.su-liste { margin-top: 10px; }

/* ---------- Öğün listesi ---------- */
.ogun-grup { padding: 8px 0 4px; }
.ogun-grup-ust { display: flex; justify-content: space-between; padding: 6px 16px; font-weight: 700; }
.ogun-grup-ust span:last-child { color: var(--metin-2); font-weight: 600; }
.ogun-kalem {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; background: none; border: 0;
  border-top: 1px solid var(--cizgi); text-align: left; min-height: 60px; color: var(--metin);
}
.ogun-kalem:active { background: var(--arka); }
.ogun-resim {
  width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--arka);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.ogun-kalem-bilgi { flex: 1; min-width: 0; }
.ogun-kalem-bilgi .ad { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogun-kalem-bilgi .alt { font-size: 13px; color: var(--metin-2); }
.ogun-kalem .kcal { font-weight: 700; white-space: nowrap; }
.ogun-kalem .kcal small { font-weight: 500; color: var(--metin-2); }

/* ---------- Liste kalemi (arama, gün listesi, kilo listesi) ---------- */
.liste { display: flex; flex-direction: column; }
.liste-kalem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 16px; background: var(--kart); border: 0; border-bottom: 1px solid var(--cizgi); text-align: left; color: var(--metin);
}
.liste-kalem:active { background: var(--arka); }
.liste-kalem:last-child { border-bottom: 0; }
.liste-kalem .birincil { font-weight: 600; }
.liste-kalem .ikincil { font-size: 13px; color: var(--metin-2); }
.liste-kalem .sag { text-align: right; white-space: nowrap; }
.liste-kalem .sol { flex: 1; min-width: 0; }
/* Yiyecek simgesi: liste satırının solunda sabit kutu. Simge vektördür (js/simgeler.js),
   dış istek atmaz ve karanlık temada da okunur. */
.liste-kalem .simge { flex: 0 0 auto; display: flex; align-items: center; }
.yemek-simge { display: block; }
.liste-kart { padding: 0; overflow: hidden; }
.liste-kart > h3 { padding: 12px 16px 4px; }

/* ---------- Tablo ---------- */
.tablo-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th, .tablo td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo th:first-child, .tablo td:first-child { text-align: left; }
.tablo th { color: var(--metin-2); font-weight: 600; font-size: 12px; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tr.grup td { background: var(--arka); font-weight: 700; text-align: left; font-size: 12px; color: var(--metin-2); padding: 6px; }
.tablo td.yok { color: var(--metin-2); }
.kapsam-hucre { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.kapsam-cubuk { width: 64px; height: 8px; border-radius: 4px; background: var(--cizgi); overflow: hidden; flex: none; }
.kapsam-cubuk i { display: block; height: 100%; border-radius: 4px; }
.kapsam-cubuk i.kirmizi, .renk-kirmizi { background: var(--tehlike); }
.kapsam-cubuk i.sari, .renk-sari { background: var(--uyari); }
.kapsam-cubuk i.yesil, .renk-yesil { background: var(--basari); }
.kapsam-cubuk i.gri, .renk-gri { background: var(--metin-2); }
.kapsam-yuzde { min-width: 40px; font-weight: 600; }
.kapsam-yuzde.kirmizi { color: var(--tehlike); }
.kapsam-yuzde.sari { color: var(--uyari-yazi); }
.kapsam-yuzde.yesil { color: var(--vurgu-yazi); }

/* ---------- İstatistik kutuları ---------- */
.istatistikler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.istatistik { background: var(--arka); border-radius: 12px; padding: 10px 12px; }
.istatistik b { display: block; font-size: 20px; line-height: 1.2; }
.istatistik span { font-size: 12px; color: var(--metin-2); }
.buyuk-sayi { font-size: 44px; font-weight: 800; line-height: 1.1; }
.buyuk-sayi small { font-size: 18px; font-weight: 600; color: var(--metin-2); }
.gosterge { display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 13px; color: var(--metin-2); margin-top: 8px; }
.gosterge i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.halka-satir { display: flex; align-items: center; gap: 12px; }
.halka-satir .halka-kutu { width: 140px; }
.halka-satir .gosterge { flex: 1; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; }

/* ---------- Boş durum ---------- */
.bos { text-align: center; color: var(--metin-2); padding: 24px 16px; }
.bos-simge { font-size: 40px; margin-bottom: 8px; line-height: 1; }
.bos h3 { color: var(--metin); margin-bottom: 6px; }
.bos .dugme-satir { margin-top: 14px; justify-content: center; }

/* ---------- Sekmeler ve FAB ---------- */
.sekmeler {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px;
  height: calc(var(--sekme-yuk) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--kart); border-top: 1px solid var(--cizgi); z-index: 30;
}
.sekme {
  flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; font-weight: 600; color: var(--metin-2); min-height: 44px;
}
.sekme-simge { font-size: 22px; line-height: 1.1; }
.sekme.aktif { color: var(--vurgu-yazi); }
.fab {
  position: fixed; z-index: 31; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--vurgu); color: var(--vurgu-metin);
  font-size: 32px; line-height: 1; box-shadow: 0 6px 16px rgba(46, 158, 107, 0.4); display: flex; align-items: center; justify-content: center;
  bottom: calc(var(--sekme-yuk) + env(safe-area-inset-bottom) + 16px);
  right: max(16px, calc(50% - 320px + 16px));
  transition: transform 0.15s;
}
.fab:active { transform: scale(0.94); }

/* ---------- Alt sayfa (sheet) ---------- */
.sheet-arka { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity var(--gecis); z-index: 40; }
.sheet-arka.acik { opacity: 1; }
.sheet {
  position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 640px; z-index: 50;
  transform: translate(-50%, 100%); transition: transform var(--gecis) cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--kart); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; max-height: calc(100% - env(safe-area-inset-top) - 24px);
}
.sheet.acik { transform: translate(-50%, 0); }
.sheet.tam { height: calc(100% - env(safe-area-inset-top) - 12px); }
.sheet-tutamac { width: 40px; height: 4px; border-radius: 2px; background: var(--cizgi); margin: 8px auto 0; flex: none; }
.sheet-ust { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 4px; border-bottom: 1px solid var(--cizgi); flex: none; }
.sheet-ust h2 { flex: 1; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-ust .ikon-dugme { font-size: 26px; line-height: 1; }
.sheet-ust .yer-tutucu { width: 44px; flex: none; }
.sheet-govde {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
}
.sheet-govde > .kart { box-shadow: none; border: 1px solid var(--cizgi); }

/* Ekle menüsü */
.ekle-secenek {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--cizgi); background: var(--arka); text-align: left; font-weight: 600; font-size: 16px; color: var(--metin);
}
.ekle-secenek:active { background: var(--vurgu-yumusak); }
.ekle-secenek .simge { font-size: 26px; flex: none; width: 36px; text-align: center; }
.ekle-secenek small { display: block; font-weight: 400; font-size: 13px; color: var(--metin-2); }

/* ---------- Fotoğraf akışı ---------- */
.onizleme { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; min-height: 160px; }
.onizleme img { width: 100%; max-height: 48vh; object-fit: contain; display: block; }
.analiz-kaplama {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px;
}
.analiz-kaplama p { margin: 0; font-weight: 600; }
.analiz-kaplama small { opacity: 0.8; }
.tarama { position: absolute; left: 0; right: 0; height: 3px; background: var(--vurgu); box-shadow: 0 0 14px var(--vurgu); animation: tarama 2.2s ease-in-out infinite; }
@keyframes tarama { 0% { top: 4%; } 50% { top: 96%; } 100% { top: 4%; } }
.yukleniyor { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: var(--vurgu); animation: don 0.9s linear infinite; flex: none; }
.yukleniyor.koyu { border-color: var(--cizgi); border-top-color: var(--vurgu); }
.yukleniyor.kucuk { width: 20px; height: 20px; border-width: 3px; }
@keyframes don { to { transform: rotate(360deg); } }
.nabiz { animation: nabiz 1.5s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: 0.5; } }
.yukleme-satir { display: flex; align-items: center; gap: 10px; color: var(--metin-2); padding: 8px 0; }

/* ---------- Sonuç ekranı ---------- */
.sonuc-ust { display: flex; gap: 12px; align-items: flex-start; }
.sonuc-resim {
  width: 88px; height: 88px; border-radius: 14px; object-fit: cover; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 40px; background: var(--arka);
}
.sonuc-bilgi { flex: 1; min-width: 0; }
.uyari-kutu { background: var(--uyari-yumusak); border-left: 4px solid var(--uyari); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.uyari-kutu ul { padding-left: 18px; list-style: disc; }
.hata-kutu { background: var(--tehlike-yumusak); border-left: 4px solid var(--tehlike); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.bilgi-kutu { background: var(--vurgu-yumusak); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ozet-satir { display: flex; justify-content: space-between; text-align: center; gap: 4px; }
.ozet-kalem { flex: 1; }
.ozet-kalem b { display: block; font-size: 18px; line-height: 1.2; }
.ozet-kalem.ana b { font-size: 24px; color: var(--vurgu-yazi); }
.ozet-kalem span { font-size: 12px; color: var(--metin-2); }
.gram-giris { display: flex; align-items: center; gap: 6px; }
.gram-giris .giris { width: 104px; text-align: right; font-weight: 700; font-size: 18px; }
.ogun-turu-cipler .cip { flex: 1; justify-content: center; }

/* ---------- Diyalog ---------- */
.diyalog-arka { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.diyalog { background: var(--kart); border-radius: 18px; padding: 20px; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.diyalog h3 { font-size: 17px; margin-bottom: 8px; }
.diyalog p { color: var(--metin-2); font-size: 15px; white-space: pre-line; }
.diyalog .form-satir { margin: 12px 0 0; }
.diyalog .dugme-satir { margin-top: 16px; }
.diyalog .dugme-satir .dugme { flex: 1; }

/* ---------- Toast ---------- */
.toastlar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px;
  /* bulgu 52: FAB (58 px, alt 16 px) ile aynı hizada çıkıp + düğmesini örtüyordu; şeridi FAB'ın üstüne al */
  bottom: calc(var(--sekme-yuk) + env(safe-area-inset-bottom) + 90px); width: calc(100% - 32px); max-width: 420px; pointer-events: none;
}
.toast {
  background: var(--metin); color: var(--arka); padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.toast.acik { opacity: 1; transform: none; }
.toast-basari { background: var(--basari); color: var(--vurgu-metin); }
.toast-uyari { background: var(--uyari); color: #1B2A23; }
.toast-tehlike { background: var(--tehlike); color: #fff; }

/* ---------- Diyet planı (TASARIM §12) ---------- */
.plan-secenekler { display: flex; flex-direction: column; gap: 8px; }
.plan-baslik { display: flex; flex-direction: column; gap: 8px; }
.plan-baslik h2 { font-size: 18px; }
.plan-baslik .rozetler { margin-top: 0; }
.plan-kart .kart-ust { margin-bottom: 4px; }
.plan-kart .kart-ust h3 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-kcal-satir { font-size: 13px; color: var(--metin-2); margin: 0 0 6px; }

/* Öğün blokları ve kalem satırları (onay kutulu) */
.plan-ogun { border-top: 1px solid var(--cizgi); padding: 6px 0 2px; }
/* bulgu 49: :first-of-type etiket türüne bakar (kartın ilk div'i hep başka bir şeydi, kural ölüydü);
   ilk öğün bloğu uyum çubuğunu / kcal satırını / kart başlığını izler → bitişik kardeş seçicileri */
.uyum + .plan-ogun, .plan-kcal-satir + .plan-ogun, .kart-ust + .plan-ogun { border-top: 0; }
.plan-ogun-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 4px 0; }
.plan-ogun-ust small { font-weight: 500; color: var(--metin-2); }
.plan-ogun-ust span:last-child { color: var(--metin-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.plan-kalem {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border-radius: 10px;
  cursor: pointer; position: relative; user-select: none; -webkit-user-select: none;
}
.plan-kalem:active { background: var(--arka); }
.plan-kalem.salt { cursor: default; min-height: 40px; }
.plan-kalem .onay-giris { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.onay-kutu {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--metin-2); flex: none; background: var(--kart);
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s;
}
.onay-kutu::after { content: "✓"; color: var(--vurgu-metin); font-size: 16px; font-weight: 800; line-height: 1; opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; }
.plan-kalem .onay-giris:checked + .onay-kutu { background: var(--vurgu); border-color: var(--vurgu); }
.plan-kalem .onay-giris:checked + .onay-kutu::after { opacity: 1; transform: scale(1); }
.plan-kalem .onay-giris:focus-visible + .onay-kutu { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.plan-kalem .onay-giris:disabled + .onay-kutu { opacity: 0.35; }
.plan-kalem .onay-giris:disabled ~ .plan-kalem-bilgi { opacity: 0.7; }
.plan-kalem-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-kalem-bilgi .ad { font-weight: 600; font-size: 15px; line-height: 1.25; }
.plan-kalem-bilgi .alt { font-size: 12px; color: var(--metin-2); }
.plan-kalem.tikli .plan-kalem-bilgi .ad { text-decoration: line-through; color: var(--metin-2); }
.plan-kalem-kcal { font-weight: 700; white-space: nowrap; font-size: 14px; }
.plan-kalem-kcal small { font-weight: 500; color: var(--metin-2); }
.plan-ogun.kompakt .plan-kalem { min-height: 44px; padding: 2px 6px; }
.plan-ogun.kompakt .plan-kalem-bilgi .ad { font-size: 14px; }

/* Uyum çubuğu ve 7 günlük mini çubuklar */
.uyum { margin: 4px 0 10px; }
.uyum-ust { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 4px; }
.uyum .cubuk-dolgu.tam, .plan-uyum-satir + .cubuk .cubuk-dolgu.tam { background: var(--basari); }
.uyum-mini { display: flex; gap: 6px; align-items: stretch; height: 84px; }
.uyum-mini-gun { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.uyum-mini-cubuk {
  flex: 1; width: 100%; max-width: 30px; background: var(--cizgi); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden;
}
.uyum-mini-cubuk i { display: block; width: 100%; background: var(--vurgu); border-radius: 6px; transition: height 0.3s; }
.uyum-mini-gun.yok .uyum-mini-cubuk {
  background: repeating-linear-gradient(45deg, var(--cizgi) 0 3px, transparent 3px 7px);
}
.uyum-mini-gun small { font-size: 11px; color: var(--metin-2); }
.plan-uyum-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 14px; }
.plan-uyum-satir small { font-size: 12px; }

/* Gün sekmeleri (yatay kaydırma), kaynak rozetleri */
.gun-sekmeler { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gun-sekmeler::-webkit-scrollbar { display: none; }
.gun-sekmeler .cip { flex: none; white-space: nowrap; }
.rozet-aktif { background: var(--vurgu-yumusak); color: var(--vurgu-yazi); }
.rozet-plan-yapay_zeka { background: rgba(168, 85, 247, 0.15); color: var(--makro-y); }
.rozet-plan-diyetisyen { background: rgba(59, 130, 246, 0.15); color: var(--vurgu-2); }
.rozet-plan-elle { background: var(--uyari-yumusak); color: var(--uyari-yazi); }
.on-satir { white-space: pre-line; word-break: break-word; }
.ogun-kalem-bilgi .ad, .liste-kalem .birincil, .plan-kalem-bilgi .ad { word-break: break-word; } /* bulgu 50 */
.plan-liste-dugmeler { flex: none; flex-wrap: nowrap; gap: 4px; align-items: center; }
.plan-liste-dugmeler > .dugme { flex: none; }

/* Elle düzenleyici */
.plan-gun-ust .giris { flex: 1; min-width: 0; font-weight: 700; }
.plan-ogun-duzen { border-top: 1px solid var(--cizgi); padding: 8px 0; }
.plan-ogun-duzen-ust { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.plan-ogun-duzen-ust .secim { flex: 1; min-width: 0; }
.plan-ogun-duzen-ust .giris { width: 112px; flex: none; }
.plan-kalem-duzen { background: var(--arka); border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.plan-kalem-duzen .giris { background: var(--kart); min-height: 44px; }
.plan-kalem-duzen-ust { display: flex; gap: 2px; align-items: center; }
.plan-kalem-duzen-ust .giris { flex: 1; min-width: 0; }
.plan-kalem-duzen-alt { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.plan-kalem-duzen-alt .giris:first-child { flex: 1; min-width: 0; }
.plan-kalem-duzen-alt input[type="number"] { width: 86px; flex: none; text-align: right; }
.plan-kalem-duzen-alt .plan-kalem-kcal { min-width: 68px; text-align: right; font-size: 13px; }
.plan-ogun-duzen > .baglanti { padding-left: 4px; }
.plan-foto { display: flex; align-items: center; gap: 10px; background: var(--arka); border-radius: 12px; padding: 8px; }
.plan-foto img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.plan-foto span { flex: 1; min-width: 0; }
.plan-metin { min-height: 140px; }

/* ---------- Ayarlar ---------- */
.hedef-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hedef-izgara .istatistik { text-align: center; }
.ayar-bolum { display: flex; flex-direction: column; gap: 10px; }
.hakkinda p { font-size: 14px; color: var(--metin-2); }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Daha geniş ekranlarda biraz daha ferah */
@media (min-width: 480px) {
  #uygulama { padding-left: 16px; padding-right: 16px; }
  .istatistikler { grid-template-columns: repeat(4, 1fr); }
  .istatistikler.iki { grid-template-columns: 1fr 1fr; }
}

/* ---------- "Daha" menüsü, Vücut sekmesi, sağlık kartları (yeni sözleşme) ---------- */
.daha-menu { display: flex; flex-direction: column; gap: 8px; }
.daha-kalem.aktif { border-color: var(--vurgu); background: var(--vurgu-yumusak); }
.vucut-segment { margin: 0 4px; }
.vucut-segment button { font-size: 14px; }
/* Bugün: aralıklı oruç yeme penceresi rozeti */
.oruc-rozet {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 14px; border-radius: 12px;
  background: var(--vurgu-yumusak); color: var(--vurgu-yazi); font-size: 13px; font-weight: 600;
}
.oruc-rozet b { color: var(--metin); font-weight: 700; }
.oruc-rozet small { color: var(--metin-2); font-weight: 500; margin-left: auto; }
.oruc-rozet.disarida { background: var(--uyari-yumusak); color: var(--uyari-yazi); }
/* Bugün: Hareket & uyku kompakt kartı */
.hareket-kart .kart-ust { margin-bottom: 6px; }
.hareket-kart .makro { margin-bottom: 8px; }
.hareket-satir { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--metin-2); align-items: center; }
.hareket-satir b { color: var(--metin); font-weight: 700; }
.baglanti.satir-ici { display: inline; padding: 0; min-height: 0; font-size: inherit; text-decoration: underline; }
.rozet-egzersiz { background: var(--vurgu-yumusak); color: var(--vurgu-yazi); margin-left: 4px; }
.rozet-hc { background: rgba(59, 130, 246, 0.15); color: var(--vurgu-2); }
.cubuk-dolgu.tam { background: var(--basari); }
.istatistik b small { font-size: 12px; font-weight: 600; color: var(--metin-2); }
/* Ayarlar: öğün hatırlatıcı satırları */
.hatirlatma-satir { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--cizgi); padding: 4px 0; }
.hatirlatma-satir:first-of-type { border-top: 0; }
.hatirlatma-satir > span { flex: 1; font-weight: 600; font-size: 15px; }
.hatirlatma-satir .giris { width: 118px; flex: none; }
/* Plan öner formu: öğün düzeni alt izgarası */
.form-satir .form-izgara { margin-top: 2px; }
.form-satir .form-izgara .form-satir { margin-bottom: 4px; }

/* ---------- Hesap (Ayarlar kartı) ve Topluluk ---------- */
.rozet-premium { background: rgba(224, 160, 32, 0.18); color: var(--uyari-yazi); }
/* Geliştirici modu rozeti (Gemini kartı başlığı, Hakkında "Geliştirici modu açık"); mod kapalıyken hiç çizilmez */
.rozet-gelistirici { background: rgba(168, 85, 247, 0.15); color: var(--makro-y); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
/* Hakkında sürüm etiketi: dokunulabilir (7 dokunuş → geliştirici şifresi) ama düğme gibi görünmez */
.surum-etiketi { background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 12px; color: var(--metin-2); min-height: 32px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.gelistirici-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.kota-liste { border-top: 1px solid var(--cizgi); }
.kota-liste .kota-satir:first-child { border-top: 0; }
.hesap-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; margin-bottom: 8px; }
.hesap-ozet b { font-weight: 700; }
.kota-satir { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; border-top: 1px solid var(--cizgi); }
.kota-satir:first-child { border-top: 0; }
.kota-satir > span:first-child { flex: 1; }
.kota-satir .cubuk { width: 90px; flex: none; }
.kota-satir small { color: var(--metin-2); white-space: nowrap; }
.cihaz-satir { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--cizgi); font-size: 14px; }
.cihaz-satir > span { flex: 1; min-width: 0; }
.cihaz-satir small { display: block; color: var(--metin-2); font-size: 12px; }
.riza-satir { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin: 4px 0 10px; }
.riza-satir input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--vurgu); }
.riza-satir label { line-height: 1.35; }
.hesap-adimlar { padding-left: 18px; margin: 6px 0; font-size: 13px; line-height: 1.4; color: var(--metin-2); list-style: decimal; }
.hesap-adimlar li { margin-bottom: 4px; }
.tl-arac { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.tl-icerik { display: flex; flex-direction: column; gap: 12px; }
.tl-segment button { font-size: 14px; }
.akis-kart.benim { border-left: 4px solid var(--vurgu); }
.akis-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.akis-ust b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akis-degerler { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--metin-2); }
.akis-deger b { color: var(--metin); font-weight: 700; }
.akis-deger.tam b { color: var(--vurgu-yazi); }
/* --- §23 diyet uygunluk rozeti --- */
.rozet-uyari { background: var(--uyari-arka, #fde8e8); color: var(--uyari, #b02a2a); }

/* --- §21 etiket --- */
.akis-etiket { margin: 8px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etiket-ad { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--yuzey-2, #f2f2f2); color: var(--metin); }
.etiket-bekleyen { opacity: .7; font-style: italic; }
.etiket-kaldir { border: 0; background: none; cursor: pointer; color: var(--metin-2); font-size: 12px; padding: 0 2px; }

/* --- §20 fotoğraf --- */
/* Yer tutucu kutu: fotoğraf gelene kadar (ve süresi dolduğunda) yüksekliği KORUR, yoksa akış
   fotoğraf indikçe zıplar. aspect-ratio ile sabit oran, içerik kırpılarak oturur. */
.akis-foto { margin: 10px 0 0; border-radius: 12px; overflow: hidden; background: var(--yuzey-2, #f2f2f2);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.akis-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-durum, .foto-bos { font-size: 13px; color: var(--metin-2); text-align: center; padding: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--yuzey-2, #f2f2f2); display: flex; align-items: center; justify-content: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-harf { font-weight: 700; color: var(--metin-2); font-size: 14px; }
.avatar-buyuk { width: 48px; height: 48px; font-size: 20px; margin-right: 4px; }
.foto-onizleme { position: relative; border-radius: 12px; overflow: hidden; background: var(--yuzey-2, #f2f2f2);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.foto-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-kaldir { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%; }
.onay-satir { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 8px; }
.akis-not { margin: 8px 0 0; font-size: 14px; font-style: italic; color: var(--metin); white-space: pre-line; }
.tebrikler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tebrik-dugme {
  min-height: 44px; min-width: 64px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cizgi);
  background: var(--arka); color: var(--metin); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.tebrik-dugme:active { transform: scale(0.96); }
.tebrik-dugme.aktif { background: var(--vurgu-yumusak); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.tebrik-dugme:disabled { opacity: 0.5; }
.tebrik-sil { margin-left: auto; font-size: 13px; }
.lig-tablo tr.benim td { background: var(--vurgu-yumusak); font-weight: 600; }
.lig-tablo td small { color: var(--metin-2); font-weight: 500; }
.davet-kodu { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: var(--arka); }
.davet-kodu b { font-size: 28px; letter-spacing: 3px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; user-select: all; -webkit-user-select: all; }
.davet-kodu small { color: var(--metin-2); font-size: 12px; }
.paylas-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--cizgi); font-size: 14px; }
.paylas-liste li:first-child { border-top: 0; }
.paylas-liste li span { color: var(--metin-2); }
.tl-profil .dugme-satir { margin-top: 4px; }

/* ===== §15 hızlı kayıt: barkod, favoriler, tarifler ===== */

/* Liste kaleminin yanında ikincil eylem (sil/düzenle) — kalem tam genişliği kaplar, ikon sağda durur. */
.liste-kalem-sarmal {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--cizgi);
}
.liste-kalem-sarmal:last-child { border-bottom: 0; }
.liste-kalem-sarmal .liste-kalem { border-bottom: 0; }
.liste-kalem-sarmal .ikon-dugme { flex: 0 0 auto; align-self: center; margin-right: 8px; }

/* Barkod kamera görünümü: video + hedef çerçevesi. Yükseklik sabit ki tarama sırasında sayfa zıplamasın. */
.barkod-kamera { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.barkod-kamera video {
  width: 100%; height: 260px; object-fit: cover; border-radius: 16px; background: #000; display: block;
}
.barkod-cerceve {
  width: min(80%, 320px); height: 3px; margin-top: -142px; border-radius: 2px;
  background: var(--vurgu); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); opacity: 0.9;
}
.barkod-kamera .not { margin: 90px 0 0; text-align: center; }

/* Tarif düzenleyicide malzeme satırı: ad + gram girişi + sil. */
.tarif-malzeme {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cizgi);
}
.tarif-malzeme:last-child { border-bottom: 0; }
.tarif-malzeme .sol { flex: 1; min-width: 0; }
.tarif-malzeme .birincil { font-weight: 600; }
.tarif-malzeme .ikincil { font-size: 13px; color: var(--metin-2); }
.giris-dar { width: 92px; flex: 0 0 auto; text-align: right; }

/* §16: alerji eşleşmesi gibi ciddi uyarılar kırmızı; tercih/kısıt uyarıları sarı kutuda kalır. */
.uyari-kutu-tehlike {
  border-color: var(--tehlike);
  background: color-mix(in srgb, var(--tehlike) 12%, transparent);
  color: var(--metin);
}

/* Haftalık değerlendirme kartı */
.degerlendirme .madde { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.degerlendirme .madde:last-child { border-bottom: 0; }
.degerlendirme .madde .alan { font-weight: 600; flex: 0 0 92px; }
.degerlendirme .madde .oneri { flex: 1; min-width: 0; }
.degerlendirme .guclu { margin: 8px 0 0; padding-left: 18px; }
.degerlendirme .guclu li { margin: 2px 0; }

/* Alışveriş listesi */
.alisveris-kalem { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--cizgi); }
.alisveris-kalem:last-child { border-bottom: 0; }
.alisveris-kalem .govde { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--metin); padding: 10px 0; min-height: 44px; }
.alisveris-kalem.alindi .govde .birincil { text-decoration: line-through; color: var(--metin-2); }
.alisveris-kalem .birincil { font-weight: 600; }
.alisveris-kalem .ikincil { font-size: 13px; color: var(--metin-2); }
.alisveris-kalem .kutu { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: none; border: 0; color: var(--vurgu); }

/* §17 diyetisyen: izin onay satırları ve gelen plan kartı */
.onay-satir { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; min-height: 44px; cursor: pointer; }
.onay-satir input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--vurgu); }
.onay-satir span { flex: 1; font-size: 14px; }
.kart-ic { border-top: 1px solid var(--cizgi); margin-top: 12px; padding-top: 12px; }
.kart-ic:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.plan-gelen { border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; margin-top: 10px; }