/* F2 internet sitesi — ortak stil. Butun degerler token'dan gelir (f2-tokens.css).
   Kurallar: golge/degrade yok, text-transform yok, ham hex yok, turuncu ~%6. */

* { box-sizing: border-box; }

/* cihaz tutarliligi (2026-08-26, Samsung'da bozulma raporu uzerine):
   - text-size-adjust: Samsung Internet/Chrome'un "yazi buyutmesi" metin
     bloklarini tek tarafli sisirip mutlak konumlu karalamalari yaziya
     bindiriyordu; kapatilir, olcek bizim clamp'lerimizden gelir.
   - overflow-x: clip — tasan mutlak oge sayfayi yatay kaydirmasin.
     hidden DEGIL: hidden position:sticky'yi oldurur, clip oldurmez. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

.f2-govde { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- ust bar ---------- */

.ust-bar {
  border-bottom: var(--border-hairline);
  /* mihmandarin ipi barin ARKASINDAN sarkar; bar zemini ipi orter */
  position: relative; z-index: 10;
  background: var(--color-bg);
}
.ust-bar .f2-govde {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
/* ust barda amblem (en kucuk 32px); kilit davette yasar — 40px'te 96px genislik kuralini tutturamiyor */
.ust-bar .logo img { display: block; height: 40px; width: auto; }
/* bar dali: iki uc arasinda uzanan yatay surgun — rehber katmanin dili
   (sarmasik + yaprak), barin bos ortasini doldurur. Silik, tiklanamaz. */
.ust-bar .bar-dal {
  flex: 1; max-width: 380px; margin: 0 var(--space-6);
  color: var(--gray-500); pointer-events: none;
}
.ust-bar .bar-dal svg { display: block; width: 100%; height: auto; }
.ust-bar .bar-dal .yaprak { stroke: var(--color-accent); }
.ust-bar nav { display: flex; gap: var(--space-6); }
/* MENU: ikincil buton dilinde hap — cizgi dunyasinin konturuyla ayni agirlik.
   Dolgu yok: sayfanin tek dolu turuncu aksiyonu davette/fiyatta yasar. */
.ust-bar nav .menu-dugme {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--tracking-button);
  color: var(--color-ink); text-decoration: none;
  border: 2px solid var(--color-ink); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-6);
}
.ust-bar nav .menu-dugme:hover { background: var(--gray-100); }
/* menu sayfasinda "buradasin": koyu etiket zemini (gray-900) + beyaz metin */
.ust-bar nav .menu-dugme[aria-current="page"] {
  background: var(--gray-900); border-color: var(--gray-900); color: var(--color-bg);
}

/* ---------- butonlar ---------- */

.buton {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: var(--tracking-button);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-8);
  text-decoration: none;
  cursor: pointer;
}
.buton-birincil { background: var(--color-accent); color: var(--color-bg); border: none; }
.buton-birincil:hover { background: var(--color-accent-pressed); }
.buton-ikincil { background: none; color: var(--color-ink); border: 2px solid var(--color-ink); }

/* ---------- basliklar ---------- */

.vitrin-baslik {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 6vw, 64px);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin: 0;
}

/* dar ekranda vw ile daralir: "ATIŞTIRMALIKLAR" gibi uzun tek kelime
   360px'te tasip sayfayi yatay kaydiriyordu (Samsung raporu) */
.bolum-baslik {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 6.2vw, 28px);
  letter-spacing: var(--tracking-heading);
  text-align: center;
  margin: 0 0 var(--space-8);
}
/* vurgu cizgileri sikisinca ezilebilir (dekoratif) — ama yok olmaz */
.bolum-baslik::before, .bolum-baslik::after {
  content: ""; flex: 0 1 var(--accent-dash-width);
  min-width: 8px; height: var(--accent-dash-height);
  border-radius: 2px; background: var(--color-accent);
}

.etiket {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--gray-500); letter-spacing: 0;
}

/* ---------- vitrin (durus) ---------- */

.vitrin { padding: var(--space-12) 0; }
/* metin + maskot, video karsisinda dikeyde ortalanmis TEK blok —
   dagilmis parcalar degil, kurulu bir kompozisyon okunur */
.vitrin-yerlesim {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
}

/* karalamalar: cizgi dunyasinin silik fon elemanlari — bos beyazi doldurur,
   asla one gecmez (gray-300, dekoratif, tiklanamaz) */
