/* Diyet Asistanı — tasarım sistemi
   Tema: açık varsayılan, koyu hem sistem ayarıyla hem <html data-theme> ile. */

:root{
  --bg:#f5f8f6; --bg-2:#eaf1ec; --card:#ffffff; --card-2:#f7faf8;
  --ink:#0f2019; --ink-2:#2c4136; --mute:#5c6f64; --line:#e2eae5; --line-2:#d3ded7;
  --pri:#0e7a50; --pri-2:#17a76d; --pri-ink:#ffffff; --pri-soft:#e3f4eb; --pri-line:#bfe4d1;
  --acc:#0b6b86; --acc-soft:#e2f1f7;
  --ok:#0e7a50; --ok-bg:#e3f4eb; --warn:#9a5a00; --warn-bg:#fff2da; --bad:#b3261e; --bad-bg:#fde8e6; --info:#1a5fb4; --info-bg:#e5eefb;
  --grad:linear-gradient(135deg,#0e7a50 0%,#17a76d 100%);
  --sh-1:0 1px 2px rgba(15,32,25,.06),0 1px 3px rgba(15,32,25,.04);
  --sh-2:0 4px 16px rgba(15,32,25,.10),0 1px 3px rgba(15,32,25,.06);
  --sh-3:0 10px 34px rgba(15,32,25,.16);
  --r:16px; --r-s:12px; --r-l:22px; --tabh:60px;

  /* Tipografi ölçeği — altı kademe. Önceden 14 farklı punto elle konmuştu
     (11,5 · 12,5 · 13,5 · 14,5 gibi ara değerler dahil); gözle seçilemeyen
     farklar tutarsızlık hissi yaratıyordu. Her kademenin kendi satır
     yüksekliği ve harf aralığı var. */
  --t-xs:11px;   --lh-xs:1.4;   --ls-xs:.01em;   /* bölüm etiketi, tablo başlığı, dipnot */
  --t-sm:13px;   --lh-sm:1.45;  --ls-sm:0;       /* ikincil metin, rozet, not, küçük düğme */
  --t-md:15px;   --lh-md:1.5;   --ls-md:0;       /* gövde: liste başlığı, kart başlığı, düğme */
  --t-lg:18px;   --lh-lg:1.3;   --ls-lg:-.01em;  /* ekran başlığı, istatistik değeri */
  --t-xl:22px;   --lh-xl:1.2;   --ls-xl:-.02em;  /* vurgulu sonuç değeri */
  --t-xxl:26px;  --lh-xxl:1.15; --ls-xxl:-.025em;/* hero başlığı */
  /* Girdi alanları 16px'in ALTINA inemez: iOS Safari daha küçük puntolu bir
     alana odaklanınca sayfayı yakınlaştırıyor ve düzen bozuluyor. */
  --t-input:16px;

  /* Boşluk ölçeği — dikey ritim tek yerden. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --head:54px;
}
/* koyu tema paleti — sistem ayarı ve elle seçim için aynı değerler */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a1310; --bg-2:#101c16; --card:#15211b; --card-2:#1b2922;
    --ink:#e9f2ec; --ink-2:#c6d6cc; --mute:#8fa598; --line:#25332b; --line-2:#314237;
    --pri:#3fbf85; --pri-2:#59d49b; --pri-ink:#04231a; --pri-soft:#17302a; --pri-line:#2d4e3f;
    --acc:#56c2dd; --acc-soft:#142c36;
    --ok:#5fcf98; --ok-bg:#15301f; --warn:#f0b45f; --warn-bg:#382a10; --bad:#ff8f84; --bad-bg:#3a1b18; --info:#8fbcff; --info-bg:#152740;
    --grad:linear-gradient(135deg,#14322a 0%,#1c4a38 100%);
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 10px 34px rgba(0,0,0,.55);
  }
}
:root[data-theme=dark]{
  --bg:#0a1310; --bg-2:#101c16; --card:#15211b; --card-2:#1b2922;
  --ink:#e9f2ec; --ink-2:#c6d6cc; --mute:#8fa598; --line:#25332b; --line-2:#314237;
  --pri:#3fbf85; --pri-2:#59d49b; --pri-ink:#04231a; --pri-soft:#17302a; --pri-line:#2d4e3f;
  --acc:#56c2dd; --acc-soft:#142c36;
  --ok:#5fcf98; --ok-bg:#15301f; --warn:#f0b45f; --warn-bg:#382a10; --bad:#ff8f84; --bad-bg:#3a1b18; --info:#8fbcff; --info-bg:#152740;
  --grad:linear-gradient(135deg,#14322a 0%,#1c4a38 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 10px 34px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  padding-top:calc(var(--head) + var(--safe-t));padding-bottom:calc(var(--tabh) + var(--safe-b) + 18px);
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.01em}
a{color:var(--pri)}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num,.res .v,table.t td.n,table.t th.n{font-variant-numeric:tabular-nums}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--head) + var(--safe-t));padding-top:var(--safe-t);
  display:flex;align-items:center;gap:4px;background:var(--grad);color:#fff;padding-left:8px;padding-right:8px;box-shadow:var(--sh-1)}
