/* SAHNE · GÖZLEM VE DAVRANIŞ KAYDI (includes/scenes/behavior.php) — öğretmenin telefonu + velinin telefonu. Adımlar:
   s1 «Olumlu» · s2 Kategori «Sorumluluk / Görev Bilinci» · s3 not yazılır · s4 «Kimler görebilir»e kaydırılır ·
   s5 «Veli» işaretlenir · s6 «Kaydet» → «Gözlem kaydediliyor…» · s7 «Gözlem · Yazdıklarım» + «Gözlem kaydedildi.» ·
   s8 velinin «Gözlem ve görüşmeler» sayfasında yeni gözlem (sonuç).
   Form blokları sabit yükseklikte: kaydırma miktarı = içerik (--fh) − görünen alan (--vis).
   Ölçü (--vis = 456 − 12 − 68 − 46 = 330): 8 + yt 30+8 + c1 80+8 + c2 178+8 → c3 320'de başlar; s0–s3'te alt sekme
   çubuğunun üstünde yalnız kartın üst kenarı görünür, «Kimler görebilir» satırı bütünüyle çubuğun altında kalır (yarım
   harf yok). --fh = 320 + c3 268 + 8 + Kaydet 36 + 8 = 640. */
.bhv { container-type: inline-size; --H: 456px; --hd: 68px; --tb: 46px; --vis: calc(var(--H) - 12px - var(--hd) - var(--tb)); --fh: 640px;
  --bhv-ok: #047857; --bhv-ok-50: #ecfdf5; --bhv-ok-100: #d1fae5; --bhv-ok-800: #065f46; --bhv-am: #d97706;
  --bhv-spring: cubic-bezier(.34, 1.56, .64, 1); --bhv-scroll: cubic-bezier(.32, .12, .2, 1); }
.bhv svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bhv-x { display: grid; min-width: 0; }
.bhv-x > * { grid-area: 1 / 1; min-width: 0; }