.karalama { position: absolute; color: var(--gray-500); pointer-events: none; }
.karalama svg { display: block; width: 100%; height: 100%; }
.k-susam  { width: 52px; height: 52px; top: 6%; left: 44%; }
.k-patates { width: 46px; height: 46px; bottom: 10%; left: 55%; transform: rotate(-8deg); }
/* nese katmani: bolum koselerindeki kucuk cizimler */
.k-parilti-1 { width: 26px; height: 26px; top: 16%; left: 7%; transform: rotate(-10deg); }
.k-susam-2 { width: 44px; height: 44px; bottom: 12%; right: 8%; transform: rotate(6deg); }
.k-sise { width: 44px; height: 44px; top: 34%; left: 5%; transform: rotate(-6deg); }
.k-damla { width: 20px; height: 25px; top: 58%; left: 12%; transform: rotate(8deg); }
.k-parilti-2 { width: 24px; height: 24px; bottom: 16%; right: 6%; transform: rotate(12deg); }
.k-cirpici { width: 46px; height: 46px; top: 24%; right: 4%; transform: rotate(10deg); }

/* ---- karalama jestleri (kullanici istegi, 2026-08-26) ----
   Her cizim oldugu yerde kendi kucuk jestiyle yasar: parilti goz kirpar,
   sise calkalanir, susam salinir, damla suzulur, alev titrer, patates ve
   bardak kipirdar, cirpici arada bir cirpar, akis oku asagi cagirir, video
   buhari tuter. Jest SVG'ye uygulanir ki span'daki sabit egim (rotate)
   bozulmasin; negatif gecikmeler es zamanli atmayi kirar. Silik ve yavas —
   rehber katman one gecmez. Hareket azaltilmissa asagida hepsi kapanir. */
.k-parilti-1 svg, .k-parilti-2 svg { animation: krl-parilda 3.6s ease-in-out infinite; }
.k-parilti-2 svg { animation-delay: -1.8s; }
.k-susam svg, .k-susam-2 svg { animation: krl-salin 5.5s ease-in-out infinite alternate; }
.k-susam-2 svg { animation-delay: -2.4s; }
.k-sise svg { transform-origin: 50% 86%; animation: krl-calkala 7s ease-in-out infinite; }
.k-damla svg { animation: krl-suzul 4.2s ease-in-out infinite; }
.k-alev svg { transform-origin: 50% 78%; animation: krl-titre 2.6s ease-in-out infinite; }
.k-patates svg, .k-davet-sol svg {
  transform-origin: 50% 80%;
  animation: krl-kipirda 4.6s ease-in-out infinite alternate;
}
.k-davet-sol svg { animation-delay: -1.6s; }
.k-davet-sag svg {
  transform-origin: 50% 80%;
  animation: krl-kipirda 5.4s ease-in-out infinite alternate;
  animation-delay: -3s;
}
.k-cirpici svg { transform-origin: 50% 16%; animation: krl-cirp 6.5s ease-in-out infinite; }
.karalama-akis svg { animation: krl-davet-et 2.4s ease-in-out infinite; }
.vitrin-video .buhar svg { animation: krl-tut 3s ease-in-out infinite alternate; }