:root[data-theme=dark] .top{border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .top{border-bottom:1px solid var(--line)}}
.top h1{flex:1;font-size:var(--t-lg);letter-spacing:var(--ls-lg);font-weight:660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.iconbtn{width:44px;height:44px;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;text-decoration:none;font-size:18px;cursor:pointer}
.iconbtn:active{background:rgba(255,255,255,.18)}
.iconbtn[hidden]{display:none}
#favBtn.on svg.i{fill:currentColor}

/* tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:var(--safe-b);box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.tabs a{flex:1;height:var(--tabh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mute);text-decoration:none;font-size:var(--t-xs);font-weight:600;position:relative}
.tabs a.on{color:var(--pri)}
.tabs a.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--pri)}
.tabs svg.i{width:23px;height:23px}

/* layout */
main{max-width:760px;margin:0 auto;padding:16px 14px 8px;outline:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px;box-shadow:var(--sh-1)}
.card h2{font-size:var(--t-md);line-height:var(--lh-md);margin-bottom:8px}
.muted{color:var(--mute)} .small{font-size:13px} .tiny{font-size:12px}
.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}
.mt{margin-top:12px} .mt-s{margin-top:6px} .mb{margin-bottom:12px}
.center{text-align:center}
.sect{font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:var(--ls-xs);font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:20px 4px 8px;display:flex;align-items:center;gap:8px}
.sect::after{content:"";flex:1;height:1px;background:var(--line)}

/* karşılama (ana sayfa) */
.hero{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--r-l);padding:20px 18px;margin-bottom:14px;box-shadow:var(--sh-2)}
.hero::after{content:"";position:absolute;right:-42px;top:-52px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.09)}
.hero .hi{font-size:var(--t-sm);line-height:var(--lh-sm);opacity:.85;font-weight:600;letter-spacing:.02em}
.hero h2{font-size:var(--t-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);font-weight:700;margin:3px 0 2px;letter-spacing:-.02em}
.hero .by{font-size:var(--t-sm);line-height:var(--lh-sm);opacity:.92;font-weight:600}
.hero .stats{display:flex;gap:8px;margin-top:16px;position:relative;z-index:1;flex-wrap:wrap}
.hero .stat{flex:1;min-width:88px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-s);padding:9px 11px;color:#fff;text-decoration:none;display:block}
.hero .stat b{display:block;font-size:var(--t-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg);font-variant-numeric:tabular-nums;line-height:1.2}
.hero .stat span{font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:var(--ls-xs);opacity:.85;display:block;margin-top:1px}
/* Sıfır olmayan iş yükü kutusu öne çıkar: beyaz zemin üstünde ince bir
   renk vurgusu. Yalnız renge güvenilmesin diye sayı da kalınlaşır. */
.hero .stat.uyari{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.42)}
.hero .stat.uyari b{font-weight:760}
.hero .stat.iyi{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}

