/* ====================================================================
   MyHealthAssist — MOBIL ARAYUZ  (styles.css'ten SONRA yuklenir)

   NEDEN AYRI BIR DOSYA DEGIL DE AYRI BIR ARAYUZ?
   ---------------------------------------------
   Bu dosyanin eski hali "mobil kabuk"tu: ayni masaustu arayuzunu dar
   ekrana sigdiran olcu duzeltmeleri. Sonuc, telefonda kucultulmus bir
   WEB SITESIYDI. Artik oyle degil: burasi mobilin KENDI tasarim dili.
   Ayni DOM, ayni islevler, ayri gorsel dil ve ayri ekran duzeni.

   SAHA INCELEMESI (3 guncel uygulama, mobil gorunumde acilip bakildi)
   ------------------------------------------------------------------
   · Yuka        — rapor = tek buyuk skor + "Negatives/Positives" SATIRLARI.
                   Her satir: ikon · baslik · tek satir gerekce · sagda deger
                   ve renkli nokta. Kutu/kart yok, ince ayrac var.
   · Cal AI      — fotograf ekranin KENDISI; sonuclar fotografin uzerinde
                   yuvarlak etiketler halinde durur. Buyuk yaricap, buyuk tip.
   · INCI Beauty — ana ekran iki dev eylem kutusu (Tara / Ara), altinda
                   hedefler DUZ LISTE (ikon + baslik + tek satir aciklama).
   Ucunde de ortak olan ve bizde eksik olan sey: ana ekranin isi TEK EYLEMDIR;
   pazarlama metni telefonda yoktur; icerik karttan cok SATIRDIR.

   TASARIM DILI — "KESIT"
   ----------------------
   Etiket okumak, urunun icini kesip katmanlarina bakmaktir. Verilen palet
   (koyu sarap -> kereste -> yosun -> filiz -> parsomen) zaten bir kesit:
   bir kutugun ic halkalari. Buradan iki tasiyici oge cikti:

     1) KESIT OLCER — her olcu (saglik skoru, uyum, NOVA, katki sayisi)
        AYNI nesneyle cizilir: bes bolmeli bir serit; dolu bolme sayisi
        olcunun besli olcekteki yeri. Uygulama bu tek atomdan taniniyor.
     2) DAMAR CIZGISI — her bulgu satirinin solundaki 3px'lik dikey vurus.
        Rengi tehdit seviyesi. Masaustundeki "fosforlu kalem" isaretinin
        mobildeki karsiligi: ayni "isaretlenmis" fikri, dokunmatige uygun.

   Masaustunun yesil-karbon temasi ve Bricolage/Schibsted yuzleri BURADA
   KULLANILMAZ. Mobil kendi paletini ve kendi tipografisini tasir; ikisi
   yan yana konunca ayni urunun iki farkli arayuzu olduklari gorulur.

   NOT — TIPOGRAFI: Fraunces + Instrument Sans yalnizca dar ekranda
   yuklenir (frontend/mobile.js, fontlariYukle). Masaustu kullanicisi bu
   iki dosyayi indirmez.
   ==================================================================== */

/* ===== alt sekme seridi — varsayilan olarak KAPALI (masaustu) ===== */
.tabbar { display: none; }
.tabbar-ico { width: 23px; height: 23px; flex: none; }

/* ===== baglamsal geri seridi — masaustunde ASLA ===== */
/* Genis ekranda `.nav` zaten duruyor ve marka + menu + "Urunu Tara" tasiyor;
   ikinci bir baslik serit ust uste iki bar demek olurdu. mobile.js seridi dar
   ekran disinda zaten `hidden` birakir, bu ikinci kilit. */
.m-ust { display: none; }

/* ===== Araclar sayfasindaki kurulum karti =====
   <button>, ama komsu <a class="tool-card"> kartlariyla ayni gorunmeli.
   .tool-card display:flex verdigi icin [hidden] tek basina gizlemez. */
.tool-card[hidden] { display: none; }
.kurulum-karti {
  width: 100%; text-align: left; font: inherit; color: inherit;
  border-left: 3px solid var(--mark);
}
.kurulum-karti .tool-ico { background: var(--accent-soft); border-color: var(--accent-line); }
/* Yukarisi 2026-09-08'e kadar emekli sariya (#f3ea5f) SABIT bagliydi: kartin
   cercevesi ve 'Kur' etiketi mark tokenine gecmisti, ikon kutusu geride
   kalmisti. Artik tokenden geliyor, yani palet dondugunde o da doner. */
.kurulum-karti .tool-go { color: var(--mark); }

/* Mobil sayfa govdeleri masaustunde ASLA cizilmez (mobile-pages.js zaten
   yalnizca dar ekranda devreye girer; bu yalnizca ikinci kilit). */
.m-home { display: none; }


/* ####################################################################
   MOBIL                                                    <= 760px
   #################################################################### */
@media (max-width: 760px) {

/* ====================================================================
   1) OLCU VE TIPOGRAFI — telefona ozel devralmalar

   PALET ARTIK BURADA DEGIL. 2026-09-07'ye kadar notr palet (zemin/kart/
   filiz/dort sinyal/kategori tonlari) BU blokta tanimliydi ve yalnizca
   <=760px'te gecerliydi: masaustu eski yesil-karbon temada kaliyordu, yani
   ayni uygulama ekran genisligine gore IKI ayri renk dunyasi gosteriyordu.
   Palet styles.css'in genel :root blogunu tasindi ve TEK kaynak orasi.

   BURAYA RENK TOKENI YAZILMAZ (--bg/--panel/--line/--text/--brand/--ok/
   --warn/--bad/--harm/kategori tonlari). Yazilirsa masaustu ile telefon
   yeniden ayrisir; tests/js/mobil-arayuz.test.mjs bunu duserir.
   Gerekce, kontrast olcumleri ve renk korlugu notu:
   docs/mobil-arayuz.md "Palet" bolumu.

   Asagida kalanlar renk DEGIL olcudur: telefonda yaricap daha yumusak,
   golge daha kisa, baslik/sekme yuksekligi farkli — ve tipografi ayridir
   (Fraunces + Instrument Sans; mobile.js yukler, yuklenemezse sistem yuzu).
   ==================================================================== */
:root {
  --radius:    20px;      /* masaustu 14px — telefonda daha yumusak  */
  --radius-sm: 14px;
  --shadow:      0 18px 40px -22px rgba(0, 0, 0, .8);
  --shadow-sm:   0 10px 24px -16px rgba(0, 0, 0, .7);
  --shadow-glow: 0 14px 34px -18px var(--brand-glow);

  --tabbar-h: 62px;
  /* ADIM CUBUGU yuksekligi. Yalnizca cubugu OLAN sayfalarda ayrilir; govdenin alt
     bosluguna eklenmesi icin `body:has(.scan-go)` kapisi kullanilir (asagida).
     Sifir olmadigi her yerde sekme seridiyle TOPLANIR: 56 + 62 = 118px. */
  --eylem-h: 64px;
  /* Ust bar telefonda gizli (3. bolum) -> yapiskan kabin tepesi 0. app.js
     navYuksekligiOlc() zaten 0 olcer; buradaki deger ILK KAREYE ait yedek.
     NOT: `body:has(.scan-go)` denendi ve BIRAKILDI — `:has()` desteklemeyen eski
     Android WebView'de sayfanin son satiri cubugun altinda kalirdi (bu dosyada
     `color-mix` de ayni gerekceyle kullanilmiyor). Bosluk `.scan-layout`a verildi:
     tarama sayfasinin en alt kabi odur, kosulsuz calisir. */
  --nav-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Ust ve YAN centikler. `viewport-fit=cover` kosulsuz acik (index.html), yani
     yatayda da cerceve icine giriliyor: yatay tutulan centikli bir telefonda
     tam genislikteki her sabit oge (alt serit, alt yaprak, adim cubugu) centigin
     altina kayar. Ustteki ise `position: sticky` ofsetleri icin gerekli — govdenin
     dolgusu yapiskan ofseti COZMEZ. */
  --safe-t: env(safe-area-inset-top, 0px);
  /* Klavyenin yedigi pay (mobile.js olcer). Destek yoksa 0 kalir. */
  --klavye: 0px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --font:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", "Instrument Sans", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ====================================================================
   2) TEMEL — gövde, tip olcegi
   ==================================================================== */
body {
  /* Ust bar kaldirildi (bkz. 3. bolum); centik payini artik govde tasiyor. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
  -webkit-font-smoothing: antialiased;
}
body.auth-page { padding-bottom: var(--safe-b); }

/* Yan centik payi: yatay tutulan centikli telefonda metnin ilk/son harfi
   cercevenin altina giriyordu. */
.wrap { padding: 0 calc(18px + var(--safe-r)) 0 calc(18px + var(--safe-l)); }
/* .page ve .wrap AYNI ogede birlikte kullanilir (<div class="wrap page">).
   `padding: 22px 0 14px` yazmak .wrap'in yatay dolgusunu ezip butun sayfayi
   ekran kenarina yapistirir — yalniz dikey kenarlar yazilir. */
.page { padding-top: 22px; padding-bottom: 14px; }
/* SAYFA GIRIS ANIMASYONU TELEFONDA YOK — dekoratif degil, tuzak.
   `.page`in `rise` animasyonu transform uygular ve TRANSFORMLU BIR ATA, icindeki
   her `position: fixed` ogeyi gorunume degil KENDI KUTUSUNA baglar. Bu projede
   bir kez olculdu: katalog filtre yapragi ekranin 4940px asagisinda aciliyordu;
   dolgu `both` -> `backwards` yapilinca animasyon BITTIKTEN SONRASI duzeldi
   (tests/js/referans-desenler.test.mjs bunu kilitliyor).
   Ama adim cubugu (§8) `.page`in ICINDE ve iki durum daha var: animasyon
   SURERKEN (350ms) ve hic baslamadiginda (donmus/arka plan sekme) `from` karesi
   uygulanir. Tarayicida olculdu, 375x812: cubugun alt kenari y=1294, gorunum 812
   — birincil eylem ekranin 500px altinda. Animasyonu kaldirmak kurali kokunden
   bitirir; kazanci telefonda zaten gorunmeyen bir suslemeydi. */
.page { animation: none; }

/* Baslik yuzu: Fraunces yalnizca BASLIK ve SAYIDA. Govde metni her zaman
   Instrument Sans — serif govde telefonda okunurlugu dusuruyordu. */
h1, h2, h3, .page-title, .plan-price { font-family: var(--display); letter-spacing: -.015em; }
.page-title { font-size: 30px; line-height: 1.08; font-weight: 700; }
.page-sub { font-size: 15px; line-height: 1.55; color: var(--text-dim); }

/* ====================================================================
   SONUC KAHRAMANI — HALKA + KATKI SATIRLARI (WHOOP deseni)
   app.js -> whHero(). Masaustu kahramani (.verdict-hero) telefonda
   gizlenir; ayni DOM, iki dil.
   ==================================================================== */
/* KURAL KOSULLU OLMALI. Halka (.wh) YALNIZ tarama sonucunda ciziliyor
   (renderResult -> whHero); katalog urun detayi ve karsilastirma
   (renderUrunDetail) yalnizca .verdict-hero uretiyor. Kural kosulsuzken
   telefonda o ekranlarda KARAR HIC GORUNMUYORDU — ekranin en onemli bilgisi.
   Tarayicida goruldu: #/urunler detayinda rapor "Skorlar neye gore?" ile
   basliyordu, karar basligi yoktu.
   Ikisi KARDES ciziliyor (sl-hero: whHero + hero), yani "halka varsa masaustu
   kahramanini gizle" tam olarak yazilabiliyor. */
.wh ~ .verdict-hero { display: none; }
.wh { display: block; margin: 0 0 14px; }
.wh-urun { margin: 0 0 14px; text-align: center; font-size: 13px; color: var(--text-dim);
  line-height: 1.4; }
.wh-cat { display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 99px;
  background: var(--panel-2); color: var(--muted); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }

/* --- halka --- */
.wh-halka { position: relative; width: 210px; height: 210px; margin: 0 auto 4px; }
.wh-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wh-iz { fill: none; stroke: var(--panel-3); stroke-width: 13; }
.wh-yay { fill: none; stroke: var(--ok); stroke-width: 13; stroke-linecap: round;
  transition: stroke-dasharray .5s ease; }
.wh-halka.dikkat .wh-yay { stroke: var(--warn); }
.wh-halka.kacin  .wh-yay { stroke: var(--bad); }
.wh-halka.bilinmiyor .wh-yay { stroke: var(--muted); }
.wh-ic { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; }
.wh-karar { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--muted); }
.wh-halka.uygun  .wh-karar { color: var(--ok); }
.wh-halka.dikkat .wh-karar { color: var(--warn); }
.wh-halka.kacin  .wh-karar { color: var(--bad); }
.wh-val { font-family: var(--display); font-size: 58px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--text); }
.wh-lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--text-dim); text-transform: uppercase; }

