/* hame.css — Hâme: kamış kalem (katmanlı SVG, hame.js çizer)
   Katmanlar ayrı oynar: .hm-tum (zıplama, eğilme, yazma), .hm-govde (nefes,
   salınma), göz kapağı (kırpma), kaşlar, ağızlar, kollar, damla, parıltı, izler.
   Kural: her duruşun DURAĞAN son hâli düz özellikle yazılır, canlandırma
   oraya "from"dan gelir. Böylece "Hareketleri kapat" (kökte .hm-durgun)
   bütün animasyonları silince Hâme yine doğru duruşta görünür.
   Canlandırmalar varsayılan olarak açık (Etik Kurul'daki hocanın kararı). */

:root{
  --hm-kamis:#D9B77A; --hm-kamis-koyu:#8A6414; --hm-uc:#EBD09A; --hm-isik:#F4E3BC;
  --hm-murekkep:#1B2A4A; --hm-iz:#1B2A4A; --hm-altin:#C79A2E; --hm-golge:rgba(4,44,83,.16);
  --hm-yanak:#E58E6F; --hm-balon-cizgi:#B8975A;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --hm-iz:#CFE1F5; --hm-altin:#F2C14E; --hm-golge:rgba(0,0,0,.38); --hm-balon-cizgi:#D9B76A; }
}
:root[data-theme="dark"]{ --hm-iz:#CFE1F5; --hm-altin:#F2C14E; --hm-golge:rgba(0,0,0,.38); --hm-balon-cizgi:#D9B76A; }

.hm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── sayfa içi Hâme ── */
.hame{display:flex;align-items:center;gap:.7rem;margin:.6rem 0}
.hame .hame-svg{width:76px;height:76px;flex:none;overflow:visible}
.hame-soz{background:var(--panel);border:1px solid var(--cizgi);border-radius:14px;padding:.55rem .9rem;position:relative;font-size:.98rem;min-width:0}
.hame-soz:before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);transform:translateY(-50%) rotate(45deg)}