/* imza */
.brandline{text-align:center;margin:18px 0 4px;font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--mute)}
.brandline b{display:block;color:var(--ink-2);font-weight:650;font-size:var(--t-sm);letter-spacing:.01em}
.brandline .r{display:inline-block;width:26px;height:2px;border-radius:2px;background:var(--pri);opacity:.5;margin-bottom:9px}

/* kutucuklar */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{display:flex;flex-direction:column;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;text-decoration:none;color:var(--ink);min-height:112px;box-shadow:var(--sh-1);transition:transform .12s ease,box-shadow .12s ease}
.tile:active{transform:scale(.975);box-shadow:var(--sh-2)}
.tile .ic{width:40px;height:40px;border-radius:12px;background:var(--pri-soft);color:var(--pri);display:flex;align-items:center;justify-content:center}
.tile b{font-size:var(--t-md);line-height:var(--lh-md);font-weight:650;letter-spacing:-.01em}
.tile span.d{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--mute);line-height:1.35}
.tile .pin{position:absolute}
.tile.acc-t .ic{background:var(--acc-soft);color:var(--acc)}

/* listeler */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh-1)}
.li{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:54px;cursor:pointer;background:none;width:100%;text-align:left;border-left:0;border-right:0;border-top:0}
.li:last-child{border-bottom:0}
.li:active{background:var(--pri-soft)}
/* Besin satırı: ad/değerler bir düğme, yıldız ayrı bir düğme */
.li .favli{flex:1;min-width:0;border:0;background:none;color:inherit;font-family:inherit;text-align:left;padding:0;cursor:pointer;min-height:44px}
.li .favbtn{flex:none;width:44px;height:44px;border:0;background:none;border-radius:11px;color:var(--line-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.li .favbtn.on{color:#e0a500}
.li .favbtn:active{background:var(--pri-soft)}
.li.fav{background:linear-gradient(90deg,var(--pri-soft) 0,transparent 40%)}
.li .ic{width:36px;height:36px;border-radius:11px;background:var(--pri-soft);color:var(--pri);display:flex;align-items:center;justify-content:center;flex:none}
.li .ic.warn{background:var(--warn-bg);color:var(--warn)}
.li .t{font-weight:600;font-size:var(--t-md);line-height:var(--lh-md)}
.li .s{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--mute);line-height:1.35}
.li .end{margin-left:auto;text-align:right;font-size:var(--t-sm);color:var(--mute);white-space:nowrap}
.chev::after{content:"›";color:var(--mute);font-size:22px;margin-left:6px;line-height:1}

/* formlar */
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:var(--t-sm);font-weight:600;color:var(--mute);margin-bottom:5px}
input[type=text],input[type=search],input[type=date],input[type=number],select,textarea{width:100%;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card-2);font-size:var(--t-input);min-height:46px;-webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23889d91' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:3px;gap:3px}
.seg label{flex:1;margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:9px 6px;border-radius:9px;font-weight:600;font-size:var(--t-sm);color:var(--mute);cursor:pointer;transition:background .12s,color .12s}
.seg input:checked+span{background:var(--card);color:var(--pri);box-shadow:var(--sh-1)}
.seg button{flex:1;border:0;background:none;min-height:44px;padding:9px 6px;border-radius:9px;font-weight:600;font-size:var(--t-sm);color:var(--mute);cursor:pointer;font-family:inherit}
.seg button.on{background:var(--card);color:var(--pri);box-shadow:var(--sh-1)}

/* düğmeler */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r-s);border:0;background:var(--pri);color:var(--pri-ink);font-weight:650;cursor:pointer;text-decoration:none;font-size:var(--t-md);box-shadow:var(--sh-1);transition:transform .1s ease,filter .1s ease}
.btn:active{transform:scale(.985);filter:brightness(.94)}
.btn.sec{background:var(--pri-soft);color:var(--pri);box-shadow:none}
.btn.ghost{background:transparent;color:var(--pri);border:1px solid var(--line-2);box-shadow:none}
.btn.danger{background:var(--bad-bg);color:var(--bad);box-shadow:none}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:44px;padding:0 13px;font-size:var(--t-sm);border-radius:10px}
.fab{position:fixed;right:16px;bottom:calc(var(--tabh) + var(--safe-b) + 14px);width:58px;height:58px;border-radius:50%;background:var(--grad);color:#fff;border:0;box-shadow:var(--sh-3);display:flex;align-items:center;justify-content:center;z-index:15;cursor:pointer}
.fab svg.i{width:28px;height:28px;stroke-width:2.2}

/* +/− sayaç */
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:3px;flex:none}
.stepper button{width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--pri);font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
.stepper button:active{background:var(--pri);color:var(--pri-ink)}
.stepper button:disabled{opacity:.35;box-shadow:none;cursor:default}
.stepper button.n{width:auto;min-width:52px;padding:0 6px;background:transparent;box-shadow:none;color:var(--ink);
  font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;border-radius:9px}
