/* ====================================================================
   MyHealthAssist — "Saha Raporu" tasarim sistemi (koyu — gece laboratuvari)
   Urun etiketi / laboratuvar raporu dilinden beslenir:
   - koyu karbon zemin + acik murekkep + fosforlu cam yesili marka
   - besin tablosu cizgi hiyerarsisi (acik ust cizgili rapor bloklari)
   - IMZA: fosforlu kalem isaretleri — koyu zeminde daha cok parlar
   Tipografi: Bricolage Grotesque (baslik) / Schibsted Grotesk (govde)
              / IBM Plex Mono (veri, etiket, kod)
   ==================================================================== */

:root {
  color-scheme: dark;
  /* ====================================================================
     PALET — NOTR ZEMIN + TEK EYLEM + DORT SINYAL

     2026-09-07: bu palet artik TUM UYGULAMANIN paleti. Onceden yalnizca
     telefonda gecerliydi (mobile.css'in @media (max-width: 760px) blogunda
     tanimliydi); masaustu eski "yesil-karbon" temada kaliyordu, yani ayni
     uygulama ekran genisligine gore IKI ayri renk dunyasi gosteriyordu.
     Tek kaynak artik burasi: mobile.css RENK tokeni tanimlamaz, yalnizca
     olcu/tipografi devralir.

     Iki kural testle kilitli (tests/js/mobil-arayuz.test.mjs):
       1) yuzeyler NOTR (kanal farki <= 12) — renkli yuzey icerigin rengini bozar
       2) --brand (eylem) ile --ok (uygun) AYNI OLAMAZ — bir renk iki is yapamaz
     Gerekce, kontrast olcumleri ve renk korlugu notu: docs/mobil-arayuz.md
     ==================================================================== */

  /* --- notr yuzeyler (griler kirmiziya degil SICAGA — kahve/kum tarafina kacik) --- */
  --bg:        #000000;   /* zemin */
  --panel:     #131211;   /* kart */
  --panel-2:   #1b1917;   /* ic yuzey */
  --panel-3:   #242120;
  --line:      #2c2825;   /* cizgi / damar */
  --line-2:    #1f1c1a;
  --ink:       #edeae3;   /* murekkep — ana metin + agir rapor cizgileri */
  --ink-2:     #0a0908;   /* en koyu blok (footer, kod) */

  /* metin */
  --text:      #edeae3;
  --text-dim:  #a39d94;
  --muted:     #8b857c;   /* kart uzerinde 5,1:1 — daha koyusu AA'nin altina duser */

  /* --- eylem: TEK renk, sinyal DEGIL (buton, aktif sekme, baglanti) --- */
  --brand:     #5ed4e6;   /* turkuaz */
  --brand-d:   #4cc2d4;
  --brand-ink: #091b1e;
  --brand-glow: rgba(94, 212, 230, .28);

  /* IMZA: fosforlu kalem isareti + uzerindeki koyu metin.
     Eskiden ayri bir sari (#f3ea5f) idi. Paletin "tek eylem rengi" kurali
     geregi EYLEM RENGINE baglandi: isaret de uygulamanin kendi kalemidir, ayri
     bir sari onu kehribar uyarisiyla karistiriyordu. 2026-09-08: eylem rengi
     filiz yesilinden (#c6de6e, 73 deg) turkuaza (#5ed4e6, 188 deg) tasindi;
     isaret onunla birlikte dondu. */
  --mark:      #5ed4e6;
  --mark-warn: #f0b429;
  --mark-bad:  #f0553c;
  --on-mark:   #091b1e;

  /* kategori vurgusu (varsayilan = gida = eylem rengi) */
  --accent:      #5ed4e6;
  --accent-2:    #4cc2d4;
  --accent-ink:  #091b1e;
  --accent-soft: rgba(94, 212, 230, .12);
  --accent-line: rgba(94, 212, 230, .32);

  /* --- sinyal: kararin dort hali ---
     "Zararli" (nesnel kanserojen) bilerek OTEKI ailede bir leylak: o bulgu
     senin profilinden gelmez, urunun kendisinden gelir. */
  --ok:   #35c08a;   /* uygun   — zumrut  (filizden 85 derece uzak) */
  --warn: #f0b429;   /* dikkat  — kehribar */
  --bad:  #f0553c;   /* kacin   — kor */
  --harm: #a98be8;   /* zararli — leylak */
  --mark-harm: #a98be8;
  --ok-soft:   rgba( 53, 192, 138, .13);
  --warn-soft: rgba(240, 180,  41, .13);
  --bad-soft:  rgba(240,  85,  60, .14);
  --harm-soft: rgba(169, 139, 232, .14);

  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1180px;
  /* YAPISKAN BASLIGIN YUKSEKLIGI — altina yapisan her sey (.rt-bar, .finder,
     .browse-filters, scroll-padding) BU degeri kullanir. Buradaki sayi yalnizca
     ILK KAREYE ait yedektir: app.js navYuksekligiOlc() ile gercek yuksekligi olcup
     yeniden yazar. Elde yazili sayi tutmuyordu — .rt-bar `top: 72px` derken masaustu
     nav 72.5px, mobilde `top: 58px` derken nav 62px olculdu, yani baslik yapiskan
     cubugun ustunden 4px yiyordu (= "ust uste geliyor"). */
  --nav-h:     72px;
  --shadow:    0 20px 48px -24px rgba(0, 0, 0, .7);
  --shadow-sm: 0 10px 26px -14px rgba(0, 0, 0, .55);
  --shadow-glow: 0 16px 40px -18px var(--accent-line);

  --font:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* kategori temalari — dort dikeyi ayirt eder ama HICBIRI SINYAL renklerine
   yaklasmaz (yoksa "kozmetik" rengi "dikkat" diye okunur): gida = eylem rengi,
   kozmetik gul, tekstil kot mavisi (boya), bebek seftali. Hepsi kart uzerinde >7:1. */
[data-cat="gida"]     { --accent:#5ed4e6; --accent-2:#4cc2d4; --accent-ink:#091b1e;
                        --accent-soft:rgba(94,212,230,.12); --accent-line:rgba(94,212,230,.32); }
[data-cat="kozmetik"] { --accent:#e8a2ac; --accent-2:#d78f9a; --accent-ink:#2a1013;
                        --accent-soft:rgba(232,162,172,.12); --accent-line:rgba(232,162,172,.32); }
[data-cat="tekstil"]  { --accent:#82a6d8; --accent-2:#6f93c6; --accent-ink:#0b1420;
                        --accent-soft:rgba(130,166,216,.12); --accent-line:rgba(130,166,216,.32); }
[data-cat="bebek"]    { --accent:#f2b79a; --accent-2:#e0a487; --accent-ink:#2a1409;
                        --accent-soft:rgba(242,183,154,.12); --accent-line:rgba(242,183,154,.32); }

/* KESIT IKON SETI (frontend/icons/kesit-ikonlar.svg, cagri yuzu icons.js).
   Emoji'nin yapamadigi iki sey burada oluyor:
     1) Boyut EM uzerinden -- ikon, yanindaki metinle birlikte buyur/kuculur.
     2) Renk currentColor -- ikon, icinde bulundugu ogenin rengini devralir,
        yani dort sinyal rengi ona ek is yapmadan uygulanir:
        .badge.bad .ik kirmizi cizer, .badge.ok .ik yesil.
   Emoji her cihazda kendi rastgele rengiyle ciziliyordu; "palet TEK yerde"
   kurali onda hic gecerli degildi. */
.ik      { width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: none; }
.ik-lg   { width: 1.5em;  height: 1.5em; }
.ik-sm   { width: 1em;    height: 1em; vertical-align: -.14em; }


/* IKON YUVALARI. Asagidaki kutular emoji GLIFI icin olculmustu: sabit kutu +
   font-size. SVG ikonun boyu yaninda metin olmadigi icin em'e birakilamaz --
   her yuvaya ACIK olcu verilir. Kutu boylari degismedi; yalnizca icindeki
   isaret emoji yerine cizim oldu. */
.cat-ico  .ik { width: 26px; height: 26px; }   /* 52px kategori karti */
.fc-ico   .ik { width: 22px; height: 22px; }   /* 42px ozellik karti */
.vh-ico   .ik { width: 27px; height: 27px; }   /* 54px karar kahramani */
.tool-ico .ik { width: 23px; height: 23px; }   /* 46px arac karti */
.hist-ico .ik { width: 21px; height: 21px; }   /* 40px gecmis satiri */
.dz-ico   .ik { width: 36px; height: 36px; }   /* birakma alani */
.rt-ico   .ik { width: 15px; height: 15px; vertical-align: -.16em; }
.em       .ik { width: 22px; height: 22px; }   /* SCAN_TOOLS + BABY_HUB satirlari */

* { box-sizing: border-box; }
html { scroll-behavior: smooth;
  /* Yapiskan baslik varken scrollIntoView({block:"start"}) hedefi gorunumun TA TEPESINE
     koyar, yani hedefin ust --nav-h kadari basligin ALTINDA kalir. app.js bunu bes ayri
     yerde cagiriyor (#result, aday kutusu, ing karti, #st-result...); her birine tek tek
     ofset yazmak yerine kaydirmanin kendisine pay birakilir. +12px nefes payi. */
  scroll-padding-top: calc(var(--nav-h) + 12px); }
/* Sayfa govdesi ASLA yatay kaymaz. Genis icerik (tablo, karsilastirma seridi, uzun kod)
   kendi kutusu icinde kayar — bkz. .cmp-wrap, .tech-details pre. Bu koruma yoktu ve dar
   telefonda tek bir tasan oge butun sayfayi yana kaydirip duzeni bozuyordu.

   CLIP, HIDDEN DEGIL. `overflow-x: hidden` yazildiginda CSS overflow-y'yi de zorla `auto`
   yapar; html ve body KAYDIRMA KABI olur ve icindeki her `position: sticky` artik gorunume
   degil O KABA gore yapisir. Kap hic kaymadigi icin de HICBIR SEY YAPISMAZ: 2026-08-24'te
   olculdu, .nav ve .rt-bar sayfayla birlikte akip gidiyordu ("kayma" sikayeti). `clip`
   kaydirma kabi YARATMAZ (overflow-y visible kalir), dolayisiyla iki sozu birden tutar.
   Ayni sayfada ucu de olculdu — 3000px'lik bir oge eklenerek:
     hidden  -> nav yapisti: HAYIR | sayfa yana kayar: hayir
     clip    -> nav yapisti: EVET  | sayfa yana kayar: HAYIR   <-- secilen
     visible -> nav yapisti: EVET  | sayfa yana kayar: EVET (500px, korumasiz) */
html, body { max-width: 100%; overflow-x: clip; }

/* ===== Erisilebilirlik ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
}

/* auth tamamlanana kadar icerigi gizle; boot spinner gorunur kalir (anti-flash). */
html.auth-pending body > *:not(.boot) { visibility: hidden; }
html:not(.auth-pending) .boot { display: none; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.015em; }

.accent { color: var(--accent); }
/* IMZA: fosforlu kalem darbesi — basliklardaki vurgulu ifade */
.brand-accent {
  color: var(--on-mark);
  background: linear-gradient(178deg, transparent 18%, var(--mark) 20%, var(--mark) 88%, transparent 90%);
  padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark { background: var(--mark); color: var(--on-mark); padding: 0 .18em; border-radius: 3px; }
mark.warn { background: var(--mark-warn); box-shadow: inset 0 -2px 0 var(--warn); }
mark.bad  { background: var(--mark-bad);  box-shadow: inset 0 -2px 0 var(--bad); }

/* ---------------------------------------------------------------- boot */
.boot {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg); color: var(--text-dim);
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
}
.spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  display: inline-block; animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- shell */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ===================== NAV ===================== */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(16, 19, 16, .85);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.nav-in {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; padding: 13px 14px;
  display: flex; align-items: center; gap: 18px;
}
/* flex: 0 0 auto — LOGO KISILMAZ. Ust bar dolunca flex once logoyu kisiyordu; marka
   sozcugu bolunemez tek kelime oldugu icin kutusundan TASIP menunun altina giriyordu
   (olculdu: yazi sag kenari 439px, menu sol kenari 429px). Kisilma sirasi artik acik:
   logo sabit, once "MVP Asamasi" rozetleri duser (bkz. .nav-dar), sonra menu kayar. */
.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; cursor: pointer; }
/* Marka isareti = parmak izi cizgilerinden orulmus "M" (frontend/icons/logo.png).
   PNG'nin zemini SAYDAM: rozetin altina renkli kutu koymuyoruz, yoksa gradyanin
   mor/pembe gecisi kutunun icinde bogulur. Eski "✚" glifi 2026-09'da kaldirildi. */
.logo-badge {
  width: 32px; height: 32px; border-radius: 8px;
  display: block; object-fit: contain; background: transparent;
}
.logo .w-mid { color: var(--brand); }

.nav-links { display: flex; gap: 6px; margin-left: 4px;
  /* min-width:0 olmadan flex ogesi icerigin altina INMEZ ve tasma komsuya biner.
     Cok dar kalirsa serit yatay kayar — cubugu gizliyoruz, sayfa yatay kaymaz. */
  flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
/* Ust bar sigmiyor (app.js navSigdir SERIDIN tasmasini olcup isaretler). Feda sirasi:
   once "MVP Asamasi" rozetleri (sus), sonra secenek dolgusu daralir. E-posta ve
   son-yayin rozeti KALIR — biri kimin girdigini, oteki hangi surumun canli oldugunu soyler. */
.nav-dar .nav-tag { display: none; }
.nav-dar .nav-links a { padding: 8px 9px; }
/* her secenegin arkasinda cok saydam KARE kutu — hafifce "secenek" gibi dursun; tek satirda kalsin */
.nav-links a {
  padding: 8px 13px; border-radius: 4px; font-size: 14.5px; font-weight: 500; white-space: nowrap;
  color: var(--text-dim); transition: .15s; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .045);
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .09); }
.nav-links a.active {
  color: var(--on-mark); font-weight: 600; border-color: transparent;
  background: var(--mark);   /* duz sari kutu — eski egik highlighter degrade'sinin ust "yamuk cizgisi" kaldirildi */
  border-radius: 4px;
}
/* MVP asamasi rozeti: dikeyin henuz gida kadar olgun olmadigini DURUSTCE soyler.
   Menu tek satirda kalsin diye kucuk ve inline. */
.nav-tag {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: middle;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); color: var(--muted);
}
.nav-links a.active .nav-tag { background: rgba(0,0,0,.14); border-color: rgba(0,0,0,.2); color: var(--on-mark); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-right > * { flex: 0 0 auto; }
.nav-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim);
  font-family: var(--mono); white-space: nowrap; }
/* Uzun e-posta (abdullahinceince@gmail.com = 26 karakter) ust barin ucte birini yiyordu;
   kesilir ama SATIRDA KALIR — sarinca baslik yukselip yapiskan olculeri bozuyordu. */
#nav-email { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
/* sag ustteki son-yayin rozeti — her yayinla.ps1 kosusunda version.json'dan tazelenir */
.nav-build { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  font-family: var(--mono); padding-right: 2px; border-right: 1px solid var(--line);
  white-space: nowrap; }   /* "02 Eyl 00:06" uc satira sariyordu */
.nav-build .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.nav-toggle { display: none; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  width: 40px; height: 38px; border-radius: 8px; font-size: 18px; cursor: pointer; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 600; font-size: 14.5px; padding: 10px 18px; transition: .16s; white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); transform: translateY(-1px); }
.btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--accent-line); color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* ===================== PAGE ===================== */
/* DOLGU `both` DEGIL `backwards`. Ikisi bittikten sonra AYNI gorunur (son kare zaten
   ogenin dogal hali: opacity 1, transform none) ama `both` animasyonu SONSUZA KADAR
   "uygulanir" halde tutar: computed transform `none` yerine identity MATRIS kalir ve
   opacity animasyonu yiginlama baglami (stacking context) uretir. Ikisi birden, sayfa
   icindeki her `position: fixed` ogeyi viewport'a degil BU KUTUYA baglar.
   Tarayicida olculdu (2026-09-07, 375x812): katalogun filtre alt yapragi ekranin
   4940px asagisinda aciliyor, duzeltilince de sekme seridinin ALTINDA kaliyordu.
   `backwards` yalnizca animasyon BASLAMADAN onceki kareyi tutar; bitince hicbir sey
   uygulanmaz. Kilit: tests/js/referans-desenler.test.mjs */
