/* ═══ SpeedSIS — proje-yerel kart sahneleri (.fcard-scene > .sc.sc-x.sc-*) ═══
   Kit sahneleri (sc-duyuru / sc-galeri / …) kindergarten kavramları için çizili;
   modül sahneleri BURADA yaşar ve YALNIZ tema token'larıyla boyanır
   (--card --ink --line --paper-2 --red --mustard --pine --sky --sage --blush
   --radius-sm --hard-sm --font-head) → tema değişince sahne de giyinir.
   Kutu: kit .fcard-scene (185px, overflow hidden); .sc kit'ten
   position:absolute; inset:0. Bu dosya tema linkinden ÖNCE yüklenir
   (çakışan kuralda tema kazansın). */

/* ── ortak ── */
.sc-x { font-family: var(--font-head); color: var(--ink); }
.sc-x .stamp {
  position: absolute; padding: 3px 9px;
  border: 2.5px solid var(--pine); color: var(--pine); border-radius: 6px;
  font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-12deg) scale(0); opacity: 0;
  animation: sc-stamp .5s cubic-bezier(.2, 1.4, .4, 1) 1.1s forwards;
}
@keyframes sc-stamp { to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes sc-rise  { to { opacity: 1; transform: translateY(0); } }

/* ── 1 · Daily Report Card: rapor kartı, dolan satır çubukları, "Sent" damgası ── */
.sc-report .rp {
  position: absolute; left: 50%; top: 50%; width: 158px; height: 124px; margin: -62px 0 0 -79px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--hard-sm); padding: 12px 14px; transform: rotate(-3deg);
  display: flex; flex-direction: column; gap: 10px;
}
.sc-report .rp-h { display: flex; align-items: center; gap: 8px; }
.sc-report .rp-h b { width: 18px; height: 18px; border-radius: 50%; background: var(--blush); }
.sc-report .rp-h i { height: 8px; width: 60%; border-radius: 999px; background: var(--ink); opacity: .18; }
.sc-report .rp-r { display: flex; align-items: center; gap: 8px; font-size: .85rem; line-height: 1; }
.sc-report .rp-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.sc-report .rp-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px; background: var(--c);
  animation: sc-fill 1.1s ease-out var(--d, 0s) forwards;
}
.sc-report .r1 .rp-bar i { --c: var(--sage);    --w: 85%; }
.sc-report .r2 .rp-bar i { --c: var(--sky);     --w: 60%; --d: .25s; }
.sc-report .r3 .rp-bar i { --c: var(--mustard); --w: 40%; --d: .5s; }
@keyframes sc-fill { to { width: var(--w); } }
.sc-report .stamp { right: 22px; bottom: 20px; }

/* ── 2 · Parent Messaging: gelen balon, sesli mesaj balonu, "yazıyor" balonu ── */
.sc-chat .cb {
  position: absolute; max-width: 62%; padding: 10px 12px; border-radius: 16px;
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--hard-sm);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(8px);
  animation: sc-rise .45s ease-out var(--d, 0s) forwards;
}
.sc-chat .cb i { display: block; height: 7px; border-radius: 999px; background: var(--ink); opacity: .16; }
.sc-chat .cb-in { left: 18px; top: 22px; border-bottom-left-radius: 4px; }
.sc-chat .cb-in .l1 { width: 96px; }
.sc-chat .cb-in .l2 { width: 64px; }
.sc-chat .cb-out {
  right: 18px; top: 78px; --d: .5s;
  background: var(--sky); border-color: transparent; border-bottom-right-radius: 4px;
  flex-direction: row; align-items: center; gap: 8px;
}
.sc-chat .cb-out b { width: 22px; height: 22px; border-radius: 50%; background: var(--card); position: relative; flex: none; }
.sc-chat .cb-out b::after {
  content: ''; position: absolute; left: 8px; top: 6px;
  border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.sc-chat .wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.sc-chat .wave i {
  width: 3px; height: var(--h); opacity: .7; border-radius: 2px;
  animation: sc-wave 1s ease-in-out var(--d2, 0s) infinite alternate;
}
.sc-chat .wave i:nth-child(1) { --h: 8px; }
.sc-chat .wave i:nth-child(2) { --h: 14px; --d2: .1s; }
.sc-chat .wave i:nth-child(3) { --h: 20px; --d2: .2s; }
.sc-chat .wave i:nth-child(4) { --h: 12px; --d2: .3s; }
.sc-chat .wave i:nth-child(5) { --h: 18px; --d2: .15s; }
.sc-chat .wave i:nth-child(6) { --h: 9px;  --d2: .25s; }
.sc-chat .cb-typing { left: 18px; top: 132px; --d: 1s; flex-direction: row; gap: 4px; }
.sc-chat .cb-typing i { width: 7px; height: 7px; border-radius: 50%; opacity: .35; animation: sc-type 1.2s ease-in-out infinite; }
.sc-chat .cb-typing i:nth-child(2) { animation-delay: .2s; }
.sc-chat .cb-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sc-wave { to { transform: scaleY(1.9); } }
@keyframes sc-type { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: .8; } }