.stepper button.n:active{background:var(--pri-soft);color:var(--pri)}
.stepper button.n.z{color:var(--mute);font-weight:600}

/* değişim satırı */
.xrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.xrow:last-child{border-bottom:0}
.xrow.on{background:var(--pri-soft)}
.xrow .t{font-weight:640;font-size:var(--t-sm);line-height:1.25}
.xrow .s{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.xrow .lock{width:44px;height:44px;border:0;background:transparent;color:var(--mute);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.xrow .lock.on{color:var(--pri);background:var(--pri-soft)}

/* --- Hareket ---
   Ölçülü tutuluyor: klinik bir araçta günde onlarca kez açılan ekranda
   animasyon yorar. Yalnızca ekran geçişinde kısa bir solma ve mevcut sheet
   açılışı var; liste öğeleri kademeli girmiyor.
   prefers-reduced-motion açıksa hepsi kapanır — vestibüler rahatsızlığı
   olan kullanıcı için bu bir tercih değil, erişilebilirlik gereği. */
:root{ --gec:160ms; --egri:cubic-bezier(.2,.7,.3,1); }
#app{animation:gir var(--gec) var(--egri)}
@keyframes gir{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  #app{animation:none}
}

/* Onay kutuları parmakla kullanılabilir boyutta */
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; accent-color: var(--pri); }

/* chip'ler */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);padding:0 16px;border-radius:99px;font-size:var(--t-sm);font-weight:600;cursor:pointer;text-decoration:none;box-shadow:var(--sh-1)}
.chip.on{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;cursor:default}
.chips.wrap{flex-wrap:wrap;overflow-x:visible}
.chip.tag{cursor:pointer;user-select:none}
.chip.tag input{position:absolute;opacity:0;pointer-events:none}
.chip.tag:has(input:checked){background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.li .end.up{color:var(--warn);font-weight:700}
.li .end.down{color:var(--ok);font-weight:700}
.badge{display:inline-block;padding:4px 11px;border-radius:99px;font-size:var(--t-sm);font-weight:700;max-width:100%}
/* Uzun boşluksuz metin satır kırsın: nota yapıştırılmış bir bağlantı ya da
   "fıstık,ceviz,badem" gibi boşluksuz liste ekranı yatayda taşırıyor,
   çıktıda sağ kenardan kesilip kayboluyordu. Sayı hücreleri (td.n) nowrap
   olduğu için etkilenmez. */
#app,#sheet,.printdoc{overflow-wrap:anywhere}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.bad{background:var(--bad-bg);color:var(--bad)} .badge.info{background:var(--info-bg);color:var(--info)}
.note{border-radius:var(--r-s);padding:11px 13px;font-size:var(--t-sm);line-height:var(--lh-sm);margin:10px 0;background:var(--info-bg);color:var(--info);border-left:3px solid currentColor}
.note.warn{background:var(--warn-bg);color:var(--warn)} .note.bad{background:var(--bad-bg);color:var(--bad)} .note.ok{background:var(--ok-bg);color:var(--ok)}
.note b{font-weight:700}
/* Değişim listesi hesap adımları: her satır bir basamak, sayılar hizalı */
.adimlar{margin:0;padding-left:var(--s-5);font-size:var(--t-sm);line-height:var(--lh-sm)}
.adimlar li{padding:var(--s-2) 0}
.adimlar li+li{border-top:1px solid var(--line)}
.adimlar b{font-variant-numeric:tabular-nums}

/* sonuçlar */
.res{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:0}
.res .l{color:var(--mute);font-size:var(--t-sm);line-height:var(--lh-sm)}
.res .v{font-weight:700;font-size:var(--t-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg);text-align:right}
.res.hl{background:var(--pri-soft);margin:6px -16px;padding:12px 16px;border-radius:var(--r-s);border-bottom:0}
.res.hl .v{color:var(--pri);font-size:var(--t-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl);letter-spacing:-.02em}
.res.hl .l{color:var(--pri);font-weight:600;opacity:.9}
.res .sub{display:block;font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--mute);font-weight:400;margin-top:2px}
.res.hl .sub{color:var(--pri);opacity:.8}