@keyframes krl-parilda {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.72) rotate(22deg); opacity: 0.4; }
}
@keyframes krl-salin { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
/* sise: cogunlukla durur, arada bir calkalanip yatisir */
@keyframes krl-calkala {
  0%, 58%, 88%, 100% { transform: rotate(0deg); }
  64% { transform: rotate(-8deg); }
  70% { transform: rotate(7deg); }
  76% { transform: rotate(-5deg); }
  82% { transform: rotate(3deg); }
}
@keyframes krl-suzul {
  0%, 100% { transform: translateY(0) scaleY(1); }
  55% { transform: translateY(3px) scaleY(1.05); }
}
@keyframes krl-titre {
  0%, 100% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.06) rotate(-1.5deg); }
  70% { transform: scale(0.97) rotate(1.5deg); }
}
@keyframes krl-kipirda { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
/* cirpici: dinlenir, arada bir hizla cirpar */
@keyframes krl-cirp {
  0%, 55%, 84%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(9deg); }
  66% { transform: rotate(-9deg); }
  72% { transform: rotate(8deg); }
  78% { transform: rotate(-6deg); }
}
@keyframes krl-davet-et {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@keyframes krl-tut {
  from { transform: translateY(1px); opacity: 0.55; }
  to   { transform: translateY(-2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .karalama svg, .karalama-akis svg, .vitrin-video .buhar svg { animation: none; }
}
.vitrin-sol {
  display: flex; flex-direction: column; gap: var(--space-8);
  max-width: 560px;
}
.vitrin-video { flex: none; }

.vurgu-cizgi {
  display: block;
  width: var(--accent-dash-width); height: var(--accent-dash-height);
  border-radius: 2px; background: var(--color-accent);
  margin-bottom: var(--space-4);
}
.vitrin p.tanitim { font-size: 16px; max-width: 560px; margin: var(--space-6) 0 0; }

/* akis oku: metnin altinda, ziyaretciyi asagi davet eder (akista durur, tasmaz) */
.karalama-akis { display: block; width: 30px; margin-top: var(--space-8); color: var(--gray-500); }
.karalama-akis svg { display: block; width: 100%; height: auto; }
.k-alev { width: 44px; height: 44px; left: 2%; bottom: 8%; }

/* temsili video: hairline cerceve, kose token'i; kahraman degil tanik */
.vitrin-video { position: relative; margin: 0; width: min(360px, 100%); }
.vitrin-video .buhar {
  position: absolute; top: -22px; right: var(--space-6);
  color: var(--color-ink);
}
.vitrin-video .buhar svg { display: block; width: 22px; height: 22px; }
.video-cerceve {
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.video-cerceve video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

/* ---------- ara bolumler: anatomi + sos duvari ----------
   Soz degil cizim anlatir; bolum gecisleri tam genislik hairline ile yapilanir. */

.anatomi, .sos-bolum { border-top: var(--border-hairline); padding: var(--space-12) 0 var(--space-16); }
.anatomi, .sos-bolum, .davet { position: relative; }

.ara-baslik {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: var(--tracking-heading);
  text-align: center; margin: 0 0 var(--space-2);
}
/* akis cizgisi: bolumun ust cizgisinden basliga inen kisa dikey ip —
   sayfa tek cizginin uzerinde ilerliyormus hissi */
.ara-baslik::before {
  content: ""; display: block;
  width: 1.5px; height: var(--space-8);
  background: var(--gray-300);
  margin: calc(-1 * var(--space-12)) auto var(--space-4);
}
.ara-not { display: block; text-align: center; margin: 0 0 var(--space-8); }

/* patlatilmis burger cizimi: solda cizim, sagda katman listesi ayni dikey ritimde */
.anatomi-yerlesim {
  display: flex; justify-content: center; align-items: stretch;
  gap: var(--space-12);
  max-width: 560px; margin: 0 auto;
}
.anatomi-cizim { display: block; width: 240px; height: auto; color: var(--color-ink); flex: none; }
/* katman vurgusu: etikete dokununca ilgili katman turuncuya yanip soner
   (kullanici istegi, 2026-08-26). Vurgu yalniz cizgide ve tirede yasar —
   13px etiket metni turuncuya donmez (kucuk turuncu metin kurali). */
.anatomi-cizim g { transition: stroke 0.2s ease; }
.anatomi-cizim g.vurgulu { stroke: var(--color-accent-pressed); animation: katman-yanip 0.5s ease-in-out 2; }
@keyframes katman-yanip { 50% { stroke: var(--color-ink); } }
.anatomi-liste .katman-dugme { cursor: pointer; }
.anatomi-liste .katman-dugme.vurgulu .tire { background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .anatomi-cizim g.vurgulu { animation: none; }
}
.anatomi-liste {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-4) 0; margin: 0; list-style: none;
}
.anatomi-liste li { display: flex; align-items: center; gap: var(--space-3); }
.anatomi-liste .tire {
  flex: none; width: var(--space-6); height: 1.5px; background: var(--gray-300);
}
.anatomi-liste .ad {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: var(--tracking-heading);
}

/* sos duvari v2 — el yapimi vurgusu (kullanici istegi, 2026-08-26):
   uc cizgisel kap donusumlu gezer (kase, kasikli kavanoz, kulplu tencere),
   kabin ici accent-soft sos zemini, buhar kap basina kaymis ritimle tuter.
   Istisna kaydi: brand/docs/kararlar/2026-08-sos-duvari-el-yapimi.md */
.sos-duvar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-8) var(--space-6);
  max-width: 760px; margin: 0 auto; padding: 0; list-style: none;
}
.sos-duvar li {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center;
}
.sos-duvar .kap { color: var(--color-ink); }
.sos-duvar .kap svg {
  display: block; width: 44px; height: 44px;
  transition: transform 0.25s ease;
  transform-origin: 50% 88%;
}
/* sos dolgusu: cizgi degil ZEMIN — rozetle ayni yumusak vurgu dili */
.sos-duvar .sos-dolgu { fill: var(--color-accent-soft); stroke: none; }
/* buhar: yavas tuter; negatif gecikme sayesinde her kap dongunun baska
   yerinden baslar (JS --sos-sira yazar), duvar tek ritimde nefes almaz */
.sos-duvar .buhar-kivrim {
  animation: sos-buhar 2.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--sos-sira, 0) * -0.9s);
}
@keyframes sos-buhar {
  from { opacity: 0.3; transform: translateY(0.6px); }
  to   { opacity: 1;   transform: translateY(-0.9px); }
}
/* imlecle kap hafifce yatar — el degmis hissi */
@media (hover: hover) {
  .sos-duvar li:hover .kap svg { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sos-duvar .buhar-kivrim { animation: none; }
  .sos-duvar li:hover .kap svg { transform: none; }
}
.sos-duvar .ad {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--tracking-heading);
}

