/*
 * Pano canlı demo — laptoptaki panelden "Kış Menüsü" yayınlanır, duvardaki 3 ekran anında değişir.
 * 12 saniyelik tek CSS zaman çizelgesi. Kullanım ve ayarlar: README.md
 * Renkler/yazı tipi aşağıdaki değişkenlerden değiştirilebilir.
 */
.pdemo {
    --pdemo-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pdemo-font-display: var(--pdemo-font);
    --pdemo-radius: 18px;
}
.pdemo, .pdemo * { box-sizing: border-box; }
.pdemo img { max-width: none; }
/* ==========================================================================
   Pano live demo (Dijital Çözümler): laptop panel publishes, wall screens switch. One 12s loop.
   Boxes sit on the magenta rectangles of sahne.jpg (1344×752); sizes in cqw follow the demo's width.
   ========================================================================== */
.pdemo { container-type: inline-size; position: relative; border-radius: calc(var(--pdemo-radius) * 1.4); overflow: hidden; background: #0b0b0d; box-shadow: 0 40px 90px -30px rgba(227,30,36,.45); }
.pdemo__scene { position: relative; aspect-ratio: 1344 / 752; transform-origin: 0 0; will-change: transform; }
.pdemo__plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pdemo__tv, .pdemo__laptop { position: absolute; overflow: hidden; }
.pdemo__tv { top: 11.55%; height: 23.45%; background: #000; border-radius: .2cqw; }
.pdemo__tv--1 { left: 14.45%; width: 22.0%; }
.pdemo__tv--2 { left: 38.55%; width: 22.6%; }
.pdemo__tv--3 { left: 63.25%; width: 22.0%; }
.pdemo__laptop { left: 36.95%; top: 50.9%; width: 26.1%; height: 27.7%; background: #f4f6fb; color: #0f172a; display: flex; font-family: var(--pdemo-font); font-size: .7cqw; line-height: 1.2; }

/* Wall menu boards */
.pdemo__board { position: absolute; inset: 0; display: flex; flex-direction: column; padding: .55cqw .6cqw .5cqw; background: radial-gradient(120% 140% at 0% 0%, #2a0d0f 0%, #120b0b 55%, #0a0a0b 100%); color: #f7efe6; }
.pdemo__board--b { background: radial-gradient(120% 140% at 100% 0%, #10233a 0%, #0c121c 55%, #08090c 100%); opacity: 0; }
.pdemo__board-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--pdemo-font-display); font-weight: 800; font-size: 1.05cqw; letter-spacing: -.01em; margin-bottom: .35cqw; }
.pdemo__board-head i { font-style: normal; font-size: .9cqw; opacity: .85; }
.pdemo__board-items { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .45cqw; min-height: 0; }
.pdemo__board figure { margin: 0; display: flex; flex-direction: column; min-height: 0; border-radius: .3cqw; overflow: hidden; background: rgba(255,255,255,.04); }
.pdemo__board figure img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.pdemo__board figcaption { display: flex; justify-content: space-between; gap: .3cqw; padding: .25cqw .35cqw; font-size: .66cqw; }
.pdemo__board figcaption b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdemo__board figcaption em { font-style: normal; font-weight: 800; color: #ffb547; }
.pdemo__board--b figcaption em { color: #7cc4ff; }
.pdemo__flash { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%); transform: translateX(-120%); pointer-events: none; }

/* Laptop: a small Pano panel */
.pdemo__side { width: 21%; background: #0f1b33; color: #b9c4dc; padding: .65cqw .4cqw; display: flex; flex-direction: column; gap: .35cqw; font-size: .58cqw; }
.pdemo__side span { padding: .2cqw .3cqw; border-radius: .2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdemo__side .is-on { background: rgba(59,130,246,.22); color: #fff; }
.pdemo__logo { display: flex; align-items: center; gap: .3cqw; color: #fff; font-weight: 800; font-size: .68cqw; margin-bottom: .3cqw; }
.pdemo__logo i { width: 1cqw; height: 1cqw; border-radius: .2cqw; background: #3b82f6; display: grid; place-items: center; font-style: normal; font-size: .6cqw; }
.pdemo__main { position: relative; flex: 1; padding: .6cqw .7cqw; display: flex; flex-direction: column; gap: .38cqw; }
.pdemo__top { display: flex; justify-content: space-between; align-items: center; }
.pdemo__top b { font-size: .9cqw; }
.pdemo__online { display: flex; align-items: center; gap: .25cqw; color: #475569; font-size: .55cqw; }
.pdemo__online i { width: .45cqw; height: .45cqw; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .15cqw rgba(34,197,94,.2); }
.pdemo__row { position: relative; display: flex; align-items: center; gap: .5cqw; padding: .35cqw .45cqw; border-radius: .35cqw; background: #fff; border: .08cqw solid #e2e8f0; }
.pdemo__thumb { width: 2.2cqw; height: 1.45cqw; border-radius: .2cqw; overflow: hidden; flex: none; }
.pdemo__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdemo__name { flex: 1; display: flex; flex-direction: column; font-weight: 700; font-size: .7cqw; }
.pdemo__name small { font-weight: 500; color: #64748b; font-size: .48cqw; }
.pdemo__badge { font-size: .52cqw; font-weight: 700; padding: .12cqw .4cqw; border-radius: 999px; }
.pdemo__badge--a, .pdemo__badge--b { background: #dcfce7; color: #15803d; }
.pdemo__badge--draft, .pdemo__badge--draft2 { background: #f1f5f9; color: #64748b; }
.pdemo__row--b .pdemo__badge--b { position: absolute; inset-inline-end: .5cqw; opacity: 0; }
.pdemo__actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .4cqw; }
.pdemo__screens { display: flex; gap: .35cqw; }
.pdemo__scr { display: inline-flex; align-items: center; gap: .2cqw; padding: .15cqw .35cqw; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .5cqw; font-weight: 600; }
.pdemo__scr i { width: .4cqw; height: .4cqw; border-radius: 50%; background: #94a3b8; }
.pdemo__btn { position: relative; display: grid; padding: .45cqw .9cqw; border-radius: .3cqw; background: #2563eb; color: #fff; font-weight: 700; font-size: .7cqw; }
.pdemo__btn > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
.pdemo__btn-busy, .pdemo__btn-done { opacity: 0; }
.pdemo__toast { position: absolute; inset-inline-start: 50%; top: .5cqw; transform: translate(-50%, -160%); padding: .3cqw .7cqw; border-radius: .3cqw; background: #0f172a; color: #fff; font-size: .55cqw; font-weight: 600; white-space: nowrap; opacity: 0; }
[dir="rtl"] .pdemo__toast { transform: translate(50%, -160%); }
.pdemo__cursor { position: absolute; width: 1.1cqw; height: 1.1cqw; left: 56%; top: 74%; z-index: 3; filter: drop-shadow(0 .1cqw .15cqw rgba(0,0,0,.4)); }

/* Timeline (12s): 0–1.8 idle · → "Kış menüsü" (click 2.0) · → Publish (click 4.1) · sending · 4.6 live · camera reaches the wall, screens switch 5.6/5.9/6.2 · hold · 11.4 back */
.pdemo.is-playing .pdemo__scene { animation: pdemo-zoom 12s ease-in-out infinite; }
.pdemo.is-playing .pdemo__cursor { animation: pdemo-cursor 12s infinite; }
.pdemo.is-playing .pdemo__row--b { animation: pdemo-select 12s infinite; }
.pdemo.is-playing .pdemo__badge--draft { animation: pdemo-out 12s infinite; }
.pdemo.is-playing .pdemo__row--b .pdemo__badge--b { animation: pdemo-in 12s infinite; }
.pdemo.is-playing .pdemo__badge--a { animation: pdemo-out 12s infinite; }
.pdemo.is-playing .pdemo__btn { animation: pdemo-btn 12s infinite; }
.pdemo.is-playing .pdemo__btn-idle { animation: pdemo-idle 12s infinite; }
.pdemo.is-playing .pdemo__btn-busy { animation: pdemo-busy 12s infinite; }
.pdemo.is-playing .pdemo__btn-done { animation: pdemo-done 12s infinite; }
.pdemo.is-playing .pdemo__toast { animation: pdemo-toast 12s infinite; }
.pdemo.is-playing .pdemo__board--b { animation: pdemo-board 12s infinite; }
.pdemo.is-playing .pdemo__flash { animation: pdemo-flash 12s infinite; }
.pdemo.is-playing .pdemo__tv--2 .pdemo__board--b, .pdemo.is-playing .pdemo__tv--2 .pdemo__flash { animation-delay: .3s; }
.pdemo.is-playing .pdemo__tv--3 .pdemo__board--b, .pdemo.is-playing .pdemo__tv--3 .pdemo__flash { animation-delay: .6s; }

/* Camera: wide → into the laptop for the edit → out to the wall screens as they switch → onto the middle screen → wide */
@keyframes pdemo-zoom {
    0%, 7.5% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    15.8%, 38.5% { transform: translate(-70%, -105%) scale(2.4); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    45% { transform: translate(-27.5%, 0) scale(1.55); animation-timing-function: cubic-bezier(.45,0,.55,1); }
    63% { transform: translate(-50.2%, -2%) scale(2); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    70% { transform: translate(-50.2%, -2%) scale(2); animation-timing-function: cubic-bezier(.65,0,.35,1); }
    84%, 100% { transform: translate(0, 0) scale(1); }
}
@keyframes pdemo-cursor {
    0%, 12% { left: 56%; top: 74%; transform: scale(1); }
    16% { left: 60%; top: 37%; transform: scale(1); }
    16.8% { transform: scale(.8); } 17.6% { transform: scale(1); }
    28% { left: 60%; top: 37%; }
    33.5% { left: 84%; top: 88%; transform: scale(1); }
    34.2% { transform: scale(.8); } 35% { transform: scale(1); }
    44% { left: 84%; top: 88%; }
    52%, 92% { left: 66%; top: 76%; transform: scale(1); }
    100% { left: 56%; top: 74%; }
}
@keyframes pdemo-cursor-rtl {
    0%, 12% { left: 42.5%; top: 74%; transform: scale(1); }
    16% { left: 38.5%; top: 37%; transform: scale(1); }
    16.8% { transform: scale(.8); } 17.6% { transform: scale(1); }
    28% { left: 38.5%; top: 37%; }
    33.5% { left: 14.5%; top: 88%; transform: scale(1); }
    34.2% { transform: scale(.8); } 35% { transform: scale(1); }
    44% { left: 14.5%; top: 88%; }
    52%, 92% { left: 32.5%; top: 76%; transform: scale(1); }
    100% { left: 42.5%; top: 74%; }
}
[dir="rtl"] .pdemo.is-playing .pdemo__cursor { animation-name: pdemo-cursor-rtl; }
[dir="rtl"] .pdemo__cursor { left: 42.5%; top: 74%; }
@keyframes pdemo-select { 0%, 16.6% { border-color: #e2e8f0; box-shadow: none; } 17.4%, 94% { border-color: #3b82f6; box-shadow: 0 0 0 .18cqw rgba(59,130,246,.22); } 97%, 100% { border-color: #e2e8f0; box-shadow: none; } }
@keyframes pdemo-out { 0%, 38% { opacity: 1; } 39.5%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes pdemo-in { 0%, 38% { opacity: 0; } 39.5%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pdemo-btn { 0%, 37.5% { background: #2563eb; } 38.5%, 95% { background: #16a34a; } 98%, 100% { background: #2563eb; } }
@keyframes pdemo-idle { 0%, 34.5% { opacity: 1; } 35%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes pdemo-busy { 0%, 34.5% { opacity: 0; } 35%, 37.8% { opacity: 1; } 38.3%, 100% { opacity: 0; } }
@keyframes pdemo-done { 0%, 37.8% { opacity: 0; } 38.3%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pdemo-toast { 0%, 38% { opacity: 0; transform: translate(-50%, -160%); } 40%, 62% { opacity: 1; transform: translate(-50%, 0); } 65%, 100% { opacity: 0; transform: translate(-50%, -160%); } }
@keyframes pdemo-board { 0%, 46% { opacity: 0; } 47.5%, 95% { opacity: 1; } 98.5%, 100% { opacity: 0; } }
@keyframes pdemo-flash { 0%, 45% { transform: translateX(-120%); } 49% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
[dir="rtl"] .pdemo.is-playing .pdemo__toast { animation-name: pdemo-toast-rtl; }
@keyframes pdemo-toast-rtl { 0%, 38% { opacity: 0; transform: translate(50%, -160%); } 40%, 62% { opacity: 1; transform: translate(50%, 0); } 65%, 100% { opacity: 0; transform: translate(50%, -160%); } }
.pdemo.is-playing .pdemo__scr { animation: pdemo-scr 12s infinite; }
.pdemo.is-playing .pdemo__scr--2 { animation-delay: .3s; }
.pdemo.is-playing .pdemo__scr--3 { animation-delay: .6s; }
@keyframes pdemo-scr { 0%, 46% { background: #e2e8f0; color: #334155; } 47.5%, 95% { background: #dcfce7; color: #15803d; } 98%, 100% { background: #e2e8f0; color: #334155; } }
.pdemo.is-playing .pdemo__scr i { animation: pdemo-scr-dot 12s infinite; animation-delay: inherit; }
@keyframes pdemo-scr-dot { 0%, 46% { background: #94a3b8; } 47.5%, 95% { background: #22c55e; } 98%, 100% { background: #94a3b8; } }

/* "Canlı demo" rozeti (data-badge ya da { badge: true } ile) */
.pdemo__live { position: absolute; inset-inline-start: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #e31e24; color: #fff; font: 700 12px/1 var(--pdemo-font); letter-spacing: .04em; }
.pdemo__live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pdemo-live 2.2s infinite; }
@keyframes pdemo-live { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }