/* Ajans Feedback — QRZZ, Secpresio, RandevON proje sayfaları (v1, 2026-11-05)
   Yalnızca /projeler/qrzz/, /projeler/secpresio/, /projeler/randevon/ sayfalarında yüklenir. */

.pp-case,
.pp-ui {
    --pp-ink: #252933;
    --pp-soft: #f4f5f8;
    --pp-line: rgba(37, 41, 51, .07);
    --pp-muted: #848c98;
    --pp-green: #2e9d72;
    --pp-amber: #d79a32;
    --pp-blue: #4f6fd8;
    --pp-red: var(--brand-red, #ff4d57);
}

/* ---------- Sayfa bölümleri (Onayso vaka sayfasıyla aynı ritim) ---------- */
.pp-case__hero { background: #fff; }
.pp-case__hero .case-hero__facts > div:nth-child(2),
.pp-case__hero .case-hero__facts > div:nth-child(4) { background: #f5f6fa; }
.pp-case__intro { background: #f7f8fa; }
.pp-case__approach { background: #fff; }
.pp-role-grid .role-card--accent { background: var(--brand-red); }
.pp-case__story { background: #1f2228; }
.pp-case__story .section-index,
.pp-case__story .case-story__step > span { color: #ff626b; }
.pp-browser { background: #f0f1f5; }
.pp-browser__viewport { background: #f1f3f7; }
.pp-case__modules .case-module:nth-child(3n+2) { background: #f4f5f8; }
.pp-case__outcome { background: #f6f7f9; }
.pp-case__next { background: var(--brand-red); }

/* ---------- Önizleme temel parçaları ---------- */
.pp-ui {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 18px;
    background: var(--pp-soft);
    color: var(--pp-ink);
    font-size: 10px;
    line-height: 1.35;
    overflow: hidden;
    text-align: left;
}
.pp-ui * { box-sizing: border-box; }
.pp-ui strong, .pp-ui b { font-weight: 600; }
.pp-ui small { color: var(--pp-muted); }
.pp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pp-line);
    flex: 0 0 auto;
}
.pp-top small { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.pp-top strong { display: block; margin-top: 3px; font-size: 14px; }
.pp-card { padding: 12px; border-radius: 13px; background: #fff; border: 1px solid var(--pp-line); }
.pp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: #eef0f4; color: #66707d; font-size: 8px; font-weight: 500; white-space: nowrap; }
.pp-chip--green { background: #e8f6ef; color: #23805c; }
.pp-chip--amber { background: #fff3e0; color: #ad7419; }
.pp-chip--blue { background: #ebf0ff; color: #3f5cc4; }
.pp-chip--red { background: #ffecee; color: #d63845; }
.pp-chip--dark { background: #252933; color: #fff; }
.pp-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f1f2f6; }
.pp-tabs span { padding: 6px 9px; border-radius: 8px; color: #7b8390; font-size: 8px; }
.pp-tabs span.is-on { background: #fff; color: var(--pp-ink); box-shadow: 0 2px 6px rgba(30, 34, 44, .08); font-weight: 600; }

/* ---------- QRZZ ---------- */
.qz-pos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; flex: 1 1 auto; min-height: 0; }
.qz-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(44px, 1fr); align-content: stretch; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); }
.qz-table { display: flex; flex-direction: column; justify-content: space-between; min-height: 44px; max-height: 92px; padding: 8px; border-radius: 11px; border: 1px solid #e8eaef; background: #fafbfc; }
.qz-table b { font-size: 13px; }
.qz-table small { font-size: 8px; }
.qz-table.is-busy { background: #fff1f2; border-color: #ffd5d8; }
.qz-table.is-busy small { color: #d63845; }
.qz-table.is-bill { background: #fff6e6; border-color: #f7dcaa; }
.qz-table.is-bill small { color: #ad7419; }
.qz-table.is-ready { background: #eaf7f1; border-color: #c4e8d6; }
.qz-table.is-ready small { color: #23805c; }
.qz-table.is-sel { outline: 2px solid var(--pp-red); outline-offset: 1px; }
.qz-ticket { display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); min-height: 0; }
.qz-ticket__head strong { display: block; font-size: 14px; }
.qz-ticket__head span { display: block; margin-top: 3px; color: var(--pp-muted); font-size: 8px; }
.qz-ticket ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed #e3e6eb; }
.qz-ticket li { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; font-size: 9px; }
.qz-ticket li b { color: var(--pp-red); }
.qz-ticket li em { font-style: normal; color: #59616d; }
.qz-ticket__meta { display: grid; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed #e3e6eb; font-size: 8px; color: #6b7380; }
.qz-ticket__meta div { display: flex; justify-content: space-between; gap: 6px; }
.qz-ticket__meta b { color: var(--pp-green); font-weight: 600; }
.qz-pay { display: flex; gap: 5px; margin-top: 9px; }
.qz-pay span { flex: 1 1 0; padding: 6px 4px; border-radius: 8px; border: 1px solid #e3e6eb; text-align: center; font-size: 8px; color: #59616d; }
.qz-pay span.is-on { border-color: var(--pp-ink); color: var(--pp-ink); font-weight: 600; }
.qz-ticket__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 10px; border-top: 1px solid #edf0f3; }
.qz-ticket__total strong { font-size: 16px; }
.qz-ticket__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.qz-ticket__actions span, .qz-ticket__actions strong { display: grid; place-items: center; padding: 8px 6px; border-radius: 9px; font-size: 8px; text-align: center; }
.qz-ticket__actions span { background: #f1f2f6; color: #4f5763; }
.qz-ticket__actions strong { background: var(--pp-red); color: #fff; font-weight: 600; }
.qz-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 4px; color: #7b8390; font-size: 8px; flex: 0 0 auto; }
.qz-legend span { display: inline-flex; align-items: center; gap: 5px; }
.qz-legend i { width: 9px; height: 9px; border-radius: 3px; border: 1px solid #e3e6eb; background: #fafbfc; }
.qz-legend i.is-busy { background: #ffdfe2; border-color: #ffc9ce; }
.qz-legend i.is-bill { background: #fde9c4; border-color: #f4d396; }
.qz-legend i.is-ready { background: #cdeedd; border-color: #b0e0c7; }

.qz-kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1 1 auto; min-height: 0; }
.qz-col { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 14px; background: #e9ebf0; min-height: 0; overflow: hidden; }
.qz-col header { display: flex; justify-content: space-between; align-items: center; padding: 2px 3px 4px; font-size: 9px; font-weight: 600; }
.qz-col header b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; font-size: 9px; }
.qz-col--doing header b { background: #fde9c4; color: #8a5a10; }
.qz-col--ready header b { background: #cdeedd; color: #1d6b4c; }
.qz-col article { padding: 10px; border-radius: 11px; background: #fff; border: 1px solid var(--pp-line); }
.qz-col article > div { display: flex; justify-content: space-between; gap: 6px; }
.qz-col article strong { font-size: 9px; }
.qz-col article small { font-size: 8px; font-variant-numeric: tabular-nums; }
.qz-col--doing article small { color: #ad7419; }
.qz-col article p { margin: 6px 0 7px; color: #4f5763; font-size: 9px; line-height: 1.5; }
.qz-col--ready article { border-color: #c4e8d6; }

.qz-menu { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: center; flex: 1 1 auto; min-height: 0; }
.qz-phone { position: relative; justify-self: center; width: min(100%, 220px); height: 100%; max-height: 380px; padding: 22px 12px 12px; border-radius: 30px; background: #fff; border: 6px solid #23262d; box-shadow: 0 18px 40px rgba(20, 24, 32, .18); overflow: hidden; }
.qz-phone::before { content: ''; position: absolute; top: 6px; left: 50%; width: 54px; height: 9px; border-radius: 999px; background: #23262d; transform: translateX(-50%); }
.qz-phone__head strong { display: block; font-size: 13px; }
.qz-phone__head small { display: block; margin-top: 2px; font-size: 8px; }
.qz-phone__cats { display: flex; gap: 5px; margin-top: 10px; overflow: hidden; }
.qz-phone__cats span { padding: 5px 8px; border-radius: 999px; background: #f1f2f6; color: #6b7380; font-size: 8px; white-space: nowrap; }
.qz-phone__cats span.is-on { background: var(--pp-red); color: #fff; }
.qz-phone__list { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.qz-phone__list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 11px; background: #f8f9fb; }
.qz-phone__list strong { display: block; font-size: 9px; }
.qz-phone__list small { display: block; margin-top: 1px; font-size: 7px; }
.qz-phone__list em { font-style: normal; font-size: 9px; font-weight: 600; }
.qz-phone__list li.is-changed { background: #fff1f2; }
.qz-phone__list li.is-changed em { color: var(--pp-red); }
.qz-thumb { display: block; width: 34px; height: 34px; border-radius: 9px; position: relative; overflow: hidden; }
.qz-thumb::after { content: ''; position: absolute; border-radius: 50%; }
.qz-thumb--a { background: #f4d9b8; } .qz-thumb--a::after { width: 18px; height: 18px; left: 8px; top: 8px; background: #e9a24e; box-shadow: 0 0 0 4px #fff7ec; }
.qz-thumb--b { background: #d9c4b0; } .qz-thumb--b::after { width: 16px; height: 16px; left: 9px; top: 9px; background: #5f3928; }
.qz-thumb--c { background: #dfe9d8; } .qz-thumb--c::after { width: 20px; height: 12px; left: 7px; top: 11px; border-radius: 6px; background: #7aa35d; }
.qz-thumb--d { background: #f2dfe4; } .qz-thumb--d::after { width: 18px; height: 18px; left: 8px; top: 8px; background: #c9677d; }
.qz-sync { display: grid; gap: 10px; align-content: center; }
.qz-product small { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.qz-product > strong { display: block; margin-top: 4px; font-size: 14px; }
.qz-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.qz-price s { color: #9aa1ab; font-size: 11px; }
.qz-price b { font-size: 20px; color: var(--pp-ink); }
.qz-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.qz-fields span { padding: 5px 8px; border-radius: 8px; background: #f4f5f8; color: #5f6773; font-size: 8px; }
.qz-sync__line { display: flex; align-items: center; gap: 8px; padding-left: 18px; color: #7b8390; font-size: 8px; }
.qz-sync__line i { width: 2px; height: 26px; background: repeating-linear-gradient(#c9ced6 0 4px, transparent 4px 7px); }
.qz-sync__ok { display: flex; align-items: center; gap: 10px; border-color: #c4e8d6; background: #f3fbf7; }
.qz-sync__ok > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pp-green); color: #fff; font-size: 12px; flex: 0 0 auto; }
.qz-sync__ok strong { display: block; font-size: 11px; }
.qz-sync__ok small { display: block; margin-top: 2px; font-size: 8px; }

.qz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
.qz-kpis > div { padding: 11px; border-radius: 13px; background: #fff; border: 1px solid var(--pp-line); }
.qz-kpis small { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.qz-kpis strong { display: block; margin-top: 5px; font-size: 16px; font-variant-numeric: tabular-nums; }
.qz-kpis span { display: inline-block; margin-top: 4px; color: var(--pp-green); font-size: 8px; font-weight: 600; }
.qz-report { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; flex: 1 1 auto; min-height: 0; }
.qz-chart { display: flex; flex-direction: column; min-height: 0; }
.qz-chart > small, .qz-ai > small { font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.qz-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; align-items: end; flex: 1 1 auto; min-height: 70px; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid #edf0f3; }
.qz-bars span { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; }
.qz-bars i { display: block; border-radius: 4px 4px 0 0; }
.qz-bars i + i { border-radius: 0; }
.qz-bars i:last-child { border-radius: 4px 4px 0 0; }
.qz-bars i.m { background: #2b2f38; }
.qz-bars i.p { background: var(--pp-red); }
.qz-bars i.g { background: #ffb3b8; }
.qz-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; margin-top: 5px; color: #8b939e; font-size: 7px; text-align: center; }
.qz-keys { display: flex; gap: 10px; margin-top: 8px; color: #6b7380; font-size: 8px; }
.qz-keys span { display: inline-flex; align-items: center; gap: 4px; }
.qz-keys i { width: 8px; height: 8px; border-radius: 2px; }
.qz-ai { display: flex; flex-direction: column; gap: 9px; background: #252933; border-color: #252933; color: #fff; }
.qz-ai .pp-chip { align-self: flex-start; background: var(--pp-red); color: #fff; }
.qz-ai p { margin: 0; color: #d7dbe2; font-size: 9px; line-height: 1.55; }
.qz-ai ol { display: grid; gap: 5px; margin: auto 0 0; padding: 9px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); counter-reset: qz; }
.qz-ai li { display: flex; justify-content: space-between; gap: 6px; color: #fff; font-size: 9px; counter-increment: qz; }
.qz-ai li::before { content: counter(qz); display: grid; place-items: center; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 7px; flex: 0 0 auto; }
.qz-ai li span { flex: 1 1 auto; }
.qz-ai li em { font-style: normal; color: #aeb5bf; }

/* ---------- Secpresio ---------- */
.sp-rules { display: grid; gap: 7px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); flex: 1 1 auto; min-height: 0; align-content: start; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 72px; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: #f8f9fb; font-size: 9px; }
.sp-row > span:last-child { justify-self: end; }
.sp-row strong { display: block; font-size: 10px; }
.sp-row small { display: block; margin-top: 2px; font-size: 8px; }
.sp-row--head { background: transparent; padding-top: 2px; padding-bottom: 2px; color: #8b939e; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 4px; color: #6b7380; font-size: 8px; flex: 0 0 auto; }
.sp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sp-legend i { width: 8px; height: 8px; border-radius: 50%; }
.sp-legend i.g { background: var(--pp-green); } .sp-legend i.a { background: var(--pp-amber); } .sp-legend i.b { background: var(--pp-blue); } .sp-legend i.r { background: var(--pp-red); }

.sp-ui--guard { position: relative; }
.sp-chat { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pp-line); }
.sp-chat__head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.sp-chat__head i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #2b2f38, #59606d); flex: 0 0 auto; }
.sp-chat__head strong { display: block; font-size: 11px; }
.sp-chat__head small { display: block; margin-top: 2px; font-size: 8px; }
.sp-chat__head .pp-chip { margin-left: auto; }
.sp-chat__lines { display: grid; gap: 7px; padding: 4px 0; }
.sp-chat__lines span { display: block; height: 7px; border-radius: 999px; background: #eef0f4; }
.sp-chat__lines span:nth-child(2) { width: 82%; } .sp-chat__lines span:nth-child(3) { width: 58%; }
.sp-chat__input { margin-top: auto; padding: 12px; border-radius: 13px; border: 1px solid #e2e5ea; background: #fafbfc; font-size: 10px; line-height: 1.55; color: #3f4651; }
.sp-chat__input mark { padding: 1px 4px; border-radius: 4px; background: #ffe2e5; color: #c22f3c; }
.sp-chat__input footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: #9aa1ab; font-size: 8px; }
.sp-chat__input footer b { padding: 6px 10px; border-radius: 8px; background: #c9ced6; color: #fff; font-size: 8px; }
.sp-pop { position: absolute; right: 34px; top: 74px; width: min(58%, 290px); padding: 13px; border-radius: 15px; background: #fff; border: 1px solid rgba(37, 41, 51, .08); box-shadow: 0 22px 50px rgba(20, 24, 32, .22); }
.sp-pop__head { display: flex; align-items: center; gap: 9px; }
.sp-pop__head > b, .sp-toast__head > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--pp-red); color: #fff; font-size: 11px; flex: 0 0 auto; }
.sp-pop__head strong { display: block; font-size: 11px; }
.sp-pop__head small { display: block; margin-top: 1px; font-size: 8px; }
.sp-pop p { margin: 10px 0 0; font-size: 9px; color: #4f5763; }
.sp-pop__mask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 10px; background: #f6f7fa; font-size: 9px; }
.sp-pop__mask span { color: #9aa1ab; text-decoration: line-through; }
.sp-pop__mask i { font-style: normal; color: #9aa1ab; }
.sp-pop__mask b { padding: 3px 6px; border-radius: 6px; background: #ebf0ff; color: #3f5cc4; }
.sp-pop__btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; margin-top: 10px; }
.sp-pop__btns span, .sp-pop__btns strong { display: grid; place-items: center; padding: 8px 6px; border-radius: 9px; font-size: 8px; text-align: center; }
.sp-pop__btns span { background: #f1f2f6; color: #4f5763; }
.sp-pop__btns strong { background: #252933; color: #fff; font-weight: 600; }

.sp-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sp-events { display: grid; gap: 5px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); flex: 1 1 auto; min-height: 0; align-content: start; }
.sp-ev { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 76px; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 10px; background: #f8f9fb; font-size: 9px; }
.sp-ev > span:last-child { justify-self: end; }
.sp-ev time { color: #7b8390; font-variant-numeric: tabular-nums; }
.sp-ev--head { background: transparent; padding-top: 2px; padding-bottom: 2px; color: #8b939e; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.sp-digest { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sp-digest > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff0f1; color: var(--pp-red); font-size: 12px; flex: 0 0 auto; }
.sp-digest strong { display: block; font-size: 10px; }
.sp-digest small { display: block; margin-top: 2px; font-size: 8px; }

.sp-ui--desktop { padding: 0; }
.sp-desk { position: relative; height: 100%; min-height: 260px; background: linear-gradient(145deg, #dfe6f3 0%, #eef1f7 45%, #e6e1ef 100%); overflow: hidden; }
.sp-window { position: absolute; left: 6%; top: 8%; width: 62%; height: 70%; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(20, 24, 32, .14); overflow: hidden; display: flex; flex-direction: column; }
.sp-window__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #f4f5f8; border-bottom: 1px solid #e8eaef; font-size: 9px; color: #4f5763; }
.sp-window__bar span { margin-right: auto; font-weight: 600; }
.sp-window__bar i { width: 9px; height: 2px; background: #9aa1ab; }
.sp-window__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 14px; }
.sp-window__body > span { display: block; height: 7px; border-radius: 999px; background: #eef0f4; }
.sp-window__body > span.short { width: 60%; }
.sp-window__input { margin-top: auto; padding: 10px; border-radius: 10px; border: 1px solid #e2e5ea; background: #fafbfc; color: #3f4651; font-size: 9px; }
.sp-toast { position: absolute; right: 4%; bottom: 46px; width: min(46%, 270px); padding: 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(37, 41, 51, .08); box-shadow: 0 20px 44px rgba(20, 24, 32, .22); }
.sp-toast__head { display: flex; align-items: center; gap: 8px; }
.sp-toast__head strong { font-size: 10px; }
.sp-toast__head small { margin-left: auto; font-size: 8px; }
.sp-toast p { margin: 9px 0 0; font-size: 9px; color: #3f4651; }
.sp-toast > small { display: block; margin-top: 5px; font-size: 8px; line-height: 1.5; }
.sp-taskbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; background: rgba(255, 255, 255, .78); border-top: 1px solid rgba(37, 41, 51, .06); }
.sp-taskbar i { width: 18px; height: 18px; border-radius: 5px; background: #c9ced6; }
.sp-taskbar i.is-on { background: var(--pp-red); }
.sp-taskbar span { position: absolute; right: 14px; color: #4f5763; font-size: 8px; font-variant-numeric: tabular-nums; }

/* ---------- RandevON ---------- */
.rv-cal { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 2fr); gap: 10px; flex: 1 1 auto; min-height: 0; }
.rv-mini { padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); }
.rv-mini strong { display: block; font-size: 10px; }
.rv-mini__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 9px; font-size: 7px; text-align: center; color: #6b7380; }
.rv-mini__grid b { color: #9aa1ab; font-weight: 500; }
.rv-mini__grid span { padding: 3px 0; border-radius: 5px; }
.rv-mini__grid span.has { color: var(--pp-ink); font-weight: 600; }
.rv-mini__grid span.is-on { background: var(--pp-red); color: #fff; font-weight: 600; }
.rv-mini__count { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef0f3; font-size: 8px; color: #6b7380; }
.rv-mini__count b { color: var(--pp-ink); }
.rv-day { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); align-content: start; min-height: 0; overflow: hidden; }
.rv-slot { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: stretch; }
.rv-slot time { padding-top: 9px; color: #8b939e; font-size: 8px; font-variant-numeric: tabular-nums; }
.rv-appt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 11px; border-radius: 11px; border-left: 3px solid var(--pp-red); background: #fff4f5; }
.rv-appt strong { font-size: 10px; }
.rv-appt small { grid-column: 1; font-size: 8px; }
.rv-appt .pp-chip { grid-column: 2; grid-row: 1 / span 2; }
.rv-appt--b { border-left-color: var(--pp-blue); background: #f1f4ff; }
.rv-appt--c { border-left-color: var(--pp-amber); background: #fff8ec; }
.rv-appt--d { border-left-color: #8b939e; background: #f6f7f9; }

.rv-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.rv-rule-list { display: grid; gap: 8px; align-content: start; }
.rv-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-rule strong { display: block; font-size: 11px; }
.rv-rule small { display: block; margin-top: 2px; font-size: 8px; }
.rv-toggle { position: relative; width: 30px; height: 17px; border-radius: 999px; background: #d5d9e0; flex: 0 0 auto; }
.rv-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.rv-toggle.is-on { background: var(--pp-green); }
.rv-toggle.is-on::after { left: 15px; }
.rv-rule--add { justify-content: center; border-style: dashed; color: #7b8390; font-size: 9px; background: transparent; }
.rv-wa { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #ece5dd; border: 1px solid var(--pp-line); min-height: 0; }
.rv-wa__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1f6f5c; color: #fff; }
.rv-wa__head > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #1f6f5c; font-size: 10px; flex: 0 0 auto; }
.rv-wa__head strong { display: block; font-size: 10px; }
.rv-wa__head small { display: block; margin-top: 1px; color: rgba(255, 255, 255, .75); font-size: 8px; }
.rv-wa__body { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; flex: 1 1 auto; padding: 12px; }
.rv-wa__date { align-self: center; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, .8); color: #5f6773; font-size: 7px; }
.rv-bubble { align-self: flex-start; max-width: 92%; padding: 9px 10px 6px; border-radius: 4px 12px 12px 12px; background: #fff; color: #2d323b; font-size: 9px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.rv-bubble small { display: block; margin-top: 3px; text-align: right; font-size: 7px; color: #8b939e; }
.rv-bubble small b { color: #3c9bdc; }

.rv-filter { display: flex; gap: 4px; }
.rv-msgs { display: grid; gap: 5px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); flex: 1 1 auto; min-height: 0; align-content: start; overflow: hidden; }
.rv-msg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) 96px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #f8f9fb; font-size: 9px; }
.rv-msg > span:last-child, .rv-msg > .pp-chip { justify-self: end; }
.rv-msg strong { font-size: 10px; }
.rv-msg time, .rv-msg em { color: #6b7380; font-style: normal; font-variant-numeric: tabular-nums; }
.rv-msg--head { background: transparent; padding-top: 2px; padding-bottom: 2px; color: #8b939e; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.rv-msg--err { background: #fff5f6; }
.rv-msg__err { grid-column: 1 / -1; margin-top: -2px; color: #c22f3c; font-size: 8px; }

.rv-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; flex: 1 1 auto; min-height: 0; }
.rv-person { display: flex; flex-direction: column; gap: 10px; }
.rv-person__top { display: flex; align-items: center; gap: 10px; }
.rv-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff0f1; color: var(--pp-red); font-size: 12px; flex: 0 0 auto; }
.rv-person__top strong { display: block; font-size: 13px; }
.rv-person__top small { display: block; margin-top: 2px; font-size: 9px; font-variant-numeric: tabular-nums; }
.rv-person .pp-chip { align-self: flex-start; }
.rv-person dl { display: grid; gap: 6px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid #eef0f3; }
.rv-person dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.rv-person dt { color: #7b8390; }
.rv-person dd { margin: 0; font-weight: 600; }
.rv-history > small { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.rv-history ul { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.rv-history li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 10px; background: #f8f9fb; font-size: 9px; }
.rv-history time { color: #7b8390; font-variant-numeric: tabular-nums; }
.rv-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; background: #252933; color: #d7dbe2; font-size: 9px; flex: 0 0 auto; }
.rv-note i { position: relative; width: 12px; height: 10px; margin-top: 4px; border-radius: 2px; background: #fff; flex: 0 0 auto; }
.rv-note i::before { content: ''; position: absolute; left: 2px; top: -6px; width: 8px; height: 8px; border: 2px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }

/* ---------- Mobil: akış görselleri metnin altında ---------- */
.case-story__mobile-shot .pp-ui { height: auto; min-height: 300px; }
.case-story__mobile-shot .sp-ui--desktop { min-height: 0; }
.case-story__mobile-shot .sp-desk { height: 300px; }
.case-story__mobile-shot .qz-phone { height: 330px; }

@media (max-width: 760px) {
    .pp-ui { padding: 12px; gap: 8px; }
    .pp-top { padding: 9px 11px; }
    .pp-top strong { font-size: 12px; }
    .pp-top .pp-tabs span:nth-child(n+3),
    .sp-counts span:nth-child(n+3) { display: none; }
    .qz-pos { grid-template-columns: 1fr; }
    .qz-tables { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 9px; gap: 6px; }
    .qz-table { min-height: 36px; padding: 6px; }
    .qz-table:nth-child(n+9) { display: none; }
    .qz-legend span:nth-child(n+3) { display: none; }
    .qz-kds { grid-template-columns: 1fr 1fr; }
    .qz-col:first-child { display: none; }
    .qz-menu { grid-template-columns: 1fr; }
    .qz-sync { display: none; }
    .qz-kpis { grid-template-columns: 1fr 1fr; }
    .qz-report { grid-template-columns: 1fr; }
    .qz-chart { display: none; }
    .sp-row { grid-template-columns: minmax(0, 1fr) 66px; }
    .sp-row > span:nth-child(2) { display: none; }
    .sp-ev { grid-template-columns: 34px minmax(0, 1fr) 70px; }
    .sp-ev > span:nth-child(3), .sp-ev > span:nth-child(4) { display: none; }
    .sp-pop { right: 12px; left: 12px; top: 58px; width: auto; }
    .sp-window { left: 5%; width: 90%; height: 52%; }
    .sp-toast { left: 6%; right: 6%; width: auto; bottom: 42px; }
    .rv-cal { grid-template-columns: 1fr; }
    .rv-mini { display: none; }
    .rv-rules { grid-template-columns: 1fr; }
    .rv-rule-list .rv-rule:nth-child(n+3) { display: none; }
    .rv-msg { grid-template-columns: minmax(0, 1fr) 88px; }
    .rv-msg > span:nth-child(2), .rv-msg > span:nth-child(3) { display: none; }
    .rv-profile { grid-template-columns: 1fr; }
    .rv-history li:nth-child(n+3) { display: none; }
}