/* --- kadran gostergesi (WHOOP'un nokta seridi) --- */
.wh-dots { display: flex; justify-content: center; gap: 7px; margin: 2px 0 14px; }
.wh-nokta { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 99px;
  background: var(--line); cursor: pointer; }
.wh-nokta.on { background: var(--text-dim); }
.wh-nokta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- katki satirlari --- */
.wh-govde { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 14px 12px; }
.wh-govde[hidden] { display: none; }
.wh-halkalar .wh-kad[hidden] { display: none; }
.wh-rows { list-style: none; margin: 0; padding: 0; }
.wh-row { display: grid; grid-template-columns: 1fr auto 40px 30px; align-items: center;
  gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.wh-row:last-child { border-bottom: none; }
/* Madde adi KIRPILMAZ, en fazla iki satira sarar: WHOOP'un etiketleri kisa ve sabit
   ("SLEEP CONSISTENCY"), bizimkiler etiketten okunan madde adlari — "Sodyum benzoat (E…"
   diye kesilirse satirin tasidigi TEK ise yarar bilgi kaybolur. */
.wh-r-ad { min-width: 0; font-size: 13px; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.wh-r-kel { font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.wh-row.harm .wh-r-kel { color: var(--harm); background: var(--harm-soft); }
.wh-row.bad  .wh-r-kel { color: var(--bad);  background: var(--bad-soft); }
.wh-row.warn .wh-r-kel { color: var(--warn); background: var(--warn-soft); }
.wh-row .m-olcu { width: 40px; }
.wh-row.harm .m-olcu s { background: var(--harm); }
.wh-row.bad  .m-olcu s { background: var(--bad); }
.wh-row.warn .m-olcu s { background: var(--warn); }
.wh-r-p { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text-dim); }
.wh-bos { margin: 12px 0; font-size: 13.5px; color: var(--text-dim); text-align: center; }
.wh-bos.ok { color: var(--ok); }

/* --- lejant: ekranda GERCEKTEN olan renkler --- */
.wh-lejant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.wh-lj { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--text-dim); }
.wh-lj::before { content: ""; width: 14px; height: 3px; border-radius: 99px;
  background: var(--line); }
.wh-lj.wh-harm::before { background: var(--harm); }
.wh-lj.wh-bad::before  { background: var(--bad); }
.wh-lj.wh-warn::before { background: var(--warn); }
.wh-lj-not { margin-left: auto; font-size: 11px; color: var(--muted); }

/* --- yorum kutusu + baglanti (WHOOP'un "DIVE INTO MY SLEEP") --- */
.wh-not { margin-top: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel-2); }
.wh-not p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.wh-cta { padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--brand); }
.wh-cta span { margin-left: 4px; }

/* Ozet seridi telefonda CIZILMEZ: kahramandaki satirlar ayni bulgulari ZATEN sayiyor
   (biri skor kirilimi, digeri icindekiler dokumu) ve alt alta iki ozet, tek ekranda
   ayni soruya iki kez cevap vermek olur. Masaustunde kahraman halkasiz oldugu icin
   serit orada kalir. */
.rt-ozet { display: none; }

/* ---- SAYFA ACIKLAMASI "?" ARKASINDA (app.js -> mobilBilgiKapsulle) --------------------
   Paragraf telefonda 4-5 satira sariyor ve ekranin ilk ucte birini yiyordu. Metin
   silinmedi: basliktaki kucuk "?" dugmesinin arkasinda duruyor, dokununca yerinde acilir.
   Masaustunde ne dugme ne bu kurallar var (bu dosya <=760px). */
.bilgi-ac {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 9px; padding: 0; flex: none;
  vertical-align: middle; cursor: pointer;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1;
}
.bilgi-ac[aria-expanded="true"] {
  background: var(--brand); color: var(--brand-ink); border-color: var(--brand);
}
.bilgi-ac:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Baslik rozeti ("profiline bagli") dar ekranda KELIMENIN ORTASINDAN kiriliyordu —
   ikinci satirda tek basina "bagli" kaliyordu. Rozet butun olarak alt satira insin. */
.page-title .badge { white-space: nowrap; }
/* Panel: acilinca metnin BIR BILGI oldugu belli olsun diye kendi yuzeyi + damar cizgisi.
   `!important` gerekli degil ama `[hidden]` UA kurali dusuk oncelikli; .page-sub'un kendi
   display'i ileride degisirse metin gizlenmeden kalirdi (.rt-panel[hidden] ile ayni kilit). */
