/* ===== 1 TEK PANEL — soft crossfades + #4 Kasa POS ===== */
.v1 { --cycle: 22s; background: #07090c; }
.v1 .story { position:absolute; inset:0; }
.v1 .beat {
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
}
.v1 .b-web { animation:v1beatWeb var(--cycle) linear infinite; }
.v1 .b-kasa { animation:v1beatKasa var(--cycle) linear infinite; }
.v1 .b-masa { animation:v1beatMasa var(--cycle) linear infinite; }
.v1 .b-final { animation:v1beatFinal var(--cycle) linear infinite; }
/* intro 0–12 · web 12–34 · kasa 34–56 · masa 56–76 · final 76–100
   soft ~3–4% crossfade ramps between screens */
@keyframes v1beatWeb {
  0%,11%{opacity:0;visibility:hidden}
  12%{opacity:0;visibility:visible}
  16%{opacity:1}
  30%{opacity:1}
  34%{opacity:0}
  35%,100%{opacity:0;visibility:hidden}
}
@keyframes v1beatKasa {
  0%,33%{opacity:0;visibility:hidden}
  34%{opacity:0;visibility:visible}
  38%{opacity:1}
  52%{opacity:1}
  56%{opacity:0}
  57%,100%{opacity:0;visibility:hidden}
}
@keyframes v1beatMasa {
  0%,55%{opacity:0;visibility:hidden}
  56%{opacity:0;visibility:visible}
  60%{opacity:1}
  72%{opacity:1}
  76%{opacity:0}
  77%,100%{opacity:0;visibility:hidden}
}
@keyframes v1beatFinal {
  0%,75%{opacity:0;visibility:hidden;transform:scale(1.03)}
  76%{opacity:0;visibility:visible;transform:scale(1.03)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:1;visibility:visible;transform:scale(1)}
}
.v1 .shot {
  position:absolute; inset:0; overflow:hidden;
  animation:v1in var(--cycle) linear infinite;
}
.v1 .b-web .shot { animation-name:v1inWeb; background:#f4f5f7; }
.v1 .b-kasa .shot { animation-name:v1inKasa; background:#12151c; }
.v1 .b-masa .shot { animation-name:v1inMasa; background:#f5f5f5; }
@keyframes v1inWeb {
  0%,12%{opacity:.55;transform:scale(1.025)}
  17%{opacity:1;transform:scale(1)}
  30%,100%{opacity:1;transform:scale(1)}
}
@keyframes v1inKasa {
  0%,34%{opacity:.55;transform:scale(1.025)}
  39%{opacity:1;transform:scale(1)}
  52%,100%{opacity:1;transform:scale(1)}
}
@keyframes v1inMasa {
  0%,56%{opacity:.55;transform:scale(1.025)}
  61%{opacity:1;transform:scale(1)}
  72%,100%{opacity:1;transform:scale(1)}
}
.v1 .caption {
  position:absolute; left:1rem; bottom:1rem; z-index:8;
  display:flex; flex-direction:column; gap:.15rem;
  padding:.5rem .7rem; border-radius:12px;
  background:rgba(10,12,16,.88); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.v1 .b-web .caption { border-color:rgba(126,182,255,.45); animation:v1capWeb var(--cycle) linear infinite; }
.v1 .b-kasa .caption { border-color:rgba(125,255,178,.4); animation:v1capKasa var(--cycle) linear infinite; }
.v1 .b-masa .caption { border-color:rgba(255,200,107,.45); animation:v1capMasa var(--cycle) linear infinite; }
.v1 .caption .n { font:800 .5rem Outfit,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.v1 .b-web .caption .n{color:#a8cfff} .v1 .b-kasa .caption .n{color:#9dffc4} .v1 .b-masa .caption .n{color:#ffc86b}
.v1 .caption strong { font:800 clamp(1.25rem,3vw,1.85rem) Outfit,sans-serif; color:#fff; }
.v1 .caption span { font-size:.65rem; color:var(--muted); font-weight:600; }
@keyframes v1capWeb {
  0%,13%{opacity:0;transform:translateY(10px)} 17%{opacity:1;transform:none} 30%,100%{opacity:1}
}
@keyframes v1capKasa {
  0%,35%{opacity:0;transform:translateY(10px)} 39%{opacity:1;transform:none} 52%,100%{opacity:1}
}
@keyframes v1capMasa {
  0%,57%{opacity:0;transform:translateY(10px)} 61%{opacity:1;transform:none} 72%,100%{opacity:1}
}
.v1 .rail {
  position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%);
  display:flex; gap:.35rem; z-index:9;
}
.v1 .rail i { width:34px; height:4px; border-radius:99px; background:rgba(255,255,255,.14); transition:none; }
.v1 .rail i:nth-child(1){animation:v1r1 var(--cycle) linear infinite}
.v1 .rail i:nth-child(2){animation:v1r2 var(--cycle) linear infinite}
.v1 .rail i:nth-child(3){animation:v1r3 var(--cycle) linear infinite}
.v1 .rail i:nth-child(4){animation:v1r4 var(--cycle) linear infinite}
@keyframes v1r1 {
  0%,12%{background:rgba(255,255,255,.14)} 16%,30%{background:#7eb6ff} 34%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v1r2 {
  0%,34%{background:rgba(255,255,255,.14)} 38%,52%{background:#7dffb2} 56%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v1r3 {
  0%,56%{background:rgba(255,255,255,.14)} 60%,72%{background:#ffc86b} 76%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v1r4 {
  0%,76%{background:rgba(255,255,255,.14)} 80%,100%{background:var(--brand)}
}

/* #4 Kasa POS embed — static filled cart, no pay flow */
.v1 .v1-pos-embed {
  position:absolute; inset:0;
  --cycle: 13.5s;
  --kasa-red: #e53935;
  --kasa-green: #2eaf5a;
  --kasa-ink: #1c2430;
  --kasa-muted: #7a8494;
  --kasa-bg: #eceff3;
  --kasa-blue: #2f6fed;
  background: #12151c;
}
.v1 .v1-pos-embed .kasa-stage {
  animation: none !important;
  transform: none !important;
  padding: 1.2% 1.5%;
}
.v1 .v1-pos-embed .pay-layer,
.v1 .v1-pos-embed .pay-success { display:none !important; }
.v1 .v1-pos-embed .cart-empty { display:none !important; opacity:0 !important; }
.v1 .v1-pos-embed .tile,
.v1 .v1-pos-embed .tile.hit,
.v1 .v1-pos-embed .cart-row,
.v1 .v1-pos-embed .btn-pay,
.v1 .v1-pos-embed .btn-clear,
.v1 .v1-pos-embed .sale,
.v1 .v1-pos-embed .qty {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.v1 .v1-pos-embed .tile.hit {
  outline: 2px solid rgba(229,57,53,.55);
  outline-offset: -2px;
}

/* —— WEB UI (purple storefront) —— */
.v1 .ui-web {
  position:absolute; inset:0; display:flex; flex-direction:column;
  color:#111; font-family:Outfit,"IBM Plex Sans",sans-serif; background:#f4f5f7;
}
.v1 .w-top {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.45rem .7rem; background:#fff; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
.v1 .w-brand { display:flex; align-items:center; gap:.4rem; font:800 .78rem Outfit,sans-serif; }
.v1 .w-brand i {
  width:28px; height:28px; border-radius:8px; background:#6d28d9; color:#fff;
  display:grid; place-items:center; font-style:normal; font-weight:800;
}
.v1 .w-meta { display:flex; gap:.35rem; align-items:center; font-size:.52rem; font-weight:600; color:#4b5563; }
.v1 .w-meta .pill {
  padding:.2rem .45rem; border-radius:99px; border:1px solid #e5e7eb; background:#f9fafb;
}
.v1 .w-hero {
  margin:.5rem .7rem 0; border-radius:12px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(115deg,#1a1d24 0%,#3b1f3a 45%,#111827 100%);
  color:#fff; padding:.85rem 1rem; display:grid; grid-template-columns:1.2fr .8fr; gap:.6rem; align-items:center;
  min-height:110px;
}
.v1 .w-hero h3 { margin:0 0 .25rem; font:800 1.15rem Outfit,sans-serif; letter-spacing:-.02em; }
.v1 .w-hero p { margin:0 0 .5rem; font-size:.58rem; color:rgba(255,255,255,.75); font-weight:600; }
.v1 .w-hero .cta {
  display:inline-block; background:#2563eb; color:#fff; font:800 .62rem Outfit,sans-serif;
  padding:.4rem .7rem; border-radius:8px;
  animation:v1cta var(--cycle) var(--punch) infinite;
}
@keyframes v1cta {
  0%,16%{transform:scale(1)} 20%{transform:scale(1.04)} 24%,100%{transform:scale(1)}
}
.v1 .w-hero .viz {
  height:78px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#111827;
}
.v1 .w-hero .viz img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.v1 .w-body { flex:1; min-height:0; padding:.5rem .7rem; display:grid; grid-template-columns:1fr 200px; gap:.5rem; }
.v1 .w-cats { display:flex; gap:.25rem; flex-wrap:wrap; margin-bottom:.4rem; }
.v1 .w-cats span {
  font:700 .5rem Outfit,sans-serif; padding:.2rem .45rem; border-radius:99px;
  background:#e5e7eb; color:#374151;
}
.v1 .w-cats span.on { background:#111827; color:#fff; }
.v1 .w-search {
  background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:.35rem .5rem;
  font-size:.55rem; color:#9ca3af; font-weight:600; margin-bottom:.4rem;
}
.v1 .w-prods { display:flex; flex-direction:column; gap:.35rem; }
.v1 .wp {
  display:grid; grid-template-columns:56px 1fr auto; gap:.45rem; align-items:center;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:.4rem;
  opacity:0; animation:v1wp var(--cycle) var(--snap) infinite;
}
.v1 .wp:nth-child(1){animation-delay:0s}
.v1 .wp:nth-child(2){animation-delay:.1s}
.v1 .wp:nth-child(3){animation-delay:.2s}
@keyframes v1wp {
  0%,14%{opacity:0;transform:translateY(6px)} 18%{opacity:1;transform:none} 30%,100%{opacity:1}
}
.v1 .wp .ph {
  width:56px; height:48px; border-radius:8px; overflow:hidden;
  background:#e5e7eb; flex-shrink:0;
}
.v1 .wp .ph img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.v1 .wp strong { display:block; font:800 .68rem Outfit,sans-serif; }
.v1 .wp em { font-style:normal; font-size:.5rem; color:#6b7280; font-weight:600; }
.v1 .wp .add {
  background:#111827; color:#fff; font:800 .55rem Outfit,sans-serif;
  padding:.35rem .5rem; border-radius:8px; white-space:nowrap;
}
.v1 .w-side {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.5rem;
  font-size:.52rem;
}
.v1 .w-side h4 { margin:0 0 .35rem; font:800 .65rem Outfit,sans-serif; }
.v1 .w-side li {
  list-style:none; display:flex; justify-content:space-between; padding:.28rem 0;
  border-bottom:1px solid #f3f4f6; font-weight:600; color:#4b5563;
}
.v1 .w-side .ok{color:#16a34a} .v1 .w-side .no{color:#dc2626}
.v1 .w-side ul { margin:0; padding:0; }

/* —— MASA UI (tables.html dili) —— */
.v1 .ui-masa {
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#f5f5f5; color:#111; font-family:Outfit,"IBM Plex Sans",sans-serif;
}
.v1 .m-top {
  height:40px; background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between; padding:0 .65rem; flex-shrink:0;
}
.v1 .m-brand { display:flex; align-items:center; gap:.35rem; font:800 .7rem Outfit,sans-serif; }
.v1 .m-brand i {
  width:24px; height:24px; border-radius:7px; background:#6d28d9; color:#fff;
  display:grid; place-items:center; font-style:normal; font-weight:800; font-size:.65rem;
}
.v1 .m-tabs { display:flex; gap:.25rem; }
.v1 .m-tabs span {
  font:700 .52rem Outfit,sans-serif; padding:.25rem .45rem; border-radius:8px;
  border:1px solid #e5e7eb; background:#fff; color:#374151;
}
.v1 .m-tabs span.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.v1 .m-tool {
  margin:.4rem .55rem 0; padding:.3rem .45rem; background:#fff; border-radius:10px;
  border:1px solid #e5e7eb; display:flex; justify-content:space-between; flex-shrink:0;
}
.v1 .m-chip {
  font:700 .5rem Outfit,sans-serif; padding:.18rem .4rem; border-radius:99px;
  border:1px solid #e5e7eb; background:#f9fafb; color:#4b5563; margin-right:.2rem;
}
.v1 .m-chip.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.v1 .m-ban {
  margin:.35rem .55rem 0; padding:.3rem .5rem; background:#fff; border:1px solid #e5e7eb;
  border-radius:9px; display:flex; justify-content:space-between; font:800 .62rem Outfit,sans-serif; flex-shrink:0;
}
.v1 .m-ban em { font-style:normal; color:#6b7280; font-weight:600; font-size:.52rem; }
.v1 .m-grid {
  flex:1; margin:.4rem .55rem .85rem; display:grid; grid-template-columns:repeat(4,1fr);
  gap:.35rem; align-content:start; min-height:0;
}
.v1 .mc {
  background:#fff; border:1.5px solid #e5e7eb; border-radius:11px; padding:.4rem .45rem;
  min-height:68px; position:relative; box-shadow:0 1px 3px rgba(0,0,0,.04);
  opacity:0; animation:v1mc var(--cycle) var(--snap) infinite;
}
.v1 .mc:nth-child(1){animation-delay:0s}
.v1 .mc:nth-child(2){animation-delay:.05s}
.v1 .mc:nth-child(3){animation-delay:.1s}
.v1 .mc:nth-child(4){animation-delay:.15s}
.v1 .mc:nth-child(5){animation-delay:.2s}
.v1 .mc:nth-child(6){animation-delay:.25s}
.v1 .mc:nth-child(7){animation-delay:.3s}
.v1 .mc:nth-child(8){animation-delay:.35s}
@keyframes v1mc {
  0%,57%{opacity:0;transform:translateY(6px)} 62%{opacity:1;transform:none} 72%,100%{opacity:1}
}
.v1 .mc.bos{border-color:#86efac}
.v1 .mc.dolu{border-color:#fca5a5}
.v1 .mc.hesap{border-color:#fbbf24}
.v1 .mc .bdg {
  position:absolute; top:.3rem; right:.3rem; font:800 .4rem Outfit,sans-serif;
  padding:.1rem .28rem; border-radius:99px;
}
.v1 .bdg.bos{background:#ecfdf5;color:#15803d}
.v1 .bdg.dolu{background:#fff1f0;color:#b91c1c}
.v1 .bdg.hesap{background:#fffbeb;color:#b45309}
.v1 .mc h4 { margin:0 0 .1rem; font:800 .72rem Outfit,sans-serif; padding-right:2rem; }
.v1 .mc p { margin:0; font-size:.45rem; color:#6b7280; font-weight:600; }
.v1 .mc .amt { margin-top:.3rem; font:800 .72rem Outfit,sans-serif; }
.v1 .mc.bos .amt{color:#15803d}

/* Final */
.v1 .finale {
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(ellipse 55% 50% at 50% 40%, rgba(var(--brand-rgb),.18), transparent 60%),
    linear-gradient(165deg,#12151c,#07090c 60%);
  padding:6%;
}
.v1 .finale-inner { width:min(92%,560px); text-align:center; }
.v1 .finale-kicker {
  margin:0 0 .55rem; font:800 .65rem Outfit,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
}
.v1 .finale-title {
  margin:0 0 1rem; font:800 clamp(1.45rem,3.6vw,2.2rem) Outfit,sans-serif;
  letter-spacing:-.02em; color:#fff; line-height:1.15;
}
.v1 .names { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.v1 .names li {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem .85rem; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  font:700 clamp(.95rem,2.2vw,1.2rem) Outfit,sans-serif; color:#fff;
  opacity:0; transform:translateX(-12px);
  animation:v1name var(--cycle) var(--punch) infinite;
}
.v1 .names li:nth-child(1){animation-delay:0s;border-color:rgba(126,182,255,.35)}
.v1 .names li:nth-child(2){animation-delay:.12s;border-color:rgba(125,255,178,.35)}
.v1 .names li:nth-child(3){animation-delay:.24s;border-color:rgba(255,200,107,.35)}
.v1 .names li em { font-style:normal; font-size:.72em; font-weight:800; letter-spacing:.05em; }
.v1 .names li:nth-child(1) em{color:#a8cfff}
.v1 .names li:nth-child(2) em{color:#9dffc4}
.v1 .names li:nth-child(3) em{color:#ffc86b}
.v1 .names li span { color:var(--muted); font-size:.65em; font-weight:600; }
@keyframes v1name {
  0%,77%{opacity:0;transform:translateX(-12px)}
  81%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v1 .finale-line {
  margin:1.1rem 0 0; font:800 .85rem Outfit,sans-serif; color:#7dffb2;
  opacity:0; animation:v1fline var(--cycle) var(--punch) infinite;
}
@keyframes v1fline {
  0%,82%{opacity:0;transform:translateY(8px)}
  86%{opacity:1;transform:none}
  100%{opacity:1}
}