/* el yapimi vurgusu BASLIKTA yasar (kullanici istegi, 2026-08-26):
   "ON ÇEŞİT EL YAPIMI SOS" — "EL YAPIMI" ozel renkli italik. Kesim gercek:
   Montserrat-BoldItalic yerel woff2 (fonts.css); baslik 20px kalin oldugundan
   turuncu metin kurali (beyazda >=18px kalin) kendiliginden saglanir. */
#sos-baslik em { font-style: italic; color: var(--color-accent-pressed); }

/* ---------- malzeme bandi ----------
   Imza malzemeler iki hairline ray arasinda yavas akar; dis ekran videolarinin
   hareket diliyle akraba. Hareket azaltilmissa durur, tasan kisim gizli kalir. */

.malzeme-bant {
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  overflow: hidden;
  padding: var(--space-4) 0;
}
/* JS kurulunca bant tutulup cekilebilir; dikey kaydirma serbest kalir */
.malzeme-bant { position: relative; }
.malzeme-bant.cekilebilir { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.malzeme-bant.tutulan { cursor: grabbing; }
.bant-ic { display: flex; width: max-content; animation: bant-kay 48s linear infinite; }
.bant-kopya { display: flex; align-items: center; gap: var(--space-8); padding-right: var(--space-8); }
.bant-kopya .ad {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--tracking-heading); color: var(--gray-500);
  white-space: nowrap;
}
.bant-kopya .nokta {
  flex: none; width: 5px; height: 5px; border-radius: var(--radius-pill);
  background: var(--gray-300);
}
@keyframes bant-kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bant-ic { animation: none; }
}

/* ---------- bolum girisleri (kaydirinca belirme) ----------
   .giris sinifini yalniz JS ekler; JS yoksa sayfa oldugu gibi gorunur. */