/* ── renkler ── */
.hm-kamis{fill:var(--hm-kamis);stroke:var(--hm-kamis-koyu);stroke-width:1.8}
.hm-yan{fill:var(--hm-kamis-koyu);opacity:.22}
.hm-isik{stroke:var(--hm-isik);stroke-width:2.4;stroke-linecap:round;opacity:.8;fill:none}
.hm-bogum{fill:none;stroke:var(--hm-kamis-koyu);stroke-width:1.8;stroke-linecap:round}
.hm-uc-ic{fill:var(--hm-uc);stroke:var(--hm-kamis-koyu);stroke-width:1.5;stroke-linejoin:round}
.hm-murekkep{fill:var(--hm-murekkep)}
.hm-yarik{stroke:var(--hm-kamis-koyu);stroke-width:1.1;stroke-linecap:round}
.hm-kol-cizgi{fill:none;stroke:var(--hm-kamis-koyu);stroke-width:2.6;stroke-linecap:round}
.hm-el{fill:var(--hm-kamis);stroke:var(--hm-kamis-koyu);stroke-width:1.3}
.hm-akgoz{fill:#FFFDF6;stroke:var(--hm-kamis-koyu);stroke-width:.8}
.hm-bebek circle{fill:var(--hm-murekkep)}
.hm-bebek .hm-pirilti{fill:#fff}
.hm-kapak{fill:var(--hm-kamis);stroke:var(--hm-kamis-koyu);stroke-width:.8}
.hm-kas{fill:none;stroke:var(--hm-kamis-koyu);stroke-width:1.6;stroke-linecap:round}
.hm-yanak{fill:var(--hm-yanak);opacity:.4}
.hm-agiz{fill:none;stroke:var(--hm-murekkep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hm-agiz.genis,.hm-agiz.o{fill:var(--hm-murekkep);stroke-width:1.2}
.hm-golge{fill:var(--hm-golge)}
.hm-damla{fill:var(--hm-iz);opacity:0}
.hm-parilti path{fill:var(--hm-altin);opacity:0}
.hm-elif{fill:none;stroke:var(--hm-iz);stroke-width:4.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hm-iz{fill:none;stroke:var(--hm-iz);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hm-dusunce{opacity:0}
.hm-bulut{fill:var(--panel);stroke:var(--cizgi-koyu);stroke-width:1}
.hm-nokta{fill:var(--murekkep-2)}

/* ── dönme noktaları ── */
.hm-tum,.hm-govde{transform-box:view-box;transform-origin:60px 114px}
.hm-kol.sol{transform-box:view-box;transform-origin:48px 64px}
.hm-kol.sag{transform-box:view-box;transform-origin:72px 64px}
.hm-kapak,.hm-kas,.hm-parilti path,.hm-golge,.hm-nokta{transform-box:fill-box;transform-origin:50% 50%}
.hm-kapak{transform-origin:50% 0;transform:scaleY(0)}

/* ── her duruşta: göz kırpma ve nefes ── */
.hm-kapak{animation:hmKirp 4.6s linear infinite;animation-delay:var(--hm-g,0s)}
@keyframes hmKirp{0%,91%{transform:scaleY(0)}94.5%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
.hm-govde{animation:hmNefes 2.8s ease-in-out infinite}
@keyframes hmNefes{0%,100%{transform:none}50%{transform:scale(1.018,.985)}}

/* selam: hafif salınır, sağ eliyle selam verir */
.hm-selam .hm-agiz.gul{opacity:1}
.hm-selam .hm-govde{animation:hmSalla 3.4s ease-in-out infinite}
@keyframes hmSalla{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg) scale(1.012,.988)}}
.hm-selam .hm-kol.sag{animation:hmElSalla 3.4s ease-in-out .3s infinite}
@keyframes hmElSalla{0%{transform:none}10%{transform:rotate(-118deg)}17%{transform:rotate(-96deg)}24%{transform:rotate(-124deg)}31%{transform:rotate(-98deg)}38%{transform:rotate(-116deg)}50%,100%{transform:none}}

/* aferin: iki kez zıplar, kollar kalkar, parıltı çıkar, yanına elif yazılır */
.hm-aferin .hm-agiz.genis{opacity:1}
.hm-aferin .hm-tum{animation:hmHopla .7s cubic-bezier(.3,.7,.4,1) 2}
@keyframes hmHopla{0%,100%{transform:none}18%{transform:scale(1.07,.9)}48%{transform:translateY(-13px) scale(.96,1.05) rotate(3deg)}75%{transform:scale(1.04,.95)}}
.hm-aferin .hm-golge{animation:hmGolge .7s cubic-bezier(.3,.7,.4,1) 2}
@keyframes hmGolge{48%{transform:scaleX(.65);opacity:.5}}
.hm-aferin .hm-kol.sol{transform:rotate(40deg);animation:hmKolSol 1.4s ease-out both}
.hm-aferin .hm-kol.sag{transform:rotate(-40deg);animation:hmKolSag 1.4s ease-out both}
@keyframes hmKolSol{0%{transform:none}25%{transform:rotate(100deg)}45%{transform:rotate(80deg)}65%{transform:rotate(100deg)}100%{transform:rotate(40deg)}}
@keyframes hmKolSag{0%{transform:none}25%{transform:rotate(-100deg)}45%{transform:rotate(-80deg)}65%{transform:rotate(-100deg)}100%{transform:rotate(-40deg)}}
.hm-aferin .hm-parilti path{opacity:1;animation:hmParilda 1.5s ease-out .15s both}
.hm-aferin .hm-parilti path+path{animation-delay:.4s}
@keyframes hmParilda{0%{opacity:0;transform:scale(.3) rotate(0)}30%{opacity:1;transform:scale(1.2) rotate(25deg)}75%{opacity:1;transform:scale(1) rotate(40deg)}100%{opacity:0;transform:scale(.8) rotate(50deg)}}
.hm-aferin .hm-elif{stroke-dashoffset:0;opacity:1;animation:hmCiz .75s ease-out .5s both}
@keyframes hmCiz{0%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* bak (yanlış): yana eğilir, kaşlar kalkar, ağız buruk, uçtan bir damla düşer */
.hm-bak .hm-agiz.uzgun{opacity:1}
.hm-bak .hm-tum{transform:rotate(-9deg);animation:hmEgil .6s ease-out both}
@keyframes hmEgil{0%{transform:none}60%{transform:rotate(-11deg)}100%{transform:rotate(-9deg)}}
.hm-bak .hm-kas.sol{transform:rotate(-13deg) translateY(-.6px)}
.hm-bak .hm-kas.sag{transform:rotate(13deg) translateY(-.6px)}
.hm-bak .hm-bebek{transform:translate(-.6px,1.2px)}
.hm-bak .hm-kapak{animation-name:hmKirpYari}
@keyframes hmKirpYari{0%,91%{transform:scaleY(.32)}94.5%{transform:scaleY(1)}98%,100%{transform:scaleY(.32)}}
.hm-bak .hm-kol.sol{transform:rotate(-22deg);animation:hmKolDus .6s ease-out both}
.hm-bak .hm-kol.sag{transform:rotate(22deg);animation:hmKolDus .6s ease-out both}
@keyframes hmKolDus{0%{transform:none}}
.hm-bak .hm-damla{opacity:1;transform:translateY(3px);animation:hmDamla 1.7s ease-in .55s both}
@keyframes hmDamla{0%{opacity:0;transform:translateY(-3px) scale(.6)}18%{opacity:1;transform:none}70%{opacity:1;transform:translateY(5px)}100%{opacity:0;transform:translateY(8px)}}

/* düşün (ipucu): ucunu yere tıklatır, gözler yukarıda, "…" bulutu */
.hm-dusun .hm-agiz.o{opacity:1}
.hm-dusun .hm-tum{animation:hmTikla 2.2s ease-in-out infinite}
@keyframes hmTikla{0%,44%,100%{transform:none}8%,22%,36%{transform:translateY(-3px) rotate(-3deg)}14%,28%,42%{transform:none}}
.hm-dusun .hm-bebek{transform:translate(1.1px,-1.4px)}
.hm-dusun .hm-kas.sag{transform:translateY(-1.3px) rotate(6deg)}
.hm-dusun .hm-kol.sag{transform:rotate(-62deg);animation:hmKolDus .5s ease-out both}
.hm-dusun .hm-dusunce{opacity:1;animation:hmBelir .45s ease-out .2s both}
@keyframes hmBelir{0%{opacity:0}100%{opacity:1}}
.hm-dusun .hm-nokta{animation:hmNokta 1.2s ease-in-out infinite}
.hm-dusun .hm-nokta.n2{animation-delay:.2s}
.hm-dusun .hm-nokta.n3{animation-delay:.4s}
@keyframes hmNokta{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-1.6px)}}

/* yaz (mektup, karne): eğik durur, sağdan sola bir satır yazar (Osmanlıca gibi) */
.hm-yaz .hm-agiz.gul{opacity:1}
.hm-yaz .hm-tum{transform:translateX(-21px) rotate(10deg);animation:hmYaz 2.8s ease-in-out infinite}
@keyframes hmYaz{0%{transform:translateX(12px) rotate(10deg)}18%{transform:translateX(3px) translateY(-1px) rotate(11deg)}36%{transform:translateX(-6px) rotate(9deg)}54%{transform:translateX(-15px) translateY(-1px) rotate(11deg)}70%{transform:translateX(-21px) rotate(10deg)}82%{transform:translateX(-14px) translateY(-6px) rotate(6deg)}100%{transform:translateX(12px) rotate(10deg)}}
.hm-yaz .hm-iz{stroke-dashoffset:0;opacity:1;animation:hmIz 2.8s linear infinite}
@keyframes hmIz{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.hm-yaz .hm-bebek{transform:translate(-1px,1.3px)}
.hm-yaz .hm-kol.sag{transform:rotate(-25deg)}
.hm-yaz .hm-kol.sol{transform:rotate(18deg)}

/* ── köşe: cevaptan sonra sol alttan yükselir, konuşur, iner ──
   Dış kap yerinde durur (ölçü için), yalnız içi kayar. */
.hame-kose{position:fixed;left:max(.4rem,env(safe-area-inset-left));bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + .4rem);z-index:70;pointer-events:none;max-width:min(92vw,25rem)}
.hk-ic{display:flex;align-items:flex-end;gap:.3rem;animation:hkCik .55s cubic-bezier(.3,1.5,.5,1) both}
.hame-kose.iniyor .hk-ic{animation:hkIn .45s ease-in both}
.hk-govde{width:120px;height:120px;flex:none}
.hk-govde .hame-svg{width:100%;height:100%;overflow:visible;display:block}
.hk-balon{position:relative;margin-bottom:56px;background:var(--panel);color:var(--murekkep);border:2px solid var(--hm-balon-cizgi);border-radius:14px;padding:.55rem .8rem;font-weight:600;font-size:.98rem;line-height:1.35;box-shadow:0 6px 18px rgba(4,44,83,.2);animation:hkBalon .35s .25s both}
.hk-balon::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--panel);border-left:2px solid var(--hm-balon-cizgi);border-bottom:2px solid var(--hm-balon-cizgi);transform:rotate(45deg)}
@keyframes hkCik{from{transform:translateY(140%)}to{transform:none}}
@keyframes hkIn{to{transform:translateY(140%);opacity:0}}
@keyframes hkBalon{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* "Sonraki" düğmesi altta kalacaksa ve sayfa kaymıyorsa köşe üste alınır. */
.hame-kose.ust{bottom:auto;top:calc(max(.5rem,env(safe-area-inset-top)) + .4rem)}
.hame-kose.ust .hk-ic{align-items:center;animation-name:hkCikUst}
.hame-kose.ust.iniyor .hk-ic{animation-name:hkInUst}
.hame-kose.ust .hk-balon{margin-bottom:0}
.hame-kose.ust .hk-balon::before{bottom:auto;top:50%;margin-top:-7px}
@keyframes hkCikUst{from{transform:translateY(-140%)}to{transform:none}}
@keyframes hkInUst{to{transform:translateY(-140%);opacity:0}}
/* Telefonda küçük: metni daha az örter; dokununca hemen iner. */
@media (max-width:899px){
  .hame-kose{pointer-events:auto;cursor:pointer;max-width:min(94vw,21rem)}
  .hk-ic{gap:.15rem}
  .hk-govde{width:68px;height:68px}
  .hk-balon{margin-bottom:30px;padding:.4rem .65rem;font-size:.9rem;line-height:1.3}
}
@media (min-width:900px){.hame-kose{bottom:1.2rem}}

/* ── hareket tercihi ── */
.hm-hareket-dugme{background:none;border:none;padding:0;color:var(--vurgu);text-decoration:underline;font-size:inherit}
:root.hm-durgun .hame *,:root.hm-durgun .hame-kose,:root.hm-durgun .hame-kose *{animation:none!important;transition:none!important}
@media print{.hame-kose{display:none!important}}