/* ── sahne: iki telefon ── */
.bhv-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; height: var(--H); }
.bhv-ph { position: relative; flex: none; padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 22, 38, .2), 0 24px 44px -24px rgba(11, 36, 64, .7); }
.bhv-ph--t { width: 300px; height: var(--H); transition: opacity .45s var(--ui-ease), scale .5s var(--ui-ease), translate .5s var(--ui-ease); }
.bhv-ph--v { width: 264px; height: 420px; opacity: .6; scale: .97; transition: opacity .5s var(--ui-ease), scale .55s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.bhv-sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #f5f6f8; }
.bhv-sc--v { background: #f7f7f9; }

/* durum çubuğu (saat · ada · sinyal, wi-fi, pil) */
.bhv-sb { position: absolute; z-index: 6; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; color: #0b1526; pointer-events: none; }
.bhv-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bhv-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.bhv-sbi { display: flex; align-items: center; gap: 3px; }
.bhv-sbi svg { width: 11px; height: 11px; stroke-width: 2.4; }
.bhv-sbi .bhv-bat { width: 16px; height: 12px; }

/* ══ ÖĞRETMEN UYGULAMASI ══ */
.bhv-v { position: absolute; inset: 0; transition: opacity .38s var(--ui-ease), scale .5s var(--ui-ease); }
.bhv-list { opacity: 0; scale: 1.02; }
.bhv-hd { position: absolute; z-index: 3; inset: 0 0 auto; height: var(--hd); display: flex; align-items: center; gap: 7px; padding: 24px 9px 0;
  background: linear-gradient(180deg, #e3eaf4 0%, #eef2f8 70%, #f2f5f9 100%); box-shadow: inset 0 -1px 0 #d9e0ea; }
.bhv-ib { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #273246;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .08), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bhv-ib svg { width: 15px; height: 15px; }
.bhv-ib--bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #fff; }
.bhv-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(16, 37, 64, .55); }
.bhv-tt { flex: 1; min-width: 0; line-height: 1.2; }
.bhv-tt b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; color: #121a2b; }
.bhv-tt span { display: block; margin-top: 1px; font-size: 10px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; }
.bhv-pg { position: absolute; left: 0; right: 0; top: var(--hd); bottom: var(--tb); overflow: hidden; }

/* form: kayan içerik (blok yükseklikleri sabit → --fh) */
.bhv-scr { padding: 8px 8px 8px; translate: 0 0; transition: translate .9s var(--bhv-scroll) .08s; }
.bhv-yt { display: flex; align-items: center; gap: 7px; height: 30px; margin-bottom: 8px; padding: 0 10px; border-radius: 10px; background: #e8eff8; color: var(--navy); font-size: 11px; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(20, 61, 107, .08); }
.bhv-yt svg { flex: none; width: 13px; height: 13px; }
.bhv-card { position: relative; margin-bottom: 8px; border-radius: 13px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 22px -18px rgba(16, 37, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bhv-lbl { display: block; height: 14px; margin-bottom: 6px; font-size: 10.5px; font-weight: 800; line-height: 14px; color: #3f3f46; white-space: nowrap; }
.bhv-c1 { height: 80px; padding: 12px 10px; }
.bhv-sent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bhv-sn { position: relative; display: grid; place-items: center; height: 36px; border-radius: 10px; background: #fff; color: #3f3f46; font-size: 12px; font-weight: 800; letter-spacing: -.005em;
  box-shadow: inset 0 0 0 1px #e4e4e7; transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), box-shadow .25s var(--ui-ease); }
.bhv-sn--neu { background: #f4f4f5; color: #18181b; box-shadow: inset 0 0 0 1px transparent; }

.bhv-c2 { height: 178px; padding: 10px; }
.bhv-c2 .bhv-lbl { margin-bottom: 5px; }
.bhv-lbl--2 { margin-top: 9px; }
.bhv-sel, .bhv-ta { position: relative; display: flex; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; transition: box-shadow .25s var(--ui-ease); }
.bhv-sel { align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 11px; font-size: 12px; font-weight: 600; color: #18181b; }
.bhv-sel .bhv-x { flex: 1; }
.bhv-sel .bhv-x > * { white-space: nowrap; overflow: hidden; }
.bhv-chev { flex: none; width: 14px; height: 14px; color: #52525b; }
.bhv-ph0 { color: #71717a; font-weight: 500; transition: opacity .2s var(--ui-ease); }
.bhv-kat { opacity: 0; translate: 0 4px; transition: opacity .25s var(--ui-ease), translate .3s var(--ui-ease); }
.bhv-ta { height: 77px; padding: 7px 10px; align-items: flex-start; font-size: 11.5px; font-weight: 600; line-height: 1.42; color: #18181b; }
.bhv-ta .bhv-x { flex: 1; }
.bhv-ta .bhv-ph0 { font-size: 11.5px; }
.bhv-txt { text-wrap: pretty; }
.bhv-w { position: relative; opacity: 0; transition: opacity .1s linear; }
.bhv-w::after { content: ""; position: absolute; right: -2px; top: 1px; bottom: 1px; width: 1.5px; border-radius: 1px; background: var(--navy-soft); opacity: 0; }

.bhv-c3 { height: 268px; padding: 10px 10px 4px; }
.bhv-lbl--k { height: 16px; margin-bottom: 0; line-height: 14px; }
.bhv-lbl--k small { font-size: 10px; font-weight: 600; color: #71717a; }
.bhv-rc { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 2px; box-shadow: inset 0 1px 0 #f1f1f3; }
.bhv-rc:nth-child(2) { box-shadow: none; }
.bhv-cb { position: relative; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; color: #fff;
  box-shadow: inset 0 0 0 1.5px #d4d4d8; transition: background-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease); }
.bhv-cb svg { width: 11px; height: 11px; stroke-width: 3.2; opacity: 0; scale: .4; transition: opacity .2s var(--ui-ease), scale .35s var(--bhv-spring); }
.bhv-rc.is-on .bhv-cb { background: var(--navy-soft); box-shadow: inset 0 0 0 1.5px var(--navy-soft), 0 2px 5px -2px rgba(20, 61, 107, .6); }
.bhv-rc.is-on .bhv-cb svg { opacity: 1; scale: 1; }
.bhv-rc__t { min-width: 0; line-height: 1.2; }
.bhv-rc__t b { display: block; font-size: 11.5px; font-weight: 700; color: #27272a; white-space: nowrap; }
.bhv-rc__t small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: #71717a; white-space: nowrap; }

.bhv-save { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; color: #fff; font-size: 12.5px; font-weight: 800;
  background: linear-gradient(180deg, #1b4b80, var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .22), 0 8px 16px -10px rgba(16, 37, 64, .6); }
.bhv-save svg { width: 14px; height: 14px; stroke-width: 2.8; }

/* kaydırma çubuğu ipucu + kaydıran parmak */
/* çubuk = 324 px iz × 330/640 ≈ 167; yol 324 − 167 = 157 (alt uç 327'de, kesilmez) */
.bhv-thumb { position: absolute; right: 2px; top: 3px; width: 3px; height: 167px; border-radius: 2px; background: rgba(16, 37, 64, .34); opacity: 0;
  transition: translate .9s var(--bhv-scroll) .08s; }
.bhv-sw { position: absolute; z-index: 4; left: 58%; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .75), rgba(226, 233, 243, .5) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); }

/* ── liste: Gözlem · Yazdıklarım ── */
.bhv-ls { padding: 8px; }
.bhv-ls > * { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .5s var(--bhv-spring); transition-delay: calc(.25s + var(--i) * 90ms); }
.bhv-fl { display: flex; align-items: center; gap: 7px; height: 30px; margin-bottom: 8px; padding: 0 10px; border-radius: 10px; background: var(--bhv-ok-50); color: var(--bhv-ok); font-size: 11px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(4, 120, 87, .1); }
.bhv-fl svg { flex: none; width: 13px; height: 13px; stroke-width: 2.4; }
.bhv-new { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-bottom: 8px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 800;
  background: linear-gradient(180deg, #1b4b80, var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -10px rgba(16, 37, 64, .7); }
.bhv-new svg { width: 14px; height: 14px; stroke-width: 2.6; }
.bhv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 30px; margin-bottom: 8px; padding: 3px; border-radius: 10px; background: #ececef; font-size: 11px; font-weight: 800; }
.bhv-seg > * { display: grid; place-items: center; border-radius: 7px; color: #52525b; }
.bhv-seg > b { background: #fff; color: #18181b; box-shadow: 0 1px 2px rgba(16, 37, 64, .1); }
.bhv-lc { border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -18px rgba(16, 37, 64, .35); }
.bhv-lr { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; }
.bhv-lr + .bhv-lr { box-shadow: inset 0 1px 0 #f1f1f3; }
.bhv-li { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px; background: #f4f4f5; color: #3f3f46; }
.bhv-li svg { width: 15px; height: 15px; }
.bhv-li--pos { background: var(--bhv-ok-50); color: var(--bhv-ok); }
.bhv-lr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bhv-lr__t small { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #52525b; font-variant-numeric: tabular-nums; }
.bhv-lr__t b { margin-top: 1px; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #18181b; }
.bhv-lr__k { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.bhv-rz { flex: none; height: 16px; padding: 0 6px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; letter-spacing: .02em; }
.bhv-rz--pos { background: var(--bhv-ok-50); color: var(--bhv-ok); }
.bhv-lr__h { margin-top: 4px; font-size: 11px; font-weight: 800; color: #18181b; }
.bhv-lr__n { margin-top: 3px; font-size: 10.5px; font-weight: 500; line-height: 1.38; color: #3f3f46; text-wrap: pretty; }
.bhv-lr__k + .bhv-lr__n { margin-top: 4px; }
/* liste alt sekme çubuğunun altına sürer: Demir Oral'ın notunun ilk satırı 324–337 px'te (görünen alan 330) — yarım harf
   görünmesin diye kartın içinde son 9 px beyaza söner («Güne başlangıç» 321'de biter, dokunulmaz); kart kenarı kalır */
.bhv-list .bhv-pg::after { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 0; height: 9px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 50%); }

/* alt sekmeler */
.bhv-tabs { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tb); padding: 4px 3px 0;
  background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08), 0 -6px 14px -10px rgba(16, 37, 64, .25); }
.bhv-tabs > span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 36px; color: #3f3f46; font-size: 10px; font-weight: 700; white-space: nowrap; }
.bhv-tabs svg { width: 15px; height: 15px; }
.bhv-tabs em { position: absolute; top: 1px; left: calc(50% + 4px); min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #dc2626; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center;
  box-shadow: 0 0 0 1.5px #fff; }

/* «Gözlem kaydediliyor…» katmanı */
.bhv-busy { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 0 18px; background: rgba(18, 22, 31, .62); opacity: 0; transition: opacity .28s var(--ui-ease); pointer-events: none; }
.bhv-busy__c { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 224px; padding: 15px 12px 14px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 4px rgba(0, 0, 0, .08), 0 24px 40px -16px rgba(0, 0, 0, .55); scale: .9; transition: scale .5s var(--bhv-spring); }
.bhv-busy__c b { margin-top: 10px; font-size: 13px; font-weight: 900; color: #18181b; }
.bhv-busy__c span { margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 1.35; color: #52525b; text-wrap: balance; }
.bhv-spin { width: 28px; height: 28px; color: var(--navy-soft); stroke-width: 3; }
.bhv-spin circle { opacity: .22; }

/* ══ VELİ UYGULAMASI: Gözlem ve görüşmeler (Gözlemler başlığına kaydırılmış) ══ */
.bhv-phd { position: absolute; z-index: 3; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 9px; padding: 24px 10px 0 12px; background: rgba(247, 247, 249, .94);
  box-shadow: 0 1px 0 rgba(16, 37, 64, .05); }
.bhv-pib { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: #18181b; }
.bhv-pib svg { width: 16px; height: 16px; }
.bhv-phd .bhv-ib--bell::after { top: 1px; right: 2px; }
.bhv svg.bhv-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; stroke: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 5px -1px rgba(16, 37, 64, .4); }
.bhv-sp { flex: 1; }
.bhv-pav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12.5px; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px #dfe4ec, 0 1px 2px rgba(16, 37, 64, .08); }
.bhv-ppg { position: absolute; left: 0; right: 0; top: 64px; bottom: var(--tb); padding: 0 8px; overflow: hidden; }
.bhv-gcw { display: flex; flex-direction: column; justify-content: flex-end; height: 92px; overflow: hidden; }
/* sayfa başlık şeridinin altından kayar: üst kenarda kısa, yumuşak geçiş. «Karar / çıktı» etiketi geçişin altında tam okunur
   (kartın alt boşlukları 4 px kısaltıldı; kart yüksekliği ve liste konumu aynı) */
.bhv-ppg::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(#f7f7f9 20%, rgba(247, 247, 249, 0)); pointer-events: none; }
.bhv-gc { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 8px; border-radius: 0 0 13px 13px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .05); }
.bhv-gc__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #f1ecfd; color: #6d3fd6; }
.bhv-gc__i svg { width: 14px; height: 14px; }
.bhv-gc__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bhv-gc__t b { font-size: 12px; font-weight: 700; color: #18181b; }
.bhv-gc__t small { margin-top: 1px; font-size: 10px; font-weight: 500; line-height: 1.35; color: #52525b; }
.bhv-gc__k { margin: 5px 0 4px; padding: 5px 8px 4px; border-radius: 8px; background: #fafafa; font-size: 10.5px; font-weight: 700; line-height: 1.36; color: #3f3f46; }
.bhv-gc__k i { display: block; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #52525b; }
.bhv-pt { display: flex; align-items: baseline; justify-content: space-between; height: 20px; margin: 12px 2px 6px; }
.bhv-pt > b { font-size: 14px; font-weight: 800; letter-spacing: -.015em; color: #18181b; }
.bhv-pt .bhv-x { justify-items: end; font-size: 10px; font-weight: 700; color: #52525b; font-variant-numeric: tabular-nums; }
.bhv-k3 { opacity: 0; }
.bhv-pl { border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -18px rgba(16, 37, 64, .35); }
.bhv-po + .bhv-po { box-shadow: inset 0 1px 0 #f1f1f3; }
.bhv-po__h { display: flex; align-items: center; gap: 9px; padding: 8px 9px 7px; }
.bhv-pi { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bhv-ok-50); color: var(--bhv-ok); }
.bhv-pi svg { width: 14px; height: 14px; }
.bhv-po__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bhv-po__t > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bhv-po__t b { min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: #18181b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhv-po__t small { margin-top: 1px; font-size: 10px; font-weight: 500; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bhv-po__n { display: block; padding: 6px 10px 8px; background: #fafafa; font-size: 10.5px; font-weight: 700; line-height: 1.38; color: #3f3f46; text-wrap: pretty; }
/* yeni satır: yüksekliği 0fr → 1fr açılır (listede yerini iterek), açık yeşil vurgu söner */
.bhv-po--new { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--bhv-scroll); }
.bhv-po__in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .35s var(--ui-ease); }
.bhv-tabs--v { padding: 4px 6px 0; }
.bhv-tabs--v > span { font-size: 10px; letter-spacing: -.02em; }
.bhv-tabs--v em { background: #dc2626; }
.bhv-tag { position: absolute; z-index: 8; left: 50%; bottom: -10px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px 0 7px; border-radius: 999px; translate: -50% 0;
  background: var(--sun); color: #2a1c00; font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45); }
.bhv-tag svg { width: 11px; height: 11px; stroke-width: 2.4; }

/* ── dokunuş (hedefin içinde, ortada) ── */
.bhv-tap { position: absolute; z-index: 5; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .75), rgba(226, 233, 243, .5) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); }
.bhv-tap i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(16, 37, 64, .28); opacity: 0; }
.bhv-tap--kat { left: 72%; }
.bhv-tap--ta { left: 30%; top: 26px; }
@keyframes bhv-tap { 0% { opacity: 0; transform: translate(10px, 14px); scale: 1.1; } 28% { opacity: 1; transform: none; scale: 1; } 42% { scale: .76; } 58% { scale: 1; opacity: 1; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes bhv-ring { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.4; } }
@keyframes bhv-press { 45% { scale: .94; } }
@keyframes bhv-caret { from, to { opacity: 1; } }
@keyframes bhv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bhv-swipe { 0% { opacity: 0; translate: 0 300px; scale: .85; } 14% { opacity: 1; scale: 1; translate: 0 300px; } 84% { opacity: 1; translate: 0 70px; } 100% { opacity: 0; translate: 0 70px; } }
@keyframes bhv-thumb { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bhv-pop { 0%, 100% { scale: 1; } 45% { scale: 1.18; } }
@keyframes bhv-hl { 0% { background-color: #e3f6ea; } 100% { background-color: #fff; } }
@keyframes bhv-don { to { rotate: 360deg; } }

/* ══ ADIMLAR ══ */
/* s1: Olumlu (Nötr seçimi kalkar) */
.bhv.s1:not(.s2) .bhv-tap--pos { animation: bhv-tap .95s var(--ui-ease) .05s both; }
.bhv.s1:not(.s2) .bhv-tap--pos i { animation: bhv-ring .55s ease-out .4s both; }
.bhv.s1:not(.s2) .bhv-sn--pos { animation: bhv-press .3s var(--ui-ease) .3s; }
.bhv.s1 .bhv-sn--pos { background: var(--bhv-ok-50); color: var(--bhv-ok-800); box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent; transition-delay: .38s; }
.bhv.s1 .bhv-sn--neu { background: #fff; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e4e7; transition-delay: .38s; }
/* s2: Kategori */
.bhv.s2:not(.s3) .bhv-tap--kat { animation: bhv-tap .95s var(--ui-ease) .05s both; }
.bhv.s2:not(.s3) .bhv-tap--kat i { animation: bhv-ring .55s ease-out .4s both; }
.bhv.s2:not(.s3) .bhv-sel { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .35s; }
.bhv.s2 .bhv-sel .bhv-ph0 { opacity: 0; transition-delay: .55s; }
.bhv.s2 .bhv-kat { opacity: 1; translate: 0 0; transition-delay: .62s; }
/* s3: not yazılır (kelime kelime, imleç yazının sonunda) */
.bhv.s3:not(.s4) .bhv-tap--ta { animation: bhv-tap .8s var(--ui-ease) both; }
.bhv.s3:not(.s4) .bhv-tap--ta i { animation: bhv-ring .5s ease-out .3s both; }
.bhv.s3:not(.s4) .bhv-ta { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .3s; }
.bhv.s3 .bhv-ta .bhv-ph0 { opacity: 0; transition-delay: .45s; }
.bhv.s3 .bhv-w { opacity: 1; transition-delay: calc(.5s + var(--w) * 110ms); }
.bhv.s3:not(.s4) .bhv-w::after { animation: bhv-caret .11s steps(1, end) calc(.5s + var(--w) * 110ms); }
.bhv.s3:not(.s4) .bhv-w:last-child::after { animation: bhv-blink .7s steps(1, end) calc(.5s + var(--w) * 110ms) 3; }
/* s4: «Kimler görebilir»e kaydırılır; hazır işaretli dört alıcı sırayla vurgulanır */
.bhv.s4 .bhv-scr { translate: 0 calc(var(--vis) - var(--fh)); }
.bhv.s4:not(.s5) .bhv-sw { animation: bhv-swipe .95s var(--bhv-scroll) .02s both; }
.bhv.s4:not(.s5) .bhv-thumb { translate: 0 157px; animation: bhv-thumb 1.1s ease .05s both; }
.bhv.s4 .bhv-thumb { translate: 0 157px; }
.bhv.s4:not(.s5) .bhv-rc.is-on .bhv-cb { animation: bhv-pop .4s var(--ui-ease) calc(.95s + var(--i) * 90ms); }
/* s5: Veli işaretlenir (aile kutusu amber) */
.bhv.s5:not(.s6) .bhv-tap--pa { animation: bhv-tap .95s var(--ui-ease) .05s both; }
.bhv.s5:not(.s6) .bhv-tap--pa i { animation: bhv-ring .55s ease-out .4s both; }
.bhv.s5 .bhv-rc--pa .bhv-cb { background: var(--bhv-am); box-shadow: inset 0 0 0 1.5px var(--bhv-am), 0 2px 5px -2px rgba(217, 119, 6, .6); transition-delay: .38s; }
.bhv.s5 .bhv-rc--pa .bhv-cb svg { opacity: 1; scale: 1; transition-delay: .38s; }
/* s6: Kaydet → «Gözlem kaydediliyor…» */
.bhv.s6:not(.s7) .bhv-tap--save { animation: bhv-tap .95s var(--ui-ease) .05s both; }
.bhv.s6:not(.s7) .bhv-tap--save i { animation: bhv-ring .55s ease-out .4s both; }
.bhv.s6:not(.s7) .bhv-save { animation: bhv-press .3s var(--ui-ease) .3s; }
.bhv.s6:not(.s7) .bhv-busy { opacity: 1; transition-delay: .55s; }
.bhv.s6:not(.s7) .bhv-busy__c { scale: 1; transition-delay: .55s; }
.bhv.s6:not(.s7) .bhv-spin { animation: bhv-don .8s linear infinite; }
/* s7: listeye dönüş — «Gözlem kaydedildi.», yeni satır en üstte */
.bhv.s7 .bhv-form { opacity: 0; }
.bhv.s7 .bhv-list { opacity: 1; scale: 1; }
.bhv.s7 .bhv-ls > * { opacity: 1; translate: 0 0; }
.bhv.s7:not(.s8) .bhv-lr--can { animation: bhv-hl 1.6s ease .75s both; }
/* s8: velinin telefonu — yeni gözlem «Gözlemler»in başında */
.bhv.s8 .bhv-ph--v { opacity: 1; scale: 1; }
.bhv.s8 .bhv-po--new { grid-template-rows: 1fr; transition-delay: .45s; }
.bhv.s8 .bhv-po__in { opacity: 1; transition-delay: .7s; }
.bhv.s8 .bhv-po--new .bhv-po__h, .bhv.s8 .bhv-po--new .bhv-po__n { animation: bhv-hl 1.8s ease 1s both; }
.bhv.s8 .bhv-po--new .bhv-po__n { animation-name: none; }
.bhv.s8 .bhv-k2 { opacity: 0; transition: opacity .25s var(--ui-ease) .5s; }
.bhv.s8 .bhv-k3 { opacity: 1; transition: opacity .25s var(--ui-ease) .6s; }

/* ══ DAR KAP: tek telefon; velinin telefonu s8'de önüne kayar ══ */
@container (max-width: 599px) {
  .bhv-stage { display: block; }
  .bhv-ph--t { width: min(330px, 100%); margin: 0 auto; }
  .bhv-ph--v { position: absolute; z-index: 5; top: 18px; right: max(0px, calc(50% - 165px)); width: min(266px, 84%); opacity: 0; scale: 1; translate: 40px 0; }
  .bhv.s8 .bhv-ph--v { translate: 0 0; }
  .bhv.s8 .bhv-ph--t { opacity: .42; scale: .97; translate: -6px 0; }
}