/* Ortak görünüm (ansiklopedi ile aynı): index.html, ocr.html, ansiklopedi.html. Yazı tipleri fonts/ansiklopedi.css'te.
   --ok/--okbg: marka rengi (kobalt, 15.10.2026: düğme, bağlantı, sekme, alt menü). --yesil/--yesilbg: risk düzenindeki yeşil (uyarısız/doğal madde, "bulunamadı" kararı, düşük besin değeri); marka rengi değişse de yeşil kalır. */
:root{--bg:#FFFFFF;--card:#FFFFFF;--line:#E3E5E3;--ok:#2741C8;--ink:#1B211E;--mute:#5A615C;
--amb:#8A5A00;--ambbg:#FFF3D1;--hi:#A4470B;--hibg:#FCE9DA;--red:#B3261E;--redbg:#FBE9E7;--okbg:#E8ECFB;--yesil:#1F4D3A;--yesilbg:#E6EFE9;--sunk:#F1F2F1;
--hf:"Manrope",system-ui,sans-serif;--bf:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--tgida:#6A3FB8;--tgidabg:#F1EBFA;--tkoz:#A3307A;--tkozbg:#F9E9F3;--ttem:#00717D;--ttembg:#E1F2F3;
--warn:var(--hi);--warnbg:var(--hibg);--yel:var(--amb);--yelbg:var(--ambbg);--unbg:var(--sunk);
--onok:#fff;--okline:#C9D2F5;--notr:#8A8F8B;--hic:#A4470B;--ambc:#D9A42B;--bos:#B9BDB9;--cam:rgba(255,255,255,.72);--camline:rgba(27,33,30,.08);color-scheme:light}
/* Koyu tema (17.10.2026, kullanıcı isteği; 04.10.2026'daki görünüm yenilemesinde kaldırılmıştı): <html data-tema="koyu"> iken; js/tema.js koyar
   (Profilim > Ayarlar > Görünüm: telefona göre, açık ya da koyu). Aynı belirteçlerin koyu karşılıkları;
   sayfa dosyalarında sabit yazılmış renklerin koyu karşılığı o dosyanın sonundaki koyu tema bloğunda. Ana renk ve tür renkleri koyu zeminde açık tonda, üstlerindeki yazı koyu (--onok);
   risk renkleri aynı anlamda kalır (turuncu uyarı, amber dikkat, yeşil, gri), yalnızca açık tona geçer.
   Şerit ve nokta dolguları (yazı değil) --hic ile --ambc: koyu temada yazı rengi --hi (#FF9E66) ile --ambc aynı parlaklıktaydı (1,01:1, renk körlüğünde ayırt edilmiyor);
   --hic daha koyu ve doygun, --ambc'ye karşı 1,9:1, kart zeminine karşı 4,5:1 (19.10.2026). Dikkat ile yeşil de aynı parlaklıktaydı (#E0B045/#7CC9A0, 1,02:1):
   --ambc daha açık sarı (#EFC64E), --yesil biraz koyu (#61B48A), aralarında ve yeşil ile --hic arasında 1,53:1; --ambc 9 px nokta olarak "açık zemin" sınırının (göreli parlaklık 0,6) altında (19.10.2026; tarayıcı testi 5. grup her risk dolgusu çiftini
   parlaklık ya da renk körlüğü benzetimiyle ölçer). Paylaşım ve rozet kartı görseli (canvas) her zaman açık kalır.
   Yeni renk sabit yazılmaz: belirteç kullanılır ya da koyu karşılığı bu bloğa/sayfanın koyu bloğuna eklenir (tarayıcı testi 5. grup koyu temada okunmayan yazıyı yakalar). */
:root[data-tema="koyu"]{color-scheme:dark;--bg:#0F1211;--card:#181C1A;--line:#2E3431;--ok:#93A6FF;--ink:#E6E9E7;--mute:#A2A9A4;
--amb:#E9B949;--ambbg:#2F260E;--hi:#FF9E66;--hibg:#36200F;--red:#FF8A80;--redbg:#3B1A18;--okbg:#1D2546;--yesil:#61B48A;--yesilbg:#14261D;--sunk:#222725;
--tgida:#BBA2F5;--tgidabg:#2A1F45;--tkoz:#F09ACB;--tkozbg:#3A1830;--ttem:#62CCD6;--ttembg:#0E2C2F;
--onok:#0D1433;--okline:#34407A;--notr:#8F9590;--hic:#E0552B;--ambc:#EFC64E;--bos:#4A504C;--cam:rgba(24,28,26,.72);--camline:rgba(255,255,255,.08)}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--bf)}
a{color:var(--ok);font-weight:600}
h1,h2,h3{font-family:var(--hf);font-weight:700;line-height:1.2}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--ok);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Yüzen alt menü (16.10.2026, kullanıcı isteği: "yüzen bir şey olsa daha güzel olur"): ekranın kenarlarından 12 px, altından 10 px (+ çentik payı) içeride,
   yuvarlak köşeli ve gölgeli bir hap; geniş ekranda en fazla 440 px, ortada. Sayfanın alt boşluğu (body padding-bottom) ve Yukarı çık düğmesi (js/yukari.js) buna göre. */
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;max-width:440px;margin:0 auto;display:flex;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 1px 3px rgba(27,33,30,.08),0 8px 24px rgba(27,33,30,.12);overflow:hidden}
/* Yarı saydam alt menü, aşağı kayınca küçülür (16.10.2026, kullanıcı isteği: Instagram'daki gibi). Saydamlık yalnızca bulanıklaştırma destekleniyorsa:
   bulanıksız yarı saydam zeminde arkadaki yazı simgelerle karışır. Küçülme js/alt_menu.js'in koyduğu .kucuk sınıfıyla; yazılar opacity ile gizlenir
   (display:none değil), ekran okuyucu okumayı sürdürür. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tabbar{background:var(--cam);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-color:var(--camline)}}
.tabbar a{flex:1;max-width:240px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 4px 6px;font-size:11.5px;font-weight:600;color:var(--mute);text-decoration:none;transition:min-height .22s ease,padding .22s ease}
.tabbar a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:width .22s ease,height .22s ease}
.tabbar a span{max-height:18px;overflow:hidden;transition:opacity .18s ease,max-height .22s ease}
.tabbar.kucuk a{min-height:40px;padding:4px}.tabbar.kucuk a svg{width:22px;height:22px}.tabbar.kucuk a span{opacity:0;max-height:0}
@media (prefers-reduced-motion:reduce){.tabbar a,.tabbar a svg,.tabbar a span{transition:none}}
.tabbar a[aria-current="page"]{color:var(--ok)}
.tabbar a[data-tab="liste"]{display:none}   /* Liste şimdilik menüde yok (12.10.2026, kullanıcı kararı); sayfa ve veri güncellemesi çalışmaya devam eder. Geri açınca: html[data-ulke="TR"] ... {display:flex} (js/dil.js) */
/* Rozetler (js/arayuz_rozet.js; ocr.html ve ansiklopedi.html): madalya simgesi, kutlama kartı, Rozetlerim aile kartları, ekranın üstündeki küçük simge */
.rzs{display:inline-flex;flex:none;width:40px;height:40px}.rzs svg{width:100%;height:100%}.rzs.orta{width:56px;height:56px}.rzs.buyuk{width:88px;height:88px}
.rozetkut{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--okbg);border:1px solid var(--okline);border-radius:16px;padding:14px 44px 14px 14px;margin:10px 0}
.rozetkut .rzx{position:absolute;top:6px;inset-inline-end:6px;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;background:none;color:var(--ink);border:0;font-size:22px;line-height:1}
.rozetkut .rzu{font-size:13px;font-weight:600;color:var(--ok);text-transform:uppercase;letter-spacing:.04em}
.rzg{flex:1;min-width:0}.rza{font-family:var(--hf);font-weight:700;font-size:20px;line-height:1.2}.rzf{font-size:14px;color:var(--ok);font-weight:600}.rzp{margin:6px 0 0;font-size:14px}
.rzrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.rzlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.rozetkut .rzrow button,.rzaile .rzrow button{font:inherit;font-weight:600;min-height:44px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--ok);background:var(--ok);color:var(--bg);cursor:pointer}
.rzaile .rzrow button.alt{background:none;color:var(--ok)}.rozetkut .how,.rzaile .how{font-size:12px;color:var(--mute);margin-top:4px}
.rzaile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0}.rzaile.yakinda{opacity:.75}
.rzhd{display:flex;gap:12px;align-items:center}.rzaile h3{font-size:14px;margin:0;color:var(--mute);font-family:var(--bf);font-weight:600}
.rzbar{height:8px;border-radius:999px;background:var(--sunk);overflow:hidden;margin:10px 0 4px}.rzbar span{display:block;height:100%;background:var(--ok);border-radius:999px}
.rzil{font-size:13px;color:var(--mute)}
.rzks{display:flex;flex-wrap:wrap;gap:6px 4px;margin-top:10px}.rzk{display:flex;flex-direction:column;align-items:center;width:40px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}.rzk .rzs{width:32px;height:32px}.rzk:not(.on) .rzs{opacity:.6}.rzk.on{color:var(--ink);font-weight:600}
.okd{flex:none;margin-inline-start:auto;width:22px;height:22px;color:var(--ok)}.okd svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.okfil,.rfil{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:6px 14px;margin:0 0 6px;border-radius:999px;background:var(--card);color:var(--ok);border:1.5px solid var(--line);cursor:pointer}.okfil[aria-pressed="true"],.rfil[aria-pressed="true"]{border-color:var(--ok);background:var(--ok);color:var(--bg)}
/* Ürün türü renkleri (15.10.2026, kullanıcı isteği): Gıda mor (17.10.2026: çivitten mora; seçili Gıda düğmesi kobalt fotoğraf kartının hemen üstünde neredeyse aynı mavi görünüyordu), Kozmetik erik, Temizlik camgöbeği. Risk renklerinden (yeşil, amber, turuncu, kırmızı, gri) bilerek uzak;
   renk tek başına ayırt etmez, yanında hep türün adı yazar. data-tur="gida|koz|tem" taşıyan öğe --tur/--turbg alır: tür sekmeleri (.seg) ve tür etiketi (.turr) */