.page { padding: 48px 0 30px; animation: rise .35s ease backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* eyebrow: mono ust-etiket — onunde kisa kalin cizgi (rapor bolum imi) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--accent); flex: none; }
.eyebrow a { cursor: pointer; }
.eyebrow a:hover { text-decoration: underline; }
.eyebrow i { font-style: normal; color: var(--muted); }

.page-head { margin-bottom: 30px; }
.page-head-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.page-title { font-size: clamp(30px, 5vw, 50px); margin-bottom: 12px; }
.page-title .badge { vertical-align: middle; margin-left: 8px; }
.page-sub { color: var(--text-dim); font-size: 16.5px; max-width: 640px; margin: 0 0 8px; }

/* ===================== HERO ===================== */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 64px 22px 56px; }
.hero h1 { font-size: clamp(34px, 4.8vw, 58px); margin: 0 0 20px; }
.hero .lead { color: var(--text-dim); font-size: clamp(16px, 1.5vw, 18.5px); max-width: 52ch; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 20px; }
.stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--brand); }
.stat span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* hero orneği: analiz raporu karti — sayfanin tezi */
.hero-report {
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--ink);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow);
}
.hr-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.hr-no { color: var(--ink); }
.hr-prod b { display: block; font-family: var(--display); font-size: 20px; }
.hr-prod span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hr-verdict { margin: 14px 0; padding: 10px 13px; border-radius: 8px; font-weight: 700; font-size: 14px;
  color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(154,107,0,.3); }
.hr-ings { font-family: var(--mono); font-size: 13px; line-height: 2; color: var(--text-dim);
  border-top: 1px solid var(--line); padding-top: 12px; }
.hr-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* bolum baslik: rapor bolumu gibi — kalin ust cizgi + sola dayali */
.section { margin-top: 84px; }
.section-head { border-top: 3px solid var(--ink); padding-top: 22px; margin-bottom: 36px; }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(25px, 3.4vw, 38px); margin-bottom: 10px; }
.section-head p { color: var(--text-dim); font-size: 16px; margin: 0; max-width: 60ch; }

/* ===================== CARDS / GRIDS ===================== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card-title { font-size: 19px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* veri satiri: etiket ..... deger (besin tablosu satiri) */
.data-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 14px; }
.data-row span { color: var(--text-dim); }
.data-row b { font-family: var(--mono); font-size: 13.5px; font-weight: 600; text-align: right; }

/* kategori kartlari (ana sayfa) */
.cat-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: .18s;
}
.cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.cat-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-glow); }
.cat-ico {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  font-size: 25px; background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 16px;
}
.cat-card h3 { color: var(--accent); font-size: 21px; margin-bottom: 10px; }
.cat-card p { color: var(--text-dim); font-size: 14.5px; margin: 0 0 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}

/* Platform yetenek kartlari (ana sayfa) — kategori kartlarindan farkli: yatay dizilim,
   ikon solda. Amac: "ne yapiyoruz" ile "hangi kategori" gorsel olarak KARISMASIN. */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-card {
  display: flex; gap: 16px; align-items: flex-start; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--brand); padding: 20px 22px; transition: .18s;
}
.feature-card:hover { transform: translateY(-3px); border-color: var(--line); border-left-color: var(--mark);
  box-shadow: var(--shadow-glow); }
.fc-ico { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  font-size: 21px; background: var(--brand-glow); border: 1px solid var(--line); }
.feature-card h3 { font-size: 16.5px; margin: 0 0 6px; line-height: 1.25; }
.feature-card p { color: var(--text-dim); font-size: 13.5px; margin: 0; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

/* ===================== NASIL CALISIR ===================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.step-n {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--brand-ink); background: var(--brand);
}
.step-emoji { font-size: 28px; margin-bottom: 10px; }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 14px; margin: 0; }

/* ===================== FIYATLANDIRMA ===================== */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px;
}
.plan.popular { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mark); color: var(--on-mark); border: 1px solid var(--on-mark);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.plan-price { font-family: var(--display); font-weight: 800; font-size: 38px; margin: 14px 0 4px; }
.plan-price small { font-size: 15px; color: var(--muted); font-weight: 500; }
.plan-desc { color: var(--text-dim); font-size: 13.5px; min-height: 38px; margin-bottom: 18px; }
.plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan li { font-size: 14px; color: var(--text-dim); display: flex; gap: 9px; }
.plan li::before { content: "✓"; color: var(--brand); font-weight: 800; }

/* karsilastirma tablosu */
.cmp-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cmp-table th, .cmp-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cmp-table th { font-family: var(--mono); color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.cmp-table td:first-child, .cmp-table th:first-child { text-align: left; color: var(--text); }
.cmp-table .yes { color: var(--brand); font-weight: 700; }
.cmp-table .no { color: var(--muted); }

/* ===================== TARAMA (scan) ===================== */
.scan-head {
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 28px;
}
.scan-head-row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.scan-head .cat-ico { margin-bottom: 0; }
.scan-head h1 { color: var(--accent); font-size: 29px; }
.scan-head .crumb { color: var(--text-dim); font-size: 14.5px; margin: 4px 0 0; }

.scan-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
/* Rapor modu: secilen urunun uzun raporu sag panele yazilir; dar sutunda okunmaz -> sag genisler. */
.scan-layout.report-mode { grid-template-columns: 1fr 1.4fr; }
#scan-side .undo-link { display: inline-block; margin-bottom: 4px; }

.tabs { display: flex; gap: 5px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; }
.tab {
  flex: 1; padding: 10px; border-radius: 7px; border: none; cursor: pointer; font-weight: 600; font-size: 14px;
  background: transparent; color: var(--text-dim); transition: .15s;
}
.tab.on { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); }

.dropzone {
  border: 2px dashed var(--accent-line); border-radius: var(--radius); padding: 38px 24px; text-align: center;
  background: var(--panel); transition: .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.drag { background: var(--accent-soft); border-color: var(--accent); }
.dropzone .dz-ico { font-size: 36px; margin-bottom: 10px; }
.dropzone h3 { font-size: 18px; margin-bottom: 6px; }
.dropzone p { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
/* Kamera / Dosya Seç — iki esit agirlikli yol, dar ekranda alt alta */
.dz-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dz-actions .btn { min-width: 148px; }

/* ADIM CUBUGU (mobile.css §8 telefonda bunu alt sekme seridinin ustune sabitler).
   Bu bloktaki olculer once app.js icinde SATIR ICI stildi; satir ici `display`
   CSS'ten !important'siz ezilemedigi icin sinifa tasindi — genis ekranin gorunumu
   birebir ayni kaldi. */
.cam-actions { display: flex; gap: 10px; margin-top: 12px; }
.scan-go { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.scan-prof { font-size: 13px; }
.scan-prof a { color: var(--accent); cursor: pointer; }
/* Adim cubugunun diger iki hali ve profil uyarisinin telefon govdesi YALNIZ dar
   ekranda cizilir. Genis ekranda tarama sayfasi degismedi. */
#scan-foto, #scan-yeni, .scan-prof-bos { display: none; }
/* Profil sihirbazinin serit + cubugu da telefona ait; genis ekranda form TEK
   PARCA kalir (uzun form masaustunde sorun degil, adimlara bolmek orada
   gereksiz tiklama uretirdi). */
.prof-adimlar, .prof-adim { display: none; }
.dz-preview { margin-top: 16px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
  background: #000; }
/* object-fit: COVER DEGIL contain. Etiket fotograflari dikey cekiliyor; cover onizlemeyi
   yatay bir serite kirpiyor ve kullanici ANALIZ ETMEDEN ONCE ne cektigini goremiyordu
   ("ekranin yarisi kesiliyor" saha bildirimi). Dar ekranda yukseklik viewport'a bagli. */
.dz-preview img { width: 100%; max-height: 44vh; object-fit: contain; display: block; }

/* max-height KALDIRILDI. object-fit belirtilmemis bir <video> varsayilan olarak 'fill' davranir:
   320px'e sikisan kare goruntuyu EZIYORDU (kullanici yamuk bir onizleme goruyor, OCR'a giden
   kare ise baska). Artik video kendi en-boy oranini korur; buyuklugu SARMALAYICI sinirlar.
   Yan fayda: sarmalayici tam olarak videonun boyutunda olur -> .cam-guide yuzdeleri GERCEK
   kadraja karsilik gelir. */
video.cam { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #000; display: block; }

/* Layer 4: canlı kamera rehber çerçevesi + netlik/ışık ipucu rozeti */
.cam-wrap { position: relative; max-width: 520px; margin-inline: auto; }
.cam-guide { position: absolute; inset: 9% 7%; border: 2px dashed rgba(255,255,255,.5); border-radius: 12px;
  pointer-events: none; transition: border-color .2s; }
.cam-guide.ok { border-color: var(--ok); } .cam-guide.warn { border-color: var(--warn); } .cam-guide.bad { border-color: var(--bad); }
/* Ipucu metni SARMALANIR. nowrap + ellipsis dar telefonda tam da en onemli kismi kesiyordu:
   "✓ Net — 'İçindekiler' yazan yüzü çerçeveye al" → "✓ Net — 'İçindekiler' yaz…" */
.cam-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 14px;
  font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.62); pointer-events: none;
  max-width: 92%; text-align: center; line-height: 1.35; }
.cam-hint.ok { background: rgba(40,150,108,.92); } .cam-hint.warn { background: rgba(186,138,28,.92); } .cam-hint.bad { background: rgba(196,62,42,.92); }

/* "Sadece Icindekiler" modu: katalogda adi olan ama icerigi eksik urune arka yuz fotografi. */
.ing-only { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; }
.ing-only h3 { font-size: 17px; margin-bottom: 6px; }
.ing-only p { font-size: 13.5px; margin: 0 0 14px; }
.ing-only .finder-q { display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 12px; }
.ing-only .finder-q input { flex: 1; background: none; border: none; outline: none; color: var(--text); }
.ing-res { display: grid; gap: 6px; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.ing-hit { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  width: 100%; text-align: left; font: inherit; font-size: 14px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); transition: .14s; }
.ing-hit:hover { border-color: var(--accent); background: var(--accent-soft); }

.scan-side { display: grid; gap: 18px; align-content: start; }
.side-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.side-panel + .side-panel { margin-top: 0; }
.side-panel h3 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.side-panel .ph { color: var(--text-dim); font-size: 13.5px; margin: 12px 0 14px; }

/* besin/oran barlari */
.macro { margin-bottom: 14px; }
.macro-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.macro-top b { color: var(--text); font-family: var(--mono); font-size: 13px; }
.macro-top .lab { color: var(--text-dim); }
.macro-top .of { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.bar { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* secim cipsleri (cilt tonu, kumas) */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); transition: .14s;
}
.pick button .sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.pick button.on, .pick button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* hafta gezgini (gebelik) */
.range-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.range-row .lab { color: var(--text-dim); font-size: 13.5px; }
.range-row .wk { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--accent); }
input[type=range].rng { width: 100%; accent-color: var(--accent); margin: 10px 0; }
.range-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.dev-cell { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; text-align: center; }
.dev-cell span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.dev-cell b { font-size: 15px; }

/* ===== GEBELIK: haftalik illustrasyon + bebek mesaji + rehber =====
   Illustrasyon inline SVG (baby-art.js) ve currentColor kullanir -> "baby-mode" sicak
   temasiyla kendiliginden uyumlu, dis kaynak yok. */
.baby-art-wrap { display: grid; place-items: center; padding: 6px 0 2px; color: var(--accent); }
.baby-art { width: 132px; height: 132px; max-width: 60%; }
.baby-milestone { margin: 12px 0 0; font-size: 13.5px; color: var(--text-dim); text-align: center; }

/* "Bebegimden mesaj var" — bilincli olarak KATLANABILIR: her hafta acilip okunan,
   beklenen bir kart. Varsayilan acik (open) ama kullanici kapatabilir. */
.baby-msg { margin-top: 14px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-soft); padding: 12px 14px; }
.baby-msg > summary { cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--accent);
  list-style: none; }
.baby-msg > summary::-webkit-details-marker { display: none; }
.baby-msg p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); font-style: italic; }

.baby-guide { margin-top: 16px; }
.baby-guide h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.bg-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 8px; }
.bg-item b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.bg-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.bg-src { display: inline-block; margin-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* Uzman icerigi henuz yazilmamis hafta: UYDURMA metin yerine durust bir satir. */
.baby-taslak { margin-top: 14px; font-size: 13px; text-align: center; }

.tiplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tiplist li { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13.5px; color: var(--text-dim); }
.tiplist li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

.rec-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; display: flex; align-items: center; gap: 13px; margin-top: 10px; transition: .14s; }
a.rec-card { cursor: pointer; }
a.rec-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.rec-card .em { font-size: 22px; }
.rec-card > div { flex: 1; min-width: 0; }
.rec-card b { font-size: 14.5px; display: block; }
.rec-card small { color: var(--muted); font-size: 12.5px; }
.rec-card .rc-go { font-family: var(--mono); color: var(--accent); font-weight: 600; }

/* NOT: "islem gunlugu" (.log-wrap / .log) KALDIRILDI — adim adim teknik dokum artik
   kullaniciya gosterilmiyor, yalniz console.debug'a ve tek satirlik #status metnine
   dusuyor (bkz. app.js logStep). Akisin kendisi ve tarama kaydi degismedi. */

/* sonuc: karar kahramani */
.verdict-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid var(--line); }
.verdict-hero.uygun  { background: var(--ok-soft);   border-color: rgba(27,122,78,.35); }
.verdict-hero.dikkat { background: var(--warn-soft); border-color: rgba(154,107,0,.35); }
.verdict-hero.kacin  { background: var(--bad-soft);  border-color: rgba(191,59,51,.4); }
/* Icerik okunamadi: karar YOK. Notr gri — yesil/sari/kirmizi uclusunun disinda durur. */
.verdict-hero.bilinmiyor { background: var(--panel-2); border-color: var(--line); }
.vh-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 26px; background: var(--panel); }
.verdict-hero.uygun  .vh-ico { color: var(--ok);   border: 2px solid var(--ok); }
.verdict-hero.dikkat .vh-ico { color: var(--warn); border: 2px solid var(--warn); }
.verdict-hero.kacin  .vh-ico { color: var(--bad);  border: 2px solid var(--bad); }
.verdict-hero.bilinmiyor .vh-ico { color: var(--muted); border: 2px dashed var(--line); }
.vh-img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex: none;
  border: 1px solid var(--line); background: var(--panel); }