/* ── hareket azaltma: son kareler doğrudan ── */
@media (prefers-reduced-motion: reduce) {
  .sc-x .stamp, .sc-chat .cb { animation: none; opacity: 1; transform: none; }
  .sc-report .rp-bar i { animation: none; width: var(--w); }
  .sc-chat .wave i, .sc-chat .cb-typing i { animation: none; }
}

/* ── ortak ek: dolgulu rozet + pop ── */
.sc-x .badge-fill {
  position: absolute; padding: 5px 10px; border-radius: 999px;
  background: var(--pine); color: var(--card); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  transform: scale(0); animation: sc-pop .45s cubic-bezier(.2, 1.4, .4, 1) var(--d, 1s) forwards;
}
@keyframes sc-pop { to { transform: scale(1); } }

/* ── 3 · Check-In & Attendance: saat çipi, OUT→IN anahtarı, işaretlenen çocuklar ── */
.sc-checkin .clk {
  position: absolute; left: 16px; top: 14px; padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); font-weight: 800; font-size: .72rem;
  display: flex; align-items: center; gap: 6px;
}
.sc-checkin .clk::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: sc-blink 1.4s ease-in-out infinite; }
@keyframes sc-blink { 50% { opacity: .25; } }
.sc-checkin .tg {
  position: absolute; left: 50%; top: 50%; width: 112px; height: 42px; margin: -30px 0 0 -56px;
  border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  font-weight: 800; font-size: .7rem; letter-spacing: .08em; color: var(--ink-soft);
}
.sc-checkin .tg i {
  position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--line); display: grid; place-items: center;
  color: var(--card); font-style: normal; font-weight: 800; font-size: .9rem;
  animation: sc-slide .9s cubic-bezier(.3, 1.3, .4, 1) .7s forwards;
}
.sc-checkin .tg i::after { content: '✓'; opacity: 0; animation: sc-show .3s ease-out 1.4s forwards; }
@keyframes sc-slide { to { left: 72px; background: var(--pine); border-color: var(--pine); } }
@keyframes sc-show  { to { opacity: 1; } }
.sc-checkin .kids { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 14px; }
.sc-checkin .kids b { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid var(--card); box-shadow: var(--hard-sm); }
.sc-checkin .kids .k1 { --c: var(--blush); }
.sc-checkin .kids .k2 { --c: var(--sky); --d: 1.9s; }
.sc-checkin .kids .k3 { --c: var(--mustard); --d: 2.2s; }
.sc-checkin .kids b::after {
  content: '✓'; position: absolute; right: -7px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pine); color: var(--card); font-size: .6rem; font-weight: 800; display: grid; place-items: center;
  transform: scale(0); animation: sc-pop .4s cubic-bezier(.2, 1.4, .4, 1) var(--d, 1.6s) forwards;
}

/* ── 4 · Billing & Payments: fatura kartı, "Paid" damgası, kayan kart ── */
.sc-bill .inv {
  position: absolute; left: 50%; top: 50%; width: 150px; height: 118px; margin: -66px 0 0 -84px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--hard-sm);
  padding: 12px 14px; transform: rotate(2deg); display: flex; flex-direction: column; gap: 9px; font-size: .78rem; font-weight: 800;
}
.sc-bill .inv-h { display: flex; justify-content: space-between; align-items: center; }
.sc-bill .inv-h i { height: 8px; width: 54px; border-radius: 999px; background: var(--ink); opacity: .18; }
.sc-bill .inv-h b { color: var(--pine); }
.sc-bill .inv-r { display: flex; justify-content: space-between; align-items: center; }
.sc-bill .inv-r i { height: 6px; border-radius: 999px; background: var(--ink); opacity: .14; }
.sc-bill .inv-r .a { width: 64px; } .sc-bill .inv-r .b { width: 26px; }
.sc-bill .inv-t { margin-top: auto; border-top: 1.5px dashed var(--line); padding-top: 7px; display: flex; justify-content: space-between; }
.sc-bill .stamp { right: 18px; top: 16px; }
.sc-bill .cc {
  position: absolute; right: 22px; bottom: 16px; width: 68px; height: 42px; border-radius: 8px;
  background: var(--sky); box-shadow: var(--hard-sm); opacity: 0; transform: translateY(10px);
  animation: sc-rise .5s ease-out .5s forwards;
}
.sc-bill .cc::before { content: ''; position: absolute; left: 9px; top: 12px; width: 16px; height: 11px; border-radius: 3px; background: var(--mustard); }
.sc-bill .cc::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 5px; border-radius: 999px; background: var(--card); opacity: .7; }