.bilgi-govde[hidden] { display: none !important; }
p.bilgi-govde {
  margin: 10px 0 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.section { margin-top: 44px; }
.section-head { padding-top: 16px; margin-bottom: 22px; }
.section-head h2 { font-size: 26px; line-height: 1.12; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ====================================================================
   3) UST BAR — TELEFONDA YOK

   2026-09-07: ust bar kaldirildi. Gezinmenin TAMAMI zaten baska yerde:
   bes hedef alt seritte (Ana Sayfa · Katalog · TARA · Araclar · Profilim),
   dort dikey ana sayfadaki alan seridinde, geri kalan her sey Araclar'da.
   Ust bar yalnizca marka isareti + ayni baglantilari tekrarlayan bir
   hamburger tasiyordu; buna karsilik ekranin tepesinden ~62px (guvenli
   alanla birlikte daha fazla) goturuyor ve tarayicida URL cubugunun hemen
   altinda IKINCI bir baslik cubugu gibi duruyordu.

   GUVENLI ALAN artik govdeye yaziliyor (once .nav tasiyordu): centikli
   telefonlarda ilk satir durum cubugunun altina duser.

   --nav-h kendiliginden 0'a duser — app.js navYuksekligiOlc() gercek
   yuksekligi olcer ve display:none olan ogenin yuksekligi 0'dir. Yapiskan
   cubuklar (.rt-bar, .finder) ve scroll-padding bu yuzden dogru yere oturur.
   ==================================================================== */
.nav { display: none; }

/* ---- 3b) BAGLAMSAL GERI SERIDI ----
   Ust bari kaldirmanin bedeli: GERI DONMENIN GORUNUR BIR YOLU KALMADI. Alt serit
   "baska yere git"tir, "geri don" degil; Android'in donanim tusu hash gecmisiyle
   calisir ama KURULU BIR PWA'DA iOS'ta o tus YOKTUR — kullanici yasal metnin ya da
   urun detayinin icinde kalir.

   Serit YALNIZ derin ekranlarda cizilir (sekme koku olmayan rotalar; kok testi
   mobile.js -> sekmeIcin). Kok rotalarda 48px'lik bir bar bosuna yer yerdi ve
   "geri" oradan bir yere gitmezdi. Boyu --nav-h'e YAZILIR (app.js
   navYuksekligiOlc), yani .finder / .rt-bar / scroll-padding kendiliginden
   seridin altina oturur. */
.m-ust {
  display: flex; align-items: center; gap: 4px;
  /* top: 0 DEGIL --safe-t. Govdenin ust dolgusu centik payini tasiyor ama `sticky`
     ofseti KAYDIRMA KABINA gore cozulur; top:0 ile serit yapistiginda durum
     cubugunun ALTINA girerdi (index.html: apple-mobile-web-app-status-bar-style
     = black-translucent). */
  position: sticky; top: var(--safe-t); z-index: 92;
  height: 48px; padding: 0 calc(6px + var(--safe-r)) 0 calc(4px + var(--safe-l));
  background: rgba(0, 0, 0, .92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* `display: flex` yazan bir kural `hidden` niteligini EZER (UA'nin display:none'i
   yazar tarafindan bastirilir). Bu kural olmadan serit KOK rotalarda da cizilir —
   tarayicida goruldu: /profil'de bos basliklı bir geri cubugu duruyordu. Ayni
   tuzak bu dosyada rapor panelinde de yasanmisti (§9). */
.m-ust[hidden] { display: none; }
.m-ust-geri {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;  /* dokunma hedefi: ikon 22px, alan 44px */
  background: none; border: none; color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-ust-geri svg { width: 22px; height: 22px; }
.m-ust-geri:active { color: var(--brand); }
.m-ust-ad {
  font-family: var(--display); font-size: 16.5px; font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Serit varken sayfanin KENDI yukari-baglantisi (arac sayfalarindaki
   "Araclar / X" kirinti yolu, toolHead) tekrar olur: ayni ad ekranda uc kez
   yaziliyordu — serit, kirinti ve h1. Kirinti gider, baslik kalir:
   kirinti zaten geri dugmesinin YOKLUGUNU telafi etmek icin oradaydi. */
body.ust-var .page-head > .eyebrow { display: none; }
body.ust-var .page-head { margin-bottom: 22px; }

/* ====================================================================
   4) ALT SEKME SERIDI
   Bes hedef: Ana Sayfa · Katalog · TARA · Araclar · Profilim.
   Aktif isaret masaustundeki kalem darbesi DEGIL: ikonun arkasina cekilen
   filiz hap. Sebep — kalem darbesi ust kenara yapisiyordu, bas parmak
   dokununca kendi parmagi isaretin ustunu kapatiyordu.
   ==================================================================== */
.tabbar {
  /* Klavye acikken serit onun USTUNE ciker; iOS gorunumu kucultmedigi icin
     aksi halde klavyenin arkasinda kalir. */
  position: fixed; left: var(--safe-l); right: var(--safe-r); bottom: var(--klavye); z-index: 95;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--font); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
}
.tabbar a .tabbar-ico { position: relative; z-index: 1; transition: transform .18s ease; }
.tabbar a:active .tabbar-ico { transform: scale(.9); }

/* aktif: ikonun arkasinda filiz hap */
.tabbar a.active { color: var(--brand); }
.tabbar a.active::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 30px; border-radius: 999px; background: var(--accent-soft);
}

/* ortadaki eylem: yukseltilmis filiz disk */
.tabbar .tab-scan { justify-content: flex-start; color: var(--text-dim); }
.tabbar .tab-scan .tabbar-ico {
  width: 54px; height: 54px; margin-top: -20px; padding: 14px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  border: 4px solid var(--bg); box-shadow: 0 10px 22px -8px var(--brand-glow);
}
.tabbar .tab-scan.active { color: var(--brand); justify-content: center; }
.tabbar .tab-scan.active::before { display: none; }   /* disk zaten isaretli */
/* TARAMA EKRANINDAYKEN DISK YUKSELMEZ. Iki sebep:
   · Yukseltilmis disk seridin ust kenarindan 20px tasiyor ve tam o bantta adim
     cubugu duruyor (§8). Ust uste bindiklerinde iki FILIZ yuzey birbirine
     yapisiyor ve hangisinin ne oldugu okunmuyor — bu projede bir kez olculmus
     hata sinifi ("eylem rengi ile uygun rengi ayni olamaz").
   · "Tara"ya goturen yukseltilmis dugme, zaten tarama ekranindayken bir yere
     goturmuyor; basili gorunmesi dogru olan. */
.tabbar .tab-scan.active .tabbar-ico {
  width: 40px; height: 40px; margin-top: 0; padding: 10px;
  border-width: 0; box-shadow: none;
}

/* ====================================================================
   5) IMZA — KESIT OLCER
   Bes bolmeli serit. Ayni nesne ana sayfada (.m-olcu) ve raporun kutu
   basliklarinda (.rt-m-bar) kullanilir; uygulamanin gorsel imzasi budur.
   Bolmeler zemin rengiyle "kesilir", boylece dolu kisim halkalar gibi
   sayilabilir hale gelir.
   ==================================================================== */
.m-olcu, .rt-m-bar {
  position: relative; display: block; height: 7px; border-radius: 999px;
  background: var(--line-2); overflow: hidden;
}
.m-olcu s, .rt-m-bar s {
  display: block; height: 100%; background: var(--brand); text-decoration: none;
}
.m-olcu s { width: var(--d, 0%); }
/* Bolmeleri "kesen" seritin rengi, olcerin ARKASINDAKI yuzeyin rengidir.
   Ana sayfada bu zemin (siyah), rapor satirinda kartin kendisi (--panel) —
   tek deger yazilirsa birinde bolmeler yanlis renkte bir cizgiye donusur. */
.m-olcu::after, .rt-m-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(20% - 2.5px), var(--olcu-kesik, var(--bg)) calc(20% - 2.5px) 20%);
}
.rt-m-bar.bos { visibility: hidden; }

/* DAMAR CIZGISI — bulgu satirlarinin solundaki dikey vurus */
.m-damar { border-left: 3px solid var(--line); padding-left: 13px; }
.m-damar.ok   { border-left-color: var(--ok); }
.m-damar.warn { border-left-color: var(--warn); }
.m-damar.bad  { border-left-color: var(--bad); }
.m-damar.harm { border-left-color: var(--harm); }

/* ====================================================================
   6) TEMEL OGELER — dokunmatik olculer
   ==================================================================== */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], select, textarea {
  font-size: 16px;                 /* iOS 16px altinda odakta yakinlastirir */
  padding: 14px 15px; border-radius: var(--radius-sm);
}
.btn {
  min-height: 50px; padding: 14px 20px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
}
.btn-lg { min-height: 56px; font-size: 16.5px; }
.btn-block, .hero-cta .btn, .dz-actions .btn, .result-actions .btn { width: 100%; }
.chip { padding: 10px 16px; font-size: 14px; border-radius: 999px; }
.chip-btn { min-height: 44px; border-radius: 999px; }
.tab { min-height: 46px; border-radius: 999px; }
.cat-row, .brand-row { min-height: 44px; }
.card { padding: 18px 16px; border-radius: var(--radius); }
.badge { border-radius: 999px; }

/* Tarama sekmeleri (Fotograf Yukle / Canli Kamera / Sadece Icindekiler):
   UCU BIRDEN gorunur olmali — hangi yollarin oldugunu bilmeyen kullanici
   yana kaydirmayi denemez. Yatay serit yerine uc esit sutun, etiket iki
   satira sarabilir. */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 18px; }
