/* Wallsy mockup videoları - ortak sahne ve cihaz stilleri.
   Tasarım alanı 1080 genişliğinde; yükseklik formata göre 1920 (story) / 1350 (gönderi) / 1080 (kare).
   Marka: wallsy-motion-brief.html (sarı #FFC928, Archivo 800 başlık, IBM Plex arayüz, post-it dokusu). */
:root {
  --yellow:#FFC928; --yellow-press:#F4B900; --ink:#11100F; --cream:#F7F5F0; --border:#E9E5DC;
  --blue:#4F7CFF; --green:#34A853; --red:#EF4444; --muted:#6b665c;
  --p1:#FFF3C4; --p2:#FFD9E8; --p3:#D9E8FF; --p4:#D9F7E3; --p5:#E7D9FF; --p6:#FFE3CC;
  --fd:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fb:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:#0b0a09; overflow:hidden; font-family:var(--fb); }

#stage { position:absolute; left:50%; top:calc(50% - 26px); overflow:hidden; width:var(--w); height:var(--h);
  background:var(--yellow); color:var(--ink); transform-origin:center; transform:translate(-50%,-50%) scale(var(--fit,1)); }
body.render #stage { left:0; top:0; transform:none; }

/* Formata göre yerleşim: Reels arayüzü story'de üstten ~%10, alttan ~%20'yi kapatır (brief §teknik) */
#stage.f-story    { --head-top:236px; --head-size:108px; --dev-top:660px; --dev-h:880px; --tag-top:70px; }
#stage.f-portrait { --head-top:120px; --head-size:88px;  --dev-top:380px; --dev-h:900px; --tag-top:44px; }
#stage.f-square   { --head-top:100px; --head-size:72px;  --dev-top:260px; --dev-h:790px; --tag-top:36px; }

/* Zemin */
#bg { position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 28%, #FFDB62 0%, var(--yellow) 55%, #F2B700 100%); }
#dots { position:absolute; inset:0; background-image:radial-gradient(rgba(17,16,15,.11) 2.5px, transparent 3px); background-size:54px 54px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%); mask-image:linear-gradient(180deg,#000,transparent 72%); }
#tag { position:absolute; left:72px; top:var(--tag-top); display:flex; align-items:center; gap:14px; font-family:var(--fd); font-weight:800;
  font-size:34px; letter-spacing:.04em; z-index:30; }
#tag svg { width:48px; height:48px; }

/* Başlık (kinetik satırlar) */
.head { position:absolute; left:72px; right:72px; top:var(--head-top); font-family:var(--fd); font-weight:800; letter-spacing:-.035em;
  line-height:.98; font-size:var(--head-size); opacity:0; z-index:10; }