.vh-text { flex: 1; min-width: 220px; }
.vh-head { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: -.02em; line-height: 1.15; }
.verdict-hero.uygun  .vh-head { color: var(--ok); }
.verdict-hero.dikkat .vh-head { color: var(--warn); }
.verdict-hero.kacin  .vh-head { color: var(--bad); }
.verdict-hero.bilinmiyor .vh-head { color: var(--text-dim); }
.vh-prod { margin-top: 5px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.vh-cat { font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: 1px; }
.vh-sub { margin: 7px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }

/* iki skor halkasi: nesnel saglik + kisisel uyum — her biri tiklanabilir (kirilim acar) */
.dial-pair { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.score-dial { position: relative; width: 76px; height: 76px; flex: none;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.score-dial::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px dashed transparent; transition: border-color .15s; }
.score-dial:hover::after, .score-dial:focus-visible::after { border-color: var(--line); }
.score-dial:focus-visible { outline: none; }
.score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.sd-track { fill: none; stroke: rgba(234,240,228,.13); stroke-width: 5; }
.sd-val { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.score-dial.uygun .sd-val  { stroke: var(--ok); }
.score-dial.dikkat .sd-val { stroke: var(--warn); }
.score-dial.kacin .sd-val  { stroke: var(--bad); }
.sd-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.sd-num b { font-family: var(--display); font-weight: 800; font-size: 19px; }
.score-dial.uygun .sd-num b  { color: var(--ok); }
.score-dial.dikkat .sd-num b { color: var(--warn); }
.score-dial.kacin .sd-num b  { color: var(--bad); }
/* İçindekiler okunamadı: halka DOLMAZ, rakam yerine "—". Kesikli çerçeve verdict-hero
   .bilinmiyor ile aynı görsel dili kullanır — "veri yok", "kötü skor" değil. */
.score-dial.bilinmiyor .sd-num b { color: var(--muted); font-size: 22px; }
.score-dial.bilinmiyor .sd-track { stroke-dasharray: 4 4; }
.sd-num span { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; }
@media (max-width: 400px) { .dial-pair { width: 100%; justify-content: space-around; margin-left: 0; } }

/* skor kirilimi: skora tiklayinca acilan '-X puan · sebep' dokumu (iki sutun) */
.score-detail { margin: 12px 0 2px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden; }
.score-detail > summary { list-style: none; cursor: pointer; padding: 11px 15px; display: flex;
  align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }
.score-detail > summary::-webkit-details-marker { display: none; }
.score-detail .sum-caret { transition: transform .2s; color: var(--muted); }
.score-detail[open] .sum-caret { transform: rotate(180deg); }
.bd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
@media (max-width: 520px) { .bd-wrap { grid-template-columns: 1fr; } }
.bd-col { background: var(--panel); padding: 13px 15px; }
.bd-h { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); font-weight: 600; }
.bd-score { font-family: var(--display); font-size: 18px; letter-spacing: 0; }
.bd-score i { font-size: 11px; color: var(--muted); font-style: normal; }
.bd-sub { margin: 3px 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.bd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-rows li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.bd-pts { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--bad); flex: none;
  min-width: 34px; text-align: right; }
.bd-body { display: flex; flex-direction: column; gap: 2px; }
.bd-body b { color: var(--text); font-size: 13.5px; }
.bd-body span { color: var(--text-dim); line-height: 1.45; }
.bd-body .bd-src { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.bd-empty { color: var(--ok); font-size: 13px; }
.bd-empty .bd-pts { display: none; }

/* sana ozel oneri */
.rec-note { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 14px 0 4px; }
.rec-note .rn-tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.rec-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }

/* uyarilar */
.flag-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag-rows li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
  border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.flag-rows li.kacin  { border-color: rgba(191,59,51,.35); background: var(--bad-soft); }
.flag-rows li.dikkat { border-color: rgba(154,107,0,.3);  background: var(--warn-soft); }
.fr-ico { font-size: 15px; margin-top: 1px; }
.fr-body { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.fr-body b { font-size: 14px; color: var(--text); }
.fr-body span { color: var(--text-dim); }

/* icindekiler renk aciklamasi */
.ing-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ing-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -.5px; }
.dot-bad { background: var(--mark-bad); box-shadow: inset 0 -2px 0 var(--bad); }
.dot-warn { background: var(--mark-warn); box-shadow: inset 0 -2px 0 var(--warn); }
.dot-harm { background: var(--mark-harm); box-shadow: inset 0 -2px 0 var(--harm); }
.dot-plain { background: var(--panel-2); border: 1px solid var(--line); box-sizing: border-box; }

/* zararli icerik bloğu — profil GEREKMEDEN herkese; her maddenin riski YAZILI */
.harm-block { border-top-color: var(--harm); }
.harm-block h3 { color: var(--harm); }
.harm-intro { font-size: 13.5px; color: var(--text-dim); margin: -4px 0 12px; }
.harm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.harm-row { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--harm-soft);
  border: 1px solid rgba(169,139,232,.32); border-left: 3px solid var(--harm); }
.harm-row.sev-orta { background: var(--harm-soft); }
.harm-row.sev-hafif { background: var(--panel-2); border-left-color: rgba(169,139,232,.6); }
.hr-head { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.hr-head b { font-size: 14.5px; color: var(--text); }
.hr-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--mark-harm); color: var(--on-mark); }
.sev-hafif .hr-badge { background: transparent; color: var(--harm); border: 1px solid var(--harm); }
.hr-risk { margin: 7px 0 5px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.hr-src { margin: 0; font-size: 11.5px; font-family: var(--mono); color: var(--muted); }

/* profil bos uyarisi + sonuc eylemleri */
.profile-hint { margin: 14px 0; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-dim); }
.profile-hint a { color: var(--accent); font-weight: 600; cursor: pointer; }
.result-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* rapor bloklari: kalin ust cizgi + mono bolum etiketi (besin tablosu dili) */
.result-block { margin-top: 22px; border-top: 3px solid var(--ink); padding-top: 12px; }
.result-block h3 { font-family: var(--mono); font-size: 12px; color: var(--ink); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.result-block ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 14.5px; display: grid; gap: 6px; }
.result-block li.kacin { color: var(--bad); } .result-block li.dikkat { color: var(--warn); }

/* Karar bloklarinin ust cizgisi ve baslik rengi TEHDIT SEVIYESINI tasir: kirmizi kartin
   ustunde notr bir baslik tehlikeyi kucultuyordu (bkz. app.js BLOCK_TITLE). */
.result-block.rb-bad  { border-top-color: var(--bad); }
.result-block.rb-warn { border-top-color: var(--warn); }
.result-block.rb-ok   { border-top-color: var(--ok); }
.result-block.rb-bad h3  { color: var(--bad); }
.result-block.rb-warn h3 { color: var(--warn); }
.result-block.rb-ok h3   { color: var(--ok); }

/* IMZA: icindekiler — riskli maddeler fosforla isaretlenir */
.ing-list { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start;
  font-family: var(--mono); line-height: 1.9; }
.ing { font-size: 12.5px; padding: 4px 10px; border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text-dim); }
.ing.warn { color: var(--on-mark); border-color: transparent; background: var(--mark-warn);
  box-shadow: inset 0 -2px 0 var(--warn); font-weight: 600; }
.ing.bad { color: var(--on-mark); border-color: transparent; background: var(--mark-bad);
  box-shadow: inset 0 -2px 0 var(--bad); font-weight: 600; }
.ing.harm { color: var(--on-mark); border-color: transparent; background: var(--mark-harm);
  box-shadow: inset 0 -2px 0 var(--harm); font-weight: 600; }

/* Bileşen açıklama baloncuğu: fare üzerine gelince (tıklama gerekmez). İçerik peşin
   çekilir (app.js ingInfoPrefetch), baloncuk önbellekten anında açılır. */
.ing[data-ing] { cursor: help; }
.ing-tip { position: absolute; z-index: 200; max-width: 320px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 12.5px;
  line-height: 1.45; color: var(--text); }
.ing-tip b { font-size: 13px; }
.ing-tip-tur { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.ing-tip-ozet { margin-top: 5px; }
.ing-tip-kimya { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.ing-tip-uyari { margin-top: 6px; color: var(--on-mark); background: var(--mark-warn);
  border-radius: 5px; padding: 3px 7px; font-size: 11.5px; display: inline-block; }

/* DOKUNMA YOLU — aciklama listenin ALTINDA acilir (balon degil; balon dokunmatikte
   kapanmiyor ve kaydirmada kayboluyordu). Ayni desen ham metin isaretlerinde
   kullanildi: #ham-not. Ikinci dokunus kapatir; blokta tek kutu olur. */
.ing-not { margin-top: 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.ing-not b { font-size: 13px; }
.ing-not-yok { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.ing.secili { outline: 2px solid var(--accent); outline-offset: 1px; }

.ing-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ing-group.has-children { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px 5px 11px; }
.ing-group.has-children > .ing { background: transparent; border: none; padding: 0; font-weight: 600; box-shadow: none; color: var(--text); }
.ing-group.has-children > .ing.warn { color: var(--on-mark); background: var(--mark-warn); padding: 1px 6px; box-shadow: inset 0 -2px 0 var(--warn); }
.ing-group.has-children > .ing.bad { color: var(--on-mark); background: var(--mark-bad); padding: 1px 6px; box-shadow: inset 0 -2px 0 var(--bad); }
.ing-group.has-children > .ing.harm { color: var(--on-mark); background: var(--mark-harm); padding: 1px 6px; box-shadow: inset 0 -2px 0 var(--harm); }
.ing-children { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ing-children::before { content: "›"; opacity: .5; }
.ing-children .ing { font-size: 11.5px; padding: 3px 8px; }
.ing-children .ing-group.has-children { padding: 3px 8px 3px 9px; }

.alt { background: var(--panel-2); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 16px; }
.alt .src { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; font-weight: 600; }
/* Birden cok secenek: her biri kendi satiri, aralarinda ince ayrac. Liste bir SIRALAMA
   degil (bkz. .alt-note) — numara/rozet KULLANILMAZ. */
.alt-list { display: grid; gap: 12px; }
.alt-list .alt-row + .alt-row { padding-top: 12px; }
.alt-list > .alt-row:not(:first-child) { border-top: 1px dashed var(--line); padding-top: 12px; }
.alt-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; line-height: 1.5; }
/* ONERI KUTUSU = IKI ONERI ALT ALTA: 💬 yapay zeka cumlesi (.rec-note) + 🛒 katalog urunu
   (.alt). Iki kart AYNI genislikte ve esit aralikli durur; hangisinin once geldigi bir
   siralama degildir — biri tavsiye metni, digeri gercek bir urun. */
.oneri-cift { display: grid; gap: 14px; }
.oneri-cift .rec-note { margin: 0; }
/* Katalogda urun ARANDI ama cikmadi: kart yerine kesik cizgili bos durum (uydurma urun yok) */
.alt-bos { border-style: dashed; border-color: var(--line); }
.alt-bos p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.alt-row { display: flex; gap: 14px; align-items: flex-start; }
/* FOTOGRAF YUVASI: tek urun kartinda fotograf kartin en gorunur parcasi, o yuzden 64 -> 96px.
   Yuva HER ZAMAN cizilir; icindeki <img> yoksa ya da yuklenemezse (onerror -> display:none)
   ::before yer tutucusu gorunur — kartta delik kalmaz. object-fit COVER DEGIL CONTAIN:
   market gorselleri beyaz zeminde dik ambalajdir, cover ambalajin kenarlarini kirpar. */
.alt-foto { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center;
  overflow: hidden; }
.alt-foto::before { content: "🛍️"; font-size: 26px; opacity: .35; }
.alt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 6px; background: var(--panel); }
.alt-info .name { font-weight: 700; margin-bottom: 4px; }
.alt-info { font-size: 14px; color: var(--text-dim); }

.disclaimer { margin-top: 22px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
details > summary { cursor: pointer; color: var(--text-dim); font-size: 13.5px; padding: 8px 0; }
details pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* profil sayfasi */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
/* seçilen öğeler kutusu: çok seçim olunca sayfayı şişirmesin diye sabit yükseklikte kendi içinde kayar */
.cond-chips { max-height: 132px; overflow-y: auto; overflow-x: hidden; align-content: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); padding: 9px 9px 5px; }
.chip { cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-dim); transition: .14s; user-select: none; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cond-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }
.cond-add input { flex: 1 1 220px; }
.chip-btn { cursor: pointer; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); white-space: nowrap; transition: .14s; }
.chip-btn.ghost { background: var(--panel); border-color: var(--line); color: var(--text); font-weight: 500; }
.chip-btn:hover { filter: brightness(1.06); }
/* <b> DEGIL <button>: cipi kaldirma dugmesi klavyeyle hic odaklanamiyordu ve
   ekran okuyucuya yalnizca "x" diye gidiyordu. Gercek dugme odagi, Enter/Bosluk'u
   ve erisilebilir adi kendiliginden getirir; asagisi UA gorunumunu geri alir
   (gorunum degismedi). */
.chip.removable .x { margin-left: 6px; cursor: pointer; opacity: .8; font-weight: 700;
  background: none; border: none; padding: 0; color: inherit; font-size: inherit;
  font-family: inherit; line-height: inherit; }
.chip.removable .x:hover { opacity: 1; color: var(--mark); }
.chip.removable .x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.pick { cursor: pointer; }
/* Sağlık durumundan TÜRETİLEN chip: kullanıcının kendi seçtiğinden ayrılmalı, yoksa "bunu ben mi
   seçtim?" belirsizliği kalır. Ayrım yalnız renkle DEĞİL (WCAG 1.4.1): kesikli çerçeve + 🩺. */
.chip.auto { border-style: dashed; border-color: var(--mark); }
.chip.auto .auto-mark { font-style: normal; margin-right: 5px; opacity: .9; }
/* app.js elle eklenen chip'lere bu sınıfı basıyordu ama karşılığı hiç yazılmamış. */
.chip.custom { border-style: dotted; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Hastalığın altındaki salt-okunur özet: ne işaretlendi + taramada zaten ne uygulanıyor. */
.cond-info { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 8px 0 2px;
  padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--mark); border-radius: var(--radius-sm); }
.cond-info b { color: var(--text); }
.cond-info i { opacity: .85; }
.cond-info .ci-row + .ci-row { margin-top: 7px; }
.cond-note { font-size: 13px; color: var(--text-dim); margin: 8px 0; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cond-note .sug { padding: 5px 11px; margin: 3px 3px 0 0; font-size: 12.5px; }
.cond-picker { margin: 8px 0; padding: 6px 0; }
.cond-grp { margin-bottom: 10px; }
.cond-grp-h { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
/* combobox — tüm profil tercih alanları (arama + canlı öneri + Ekle + Listeden seç) */
.combo { position: relative; margin: 6px 0 4px; }
.combo-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.combo-inp { flex: 1 1 220px; }
.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); overflow-y: auto; max-height: 288px; }
.combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; cursor: pointer; padding: 10px 13px; font-size: 13.5px; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); transition: background .12s; }
.combo-opt:last-child { border-bottom: 0; }
.combo-opt .opt-desc { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400;
  line-height: 1.35; margin-top: 2px; white-space: normal; }
/* ANA KATEGORI: adin yanina satir ici ("Tip 1 Diyabet — Endokrin"). Halk dilinde benzeyen
   iki durumu ayirt etmenin en ucuz yolu. */