.tabs .tab {
  white-space: normal; text-align: center; line-height: 1.2;
  font-size: 12.5px; padding: 11px 8px; border-radius: 13px;
}

/* Devre disi dugme: sonmuk degil, ACIKCA hareketsiz gorunsun. Saydamlik
   dusurmek koyu sarap zeminde etiketi okunamaz hale getiriyordu. */
.btn:disabled, .btn-primary:disabled {
  opacity: 1; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); box-shadow: none;
}

/* ---- KALIN "RAPOR CIZGILERI" -> DAMAR CIZGISI ----
   Masaustu tasarim dilinin imzasi kalin (2-4px) murekkep cizgileridir:
   basili bir saha raporu gibi. Ayni cizgi koyu sarap zeminde parlak bir
   serit haline geliyor ve ekranin en gurultulu ogesi oluyordu. Mobilde
   ayni yapisal bilgi (bolum basliyor / kart onemli) sac teli kalinliginda
   damar cizgisiyle verilir; kalinlik butcesi TARA dugmesine ve karar
   kartina harcanir. */
.hero-report, .finder, .report-card { border-top: 2px solid var(--line); }
.section-head, .result-block { border-top: 1px solid var(--line); }
.hr-head, .side-panel h3, .filter-group > h4, .report-head,
.audit th, .cmp-table th, .vs-baslik, .diet-kcal { border-bottom-width: 1px; border-bottom-color: var(--line); }
/* "En populer" plani isaretleyen cerceve ANLAM tasir — sonmez, filize doner. */
.plan.popular { border-color: var(--brand); }

/* Yatay kaydirilan secim seritleri (kategori/marka/filtre) */
.seg, .filter-row {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.seg::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display: none; }
.seg > *, .filter-row > * { scroll-snap-align: start; flex: 0 0 auto; }
/* PAKET TABLOSU TELEFONDA KART. Bes sutunlu tablo yalnizca YATAY KAYDIRILARAK
   okunabiliyordu ve sutun basligi kadraj disinda kaldigi icin bir hucrenin hangi
   pakete ait oldugu gorunmuyordu — "Aile" sutunundaki bir tik, kaydirinca hangi
   pakete ait oldugu bilinmeyen bir tike donusuyordu. Satirlar karta doner ve her
   hucre kendi paket adini yanina yazar (data-lab, app.js pageFiyatlar).
   Bilgi GIZLENMEZ; okunur hale gelir. */
.cmp-wrap { overflow-x: visible; }
.cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: auto; }
.cmp-table thead { display: none; }        /* basliklar artik her hucrenin yaninda */
.cmp-table tr {
  margin-bottom: 10px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cmp-table td {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border: none; font-size: 14px; white-space: normal;
}
.cmp-table td::before {
  content: attr(data-lab); color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
/* Ilk hucre satirin BASLIGIDIR: ozellik adi tek basina durur, paket adi yazilmaz. */
.cmp-table td:first-child {
  display: block; margin-bottom: 6px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 15px;
}
.cmp-table td:first-child::before { display: none; }

/* ====================================================================
   6b) DOKUNMA HEDEFLERI — 44px ALTI KALMAZ

   Buyuk dugmeler (.btn 50px, .tab 46px, .m-item 47px, sekme seridi 62px)
   bastan olculuydu; kacan yer KUCUK KONTROLLERDI ve tam da en sinir bozucu
   olanlar: bir cipi silmek, bir filtreyi kaldirmak, sohbeti kapatmak.
   Olculen en kotusu .wh-nokta: 26x4 px — sonuc ekranindaki kadran gecisi
   4 PIKSEL yuksekligindeydi.

   IKI TEKNIK:
   a) Kutusu buyuyebilenler (kendi satirinda duran gercek dugmeler) ->
      dogrudan min-height/min-width.
   b) METIN AKISINDAKI kucuk dugmeler (cip carpisi, ham metindeki isaret,
      kirinti yolu) -> kutuyu buyutmek satir yuksekligini bozardi; hedef
      GORUNMEZ bir ::after ile disari tasar, gorunum degismez.
   `max()` kullanilmadi (eski Android WebView); min-width/min-height ayni isi
   kosulsuz yapar — bu dosyadaki `color-mix` yasagiyla ayni gerekce.
   ==================================================================== */
/* (a) kutusu buyuyebilenler */
.chip { min-height: 44px; }                 /* kardesi .chip-btn'de vardi, bunda yoktu */
.sheet-kapa, .report-close, .chat-head .x {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.filtre-ac, .st-shade-tab, .pal-chip, .vs-marka, .auth-link, .audit .fr-btn { min-height: 44px; }
.chat-input button { min-width: 44px; }
details > summary, .fr-det summary, .msg-src-box > summary, .rst-note > summary {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
}
/* Kart basligi: tiklama alani .card-head, ama kendi dolgusu yoktu — yuksekligi
   yalnizca basligin metninden geliyordu. Cevron (.chev) ayri bir hedef degil. */
.card-head { min-height: 48px; }

/* (b) metin akisinda duranlar — gorunmez alan */
.bilgi-ac, .chip.removable .x, .af-chip button, .af-clear, .hm-hit,
.crumb-row button, .vs-link, .vs-geri, .m-sec-h a, .wh-cta, .wh-nokta,
.cloud-err button { position: relative; }
.bilgi-ac::after, .chip.removable .x::after, .af-chip button::after,
.af-clear::after, .hm-hit::after, .crumb-row button::after, .vs-link::after,
.vs-geri::after, .m-sec-h a::after, .wh-cta::after, .wh-nokta::after,
.cloud-err button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
}
/* .chip.removable .x bir <b> IDI — klavyeyle odaklanilamiyor, ekran okuyucuya
   yalnizca "x" gidiyordu. Artik gercek <button aria-label="Kaldır"> (app.js);
   gorunumunu styles.css geri aliyor. */

/* ====================================================================
   7) ANA SAYFA (mobile-pages.js)
   Masaustu ana sayfasi bir tanitim sayfasidir: kahraman + yetenekler +
   kategoriler + 3 adim + paketler. Telefonda bu, eyleme ulasmadan once
   alti ekran kaydirmak demekti. Mobil ana sayfanin isi tektir: TARA.
   ==================================================================== */
/* Dikkat: yalniz dikey dolgu yazilir. `padding: 18px 0 8px` yazmak .wrap'in
   yatay dolgusunu (0 18px) ezip sayfayi ekran kenarina yapistiriyordu —
   ayni ozguluk, sonraki kural kazanir. */
.m-home { display: block; padding-top: 14px; padding-bottom: 8px; }

/* --- selamlama ---
   2026-09-07: altindaki aciklama paragrafi kaldirildi (mobile-pages.js).
   Ana ekranin isi TARA; "ambalajin fotografini cek, karsilastirip karar
   verelim" cumlesi tanitim metniydi ve ilk eylemi ekranin asagisina
   itiyordu. Baslik da bir punto kisildi. */
.m-greet { margin-bottom: 16px; }
.m-greet h1 {
  font-size: 27px; line-height: 1.08; font-weight: 700; margin: 8px 0 0;
}
.m-durum {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.m-durum::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.m-durum.bos { color: var(--warn); }
.m-durum.bos::before { background: var(--warn); }

/* --- ana eylem ---
   TEK SATIR HAP. Onceden iki satirli bir blok kutuydu (54px'lik ikon diski +
   baslik + "Fotograf cek ya da galeriden sec" alt satiri) ve tek basina
   ~100px yer kapliyordu. Alt seritteki yuvarlak TARA dugmesi zaten ayni isi
   yapiyor; buradaki ikinci giris kisa bir hap olarak yeter. */
.m-scan {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; cursor: pointer;
  padding: 16px 22px; border: none; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: var(--shadow-glow);
  font-family: var(--font);
}
.m-scan:active { transform: scale(.985); }
.m-scan-ico { font-size: 19px; line-height: 1; }
.m-scan-t { font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }

/* --- alan seridi ---
   Dort alan YAN YANA sigar (ikon ustte, ad altta). Yatay kaydirmali serit
   denendi ve birakildi: 390px'de dorduncu alan ("Bebek") ekranin disinda
   kaliyor, kaydirilabildigine dair bir isaret de vermiyordu. */
.m-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.m-area {
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  padding: 10px 4px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center;
}
.m-area i { font-style: normal; font-size: 18px; line-height: 1; }
.m-area:active { border-color: var(--brand); color: var(--text); }

/* --- bolum basligi ---
   Buyuk serif baslik ("Son taramalar" 19px) yerine kucuk etiket. Bolum
   basligi icerigin kendisi degil, ustundeki isarettir; ayni satirdaki
   "TUMU" baglantisiyla ayni dilde konusur. Altindaki ayrac cizgisi de
   kalkti: satirlar artik kendi kartlarinda, ayraca gerek yok. */
.m-sec { margin-top: 24px; }
.m-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 9px;
}
.m-sec-h h2 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; margin: 0;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.m-sec-h a {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); cursor: pointer; flex: none;
}

/* --- satir listesi ---
   Satirlar ARTIK AYRI KARTLAR. Once ince ayraclarla bitisiktiler; ucu de
   ayni karari verince (uc "Dikkat") sol damar cizgileri uc satir boyunca
   TEK bir kesintisiz seride donusuyordu ve hangi rengin hangi satira ait
   oldugu okunmuyordu. 8px'lik bosluk her damari kendi satirina baglar. */
.m-rows { display: grid; gap: 8px; }
.m-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--panel); cursor: pointer;
}
.m-row:active { background: var(--panel-2); }
.m-row-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
/* Karar KELIMESI satirin rengini alir: renk korlugunde de okunsun diye
   karar zaten metinle yaziliyordu, artik rengi de tasiyor. Marka ve tam
   tarih dustu — ikisi de satiri iki katina cikariyordu; kisa tarih kaldi. */