.ln { display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.ln > span { display:inline-block; will-change:transform; }
.hl { background:var(--ink); color:var(--yellow); padding:0 .16em; border-radius:.14em; display:inline-block; }
.step { display:inline-block; font-family:var(--fm); font-weight:600; font-size:.27em; letter-spacing:.14em; background:var(--ink); color:var(--yellow);
  padding:.34em .8em; border-radius:999px; margin-bottom:.7em; }

.scene { position:absolute; inset:0; opacity:0; }

/* Post-it notları (markanın dokusu) */
.note { position:absolute; padding:22px 30px; font-family:var(--fd); font-weight:800; font-size:42px; line-height:1.05; letter-spacing:-.02em;
  color:var(--ink); border-radius:6px; box-shadow:0 22px 34px rgba(17,16,15,.26); opacity:0; z-index:25; will-change:transform; }
.note small { display:block; font-family:var(--fb); font-weight:500; font-size:26px; letter-spacing:0; margin-top:8px; opacity:.75; }
.n1 { background:var(--p1); } .n2 { background:var(--p2); } .n3 { background:var(--p3); }
.n4 { background:var(--p4); } .n5 { background:var(--p5); } .n6 { background:var(--p6); }

/* Cihazlar */
.dev { position:absolute; left:0; width:1080px; top:var(--dev-top); height:var(--dev-h); }
.obj { position:absolute; left:50%; top:50%; will-change:transform; }
.tablet { width:1000px; height:640px; margin:-320px 0 0 -500px; background:#15130f; border-radius:50px; padding:16px;
  box-shadow:0 60px 100px rgba(17,16,15,.38), 0 14px 26px rgba(17,16,15,.3); }
.tablet .screen { position:relative; width:100%; height:100%; border-radius:36px; background:var(--cream); overflow:hidden; color:var(--ink); }
.phone { width:430px; height:860px; margin:-430px 0 0 -215px; background:#15130f; border-radius:70px; padding:14px;
  box-shadow:0 60px 100px rgba(17,16,15,.38), 0 14px 26px rgba(17,16,15,.3); }
.phone .screen { position:relative; width:100%; height:100%; border-radius:57px; background:#fff; overflow:hidden; }
.phone .notch { position:absolute; left:50%; top:14px; width:124px; height:34px; margin-left:-62px; border-radius:20px; background:#15130f; z-index:20; }
.tap { position:absolute; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; background:rgba(17,16,15,.22);
  border:5px solid rgba(17,16,15,.5); opacity:0; z-index:40; pointer-events:none; }

/* POS arayüzü (ekran 968x608) */
.pos-top { height:76px; display:flex; align-items:center; gap:18px; padding:0 26px; background:#fff; border-bottom:2px solid var(--border); }
.pos-brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:28px; }
.pos-brand svg { width:40px; height:40px; }
.pills { margin-left:auto; display:flex; gap:10px; }
.pill { font-size:24px; font-weight:600; padding:10px 22px; border-radius:999px; color:var(--muted); }
.pill.on { background:var(--yellow); color:var(--ink); }
.pos-body { display:flex; height:calc(100% - 76px); }
.pos-menu { flex:1; padding:22px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.chips { display:flex; gap:10px; }
.chip { font-size:24px; font-weight:600; padding:10px 20px; border-radius:14px; border:2px solid var(--border); background:#fff; color:var(--muted); }
.chip.on { background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tile { background:#fff; border:2px solid var(--border); border-radius:20px; padding:18px 20px; font-size:26px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tile b { font-family:var(--fm); font-weight:500; color:var(--muted); font-size:23px; }
.pos-cart { width:400px; background:#fff; border-left:2px solid var(--border); padding:22px; display:flex; flex-direction:column; gap:12px; }
.cart-h { font-size:28px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.cart-line { display:flex; justify-content:space-between; gap:12px; font-size:26px; font-weight:600; line-height:1.15; opacity:0; }
.cart-line small { display:block; font-size:20px; font-weight:400; color:#8b8579; margin-top:2px; }
.cart-line b { font-family:var(--fm); font-weight:600; white-space:nowrap; }
.cart-chip { display:none; align-items:center; gap:10px; background:var(--p4); color:#14532d; font-weight:600; font-size:22px; padding:8px 14px; border-radius:14px; }
.sumrow { display:flex; justify-content:space-between; font-size:24px; color:var(--muted); }
.tot { display:flex; justify-content:space-between; font-size:36px; font-weight:800; font-family:var(--fd); border-top:2px solid var(--border); padding-top:12px; margin-top:auto; }
.btn { height:68px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; }
.btn.green { background:var(--green); color:#fff; }
.btn.ghost { border:2px solid var(--border); background:#fff; color:var(--ink); font-size:25px; height:58px; }

/* Müşteri Seç penceresi */
.modal { position:absolute; left:50%; top:50%; width:700px; height:520px; margin:-260px 0 0 -350px; background:#fff; border-radius:34px;
  box-shadow:0 40px 80px rgba(17,16,15,.38); padding:26px 30px; display:flex; flex-direction:column; align-items:center; gap:14px; opacity:0; z-index:15; }
.modal h4 { font-family:var(--fd); font-weight:800; font-size:34px; letter-spacing:-.02em; }
.tabs { display:flex; gap:8px; width:100%; }
.tab { flex:1; text-align:center; font-size:20px; font-weight:600; padding:11px 4px; border-radius:14px; border:2px solid var(--border); color:var(--muted); white-space:nowrap; }
.tab.on { background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.qrbox { background:#fff; border:2px solid var(--border); border-radius:24px; padding:14px; }
.qrbox img { width:262px; height:262px; display:block; }
.modal p { font-size:24px; color:var(--muted); text-align:center; line-height:1.25; }

/* Telefon arayüzü: kamera (QR Tara), üye ol sayfası, tamam ekranı (ekran 402x832) */
  .cam { position:absolute; inset:0; background:#0b0a09; }
.cam-title { position:absolute; top:84px; left:0; right:0; text-align:center; color:#fff; font-family:var(--fd); font-weight:800; font-size:34px; letter-spacing:-.01em; }
.vf { position:absolute; left:51px; top:236px; width:300px; height:300px; }
.vf .c { position:absolute; width:62px; height:62px; border:7px solid #fff; border-radius:14px; }
.vf .tl { left:0; top:0; border-right:0; border-bottom:0; } .vf .tr { right:0; top:0; border-left:0; border-bottom:0; }
.vf .bl { left:0; bottom:0; border-right:0; border-top:0; } .vf .br { right:0; bottom:0; border-left:0; border-top:0; }
.vf .ok .c, .vf.ok .c { border-color:var(--green); }
.qrcard { position:absolute; inset:26px; background:#fff; border-radius:18px; padding:14px; }
.qrcard img { width:100%; height:100%; display:block; }
.scan { position:absolute; left:14px; right:14px; height:6px; border-radius:3px; background:var(--green); box-shadow:0 0 24px 6px rgba(52,168,83,.75); opacity:0; }
.cam-hint { position:absolute; left:0; right:0; top:590px; text-align:center; color:#d7d2c8; font-size:26px; font-weight:500; padding:0 30px; }
.cam-ok { position:absolute; left:0; right:0; top:590px; text-align:center; color:var(--green); font-size:32px; font-weight:700; opacity:0; }

.sheet { position:absolute; left:0; right:0; bottom:0; height:650px; background:#fff; border-radius:46px 46px 0 0; padding:58px 30px 0;
  box-shadow:0 -30px 60px rgba(0,0,0,.25); }
.sheet h3 { font-family:var(--fd); font-weight:800; font-size:40px; letter-spacing:-.03em; }
.sheet .sub { font-size:24px; color:var(--muted); margin:6px 0 22px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:20px; color:var(--muted); margin-bottom:6px; font-weight:500; }
.field .val { height:66px; border:2px solid var(--border); border-radius:18px; padding:0 20px; display:flex; align-items:center; font-size:27px; font-weight:500; background:var(--cream); }
.field .val.on { border-color:var(--ink); background:#fff; }
.sh-btn { margin-top:18px; height:78px; border-radius:22px; background:var(--yellow); color:var(--ink); font-size:29px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.done { position:absolute; inset:0; background:var(--yellow); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 34px; opacity:0; }
.done .ck { width:170px; height:170px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:34px; }
.done .ck svg { width:92px; height:92px; }
.done .ck path { fill:none; stroke:var(--yellow); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; }
.done h3 { font-family:var(--fd); font-weight:800; font-size:48px; letter-spacing:-.035em; line-height:1; }
.done p { font-size:27px; margin-top:16px; font-weight:500; line-height:1.25; }


/* Kapanış sahnesi (koyu zemin, sarı logo) */
#cta { position:absolute; inset:0; background:var(--ink); opacity:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0; color:var(--cream); padding:0 70px; }
#cta img { width:720px; }
#cta h2 { font-family:var(--fd); font-weight:800; font-size:92px; line-height:1; letter-spacing:-.035em; margin-top:70px; }
#cta h2 em { font-style:normal; color:var(--yellow); }
#cta .url { margin-top:56px; background:var(--yellow); color:var(--ink); font-family:var(--fd); font-weight:800; font-size:48px; padding:22px 52px; border-radius:999px; letter-spacing:-.01em; }

/* Önizleme kontrolleri (video çıktısında gizli) */
#controls { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:#1c1a17; border:1px solid #39352f; border-radius:12px; color:#eee; font:13px var(--fb); z-index:100; }
#controls button, #controls select, #controls a { background:#2a2723; color:#eee; border:1px solid #44403a; border-radius:8px; padding:6px 10px; cursor:pointer; text-decoration:none; font:inherit; }
#controls input[type=range] { width:320px; }
body.render #controls { display:none; }