.combo-opt .opt-hint { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.combo-opt:hover, .combo-opt.active { background: var(--panel); }
.combo-opt.on { color: var(--accent); font-weight: 600; }
.combo-opt .tick { color: var(--accent); font-weight: 700; }
.combo-empty { padding: 10px 13px; font-size: 12.5px; color: var(--muted); }
.req { color: var(--bad); }

/* izleme / denetim tablosu */
.audit-wrap { overflow-x: auto; }
.audit { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit th, .audit td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.audit th { font-family: var(--mono); color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--ink); }
.audit td { color: var(--text-dim); }
.audit td b { color: var(--accent); }
.audit td:nth-child(4) { white-space: normal; max-width: 320px; }
.cloud-err { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999;
  max-width: min(92vw, 640px); background: #241110; border: 1px solid var(--bad); color: #f3c1b9;
  padding: 12px 44px 12px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; box-shadow: var(--shadow); }
.cloud-err small { color: #d29a90; }
.cloud-err button { position: absolute; top: 6px; right: 10px; background: none; border: none;
  color: #f3c1b9; font-size: 20px; cursor: pointer; line-height: 1; }
.save-note { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.save-note.err { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.save-note .undo-link { background: none; border: none; color: var(--accent); cursor: pointer;
  font-weight: 600; text-decoration: underline; padding: 0 2px; font-size: 13.5px; }
.save-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.save-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.save-fields label:first-child { grid-column: 1 / -1; }
.save-qty-row { display: flex; gap: 6px; }
.save-qty-row input { flex: 1; min-width: 0; }
.save-qty-row select { width: 64px; flex: none; }
.save-actions { display: flex; gap: 8px; }
.save-msg { font-size: 13px; margin: 4px 0 8px; }
.save-msg.err { color: var(--bad); }
.save-msg.warn { color: var(--warn); }

/* aday secimi — "bu urun mu?": urun gorselli, en fazla 3 dikey alan */
.cand-ask .cand-head { display: grid; gap: 3px; margin-bottom: 12px; }
.cand-ask .cand-head b { font-size: 14.5px; }
.cand-ask .cand-head .muted { font-size: 12.5px; }
.cand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cand-grid.n1 { grid-template-columns: minmax(0, 230px); }
.cand-grid.n2 { grid-template-columns: repeat(2, 1fr); }
.cand-card { display: flex; flex-direction: column; cursor: pointer; text-align: left; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.cand-card:hover, .cand-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cand-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line); }
.cand-img.noimg { display: flex; align-items: center; justify-content: center; font-size: 34px; background: var(--panel-2); }
.cand-info { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px 12px; min-width: 0; }
.cand-info b { font-family: var(--display); font-size: 14px; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cand-brand { font-size: 12px; color: var(--text-dim); }
.cand-score { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--accent); font-weight: 600; margin-top: 2px; }
.cand-qty { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cand-actions { margin-top: 12px; }
@media (max-width: 560px) {
  .cand-grid, .cand-grid.n2, .cand-grid.n3 { grid-template-columns: 1fr 1fr; }
  .cand-grid.n1 { grid-template-columns: 1fr; }
}
/* ==========================================================================
   RAPOR SEKMELERI — dosya sekmesi mantigi
   Rapor 6-9 bolumden olusuyor; hepsi alt alta durdugunda tek ekran 5166px oluyordu.
   Artik ustte kutular, altta TEK panel.

   IMZA: kutu KAPALIYKEN DE bulgusunun rengini ve sayisini tasir. Sekme demek "gizle"
   demektir ve saglik uyarisini gizlemek kabul edilemez; bu yuzden renk + sayi disarida
   kalir, kutu yalniz AYRINTIYI saklar. Renkler mevcut tehdit paletinden (--bad/--warn/
   --harm/--ok) gelir, yani rapor blogunun ust cizgisiyle AYNI dili konusur.
   ========================================================================== */
.rt { margin-top: 22px; }
/* Kutu cubugu YAPISKAN: "Icindekiler" paneli 35 kalemle ekrandan tasiyor; kullanici dibine
   indiginde baska bir bolume gecmek icin bastan asagi geri kaydirmak zorunda kalmasin.
   top = .nav yuksekligi (sticky, z-index 80) -> kutular basligin ALTINA yapisir.
   OLCULEN degisken kullanilir: elde yazili 72px, gercek nav 72.5px/62px iken tutmuyordu. */
.rt-bar { position: sticky; top: var(--nav-h); z-index: 6;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 10px; margin-bottom: -1px; padding-bottom: 1px;
  background: var(--bg); }
.rt-box {
  position: relative; display: grid; gap: 0; align-content: start; justify-items: stretch;
  cursor: pointer; padding: 12px 14px 13px; text-align: left; font: inherit;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); border-top: 3px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
/* YAPISKANLIK KOSULLUDUR. Cubuk kisayken yapismak kazanctir (uzun "Icindekiler" panelinin
   dibinden baska bolume gecilir); UZUNKEN ZARARDIR. Olculdu (2026-08-24, gercek tarama):
   7 kutu 620px'lik sutunda 3 satira sariyor -> cubuk 353px, 720px'lik gorunumun %49'u.
   Yapiskan sticky duzelir duzelmez bu cubuk ekranin YARISINI kaplayip altindaki panele
   295px birakiyordu — kullanicinin "kutular ust uste geliyor" dedigi sey tam olarak bu.
   app.js rtYapiskanlikAyarla() cubugu olcup esigi asinca bu sinifi takar. */
.rt-bar.rt-akis { position: static; }
.rt-box:hover { background: var(--panel); transform: translateY(-2px); }
.rt-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }

/* UST SERIT: bolumun tek sayisi. Skorlar ve etiket olculeri (Nutri-Score, NOVA) eskiden
   kahraman kartinda ayri halkalar/rozetlerdi; artik ACIKLAMASININ oldugu kutunun uzerinde. */
.rt-metrik { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rt-m-lab { font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); }
.rt-m-val { font-family: var(--display); font-size: 27px; line-height: 1; color: var(--ink);
  font-weight: 600; }
.rt-m-bar { display: block; height: 3px; border-radius: 999px; background: var(--line);
  margin: 7px 0 0; overflow: hidden; }
.rt-m-bar s { display: block; height: 100%; background: var(--ink); text-decoration: none; }
/* Yuzde OLMAYAN olcude (NOVA, kalem sayisi) cubuk cizilmez ama YERI durur — yoksa kutu
   satirlari 10px kayiyor. Bos bir cubuk cizmek "%0" demek olurdu, o yuzden gorunmez. */
.rt-m-bar.bos { visibility: hidden; }

/* Alt satir: ikon + bolum adi, sonra ikincil sayac. */
.rt-alt { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.rt-ico { font-size: 14px; line-height: 1; }
.rt-ad { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; }
.rt-sayi { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
/* Ikincil satiri olmayan kutu (Sikliki, Oneri) 3px kisa kaliyordu — bos satir yer tutsun. */
.rt-sayi:empty::before { content: "\00a0"; }
/* Olcusu olmayan bolum (Ham metin) ust seridi bos birakmasin: ad yukari cikar. */
.rt-box > .rt-alt:first-child { margin-top: 0; }

/* Bulgu renkleri — kapali kutuda da gorunur (sekmenin tek riski bilgiyi gizlemektir). */
.rt-box.rt-bad  { border-top-color: var(--bad);  color: var(--bad); }
.rt-box.rt-warn { border-top-color: var(--warn); color: var(--warn); }
.rt-box.rt-harm { border-top-color: var(--harm); color: var(--harm); }
.rt-box.rt-ok   { border-top-color: var(--ok);   color: var(--ok); }
/* RAKAM = metin rengi, CUBUK = zemin rengi. Ikisi bir arada yazilirsa (2026-08-23'te
   yazildi ve saha ekran goruntusuyle yakalandi) rakam KENDI RENGIYLE AYNI zeminin uzerine
   dusuyor ve GORUNMEZ oluyor: kutuda sayi yerine dolu bir renk blogu cikiyordu. DOM testi
   bunu yakalayamaz (textContent dogru okunur) — bkz. tests/js kontrast testi. */
.rt-bad .rt-m-val  { color: var(--bad); }
.rt-warn .rt-m-val { color: var(--warn); }
.rt-harm .rt-m-val { color: var(--harm); }
.rt-ok .rt-m-val   { color: var(--ok); }
.rt-bad .rt-m-bar s  { background: var(--bad); }
.rt-warn .rt-m-bar s { background: var(--warn); }
.rt-harm .rt-m-bar s { background: var(--harm); }
.rt-ok .rt-m-bar s   { background: var(--ok); }
/* Rakamin arkasindaki cubuk zemini renkten BAGIMSIZ kalsin (dolu kisim renkli). */
.rt-box .rt-m-bar { background: var(--line); }

/* Acik kutu panele YAPISIR: alt kenarini kaldirip zeminini panelle esitler. */
.rt-box.on { background: var(--panel); color: var(--text); border-bottom-color: var(--panel);
  transform: none; z-index: 1; }
.rt-box.on.rt-bad  { color: var(--bad); }
.rt-box.on.rt-warn { color: var(--warn); }
.rt-box.on.rt-harm { color: var(--harm); }
.rt-box.on.rt-ok   { color: var(--ok); }
.rt-body { background: var(--panel); border: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm); padding: 4px 16px 16px; }
/* Panelin ICINDEKI blok kendi kutusunu cizmez — kutu icinde kutu olmaz. */
.rt-panel > .result-block:first-child { margin-top: 14px; }
.rt-panel > .result-block:last-child { margin-bottom: 4px; }
/* SAYI KUTUDA, BASLIKTA DEGIL. Kutu zaten "RISKLER 5" yaziyor; panel basligindaki
   "5 madde" rozeti ayni sayiyi iki kez soylemek olurdu (saha bildirimi: tekrar). */
.rt-panel .cb-count { display: none; }
/* Kendi basligini tasiyan blok (oneri notu, siklik bandi) result-block'a sarilmaz. */
.rt-serbest { padding: 14px 0 4px; }
.rt-panel > .freq-band { margin: 14px 0 4px; }
.ham-metin { white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
  font-size: 12px; color: var(--text-dim); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px;
  max-height: 340px; overflow: auto; }
@media (max-width: 560px) {
  /* Mobil .nav daha alcak (bkz. mobile.css .nav-in padding) + centik payi.
     --nav-h OLCULEN degerdir; elle yazili 58px yanlisti (olculen mobil nav: 62px). */
  .rt-bar { top: var(--nav-h);
    grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rt-box { padding: 10px 11px 11px; }
  .rt-m-val { font-size: 23px; }
  .rt-ad { font-size: 9.5px; letter-spacing: .07em; }
  .rt-alt { margin-top: 8px; gap: 5px; }
  .rt-sayi { font-size: 11px; }
  .rt-body { padding: 4px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-box, .rt-box:hover { transition: none; transform: none; }
}

/* "Secildi: X" onayi — TIKLANAN YERDE degisen tek sey bu satir. Aday karti tiklandiginda
   soru kutusunun yerini alir; raporun kendisi hemen altinda cizilir. */
.cand-picked { display: flex; align-items: center; gap: 12px; }
.cand-picked .cp-ico { flex: none; width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--panel-2); font-size: 14px; }
.cand-picked.done .cp-ico { background: var(--ok-soft); color: var(--ok); }
.cand-picked .cp-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cand-picked .cp-body b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.cand-picked .cp-body .muted { font-size: 12.5px; }
.cand-picked .chip-btn { flex: none; }
@media (max-width: 560px) {
  .cand-picked { flex-wrap: wrap; }
  .cand-picked .chip-btn { width: 100%; }
}

/* icindekiler: isaretsiz kalemler katlanir (bkz. ingCardsHTML). score-detail ile ayni gorunum. */
.ing-clean { margin: 10px 0 2px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden; }
.ing-clean > summary { list-style: none; cursor: pointer; padding: 11px 15px; display: flex;
  align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }
.ing-clean > summary::-webkit-details-marker { display: none; }
.ing-clean .sum-caret { transition: transform .2s; color: var(--muted); }
.ing-clean[open] .sum-caret { transform: rotate(180deg); }
.ing-clean .ing-cards { padding: 0 12px 12px; }

/* ---- RAPOR OZET SERIDI (LEVELS deseni) -----------------------------------------------
   Kutularin USTUNDE tek satirlik dokum: yigin bar + kelimeli cipler. Uc kanal birden
   (renk / kelime / sayi) tasinir; renk korlugunde de okunur. Gerekce: app.js rtOzetHTML. */
.rt-ozet { margin: 0 0 14px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ro-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--panel-2); }
.ro-s { display: block; min-width: 5px; }
.ro-harm { background: var(--harm); }
.ro-bad  { background: var(--bad); }
.ro-warn { background: var(--warn); }
.ro-ok   { background: var(--ok); }
.ro-cips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.ro-cip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--text-dim); }
.ro-cip b { color: var(--text); font-size: 14px; font-weight: 700; }
.ro-cip > i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ro-cip.ro-harm > i { background: var(--harm); }
.ro-cip.ro-bad  > i { background: var(--bad); }
.ro-cip.ro-warn > i { background: var(--warn); }
.ro-cip.ro-ok   > i { background: var(--ok); }
/* Cipin KENDISI renkli degil: dort cip yan yana renkliyken serit, altindaki alti kutudan
   daha gurultulu oluyordu (kalinlik butcesi kurali, bkz. docs/mobil-arayuz.md). */
.ro-cip.ro-harm, .ro-cip.ro-bad, .ro-cip.ro-warn, .ro-cip.ro-ok { background: none; }
.ro-not { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* ---- ICINDEKILER RISK GRUPLARI (OnSkin deseni) ---------------------------------------
   Isaretli kalemler tek uzun liste degil, seviyesine gore uc bolme. Basliklar damar
   cizgisini tasir: renk + KELIME + SAYI. */
.ig { margin: 0 0 10px; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel-2); overflow: hidden; }
.ig-harm { border-left-color: var(--harm); }
.ig-bad  { border-left-color: var(--bad); }
.ig-warn { border-left-color: var(--warn); }
.ig > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex;
  align-items: center; gap: 10px; }
.ig > summary::-webkit-details-marker { display: none; }
.ig-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.ig-harm .ig-dot { background: var(--harm); }
.ig-bad  .ig-dot { background: var(--bad); }
.ig-warn .ig-dot { background: var(--warn); }
.ig-ad { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ig-ad b { font-size: 14px; }
.ig-ad small { font-size: 11.5px; color: var(--muted); }
.ig-n { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--text); background: var(--panel-3); border-radius: 99px; padding: 2px 9px; }
.ig .sum-caret { flex: none; color: var(--muted); transition: transform .2s; }
.ig[open] .sum-caret { transform: rotate(180deg); }
.ig .ing-cards { padding: 0 12px 12px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ig .sum-caret { transition: none; } }

/* ---- HAM METINDE ISARETLEME (Bobby Approved deseni) ----------------------------------
   Isaret = uygulamanin FOSFORLU KALEM imzasi (--mark-*). Ham metin artik pasif kanit
   degil, bulgunun kendisi: dokunulan madde gerekcesini metnin ALTINDA acar. */
.ham-ipucu { margin: 0 0 8px; font-size: 12.5px; color: var(--text-dim); }
.hm-hit { font: inherit; color: var(--on-mark); background: var(--mark-warn); border: 0;
  padding: 0 2px; border-radius: 3px; cursor: pointer; }
.hm-warn { background: var(--mark-warn); }
.hm-bad  { background: var(--mark-bad); }
.hm-harm { background: var(--mark-harm); }
.hm-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hm-hit.on { box-shadow: 0 0 0 2px var(--brand); }
.ham-not { margin: 10px 0 0; padding: 10px 12px; font-size: 13px; color: var(--text);
  background: var(--panel-3); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.result-block.uncertain { border: 1px solid rgba(154,107,0,.4); border-top: 3px solid var(--warn);
  border-radius: var(--radius-sm); padding: 14px 16px; background: var(--warn-soft); }
.unc-item { padding: 10px 0; border-top: 1px solid var(--line); }
.unc-item:first-of-type { border-top: none; }
.unc-read { font-size: 13.5px; margin-bottom: 6px; }
.unc-item input { margin-top: 6px; }
.harmful-alert { margin: 14px 0; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(240,85,60,.14);
  border: 2px solid var(--bad); color: #f2d7d2; }
.harmful-alert .ha-top { font-weight: 800; font-size: 15px; letter-spacing: .3px; margin-bottom: 8px; color: var(--bad); }
.harmful-alert p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.harmful-alert .ha-help { font-weight: 700; color: var(--bad); margin: 0; }
.field-label { display: block; font-size: 14px; font-weight: 700; margin: 20px 0 6px; }
.field-label small { color: var(--muted); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 14.5px; font-family: inherit;
}
input[type=date] { color-scheme: dark; }
select { appearance: none; cursor: pointer; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.muted { color: var(--muted); }
.saved { color: var(--muted); font-size: 13px; margin-top: 18px; }

/* gecmis */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: .16s; }
.hist:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.hist-top { display: flex; gap: 12px; margin-bottom: 14px; }
.hist-ico { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 20px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); flex: 0 0 auto; }
.hist-top b { display: block; font-size: 15px; }
.hist-top small { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.hist-bot { display: flex; justify-content: space-between; align-items: center; }
.hist-scores { display: flex; align-items: center; gap: 8px; }
.score-health { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--harm);
  background: var(--harm-soft); border: 1px solid rgba(169,139,232,.32); border-radius: 6px; padding: 2px 7px; }
.score { font-family: var(--display); font-weight: 800; font-size: 26px; }
.badge { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 600;
  letter-spacing: .04em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.badge.ok { color: var(--ok); background: var(--ok-soft); border-color: rgba(27,122,78,.3); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(154,107,0,.3); }
.badge.bad { color: var(--bad); background: var(--bad-soft); border-color: rgba(191,59,51,.3); }
.score.ok { color: var(--ok); } .score.warn { color: var(--warn); } .score.bad { color: var(--bad); }
.empty { text-align: center; color: var(--muted); padding: 48px 20px; }
.empty p { margin: 0 0 10px; }
.empty .btn { margin-top: 10px; }

/* ===================== B2B ===================== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.kpi { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.kpi b { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--brand); }
.kpi span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.partner { cursor: pointer; text-align: center; padding: 22px 14px; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--line); transition: .15s; }
.partner .em { font-size: 26px; display: block; margin-bottom: 8px; }
.partner.on, .partner:hover { border-color: var(--brand); background: var(--accent-soft); color: var(--brand); }
.code { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #bfe8d2;
  background: var(--ink-2); border-radius: var(--radius-sm); padding: 16px; white-space: pre-wrap;
  word-break: break-word; overflow-x: auto; }
.api-out { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  text-align: left; margin-top: 34px;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: var(--radius); padding: 34px 32px;
}
.cta-band h2 { font-size: clamp(22px, 3vw, 32px); margin-bottom: 10px; }
.cta-band p { color: var(--text-dim); max-width: 58ch; margin: 0; }

/* ===================== FOOTER (koyu murekkep blok) ===================== */
.footer { margin-top: 70px; padding: 56px 0 26px; background: var(--ink-2); color: #cfdcd0; }
.footer .logo { color: #fff; }
/* Marka sozcugu ust bardaki ile AYNI renkte: altbilgide --mark (sari) kullanilinca
   ayni logo iki farkli renkte gorunuyordu (sahada bildirildi, 2026-09-02). */
.footer .logo .w-mid { color: var(--brand); }
/* Altbilgi koyu murekkep zeminde: logo PNG'si zaten saydam, kutu GEREKMEZ. */
.footer .logo-badge { background: transparent; }
/* Marka sutunu + 4 baglanti sutunu (Platform / Kurumsal & Ticari / Yasal / Yonetim) */
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 26px; }
.footer-brand p { color: #9fb3a3; font-size: 13.5px; margin: 16px 0; max-width: 34ch; }
.footer-brand .line { color: #85987f; font-size: 13px; margin: 4px 0; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #85987f; margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; color: #b9c9bc; font-size: 14px; margin-bottom: 10px; transition: .14s; cursor: pointer; }
.footer-col a:hover { color: var(--mark); }
.footer-col p { color: #9fb3a3; font-size: 13.5px; margin: 0 0 14px; }
.footer-col p b { color: #e8f0e6; }
.footer-bot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-bot .copy { color: #85987f; font-size: 13px; }
.footer-bot .copy b { color: #cfdcd0; }
.foot-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-badges span { font-family: var(--mono); font-size: 11px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #b9c9bc; }

/* ===================== CHATBOT ===================== */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 23px;
  background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); transition: .18s;
}
.chat-fab:hover { transform: scale(1.06); background: var(--brand-d); }
.chat-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 91; width: 440px; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: none; flex-direction: column;
}
.chat-panel.open { display: flex; animation: rise .2s ease; }
.chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.chat-head .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); }
.chat-head b { font-size: 14.5px; }
.chat-head small { color: var(--ok); font-family: var(--mono); font-size: 11px; display: block; }
.chat-head .x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.chat-head .x:hover { color: var(--ink); }
/* KALICI tibbi uyari — .chat-body'nin DISINDA bir grid satiri oldugu icin sohbet
   kaydirilirken kaybolmaz. Kullanicinin her an gormesi gereken tek cumle budur. */
.chat-disclaimer {
  padding: 9px 16px; font-size: 12px; line-height: 1.45; color: var(--warn);
  background: var(--warn-soft); border-bottom: 1px solid rgba(154,107,0,.3);
}
.chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 62vh; min-height: 300px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
.msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }
.msg.bot b { color: var(--accent); font-weight: 700; }
.msg.me { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.msg.chat-card { display: flex; flex-direction: column; gap: 7px; padding: 9px; max-width: 88%; }
.msg.chat-card img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; background: var(--panel-2); }
.msg.chat-card .cc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg.chat-card .cc-info b { font-size: 14px; color: var(--text); }
.msg.chat-card .cc-info span { font-size: 12.5px; color: var(--text-dim); }
.msg.chat-card .cc-info a { font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.chat-input input { flex: 1; }
.chat-input button { width: 42px; flex: 0 0 auto; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: var(--brand); color: var(--brand-ink); font-size: 17px; }
.chat-input button:hover { background: var(--brand-d); }

/* ===================== HESAP (account) ===================== */
.card-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.card-head .chev { color: var(--muted); transition: .2s; }
.collapsed .card-body { display: none; }
.collapsed .card-head .chev { transform: rotate(-90deg); }

/* ===================== PROFIL (accordion + onboarding) ===================== */
.prof-acc { margin-bottom: 14px; }
.prof-acc .card-body { padding-top: 4px; }
.head-right { display: flex; align-items: center; gap: 10px; }
.acc-badge { font-family: var(--mono); font-size: 11.5px; font-weight: 600; min-width: 24px; text-align: center; padding: 3px 9px;
  border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.acc-badge.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-group-label { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
.chip-groups .chips { margin-top: 2px; }
.onb { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text);
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; margin-bottom: 18px; }
.onb-actions { display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.onb-skip { cursor: pointer; }
.onb-skip:hover { color: var(--text); }
.acc-section h3 { font-size: 16px; margin: 26px 0 10px; }
.account-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.account-email { font-weight: 600; font-size: 15px; }
.mfa-list { display: grid; gap: 9px; margin-bottom: 16px; }
.mfa-row { display: flex; justify-content: space-between; align-items: center; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 15px; font-size: 14px; }
.mfa-enroll { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mfa-method { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.mfa-method-h { font-weight: 600; font-size: 14.5px; margin-bottom: 12px; }
.mfa-method-h small { color: var(--muted); font-weight: 400; font-size: 12.5px; display: block; }
.mfa-method input { margin-bottom: 10px; }
.totp-secret { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; font-family: var(--mono); font-size: 13px; margin: 8px 0; word-break: break-all; }
canvas#totp-qr { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; margin: 8px 0; }
.auth-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13.5px; font-family: inherit; padding: 6px 0; }
.auth-link:hover { text-decoration: underline; }
.auth-msg { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-top: 14px; }
.auth-msg.ok { color: var(--ok); background: var(--ok-soft); border: 1px solid rgba(27,122,78,.3); }
.auth-msg.err { color: var(--bad); background: var(--bad-soft); border: 1px solid rgba(191,59,51,.3); }
.acc-panel { background: var(--panel-2); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 18px; margin: 16px 0; }
.acc-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
#recaptcha-container { margin-top: 8px; }
.filebtn { display: inline-block; cursor: pointer; }


/* ===================== AUTH (login) ===================== */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-brand { padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: center;
  background: var(--ink-2); color: #e8f0e6; }
/* Giris ekraninin sol panelindeki buyuk marka isareti (eski 💚 emojisinin yerine logo). */
.auth-brand .brand-mark { width: 72px; height: 72px; object-fit: contain; margin-bottom: 26px; display: block; }
.auth-brand h1 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 18px; color: #fff; }
.auth-brand p { color: #9fb3a3; font-size: 16px; max-width: 40ch; margin-bottom: 30px; }
.auth-feats { display: grid; gap: 14px; }
.auth-feat { display: flex; align-items: center; gap: 13px; font-size: 15px; color: #b9c9bc; }
.auth-feat .fi { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.auth-form-side { padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: center; background: var(--bg); }
.auth-form-side .logo { margin-bottom: 28px; }
.auth-form-side h2 { font-size: 30px; margin-bottom: 10px; }
.auth-sub { color: var(--text-dim); font-size: 14.5px; margin-bottom: 26px; }
.auth-tabs { display: flex; gap: 5px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 22px; }
.auth-tab { flex: 1; padding: 11px; border-radius: 7px; border: none; cursor: pointer; font-weight: 600; font-size: 14px;
  background: transparent; color: var(--text-dim); }
.auth-tab.on { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); }
.auth-label { display: block; font-size: 13.5px; font-weight: 600; margin: 16px 0 6px; }
.kvkk-label { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 4px; font-size: 12.5px;
  color: var(--text-dim); line-height: 1.5; cursor: pointer; }
.kvkk-label input { width: auto; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.kvkk-label a { color: var(--accent); text-decoration: underline; }
/* Aydinlatma ile acik rizanin AYRI sureçler oldugunu kayit ekraninda da soyler. */
.kvkk-not { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 2px; }

/* Kayitta hesap turu secimi. "Diyetisyen" secmek ROL VERMEZ — yalnizca basvuru niyetini
   isaretler; panel yonetici onayindan sonra acilir (bkz. /api/rol-basvuru). */
.role-pick { display: flex; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.role-pick label { flex: 1 1 130px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 13px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--panel-2); border: 1px solid var(--line); transition: .14s; }
.role-pick label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.role-pick input { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.auth-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.auth-panel { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: 22px; margin-top: 18px; }
.auth-panel h3 { font-size: 18px; margin-bottom: 10px; }
.auth-panel p { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.auth-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 24px; }
.divider { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; margin: 18px 0; position: relative; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--line); }
.divider::before { left: 0; } .divider::after { right: 0; }

/* primary alias (login.js/account.js "primary" sinifini kullanir) */
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: 15px;
  padding: 13px 18px; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm);
  transition: .16s; margin-top: 8px; }
.primary:hover:not(:disabled) { background: var(--accent-2); transform: translateY(-1px); }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.primary.ghost { background: var(--panel); border: 1px solid var(--line); color: var(--text); box-shadow: none; width: auto; }
.status { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); }
.status.err { color: var(--bad); border-color: rgba(191,59,51,.3); background: var(--bad-soft); }
.status.ok { color: var(--ok); border-color: var(--accent-line); background: var(--ok-soft); }
.status.warn { color: var(--warn); border-color: rgba(240,180,41,.3); background: var(--warn-soft); }

/* ===== PANEL KAPISI — cikis yollari =====
   Panel bulunamadiginda kullaniciyi cikmaza sokmayan secenekler. Eskiden tek yol paragraf
   yiginin dibindeki bir metin bagiydi ve GORULMUYORDU; her yol artik kendi butonu:
   ne yapacagini soyleyen bir baslik + tek satirlik gerekce. */
.gate-head { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.gate-head .gh-ico { font-size: 18px; line-height: 1.2; flex: none; }

.gate-actions { display: grid; gap: 8px; margin-top: 14px; }
.gate-act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); transition: .15s; }
.gate-act:hover { border-color: var(--accent); background: var(--accent-soft); }
/* birincil yol = fosforlu kalem imzasi (bkz. --mark kullanimi) */
.gate-act.on { border-left: 3px solid var(--mark); }
.gate-act .ga-ico { font-size: 19px; flex: none; }
.gate-act .ga-txt { flex: 1; min-width: 0; display: block; }
.gate-act .ga-txt b { display: block; font-size: 14.5px; font-weight: 700; }
.gate-act .ga-txt small { display: block; margin-top: 2px; color: var(--text-dim);
  font-size: 12.5px; line-height: 1.4; }
.gate-act .ga-go { font-family: var(--mono); color: var(--accent); font-weight: 600; flex: none; }

/* "bu urunlerden biri mi?" — kimlikten tanima adaylari */
.gate-cands { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.gate-cands-q { font-size: 14px; margin-bottom: 8px; }
.gate-cand-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-cand { display: flex; align-items: center; gap: 8px; max-width: 100%; text-align: left;
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); transition: .15s; }
.gate-cand:hover { border-color: var(--accent); background: var(--accent-soft); }
.gate-cand img { object-fit: contain; border-radius: 6px; flex: none; }
.gate-cands-note { margin-top: 6px; font-size: 12.5px; }

/* ===== Gebelik ===== */
.preg-card { margin-bottom: 20px; }
.preg-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.preg-week { display: flex; align-items: baseline; gap: 10px; }
.preg-week b { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6vw, 64px); color: var(--accent); line-height: 1; }
.preg-week span { font-size: 16px; color: var(--text-dim); }
.preg-top span { font-size: 13px; }
.preg-meta { flex: 1; min-width: 240px; max-width: 380px; font-size: 13.5px; color: var(--text-dim); }
.preg-bar { height: 10px; border-radius: 99px; background: var(--panel-3); margin: 18px 0 10px; overflow: hidden; }
.preg-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ===== Izleme sekmeleri + uzun metin hucreleri ===== */
.audit-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.audit td.wrap-cell { white-space: normal; max-width: 420px; min-width: 200px; word-break: break-word; line-height: 1.55; }
.audit tr.audit-user:hover td { background: var(--accent-soft); }
.audit-user-head { font-size: 19px; margin: 14px 0 4px; }
.audit-user-head small { font-size: 12.5px; font-weight: 400; }
.audit-sec { font-size: 15.5px; margin: 18px 0 8px; color: var(--text-dim); }

/* İzleme → TAM KAYIT dökümü: taranan ürün için üretilen her şey (özet satırının altında açılır) */
.audit .fr-btn { padding: 4px 9px; font-size: 11.5px; }
.audit tr.fr-row td { white-space: normal; background: var(--panel); padding: 0; }
.fr { display: grid; gap: 12px; padding: 14px 16px; font-size: 13px; }
.fr-sec h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.fr-kv { display: flex; gap: 10px; justify-content: space-between; padding: 3px 0;
  border-bottom: 1px dashed var(--line); line-height: 1.5; }
.fr-kv span { color: var(--muted); }
.fr-kv b { color: var(--text); text-align: right; word-break: break-word; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fr-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px;
  padding: 2px 9px; font-size: 12px; color: var(--text-dim); }
.fr-list { margin: 0; padding-left: 18px; line-height: 1.6; color: var(--text-dim); }
.fr-list b { color: var(--text); }
.fr-reco { margin: 0; padding: 9px 12px; background: var(--panel-2); border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm); color: var(--text); line-height: 1.6; }
.fr-pre { margin: 6px 0 0; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.fr-det summary { cursor: pointer; font-size: 12px; color: var(--accent); padding: 4px 0; }
.fr-scale { margin: 8px 0; padding-left: 10px; border-left: 2px solid var(--line); }

/* İzleme → YZ eğitim fotoğrafları galerisi (küçük resimler kimlikli fetch + blob ile dolar) */
.tr-statbar { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.6; }
.tr-statbar b { color: var(--accent); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tr-card { margin: 0; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.tr-thumb { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 20px; }
.tr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-card figcaption { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px;
  font-size: 12px; color: var(--text-dim); word-break: break-word; }
.tr-kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tr-label { color: var(--text); line-height: 1.45; }

/* ================= URUN ARA (katalog) ================= */
.seg { display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px; }
.seg .chip-btn { background: transparent; border: none; color: var(--text-dim); font-weight: 500;
  border-radius: 7px; padding: 9px 15px; }
.seg .chip-btn.on { background: var(--panel); color: var(--accent); font-weight: 700; box-shadow: var(--shadow-sm); }

/* arama araci cubugu — sayfada gezinirken sabit kalir */
.finder { position: sticky; top: var(--nav-h); z-index: 10;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--ink);
  border-radius: var(--radius); padding: 16px 18px 12px; box-shadow: var(--shadow-sm); }
.finder-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.finder-q { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); padding: 0 14px;
  position: relative; }

/* Canli oneri listesi: ad / icerik-adiyla bulunanlar / "bunu mu demek istedin". */
.urun-sug { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 40;
  max-height: 340px; overflow-y: auto; display: grid; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); }
.us-head { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px 4px; }
.us-hit { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  width: 100%; text-align: left; font: inherit; font-size: 14px; cursor: pointer;
  padding: 9px 10px; border-radius: 7px; color: var(--text); background: none; border: 1px solid transparent; }
.us-hit:hover, .us-hit:focus-visible { background: var(--accent-soft); border-color: var(--accent-line); }
.us-inline { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.finder-q:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fq-ico { font-size: 18px; color: var(--muted); font-family: var(--mono); }
.finder-q input { border: none; background: none; padding: 12px 0; flex: 1; }
.finder-q input:focus { outline: none; box-shadow: none; border: none; }
.finder-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--muted); }
.finder-count { color: var(--ink); font-weight: 600; }
.finder-idle p { margin: 0 0 12px; }
.finder-idle .chips { justify-content: center; }

.urun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 16px; }
.urun-grid .empty { grid-column: 1 / -1; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); }
.urun-card { display: flex; gap: 13px; align-items: center; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
  color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; width: 100%; }
.urun-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.urun-thumb { width: 56px; height: 56px; flex: none; border-radius: 8px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); }
.urun-thumb.noimg { display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--panel-2); }
.urun-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.urun-name { font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.urun-brand { font-size: 12.5px; color: var(--text-dim); }
.urun-code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.urun-go { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: .15s; }
.urun-card:hover .urun-go, .urun-card:focus-visible .urun-go { opacity: 1; }

/* iskelet yukleme */
.urun-card.skel { pointer-events: none; }
.urun-card.skel .urun-thumb { background: var(--panel-2); border-color: var(--line-2); }
.urun-card.skel b, .urun-card.skel .urun-meta span { display: block; height: 12px; border-radius: 4px;
  background: var(--panel-2); animation: pulse 1.2s ease-in-out infinite; }
.urun-card.skel b { width: 70%; }
.urun-card.skel .urun-meta span { width: 45%; }
@keyframes pulse { 50% { opacity: .45; } }

/* filtreli gezinme: sol filtre rayi + sag sonuc izgarasi */
.browse-layout { display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; margin-top: 18px; }
/* Filtre rayi, ustundeki YAPISKAN arama cubugunun (.finder) da altina yapisir; ikisi ayni
   sayfada ve .finder --nav-h'ye yapisiyor. Elde yazili 150px yanlisti: olculdu, nav 72px +
   .finder 117px = 189px, yani ray arama cubugunun 39px ALTINA giriyordu. Iki olcu de
   app.js navYuksekligiOlc() tarafindan yazilir (.finder dar ekranda sararak yukseliyor). */
.browse-filters { position: sticky; top: calc(var(--nav-h) + var(--finder-h, 117px) + 12px);
  display: grid; gap: 16px; align-content: start; }
.browse-main { min-width: 0; }
.filter-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px 14px; }
.filter-group > h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 11px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.filter-empty { font-size: 12.5px; margin: 4px 0 0; }

.crumb-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-family: var(--mono); font-size: 11.5px; margin-bottom: 9px; }
.crumb-row button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.crumb-row button:hover { text-decoration: underline; }
.crumb-row .sep { color: var(--muted); }
.crumb-row .cur { color: var(--text-dim); }

.cat-list, .brand-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.brand-list { max-height: 272px; }
.cat-row, .brand-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13.5px; transition: .13s; }
.cat-row:hover, .brand-row:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.cat-row.on, .brand-row.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cat-row > span:first-child, .brand-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .cc, .brand-row .cc { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; }
.filter-diets .chip .cc { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: 2px; }
.filter-diets .chip.on .cc { color: var(--accent-ink); }
.brand-search { margin-bottom: 8px; }
.brand-search input { padding: 9px 12px; font-size: 13px; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.af-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 999px; padding: 5px 8px 5px 12px; }
.af-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.af-chip button:hover { color: var(--bad); }
.af-clear { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12.5px; text-decoration: underline; }
.af-clear:hover { color: var(--ink); }

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-filters { position: static; }
}