.m-row-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.m-row-s b { font-weight: 600; color: var(--text-dim); }
.m-row-s.ok b   { color: var(--ok); }
.m-row-s.warn b { color: var(--warn); }
.m-row-s.bad  b { color: var(--bad); }
.m-row-v { text-align: right; flex: none; min-width: 62px; }
.m-row-n { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; }
.m-row-n.ok { color: var(--ok); } .m-row-n.warn { color: var(--warn); }
.m-row-n.bad { color: var(--bad); } .m-row-n.bilinmiyor { color: var(--muted); }
.m-row-v .m-olcu { margin-top: 7px; }
/* Olcer dolgusu satirin karar rengini alir: "26" kirmizi yazilip cubugu
   filiz kalirsa iki isaret birbiriyle celisir. */
.m-row.warn .m-olcu s { background: var(--warn); }
.m-row.bad  .m-olcu s { background: var(--bad); }
.m-row.bilinmiyor .m-olcu s { background: var(--muted); }
/* 2026-09-07, tarayicida olculdu: yesil satirda sayi ZUMRUT (--ok) yazilirken cubuk
   FILIZ (--brand) kaliyordu — yani ayni satirda iki farkli yesil vardi ve eylem rengi
   sinyal gibi okunuyordu. Paletin "--brand != --ok" kurali burayi da baglar. */
.m-row.ok   .m-olcu s { background: var(--ok); }

/* --- profil ozeti --- */
.m-prof { padding: 16px 0 4px; }
.m-prof-l { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.m-prof-l span {
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
}
.m-prof-bos {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 16px; margin-top: 14px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid rgba(240, 180, 41, .3);
}
.m-prof-bos b { display: block; font-size: 15px; color: var(--warn); }
.m-prof-bos small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }

/* --- arac karolari --- */
.m-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.m-tool {
  display: block; cursor: pointer; padding: 16px 15px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
}
.m-tool:active { border-color: var(--brand); }
.m-tool i { font-style: normal; font-size: 21px; display: block; margin-bottom: 9px; }
.m-tool b { display: block; font-size: 14px; font-weight: 600; }
.m-tool small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; }

/* --- menu grubu (Araclar sayfasi) ---
   iOS/Android ayar listesi deseni: baslik + ic ice cizgili tek kart. Ana
   sayfadaki cerceve-siz .m-row'dan BILEREK farkli — orada icerik, burada
   gezinme var; iki liste birbirine benzerse kullanici hangisinin bir yere
   gotur"dugunu ayirt edemez. */
.m-group {
  margin-top: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.m-item {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 13px;
  width: 100%; padding: 14px 15px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; background: none; border: none;
  border-top: 1px solid var(--line-2);
}
.m-group .m-item:first-child { border-top: none; }
.m-item[hidden] { display: none; }          /* izgara cocugu: hidden'i kesinlestir */
.m-item:active { background: var(--panel-2); }
.m-item > i { font-style: normal; font-size: 19px; line-height: 1; text-align: center; }
/* Menu satiri artik emoji glifi degil SVG tasiyor: kutu ayni, olcu acik. */
.m-item > i .ik { width: 21px; height: 21px; vertical-align: -.2em; }
.m-item b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
/* Menu satirinin altyazisi EN COK IKI SATIR. Araclarin masaustu aciklamalari
   uzun (Yerel OCR kartinin metni telefonda bes satira cikiyor ve liste "duvar"
   oluyordu); tam metin zaten gidilen sayfada. */
.m-item small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35;
}
/* Sag kenardaki "gider" isareti: ok degil, damar cizgisiyle ayni aileden ince bir chevron. */
.m-item::after {
  content: "›"; font-size: 20px; line-height: 1; color: var(--muted); opacity: .8;
}
/* Rozet BASLIGIN ICINDE durur (ayri bir izgara sutunu olsaydi rozetsiz
   satirlarda chevron 13px kayardi). */
.m-rozet {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-family: var(--mono); font-style: normal; font-size: 9px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line);
}
/* Kurulum karti tek basina durur (grubun disinda) ve eylem oldugunu soyler. */
.m-kur {
  margin-top: 18px; border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: var(--accent-soft);
}
.m-kur .tool-go { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); }
.m-kur::after { content: none; }            /* chevron yerine "Kur" yazisi */

/* --- dip: telefonda altbilgi yerine tek satir --- */
.m-dip {
  margin: 34px 0 4px; text-align: center; font-size: 12px; line-height: 1.7;
  color: var(--muted);
}
.m-dip span { font-family: var(--mono); }

/* --- bos durum --- */
.m-bos { padding: 26px 4px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.55; }
.m-bos b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 5px; font-family: var(--display); }

/* --- dip baglantilar (tanitim icerigi buradan ulasilir, kaybolmadi) --- */
.m-alt { display: flex; gap: 9px; margin-top: 34px; }
.m-alt a {
  flex: 1; text-align: center; cursor: pointer; padding: 13px 10px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 13.5px; color: var(--text-dim);
}

/* ====================================================================
   8) TARAMA — tek is, tek eylem, sabit yer

   Uygulamanin ASIL isi bu ekran. Masaustu iskeletinde ucu birden vardi:
   ust uste uc sekme (Fotograf / Canli Kamera / Sadece Icindekiler), akisin
   icinde bir "Analiz Et" dugmesi ve yanindaki metin. Telefonda bunun uc
   sonucu oluyordu:

     · birincil eylem AKISIN ICINDE kaliyordu — biraz kaydirinca kayboluyor,
       kullanici "simdi ne yapacagim"i her adimda yeniden ariyordu;
     · "Canli Kamera" sekmesi OLU YOL: #pick-cam telefonda zaten isletim
       sisteminin kamerasini aciyor (app.js, tam cozunurluk OCR icin sart),
       yani o sekmenin arkasindaki 640x480 onizleme bu cihazda hic istenmiyor;
     · ucuncu sekme ("Sadece icindekiler") nadir bir yol oldugu halde birincil
       yolla ayni agirlikta duruyordu.

   Cozum: sutun bir IZGARAYA doner, sekme seridi `display: contents` ile
   dagilir ve cocuklar `order` ile yeniden dizilir — rapor akordeonunda
   kanitlanmis yontemin aynisi (§9). DOM'a dokunulmadi: app.js'in switchTab
   mantigi, .on sinifi ve panel gizleme/gosterme aynen calisir.
   ==================================================================== */
.scan-head { padding: 0; margin-bottom: 18px; background: none; border: none; }
.scan-head-row { gap: 13px; }
.scan-head h1 { font-size: 26px; }
.scan-head .tags { display: none; }        /* 6 etiket = telefonda iki satir gurultu */
.scan-layout > div > h2 { font-size: 19px !important; }
/* Sabit adim cubugunun altinda sayfanin son satiri kalmasin. Tarama sayfasinin
   en alt kabi .scan-layout'tur (sag panel de icinde). */
.scan-layout { padding-bottom: var(--eylem-h); }

.dropzone { padding: 22px 16px; border-radius: var(--radius); border-style: dashed; }
.dz-actions { flex-direction: column; gap: 10px; }
.dz-actions .btn { min-width: 0; }         /* 148px dar ekranda tasiyordu */
.dz-ico { font-size: 34px; }
/* "Surukle & Birak" telefonda YOK: dokunmatikte surukleyip birakilacak bir dosya
   penceresi yok, cumle yer kapliyor ve yapilamayan bir sey soyluyor. Altindaki
   aciklama satiri ("Icindekiler listesi veya ambalajin fotografini yukle") kalir —
   asil yonlendirme odur. */
.dropzone h3 { display: none; }
/* Kamera artik ADIM CUBUGUNDA. Ayni ekranda ucuncu bir "fotograf al" yolu
   birakmak, "tek is tek eylem" kuralinin ihlali olurdu: dropzone galeriye,
   cubuk kameraya bakar. (#pick-cam DOM'da DURUR — #scan-foto ona basiyor,
   cihaz ayrimi tek yerde kalsin diye.) */
