/* ============================================================================
 * SAHNE TEMELİ — gerçekçi uygulama arayüzü çizimleri için ortak jetonlar ve parçalar (29.10.2026)
 * Sahneler ürünün kendi ekranlarını yeniden çizer (uydurma özellik yok); renkler uygulamanın açık temasına yakın,
 * ana renk sitenin laciverti. Her sahnenin stili ayrı dosyadır; siteScene() sahneyle birlikte yalnız o sayfada yükler.
 * ========================================================================== */
:root {
  --ui-bg: #ffffff; --ui-bg-2: #f6f7f9; --ui-bg-3: #eef1f5;
  --ui-line: #e3e7ed; --ui-line-2: #d3d9e2;
  --ui-text: #172238; --ui-text-2: #3d4a5c; --ui-muted: #6a7486;
  --ui-primary: #1d4f86; --ui-primary-ink: #ffffff; --ui-primary-soft: #e6eef8;
  --ui-ok: #15803d; --ui-ok-soft: #dcf3e4; --ui-bad: #c2261d; --ui-bad-soft: #fde4e1;
  --ui-warn: #b45309; --ui-warn-soft: #fdefd9; --ui-info: #1d5fc4; --ui-info-soft: #e1ecfb;
  /* ders renkleri (uygulamanın çarşaf programındaki açık tonlar) */
  --c-mat: #dbe8fb; --c-mat-ink: #1e4a8a; --c-tur: #fde2ec; --c-tur-ink: #9b2453; --c-fen: #e2f3e5; --c-fen-ink: #1f6b35;
  --c-ing: #fdf1cf; --c-ing-ink: #8a5a00; --c-sos: #ece4fb; --c-sos-ink: #5b3b99; --c-din: #e3f3f6; --c-din-ink: #1d6170;
  --c-bed: #fde7d9; --c-bed-ink: #9a3f12; --c-gor: #f3f5d6; --c-gor-ink: #5c6512; --c-muz: #fbe3f6; --c-muz-ink: #8a2779;
  --c-tek: #dff5f0; --c-tek-ink: #146353;
  --ui-radius: 12px; --ui-radius-sm: 8px;
  --ui-shadow: 0 1px 2px rgba(16, 37, 64, .06), 0 18px 40px -22px rgba(16, 37, 64, .35);
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
}
.scene { position: relative; font-family: var(--font); color: var(--ui-text); -webkit-font-smoothing: antialiased; }
.scene * { box-sizing: border-box; }
:where(.scene) svg { display: block; }
/* uygulama penceresi (tarayıcı süsü YOK: yalnız kart) */
.ui-win { background: var(--ui-bg); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-line); overflow: hidden; }
.ui-phone { background: var(--ui-bg-2); border-radius: 30px; box-shadow: 0 0 0 7px var(--navy-night), var(--shadow-float); overflow: hidden; }
.is-static *, .is-static *::before, .is-static *::after { transition: none !important; animation: none !important; }
/* döngü başı: içerik söner, geçişsiz sıfırlanır, yeniden belirir (motion.js) */
.scene { transition: opacity .4s var(--ui-ease); }
.scene.is-out { opacity: 0; }
.scene.is-reset, .scene.is-reset *, .scene.is-reset *::before, .scene.is-reset *::after { transition: none !important; }
/* sonsuz döngülü küçük süsler (.ui-loop sınıfı) sahne oynamıyorken durur — görünmezken boşa boyama yok */
.scene:not(.is-playing) .ui-loop, .scene:not(.is-playing) .ui-loop::before, .scene:not(.is-playing) .ui-loop::after { animation-play-state: paused; }
/* sahne imleci (fare oku): hedefin içine konur, adımda belirir ve tıklar */
.ui-cur { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 6; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transition: opacity .3s var(--ui-ease), transform .5s var(--ui-ease); }
.ui-cur path { fill: #fff; stroke: #10213a; stroke-width: 1.4; stroke-linejoin: round; }
.ui-cur--hand path { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .scene *, .scene *::before, .scene *::after, .slide { transition: none !important; animation: none !important; } }