/* Alt yaprak parcalari (filtre dugmesi, yaprak basligi/dibi, perde) YALNIZ telefonda
   cizilir — mobile.css acar. Masaustunde filtre rayi zaten solda ve hep gorunur. */
.filtre-ac, .sheet-bas, .sheet-dip, .sheet-arka { display: none; }

/* Telefonun halkali sonuc kahramani (.wh) masaustunde CIZILIR ama gosterilmez: burada
   kahraman `.verdict-hero`dur ve sayilar ait olduklari kutunun ustunde durur (rtMetrik).
   Ayni DOM, iki dil — rapor akordeonundaki desenin aynisi. */
.wh { display: none; }

/* urun raporu */
.urun-report { margin-top: 20px; }
.report-card { border-top: 4px solid var(--ink); box-shadow: var(--shadow); }
.report-head { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.report-tag { color: var(--ink); font-weight: 600; }
.report-no { margin-left: auto; }
.report-close { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; }
.report-close:hover { color: var(--ink); border-color: var(--ink); }

.allergen-hit { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bad-soft); border: 1px solid rgba(191,59,51,.4); color: var(--bad); }
.allergen-ok  { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--ok-soft); border: 1px solid rgba(27,122,78,.35); color: var(--ok); }
/* Icerik BILINMIYOR: ne yesil ne kirmizi — notr. Yesil onay burada yanlis guven verirdi. */
.allergen-unknown { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px dashed var(--line); color: var(--text-dim); }
.allergen-unknown b { color: var(--text); display: block; margin-bottom: 4px; }
.allergen-unknown a { color: var(--accent); }
.allergen-hit .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-bad { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
  background: var(--mark-bad); box-shadow: inset 0 -2px 0 var(--bad); color: var(--on-mark); }

