/* Wallsy Motion - video motoru stilleri (bkz engine.js, katalog.js).
   Ekran içi bileşenler `em` ile boyutlanır; cihaz türü temel yazı boyutunu belirler. */

/* ---- Temalar (zemin + başlık renkleri) ---- */
#stage.th-cream  #bg { background:radial-gradient(120% 80% at 50% 28%, #FFFFFF 0%, #F7F5F0 58%, #ECE7DA 100%); }
#stage.th-ink    #bg { background:radial-gradient(120% 80% at 50% 28%, #2a251f 0%, #15130f 58%, #0b0a09 100%); }
#stage.th-blue   #bg { background:radial-gradient(120% 80% at 50% 28%, #F0F5FF 0%, #D9E8FF 58%, #BBD3FF 100%); }
#stage.th-pink   #bg { background:radial-gradient(120% 80% at 50% 28%, #FFF0F6 0%, #FFD9E8 58%, #FFBBD5 100%); }
#stage.th-green  #bg { background:radial-gradient(120% 80% at 50% 28%, #F0FFF5 0%, #D9F7E3 58%, #B5EBC8 100%); }
#stage.th-purple #bg { background:radial-gradient(120% 80% at 50% 28%, #F6F0FF 0%, #E7D9FF 58%, #D0BBFF 100%); }
#stage.th-orange #bg { background:radial-gradient(120% 80% at 50% 28%, #FFF5EC 0%, #FFE3CC 58%, #FFC9A0 100%); }
#stage.th-ink { color:var(--cream); }
#stage.th-ink .head { color:var(--cream); }
#stage.th-ink .hl, #stage.th-ink .step { background:var(--yellow); color:var(--ink); }
#stage.th-ink #tag { color:var(--cream); }
#stage.th-ink #dots { background-image:radial-gradient(rgba(247,245,240,.09) 2.5px, transparent 3px); }
#stage:not(.th-yellow):not(.th-ink) .hl { background:var(--ink); color:#fff; }
#stage.th-cream .hl { background:var(--yellow); color:var(--ink); }
#stage.th-cream #dots { opacity:.6; }