.dz-actions #pick-cam { display: none; }
.side-panel { padding: 17px 16px; border-radius: var(--radius); }
.cam-wrap { border-radius: var(--radius); overflow: hidden; }
.cam-actions { gap: 10px; }

/* ---- SEKME SERIDI DAGILIR ---- */
.scan-main { display: grid; grid-template-columns: 1fr; }
.scan-main > [hidden] { display: none; }   /* izgara cocugunda `hidden` zayif kalir */
.scan-main .tabs { display: contents; }    /* serit kutusu (zemin/cerceve/dolgu) yok olur */
.scan-main #tab-foto,                      /* tek yol: zaten acik, sekmeye gerek yok */
.scan-main #tab-cam,                       /* OLU YOL: telefonda isletim sistemi kamerasi */
.scan-main #pane-cam { display: none; }
.scan-main > h2       { order: 1; }
.scan-main #pane-foto { order: 2; }
.scan-main .scan-prof-bos { order: 3; }
.scan-main #tab-ing   { order: 4; }
.scan-main #pane-ing  { order: 5; }
.scan-main .scan-kvkk { order: 6; }
.scan-main #status    { order: 7; }
.scan-main #result    { order: 8; }
/* "Sadece icindekiler" artik sekme degil, dropzone'un ALTINDA ikincil bir yol. */
.scan-main #tab-ing {
  justify-self: start; margin: 14px 0 0; padding: 12px 4px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--text-dim); font-family: var(--font); font-size: 13.5px; font-weight: 600;
}
.scan-main #tab-ing.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---- PROFIL UYARISI (telefon govdesi) ---- */
.scan-prof-bos {
  display: block; margin: 14px 0 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.5; color: var(--text-dim);
}
.scan-prof-bos a { color: var(--brand); font-weight: 600; }

/* ====================================================================
   10b) KATALOG DETAYI — TELEFONDA KENDI EKRANI
   Masaustunde rapor listenin altinda acilir ve gorunur. Telefonda liste uzun
   oldugu icin kullanici raporu ancak kaydirarak buluyordu — 2026-08-22 "aday
   secince tepki yok" saha bildiriminin ayni sinifi. Artik tam ekran acilir ve
   telefonun kendi "geri"si onu kapatir (app.js: detayAc/popstate).

   Sekme seridi DURUR (z-95, panel z-91): itilmis bir ekrandayken bile baska bir
   sekmeye gecebilmek native davranistir; panel yalnizca liste alanini ortmeli.
   ==================================================================== */
body.detay-acik { overflow: hidden; }        /* arkadaki liste kaymasin */
body.detay-acik #urun-detail {
  position: fixed; z-index: 91; left: var(--safe-l); right: var(--safe-r); top: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  overflow: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 18px 24px; background: var(--bg);
}
/* Tam ekranda kart cercevesi anlamsiz: kenarlik ve golge, ekranin kenarina
   yapisik "kart" gorunumu uretiyordu. */
body.detay-acik #urun-detail .report-card {
  border: none; border-radius: 0; box-shadow: none; padding: 0; background: none;
}
/* Baslik yapisir: kapatma dugmesi uzun raporun basinda kalirsa kullanici geri
   donmek icin en yukari kadar kaydirmak zorunda kalir. */
body.detay-acik #urun-detail .report-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -18px 10px; padding: calc(8px + var(--safe-t)) 18px 8px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}

/* ====================================================================
   8b) PROFIL SIHIRBAZI
   Uygulamanin en uzun formu dort adima bolundu (mobile-pages.js ->
   MobilSihirbaz). Govde YENIDEN YAZILMADI: app.js'in cizdigi bloklar
   `data-adim` tasiyor, burasi yalnizca gorunuru secer — combobox,
   cip ve riza defteri kablolamasi aynen calisir.
   ==================================================================== */
.prof-adimlar {
  display: flex; gap: 6px; margin: 0 0 18px;
  overflow-x: auto; scrollbar-width: none;
}
.prof-adimlar::-webkit-scrollbar { display: none; }
.prof-adimlar button {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px 10px;
  background: none; border: none; border-bottom: 2px solid var(--line);
  color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.prof-adimlar button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* Yalnizca acik adimin bloklari cizilir. `:not([hidden])` SART: rol karti
   (diyetisyen dogrulama) gizli dogar ve app.js onu role gore acar — kural
   onu zorla gorunur kilmamali. */
body.sihirbaz [data-adim] { display: none; }
body.sihirbaz [data-adim].acik:not([hidden]) { display: block; }

/* Cubuk tarama ekranindakiyle AYNI nesne (§8): sabit yer, ayni yukseklik,
   ayni yigin sirasi. Ikinci bir "alt eylem" dili icat edilmedi. */
.prof-adim #prof-geri { flex: 0 0 34%; }
.prof-adim #prof-geri[hidden] { display: none; }
.prof-adim #prof-ileri { flex: 1; }

/* ---- ADIM CUBUGU ----
   Ekranda her an TEK birincil eylem; yeri DEGISMEZ, adi adima gore degisir.
   Kullanici "bir sonraki adim nerede" sorusunu bir kez ogrenir. Ikincil ve
   geri donusu olmayan eylemler (Hayir/Hicbiri) bilerek cubugun DISINDA kalir:
   bas parmagin durdugu yere yikici bir hedef konmaz. */
/* Tarama ve profil ayni cubugu paylasir: ikinci bir "alt eylem" dili icat
   edilmedi, olcu ve yigin sirasi TEK yerde durur. */
.scan-go, .prof-adim {
  position: fixed; left: var(--safe-l); right: var(--safe-r); z-index: 94;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--klavye));
  /* Yukseklik OLCULMEZ, YAZILIR: --eylem-h hem bu cubugun boyu hem de govdenin
     ve sohbet balonunun ona birakmasi gereken bosluk. Icerikten turetilseydi
     (dugme + dolgu + kenarlik) uc yerde ayri sayi olur, biri kayinca sayfanin
     son satiri cubugun altinda kalirdi. Tarayicida olculdu: icerikten geleni
     67px, token 64px idi. */
  /* Guvenli alan payini ALTTAKI sekme seridi tasiyor (cubugun alti zaten onun
     ust kenari); burada bir kez daha eklemek bos serit birakirdi. */
  display: flex; align-items: center; gap: 8px; margin: 0;
  height: var(--eylem-h); padding: 0 14px;
  background: rgba(0, 0, 0, .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.scan-go .btn, .prof-adim .btn { flex: 1; width: auto; margin: 0; min-height: 50px; }
.scan-prof { display: none; }              /* metin cubuga sigmaz; govdesi .scan-prof-bos */
/* Uc hal, tek gorunur dugme. `flex` cunku .btn kendi icini flex ile ortaliyor. */
.scan-go #scan-foto { display: flex; }
.scan-go #scan, .scan-go #scan-yeni { display: none; }
.scan-go.hazir #scan-foto { display: none; }
.scan-go.hazir #scan { display: flex; }
.scan-go.bitti #scan-foto, .scan-go.bitti #scan { display: none; }
.scan-go.bitti #scan-yeni { display: flex; }

/* ---- DURUM SATIRI PARMAGIN YANINDA ----
   #status akisin BASINDA duruyor; rapor uzadikca kullanici ilerleme metnini
   goremiyordu. Yapiskan alt: dogal yeri gorunumun altinda kalinca cubugun
   ustune yapisir, yukari kaydirinca kendi yerine doner. */
.scan-main #status {
  position: sticky; z-index: 93; margin: 12px 0 0;
  bottom: calc(var(--tabbar-h) + var(--eylem-h) + var(--safe-b) + 8px);
  /* SEFFAF YAPISKAN OKUNMAZ. Durum kutusunun dort halinin de zemini ISI VEREN bir
     tint (ok: rgba(...,.13)); akista sorun degil ama yapisik dururken altindan
     onizleme fotografi geciyor ve metin fotografin uzerine biniyordu (tarayicida
     goruldu, 375x812). Icerideki golge zemini opaklastirir, tint ustunde kalir —
     alt seritle ayni buzlu cam dili (bkz. .tabbar / .scan-go). */
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px);
}

/* ---- ADAY SECIMI: YAN YANA KART DEGIL TAM GENISLIK SATIR ----
   styles.css 560px'in altinda iki sutuna dusuruyordu: 375px'lik ekranda her
   kart ~170px, akisin EN KRITIK karari telefonun EN DAR hedefi oluyordu.
   Satir anatomisi ana sayfadaki .m-row ile ayni dili konusur: solda gorsel,
   ortada ad, sagda olcu. */