[data-tur="gida"]{--tur:var(--tgida);--turbg:var(--tgidabg)}[data-tur="koz"]{--tur:var(--tkoz);--turbg:var(--tkozbg)}[data-tur="tem"]{--tur:var(--ttem);--turbg:var(--ttembg)}
.seg button[data-tur]:not([aria-disabled="true"]){color:var(--tur)}
.seg button[data-tur][aria-checked="true"]{background:var(--tur);color:var(--onok)}
.turr[data-tur]{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:1px 8px;background:var(--turbg);color:var(--tur);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.turr[data-tur]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Birden çok sayfada aynı olan kurallar (U-07 8. adım, 15.10.2026; önce sayfaların kendi stilinde ayrı ayrı yazılıydı) */
/* Tür seçici (.seg): Etiket Oku'daki Gıda | Kozmetik | Temizlik anahtarının biçimi bütün tür seçicilerinde (Etiket Oku, Kaydedilenler, Rozetlerim, Topluluk, Ansiklopedi; 15.10.2026, kullanıcı isteği):
   gri hap zemin, seçili düğme dolu (türün renginde; "Tümü" ana renkte), seçili olmayan türün adı kendi renginde. Alt satır (<small>) düğmenin içinde ortalı; Ansiklopedi henüz olmayan türde kullanmaz (boy aynı kalsın diye) */
.seg{display:flex;gap:4px;padding:4px;margin:12px 0 8px;border:0;border-radius:999px;background:var(--sunk)}
.seg button{flex:1;min-width:0;min-height:40px;margin:0;padding:8px;border:0;border-radius:999px;background:transparent;color:var(--mute);font:inherit;font-weight:600;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--ok);color:var(--bg);box-shadow:0 1px 2px rgba(27,33,30,.12),0 2px 8px rgba(27,33,30,.06)}
.seg small{font-size:12px;font-weight:400}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* Hafif hareketler (17.10.2026, kullanıcı isteği): basılan düğme hafifçe içe göçer, açılan bölümün içeriği belirerek gelir. Sonuç kartları, özet şeridi ve alt sayfa
   css/ocr.css'te. Telefonda "hareketi azalt" açıksa hiçbiri çalışmaz (en alttaki blok). */