/* ── 5 · Online Enrollment: form alanları dolar, gönder, "New family" rozeti ── */
.sc-enroll .fm {
  position: absolute; left: 50%; top: 50%; width: 156px; height: 128px; margin: -64px 0 0 -78px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--hard-sm);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.sc-enroll .fd { display: flex; flex-direction: column; gap: 4px; }
.sc-enroll .fd i { height: 5px; width: 34%; border-radius: 999px; background: var(--ink); opacity: .16; }
.sc-enroll .fd b { height: 16px; border-radius: 5px; background: var(--paper-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.sc-enroll .fd b::after {
  content: ''; position: absolute; left: 6px; top: 5px; height: 6px; width: 0; border-radius: 999px; background: var(--ink); opacity: .35;
  animation: sc-fill .6s ease-out var(--d, 0s) forwards;
}
.sc-enroll .f1 b::after { --w: 62%; --d: .3s; }
.sc-enroll .f2 b::after { --w: 48%; --d: .9s; }
.sc-enroll .fm-btn {
  margin-top: auto; height: 22px; border-radius: 999px; background: var(--red); color: var(--card);
  font-weight: 800; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; display: grid; place-items: center;
  animation: sc-press .3s ease-out 1.6s 2 alternate;
}
@keyframes sc-press { to { transform: scale(.94); } }
.sc-enroll .badge-fill { right: 14px; top: 14px; background: var(--sage); color: var(--ink); --d: 2.2s; }

/* ── 6 · Health & Medicine: ilaç şişesi, kapsül, doz saatleri işaretlenir ── */
.sc-health .btl {
  position: absolute; left: 34px; top: 50%; width: 46px; height: 68px; margin-top: -40px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 8px 8px 12px 12px; box-shadow: var(--hard-sm);
}
.sc-health .btl::before { content: ''; position: absolute; left: 5px; right: 5px; top: -12px; height: 13px; border-radius: 4px 4px 0 0; background: var(--mustard); }
.sc-health .btl::after { content: ''; position: absolute; left: -1.5px; right: -1.5px; top: 22px; height: 22px; background: var(--blush); }
.sc-health .pil {
  position: absolute; left: 92px; top: 34px; width: 44px; height: 18px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky) 50%, var(--card) 50%); border: 1.5px solid var(--line); transform: rotate(-28deg);
  animation: sc-bob 2.6s ease-in-out infinite;
}
@keyframes sc-bob { 50% { transform: rotate(-20deg) translateY(-5px); } }
.sc-health .dose { position: absolute; right: 16px; top: 50%; width: 118px; margin-top: -42px; display: flex; flex-direction: column; gap: 8px; }
.sc-health .dose span {
  display: flex; align-items: center; justify-content: space-between; padding: 5px 9px; border-radius: 8px;
  background: var(--card); border: 1.5px solid var(--line); font-weight: 800; font-size: .7rem;
}
.sc-health .dose span::after {
  content: '✓'; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--paper-2);
  color: var(--card); font-size: .6rem; display: grid; place-items: center;
}
.sc-health .dose .on::after { animation: sc-tick .3s ease-out var(--d, .8s) forwards; }
.sc-health .dose .d2 { --d: 1.5s; }
@keyframes sc-tick { to { background: var(--pine); border-color: var(--pine); } }

/* ── hareket azaltma (ek sahneler): son kareler doğrudan ── */
@media (prefers-reduced-motion: reduce) {
  .sc-x .badge-fill, .sc-checkin .kids b::after { animation: none; transform: scale(1); }
  .sc-checkin .tg i { animation: none; left: 72px; background: var(--pine); border-color: var(--pine); }
  .sc-checkin .tg i::after, .sc-bill .cc { animation: none; opacity: 1; transform: none; }
  .sc-checkin .clk::before, .sc-health .pil, .sc-enroll .fm-btn { animation: none; }
  .sc-enroll .fd b::after { animation: none; width: var(--w); }
  .sc-health .dose .on::after { animation: none; background: var(--pine); border-color: var(--pine); }
}

/* ── 7 · Food Menu: haftalık menü kartı, satırlar sırayla belirir ── */
.sc-menu .mn {
  position: absolute; left: 50%; top: 50%; width: 156px; height: 126px; margin: -63px 0 0 -78px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--hard-sm);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; transform: rotate(-2deg);
}
.sc-menu .mn-h { font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sc-menu .mn-r {
  display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800;
  opacity: 0; transform: translateY(6px); animation: sc-rise .4s ease-out var(--d, .2s) forwards;
}
.sc-menu .mn-r:nth-child(3) { --d: .55s; }
.sc-menu .mn-r:nth-child(4) { --d: .9s; }
.sc-menu .mn-r b { width: 30px; color: var(--pine); }
.sc-menu .mn-r i { flex: 1; height: 7px; border-radius: 999px; background: var(--ink); opacity: .16; }
@media (prefers-reduced-motion: reduce) { .sc-menu .mn-r { animation: none; opacity: 1; transform: none; } }