

.arin-maskot {
  --am-kuzey: #38B6FF;          
  --am-vurgu: #0769A0;          
  --am-ink: #14213D;
  --am-muted: #56627A;
  --am-yuzey: #FFFFFF;
  --am-yuzey-alt: #F4F6F9;
  --am-cizgi: #E4E8EE;
  --am-boy: 84px;
  --am-sag: 20px;
  --am-alt: 20px;
  --am-kacis: 0px;
  position: fixed;
  z-index: var(--arin-maskot-z, 900);
  right: calc(var(--am-sag) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--am-alt) + var(--am-kacis) + env(safe-area-inset-bottom, 0px));
  width: var(--am-boy);
  height: var(--am-boy);
  font-family: inherit;
  color: var(--am-ink);
  -webkit-tap-highlight-color: transparent;
}
.arin-maskot[data-marka="dijital"] { --am-kuzey: #2F6BFF; --am-vurgu: #2F6BFF; }
.arin-maskot[data-marka="guard"]   { --am-kuzey: #F07A1F; --am-vurgu: #B9520B; }
.arin-maskot[data-marka="agent"]   { --am-kuzey: #16B07E; --am-vurgu: #0B7A57; }
.arin-maskot[data-marka="kasa"]    { --am-kuzey: #E8B100; --am-vurgu: #8A6300; }

.arin-maskot *, .arin-maskot *::before, .arin-maskot *::after { box-sizing: border-box; }


.arin-maskot__dugme {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.arin-maskot__dugme:focus { outline: none; }
.arin-maskot__dugme:focus-visible { outline: 3px solid var(--am-vurgu); outline-offset: 3px; }
.arin-maskot__sahne { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.arin-maskot .am-svg { display: block; width: 100%; height: 100%; overflow: visible; }


.arin-maskot .am-percem-sekil, .arin-maskot .am-rozet-kuzey, .arin-maskot .am-pirilti { fill: var(--am-kuzey); }
.arin-maskot .am-zipla, .arin-maskot .am-nefes { transform-box: view-box; transform-origin: 50px 92px; }
.arin-maskot .am-golge { transform-box: view-box; transform-origin: 50px 95px; }
.arin-maskot .am-percem { transform-box: view-box; transform-origin: 50px 30px; }
.arin-maskot .am-kol--sag { transform-box: view-box; transform-origin: 81px 60px; }
.arin-maskot .am-kol--sol { transform-box: view-box; transform-origin: 19px 60px; }
.arin-maskot .am-goz { transform-box: fill-box; transform-origin: center; }
.arin-maskot .am-pirilti { transform-box: fill-box; transform-origin: center; }
.arin-maskot .am-bebek { transform: translate(var(--am-gx, 0px), var(--am-gy, 0px)); }
.arin-maskot .am-yuz { transform: translate(var(--am-yx, 0px), var(--am-yy, 0px)); }
.arin-maskot .am-z text { font-family: Manrope, "Segoe UI", Arial, sans-serif; }


.arin-maskot--mutlu .am-gozler, .arin-maskot--uyku .am-gozler { opacity: 0; }
.arin-maskot--mutlu .am-gozler-mutlu { opacity: 1; }
.arin-maskot--uyku .am-gozler-uyku { opacity: 1; }
.arin-maskot--mutlu .am-agiz, .arin-maskot--uyku .am-agiz { opacity: 0; }
.arin-maskot--mutlu .am-agiz-acik { opacity: 1; }
.arin-maskot--uyku .am-agiz-o { opacity: 1; }
.arin-maskot--mutlu .am-yanak { opacity: .85; }
.arin-maskot--uyku .am-z { opacity: 1; }
.arin-maskot--uyku .am-percem { transform: rotate(24deg); }
.arin-maskot--yakin .am-goz { transform: scale(1.07); }
.arin-maskot--kirp .am-goz { transform: scaleY(.12); }


.arin-maskot--hareketli .am-goz { transition: transform .09s ease-out; }
.arin-maskot--hareketli .am-bebek { transition: transform .22s ease-out; }
.arin-maskot--hareketli .am-yuz { transition: transform .35s ease-out; }
.arin-maskot--hareketli .am-gozler, .arin-maskot--hareketli .am-gozler-mutlu,
.arin-maskot--hareketli .am-gozler-uyku, .arin-maskot--hareketli .am-agiz,
.arin-maskot--hareketli .am-agiz-acik, .arin-maskot--hareketli .am-agiz-o { transition: opacity .12s; }
.arin-maskot--hareketli .am-nefes { animation: am-nefes 3.6s ease-in-out infinite; }
.arin-maskot--hareketli .am-golge { animation: am-golge 3.6s ease-in-out infinite; }
.arin-maskot--hareketli .am-percem { animation: am-percem 3.6s ease-in-out -.5s infinite; }
.arin-maskot--hareketli.arin-maskot--zipla .am-zipla { animation: am-zipla .72s cubic-bezier(.3,.6,.3,1); }
.arin-maskot--hareketli.arin-maskot--salla .am-kol--sag { animation: am-salla 1.5s ease-in-out; }
.arin-maskot--hareketli.arin-maskot--mutlu .am-percem { animation: am-percem-hizli .5s ease-in-out 2; }
.arin-maskot--hareketli.arin-maskot--mutlu .am-pirilti,
.arin-maskot--hareketli.arin-maskot--pirilti .am-pirilti { animation: am-pirilti 1.1s ease-out; }
.arin-maskot--hareketli.arin-maskot--uyku .am-nefes { animation-duration: 5.6s; }
.arin-maskot--hareketli.arin-maskot--uyku .am-percem { animation: am-percem-uyku 5.6s ease-in-out infinite; }
.arin-maskot--hareketli.arin-maskot--uyku .am-z text { opacity: 0; animation: am-z 3.3s ease-out infinite; }
.arin-maskot--hareketli.arin-maskot--uyku .am-z text:nth-child(2) { animation-delay: 1.1s; }
.arin-maskot--hareketli.arin-maskot--uyku .am-z text:nth-child(3) { animation-delay: 2.2s; }
.arin-maskot--hareketli.arin-maskot--giris .arin-maskot__sahne { animation: am-giris .8s cubic-bezier(.2,.8,.3,1.15); }
.arin-maskot--hareketli .arin-maskot__sahne { transition: transform .3s cubic-bezier(.3,.7,.2,1); }
.arin-maskot--hareketli.arin-maskot--kaydir .arin-maskot__sahne { transform: translateY(14%) scale(.92); }
.arin-maskot--hareketli { transition: bottom .3s ease, transform .4s cubic-bezier(.3,.7,.2,1); }
.arin-maskot--hareketli .arin-maskot__balon { animation: am-balon .2s ease-out; }
.arin-maskot--durdur, .arin-maskot--durdur * { animation-play-state: paused !important; }

@keyframes am-nefes {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-1.6px) scale(.985, 1.022); }
}
@keyframes am-golge { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.93); } }
@keyframes am-percem {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-7deg); }
  65% { transform: rotate(4deg); }
}
@keyframes am-percem-hizli { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(9deg); } }
@keyframes am-percem-uyku { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(27deg); } }
@keyframes am-zipla {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-13px) scale(.95, 1.06); }
  70% { transform: translateY(0) scale(1.07, .92); }
  85% { transform: translateY(0) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes am-salla {
  0%, 100% { transform: rotate(0deg); }
  14% { transform: rotate(-118deg); }
  30% { transform: rotate(-90deg); }
  46% { transform: rotate(-122deg); }
  62% { transform: rotate(-90deg); }
  78% { transform: rotate(-115deg); }
}
@keyframes am-pirilti {
  0% { opacity: 0; transform: scale(.3) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  100% { opacity: 0; transform: scale(.6) rotate(90deg); }
}
@keyframes am-z {
  0% { opacity: 0; transform: translate(0, 4px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(5px, -7px); }
}
@keyframes am-giris {
  0% { transform: translateY(120%) scale(.9); }
  60% { transform: translateY(-7%) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes am-balon { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }


.arin-maskot__selam {
  position: absolute;
  right: calc(100% - 4px);
  bottom: 62%;
  padding: 6px 11px;
  border-radius: 12px 12px 4px 12px;
  background: var(--am-yuzey);
  border: 1px solid var(--am-cizgi);
  box-shadow: 0 6px 18px rgba(20, 33, 61, .14);
  color: var(--am-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.92);
  transform-origin: 100% 100%;
}
.arin-maskot--hareketli .arin-maskot__selam { transition: opacity .25s, transform .25s; }
.arin-maskot--selam-goster .arin-maskot__selam { opacity: 1; transform: none; }


.arin-maskot__gizle {
  appearance: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--am-cizgi);
  background: var(--am-yuzey);
  color: var(--am-muted);
  box-shadow: 0 2px 6px rgba(20, 33, 61, .14);
  cursor: pointer;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s, transform .15s;
}
.arin-maskot__gizle svg { width: 12px; height: 12px; display: block; }
.arin-maskot:hover .arin-maskot__gizle, .arin-maskot__gizle:focus-visible { opacity: 1; transform: none; }
.arin-maskot__gizle:hover { color: var(--am-ink); }
.arin-maskot__gizle:focus { outline: none; }
.arin-maskot__gizle:focus-visible { outline: 3px solid var(--am-vurgu); outline-offset: 2px; }
@media (hover: none) and (pointer: coarse) { .arin-maskot__gizle { display: none; } }


.arin-maskot__balon {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(300px, calc(100vw - 2 * var(--am-sag)));
  padding: 16px 16px 10px;
  border-radius: 16px;
  border: 1px solid var(--am-cizgi);
  background: var(--am-yuzey);
  color: var(--am-ink);
  box-shadow: 0 16px 40px rgba(20, 33, 61, .18), 0 2px 6px rgba(20, 33, 61, .08);
  transform-origin: calc(100% - 36px) 100%;
  text-align: left;
}
.arin-maskot__balon[hidden] { display: none; }
.arin-maskot__balon::after {
  content: "";
  position: absolute;
  right: calc(var(--am-boy) / 2 - 8px);
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: var(--am-yuzey);
  border-right: 1px solid var(--am-cizgi);
  border-bottom: 1px solid var(--am-cizgi);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.arin-maskot__baslik {
  margin: 0 36px 12px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: pretty;
}
.arin-maskot__eylemler { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arin-maskot__eylem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--am-cizgi);
  background: var(--am-yuzey);
  color: var(--am-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.arin-maskot__eylem svg { width: 16px; height: 16px; flex: none; }
.arin-maskot__eylem:hover { background: var(--am-yuzey-alt); border-color: var(--am-vurgu); }
.arin-maskot__eylem--birincil { background: var(--am-vurgu); border-color: var(--am-vurgu); color: #FFFFFF; }
.arin-maskot__eylem--birincil:hover { background: var(--am-vurgu); filter: brightness(.92); }
.arin-maskot__eylem:focus { outline: none; }
.arin-maskot__eylem:focus-visible { outline: 3px solid var(--am-vurgu); outline-offset: 2px; }
.arin-maskot__kapat {
  appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--am-muted);
  cursor: pointer;
}
.arin-maskot__kapat svg { width: 14px; height: 14px; display: block; }
.arin-maskot__kapat:hover { background: var(--am-yuzey-alt); color: var(--am-ink); }
.arin-maskot__gizle-metin {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 6px 0 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--am-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.arin-maskot__gizle-metin:hover { color: var(--am-ink); }
.arin-maskot__kapat:focus, .arin-maskot__gizle-metin:focus { outline: none; }
.arin-maskot__kapat:focus-visible, .arin-maskot__gizle-metin:focus-visible { outline: 3px solid var(--am-vurgu); outline-offset: 2px; }


.arin-maskot__tutamac {
  appearance: none;
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .92;
}
.arin-maskot__tutamac svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arin-maskot__tutamac:hover { opacity: 1; }
.arin-maskot__tutamac:focus { outline: none; }
.arin-maskot__tutamac:focus-visible { outline: 3px solid var(--am-vurgu); outline-offset: 3px; }
.arin-maskot--gizli { pointer-events: none; }
.arin-maskot--gizli .arin-maskot__dugme, .arin-maskot--gizli .arin-maskot__gizle,
.arin-maskot--gizli .arin-maskot__selam, .arin-maskot--gizli .arin-maskot__balon { display: none; }
.arin-maskot--gizli .arin-maskot__tutamac { display: block; pointer-events: auto; }


.arin-maskot--kenara { transform: translateX(calc(var(--am-sag) + 52%)); }
.arin-maskot--kenara.arin-maskot--acik { transform: none; }


@media (max-width: 640px) {
  .arin-maskot { --am-boy: 64px; --am-sag: 12px; --am-alt: 12px; }
  .arin-maskot__selam { font-size: 12px; }
}


@media (prefers-reduced-motion: reduce) {
  .arin-maskot, .arin-maskot * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .arin-maskot__balon, .arin-maskot__eylem { border: 1px solid CanvasText; }
}
@media print {
  .arin-maskot { display: none !important; }
}