.giris { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.giris.gorundu { opacity: 1; transform: none; }

/* ---------- davet (kilit + tek turuncu aksiyon) ---------- */

.davet { padding: var(--space-12) 0 var(--space-16); }
.davet-kolon {
  position: relative;
  max-width: 560px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.k-davet-sol { width: 42px; height: 42px; top: 22%; left: 6%; transform: rotate(-10deg); }
.k-davet-sag { width: 40px; height: 40px; top: 30%; right: 6%; transform: rotate(8deg); }
/* kilit: sayfadaki tek gorunumu; genislik 96px minimumun ustunde */
.davet-kilit { width: 160px; height: auto; }
.davet-cumle { margin: 0; font-size: 16px; }

/* ---------- desen seritleri ----------
   Ayni aile, dort karo: amblem (sayfa sonu), alev, kase, karalama.
   Desen zemindir — ustune metin ve renkli kilit binmez (DESIGN.md · Ambalaj deseni).
   Karolar: brand/assets/pattern/, karar: kararlar/2026-08-desen-ailesi.md

   Akis (kullanici istegi, 2026-08-26): seritler malzeme bandi gibi akar ve
   elle cekilebilir (f2seritSurukle). Yon data-akis'te durur; sayfadaki akan
   seritler ardisik TERS yonludur: alev sol, kase sag, malzeme bandi sol,
   amblem sag (menu sayfasindaki karalama tek basina, sol). Asagidaki
   animasyon JS'siz yedektir — JS kurulunca akisi rAF devralir; -400px karo
   geninin tam kati oldugundan dongu dikissizdir. */

.desen-serit {
  height: 40px;
  background: var(--color-bg) url("../varliklar/pattern/f2-pattern.svg") repeat left center / auto 100%;
  animation: serit-akis-sol 18s linear infinite;
}
.desen-serit[data-akis="sag"] { animation-name: serit-akis-sag; }
.desen-serit.desen-alev { background-image: url("../varliklar/pattern/f2-pattern-alev.svg"); }
.desen-serit.desen-kase { background-image: url("../varliklar/pattern/f2-pattern-kase.svg"); }
.desen-serit.desen-karalama { background-image: url("../varliklar/pattern/f2-pattern-karalama.svg"); }
@keyframes serit-akis-sol { from { background-position-x: 0; } to { background-position-x: -400px; } }
@keyframes serit-akis-sag { from { background-position-x: 0; } to { background-position-x: 400px; } }
/* cekilebilirlik: bantla ayni dil — imlec tutar, dikey kaydirma serbest kalir */
.desen-serit.cekilebilir { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.desen-serit.tutulan { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .desen-serit { animation: none; }
}

/* ---------- menu sayfasi ---------- */

.menu-bas { padding: var(--space-12) 0 var(--space-8); text-align: center; }
.menu-bas .vitrin-baslik { font-size: clamp(36px, 5vw, 52px); }
.menu-bas .etiket { display: block; margin-top: var(--space-3); }

/* yapiskan bolum gezintisi: sayfa boyunca ustte kalir (kullanici istegi,
   2026-08-26). Tek satir, tasarsa yatay kaydirilir; ilk/son ogedeki auto
   margin sigarsa ortalar, tasarsa kaydirmayi bozmaz (safe center muadili). */
.bolum-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-bg);
  display: flex; flex-wrap: nowrap; gap: var(--space-2);
  margin: var(--space-6) calc(-1 * var(--space-6)) 0;
  padding: var(--space-3) var(--space-6);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bolum-nav::-webkit-scrollbar { display: none; }
.bolum-nav li:first-child { margin-left: auto; }
.bolum-nav li:last-child { margin-right: auto; }
.bolum-nav.yapisti { border-bottom: var(--border-hairline); }
.bolum-nav a {
  display: block; white-space: nowrap;
  border: var(--border-separator); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.bolum-nav a:hover { border-color: var(--gray-300); }

/* bolum ikonu: basligin USTUNDE ortalanmis durur (basligin solunda simetriyi
   bozuyordu ve dar ekranda flex icinde eziliyordu — Samsung'da yok oluyordu).
   Icon ailesinden 24px cizgisel isaret, silik. */
.bolum-ikon {
  display: flex; justify-content: center;
  margin: 0 0 var(--space-2);
  color: var(--gray-500);
}
.bolum-ikon svg { display: block; width: 24px; height: 24px; }

.menu-bolum { padding: var(--space-12) 0 0; max-width: 720px; margin: 0 auto; }
.menu-bolum .bolum-not {
  text-align: center; margin: calc(-1 * var(--space-6)) 0 var(--space-6);
}

.menu-satirlar { margin: 0; padding: 0; list-style: none; }
.menu-satir { padding: var(--space-4) 0; border-bottom: var(--border-separator); }
.menu-satir:last-child { border-bottom: none; }

/* satir tek flex SATIRI kalir (sarmaz): uzun ad kendi kutusunda alt satira
   sarar, noktalar ve fiyat ilk satirin hizasinda sagda durur. Eski mobil
   flex-wrap cozumu etiket/kilavuz/fiyati alt satira dusuruyordu (canlida
   fark edildi, 2026-08-26). */
.satir-ust { display: flex; align-items: baseline; gap: var(--space-3); }
.satir-ust .ad {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: var(--tracking-heading);
  min-width: 0;                  /* daralabilsin ki ad kutu icinde sarsin */
}
/* miktar/detay etiketi ve rozet bolunmez, kendi satirina dusmez */
.satir-ust .etiket { flex: none; white-space: nowrap; }
.satir-ust .rozet-aci { flex: none; }
.satir-ust .kilavuz {
  flex: 1 0 var(--space-6);      /* hep ayni satirda, en az 24px nokta */
  border-bottom: 2px dotted var(--gray-300);
  transform: translateY(-4px);
}
.satir-ust .fiyat {
  flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--color-accent);
}
.menu-satir .aciklama { margin: var(--space-2) 0 0; font-size: 15px; }
.menu-satir .alerjen {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  color: var(--gray-500); letter-spacing: var(--tracking-heading);
}

/* acili rozeti — islevsel uyari, her zaman gosterilir */
.rozet-aci {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-accent-soft); color: var(--color-accent-pressed);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-display);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-2);
  transform: translateY(-2px);
}
.rozet-aci svg { display: block; width: 14px; height: 14px; }

.isaret-listesi {
  max-width: 720px; margin: var(--space-12) auto 0;
  padding-top: var(--space-6);
  border-top: var(--border-separator);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
}
/* sessiz isaret filtreleri: aciklamalar tiklanabilir dugmedir ama etiket gibi
   durur — aktif olunca murekkep rengine doner, yanina kisa durum notu gelir
   (V: yalniz veganlar; G/S/Y: icerenler gizlenir). Bkz. motor.js f2menuKur. */
.isaret-dugme {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
  display: inline-flex; gap: var(--space-1); align-items: baseline;
}
.isaret-dugme:hover .etiket { color: var(--gray-700); }
.isaret-dugme.acik > .etiket:first-child { color: var(--color-ink); font-weight: 600; }
.isaret-dugme .isaret-durum { display: none; }
.isaret-dugme.acik .isaret-durum { display: inline; }