.cand-grid, .cand-grid.n1, .cand-grid.n2, .cand-grid.n3 {
  grid-template-columns: 1fr; gap: 8px;
}
.cand-card {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 10px 12px; min-height: 72px; border-radius: var(--radius-sm);
}
.cand-card .cand-img {
  width: 52px; height: 52px; flex: none; aspect-ratio: auto;
  border-bottom: none; border-radius: 10px; border: 1px solid var(--line);
}
.cand-card .cand-img.noimg { font-size: 24px; }
.cand-info { padding: 0; gap: 2px; flex: 1; }
.cand-info b { font-size: 14.5px; -webkit-line-clamp: 2; }
/* Marka ve gramaj tek satirda: iki ayri satir kart yuksekligini 96px'e cikariyordu. */
.cand-brand, .cand-qty { display: inline; margin: 0; font-size: 12px; }
.cand-qty::before { content: " · "; color: var(--muted); }
.cand-score { margin-top: 1px; }

/* ====================================================================
   9) RAPOR
   Karar karti + alti kutu seridi + tek panel duzeni OLCULEREK secildi
   (bkz. sonuc-ekrani-karisiklik notu) — duzen korunur, gorsel dil degisir.
   ==================================================================== */
.verdict-hero { padding: 20px 17px; gap: 14px; border-radius: var(--radius); }
.vh-text { min-width: 0; }
.vh-ico { width: 46px; height: 46px; border-radius: 14px; }
.vh-head { font-size: 27px !important; font-weight: 700; letter-spacing: -.02em; }
.vh-prod { font-size: 15px; }
/* Dikey/gramaj rozeti urun adiyla ayni satirda sikisip tek harfi alt satira
   dusuruyordu ("GIDA . 36 / G"). Telefonda kendi satirinda durur. */
.vh-cat { display: block; margin: 6px 0 0; width: fit-content; }
.dial-pair { margin-left: 0; width: 100%; justify-content: space-around; gap: 8px; }
.score-dial { width: 70px; height: 70px; }

/* ---- ALTI KUTU -> ALTI SATIR (akordeon) ----
   Masaustunde kutular tek satirlik yapiskan bir serit; genis ekranda yan yana
   sigiyorlar ve panel hemen altlarinda aciliyor. Telefonda ayni serit 2 sutuna
   ve UC SATIRA sariyordu; sonuc:
     · kutulari gecmek 345px yer yiyordu,
     · panel UC SATIRIN altinda aciliyordu — birinci sirada bir kutuya basan
       kullanici tepkiyi ekraninda GORMUYORDU (aynen 2026-08-22 saha bildirimi:
       "aday secince tepki yok"; app.js kutuya basinca kaydirma YAPMAZ),
     · yapiskanlik zaten devre disi kaliyordu (serit gorunumun 1/3'unu asinca
       rtYapiskanlikAyarla akisa donduruyor), yani baglam da korunmuyordu.

   Cozum: her kutu TEK SATIR olur ve acilan panel KENDI SATIRININ ALTINA girer.
   Boylece cevap parmagin bastigi yerde cikar, hangi bolumde oldugun hep gorunur.
   Yontem: .rt-bar ve .rt-body `display: contents` ile kutu olmaktan cikar,
   cocuklari .rt'nin izgarasinda kardes olur, `order` ile kutu/panel/kutu/panel
   diye orulur. DOM'a DOKUNULMAZ — app.js'in sekme mantigi, klavye gezinmesi ve
   fillIngCards referanslari aynen calisir.

   Kapali satir da rengini ve sayisini TASIR (styles.css'teki kural: sekmenin tek
   riski bilgiyi gizlemektir). */
.rt { display: grid; grid-template-columns: 1fr; }
.rt-bar, .rt-body { display: contents; }

.rt-bar .rt-box:nth-child(1) { order: 1; }  .rt-body .rt-panel:nth-child(1) { order: 2; }
.rt-bar .rt-box:nth-child(2) { order: 3; }  .rt-body .rt-panel:nth-child(2) { order: 4; }
.rt-bar .rt-box:nth-child(3) { order: 5; }  .rt-body .rt-panel:nth-child(3) { order: 6; }
.rt-bar .rt-box:nth-child(4) { order: 7; }  .rt-body .rt-panel:nth-child(4) { order: 8; }
.rt-bar .rt-box:nth-child(5) { order: 9; }  .rt-body .rt-panel:nth-child(5) { order: 10; }
.rt-bar .rt-box:nth-child(6) { order: 11; } .rt-body .rt-panel:nth-child(6) { order: 12; }
.rt-bar .rt-box:nth-child(7) { order: 13; } .rt-body .rt-panel:nth-child(7) { order: 14; }
.rt-bar .rt-box:nth-child(8) { order: 15; } .rt-body .rt-panel:nth-child(8) { order: 16; }
.rt-bar .rt-box:nth-child(9) { order: 17; } .rt-body .rt-panel:nth-child(9) { order: 18; }

/* satir: solda bolum adi + ikincil sayac, sagda olcu + kesit olcer.
   Ana sayfadaki .m-row ile AYNI anatomi — uygulama tek bir satir nesnesinden taninir. */
.rt-box {
  grid-template-columns: 1fr auto; align-items: start; gap: 0 14px;
  margin-bottom: 8px; padding: 13px 15px;
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
}
.rt-box > .rt-alt    { grid-area: 1 / 1; margin-top: 0; }
.rt-box > .rt-sayi   { grid-area: 2 / 1; margin-top: 2px; }
.rt-box > .rt-metrik { grid-area: 1 / 2; flex-direction: column; align-items: flex-end; gap: 2px; }
.rt-box > .rt-m-bar  { grid-area: 2 / 2; width: 76px; justify-self: end; margin-top: 6px;
                       --olcu-kesik: var(--panel); }
.rt-ad { font-size: 11px; letter-spacing: .09em; }
.rt-sayi { font-size: 12px; }
.rt-m-lab { font-size: 8.5px; }
.rt-m-val { font-size: 23px; }

/* Bulgu rengi ust cizgide degil DAMAR CIZGISINDE (sol kenar) durur. */
.rt-box { border-top-width: 1px; }
.rt-box.rt-bad  { border-left-color: var(--bad); }
.rt-box.rt-warn { border-left-color: var(--warn); }
.rt-box.rt-harm { border-left-color: var(--harm); }
.rt-box.rt-ok   { border-left-color: var(--ok); }
.rt-box.rt-bad, .rt-box.rt-warn, .rt-box.rt-harm, .rt-box.rt-ok { border-top-color: var(--line); }