/* çubuklar */
.bar{height:9px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-bottom:10px}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .25s ease}
.bar.over>i{background:var(--bad)}
/* İstatistik şeridi: kutu sayısı değişken (boş değerler gösterilmiyor) */
.macros{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;text-align:center}
.macros b{display:block;font-size:var(--t-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg);font-variant-numeric:tabular-nums}
.macros small{display:block;color:var(--mute);font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:var(--ls-xs)}

/* Sayının yanındaki birim: "52 g" tek parça ve aynı kalınlıktaydı, göz sayıyı
   birimin içinden ayıklamak zorunda kalıyordu. Birim küçük, soluk ve normal
   kalınlıkta yazılır; tabular rakam kuralı birime uygulanmaz. */
.vu{font-style:normal;font-weight:500;color:var(--mute);margin-left:3px;
  font-size:var(--t-sm);line-height:1;letter-spacing:0;font-variant-numeric:normal;white-space:nowrap}
.macros .vu{font-size:var(--t-xs);margin-left:2px}
.res .vu{font-size:var(--t-sm)}
.res.hl .vu{color:var(--pri);opacity:.72}
/* Kalan yağ eksiye düşerse kutu kırmızı: hedef tutarsız */
.macros .eksi b,.macros .eksi small{color:var(--bad)}
.macros small.alt{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--mute);opacity:.8;margin-top:1px;line-height:1.25}

/* Kilo grafiğinde hedef çizgisi */
.chart .hedef{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:5 4;opacity:.85}
.chart text.hedefe{fill:var(--warn);font-size:9px;font-weight:700}
.sticky-tot{position:sticky;top:calc(var(--head) + var(--safe-t));z-index:10;margin:-16px -14px 12px;padding:11px 14px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}

/* alt sayfa */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;max-width:760px;max-height:88vh;background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;display:flex;flex-direction:column;padding-bottom:var(--safe-b);animation:up .2s cubic-bezier(.2,.8,.3,1);box-shadow:var(--sh-3)}
@keyframes up{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px 18px;font-size:var(--t-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg);font-weight:650}
.sheet-body{overflow-y:auto;padding:6px 16px 20px;-webkit-overflow-scrolling:touch}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--safe-b) + 80px);transform:translateX(-50%);background:#182720;color:#fff;padding:11px 17px;border-radius:var(--r-s);font-size:var(--t-sm);line-height:var(--lh-sm);z-index:60;max-width:88vw;text-align:center;box-shadow:var(--sh-3)}
.toast[hidden]{display:none}
.toast .gmsg{margin-right:4px}
.toast .gbtn{flex:none;white-space:nowrap;margin-left:10px;min-height:44px;padding:0 14px;border:0;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:var(--t-sm);font-family:inherit;cursor:pointer}
.toast .gbtn:active{background:rgba(255,255,255,.3)}
.toast:has(.gbtn){display:flex;align-items:center;gap:2px;padding:6px 8px 6px 15px;text-align:left;max-width:92vw}
.updbar{position:fixed;left:12px;right:12px;bottom:calc(var(--tabh) + var(--safe-b) + 12px);z-index:55;
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--pri-line);
  border-radius:var(--r);padding:10px 10px 10px 16px;box-shadow:var(--sh-3);max-width:736px;margin:0 auto;
  animation:up .2s cubic-bezier(.2,.8,.3,1)}