/* ================= ARACLAR ================= */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  transition: .16s; }
.tool-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-sm); }
.tool-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
  font-size: 23px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.tool-body b { font-family: var(--display); font-size: 17.5px; display: block; margin-bottom: 6px; }
.tool-body p { color: var(--text-dim); font-size: 13.5px; margin: 0; }
.tool-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.tool-go { font-family: var(--mono); font-size: 12px; color: var(--brand); font-weight: 600; }

.tool-layout { margin-top: 4px; align-items: start; }

/* diyet raporu */
.diet-kcal { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px;
  border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.diet-kcal b { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5vw, 52px); color: var(--brand); line-height: 1; }
.diet-kcal span { font-size: 15px; color: var(--text-dim); }
.diet-kcal em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--warn); }

/* ===================== RESPONSIVE ===================== */
/* 7 secenekli ust bar dar ekranda tasmasin: ~1120px alti hamburger menuye dus
   (sayfa duzeni kirilimi 900px'te ayri kalir). */
/* Menu 7 girise cikti; dar masaustunde once ROZETLER dusulur, menu tek satirda kalir. */
@media (max-width: 1320px) { .nav-tag { display: none; } }
/* 1260px altinda menu seridi ile sag blok ayni anda sigmiyor (olculdu: 1200px'te
   41px tasma). Once son-yayin rozeti duser: gelistirme yardimcisi, gezinme degil. */
@media (max-width: 1260px) { .nav-build { display: none; } }
@media (max-width: 1120px) {
  .nav-links, .nav-user, .nav-build { display: none; }
  .nav.open .nav-tag { display: inline-block; }   /* acilir menude yer var, rozet geri gelir */
  .nav.open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--panel); border-bottom: 2px solid var(--ink); padding: 12px; gap: 6px; box-shadow: var(--shadow); }
  .nav-toggle { display: block; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 44px; }
  .grid-2, .grid-3, .grid-4, .steps, .price-grid, .scan-layout, .scan-layout.report-mode,
  .kpi-grid, .partner-grid,
  .history-grid, .footer-grid, .mfa-enroll, .dev-grid, .ocr-grid { grid-template-columns: 1fr; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .section { margin-top: 60px; }
  .finder { position: static; }
}
@media (max-width: 620px) {
  .nav-right .btn { display: none; }   /* dar ekranda CTA gizlenir; hamburger kalir */
  .price-grid, .history-grid, .urun-grid, .tool-grid { grid-template-columns: 1fr; }
  .cmp-table { font-size: 12.5px; } .cmp-table th, .cmp-table td { padding: 11px 8px; }
  .stats { gap: 20px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .finder-row .seg { width: 100%; }
  .seg .chip-btn { flex: 1; }
}

/* ====================================================================
   BEBEK — "gece lambasi" sicak koruma temasi (ozel, guvenli his)
   Yalniz bebek ekranlarinda devreye girer:
   - body.baby-mode: tum viewport'ta sicak erik-gece zemini + gece lambasi
     halesi (nav/footer kendi renklerini korur, yalniz kanvas isinir).
   - .baby: icerik agacinda sicak token'lar + kundak-yumusagi bilesenler.
   Klinik "rapor" dilinden bilerek uzaklasir: mono etiketler yok, buyuk
   yaricap, sert murekkep cizgileri yerine yumusak isik.
   ==================================================================== */
body.baby-mode {
  /* 2026-09-07: zemin erik moru (#1a1422) idi. Palet tum uygulamaya yayilinca
     bebek dunyasi tek basina ayri bir renk dunyasi olarak kaliyordu; gece
     lambasi IMZASI (sicak haleler) korundu, altindaki yuzey notre cekildi. */
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255,184,122,.15), transparent 62%),
    radial-gradient(820px 620px at 86% 6%, rgba(242,183,154,.09), transparent 60%),
    var(--bg);
  /* Bebek ekranlarinda eylem rengi de seftaliye doner: filiz bir dugme,
     seftali vurgulu bir sayfada tek yabanci renk olarak kaliyordu. Kural
     bozulmuyor — eylem yine TEK renk, yalnizca bu dunyada baska bir tek renk.
     (Onceden yalnizca mobile.css'te vardi; palet genellesince buraya alindi.) */
  --brand: #f2b79a; --brand-d: #e0a487; --brand-ink: #2a1409;
  --brand-glow: rgba(242, 183, 154, .28);
  --accent: #f2b79a;
}

.baby {
  /* Yuzeyler genel paletle AYNI (notr). Bebek dunyasinin farki renk sicakligi
     degil ISIK: gece lambasi halesi, yumusak yaricap, yuvarlak baslik yuzu.
     Ayri bir mor yuzey ailesi tutmak uygulamayi iki temaya boluyordu. */
  /* seftali vurgu — kategori tonu (docs/mobil-arayuz.md) */
  --accent:      #f2b79a;
  --accent-2:    #e0a487;
  --accent-ink:  #2a1409;
  --accent-soft: rgba(242,183,154,.12);
  --accent-line: rgba(242,183,154,.32);
  /* gece lambasi (imza) + "guvende" tonu */
  --glow:      #ffbe86;
  --glow-soft: rgba(255,190,134,.16);
  /* "guvende" tonu = paletin UYGUN sinyali (zumrut). Eskiden ayri bir nane
     (#a6e3c5) idi; ayni anlami iki farkli yesille anlatmak paletin
     "bir renk bir is" kuralini bozuyordu. */
  --safe:      var(--ok);
  --safe-soft: var(--ok-soft);
  --safe-line: rgba(53,192,138,.40);
  /* daha yumusak — kundak hissi */
  --radius:    22px;
  --radius-sm: 15px;
}
/* yuvarlak, sicak baslik yuzu */
.baby h1, .baby h2 { font-family: "Quicksand", var(--display); font-weight: 700; letter-spacing: -.005em; }
/* eyebrow: klinik mono etiket yerine sicak, kucuk-harf + parlayan gece lambasi imi */
.baby .eyebrow { font-family: var(--font); text-transform: none; letter-spacing: .01em;
  font-size: 14px; font-weight: 600; color: var(--glow); gap: 9px; }
.baby .eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--glow);
  box-shadow: 0 0 12px 1px var(--glow); }
/* kartlar: sert ust-cizgi yok, ic isik ile pufduman yumusaklik */
.baby .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 54px -32px rgba(0,0,0,.65); }

/* ---- hero: ortalanmis, arkasinda nefes alan gece lambasi halesi ---- */
.baby-hero { position: relative; text-align: center; padding: 26px 0 6px; }
.baby-hero::before {
  content: ""; position: absolute; top: -46px; left: 50%; width: min(520px, 86vw); height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow-soft), transparent 72%);
  pointer-events: none; z-index: 0; animation: babyGlow 6s ease-in-out infinite;
}
@keyframes babyGlow { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
                      50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
.baby-hero > * { position: relative; z-index: 1; }
.baby-hero .eyebrow { justify-content: center; }
.baby-hero h1 { font-size: clamp(32px, 5vw, 54px); margin: 0 auto 16px; max-width: 15ch; }
.baby-hero .lead { color: var(--text-dim); font-size: clamp(16px, 1.6vw, 19px);
  max-width: 56ch; margin: 0 auto 26px; }
.baby-hero .hero-cta { justify-content: center; }
/* sicak isik alti cizgi — fosforlu highlighter yerine yumusak parilti */
.baby-underline { color: var(--glow);
  background: linear-gradient(transparent 64%, var(--glow-soft) 64%); padding: 0 .05em; border-radius: 4px; }
.safe-seal-row { margin-top: 20px; }
.safe-seal { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  background: var(--safe-soft); border: 1px solid var(--safe-line); color: var(--safe);
  font-weight: 600; font-size: 13.5px; }

/* ---- kisisellestirilmis hafta seridi ---- */
.baby-week { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; margin-top: 30px; padding: 22px 26px; border-radius: var(--radius);
  background:
    radial-gradient(420px 180px at 12% 0%, var(--glow-soft), transparent 70%),
    var(--panel);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.bw-week { display: flex; align-items: baseline; gap: 8px; flex: none; }
.bw-week b { font-family: "Quicksand", var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 56px);
  color: var(--glow); line-height: 1; }
.bw-week span { color: var(--text-dim); font-size: 15px; }
.bw-week.bw-moon { font-size: 40px; line-height: 1; }
.bw-body { flex: 1; min-width: 220px; }
.bw-body p { margin: 0 0 12px; color: var(--text-dim); font-size: 14.5px; }
.bw-body p b { color: var(--text); }
.bw-bar { height: 9px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bw-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--glow)); }
.baby-week .btn { flex: none; }

/* ---- bebek bolum basligi (mono/ink cizgi yok) ---- */
.baby-section { margin-top: 58px; }
.baby-head { margin-bottom: 24px; }
.baby-head h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 8px; }
.baby-head p { color: var(--text-dim); font-size: 15.5px; margin: 0; max-width: 58ch; }

/* ---- koruma muhurleri: neyi kontrol ediyoruz ---- */
.seal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.seal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px;
  text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.seal-ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center;
  font-size: 26px; background: var(--safe-soft); border: 1px solid var(--safe-line);
  box-shadow: 0 0 22px -6px var(--safe-line); }
.seal b { display: block; font-size: 15.5px; margin-bottom: 6px; }
.seal p { color: var(--text-dim); font-size: 13px; margin: 0; }

/* ---- bebek merkezi: pufduman gezinme kartlari ---- */
.baby-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.baby-nav-card { display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  transition: .18s; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.baby-nav-card:hover { transform: translateY(-3px); border-color: var(--accent-line);
  box-shadow: 0 20px 44px -24px var(--accent-line); }
.baby-nav-card .em { font-size: 30px; width: 56px; height: 56px; flex: none; border-radius: 18px;
  display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.baby-nav-card .bn-body { flex: 1; min-width: 0; }
.baby-nav-card .bn-body b { font-family: "Quicksand", var(--display); font-size: 17px; display: block; margin-bottom: 4px; }
.baby-nav-card .bn-body small { color: var(--text-dim); font-size: 13px; line-height: 1.5; display: block; }
.baby-nav-card .bn-go { font-size: 20px; color: var(--accent); flex: none; }

/* ---- notlar: mevcut tiplist token'lardan sicak temayi alir; birak boyle ---- */
.baby-tips li { border-radius: var(--radius-sm); }

@media (max-width: 900px) {
  .seal-grid { grid-template-columns: 1fr 1fr; }
  .baby-nav { grid-template-columns: 1fr; }
  .baby-week { gap: 16px; }
  .baby-section { margin-top: 46px; }
}
@media (max-width: 560px) {
  .seal-grid { grid-template-columns: 1fr; }
  .baby-week .btn, .bw-week { width: auto; }
}

/* ---- Cilt Tonu Analizi (gerçek araç) ---- */
.st-video { width: 100%; max-width: 420px; border-radius: 12px; transform: scaleX(-1); display: block; }
/* Canlı kadraj rehberi: şablon katmanı videoyla AYNI aynada (scaleX(-1)) — çizim video
   koordinatında yapılır, ayna ikisini birlikte çevirir. İpucu çubuğu durum renkli. */
.st-cam-stage { position: relative; display: inline-block; width: 100%; max-width: 420px; }
#st-cam-ov { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1);
  pointer-events: none; border-radius: 12px; }
.st-cam-hint { margin-top: 10px; max-width: 420px; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  background: rgba(77,163,255,.10); border: 1px solid rgba(77,163,255,.35); }
.st-cam-hint.ok { background: rgba(87,214,141,.12); border-color: rgba(87,214,141,.5); }
.st-cam-hint.warn { background: rgba(255,193,7,.10); border-color: rgba(255,193,7,.4); }
.st-cam-warns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 420px; }
.st-obst { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; line-height: 1.35;
  background: rgba(255,193,7,.12); border: 1px solid rgba(255,193,7,.4); }
.st-obst.blok { background: rgba(255,77,77,.12); border-color: rgba(255,77,77,.5); }
.st-canvas-wrap { position: relative; display: inline-block; max-width: 100%; margin-top: 12px; }
.st-canvas-wrap canvas { max-width: 100%; height: auto; border-radius: 12px; display: block; cursor: crosshair; }
/* Tarama animasyonu katmanı — fotoğrafın üstünde; tıklamayı (manuel nokta) alta geçirir. */
#st-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; cursor: default; }
.st-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent); background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%); pointer-events: none; }
.st-head { display: flex; gap: 14px; align-items: center; }
.st-result-swatch { width: 64px; height: 64px; border-radius: 14px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.25); }
.st-pal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent;
  color: inherit; cursor: pointer; font-size: 13.5px; }
.pal-chip .sw2 { width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 1px solid rgba(0,0,0,.25); }
.skintone-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* Çekim yönlendirmesi (doğru sonuç ipuçları) */
.st-tips { list-style: none; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(124,255,107,.06); border: 1px solid rgba(124,255,107,.16);
  display: grid; gap: 6px; font-size: 13.5px; }