/* Acik satir kendi paneline yapisir: alt kosesi duzlesir, panel altina girer. */
.rt-box.on { margin-bottom: 0; border-bottom-color: transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rt-body .rt-panel { margin-bottom: 8px; padding: 2px 15px 14px;
  background: var(--panel); border: 1px solid var(--line); border-top: none;
  border-left: 3px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.rt-panel[hidden] { display: none; }        /* izgara cocugu: hidden'i kesinlestir */
/* Panelin damar cizgisi acik satirinkiyle ayni renkte olsun. */
.rt:has(.rt-box.rt-bad.on)  .rt-panel { border-left-color: var(--bad); }
.rt:has(.rt-box.rt-warn.on) .rt-panel { border-left-color: var(--warn); }
.rt:has(.rt-box.rt-harm.on) .rt-panel { border-left-color: var(--harm); }
.rt:has(.rt-box.rt-ok.on)   .rt-panel { border-left-color: var(--ok); }

/* ---- panel icindeki bulgular ----
   .ic / .harm-row zaten damar cizgisi desenini kullaniyor; yalniz eski acik
   temadan kalan sabit renkleri paletle degistiriyoruz. */
.ic-ok { border-left-color: var(--ok); }                       /* nane yesiliydi */
.flag-rows li { border-left: 3px solid var(--line); }
.flag-rows li.kacin  { border-color: var(--line); border-left-color: var(--bad);  background: var(--bad-soft); }
.flag-rows li.dikkat { border-color: var(--line); border-left-color: var(--warn); background: var(--warn-soft); }
.harm-row { border-color: var(--line); border-left-color: var(--harm); }

.result-block { overflow-wrap: anywhere; }
.tech-details pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.alt-row { flex-direction: column; align-items: flex-start; }

/* Secilen durum cipleri: ic kaydirma siniri telefonda "listem kesildi"
   hissi veriyordu; kart dikey buyuyebilir. */
.cond-chips { max-height: none; overflow-y: visible; }

/* ====================================================================
   10) KATALOG · GECMIS · ARACLAR
   ==================================================================== */
.finder { top: var(--nav-h); padding: 13px 14px 10px; }

/* ---- FILTRE ALT YAPRAGI ---------------------------------------------------------------
   Saha referansi: koyu katalog listesi + ustte segment (MacroFactor); filtreler ayri bir
   yuzey (alt yaprak) — telefonda genel desen. Bizde filtre rayi sonuclarin USTUNDE akisa
   giriyordu (.browse-layout 900px'te tek sutuna dusuyor): kullanici kategori + marka + 
   beslenme kutularini gecmeden TEK BIR URUN gormuyordu.
   Yaprak sekme seridini ORTER (perde 96, yaprak 97 > tabbar 95): kipli bir yuzeydir,
   acikken gezinme degil filtre secilir. 61/60 denendi ve "Sonuçları gör" dugmesi seridin
   ARKASINDA kaldi. */
.filtre-ac { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.filtre-ac .ff-n { background: var(--brand); color: var(--brand-ink); border-radius: 99px;
  min-width: 19px; height: 19px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700; padding: 0 5px; }
.filtre-ac .ff-n[hidden] { display: none; }

.sheet-arka { display: block; position: fixed; inset: 0; z-index: 98;
  background: rgba(0, 0, 0, .62); }
.sheet-arka[hidden] { display: none; }
body.sheet-acik { overflow: hidden; }

.browse-filters { position: fixed; z-index: 99; left: var(--safe-l); right: var(--safe-r); bottom: 0; top: auto;
  max-height: 82vh; overflow: auto; overscroll-behavior: contain;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
  padding: 0 14px 0; gap: 12px;
  transform: translateY(101%); transition: transform .22s ease; visibility: hidden; }
.browse-filters.acik { transform: none; visibility: visible; }
/* Baslik yapisir: uzun marka listesinde kapatma dugmesi kadraj disina cikiyordu. */
.sheet-bas { display: flex; align-items: center; gap: 10px; position: sticky; top: 0;
  z-index: 1; background: var(--panel); padding: 10px 0 12px; }
.sheet-bas b { font-size: 15px; }
.sheet-tut { position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 99px; background: var(--line); }
.sheet-kapa { margin-left: auto; background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px;
  font-size: 14px; cursor: pointer; }
/* Dip dugmesi yapisir: filtre secip yaprakin dibine kadar kaydirmak gerekmesin. */
/* Dip GUVENLI ALANA kadar boyanir: yapragin kendi alt dolgusu birakilirsa kaydirilan
   liste dugmenin ALTINDAN gorunuyor (tarayicida olculdu). */
.sheet-dip { display: block; position: sticky; bottom: 0; background: var(--panel);
  padding: 10px 0 calc(12px + var(--safe-b)); margin-top: 4px;
  box-shadow: 0 -10px 16px var(--panel); }
.sheet-dip .btn { width: 100%; }
/* Yaprak icinde kutu ustune kutu cizilmez: govde zaten bir yuzey. */
.browse-filters .filter-group { background: none; border: none; border-radius: 0;
  padding: 0 0 12px; border-bottom: 1px solid var(--line-2); }
.browse-filters .filter-group:last-of-type { border-bottom: none; }
.cat-list, .brand-list { max-height: none; }
@media (prefers-reduced-motion: reduce) { .browse-filters { transition: none; } }
.cat-card, .tool-card, .feature-card { padding: 18px 16px; border-radius: var(--radius); }
.hist { border-radius: var(--radius-sm); }

/* ---- GECMIS = LISTE (mobile-pages.js -> gecmis) ---------------------------------------
   Suzgec seridi TEK SATIR ve yatay kayar: bes cip sarinca baslik ile liste arasina 90px
   giriyordu. Sayfanin dikey butcesi satirlara ait. */
.m-filtre { flex-wrap: nowrap; overflow-x: auto; gap: 7px; margin: 2px 0 14px;
  padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-filtre::-webkit-scrollbar { display: none; }
.m-filtre .chip { flex: none; }
.m-hist-n { margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m-bos + .m-scan { margin-top: 6px; }
.urun-card { border-radius: var(--radius-sm); }

/* ====================================================================
   11) SOHBET — tam genislik alt sayfa
   ==================================================================== */
/* Z-INDEX OLCEGI — TELEFONDA TEK SIRA. Sayilar tek tek dagitilinca sessizce
   ters dusuyorlardi: sohbet balonu 90, sekme seridi 95 idi; yani balon seridin
   ALTINA gomuluyordu ve alt kosede iki oge birbirini yiyordu.
     92  baglamsal geri seridi (.m-ust)
     93  yapiskan durum satiri  (#status, tarama)
     94  adim cubugu            (.scan-go)
     95  alt sekme seridi       (.tabbar)
     96  sohbet balonu          (.chat-fab)
     97  sohbet paneli          (.chat-panel)
     98  yaprak perdesi         (.sheet-arka)
     99  alt yaprak             (.browse-filters)
    100  bildirim/hata seridi   (.cloud-err)
   Ustunde yalniz .boot (999) kalir: kimlik kapisi her seyi ortmeli. */
.chat-fab {
  /* 14px yerine 26px: yukseltilmis "Tara" diski seridin ust kenarindan 20px
     tasiyor, 14px'te balonun alt kenariyla 6px'lik bir bantta ust uste
     biniyorlardi. Balon SAG ALTTA KALDI — disk ORTADA oldugu icin sol alt da
     ayni banda denk geliyor, yani tarafi degistirmek sorunu cozmuyordu;
     cozen sey yukseklik ve z-index sirasi. */
  right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--klavye) + 26px);
  width: 52px; height: 52px; font-size: 21px; z-index: 96;
}
.chat-panel {
  left: 8px; right: 8px; width: auto; max-width: none; border-radius: var(--radius);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--klavye) + 8px); max-height: 76vh; z-index: 97;
}
/* Bulut hatasi seridi: styles.css'te `bottom: 18px` ve z-9999 — telefonda hem
   sekme seridinin USTUNE biniyor hem de guvenli alani (ana ekran cizgisi)
   tanimiyordu. Ustte kalmaya devam eder ama seridin uzerine oturmaz. */
.cloud-err {
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 100;
  left: var(--safe-l); right: var(--safe-r); transform: none;
  max-width: calc(100% - 24px); margin: 0 auto;
}
.chat-body { max-height: 46vh; }
/* Adim cubugu olan sayfada (tarama) balon ve panel bir serit daha yukselir.
   Yukselmezse cubuk (z-94) balonun (z-90) USTUNE biner ve asistan o ekranda
   hic acilamaz — tarama, kullanicinin soru sormaya en yatkin oldugu ekran. */
body.eylem-var .chat-fab { bottom: calc(var(--tabbar-h) + var(--eylem-h) + var(--safe-b) + 14px); }
body.eylem-var .chat-panel { bottom: calc(var(--tabbar-h) + var(--eylem-h) + var(--safe-b) + 8px); }
/* Hata seridi de yukselir: z-100 ile cubugun ustune cizilir ve birincil eylemi
   orterdi — hata mesaji, kullanicinin bir sonraki adimini kapatmamali. */
body.eylem-var .cloud-err { bottom: calc(var(--tabbar-h) + var(--eylem-h) + var(--safe-b) + 12px); }

/* ====================================================================
   12) ALTBILGI — TELEFONDA YOK
   Bes sutunlu altbilgi (Platform / Kurumsal / Yasal / Hesabim / Yonetim)
   her sayfanin dibinde duran, bir web sitesinden arta kalmis bir blok
   haline geliyordu. Icindeki baglantilarin HICBIRI kaybolmadi: hepsi
   Araclar sayfasina tasindi (mobile-pages.js -> araclar()). Testte kilitli:
   altbilgideki her data-nav mobilde de ulasilabilir olmali.
   ==================================================================== */
.footer { display: none; }

}   /* ==================== <= 760px SONU ==================== */


/* ===== cok dar telefonlar ===== */
@media (max-width: 380px) {
  .tabbar a { font-size: 9.5px; }
  .m-greet h1 { font-size: 30px; }
  .m-scan { grid-template-columns: 46px 1fr; gap: 13px; padding: 17px 18px; }
  .m-scan-ico { width: 46px; height: 46px; font-size: 22px; }
  .m-tools { grid-template-columns: 1fr; }
}

/* ====================================================================
   DOKUNMATIK: fareye ozel efektleri kapat.
   Telefonda :hover dokununca YAPISIR — kart havada asili kalir, kullanici
   "tiklandi mi?" diye sorar. Kaldirma/olcekleme yerine basili tutma geri
   bildirimi (:active) birakiyoruz.
   ==================================================================== */
@media (hover: none) {
  .cat-card:hover, .feature-card:hover, .tool-card:hover,
  .btn-primary:hover:not(:disabled), .chat-fab:hover, .rt-box:hover { transform: none; }
  .cat-card:active, .feature-card:active, .tool-card:active { border-color: var(--accent); }
  .urun-card .urun-go { opacity: 1; }
}

/* Klavyeyle gezenler icin odak her zaman gorunur (dokunmatikte cikmaz). */
@media (max-width: 760px) {
  .m-scan:focus-visible, .m-area:focus-visible, .m-row:focus-visible,
  .m-tool:focus-visible, .tabbar a:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-scan:active, .tabbar a:active .tabbar-ico { transform: none; }
}

/* ====================================================================
   YUKLU UYGULAMA (ana ekrandan acilinca)
   Tarayici cubugu yok; ust bar biraz daha sikilasir.
   ==================================================================== */
@media (display-mode: standalone) and (max-width: 760px) {
  .nav-in { padding-top: 6px; padding-bottom: 6px; }
  /* Altbilgi KALIR: yasal metinler, fiyatlandirma, paylasim ve yonetim
     baglantilarinin telefondaki TEK yolu orasi (ust menude yoklar). */
}