.updbar span{flex:1;font-size:var(--t-sm);line-height:var(--lh-sm);font-weight:600}
.updbar .iconbtn{width:44px;height:44px;color:var(--mute)}

/* grafikler */
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--mute);font-size:10px}
.chart .ln{stroke:var(--pri);stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--pri)}
.chart .grid{stroke:var(--line);stroke-width:1}
.gchart{margin:8px 0 2px}
.gchart .sd{fill:none;stroke:var(--mute);stroke-width:1.1;opacity:.5}
.gchart .sd.s3{stroke-dasharray:3 3;opacity:.35}
.gchart .sd.med{stroke:var(--pri);stroke-width:2.2;opacity:1}
.gchart .dot{fill:var(--bad);stroke:var(--card);stroke-width:2.5}
.gchart .trail{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:4 3}
.gchart .tdot{fill:var(--acc);stroke:var(--card);stroke-width:1.5}

/* PAL çubuk grafiği (TÜBER Ek 4.8.1–4.8.2) */
.palchart{margin:6px 0 2px;min-width:320px;font-size:7px}
.palchart .gl{stroke:var(--line);stroke-width:.7}
.palchart .ax{fill:var(--mute);font-size:7px}
.palchart .esik{stroke:var(--acc);stroke-width:1.6;stroke-dasharray:5 3}
.palchart .pb.E{fill:var(--pri)} .palchart .pb.K{fill:var(--pri-2);opacity:.65}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sw.E{background:var(--pri)} .sw.K{background:var(--pri-2);opacity:.65}
.sw.L{height:0;border-top:2px dashed var(--acc);border-radius:0;vertical-align:3px}
.row.gap{flex-wrap:wrap;gap:6px 16px}
ul.tight{margin:2px 0 10px;padding-left:20px}
ul.tight li{margin:3px 0}

/* bilgi kartı */
.fc{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;cursor:pointer;user-select:none}
.fc .q{font-size:var(--t-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg);font-weight:650} .fc .a{font-size:17px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);width:100%}
.fc .hint{font-size:var(--t-sm);line-height:var(--lh-sm);color:var(--mute);margin-top:14px}