.st-tips li { display: flex; gap: 8px; align-items: baseline; }
/* KATI kapı reddi: eksik şart listesi (kırmızı durum kutusunun içinde) */
.st-problems { margin: 10px 0 10px 4px; padding: 0 0 0 16px; display: grid; gap: 8px; }
.st-problems li { line-height: 1.45; }
/* Adım göstergesi (1 selfie → 2 test → 3 sonuç) */
.st-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 16px; padding: 0; }
.st-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #9aa0a6; font-size: 13px; }
.st-steps li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.1); font-size: 12px; flex: 0 0 auto; }
.st-steps li.on { color: inherit; border-color: rgba(124,255,107,.4); background: rgba(124,255,107,.08); }
.st-steps li.on b { background: var(--accent, #7CFF6B); color: #0b0d0b; }
@media (max-width: 520px) { .st-steps { font-size: 12px; } .st-steps li { padding: 7px 9px; } }
/* Fotoğrafsız yedek + test atlama linkleri */
.st-noface { text-align: center; margin: 14px 0 0; }
.st-noface a, .st-skip { color: #9aa0a6; cursor: pointer; font-size: 13px; text-decoration: underline; }
.st-skip { display: block; text-align: center; margin-top: 10px; }
/* 1. adım ölçüm özeti + 2. adım test kartı */
.st-measure { border-left: 3px solid rgba(124,255,107,.5); }
.st-result-swatch.sm { width: 46px; height: 46px; }
.st-q { margin-bottom: 4px; }
/* 3. adım: nihai renk kimliği reveal */
.st-reveal-hero { margin: -2px -2px 6px; padding: 18px; border-radius: 14px;
  background: radial-gradient(130% 150% at 0% 0%, rgba(124,255,107,.10), transparent 60%); }
.st-reveal.season-ilkbahar .st-reveal-hero { background: linear-gradient(120deg, rgba(240,180,90,.16), rgba(124,255,107,.10)); }
.st-reveal.season-yaz .st-reveal-hero { background: linear-gradient(120deg, rgba(120,180,255,.16), rgba(200,150,190,.11)); }
.st-reveal.season-sonbahar .st-reveal-hero { background: linear-gradient(120deg, rgba(200,110,55,.18), rgba(120,90,40,.12)); }
.st-reveal.season-kis .st-reveal-hero { background: linear-gradient(120deg, rgba(90,120,195,.18), rgba(150,160,195,.12)); }
.st-reveal-main { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.st-reveal-swatch { width: 74px; height: 74px; border-radius: 18px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.st-noswatch { display: grid; place-items: center; background: rgba(255,255,255,.06); color: #9aa0a6; font-size: 28px; }
.st-reveal-ut { margin: 0; font-size: 30px; line-height: 1.05; font-family: 'Bricolage Grotesque', sans-serif; }
.st-reveal-sub { margin: 4px 0 0; color: #9aa0a6; font-size: 14px; }
/* İMZA: sıcak-soğuk göstergesi (foto + test aynı eksende birleşir) */
.st-gauge { margin: 20px 0 4px; }
.st-gauge-track { position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, #7fb0ff 0%, #c9b8d6 42%, #d8cbb0 58%, #e6b455 100%); }
.st-gauge-final { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px #0b0d0b, 0 0 0 4px #fff, 0 2px 6px rgba(0,0,0,.5); }
.st-gauge-tick { position: absolute; top: -21px; transform: translateX(-50%); font-size: 14px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.st-gauge-labels { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: #9aa0a6; }
.st-gauge-note { margin: 9px 0 0; font-size: 12.5px; color: #9aa0a6; text-align: center; }
/* güven metresi */
.st-meter { margin-top: 16px; }
.st-meter-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.st-meter-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e6b455, var(--accent, #7CFF6B)); transition: width .5s ease; }
.st-meter-txt { display: block; margin-top: 6px; font-size: 13px; color: #9aa0a6; }

/* cilt tonu -> kozmetik öneri: sekmeler + 3 kutu + İKİ kare rozet (sarı alt ton, yeşil güvenlik) */
.st-shade-load { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--muted); }
/* sekme çubuğu — tüm sınıflar; dar ekranda yatay kaydırılır */
.st-shade-tabs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.st-shade-tab { flex: none; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-2); transition: background .15s, border-color .15s; }
.st-shade-tab:hover { border-color: var(--accent-line); }
.st-shade-tab.on { color: var(--on-mark); background: var(--mark); border-color: transparent; }
/* panel — aktif sınıfın 3 kutusu (çizimdeki gibi yan yana; dar ekranda sarar) */
.st-shade-panel { margin-top: 10px; }
.st-shade-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .st-shade-boxes { grid-template-columns: 1fr 1fr; } }
.st-shade-box { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 12px 10px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--panel); min-width: 0; }
.st-shade-photo { width: 84px; height: 84px; border-radius: 10px; object-fit: contain;
  background: #fff; padding: 4px; }
.st-shade-photo.noimg { display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: var(--panel-2); padding: 0; }
.st-shade-name { font-size: 13px; line-height: 1.25; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-shade-brand { font-size: 12px; color: var(--muted); }
/* İKİ kare rozet — yan yana, eşit kare */
.st-shade-sqs { display: flex; gap: 8px; margin-top: 8px; }
.st-sq { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 12px; line-height: 1.05; cursor: default; }
.st-sq b { font-size: 16px; font-weight: 800; }
.st-sq small { font-size: 9.5px; font-weight: 600; opacity: .85; margin-top: 2px; }
.st-sq.yellow { color: var(--on-mark); background: var(--mark); }              /* alt ton uyumu */
.st-sq.green { color: var(--brand-ink); background: var(--ok); }                          /* güvenlik + tercih (hep yeşil) */
.st-sq.green.empty { color: var(--muted); background: var(--panel-2); }        /* içerik verisi yok */
/* "neden önerildi" madde listesi — kutunun tam genişliğinde, sola hizalı */
.st-shade-why { align-self: stretch; text-align: left; margin: 8px 0 0; padding-left: 16px;
  font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.st-shade-why li { margin-bottom: 2px; }

/* Altbilgiden gelen derin baglantinin isaret ettigi yasal bolum — hangi metne
   geldigi belli olsun (KVKK / Kullanim Sartlari / Sorumluluk Reddi ayri baglantilar). */
.card.legal-target { border-color: var(--brand); box-shadow: var(--shadow-glow); }

/* ===================== YASAL METINLER (#/yasal) =====================
   Metinler UZUN. Okunabilirlik burada bir sus degil, hukuki gerek: aydinlatma
   metninin "anlasilir ve acik" olmasi gerekiyor. Bu yuzden satir uzunlugu
   sinirlanir, alt basliklar ayirir, "> " ile isaretlenen cumleler (rizanin ayri
   oldugu, alerjide fiziksel etiketin esas oldugu gibi) kutuya alinir. */
/* Olcu sinirini KARTA degil METNE koyariz: kart daralinca sagda genis bir bosluk
   kaliyor ve sayfa oteki kartlarla hizasini kaybediyordu. */
.legal-doc .legal-p, .legal-doc .legal-list, .legal-doc .legal-vurgu { max-width: 78ch; }
.legal-meta { font-size: 12.5px; margin: 0 0 14px; font-family: var(--mono); }
.legal-h { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.legal-p { font-size: 14px; line-height: 1.7; color: var(--text-dim); margin: 0 0 10px; }
.legal-list { margin: 0 0 12px; padding-left: 20px; }
.legal-list li { font-size: 14px; line-height: 1.65; color: var(--text-dim); margin-bottom: 5px; }
.legal-vurgu {
  font-size: 14px; line-height: 1.65; color: var(--text); margin: 0 0 12px;
  padding: 11px 13px; border-left: 3px solid var(--brand);
  background: var(--panel-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-toc-list { margin: 0; padding-left: 20px; }
.legal-toc-list li { margin-bottom: 8px; font-size: 14px; }
.legal-toc-list a { color: var(--accent); text-decoration: underline; }
.legal-toc-list small { display: block; font-size: 12.5px; margin-top: 2px; }

/* Profildeki RIZA DEFTERI (#/profil → Rızalarım ve KVKK Haklarım) */
.riza-liste { display: grid; gap: 2px; margin-bottom: 14px; }
.riza-satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.riza-satir:last-child { border-bottom: none; }
.riza-ad { font-size: 13.5px; color: var(--text); }
.riza-ad a { color: var(--accent); font-size: 12.5px; margin-left: 6px; text-decoration: underline; cursor: pointer; }
.riza-durum { font-size: 12.5px; font-family: var(--mono); text-align: right; }
.riza-var { color: var(--ok); }
.riza-yok { color: var(--muted); }
.riza-eski { display: block; color: var(--warn); font-size: 11.5px; }
.riza-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.riza-h { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
/* Tarama ekranindaki kisa KVKK notu — fotograf yukleme veri toplamadir, orada soylenir. */
.scan-kvkk { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; max-width: 70ch; }
.scan-kvkk a { color: var(--accent); cursor: pointer; }

/* ===================== ICERIK KARSILASTIRMA (#/karsilastir) — YAN YANA =====================
   Sayfa ortadan ikiye ayrilir ve SOL/SAG ekseni hicbir yerde bozulmaz: secim adimlari,
   fotograflar ve olcu satirlari ayni iki sutunda durur (telefonda da — orada yalniz olcunun
   ADI satirin ustune gecer, degerler yan yana kalir).

   IMZA: olcu satiri ortadaki mono etiketten iki yana acilan bir cubuktur; kazanan tarafin
   degeri tasarim sisteminin fosforlu kalemiyle (--mark) isaretlenir. Boylece "hangisi daha
   iyi" rakam okunmadan gorulur. Cubuk RENGI kararin kendisini tasimaz (uzun cubuk kimi
   olcude iyi, kimi olcude kotudur) — o yuzden yon ipucu etiketin altinda YAZIYLA durur.

   Yapiskan baslik .rt-bar ile ayni kurali kullanir (top: var(--nav-h), app.js olcer). */
.vs-sec { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 26px; }
.vs-sec::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); }
.vs-sutun { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.vs-sutun.vs-dolu { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.vs-p-bas { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.vs-p-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--mark); color: var(--on-mark); }
.vs-p-yan { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
/* Sag sutun kendi ekseninde AYNALANIR: iki fotograf sayfanin dis kenarlarina bakar. */
.vs-sutun[data-taraf="1"] .vs-p-bas,
.vs-sutun[data-taraf="1"] .vs-secili { flex-direction: row-reverse; }
.vs-sutun[data-taraf="1"] .vs-s-ad { align-items: flex-end; text-align: right; }
.vs-sutun[data-taraf="1"] .vs-s-eylem { justify-content: flex-end; }
.vs-sutun[data-taraf="1"] .vs-geri { align-self: flex-end; }

.vs-adim { display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
  font-size: 14px; font-weight: 600; color: var(--text); }
.vs-adim-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 3px 9px; }
.vs-ara { display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vs-ara:focus-within { border-color: var(--accent); }
.vs-ara-ico { color: var(--muted); font-size: 15px; }
.vs-ara input { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 14px; }
.vs-ara input:focus { outline: none; }

.vs-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-right: 4px;
  max-height: 330px; overflow-y: auto; overscroll-behavior: contain; }
.vs-marka { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 10px; cursor: pointer; text-align: left; font: inherit; font-size: 14px;
  color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.vs-marka:hover { background: var(--panel-2); border-color: var(--line); }
.vs-m-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-m-say { flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.vs-urun { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px;
  cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 8px; }
.vs-urun:hover { background: var(--panel-2); border-color: var(--accent-line); }
.vs-u-foto { flex: none; width: 46px; height: 46px; border-radius: 7px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); }
.vs-u-foto.bos { display: grid; place-items: center; font-size: 20px; background: var(--panel-3); }
.vs-u-ad { min-width: 0; font-size: 13.5px; line-height: 1.32; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.vs-secili { display: flex; align-items: center; gap: 14px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vs-s-foto { flex: none; width: 78px; height: 78px; border-radius: 9px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); }
.vs-s-foto.bos { display: grid; place-items: center; font-size: 30px; background: var(--panel-3); }
.vs-s-ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-s-ad b { font-size: 15px; line-height: 1.3; }
.vs-s-ad > span { font-size: 12.5px; color: var(--text-dim); }
.vs-s-no { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.vs-s-eylem { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.vs-link { padding: 0; cursor: pointer; background: none; border: 0; font: inherit; font-size: 12.5px;
  color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.vs-link:hover { border-bottom-color: var(--accent); }
.vs-geri { align-self: flex-start; padding: 0 0 11px; cursor: pointer; background: none; border: 0;
  font: inherit; font-size: 12.5px; color: var(--text-dim); }
.vs-geri b { color: var(--accent); }
.vs-geri:hover { color: var(--text); }
.vs-bekle { margin: 9px 2px; font-size: 13px; color: var(--muted); }
.vs-daha { margin: 7px 2px 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; }

/* --- iki urun secili: yapiskan baslik + karar seridi + olcu satirlari --- */
.vs-baslik { position: sticky; top: var(--nav-h); z-index: 6;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 12px 2px; background: var(--bg); border-bottom: 2px solid var(--ink); }
.vs-b-taraf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vs-b-taraf.vs-b { flex-direction: row-reverse; }
.vs-b-taraf.vs-b .vs-b-ad { align-items: flex-end; text-align: right; }
.vs-b-foto { flex: none; width: 54px; height: 54px; border-radius: 8px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); }
.vs-b-foto.bos { display: grid; place-items: center; font-size: 22px; background: var(--panel-2); }
.vs-b-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-b-ad b { font-family: var(--display); font-size: 16px; line-height: 1.25; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vs-b-ad span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.vs-vs { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }

.vs-karar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px;
  margin: 15px 0 18px; padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 14.5px; }
.vs-kazanan { background: var(--ok-soft); border-color: var(--accent-line); }
.vs-esit { background: var(--panel-2); }
.vs-eksik { background: var(--panel-2); border-style: dashed; color: var(--text-dim); }
.vs-eksik a { color: var(--accent); }
.vs-k-not { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.vs-tablo { display: flex; flex-direction: column; }
.vs-satir { display: grid; grid-template-columns: 1fr minmax(104px, 168px) 1fr;
  align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.vs-satir:last-child { border-bottom: 0; }
.vs-satir.vs-ust { padding: 0; border-bottom: 0; }
.vs-etiket { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); }
.vs-etiket i { font-style: normal; text-transform: none; letter-spacing: .04em;
  font-size: 9px; color: var(--muted); }
.vs-h { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vs-h.vs-a { align-items: flex-end; text-align: right; }
.vs-h.vs-b { align-items: flex-start; text-align: left; }
.vs-deger { padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere;
  font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--text-dim); }
.vs-metin .vs-deger { font-family: var(--font); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.vs-h.kazandi .vs-deger { background: var(--mark); color: var(--on-mark); }
.vs-cubuk { display: flex; width: 100%; height: 6px; border-radius: 999px;
  background: var(--line-2); overflow: hidden; }
.vs-a .vs-cubuk { justify-content: flex-end; }
.vs-b .vs-cubuk { justify-content: flex-start; }
.vs-cubuk s { flex: none; height: 100%; border-radius: 999px; background: var(--muted); text-decoration: none; }
.vs-h.kazandi .vs-cubuk s { background: var(--accent); }

.vs-rapor-bas { margin: 32px 0 14px; padding-top: 15px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.vs-raporlar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.vs-bos { padding: 42px 20px; text-align: center; color: var(--muted); }
.vs-bos-satir { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.vs-bos-cerceve { display: grid; place-items: center; width: 86px; height: 86px;
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 26px; color: var(--line); }
.vs-bos-cerceve.dolu { border-style: solid; border-color: var(--accent-line);
  background: var(--accent-soft); color: var(--accent); }
.vs-bos p { margin: 0; font-size: 14.5px; }

@media (max-width: 860px) {
  .vs-sec { grid-template-columns: 1fr; }
  .vs-sec::before { display: none; }
  /* Secim sutunlari alt alta gelince aynalama YANLIS okunur (ikisi de tek basina durur). */
  .vs-sutun[data-taraf="1"] .vs-p-bas,
  .vs-sutun[data-taraf="1"] .vs-secili { flex-direction: row; }
  .vs-sutun[data-taraf="1"] .vs-s-ad { align-items: flex-start; text-align: left; }
  .vs-sutun[data-taraf="1"] .vs-s-eylem { justify-content: flex-start; }
  .vs-sutun[data-taraf="1"] .vs-geri { align-self: flex-start; }
  .vs-raporlar { grid-template-columns: 1fr; }
  /* OLCU SATIRI TELEFONDA DA IKI SUTUN KALIR — yalniz olcunun adi satirin USTUNE gecer.
     Kullanicinin istedigi sey buydu: "sag ve sol olarak gozuksun ki direk gorebilsin". */
  .vs-satir { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .vs-etiket { grid-row: 1; grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; }
  .vs-deger { font-size: 18px; }
  .vs-baslik { gap: 9px; padding: 10px 2px; }
  .vs-b-taraf { gap: 9px; }
  .vs-b-foto { width: 44px; height: 44px; }
  .vs-b-ad b { font-size: 13.5px; }
  .vs-b-ad span { font-size: 10px; }
  .vs-bos-cerceve { width: 68px; height: 68px; }
}

/* Sohbet balonunda KAYNAKLAR: mesajin sonunda KATLANMIS tek liste.
   Kaynak metni bilgi tabanindan gelir (data/knowledge.md 'Kaynak:' satiri) — model
   kaynagi olmayan bir iddiada kaynak yazmaz (bkz. chatbot._SYSTEM KAYNAK GOSTERIMI).
   Satir ici kunye olarak basildiginda metnin akisini boluyordu; bilgi kaybolmadan
   bir tik uzaga alindi. */
.msg-src-box { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.msg-src-box > summary { cursor: pointer; font-family: var(--mono); font-size: 11px;
  color: var(--muted); list-style: none; }
.msg-src-box > summary::-webkit-details-marker { display: none; }
.msg-src-box > summary:hover { color: var(--text-dim); }
.msg-src-box ul { margin: 7px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.msg-src-box li { font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--muted); }

/* ===================== NUTRI-SCORE (A–E) =====================
   Renkler MARKA TOKEN'I DEGIL — Nutri-Score'un RESMI renkleridir; kullanici ambalajda
   gordugu seridin aynisini gormeli, o yuzden sabit hex (bkz. app.js NUTRI_COLORS). */
.nutri { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.nutri-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.nutri-strip { display: flex; gap: 3px; }
.nutri-cell {
  width: 30px; height: 34px; display: grid; place-items: center; border-radius: 5px;
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
}
.nutri-cell.on { color: #fff; transform: scale(1.14); box-shadow: var(--shadow-sm); }
/* Kisisel kayma oncesi harf: solgun ve ustu cizili — nereden nereye gidildigi gorunur. */
.nutri-cell.was { text-decoration: line-through; opacity: .6; }
.nutri-shift { font-size: 13px; color: var(--warn); cursor: help; }
.nutri-shift b { color: var(--warn); }
.nutri-why { flex-basis: 100%; margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 13.5px; }
.nutri-src { flex-basis: 100%; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.nutri-note { font-size: 13px; color: var(--muted); }
.nutri-empty .nutri-strip { opacity: .45; }

/* ===================== BESIN & ISLENMISLIK & IDDIA DENETIMI =====================
   Tarama raporunun etiket katmani: hizli bakis seridi, islenmislik (NOVA), besin
   yogunlugu, detayli puanlama, "Ambalaj ne diyor?", icindekiler kartlari.

   RENK: yeni renk TANIMLANMADI — hepsi mevcut durum murekkeplerinden (--ok/--warn/--bad/
   --harm) ve yuzeylerden (--panel-2/--line) gelir. Tek istisna Nutri-Score harfi: onun
   rengi resmi sabit hex'tir ve JS'te satir-ici yazilir (bkz. NUTRI_COLORS).
   OLCU: sayilar --mono ile — rapor dilinde veri daima daktilo yuzuyle yazilir.  */

/* --- Hizli bakis: uc sayilabilir olcu --- */
.qt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 18px; }
.qt { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qt-badge { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid;
  place-items: center; font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--ink-2); }
.qt-nutri { color: #fff; }
.qt-ok   { background: var(--ok); }
.qt-warn { background: var(--warn); }
.qt-bad  { background: var(--bad); }
.qt-body { min-width: 0; }
.qt-body b { display: block; font-size: 14.5px; line-height: 1.25; }
.qt-body span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* --- Blok kaynak satiri (tum yeni bloklarda ortak) --- */
.blk-src { font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  margin: 10px 0 0; line-height: 1.5; }
/* Baslik yanindaki adet rozeti ("6 madde", "11 kalem") */
.cb-count { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin-left: 10px;
  vertical-align: middle; }

/* --- Islenmislik notu (NOVA) --- */
.nv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.nv-badge { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid;
  place-items: center; font-family: var(--mono); font-size: 26px; font-weight: 700;
  color: var(--ink-2); }
.nv-ok { background: var(--ok); } .nv-warn { background: var(--warn); } .nv-bad { background: var(--bad); }
.nv-head b { display: block; font-size: 18px; }
.nv-head small { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-top: 3px; }
.nv-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.nv-step i { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.nv-step small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 6px;
  text-align: center; }
.nv-step.on small { color: var(--text); font-weight: 600; }
.nv-step.on.nv-ok i   { background: var(--ok); }
.nv-step.on.nv-warn i { background: var(--warn); }
.nv-step.on.nv-bad i  { background: var(--bad); }
.nv-why { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.6; }
.nv-why b { color: var(--text); }

/* --- Besin yogunlugu --- */
.nf-kasik { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  background: var(--warn-soft); border: 1px solid rgba(240, 180, 41, .3);
  border-radius: var(--radius-sm); }
.nf-kasik-n { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--warn);
  line-height: 1; }
.nf-kasik span:last-child { font-size: 14px; }
.nf-kasik small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Satir izgarasi: etiket | 100 g | (porsiyon) | cubuk | yuzde.
   'porsiyon' sutunu ETIKETTE PORSIYON YAZIYORSA cizilir; yoksa hucre hic uretilmez ve
   izgara 4 sutuna duser. Sutun sayisi .nf-por-on sinifiyla secilir. */
.nf-head, .nf-row { display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(120px, 1.6fr) 76px minmax(70px, 1fr) 54px; }
.nf-por-on .nf-head, .nf-por-on .nf-row {
  grid-template-columns: minmax(120px, 1.4fr) 76px 76px minmax(60px, 1fr) 54px; }
.nf-head { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 8px;
  border-bottom: 1px solid var(--line); }
.nf-head .nf-col { text-align: right; } .nf-head .nf-lbl { text-align: left; }
/* Baslik satirinda cubuk sutununun kendi etiketi yok; "gunluk referansin payi" hem cubugun
   hem yuzdenin ustune yayilir. Yoksa 54px'lik yuzde sutununa sikisip uc satira boluyordu. */
.nf-head .nf-col-pct { grid-column: 3 / -1; }
.nf-rows { list-style: none; margin: 0; padding: 0; }
.nf-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.nf-row:last-child { border-bottom: 0; }
.nf-lbl { font-size: 14px; }
.nf-val { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text-dim); }
.nf-val b { color: var(--text); font-size: 15px; }
.nf-por { color: var(--muted); }
.nf-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.nf-bar i { display: block; height: 100%; background: var(--text-dim); border-radius: 3px; }
.nf-bar i.nf-ok { background: var(--ok); } .nf-bar i.nf-warn { background: var(--warn); }
.nf-bar i.nf-bad { background: var(--bad); }
.nf-pct { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--text-dim); }
.nf-chip { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  vertical-align: 1px; }
.nf-chip.nf-ok   { background: var(--ok-soft);   color: var(--ok); }
.nf-chip.nf-warn { background: var(--warn-soft); color: var(--warn); }
.nf-chip.nf-bad  { background: var(--bad-soft);  color: var(--bad); }
.nf-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }

/* --- Detayli puanlama (Nutri-Score alt puanlarindan) --- */
.ns-rows { list-style: none; margin: 0; padding: 0; }
.ns-row { display: grid; align-items: center; gap: 10px; padding: 10px 0;
  grid-template-columns: minmax(110px, 1.2fr) minmax(80px, 1.6fr) 62px auto;
  border-bottom: 1px solid var(--line-2); }
.ns-row:last-child { border-bottom: 0; }
.ns-lbl { font-size: 14px; }
.ns-plus { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ok); background: var(--ok-soft);
  padding: 2px 6px; border-radius: 999px; margin-left: 5px; vertical-align: 1px; }
.ns-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ns-bar i { display: block; height: 100%; border-radius: 4px; }
.ns-ok { background: var(--ok); } .ns-warn { background: var(--warn); } .ns-bad { background: var(--bad); }
.ns-num { font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right; }
.ns-num i { font-style: normal; font-size: 10px; color: var(--muted); }
.ns-raw { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ns-note { font-size: 13px; color: var(--text-dim); margin: 12px 0 0; padding: 10px 12px;
  background: var(--panel-2); border-radius: var(--radius-sm); line-height: 1.6; }

/* --- "Ambalaj ne diyor?" --- */
.cl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-row { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel-2);
  border-left: 3px solid var(--line); }
.cl-row.cl-ok    { border-left-color: var(--ok); }
.cl-row.cl-warn  { border-left-color: var(--warn); }
.cl-row.cl-bad   { border-left-color: var(--bad); }
.cl-row.cl-muted { border-left-color: var(--muted); }
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-head b { font-size: 14.5px; }
.cl-row p { font-size: 13.5px; color: var(--text-dim); margin: 6px 0 0; line-height: 1.6; }
.cl-badge { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.cl-b-ok    { background: var(--ok);   color: var(--ink-2); }
.cl-b-warn  { background: var(--warn); color: var(--ink-2); }
.cl-b-bad   { background: var(--bad);  color: var(--ink-2); }
.cl-b-muted { background: var(--line); color: var(--text-dim); }

/* --- Alerjen uyarisi --- */
.al-block p { line-height: 1.65; }
.al-mine { color: var(--bad); font-size: 14.5px; margin: 0; }
.al-trace { color: var(--warn); font-size: 14px; margin: 8px 0 0; }

/* --- Icindekiler kartlari --- */
.ing-cards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ic { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--panel-2);
  border-left: 3px solid var(--line); }
.ic-ok   { border-left-color: var(--ok); }
.ic-warn { border-left-color: var(--warn); }
.ic-bad  { border-left-color: var(--bad); }
.ic-harm { border-left-color: var(--harm); }
.ic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ic-top b { font-size: 14px; line-height: 1.3; }
.ic-badge { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.ic-b-ok   { background: var(--ok-soft);   color: var(--ok); }
.ic-b-warn { background: var(--warn-soft); color: var(--warn); }
.ic-b-bad  { background: var(--bad-soft);  color: var(--bad); }
.ic-b-harm { background: var(--harm-soft); color: var(--harm); }
.ic-desc { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.ic-desc:empty { display: none; }
.ic-why { font-size: 12.5px; color: var(--text-dim); margin: 7px 0 0; padding-top: 7px;
  border-top: 1px solid var(--line-2); line-height: 1.55; }

/* --- Birlesik "Dikkat Edilecek Maddeler" blogu --- */
.cb-sep { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 16px 0 8px;
  padding-top: 12px; border-top: 1px solid var(--line); }

/* --- "Ne sikllikta" bandi --- */
.freq-band { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2);
  border-left-width: 3px; }
.freq-band.fb-ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.freq-band.fb-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.freq-band.fb-bad  { border-left-color: var(--bad);  background: var(--bad-soft); }
.fb-ico { flex: none; font-size: 20px; line-height: 1; }
.fb-body { min-width: 0; }
.fb-body b { display: block; font-size: 15.5px; }
.fb-body span { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.fb-why { font-family: var(--mono); font-size: 10.5px; color: var(--muted) !important;
  margin-top: 5px !important; }

/* --- NOVA: belirtec -> tetikleyen icindekiler satiri --- */
.nv-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.nv-rows li { display: flex; align-items: baseline; gap: 10px; padding: 7px 11px;
  background: var(--panel-2); border-radius: var(--radius-sm); font-size: 13.5px; }
.nv-rows li b { flex: none; }
.nv-rows li span { color: var(--muted); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.nv-rows li span::before { content: "90 "; }

/* --- Paket toplami seridi --- */
.nf-paket { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line); }
.nf-paket-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.nf-paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nf-paket li { font-family: var(--mono); font-size: 13px; }
.nf-paket li b { font-size: 19px; color: var(--text); }
.nf-paket li span { display: block; font-family: var(--font); font-size: 11.5px;
  color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* --- Iddia satirinda kaynak yeri (on yuz / urun adi) --- */
.cl-src { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; margin-left: auto;
  white-space: nowrap; }

/* --- Icindekiler kartinda ROL cipi --- */
.ic-rol { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .05em;
  color: var(--text-dim); background: var(--panel-3); border-radius: 999px; padding: 2px 7px;
  margin-right: 6px; white-space: nowrap; }

/* --- Dar ekran: izgaralar tek sutuna --- */
@media (max-width: 640px) {
  .qt-row { grid-template-columns: 1fr; }
  .ing-cards { grid-template-columns: 1fr; }
  /* Besin satirinda porsiyon sutunu ve cubuk dusurulur: dar ekranda okunabilirlik
     sayilarda, cubukta degil. */
  /* Dar ekranda porsiyon sutunu ve cubuk dusurulur: okunabilirlik sayilarda, cubukta degil.
     Etiket de KENDI SATIRINA alinir — uc sutunlu kalinca "Doymus yag (g) YUKSEK" 80px'e
     sikisip uc satira boluyordu. */
  .nf-head { display: none; }
  .nf-row, .nf-por-on .nf-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .nf-row .nf-lbl { grid-column: 1 / -1; }
  .nf-bar, .nf-por { display: none; }
  .nf-val { text-align: left; }
  .ns-row { grid-template-columns: 1fr 56px; }
  .ns-bar, .ns-raw { display: none; }
  .nv-scale small { font-size: 9px; }
  .nf-paket ul { grid-template-columns: 1fr 1fr; }
  .nv-rows li { flex-direction: column; gap: 2px; }
}

/* ===================== YONETICI: METRIKLER ===================== */
.metric-block { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.metric-block h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.metric-row { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 56px;
  align-items: center; gap: 12px; margin-bottom: 8px; }
.metric-lab { font-size: 13.5px; color: var(--text-dim); }
.metric-val { font-family: var(--mono); font-size: 13px; text-align: right; }
.metric-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.metric-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px;
  color: var(--text-dim); border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.metric-list li b { color: var(--text); font-family: var(--mono); }
/* Gunluk tarama minik sutun grafigi — harici kutuphane YOK. */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.spark span { flex: 1; min-width: 3px; background: var(--brand); border-radius: 2px 2px 0 0; opacity: .8; }
.spark span:hover { opacity: 1; }

/* ===================== YONETICI: MODEL & MOD ===================== */
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 14px 0; }
.model-row { display: grid; gap: 6px; font-size: 13.5px; color: var(--text-dim); }
.model-row select { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13.5px; }
.model-toggles { display: grid; gap: 12px; margin: 18px 0; }
.model-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.model-check input { margin-top: 3px; }
.model-check b { color: var(--text); }

/* ===================== SAHA TEST MODU ANKETI ===================== */
.pilot-ask { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pilot-ask b { font-size: 14px; }
.pilot-ask .muted { font-size: 12.5px; }
.pilot-btns { display: flex; gap: 8px; }
.pilot-btns .btn { padding: 7px 14px; font-size: 13.5px; }
.pilot-note { flex-basis: 100%; display: flex; gap: 8px; margin-top: 8px; }
.pilot-note input { flex: 1; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13.5px; }

/* ===================== PROFIL PAYLASIMI (#/paylasim) ===================== */
.pay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pay-form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--text-dim); }
.pay-form .pay-wide { grid-column: 1 / -1; }
.pay-form input, .pay-form select {
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px;
}

/* ---- KVKK md.7 silme bloğu (yönetici kullanıcı detayı) --------------------------------
   Kırmızı çerçeve KASITLI: bu bölümdeki iki düğme GERİ ALINAMAZ işlem yapar. Panelin
   geri kalanı okuma; burası yazma. Görsel ayrım o farkı taşıyor. */
.kvkk-box {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line));
}
.kvkk-box p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.kvkk-box code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.kvkk-box input[type="text"] {
  width: 100%; max-width: 420px; margin: 2px 0 12px; padding: 9px 11px;
  border-radius: var(--radius-sm); background: var(--panel);
  border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13.5px;
}
.kvkk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Kilitli düğme SOLUK ve tıklanamaz: e-posta birebir yazılmadan etkin olmaz. */
.chip-btn.danger { border-color: var(--bad); color: var(--bad); }
.chip-btn.danger:hover:not(:disabled) { background: var(--mark-bad); color: var(--on-mark); border-color: transparent; }
.chip-btn.danger:disabled { opacity: .45; cursor: not-allowed; }

/* ---- KOZMETİK kutuları: formül bileşimi, kısıtlı madde notu, kullanım kartları ----
   .nv-* (NOVA) ve .freq-band görsel dili YENİDEN KULLANILIYOR — loadBlock ve usageBlock
   onların sınıflarını çağırır, burada yalnız kendilerine özgü olanlar tanımlı. */
.fm-rows { list-style: none; margin: 0; padding: 0; }
.fm-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.fm-row:last-child { border-bottom: 0; }
.fm-ad { font-weight: 600; }
.fm-adet { font-variant-numeric: tabular-nums; opacity: .8; }
.fm-kalem { grid-column: 1 / -1; font-size: 12px; opacity: .65; line-height: 1.45; }

.rst-note { margin-top: 12px; font-size: 13px; }
.rst-note > summary { cursor: pointer; opacity: .8; }
.rst-note > summary i { opacity: .6; font-style: normal; }

.us-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-card { padding: 10px 12px; border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 10px; }
.us-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.us-head i { font-style: normal; font-size: 12px; opacity: .6; }
.us-desc { margin: 6px 0 8px; font-size: 13px; line-height: 1.5; }
.us-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.us-meta li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.us-meta span { opacity: .6; }
@media (max-width: 480px) { .us-meta li { grid-template-columns: 1fr; gap: 0; } }