/* Kodla çizilmiş ürün demoları — ortak. Değişkenler: --ink --paper-2 --blue --lilac --sun --tomato --mono */
/* ızgara/flex içinde tek satırlık metinler kabı genişletmesin */
.card__demo { min-width: 0; }
.px__in > * { min-width: 0; }

/* demo: PromtExpress */
.px__in {
  background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 14px; font: 500 15px/1.4 var(--mono);
  display: flex; align-items: center; gap: 8px; min-height: 48px; border: 1.5px solid var(--ink);
}
.px__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: var(--sun); padding: 3px 6px; border-radius: 6px; flex: none; }
.px__typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { width: 2px; height: 18px; background: var(--ink); flex: none; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.px__tabs { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.px__tabs span { font: 600 12px/1 var(--mono); padding: 7px 10px; border-radius: 999px; border: 1.5px solid #ffffff80; }
.px__tabs span.is-on { background: #fff; color: var(--blue); border-color: #fff; }
.px__out { background: #ffffff1f; border-radius: 12px; padding: 14px; display: grid; gap: 9px; }
.px__line { height: 9px; border-radius: 9px; background: #ffffffd0; width: 0; transition: width .6s cubic-bezier(.3, .7, .2, 1); }
.demo-px.is-out .px__line { width: var(--w); }
.demo-px.is-out .px__line:nth-child(2) { transition-delay: .12s; }
.demo-px.is-out .px__line:nth-child(3) { transition-delay: .24s; }
.demo-px.is-out .px__line:nth-child(4) { transition-delay: .36s; }

/* demo: WpAsis */
.demo-wa { display: flex; flex-direction: column; gap: 10px; background: #dff5e9 !important; }
.wa__top { display: flex; align-items: center; gap: 10px; }
.wa__av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.wa__who { display: flex; flex-direction: column; line-height: 1.2; }
.wa__who b { font-size: 15px; }
.wa__who small { font-size: 12px; color: #1a7a4c; }
.wa__chat { display: flex; flex-direction: column; gap: 8px; }
.wa__msg {
  margin: 0; max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35;
  background: #fff; border: 1.5px solid var(--ink); opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1.3);
}
.wa__msg--out { align-self: flex-end; background: #b8f0cf; }
.wa__msg.is-in { opacity: 1; transform: none; }

/* demo: Databitro */
.demo-db { display: grid; gap: 8px; align-content: center; }
.db__row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; padding: 9px 12px; font-size: 14px;
}
.db__co { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db__st { font: 600 11px/1 var(--mono); padding: 5px 8px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; flex: none; }
.db__st[data-s='1'] { background: var(--lilac); }
.db__st[data-s='2'] { background: #1fb866; color: #fff; }

/* demo: İctihatAI */
.demo-ic { display: grid; gap: 9px; align-content: center; }
.ic__search { background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 14px; font: 500 14px/1.2 var(--mono); }
.ic__res { background: #ffffffb0; border-radius: 12px; padding: 9px 12px; display: grid; gap: 6px; font-size: 14px; }
.ic__bar { height: 6px; border-radius: 6px; background: #16140f22; position: relative; overflow: hidden; }
.ic__bar::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.demo-ic.is-on .ic__bar::after { transform: scaleX(var(--v)); }

/* demo: Crawza */
.demo-cz { display: flex; flex-direction: column; gap: 10px; }
.cz__bar { display: flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px; padding: 7px 10px; }
.cz__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--ink); }
.cz__bar em { font: 500 12px/1 var(--mono); font-style: normal; margin-left: 6px; }
.cz__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cz__item { background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; padding: 6px; display: grid; gap: 5px; }
.cz__item i { display: block; aspect-ratio: 1; border-radius: 6px; background: hsl(var(--h) 80% 80%); }
.cz__item b, .cz__item s { display: block; height: 6px; border-radius: 4px; background: #16140f30; }
.cz__item s { width: 50%; background: var(--tomato); }
.cz__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cz__chips span { font: 600 12px/1 var(--mono); background: var(--ink); color: #fff; padding: 7px 9px; border-radius: 999px; opacity: 0; transform: translateY(6px); transition: .35s; }
.demo-cz.is-on .cz__chips span { opacity: 1; transform: none; }
.demo-cz.is-on .cz__chips span:nth-child(2) { transition-delay: .25s; }
.demo-cz.is-on .cz__chips span:nth-child(3) { transition-delay: .5s; }


/* demo: terminal (promtexpress-oss) */
.demo-cli { background: #16140f !important; color: #e8e4d8 !important; font: 500 13px/1.6 var(--mono); display: flex; flex-direction: column; gap: 2px; }
.cli__line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli__line::before { content: '$ '; color: var(--sun); }
.cli__out { margin: 0; opacity: 0; transform: translateY(4px); transition: .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli__out.is-in { opacity: 1; transform: none; }
.cli__out b { color: #9ee6c2; font-weight: 500; }

/* demo: denetim listesi (durust) */
.demo-au { display: grid; gap: 7px; align-content: center; }
.au__row { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; }
.au__row i { width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; transition: background .25s; }
.au__row.is-done i { background: var(--ink); color: #fff; }
.au__row.is-done i::after { content: '✓'; }

/* demo: dalga formu + efekt işaretleri (SoundFx) */
.demo-sfx { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sfx__wave { position: relative; height: 70px; display: flex; align-items: center; gap: 3px; }
.sfx__wave span { flex: 1; background: currentColor; border-radius: 2px; height: calc(var(--a) * 1%); opacity: .85; }
.sfx__mark { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2, .8, .2, 1.3); }
.sfx__mark em { position: absolute; top: -18px; left: -14px; font: 600 10px/1 var(--mono); font-style: normal; background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; padding: 2px 4px; white-space: nowrap; }
.demo-sfx.is-on .sfx__mark { transform: scaleY(1); }
.demo-sfx.is-on .sfx__mark:nth-of-type(2) { transition-delay: .3s; }
.demo-sfx.is-on .sfx__mark:nth-of-type(3) { transition-delay: .6s; }
.sfx__tags { display: flex; gap: 6px; font: 600 11px/1 var(--mono); }
.sfx__tags span { background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 5px 8px; }