/* ---------- mihmandar maskot ----------
   Ipin ucunda asili; ip desenleri scroll'la akar (inis hissi), bolum esiklerinde
   kisa durak, sayfa sonunda (bitis ogesi: son desen seridi) yukari cekilir.
   Siniflari yalniz JS yonetir. */

.mihmandar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  height: 40vh; height: 40svh;
  pointer-events: none;
  color: var(--color-ink);     /* sarmasik murekkep renginde — gorunur bir ip */
  transition: transform 0.35s ease-out, opacity 0.35s ease-out;
  visibility: hidden;          /* JS kurmadan ciplak ip sarkmasin */
}
.mihmandar.kuruldu { visibility: visible; }
/* acilis oturmasi: kaydirilmis konumda yuklenirken hicbir gecis oynamaz */
.mihmandar.animsiz, .mihmandar.animsiz .kol, .mihmandar.animsiz #ust,
.mihmandar.animsiz #kol-sag, .mihmandar.animsiz #kol-sol,
.mihmandar.animsiz #bacaklar { transition: none; }
.mihmandar.cekildi { transform: translateY(-115%); opacity: 0; }

/* Halat kollari: her kol tepe ankrajindan donen GERCEK sarkac — acisini fizik
   motoru (motor.js) her karede yazar; CSS'te salinim animasyonu YOKTUR.
   Maskot tutundugu kolun .yuva'sina monte: iple birlikte katilikla doner.
   Konumlar OLCULEREK ayarli: ip ucu yumrugun icinden ~4px gecer, el ipi kavrar. */
.kol {
  position: absolute; top: 0; width: 36px; height: calc(100% - 58px);
  transition: opacity 0.4s;
  transform-origin: 50% 0;      /* ankraj: ipin tepe noktasi */
  will-change: transform;
}
.kol .halat { display: block; width: 100%; height: 100%; overflow: visible; }
.kol-sag { right: 25px; }
.kol-sol { left: 0; opacity: 0; }
.mihmandar.solda .kol-sol, .mihmandar.ucusta .kol-sol { opacity: 1; }
.mihmandar.solda .kol-sag { opacity: 0; }
.mihmandar.ucusta .kol-sag { opacity: 1; }
.kol .yaprak { stroke: var(--color-accent); stroke-width: 2.5; }
/* asili durusta el KAVRAR: basparmak katmani gizlenir, geriye kapali yumruk kalir
   (eski maskotta #basparmak, v2'de #basparmak-sag) */
.mihmandar #basparmak, .mihmandar #basparmak-sag { display: none; }

/* yuva: ip ucundaki montaj noktasi; maskot buraya asilinca yumruk ip ucuna oturur */
.kol .yuva { position: absolute; top: 100%; left: 50%; width: 0; height: 0; }
.kol .yuva .sarkan { position: absolute; left: -71px; top: -40px; }
.mihmandar.bakis-sol .kol .yuva .sarkan { left: -20px; }

/* tasiyici: yalniz UCUS sirasinda kullanilir; konumunu her karede fizik
   motoru yazar (balistik) — CSS gecisi YOK */
.tasiyici { position: absolute; left: 0; top: 0; }
/* inis egimi tek karede degil, kisa gecisle dikelir; ucusta gecis kapali
   (rotate'i her kare fizik yazar) */
.hoplayici { transition: transform 0.3s ease-out; }
.mihmandar.ucusta .hoplayici { transition: none; }

/* sarkan: donmez — donusu tasidigi KOL yapar (fizik motoru); kendi isi yalniz boyut.
   Easter egg: maskot TUTULABILIR (fare/dokunma) — overlay gecirgen kalir,
   yalniz karakter tiklanabilir; dokunmada sayfa kaydirmasi devreye girmez */