/* akordiyon */
details.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-1)}
details.acc>summary{padding:15px;font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";font-size:22px;color:var(--mute);font-weight:400;flex:none}
details.acc[open]>summary{border-bottom:1px solid var(--line)}
details.acc[open]>summary::after{content:"–"}
details.acc .body{padding:12px 15px 15px;font-size:var(--t-sm);line-height:var(--lh-sm)}
details.acc ul{margin:6px 0;padding-left:20px} details.acc li{margin:5px 0}

/* tablolar */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.scrollx table.t{margin:0;border:0}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-sm);line-height:var(--lh-sm);overflow:hidden}
table.t th,table.t td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t thead th{color:var(--mute);font-weight:700;font-size:var(--t-xs);line-height:var(--lh-xs);letter-spacing:var(--ls-xs);text-transform:uppercase;letter-spacing:.05em;background:var(--card-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
table.t tbody tr:last-child td{border-bottom:0}
table.t th.n,table.t td.n{text-align:right;white-space:nowrap}
table.t tbody tr:nth-child(even){background:var(--card-2)}
table.xt tfoot th{color:var(--ink);font-size:var(--t-sm);font-weight:700;border-bottom:0;border-top:2px solid var(--pri-line);background:var(--pri-soft)}
table.xt tfoot th.n{font-variant-numeric:tabular-nums}
details.acc table.t{font-size:var(--t-sm)}

/* TÜBER beslenme örüntüsü tablosu: grup başlığı, alt kırılım, seçili sütun */
table.t tr.gh td{background:var(--pri-soft);color:var(--pri);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em}
table.t td.sub2{padding-left:16px;color:var(--mute)}
table.t th.on,table.t td.on{background:var(--pri-soft);color:var(--ink);font-weight:700}
table.t thead th.on{color:var(--pri)}
table.t tr.on>td{background:var(--pri-soft);color:var(--ink);font-weight:650}

/* anket seçenekleri */
.li.opt{width:100%;text-align:left;font-family:inherit;font-size:inherit;color:inherit;border:0;cursor:pointer}
.li.opt.on{background:var(--pri-soft)}
.li.opt.on .t{color:var(--pri);font-weight:700}
.li.opt.on .end{color:var(--pri);font-weight:700}

/* boş durum */
.empty{text-align:center;color:var(--mute);padding:34px 18px;font-size:var(--t-sm);line-height:var(--lh-sm)}
.empty svg.i{width:38px;height:38px;opacity:.4;margin-bottom:10px}
.empty .eb{font-size:var(--t-md);line-height:var(--lh-md);font-weight:650;color:var(--ink)}
.empty .ea{margin:6px auto 0;max-width:34ch;font-size:var(--t-sm);line-height:var(--lh-sm)}
.empty .ed{margin-top:var(--s-4)}
.empty .ed .btn{min-width:200px}

/* Yalnızca ekran okuyucu için: görünmez ama okunur. clip yerine 1px kutu
   kullanılır; display:none olsa aria-live duyurusu hiç yapılmazdı. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- yükleme iskeleti ----
   Gri bloklar gelecek içeriğin yerini tutar. Parıltı hareketi bilgi taşımaz,
   yalnızca "çalışıyor" hissi verir; bu yüzden reduced-motion açıkken durur ve
   düz gri kalır (aşağıdaki genel kural animasyonu zaten sıfırlıyor). */
:root{--sk-a:var(--line);--sk-b:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--sk-b:rgba(255,255,255,.07)}}
:root[data-theme=dark]{--sk-b:rgba(255,255,255,.07)}
.sk{display:block;border-radius:8px;background:var(--sk-a);
  background-image:linear-gradient(90deg,transparent 0,var(--sk-b) 50%,transparent 100%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:skpar 1.25s linear infinite}
@keyframes skpar{from{background-position:-110% 0}to{background-position:110% 0}}
.sk-t{height:12px;margin:8px 0}          /* metin çizgisi */
.sk-t2{height:10px;opacity:.7}           /* ikincil metin çizgisi */
.sk-v{height:24px;margin:10px 0;width:46%;border-radius:10px}  /* vurgulu değer */
.sk-in{height:44px;border-radius:var(--r-s)}                    /* girdi alanı */
.sk-ico{width:38px;height:38px;border-radius:11px;flex:none}
.sk-gr{height:150px;border-radius:var(--r-s);margin-top:var(--s-2)}
.skr{margin-bottom:var(--s-3)}
.skr:last-child{margin-bottom:0}
.skr .sk-t+.sk-t{display:inline-block;margin-left:var(--s-3)}
.skli{display:flex;align-items:center;gap:var(--s-3);padding:12px 14px;border-bottom:1px solid var(--line)}
.skli:last-child{border-bottom:0}
.skli>span:last-child{flex:1}
.skli .sk-t{margin:5px 0}
@media (prefers-reduced-motion:reduce){.sk{background-image:none}}

/* yazdırma görünümü */
/* ---- yazdırma / PDF çıktısı ----
   Danışanın elinde kalan tek şey bu kâğıt; ekrandan bağımsız bir belge gibi
   kurulur. Puntolar bilerek pt cinsinden ve token dışıdır: token ölçeği ekran
   için px'tir, kâğıtta fiziksel birim gerekir. Renk tek başına bilgi taşımaz;
   gri tonlu yazıcıda da ayırt edilebilsin diye kalınlık ve çizgi kullanılır. */
.printdoc{background:#fff;color:#000;padding:20px;border-radius:var(--r);border:1px solid var(--line);
  font-size:10.5pt;line-height:1.45}
/* başlık kademeleri: belge adı > bölüm > satır */
.printdoc h2{font-size:15pt;line-height:1.2;letter-spacing:-.01em;margin:0 0 2px}
.printdoc h3{font-size:11pt;line-height:1.25;margin:0 0 4px;padding-bottom:2px;
  border-bottom:1px solid #bbb;font-weight:700}
.printdoc h3 .ince{font-weight:400;font-size:9pt;color:#555}
.printdoc .alt{font-size:9.5pt;color:#555;margin-bottom:2px}   /* belge alt başlığı */
.printdoc .sat{font-size:9.5pt}                                /* tek satırlık bilgi */
.printdoc .blok{margin-top:12px}                               /* sayfa sonu bölünmeyecek bölüm */
.printdoc table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:9.5pt}
.printdoc caption{caption-side:top;text-align:left;font-weight:700;font-size:10pt;padding-bottom:4px}
.printdoc th,.printdoc td{padding:5px 6px;text-align:left;border-bottom:1px solid #ddd}
.printdoc thead th{border-bottom:1.4px solid #333;border-top:1.4px solid #333;
  font-size:8.5pt;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.printdoc tfoot th{border-top:1.4px solid #333;border-bottom:0;font-weight:700}
.printdoc tbody tr:nth-child(even) td{background:#f6f6f6}   /* zebra: gri tonluda da okunur */
.printdoc th.n,.printdoc td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Öğün ayırıcı satır: eskiden yalnız açık yeşil zemindi, gri tonlu yazıcıda
   kaybolurdu. Artık koyu zemin çizgisi ve üst kenarla ayrılıyor. */
.printdoc .mh td{background:#e6e6e6;font-weight:700;border-top:1px solid #999;border-bottom:1px solid #999}
.printdoc .ft{font-size:8pt;color:#555;margin-top:16px;border-top:1px solid #999;padding-top:6px}
.printdoc .antet{border-bottom:2px solid #0e7a50;padding-bottom:8px;margin-bottom:14px}
.printdoc .antet .ad{font-size:12pt;font-weight:700;color:#0e7a50}
.printdoc .antet .il{font-size:9pt;color:#555;margin-top:2px}
.printdoc ul{margin:4px 0 0;padding-left:18px}
.printdoc li{margin:1px 0}
.printdoc svg{max-width:100%;height:auto}

@media print{
  /* A4, üstte antet için biraz daha pay; altta yinelenen dipnot payı */
  @page{size:A4;margin:14mm 13mm 20mm}
  body{background:#fff;padding:0;color:#000}
  .top,.tabs,.fab,.noprint,.toast,.sheet-wrap,.skel{display:none!important}
  main{padding:0;max-width:none}
  /* Zebra ve öğün zemini yazıcıda da basılsın; yoksa satırlar birbirine girer. */
  .printdoc{border:0;padding:0;border-radius:0;font-size:10pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Sayfa sonu denetimi: başlık kendi bölümünden kopmaz, satırlar ortadan
     bölünmez, tablo başlığı her sayfada yinelenir. */
  .printdoc h2,.printdoc h3{break-after:avoid;page-break-after:avoid}
  .printdoc .blok{break-inside:avoid;page-break-inside:avoid}
  .printdoc tr,.printdoc .li{break-inside:avoid;page-break-inside:avoid}
  .printdoc thead{display:table-header-group}
  .printdoc tfoot{display:table-footer-group}
  .printdoc .antet{break-after:avoid;page-break-after:avoid}
  /* Dipnot akışta, belgenin sonunda kalır ve ortadan bölünmez.
     Her sayfaya yinelenen bir dipnot position:fixed ile denendi; tarayıcı
     bunu her sayfanın içerik alanının dibine koyuyor ve oradaki metnin
     üstüne biniyor. Sayfa numarası ile tarih zaten tarayıcının kendi
     yazdırma altlığından geliyor: CSS'ten sayfa numarası üretmek mümkün
     değil, @page margin box'ları desteklenmiyor. */
  .printdoc .ft{break-inside:avoid;page-break-inside:avoid}
  /* Bağlantı adresleri kâğıtta anlamsız; metin siyah ve düz kalır. */
  .printdoc a{color:#000;text-decoration:none}
  h1,h2,h3{orphans:3;widows:3}
  p,.printdoc .sat{orphans:2;widows:2}
}
}