/* karalama süsleri (brief: %7-13 opaklık, mesajla yarışmaz) */
#doodles { position:absolute; inset:0; pointer-events:none; }
.dd { position:absolute; width:170px; height:170px; opacity:.11; fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
#stage.th-ink .dd { stroke:var(--cream); opacity:.09; }

/* ---- Cihaz kabukları ---- */
.ph-head { position:absolute; left:0; right:0; top:54px; height:74px; display:flex; align-items:center; gap:14px; padding:0 26px; font-family:var(--fd); font-weight:800; font-size:32px;
  letter-spacing:-.02em; border-bottom:2px solid var(--border); background:#fff; z-index:5; }
.ph-head i { width:14px; height:14px; border-radius:50%; background:var(--yellow); flex:none; }
.ui { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:.5em; padding:.8em; overflow:hidden; }
.ui.cols2 { display:grid; grid-template-columns:1fr 1fr; align-content:start; }
.ui.cols2 .b-wide { grid-column:1 / -1; }
.tabletui { top:76px; font-size:26px; background:var(--cream); }
.phoneui { top:128px; bottom:84px; font-size:24px; background:#fff; padding:.7em; }
.phone-bg-cream .phoneui { background:var(--cream); }
.monui { top:74px; font-size:27px; background:#15130f; color:var(--cream); }
.plain { width:940px; margin:0; }
.plain .ui { position:relative; font-size:34px; padding:0; gap:.6em; overflow:visible; }
.plain .b-row, .plain .b-card, .plain .b-stat, .plain .b-bar, .plain .b-chart, .plain .b-post, .plain .b-steps, .plain .b-grid, .plain .b-receipt { box-shadow:0 18px 40px rgba(17,16,15,.16); }

/* ---- Ekran içi bileşenler ---- */
.b { opacity:0; will-change:transform,opacity; position:relative; }
.b-title { font-family:var(--fd); font-weight:800; font-size:1.3em; letter-spacing:-.025em; line-height:1.05; }
.b-title small { display:block; font-family:var(--fb); font-weight:500; font-size:.6em; letter-spacing:0; color:var(--muted); margin-top:.25em; }
.monui .b-title small { color:#9a9388; }
.b-text { font-size:.95em; line-height:1.3; color:var(--muted); font-weight:500; }
.b-row { display:flex; justify-content:space-between; align-items:center; gap:.6em; background:#fff; border:2px solid var(--border); border-radius:.7em; padding:.5em .75em; font-weight:600; color:var(--ink); transition:none; }
.b-row .l { display:flex; align-items:center; min-width:0; gap:.55em; }
.b-row small { display:block; font-weight:400; color:#8b8579; font-size:.74em; margin-top:.05em; }
.b-row .r { font-family:var(--fm); font-weight:600; white-space:nowrap; }
.b-row .r.g { color:#1e7a39; } .b-row .r.rd { color:#c2382f; } .b-row .r.m { color:var(--muted); }
.b-row .av { width:1.75em; height:1.75em; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85em; flex:none; }
.b-row .ic { font-size:1.15em; flex:none; }
.b-row.hot { background:#FFF3C4; border-color:var(--yellow); }
.monui .b-row { background:#221f1b; border-color:#2f2b26; color:var(--cream); }
.monui .b-row small { color:#9a9388; }
.b-stat { background:#fff; border:2px solid var(--border); border-radius:.8em; padding:.6em .8em; color:var(--ink); }
.b-stat .l { font-size:.7em; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.b-stat .v { font-family:var(--fd); font-weight:800; font-size:1.75em; letter-spacing:-.03em; line-height:1.05; }
.b-stat .d { display:inline-block; margin-left:.4em; font-family:var(--fm); font-size:.5em; font-weight:600; background:var(--p4); color:#14532d; padding:.15em .55em; border-radius:999px; vertical-align:middle; }
.b-stat .d.rd { background:#FFE0DC; color:#8c1d14; }
.b-bar { background:#fff; border:2px solid var(--border); border-radius:.7em; padding:.5em .75em; color:var(--ink); }
.b-bar .top { display:flex; justify-content:space-between; font-weight:600; gap:.5em; }
.b-bar .top span:last-child { font-family:var(--fm); font-weight:600; }
.b-bar .trk { height:.5em; background:#EFEBE1; border-radius:999px; margin-top:.4em; overflow:hidden; }
.b-bar .fill { height:100%; background:var(--green); border-radius:999px; }
.b-bar.low .fill { background:#EF4444; }
.b-bar.low .top span:last-child { color:#c2382f; }
.b-bar small { display:block; font-size:.7em; color:#8b8579; margin-top:.25em; }
.b-chips { display:flex; flex-wrap:wrap; gap:.4em; }
.b-chips span { font-size:.85em; font-weight:600; padding:.4em .8em; border:2px solid var(--border); border-radius:.8em; background:#fff; color:var(--muted); }
.b-chips span.on { background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.monui .b-chips span { background:#221f1b; border-color:#2f2b26; color:#b9b2a5; }
.monui .b-chips span.on { background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.b-btn { height:2.3em; border-radius:.8em; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05em; }
.b-btn.green { background:var(--green); color:#fff; } .b-btn.yellow { background:var(--yellow); color:var(--ink); }
.b-btn.ink { background:var(--ink); color:var(--yellow); } .b-btn.ghost { background:#fff; border:2px solid var(--border); color:var(--ink); }
.b-toggle { display:flex; justify-content:space-between; align-items:center; gap:.6em; background:#fff; border:2px solid var(--border); border-radius:.7em; padding:.5em .75em; font-weight:600; color:var(--ink); }
.b-toggle small { display:block; font-weight:400; color:#8b8579; font-size:.74em; }
.b-toggle .sw { width:2.3em; height:1.3em; border-radius:999px; background:#d8d2c4; position:relative; flex:none; }
.b-toggle .sw i { position:absolute; top:.15em; left:.15em; width:1em; height:1em; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.25); }
.b-toggle.on .sw { background:var(--green); }
.b-chat { display:flex; flex-direction:column; gap:.4em; }
.bub { max-width:82%; padding:.5em .8em; border-radius:1em; font-size:.92em; font-weight:500; line-height:1.25; opacity:0; background:#F1EEE6; color:var(--ink); align-self:flex-start; border-bottom-left-radius:.25em; }
.bub b { display:block; font-size:.72em; font-weight:700; color:var(--muted); margin-bottom:.1em; }
.bub.me { align-self:flex-end; background:var(--yellow); border-bottom-left-radius:1em; border-bottom-right-radius:.25em; }
.b-post { background:#fff; border:2px solid var(--border); border-radius:.9em; padding:.7em .8em; color:var(--ink); }
.b-post .who { display:flex; align-items:center; gap:.55em; font-weight:700; }
.b-post .who small { display:block; font-weight:400; color:#8b8579; font-size:.72em; }
.b-post .av { width:2em; height:2em; border-radius:50%; background:var(--p3); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85em; }
.b-post p { margin:.5em 0; font-size:.95em; line-height:1.3; font-weight:500; }
.b-post .tags { display:flex; gap:.4em; flex-wrap:wrap; align-items:center; }
.b-post .tag { font-size:.78em; font-weight:700; background:var(--p5); padding:.2em .6em; border-radius:999px; }
.b-post .venue { font-size:.78em; font-weight:700; background:var(--yellow); padding:.2em .6em; border-radius:999px; }
.b-post .likes { margin-left:auto; font-family:var(--fm); font-size:.8em; font-weight:600; color:#c2382f; }
.b-grid { background:#fff; border:2px solid var(--border); border-radius:.8em; padding:.5em; color:var(--ink); }
.b-grid table { width:100%; border-collapse:separate; border-spacing:.25em; font-size:.78em; font-weight:700; text-align:center; }
.b-grid td, .b-grid th { padding:.35em .2em; border-radius:.45em; background:#F4F1E9; min-width:1.6em; }
.b-grid th { background:transparent; color:var(--muted); font-weight:600; }
.b-grid td:first-child { text-align:left; background:transparent; padding-left:.3em; white-space:nowrap; }
.b-grid td.c1 { background:var(--p4); } .b-grid td.c2 { background:var(--p3); } .b-grid td.c3 { background:var(--p1); } .b-grid td.c4 { background:var(--p2); }
.b-grid td.pop { opacity:0; }
.b-qr { align-self:center; background:#fff; border:2px solid var(--border); border-radius:.8em; padding:.5em; }
.b-qr img { width:8em; height:8em; display:block; }
.b-tiles { display:grid; grid-template-columns:1fr 1fr; gap:.4em; }
.b-tiles div { background:#fff; border:2px solid var(--border); border-radius:.7em; padding:.5em .7em; font-weight:600; display:flex; justify-content:space-between; gap:.4em; color:var(--ink); }
.b-tiles div b { font-family:var(--fm); font-weight:500; color:var(--muted); font-size:.85em; }
.b-tiles div.hot { background:var(--yellow); border-color:var(--yellow); }
.b-card { background:#fff; border:2px solid var(--border); border-radius:.9em; padding:.6em .8em; display:flex; gap:.7em; align-items:flex-start; color:var(--ink); }
.b-card .ic { font-size:1.6em; line-height:1; flex:none; }
.b-card b { display:block; font-weight:700; font-size:1em; }
.b-card small { display:block; font-weight:500; color:var(--muted); font-size:.78em; margin-top:.15em; line-height:1.25; }
.b-card .badge { margin-left:auto; flex:none; font-size:.72em; font-weight:700; background:var(--p4); color:#14532d; padding:.2em .6em; border-radius:999px; white-space:nowrap; }
.monui .b-card { background:#221f1b; border-color:#2f2b26; color:var(--cream); }
.b-steps { background:#fff; border:2px solid var(--border); border-radius:.8em; padding:.4em .75em; color:var(--ink); }
.b-steps .st { display:flex; align-items:center; gap:.6em; padding:.4em 0; font-weight:600; border-bottom:1px solid #EFEBE1; }
.b-steps .st:last-child { border-bottom:0; }
.b-steps .ck { width:1.4em; height:1.4em; border-radius:50%; border:2px solid #d8d2c4; display:flex; align-items:center; justify-content:center; font-size:.8em; color:transparent; flex:none; }
.b-steps .st.done .ck { background:var(--green); border-color:var(--green); color:#fff; }
.b-receipt { background:#fff; border:2px dashed #d8d2c4; border-radius:.6em; padding:.6em .8em; font-family:var(--fm); font-size:.85em; color:var(--ink); }
.b-receipt .ln2 { display:flex; justify-content:space-between; padding:.12em 0; opacity:0; }
.b-receipt .tot2 { display:flex; justify-content:space-between; font-weight:700; border-top:2px solid var(--ink); margin-top:.3em; padding-top:.3em; font-size:1.1em; }
.b-avatars { display:flex; align-items:center; }
.b-avatars i { width:2.1em; height:2.1em; border-radius:50%; border:3px solid #fff; margin-left:-.5em; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.8em; color:var(--ink); }
.b-avatars i:first-child { margin-left:0; }
.b-avatars span { margin-left:.6em; font-weight:700; }
.b-chart { background:#fff; border:2px solid var(--border); border-radius:.8em; padding:.5em .7em .4em; color:var(--ink); }
.b-chart .ct { font-size:.72em; font-weight:600; color:var(--muted); margin-bottom:.2em; display:flex; justify-content:space-between; }
.b-chart svg { width:100%; display:block; overflow:visible; }
.b-toast { position:absolute; left:.8em; right:.8em; top:.6em; padding:.6em .9em; border-radius:.8em; font-weight:700; font-size:.98em; color:#fff; background:var(--green); box-shadow:0 14px 26px rgba(52,168,83,.4); z-index:20; opacity:0; }
.b-toast.ink { background:var(--ink); color:var(--yellow); box-shadow:0 14px 26px rgba(17,16,15,.4); }
.b-toast.yellow { background:var(--yellow); color:var(--ink); box-shadow:0 14px 26px rgba(244,185,0,.45); }
.b-toast.red { background:#EF4444; box-shadow:0 14px 26px rgba(239,68,68,.4); }

/* tam ekran sahne türleri */
.sc-full { position:absolute; inset:0; opacity:0; }
.chaos-note { position:absolute; width:340px; padding:26px 28px; font-family:var(--fd); font-weight:800; font-size:40px; line-height:1.05; letter-spacing:-.02em; color:var(--ink);
  border-radius:6px; box-shadow:0 26px 40px rgba(17,16,15,.3); opacity:0; will-change:transform; }
.chaos-note small { display:block; font-family:var(--fb); font-weight:500; font-size:24px; margin-top:8px; opacity:.7; letter-spacing:0; }
.marq { position:absolute; left:0; white-space:nowrap; will-change:transform; }
.marq span { display:inline-block; margin-right:18px; padding:18px 34px; border-radius:999px; font-family:var(--fd); font-weight:800; font-size:40px; letter-spacing:-.02em; background:#fff; color:var(--ink); box-shadow:0 14px 26px rgba(17,16,15,.14); }
.marq span.y { background:var(--yellow); } .marq span.k { background:var(--ink); color:var(--yellow); }
.bignum { position:absolute; left:72px; right:72px; text-align:left; }
.bignum .n { font-family:var(--fd); font-weight:800; font-size:340px; line-height:.9; letter-spacing:-.06em; }
.bignum .c { font-family:var(--fd); font-weight:800; font-size:76px; line-height:1; letter-spacing:-.035em; margin-top:10px; }
.cmp { position:absolute; left:72px; right:72px; display:flex; flex-direction:column; gap:26px; }
.cmp .col { background:#fff; border-radius:34px; padding:34px 38px; box-shadow:0 26px 50px rgba(17,16,15,.16); color:var(--ink); }
.cmp .col h5 { font-family:var(--fd); font-weight:800; font-size:48px; letter-spacing:-.03em; margin-bottom:14px; }
.cmp .col.bad h5 { color:#c2382f; } .cmp .col.good h5 { color:#1e7a39; }
.cmp .it { font-size:34px; font-weight:600; padding:9px 0; display:flex; gap:16px; align-items:flex-start; line-height:1.15; opacity:0; }
.cmp .it i { font-style:normal; font-weight:800; flex:none; width:1.1em; }
.lst { position:absolute; left:72px; right:72px; display:flex; flex-direction:column; gap:18px; }
.lst .it { display:flex; gap:22px; align-items:center; background:#fff; border-radius:30px; padding:26px 32px; box-shadow:0 22px 40px rgba(17,16,15,.14); font-family:var(--fd); font-weight:800; font-size:44px; letter-spacing:-.025em; line-height:1.05; color:var(--ink); opacity:0; }
.lst .it small { display:block; font-family:var(--fb); font-weight:500; font-size:27px; letter-spacing:0; color:var(--muted); margin-top:6px; line-height:1.2; }
.lst .it .ck { width:66px; height:66px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800; flex:none; }
.th-ink .lst .it { background:#221f1b; color:var(--cream); } .th-ink .lst .it small { color:#b9b2a5; }
.lst .it.n .ck { background:var(--ink); color:var(--yellow); font-family:var(--fm); font-size:30px; }

/* kanca notlarının alt boşluğu */
#stage.f-story    { --nb:440px; }
#stage.f-portrait { --nb:130px; }
#stage.f-square   { --nb:80px; }

/* monitör (müşteri ekranı) */
.monitor { width:1000px; height:700px; margin:-350px 0 0 -500px; }
.mon-screen { position:relative; width:1000px; height:610px; background:#15130f; border-radius:32px; border:14px solid #2a2622; overflow:hidden;
  box-shadow:0 60px 100px rgba(17,16,15,.38), 0 14px 26px rgba(17,16,15,.3); color:#F7F5F0; }
.mon-neck { position:absolute; left:50%; top:606px; width:130px; height:64px; margin-left:-65px; background:linear-gradient(#2a2622,#1d1a17); }
.mon-base { position:absolute; left:50%; top:664px; width:360px; height:26px; margin-left:-180px; border-radius:14px; background:#2a2622; box-shadow:0 18px 30px rgba(17,16,15,.3); }
.d-head { height:74px; display:flex; align-items:center; gap:14px; padding:0 26px; background:#1c1916; font-family:var(--fd); font-weight:800; font-size:30px; border-bottom:1px solid #2c2823; }
.d-head svg { width:40px; height:40px; }

.b-cols { display:grid; grid-template-columns:1fr 1fr; gap:.5em; align-items:start; }
.b-cols .col { display:flex; flex-direction:column; gap:.5em; min-width:0; }

.cmp .col.good .it i { color:#1e7a39; } .cmp .col.bad .it i { color:#c2382f; }
.lst .it .ck.e { background:var(--p1); font-size:38px; }

.ph-nav { position:absolute; left:0; right:0; bottom:0; height:84px; background:#fff; border-top:2px solid var(--border); display:flex; align-items:center; justify-content:space-around; padding-bottom:14px; z-index:6; }
.ph-nav span { font-size:32px; color:#b7b1a3; width:64px; text-align:center; }
.ph-nav span.on { color:var(--ink); }