@keyframes belir{from{opacity:0;transform:translateY(8px)}}
@keyframes ac{from{opacity:0;transform:translateY(-4px)}}
button,.btn,label.camera{transition:transform .12s ease}
button:not(:disabled):active,.btn:active,label.camera:active{transform:scale(.97)}
details[open]>:not(summary){animation:ac .2s ease-out}
/* Küçük hareket detayları (17.10.2026, kullanıcı isteği: "ufak gözüken ama güzel detaylar"; sınıfları js/hareket.js ve js/alt_menu.js koyar): seçilen
   hap ya da düğme bir an büyüyüp yerine oturur (.pop), Kaydet'in çevresinde kısa bir halka (.halka), iş bitince düğmenin başında ✓ (.tamam), seçili
   sekmenin üstünde kayan işaret ve zıplayan simge, yeni rozet büyüyüp parlayarak gelir, sayfalar arası yumuşak geçiş (desteklemeyen tarayıcıda olduğu
   gibi). Yalnızca transform ve opacity; dokunuş yanıtı 250 ms'yi geçmez (kutlama ve sayma biraz uzun). Hareket hiçbir zaman risk anlamı taşımaz. */
:root{--h-kisa:.18s;--h-orta:.25s;--h-yay:cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{40%{transform:scale(1.06)}}
@keyframes halka{from{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(1.45)}}
@keyframes zipla{35%{transform:translateY(-4px)}70%{transform:translateY(1px)}}
@keyframes rozetgel{from{opacity:0;transform:scale(.5) rotate(-14deg)}70%{opacity:1;transform:scale(1.06) rotate(2deg)}}
@keyframes parla{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}
.pop{animation:pop var(--h-kisa) var(--h-yay)}
.halka{position:relative}.halka::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--ok);pointer-events:none;animation:halka .45s ease-out forwards}
.tamam::before{content:"\2713\00a0";display:inline-block;animation:pop var(--h-kisa) var(--h-yay)}
.tabbar a svg.zipla{animation:zipla .3s ease-out}
.sekme-isaret{position:absolute;top:0;left:-10px;width:20px;height:3px;border-radius:0 0 3px 3px;background:var(--ok);pointer-events:none}
.sekme-isaret.kay{transition:transform var(--h-orta) cubic-bezier(.3,.7,.3,1)}
.rozetkut .rzs.buyuk{position:relative;animation:rozetgel .5s cubic-bezier(.2,.8,.3,1) both}
.rozetkut .rzs.buyuk::after{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ok) 30%,transparent),transparent 70%);pointer-events:none;animation:parla .7s .15s ease-out both}
@view-transition{navigation:auto}
.tabbar{view-transition-name:tabbar}   /* menü sayfa geçişinde yerinde durur, yalnızca içerik geçer */
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important}button,.btn,label.camera{transition:none}button:not(:disabled):active,.btn:active,label.camera:active{transform:none}.sekme-isaret.kay{transition:none}.rozetkut .rzs.buyuk::after{display:none}@view-transition{navigation:none}}