/* Açık pano: sitenin beyaz/nane zemininden kopmadan, çok hafif naneli yuvarlak pano; motif arkada soluk */
.hero-bg { background:
    radial-gradient(34% 48% at 72% 44%, rgba(0,208,132,.14), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%); }
.hero-stage::before { left: -3%; right: -6%; top: 4%; bottom: -1%; border-radius: 36px; filter: none;
  background:
    radial-gradient(60% 55% at 60% 38%, rgba(0,208,132,.16), transparent 72%),
    radial-gradient(rgba(0,117,78,.09) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, #f3fbf8 0%, #eaf7f1 100%);
  border: 1px solid #dcefe6;
  box-shadow: 0 40px 80px -50px rgba(0,84,58,.35); }
.hero-stage::after { content: ""; position: absolute; z-index: 0; right: -6%; bottom: -1%; width: 46%; height: 60%; border-radius: 0 0 36px 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 162 162'><g fill='%2300D084' fill-opacity='.16' transform='translate(-122 -132)'><path d='M190 160 H249 C254 160 256 163 252 167 L223 195 C219 199 215 201 208 201 H160 C152 201 149 194 155 187 L175 167 C180 162 183 160 190 160 Z'/><path d='M194 223 H232 C242 223 247 233 239 241 L220 260 C216 264 212 266 206 266 H155 C150 266 148 262 152 258 L181 229 C186 224 189 223 194 223 Z'/></g></svg>") right -30px bottom -40px / 300px no-repeat; }
.back-l { background: #f7faf9; opacity: .9; }
.back-r { background: #eaf1ee; opacity: .55; }
.back::after { background: linear-gradient(180deg, rgba(10,42,34,0) 55%, rgba(10,42,34,.35)); }
.front { box-shadow: 0 50px 90px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12); }
.note-hero { color: var(--ink2); }
.note-hero svg { color: var(--green); }
@media (max-width: 640px) { .hero-stage::before { left: -4%; right: -4%; } }
.device { z-index: 1; }
.note-hero { z-index: 2; }
.back-l { width: 220px; height: 420px; left: 3%; top: 120px; }
.back-r { width: 200px; height: 440px; right: -1%; top: 96px; }

/* hareketli demo (React bileşeni, assets/hero-demo.js) panonun ortasında */
.demo-stage { height: auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 30px 28px 22px; }
.demo-stage #hero-demo { position: relative; z-index: 1; width: 100%; max-width: 640px; }
.demo-stage::before { left: 0; right: -2%; top: 0; bottom: 0; }
.demo-stage::after { right: -2%; bottom: 0; }
@media (max-width: 980px) { .demo-stage { min-height: 0; } }
@media (max-width: 640px) { .demo-stage { padding: 36px 12px 28px; } .demo-stage::before { left: -4%; right: -4%; } }
@media (max-width: 640px) { .demo-stage::after { display: none; } }