/* =========================================================================
   Canli onizleme — takip sistemlerinin animasyonlu mini arayuzu
   (partials/canli-onizleme.php)

   KURGU: biri sistemi kullaniyor. 7 saniyelik tek bir dongu:
     0–34%   imlec gelir (kucuk bir asma ile hedefe oturur)
     36–42%  tiklar / tutar
     40%+    hedef degisir (takvim dolar, satir onaylanir, kart suruklenir)
     50–92%  yapiskan not + elle cizilmis ok sonucu gosterir
     100%    her sey sakince basa doner
   Tum animasyonlar ayni surede; ayni anda baslayip esli kaliyorlar.

   Olculer kapsayici genisligine bagli (cqi): ayni bilesen 300px'lik
   kartta da 600px'lik hero'da da orantili. Etiketler data-t ile CSS'ten
   basiliyor; sayfa metnine girmiyor.
   ========================================================================= */
.canli {
  --dongu: 7s;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(237, 109, 30, 0.16), transparent 55%),
    #17120F;
  color: #F3EEE7;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -36px rgba(23, 18, 15, 0.7);
  font-family: var(--font-body);
  line-height: 1.25;
}
.canli [data-t]::before { content: attr(data-t); }

.canli__bar {
  display: flex; align-items: center; gap: 1.2cqi;
  height: 9cqi; padding: 0 3.5cqi;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 3cqi; color: rgba(243, 238, 231, 0.6);
}
.canli__bar i { width: 1.8cqi; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.canli__bar span { margin-left: 2cqi; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canli__nabiz {
  display: inline-flex; align-items: center; gap: 1.2cqi;
  font-weight: 600; font-size: 2.6cqi; letter-spacing: 0.08em; text-transform: uppercase; color: #7DD3A0;
}
.canli__nabiz::after {
  content: ''; order: -1; width: 1.8cqi; aspect-ratio: 1; border-radius: 50%; background: #3FB871;
  animation: cnNabiz 1.6s ease-out infinite;
}
@keyframes cnNabiz { 0% { box-shadow: 0 0 0 0 rgba(63, 184, 113, 0.6); } 100% { box-shadow: 0 0 0 2.4cqi rgba(63, 184, 113, 0); } }

.canli__govde { position: absolute; inset: 9cqi 0 0; padding: 4cqi; }

/* ---------- Imlec: hedefin icinde, oraya gore hareket ---------- */
.canli__imlec {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 5.2cqi; height: 5.2cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2v17l4.6-4.3 3.3 7.2 3-1.4-3.3-7h6.4z' fill='white' stroke='%2317120F' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  filter: drop-shadow(0 0.6cqi 0.8cqi rgba(0, 0, 0, 0.45));
  transform-origin: 0 0;
  animation: cnImlec var(--dongu) cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}
.canli__imlec::after {
  content: ''; position: absolute; left: -2.2cqi; top: -2.2cqi; width: 4.4cqi; height: 4.4cqi;
  border-radius: 50%; border: 0.5cqi solid rgba(255, 255, 255, 0.9);
  opacity: 0; animation: cnTik var(--dongu) ease-out infinite;
}
@keyframes cnImlec {
  0%        { opacity: 0; transform: translate(17cqi, 13cqi); }
  8%        { opacity: 1; }
  29%       { transform: translate(-0.7cqi, -0.5cqi); }
  34%       { transform: translate(0, 0) scale(1); }
  38%       { transform: translate(0, 0) scale(0.84); }
  43%       { transform: translate(0, 0) scale(1); }
  62%       { opacity: 1; transform: translate(0.4cqi, 0.3cqi); }
  76%, 100% { opacity: 0; transform: translate(12cqi, 10cqi); }
}
/* Surukleme: bastirip tutuyor, birakip gidiyor */
@keyframes cnImlecSurukle {
  0%        { opacity: 0; transform: translate(17cqi, 13cqi); }
  8%        { opacity: 1; }
  29%       { transform: translate(-0.7cqi, -0.5cqi); }
  33%       { transform: translate(0, 0) scale(1); }
  36%, 54%  { transform: translate(0, 0) scale(0.86); }
  57%       { transform: translate(0, 0) scale(1); }
  66%       { opacity: 1; transform: translate(0.4cqi, 0.3cqi); }
  78%, 100% { opacity: 0; transform: translate(12cqi, 10cqi); }
}
@keyframes cnTik {
  0%, 37%   { opacity: 0; transform: scale(0.3); }
  39%       { opacity: 0.7; transform: scale(0.4); }
  52%, 100% { opacity: 0; transform: scale(1.7); }
}

/* ---------- Yapiskan not + elle cizilmis ok ---------- */
.canli__not {
  position: absolute; z-index: 6;
  right: 5cqi; bottom: 5cqi;
  max-width: 44cqi;
  padding: 2cqi 2.6cqi 2.2cqi;
  background: #FFF1B8;
  color: #3A2E1F;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.3cqi;
  line-height: 1.2;
  border-radius: 0.6cqi 0.6cqi 1.4cqi 0.4cqi;
  box-shadow: 0 1.6cqi 3cqi -1.2cqi rgba(0, 0, 0, 0.55);
  transform-origin: 30% 0;
  animation: cnNot var(--dongu) ease-out infinite;
}
/* Bant parcasi */
.canli__not::after {
  content: ''; position: absolute; top: -1.4cqi; left: 50%; width: 9cqi; height: 2.6cqi;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255, 255, 255, 0.45);
}
@keyframes cnNot {
  0%, 44%  { opacity: 0; transform: translateY(1.6cqi) rotate(-8deg); }
  50%      { opacity: 1; transform: translateY(-0.3cqi) rotate(-2deg); }
  54%, 92% { opacity: 1; transform: translateY(0) rotate(-3deg); }
  100%     { opacity: 0; transform: translateY(0.6cqi) rotate(-3deg); }
}
.canli__ok {
  position: absolute; width: 15cqi; height: 7.5cqi;
  top: -7cqi; left: -9cqi;
  transform: scaleX(-1);
  overflow: visible;
}
.canli__ok path {
  fill: none; stroke: #FFF1B8; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 110; stroke-dashoffset: 110;
  animation: cnOk var(--dongu) ease-in-out infinite;
}
.canli__ok path + path { animation-name: cnOkUc; }
@keyframes cnOk   { 0%, 50% { stroke-dashoffset: 110; } 62%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cnOkUc { 0%, 60% { stroke-dashoffset: 110; } 68%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ---------- Harita (arac, saha ekibi, emlak) ---------- */
.canli--harita .canli__govde { padding: 0; }
.canli__yollar { position: absolute; inset: 0; width: 100%; height: 100%; }
.canli__yollar path { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; stroke-linecap: round; }
.canli__bolge { fill: rgba(237, 109, 30, 0.12); stroke: rgba(237, 109, 30, 0.7); stroke-width: 1.5; stroke-dasharray: 5 4; }
.canli__bolge-ad { position: absolute; right: 8cqi; top: 2cqi; font-size: 2.6cqi; font-weight: 600; color: rgba(255, 178, 125, 0.9); }
.canli__arac circle { fill: rgba(237, 109, 30, 0.85); stroke: #17120F; stroke-width: 2; }
.canli__arac .canli__arac-ic { fill: #fff; stroke: none; }
.canli__pin { position: absolute; left: 56%; top: 60%; }
.canli__pin > b {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 1cqi; white-space: nowrap;
  padding: 1cqi 2cqi 1cqi 1.2cqi; border-radius: 99px;
  background: #ED6D1E; color: #fff; font-size: 2.7cqi;
  animation: cnPin var(--dongu) ease-out infinite;
}
.canli__pin > b::after { content: ''; order: -1; width: 2cqi; aspect-ratio: 1; border-radius: 50%; background: #fff; }
@keyframes cnPin { 0%, 38% { box-shadow: 0 0 0 0 rgba(237, 109, 30, 0.6); } 52%, 100% { box-shadow: 0 0 0 3cqi rgba(237, 109, 30, 0); } }
.canli__pin .canli__imlec { left: 0; top: 0; }
.canli__balon {
  position: absolute; left: 0; bottom: 3.4cqi; transform: translateX(-50%);
  white-space: nowrap; padding: 1.4cqi 2.2cqi; border-radius: 1.4cqi;
  background: #fff; color: #17120F; font-size: 2.7cqi; font-weight: 600;
  box-shadow: 0 1.4cqi 3cqi -1cqi rgba(0, 0, 0, 0.5);
  animation: cnBalon var(--dongu) ease-out infinite;
}
@keyframes cnBalon {
  0%, 40%  { opacity: 0; transform: translateX(-50%) translateY(1cqi) scale(0.94); }
  45%, 92% { opacity: 1; transform: translateX(-50%); }
  100%     { opacity: 0; transform: translateX(-50%); }
}
.canli--harita .canli__not { left: 5cqi; right: auto; top: 13cqi; bottom: auto; }
.canli--harita .canli__ok { top: auto; bottom: -7cqi; left: auto; right: -12cqi; transform: scaleY(-1); }

/* ---------- Kanban (servis, uretim, is takip) ---------- */
.canli__kolonlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqi; height: 100%; }
.canli__kolon { display: flex; flex-direction: column; gap: 1.8cqi; padding: 2.2cqi; border-radius: 2.2cqi; background: rgba(255, 255, 255, 0.05); }
.canli__kolon small { font-size: 2.8cqi; font-weight: 600; color: rgba(243, 238, 231, 0.65); }
.canli__kolon span { height: 9cqi; border-radius: 1.6cqi; background: rgba(255, 255, 255, 0.07); }
.canli__gezen {
  position: absolute;
  top: 13.5cqi; left: 6.4cqi;
  width: calc((100% - 12.8cqi - 4.8cqi) / 3 - 4.4cqi);
  padding: 1.8cqi 2.2cqi; border-radius: 1.6cqi;
  background: #fff; color: #17120F;
  box-shadow: 0 2cqi 5cqi -1cqi rgba(0, 0, 0, 0.55);
  animation: cnKanban var(--dongu) cubic-bezier(0.55, 0, 0.3, 1) infinite;
}
.canli__gezen b { display: block; font-size: 3cqi; }
.canli__gezen small { font-size: 2.5cqi; color: #857B73; }
.canli__gezen .canli__imlec { left: 70%; top: 40%; animation-name: cnImlecSurukle; }
/* Kart ikinci sutunda bekliyor; imlec tutup ucuncuye surukluyor, birakinca yesil */
@keyframes cnKanban {
  0%        { opacity: 0; transform: translateX(calc(100% + 6.6cqi)) translateY(1cqi); background: #fff; }
  5%, 35%   { opacity: 1; transform: translateX(calc(100% + 6.6cqi)) rotate(0) scale(1); background: #fff; }
  38%       { opacity: 1; transform: translateX(calc(100% + 6.6cqi)) rotate(-2.5deg) scale(1.05); }
  52%       { opacity: 1; transform: translateX(calc(200% + 13.2cqi)) rotate(1.5deg) scale(1.05); background: #fff; }
  56%, 92%  { opacity: 1; transform: translateX(calc(200% + 13.2cqi)) rotate(0) scale(1); background: #E7F3EC; }
  100%      { opacity: 0; transform: translateX(calc(200% + 13.2cqi)); background: #E7F3EC; }
}
.canli--kanban .canli__not { left: 5cqi; right: auto; }
.canli--kanban .canli__ok { left: auto; right: -12cqi; top: -7cqi; transform: none; }

/* ---------- Takvim (randevu, kurs) ---------- */
.canli__takvim { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(4, 1fr); gap: 1.4cqi; height: 100%; }
.canli__takvim small { font-size: 2.6cqi; text-align: center; color: rgba(243, 238, 231, 0.55); }
.canli__takvim span { position: relative; border-radius: 1.2cqi; background: rgba(255, 255, 255, 0.05); }
.canli__takvim span.dolu { background: rgba(237, 109, 30, 0.75); }
.canli__takvim span.dolu:nth-of-type(3n) { background: #E8DFD3; }
.canli__takvim span.hedef { animation: cnSlot var(--dongu) ease-out infinite; }
@keyframes cnSlot {
  0%, 39%  { background: rgba(255, 255, 255, 0.05); transform: scale(1); }
  42%      { background: #ED6D1E; transform: scale(1.14); }
  47%, 92% { background: #ED6D1E; transform: scale(1); }
  100%     { background: rgba(255, 255, 255, 0.05); }
}
.canli--takvim .canli__not { bottom: 4cqi; right: 4cqi; }

/* ---------- Grafik (stok, cari, gelir-gider) ---------- */
.canli__deger small { display: block; font-size: 2.8cqi; color: rgba(243, 238, 231, 0.6); }
.canli__deger b { font-family: var(--font-display); font-size: 8cqi; letter-spacing: -0.03em; }
.canli__cubuklar { position: absolute; left: 4cqi; right: 4cqi; bottom: 4cqi; height: 46%; display: flex; align-items: flex-end; gap: 2cqi; }
.canli__cubuklar span {
  position: relative; flex: 1; height: var(--h);
  border-radius: 1.2cqi 1.2cqi 0.4cqi 0.4cqi;
  background: linear-gradient(rgba(237, 109, 30, 0.85), rgba(237, 109, 30, 0.35));
  transform-origin: bottom;
  animation: cnBuyu var(--dongu) cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
  animation-delay: calc(var(--g) * 0.07s);
}
@keyframes cnBuyu { 0% { transform: scaleY(0.08); } 14%, 94% { transform: scaleY(1); } 100% { transform: scaleY(0.08); } }
.canli__cubuklar span.hedef { animation-name: cnBuyu, cnHedefCubuk; }
@keyframes cnHedefCubuk { 0%, 39%, 100% { filter: none; } 42%, 92% { filter: brightness(1.35) saturate(1.2); } }
.canli__cubuklar .canli__imlec { top: 35%; }
/* Hedef cubuk kisa olsa da balon gorunur kalsin */
.canli__cubuklar span.hedef { z-index: 3; }
.canli__ipucu {
  position: absolute; left: 50%; bottom: calc(100% + 1.8cqi);
  white-space: nowrap; padding: 1.2cqi 2cqi; border-radius: 1.2cqi;
  background: #fff; color: #17120F; font-style: normal; font-size: 2.7cqi; font-weight: 600;
  box-shadow: 0 1.4cqi 3cqi -1cqi rgba(0, 0, 0, 0.5);
  animation: cnBalon var(--dongu) ease-out infinite;
}
.canli--grafik .canli__not { top: 12.5cqi; bottom: auto; right: 4cqi; max-width: 36cqi; }
/* Ok asagi, notun altindaki (sagdan ikinci) cubuga */
.canli--grafik .canli__ok { top: auto; bottom: -9.5cqi; left: 34%; width: 12cqi; transform: rotate(95deg); }

/* ---------- Huni (CRM) ---------- */
.canli__huni { display: flex; flex-direction: column; align-items: center; gap: 1.8cqi; height: 100%; justify-content: center; }
.canli__huni > div {
  position: relative; width: var(--w); padding: 2cqi 0; border-radius: 1.6cqi; text-align: center;
  background: rgba(237, 109, 30, 0.16); border: 1px solid rgba(237, 109, 30, 0.35);
}
.canli__huni > div:last-of-type { background: rgba(237, 109, 30, 0.9); border-color: #ED6D1E; }
.canli__huni small { font-size: 2.8cqi; font-weight: 600; line-height: 1.2; }
.canli__firsat {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  padding: 1.2cqi 2.2cqi; border-radius: 1.2cqi; white-space: nowrap;
  background: #fff; color: #17120F; font-size: 2.6cqi;
  box-shadow: 0 1.6cqi 3cqi -1cqi rgba(0, 0, 0, 0.55);
  animation: cnFirsat var(--dongu) cubic-bezier(0.55, 0, 0.3, 1) infinite;
}
.canli__firsat .canli__imlec { left: 78%; top: 45%; animation-name: cnImlecSurukle; }
@keyframes cnFirsat {
  0%        { opacity: 0; transform: translate(-50%, -50%) translateY(1cqi); background: #fff; }
  5%, 35%   { opacity: 1; transform: translate(-50%, -50%) rotate(0); background: #fff; }
  38%       { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.05); }
  52%       { opacity: 1; transform: translate(-50%, calc(-50% + 9.4cqi + 2px)) rotate(1deg) scale(1.05); background: #fff; }
  56%, 92%  { opacity: 1; transform: translate(-50%, calc(-50% + 9.4cqi + 2px)) rotate(0) scale(1); background: #E7F3EC; }
  100%      { opacity: 0; transform: translate(-50%, calc(-50% + 9.4cqi + 2px)); }
}
.canli--huni .canli__not { right: 3cqi; bottom: auto; top: 13cqi; max-width: 28cqi; }
/* Ok asagi-sola, huninin dibindeki "Kazanildi"ya */
.canli--huni .canli__ok { top: auto; bottom: -12cqi; left: -6cqi; width: 13cqi; transform: rotate(125deg); }

/* ---------- Liste (PDKS, site, bayi, hasta, demirbas) ---------- */
.canli__liste { display: flex; flex-direction: column; gap: 1.8cqi; }
.canli__liste > div {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2cqi;
  padding: 1.8cqi 2.4cqi; border-radius: 1.8cqi; background: rgba(255, 255, 255, 0.05);
}
.canli__liste b { font-size: 3cqi; font-weight: 600; }
.canli__liste small { font-size: 2.8cqi; color: rgba(243, 238, 231, 0.6); font-variant-numeric: tabular-nums; }
.canli__liste em {
  font-style: normal; font-size: 2.5cqi; font-weight: 600;
  padding: 0.6cqi 1.8cqi; border-radius: 99px; background: rgba(63, 184, 113, 0.18); color: #7DD3A0;
}
.canli__av { width: 5.4cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(237, 109, 30, 0.25); color: #FFB27D; font-size: 2.6cqi; font-weight: 600; }
.canli__liste em.canli__durum { position: relative; display: grid; padding: 0; background: none; }
.canli__durum > span { grid-area: 1 / 1; padding: 0.6cqi 1.8cqi; border-radius: 99px; text-align: center; white-space: nowrap; }
.canli__durum .once  { background: rgba(255, 178, 125, 0.18); color: #FFB27D; animation: cnOnce var(--dongu) infinite; }
.canli__durum .sonra { background: rgba(63, 184, 113, 0.22); color: #7DD3A0; animation: cnSonra var(--dongu) infinite; }
@keyframes cnOnce  { 0%, 39% { opacity: 1; } 41%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cnSonra { 0%, 39% { opacity: 0; transform: scale(0.9); } 42% { opacity: 1; transform: scale(1.12); } 46%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.canli--liste .canli__not { right: auto; left: 6cqi; bottom: 18cqi; }
.canli--liste .canli__ok { top: auto; bottom: -7.5cqi; left: auto; right: -13cqi; transform: scaleY(-1); }

/* ---------- Telefon (okul: veliye bildirim) ---------- */
.canli--telefon .canli__govde { display: flex; align-items: center; justify-content: space-between; gap: 6cqi; padding: 3cqi 9cqi; }
.canli__tel-yan { align-self: flex-start; margin-top: 3cqi; }
.canli__tel-yan b { display: block; font-family: var(--font-display); font-size: 9cqi; letter-spacing: -0.03em; }
.canli__tel-yan small { display: block; max-width: 24cqi; font-size: 2.8cqi; color: rgba(243, 238, 231, 0.6); }
.canli__tel {
  position: relative; width: 31cqi; height: 100%;
  display: flex; flex-direction: column; gap: 1.5cqi;
  padding: 5.5cqi 2cqi 2cqi;
  border-radius: 5cqi; background: #0D0A08;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2cqi 5cqi -2cqi rgba(0, 0, 0, 0.7);
}
.canli__tel-ada { position: absolute; top: 1.8cqi; left: 50%; width: 10cqi; height: 2cqi; transform: translateX(-50%); border-radius: 99px; background: #000; }
.canli__bld {
  position: relative; padding: 1.5cqi 2cqi; border-radius: 2cqi;
  background: rgba(255, 255, 255, 0.95); color: #17120F;
  animation: cnBld var(--dongu) ease-out infinite; animation-delay: calc(var(--g) * 0.45s);
}
.canli__bld b { display: block; font-size: 2.5cqi; }
.canli__bld small { display: block; font-size: 2.2cqi; color: #6F665F; }
@keyframes cnBld { 0% { opacity: 0; transform: translateY(-2cqi) scale(0.96); } 6%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.canli__bld .canli__durum { position: relative; display: grid; margin-top: 1.2cqi; font-style: normal; font-size: 2.4cqi; font-weight: 600; }
.canli__bld .canli__durum > span { grid-area: 1 / 1; padding: 0.8cqi 0; border-radius: 99px; text-align: center; }
.canli__bld .canli__durum .once { background: #ED6D1E; color: #fff; animation: cnOnce var(--dongu) infinite; }
.canli__bld .canli__durum .sonra { background: #E7F3EC; color: #2F8A57; animation: cnSonra var(--dongu) infinite; }
.canli--telefon .canli__not { right: auto; left: 7cqi; bottom: 3.5cqi; max-width: 34cqi; }
.canli--telefon .canli__ok { left: auto; right: -13cqi; top: -4cqi; transform: rotate(8deg); }

/* ---------- Plan (rezervasyon: masa / oda) ---------- */
.canli__plan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.4cqi; height: 100%; align-content: center; }
.canli__plan span {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 2.4cqi; border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-size: 2.8cqi; font-weight: 600; color: rgba(243, 238, 231, 0.55);
}
.canli__plan span.genis { grid-column: span 2; aspect-ratio: auto; }
.canli__plan span.dolu { background: rgba(237, 109, 30, 0.8); border: 1px solid transparent; color: #fff; }
.canli__plan span.hedef { animation: cnMasa var(--dongu) ease-out infinite; }
@keyframes cnMasa {
  0%, 39%  { background: rgba(255, 255, 255, 0.04); color: rgba(243, 238, 231, 0.55); transform: scale(1); }
  42%      { background: #ED6D1E; color: #fff; transform: scale(1.12); }
  47%, 92% { background: #ED6D1E; color: #fff; transform: scale(1); }
  100%     { background: rgba(255, 255, 255, 0.04); }
}
.canli__plan .canli__ipucu { bottom: calc(100% + 1.4cqi); }
.canli--plan .canli__not { left: 4cqi; right: auto; bottom: 3cqi; }
.canli--plan .canli__ok { left: auto; right: -12cqi; top: -7cqi; transform: none; }

/* ---------- Belge (teklif) ---------- */
.canli--belge .canli__govde { display: flex; justify-content: flex-end; align-items: center; padding: 3cqi 6cqi; }
.canli__belge {
  position: relative; width: 58cqi;
  padding: 3cqi 3.4cqi; border-radius: 1.6cqi;
  background: #FBF8F3; color: #17120F;
  box-shadow: 0 2.4cqi 5cqi -2cqi rgba(0, 0, 0, 0.7);
  transform: rotate(-1deg);
}
.canli__belge-ust { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.4cqi; margin-bottom: 0.6cqi; border-bottom: 1.5px solid #17120F; }
.canli__belge-ust b { font-family: var(--font-display); font-size: 3.3cqi; }
.canli__belge-ust small { font-size: 2.3cqi; color: #857B73; }
.canli__kalem {
  display: flex; justify-content: space-between; gap: 2cqi;
  padding: 1cqi 0; border-bottom: 1px dashed #E2D8CC; font-size: 2.5cqi;
  animation: cnKalem var(--dongu) ease-out infinite; animation-delay: calc(var(--g) * 0.4s);
}
.canli__kalem span + span { font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes cnKalem { 0% { opacity: 0; transform: translateX(-1.5cqi); } 5%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.canli__belge-alt { display: flex; align-items: center; gap: 2cqi; margin-top: 1.6cqi; font-size: 2.5cqi; }
.canli__belge-alt b { flex: 1; font-family: var(--font-display); font-size: 3.6cqi; }
.canli__gonder { position: relative; padding: 1cqi 2.6cqi; border-radius: 99px; background: #ED6D1E; color: #fff; font-weight: 600; }
.canli__damga {
  position: absolute; right: 5cqi; top: 34%;
  padding: 1cqi 2.4cqi; border: 0.5cqi solid #2F8A57; border-radius: 1cqi;
  color: #2F8A57; font-family: var(--font-display); font-weight: 700; font-size: 3.6cqi; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(231, 243, 236, 0.75);
  animation: cnDamga var(--dongu) cubic-bezier(0.2, 1.6, 0.4, 1) infinite;
}
@keyframes cnDamga {
  0%, 44%  { opacity: 0; transform: rotate(-14deg) scale(1.8); }
  50%, 92% { opacity: 1; transform: rotate(-14deg) scale(1); }
  100%     { opacity: 0; transform: rotate(-14deg) scale(1); }
}
.canli--belge .canli__not { left: 4cqi; right: auto; bottom: 6cqi; max-width: 22cqi; }
.canli--belge .canli__ok { left: auto; right: -12cqi; top: -7cqi; transform: none; }

/* ---------- Buyuk surum (cozum sayfasi hero) ---------- */
.canli--buyuk { border-radius: 18px; }

/* ---------- Hareketi azalt: son hal, sabit ---------- */
@media (prefers-reduced-motion: reduce) {
  .canli *, .canli *::before, .canli *::after { animation: none !important; }
  .canli__imlec, .canli__hareketli { display: none; }
  .canli__not { opacity: 1; transform: rotate(-3deg); }
  .canli__ok path { stroke-dashoffset: 0; }
  .canli__takvim span.hedef, .canli__plan span.hedef { background: #ED6D1E; color: #fff; }
  .canli__bld, .canli__kalem { opacity: 1; }
  .canli__damga { opacity: 1; transform: rotate(-14deg); }
  .canli__durum .once { opacity: 0; }
  .canli__durum .sonra { opacity: 1; }
  .canli__balon { opacity: 1; transform: translateX(-50%); }
  .canli__ipucu { opacity: 1; transform: translateX(-50%); }
  .canli__gezen { transform: translateX(calc(200% + 13.2cqi)); background: #E7F3EC; }
  .canli__firsat { transform: translate(-50%, calc(-50% + 9.4cqi + 2px)); background: #E7F3EC; }
}