.mihmandar .sarkan {
  height: 92px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.mihmandar.tutuluyor .sarkan { cursor: grabbing; }
/* tutulunca bacaklar telasla sallanir */
.mihmandar.tutuluyor #bacaklar { animation: bacak-sallan 0.35s ease-in-out infinite alternate; }
.mihmandar .sarkan svg { display: block; height: 100%; width: auto; }
/* aynalanma UCUSUN ORTASINDA yapilir (motor.js .bakis-sol'u 400ms'te ekler) —
   karakter havada donmus olur, kalkis karesinde ani ters donme okunmaz */
.mihmandar.bakis-sol .sarkan svg { transform: scaleX(-1); }

/* ---- pozlar (eklemler) ----
   Asili poz: sag yumruk ip ucunda (trapez tutusu), govde hafif sarkik.
   Ucus pozu: tutus birakilir, spatula kolu savrulur, bacaklar geride. */
.mihmandar #ust,
.mihmandar #kol-sag,
.mihmandar #kol-sol,
.mihmandar #bacaklar { transition: transform 0.32s ease; }
.mihmandar #ust { transform: rotate(5deg); }
.mihmandar #kol-sag { transform: rotate(-60deg); }          /* tutan kol */
.mihmandar #kol-sol { animation: kol-salinim 3s ease-in-out infinite alternate; }
.mihmandar.kayiyor #bacaklar { animation: bacak-sallan 0.5s ease-in-out infinite alternate; }
.mihmandar.durakta #kol-sol { animation: selamla 0.65s ease-in-out; }
/* pompa: maskot ivme almak icin butun govdesiyle sallanir — bacaklar guclu
   tempo tutar, govde one arkaya calisir */
.mihmandar.pompa #bacaklar { animation: pompa-bacak 0.42s ease-in-out infinite alternate; }
.mihmandar.pompa #ust { animation: pompa-govde 0.84s ease-in-out infinite alternate; }
@keyframes pompa-bacak { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
@keyframes pompa-govde { from { transform: rotate(8deg); } to { transform: rotate(1deg); } }
.mihmandar.ucusta #ust { animation: none; transform: rotate(-10deg); }
.mihmandar.ucusta #kol-sag { transform: rotate(-28deg); }
.mihmandar.ucusta #kol-sol { animation: none; transform: rotate(52deg); }
.mihmandar.ucusta #bacaklar { animation: none; transform: rotate(15deg); }
/* inis sarsintisi: 2 x 0.28s = 560ms, kondu penceresi (600ms) icinde biter */
.mihmandar.kondu #bacaklar { animation: bacak-sallan 0.28s ease-in-out 2 alternate; }
@keyframes kol-salinim { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes bacak-sallan { from { transform: rotate(4deg); } to { transform: rotate(-4deg); } }
@keyframes selamla {
  0% { transform: rotate(0); } 40% { transform: rotate(-24deg); }
  70% { transform: rotate(-9deg); } 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mihmandar { display: none; }
}
/* yatay telefon: ip ust barin arkasinda kaybolur, yer de yok — sahneyi kapat */
@media (max-height: 500px) {
  .mihmandar { display: none; }
}
/* orta genislik (iPad dikey / dar masaustu): icerik kenara dayanir, serit nefesi burada da gerekli */
@media (min-width: 761px) and (max-width: 1140px) {
  .anatomi .f2-govde, .sos-bolum .f2-govde, .davet .f2-govde {
    padding-right: 68px; padding-left: 68px;
  }
}

/* ---------- dallar ----------
   Halattan icine kivrilan el cizimi isaretler: her bolumun basinda sagdan girer,
   basliga dogru ok verir. Rehber katman — gray-300, tiklanamaz. */

.dal {
  position: absolute; top: var(--space-4); right: var(--space-2);
  width: 128px; color: var(--gray-500); pointer-events: none;
}
.dal svg { display: block; width: 100%; height: auto; }
.dal .ok { stroke: var(--color-accent-pressed); }   /* ok ucu: vurgu ailesinden */
.dal-kisa { width: 104px; }

/* ---------- kunye (altbilgi) ----------
   Yalniz menu sayfasinda (Ana sayfa donus linki QR ziyaretcisine lazim);
   ana sayfa kullanici karariyla desen seridiyle biter. Beyaz/cizgisel,
   zemin cizgisi ustunde duran acik kunye; konum satiri siteden kalkti. */

.altbilgi { padding: var(--space-12) 0 var(--space-16); }
.altbilgi .f2-govde {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center;
}
.altbilgi .kunye-amblem { display: block; height: 44px; width: auto; }
.altbilgi .baslik {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: var(--tracking-heading); color: var(--color-ink);
  margin: var(--space-2) 0 0;
}
/* kilit yazimindaki tanimlayici satir: "STEAK BURGER" silik ve altta */
.altbilgi .kunye-alt {
  margin: 2px 0 0;
  letter-spacing: var(--tracking-display);
}
/* zemin cizgisi: kunye kendi kucuk zemininde durur (maskotla ayni dil) */
.altbilgi .zemin {
  display: block; width: 180px; height: 0;
  border-bottom: var(--border-hairline);
  margin-top: var(--space-4);
}
.altbilgi-link {
  color: var(--gray-500); font-weight: 600; font-size: 14px; text-decoration: none;
  border-bottom: 1px solid var(--gray-300); padding-bottom: 2px;
  margin-top: var(--space-2);
}
.altbilgi-link:hover { color: var(--color-ink); }

/* ---------- dar ekran ---------- */

@media (max-width: 760px) {
  .vitrin { padding: var(--space-12) 0; }
  /* dar ekranda sarmalayici cozulur; akis: metin -> video */
  .vitrin-yerlesim { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .vitrin-sol { display: contents; }
  .vitrin-metin { order: 1; }
  .vitrin-video { order: 2; }
  .anatomi-yerlesim { gap: var(--space-8); }
  .anatomi-cizim { width: 148px; }
  .anatomi-liste .ad { font-size: 12px; }
  .sos-duvar { grid-template-columns: repeat(2, 1fr); }
  /* dar ekranda dal katlanmaz, cekilir: logo + MENU bari zaten doldurur */
  .ust-bar .bar-dal { display: none; }
  .ust-bar nav .menu-dugme { font-size: 13px; padding: var(--space-2) var(--space-4); }
  /* karalama guvenli bolgesi (2026-08-26, Samsung raporu): dar ekranda
     karalama METIN ALANINA GIREMEZ — ya kenar seridinde yasar ya cekilir.
     Yazi olcegi cihazdan cihaza degisince sabit konumlar yaziya biniyordu;
     alev (sabit 348px), sise ve damla bu yuzden telefonda cekildi. */
  .k-susam { width: 40px; height: 40px; top: 2px; left: auto; right: 4%; }
  .k-patates, .k-alev, .k-sise, .k-damla { display: none; }
  .dal { width: 88px; }
  .dal-kisa { width: 76px; }
  .k-davet-sol { top: 34%; left: 0; }
  .k-davet-sag { top: 42%; right: 0; }
  /* maskot basligin altina iner; seritler dar, karakter kucuk.
     Ip ucu yumruga OLCULEREK oturtuldu (bkz. masaustu notu). */
  .mihmandar { height: 42vh; height: 42svh; }
  .kol { width: 28px; height: calc(100% - 43px); }
  .kol-sag { right: 16px; }
  .kol-sol { left: -3px; }
  .kol .yuva .sarkan { left: -51px; top: -29px; }
  .mihmandar.bakis-sol .kol .yuva .sarkan { left: -14px; }
  .mihmandar .sarkan { height: 66px; }
  /* mihmandarin seridi: ic bolumler sagdan nefes birakir, maskot yaziya binmez.
     Davet bu listede DEGIL: ortalanmis kompozisyon, asimetrik nefes onu sola
     kaydiriyordu (canli mobilde fark edildi, 2026-08-26); icerik dar oldugundan
     maskotla zaten carpismaz. */
  .anatomi .f2-govde, .sos-bolum .f2-govde { padding-right: 52px; }
  /* dar ekranda ad/fiyat bir kademe kuculur: uzun adlar daha az sarar,
     satir yine TEK flex satiridir (sarma yok — kilavuz/fiyat asagi dusmez) */
  .satir-ust .ad, .satir-ust .fiyat { font-size: 17px; }
}

/* ---------- acilis perdesi ----------
   Gercek yukleme degil, beklenti/premium his: amblem damga gibi oturur, vurgu
   cizgisi soldan cizilir, karalamalar sirayla belirir, perde yukari kalkar.
   Ogeyi yalniz JS ekler (JS'siz sayfada hic yoktur); reduced-motion'da kurulmaz. */

.acilis {
  position: fixed; inset: 0; z-index: 40;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.acilis.kalkiyor { transform: translateY(-100%); }

.acilis-sahne {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  width: 240px; height: 240px; justify-content: center;
}
.acilis-amblem {
  display: block; width: 96px;
  opacity: 0; transform: scale(0.92);
  animation: acilis-damga 0.55s ease-out 0.12s forwards;
}
.acilis-vurgu {
  display: block; width: var(--accent-dash-width); height: var(--accent-dash-height);
  border-radius: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  animation: acilis-cizgi 0.45s ease-out 0.55s forwards;
}
.acilis-karalama {
  position: absolute; color: var(--gray-300);
  opacity: 0; animation: acilis-belir 0.35s ease-out forwards;
}
.acilis-karalama svg { display: block; width: 100%; height: 100%; }
.a-buhar   { width: 22px; height: 22px; top: 8%; left: 50%; margin-left: -11px; animation-delay: 0.75s; }
.a-susam   { width: 40px; height: 40px; top: 22%; right: 4%; transform: rotate(8deg); animation-delay: 0.9s; }
.a-parilti { width: 24px; height: 24px; bottom: 24%; left: 6%; transform: rotate(-10deg); animation-delay: 1.05s; }
.a-alev    { width: 34px; height: 34px; bottom: 12%; right: 12%; transform: rotate(6deg); animation-delay: 1.2s; }
@keyframes acilis-damga { to { opacity: 1; transform: scale(1); } }
@keyframes acilis-cizgi { to { transform: scaleX(1); } }
@keyframes acilis-belir { to { opacity: 1; } }