/* Ana sayfa bolum stilleri. Eskiden her parca dosyasinin icinde <style> olarak gomuluydu; HTML agirligini
 * azaltmak ve tarayici onbellegi icin buraya tasindi (05.10.2026). Elle duzenlenir (build.ps1 bu dosyaya dokunmaz).
 * Baglanti: partials/tailwind.blade.php (shared_build_asset). */

/* ===== Patron Ekrani (home-patron) ===== */
.qm-pt-badge { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f43f5e, #dc2626); box-shadow: 0 12px 28px -14px rgba(225, 29, 72, 0.8); }
.qm-pt-phones { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 640px) { .qm-pt-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .qm-pt-phones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qm-pt-phone { margin: 0; text-align: center; }
.qm-pt-phone figcaption { margin-top: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0 0.25rem; }
.qm-pt-tab { border-radius: 9999px; padding: 0.15rem 0.65rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #1e40af, #172554); }
.qm-pt-phone figcaption strong { font-size: 0.95rem; font-weight: 800; color: var(--qm-text-main); }
.qm-pt-phone figcaption small { font-size: 0.78rem; line-height: 1.45; color: var(--qm-text-muted); }

/* --- HTML telefon (Patron Ekranı'nın açık temalı tasarımı) --- */
.qm-pm { position: relative; container-type: inline-size; width: 100%; max-width: 17.5rem; margin: 0 auto; aspect-ratio: 9 / 18.4; padding: 3.4%; border-radius: 14% / 6.8%; background: linear-gradient(145deg, #3b3640, #17151b); box-shadow: inset 0 0 0 2px #5b5361, 0 30px 50px -28px rgba(30, 58, 138, 0.55), 0 12px 24px -16px rgba(15, 23, 42, 0.5); transition: transform 0.35s ease; }
.qm-pt-phone:hover .qm-pm { transform: translateY(-8px); }
.qm-pm-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 11% / 5.3%; background: #f3f5fa; color: #0f172a; font-size: 11px; font-size: 4.3cqw; line-height: 1.3; text-align: left; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.qm-pm-status { position: relative; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 0.9em 1.5em 0.7em; background: #e11d48; color: #fff; font-size: 0.85em; font-weight: 700; }
.qm-pm-notch { position: absolute; left: 50%; top: 0.55em; width: 34%; height: 1.75em; transform: translateX(-50%); border-radius: 9999px; background: #0b0b0f; }
.qm-pm-sicons { display: flex; gap: 0.35em; font-size: 0.85em; }
.qm-pm-appbar { display: flex; align-items: center; gap: 0.6em; flex-shrink: 0; padding: 0.65em 0.8em; background: #fff; border-bottom: 1px solid #e8ecf3; }
.qm-pm-crown { display: flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 0.7em; color: #fff; background: linear-gradient(135deg, #f43f5e, #dc2626); }
.qm-pm-apptitle { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.qm-pm-apptitle b { font-size: 1.05em; font-weight: 800; }
.qm-pm-apptitle small { font-size: 0.8em; color: #64748b; }
.qm-pm-exit { display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border-radius: 0.6em; background: #f1f4f9; color: #334155; font-size: 0.9em; }
.qm-pm-body { display: flex; flex: 1; flex-direction: column; gap: 0.55em; min-height: 0; overflow: hidden; padding: 0.65em; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.qm-pm-card { flex-shrink: 0; padding: 0.7em 0.75em; border-radius: 0.9em; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px #edf0f6; }
.qm-pm-branch { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.75em; }
.qm-pm-branch b { font-size: 1em; font-weight: 800; }
.qm-pm-branch em { font-style: normal; font-weight: 600; color: #94a3b8; }
.qm-pm-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qm-pm-cap { display: block; font-size: 0.72em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.qm-pm-muted { color: #94a3b8; font-size: 0.8em; }
.qm-pm-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 0.55em; font-size: 0.9em; color: #fff; }
.qm-pm-ico.is-navy { background: linear-gradient(135deg, #1e40af, #172554); }
.qm-pm-ico.is-red { background: linear-gradient(135deg, #f43f5e, #dc2626); }
.qm-pm-ico.is-pink { background: linear-gradient(135deg, #f472b6, #e11d48); }
.qm-pm-ico.is-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.qm-pm-ico.is-green { background: linear-gradient(135deg, #34d399, #059669); }
.qm-pm-periods { display: grid; grid-template-columns: repeat(4, 1fr); flex-shrink: 0; padding: 0.25em; border-radius: 0.8em; background: #e9edf4; font-size: 0.85em; font-weight: 700; color: #475569; text-align: center; }
.qm-pm-periods span { padding: 0.45em 0; border-radius: 0.6em; white-space: nowrap; }
.qm-pm-periods .is-on { background: #fff; color: #e11d48; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1); }
.qm-pm-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25em; flex-shrink: 0; padding: 0.3em; border-radius: 0.9em; background: #fff; box-shadow: 0 0 0 1px #edf0f6; font-size: 0.82em; font-weight: 700; color: #64748b; text-align: center; }
.qm-pm-nav span { display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.45em 0; border-radius: 0.7em; }
.qm-pm-nav .is-on { color: #fff; background: linear-gradient(135deg, #1e40af, #172554); box-shadow: 0 6px 12px -6px rgba(30, 64, 175, 0.8); }
.qm-pm-revenue { flex-shrink: 0; padding: 0.9em; border-radius: 1em; color: #fff; background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 12px 22px -14px rgba(225, 29, 72, 0.9); }
.qm-pm-revenue .qm-pm-cap { color: rgba(255, 255, 255, 0.85); }
.qm-pm-revenue strong { display: block; margin-top: 0.15em; font-size: 2.2em; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.qm-pm-revgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin-top: 0.6em; }
.qm-pm-revgrid span { padding: 0.5em 0.6em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.16); }
.qm-pm-revgrid b { display: block; font-size: 1.2em; font-weight: 800; }
.qm-pm-chips { margin-top: 0.55em; font-size: 0.82em; font-weight: 700; }
.qm-pm-chips span { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.25em 0.55em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.18); }
.qm-pm-head { display: flex; align-items: center; gap: 0.55em; font-size: 0.95em; font-weight: 800; }
.qm-pm-bars { display: flex; align-items: flex-end; gap: 0.25em; height: 4.2em; margin-top: 0.6em; }
.qm-pm-bars span { flex: 1; border-radius: 0.25em 0.25em 0 0; background: linear-gradient(#3b5bdb, #1e3a8a); opacity: 0.85; }
.qm-pm-bars .is-peak { background: linear-gradient(#f43f5e, #e11d48); opacity: 1; }
.qm-pm-live { display: flex; align-items: center; gap: 0.45em; flex-shrink: 0; font-size: 0.95em; font-weight: 800; }
.qm-pm-live i { font-size: 0.6em; color: #10b981; }
.qm-pm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; flex-shrink: 0; }
.qm-pm-tile { display: flex; flex-direction: column; gap: 0.25em; padding: 0.55em; border-radius: 0.8em; background: #f4f7fd; box-shadow: 0 0 0 1px #e6ecf7; }
.qm-pm-tile.is-red, .qm-pm-tile.is-pink { background: #fff3f5; box-shadow: 0 0 0 1px #fde2e7; }
.qm-pm-tile.is-green { background: #effcf5; box-shadow: 0 0 0 1px #d1f5e1; }
.qm-pm-tile b { font-size: 1.2em; font-weight: 900; }
.qm-pm-tile small { font-size: 0.68em; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #64748b; line-height: 1.2; }
.qm-pm-ok { display: flex; align-items: flex-start; gap: 0.45em; margin-top: 0.55em; padding: 0.55em 0.65em; border-radius: 0.7em; font-size: 0.85em; font-weight: 600; color: #047857; background: #ecfdf5; box-shadow: 0 0 0 1px #c7f0dc; }
.qm-pm-ok i { margin-top: 0.15em; }
.qm-pm-stars { font-weight: 800; color: #e11d48; }
.qm-pm-alert { display: flex; align-items: center; gap: 0.5em; margin-top: 0.45em; padding: 0.5em 0.6em; border-radius: 0.65em; font-size: 0.85em; font-weight: 600; }
.qm-pm-alert.is-red { color: #9f1239; background: #fff1f3; }
.qm-pm-alert.is-amber { color: #92400e; background: #fffbeb; }
.qm-pm-alert small { font-weight: 700; opacity: 0.8; }
.qm-pm-row { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.45em; font-size: 0.88em; color: #475569; }
.qm-pm-row b { color: #0f172a; font-weight: 800; }
.qm-pm-row b.is-ok { color: #059669; }
.qm-pm-note { margin-top: 0.4em; font-size: 0.8em; color: #64748b; }
.qm-pm-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin-top: 0.55em; }
.qm-pm-dl span { display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.5em 0.2em; border-radius: 0.65em; font-size: 0.78em; font-weight: 700; color: #1e3a8a; text-align: center; background: linear-gradient(135deg, #fff1f3, #eef2ff); box-shadow: 0 0 0 1px #e6e9f5; }
.qm-pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin-top: 0.55em; }
.qm-pm-stats span { padding: 0.45em 0.5em; border-radius: 0.65em; background: #f4f7fd; box-shadow: 0 0 0 1px #e6ecf7; }
.qm-pm-stats small { display: block; font-size: 0.66em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; line-height: 1.2; }
.qm-pm-stats b { font-size: 1.1em; font-weight: 900; }
.qm-pm-prod { position: relative; display: flex; align-items: center; gap: 0.5em; margin-top: 0.45em; padding-bottom: 0.4em; font-size: 0.88em; font-weight: 600; }
.qm-pm-prod i { position: absolute; left: 0; bottom: 0; height: 0.25em; border-radius: 9999px; background: linear-gradient(90deg, #e11d48, #1e3a8a); }
.qm-pm-pct { font-weight: 900; color: #e11d48; }
.qm-pm-progress { height: 0.5em; margin-top: 0.55em; border-radius: 9999px; background: #e9edf4; overflow: hidden; }
.qm-pm-progress i { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #e11d48, #1e3a8a); }
.qm-pm-home { position: absolute; left: 50%; bottom: 0.5em; width: 36%; height: 0.3em; transform: translateX(-50%); border-radius: 9999px; background: #0f172a; opacity: 0.85; }

.qm-pt-features { margin-top: 3.5rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .qm-pt-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qm-pt-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qm-pt-feature { display: flex; align-items: flex-start; gap: 0.85rem; border-radius: 1.25rem; padding: 1.1rem 1.2rem; border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); transition: border-color 0.2s ease, transform 0.2s ease; }
.qm-pt-feature:hover { transform: translateY(-2px); border-color: rgba(225, 29, 72, 0.4); }
.qm-pt-ficon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, #f43f5e, #dc2626); }
.qm-pt-feature:nth-child(even) .qm-pt-ficon { background: linear-gradient(135deg, #1e40af, #172554); }
.qm-pt-ftitle { font-size: 0.95rem; font-weight: 800; color: var(--qm-text-main); }
.qm-pt-fdesc { margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.5; color: var(--qm-text-muted); }

/* ===== Kullanim sekilleri (home-modes) ===== */
.qm-md-grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .qm-md-grid { grid-template-columns: 1fr 1.25fr 1fr; align-items: center; } }
.qm-md-card { position: relative; padding: 2rem; border-radius: 1.75rem; border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); box-shadow: 0 24px 50px -38px rgba(15, 23, 42, 0.45); }
.qm-md-card.is-featured { color: #e0e7ff; border-color: transparent; background: linear-gradient(160deg, #0f2547 0%, #1c4479 60%, #2b62ac 100%); box-shadow: 0 40px 80px -40px rgba(28, 68, 121, 0.8); }
@media (min-width: 1024px) { .qm-md-card.is-featured { padding: 2.5rem; } }
.qm-md-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qm-md-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.9rem; font-size: 1.2rem; color: var(--qm-accent); background: color-mix(in srgb, var(--qm-accent) 12%, transparent); }
.is-featured .qm-md-icon { color: #fff; background: linear-gradient(135deg, #4a86d6, #2b62ac); }
.qm-md-tag { padding: 0.25rem 0.7rem; border-radius: 9999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qm-text-muted); border: 1px solid var(--qm-border-color); }
.is-featured .qm-md-tag { color: #0b1437; background: #fbbf24; border-color: transparent; }
.qm-md-title { margin-top: 1.25rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--qm-text-main); }
.is-featured .qm-md-title { color: #fff; font-size: 1.7rem; }
.qm-md-desc { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.6; color: var(--qm-text-muted); }
.is-featured .qm-md-desc { color: #c7d2fe; }
.qm-md-flow { margin: 1.4rem 0 0; padding: 1rem; list-style: none; display: grid; gap: 0.55rem; border-radius: 1.1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.qm-md-flow li { position: relative; display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; font-weight: 600; color: #fff; }
/* Yalnızca ikon kutusu; metin span'i (Düzenleme Modu için) bu kuraldan etkilenmemeli. */
.qm-md-flow li > .qm-md-flow-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.6rem; color: #fff; background: rgba(74, 134, 214, 0.45); }
.qm-md-flow li:last-child > .qm-md-flow-icon { background: #10b981; }
.qm-md-flow li + li::before { content: ''; position: absolute; left: 0.95rem; top: -0.55rem; height: 0.55rem; width: 2px; background: rgba(255, 255, 255, 0.25); }
/* Akış animasyonu: 4 adım sırayla canlanır (adım başına 1,5 sn, 6 sn'lik döngü). Aktif adımın ikonu büyür ve
ışıldar, bağlantı çizgisi dolar; diğerleri sönük kalır. Hareket azaltma tercihinde animasyon yok, hepsi net. */
.qm-md-flow li { animation: qmFlowStep 6s ease-in-out infinite; }
.qm-md-flow li > .qm-md-flow-icon { animation: qmFlowIcon 6s ease-in-out infinite; transition: transform .3s ease; }
.qm-md-flow li:last-child > .qm-md-flow-icon { animation-name: qmFlowIconDone; }
.qm-md-flow li + li::before { animation: qmFlowLine 6s ease-in-out infinite; }
.qm-md-flow li:nth-child(2), .qm-md-flow li:nth-child(2) > .qm-md-flow-icon, .qm-md-flow li:nth-child(2)::before { animation-delay: 1.5s; }
.qm-md-flow li:nth-child(3), .qm-md-flow li:nth-child(3) > .qm-md-flow-icon, .qm-md-flow li:nth-child(3)::before { animation-delay: 3s; }
.qm-md-flow li:nth-child(4), .qm-md-flow li:nth-child(4) > .qm-md-flow-icon, .qm-md-flow li:nth-child(4)::before { animation-delay: 4.5s; }
@keyframes qmFlowStep { 0%, 30%, 100% { opacity: 0.5; } 6%, 24% { opacity: 1; } }
@keyframes qmFlowIcon {
0%, 30%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
6%, 24% { transform: scale(1.14); box-shadow: 0 0 0 5px rgba(129, 140, 248, 0.28), 0 0 18px rgba(129, 140, 248, 0.65); }
}
@keyframes qmFlowIconDone {
0%, 30%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
6%, 24% { transform: scale(1.14); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.28), 0 0 18px rgba(16, 185, 129, 0.7); }
}
@keyframes qmFlowLine { 0%, 30%, 100% { background: rgba(255, 255, 255, 0.25); } 4%, 24% { background: #a5b4fc; } }
@media (prefers-reduced-motion: reduce) {
.qm-md-flow li, .qm-md-flow li > .qm-md-flow-icon, .qm-md-flow li + li::before { animation: none; opacity: 1; }
}
.qm-md-points { margin-top: 1.4rem; list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.qm-md-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--qm-text-main); }
.qm-md-points i { margin-top: 0.2rem; font-size: 0.75rem; color: #10b981; }
.is-featured .qm-md-points li { color: #e0e7ff; }
.is-featured .qm-md-points i { color: #34d399; }
.qm-md-waiter { margin-top: 1.5rem; display: grid; gap: 2rem; align-items: center; padding: 2rem; border-radius: 1.75rem; border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); box-shadow: 0 24px 50px -38px rgba(15, 23, 42, 0.45); }
@media (min-width: 1024px) { .qm-md-waiter { grid-template-columns: minmax(0, 1fr) 16rem; gap: 3.5rem; padding: 2.75rem 3rem; } }
.qm-md-waiter .qm-md-tag { display: inline-block; color: var(--qm-accent); border-color: color-mix(in srgb, var(--qm-accent) 35%, transparent); background: color-mix(in srgb, var(--qm-accent) 8%, transparent); }
.qm-md-waiter .qm-md-title { margin-top: 1rem; }
.qm-md-steps { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .qm-md-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qm-md-steps li { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--qm-text-main); background: color-mix(in srgb, var(--qm-accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--qm-accent) 18%, transparent); }
.qm-md-steps li i { color: var(--qm-accent); }
.qm-md-step-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--qm-accent), color-mix(in srgb, var(--qm-accent) 60%, #0f172a)); }
.qm-md-waiter-shot { max-width: 15rem; width: 100%; margin: 0 auto; }
.qm-md-note { margin: 2rem auto 0; max-width: 46rem; text-align: center; font-size: 0.85rem; color: var(--qm-text-muted); }
.qm-md-note i { color: var(--qm-accent); margin-right: 0.35rem; }

/* ===== Bir siparisin yolculugu (home-journey) ===== */
.qm-jr-grid { margin-top: 4rem; display: grid; gap: 3rem; }
.qm-jr-phone-col { display: none; }
@media (min-width: 1024px) {
.qm-jr-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
/* Sütun adımlar kadar uzun olmalı; yoksa sticky telefon kendi kısa kutusunda kalır, ekranda yapışmaz. */
.qm-jr-phone-col { display: block; align-self: stretch; }
.qm-jr-phone-sticky { position: sticky; top: 7rem; max-width: 19rem; margin-left: auto; margin-right: 3rem; }
.qm-jr-step { min-height: 48vh; display: flex; align-items: center; }
.qm-jr-step:last-child { min-height: 42vh; }
.qm-jr-inline-shot { display: none; }
}
/* Telefon arkasında yumuşak ışık halesi */
.qm-jr-glow { position: absolute; inset: 10% -18%; border-radius: 9999px; background: radial-gradient(circle, rgba(var(--qm-accent-rgb), 0.28), transparent 65%); filter: blur(10px); z-index: -1; }
.qm-jr-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.16, 1, .3, 1); }
.qm-jr-shot.is-on { opacity: 1 !important; transform: scale(1); }
/* Canlı bildirim kartları: aktif adımınki süzülerek girer ve hafifçe yüzer (giriş ekranındaki qmFloat). */
.qm-jr-ping { position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-radius: 1rem; min-width: 12.5rem;
background: rgba(255, 255, 255, .97); color: #0f172a; box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .5); opacity: 0; pointer-events: none;
transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.qm-jr-ping.is-left { left: -5.5rem; bottom: 22%; transform: translate(-14px, 10px); }
.qm-jr-ping.is-right { right: -6rem; top: 20%; transform: translate(14px, 10px); }
.qm-jr-ping.is-on { opacity: 1; transform: none; animation: qmJrFloat 5s ease-in-out .6s infinite; }
.qm-jr-ping i { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .7rem; color: #fff; font-size: .85rem; flex-shrink: 0; }
.qm-jr-ping b { display: block; font-size: .78rem; font-weight: 800; }
.qm-jr-ping span { display: block; font-size: .7rem; color: #64748b; margin-top: .1rem; }
@keyframes qmJrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.qm-jr-steps { position: relative; list-style: none; margin: 0; padding: 0; }
/* Soldaki dikey ilerleme çizgisi: yuvarlak uçlu ray + aktif simgeye kadar dolan düz yeşil çizgi (animasyon yok;
--qm-jr-fill: Alpine ölçer). Simge merkezi = 1.55rem; çizgi 4px, ortalı. Yanında yüzde etiketi (masaüstü). */
/* Dolan cubuk ve yuzde rozeti yesil kalir (kullanici istegi); adim ikonu/kart duz logo kirmizisi. */
.qm-jr-steps::before { content: ''; position: absolute; left: calc(1.55rem - 2px); top: 1.5rem; bottom: 1.5rem; width: 4px; border-radius: 9999px;
background: color-mix(in srgb, #10b981 14%, var(--qm-border-color)); }
.qm-jr-steps::after { content: ''; position: absolute; left: calc(1.55rem - 2px); top: 1.5rem; width: 4px; border-radius: 9999px;
height: max(0px, calc(var(--qm-jr-fill, 0px) - 1.5rem)); background: #10b981; }
.qm-jr-pct { display: none; }
@media (min-width: 1024px) {
.qm-jr-pct { display: block; position: absolute; z-index: 2; right: calc(100% + 0.9rem); top: var(--qm-jr-fill, 1.5rem); transform: translateY(-50%);
    padding: .3rem .6rem; border-radius: 9999px; font-size: .78rem; font-weight: 800; line-height: 1; color: #fff; background: #10b981;
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .7); white-space: nowrap; font-variant-numeric: tabular-nums; }
}
.qm-jr-bignum { position: absolute; right: 1.1rem; top: .5rem; font-size: 3.4rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
color: var(--qm-text-main); opacity: .05; pointer-events: none; transition: opacity .35s ease, color .35s ease; }
.qm-jr-step.is-active .qm-jr-bignum { opacity: .12; color: var(--qm-accent); }
.qm-jr-step.is-active .qm-jr-num { animation: qmJrPulse 1.8s ease-out infinite; }
@keyframes qmJrPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--qm-accent-rgb), .45); } 100% { box-shadow: 0 0 0 14px rgba(var(--qm-accent-rgb), 0); } }
/* z-index: adımlar (kart + ikon) çizgilerin üstünde; ::after sonradan çizildiği için yoksa simgelerin üzerine biniyordu. */
.qm-jr-step { position: relative; z-index: 1; padding: 0.75rem 0; }
.qm-jr-steps::before, .qm-jr-steps::after { z-index: 0; }
.qm-jr-card {
position: relative; display: flex; width: 100%; gap: 1.1rem; align-items: flex-start; padding: 1.25rem 1.4rem; border-radius: 1.25rem;
border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease, opacity .35s ease;
}
@media (min-width: 1024px) { .qm-jr-card { opacity: 0.55; } }
.qm-jr-step.is-active .qm-jr-card, .qm-jr-step.is-done .qm-jr-card { opacity: 1; }
.qm-jr-step.is-active .qm-jr-card { border-color: color-mix(in srgb, var(--qm-accent) 55%, transparent); box-shadow: 0 24px 50px -28px rgba(var(--qm-accent-rgb), 0.6); transform: translateX(6px); }
.qm-jr-num {
position: relative; z-index: 1; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin-left: -1.4rem;
border-radius: 9999px; font-size: 1.1rem; color: var(--qm-text-muted); background: var(--qm-body-bg); border: 2px solid var(--qm-border-color); transition: all .35s ease;
}
.qm-jr-step.is-active .qm-jr-num, .qm-jr-step.is-done .qm-jr-num { color: #fff; border-color: transparent; background: #e11d48; }
.qm-jr-step.is-active .qm-jr-num { animation-name: qmJrPulseLogo; }
@keyframes qmJrPulseLogo { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); } 100% { box-shadow: 0 0 0 14px rgba(225, 29, 72, 0); } }
.qm-jr-step.is-active .qm-jr-card { border-color: rgba(225, 29, 72, .45); box-shadow: 0 24px 50px -28px rgba(225, 29, 72, .55); }
.qm-jr-step.is-active .qm-jr-bignum { color: #e11d48; }
.qm-jr-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #e11d48; }
.qm-jr-title { margin-top: 0.2rem; font-size: 1.2rem; font-weight: 800; color: var(--qm-text-main); }
.qm-jr-desc { margin-top: 0.35rem; font-size: 0.92rem; line-height: 1.6; color: var(--qm-text-muted); }
.qm-jr-inline-shot { width: 11rem; margin: 1rem 0 0 1.8rem; }
@media (prefers-reduced-motion: reduce) {
.qm-jr-card, .qm-jr-shot, .qm-jr-num, .qm-jr-ping { transition: none; }
.qm-jr-ping.is-on, .qm-jr-step.is-active .qm-jr-num { animation: none; }
}

/* ===== Paketler / fiyat kartlari (pricing-section) ===== */
.qm-plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 1.75rem;
        background: var(--qm-surface-bg);
        border: 1px solid color-mix(in srgb, var(--qm-plan-from) 30%, var(--qm-border-color));
        box-shadow: 0 18px 45px -28px color-mix(in srgb, var(--qm-plan-from) 70%, transparent);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .qm-plan-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 60px -24px color-mix(in srgb, var(--qm-plan-to) 75%, transparent);
    }
    /* One cikan paket: kurumsal ikincil renk kirmizi cerceve (#e11d48). */
    .qm-plan-card.is-featured {
        border: 2px solid transparent;
        background:
            linear-gradient(var(--qm-surface-bg), var(--qm-surface-bg)) padding-box,
            linear-gradient(135deg, #f43f5e, #e11d48 50%, #be123c) border-box;
        box-shadow: 0 30px 70px -28px rgba(225, 29, 72, 0.45);
    }
    .qm-plan-head {
        position: relative;
        overflow: hidden;
        padding: 2rem 2rem 1.75rem;
        color: #fff;
        background: linear-gradient(135deg, var(--qm-plan-from), var(--qm-plan-to));
    }
    /* Paket basliginda daire susleri kaldirildi (10.10, kullanici istegi): duz renk zemin. */
    .qm-plan-check {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 1.85rem;
        height: 1.85rem;
        margin-top: -0.2rem;
        border-radius: 0.6rem;
        font-size: 0.8rem;
        color: #fff;
        background: linear-gradient(135deg, var(--qm-plan-from), var(--qm-plan-to));
    }
    /* Ozellik satirlari (20.10): sinifsiz <li>, ikon .qm-pc (qm-plan-check ile ayni kutu, tek eleman). */
    .qm-plan-features > li { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 500; color: var(--qm-text-main); }
    .qm-plan-features > li > span:not([class]) { opacity: 0.9; }
    .qm-pc { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; margin-top: -0.2rem; border-radius: 0.6rem; font-size: 0.8rem; color: #fff; background: linear-gradient(135deg, var(--qm-plan-from), var(--qm-plan-to)); }
    /* Ek module bagli ozellik etiketi (10.10): "Kasa Modulu alindiginda" (kirmizi) / "Patron Ekrani alindiginda" (mavi). */
    .qm-plan-addon-note { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 9999px; font-size: 0.64rem; font-weight: 700; white-space: nowrap; vertical-align: 0.1em; }
    .qm-plan-addon-note.is-cashier { color: #be123c; background: rgba(225, 29, 72, 0.1); border: 1px solid rgba(225, 29, 72, 0.25); }
    .qm-plan-addon-note.is-patron { color: #1d4ed8; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.25); }
    .qm-plan-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 9999px;
        padding: 0.95rem 1.5rem;
        font-weight: 800;
        color: #fff;
        /* Tum dugmeler kurumsal kirmizi (--qm-btn); paket kartinin rengi baslik/rozet tarafinda kalir. */
        background: linear-gradient(135deg, color-mix(in srgb, var(--qm-btn, #e11d48) 80%, white), var(--qm-btn, #e11d48) 55%, color-mix(in srgb, var(--qm-btn, #e11d48) 82%, black));
        box-shadow: 0 14px 30px -14px rgba(var(--qm-btn-rgb, 225, 29, 72), 0.85);
        transition: filter 0.2s ease, transform 0.2s ease;
    }
    .qm-plan-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .qm-plan-btn i { transition: transform 0.2s ease; }
    .qm-plan-btn:hover i { transform: translateX(3px); }
    .qm-addon-free { margin-left: auto; flex-shrink: 0; border-radius: 9999px; padding: 0.1rem 0.55rem; font-size: 0.68rem; font-weight: 800; color: #047857; background: #d1fae5; }
    /* Ek modul kutulari: her modul kendi renginde (Kasa kirmizi, Patron lacivert). Secilince kutu o renge dolar. */
    .qm-addon-opt { --ao-a: #e11d48; --ao-b: #be123c; --ao-soft: #fff1f3; --ao-line: #fecdd3; --ao-ink: #9f1239;
        display: flex; flex-direction: column; gap: 0.55rem; cursor: pointer; border-radius: 1.1rem; padding: 0.85rem 0.95rem;
        border: 1.5px solid var(--ao-line); background: linear-gradient(135deg, var(--ao-soft), #fff 85%);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, border-color 0.2s ease; }
    .qm-addon-opt.is-patron { --ao-a: #2563eb; --ao-b: #1e3a8a; --ao-soft: #eef2ff; --ao-line: #c7d2fe; --ao-ink: #1e3a8a; }
    .qm-addon-opt:hover { transform: translateY(-1px); border-color: var(--ao-a); box-shadow: 0 12px 24px -16px var(--ao-a); }
    .qm-addon-top { display: flex; align-items: center; gap: 0.7rem; }
    .qm-addon-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, var(--ao-a), var(--ao-b)); box-shadow: 0 8px 16px -10px var(--ao-a); }
    .qm-addon-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
    .qm-addon-name b { font-size: 0.95rem; font-weight: 800; color: var(--qm-text-main); line-height: 1.2; }
    .qm-addon-name small { font-size: 0.74rem; color: var(--qm-text-muted); line-height: 1.3; }
    .qm-addon-box { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 0.45rem; border: 1.5px solid var(--ao-line); background: #fff; font-size: 0.7rem; color: transparent; transition: all 0.2s ease; }
    .qm-addon-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; padding-left: 3.2rem; }
    .qm-addon-price strong { font-size: 1.05rem; font-weight: 900; color: var(--ao-ink); }
    .qm-addon-price s { font-size: 0.8rem; color: var(--qm-text-muted); }
    .qm-addon-price em { font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 9999px; color: #fff; background: linear-gradient(135deg, var(--ao-a), var(--ao-b)); }
    .qm-addon-opt.is-on { border-color: transparent; background: linear-gradient(135deg, var(--ao-a), var(--ao-b)); box-shadow: 0 16px 30px -16px var(--ao-a); }
    .qm-addon-opt.is-on .qm-addon-ico { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
    .qm-addon-opt.is-on .qm-addon-name b, .qm-addon-opt.is-on .qm-addon-price strong { color: #fff; }
    .qm-addon-opt.is-on .qm-addon-name small, .qm-addon-opt.is-on .qm-addon-price s { color: rgba(255, 255, 255, 0.78); }
    .qm-addon-opt.is-on .qm-addon-price em { color: var(--ao-b); background: #fff; }
    .qm-addon-opt.is-on .qm-addon-box { color: var(--ao-b); border-color: #fff; background: #fff; }
    .qm-addon-opt .qm-addon-hint { margin-top: 0; padding: 0.4rem 0.6rem; border-radius: 0.6rem; background: rgba(225, 29, 72, 0.08); }
    .qm-addon-opt.is-on .qm-addon-hint { color: #fff; background: rgba(255, 255, 255, 0.16); }
    .qm-addon-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; border-radius: 0.9rem; padding: 0.7rem 0.85rem; font-size: 0.8rem; color: var(--qm-text-muted); background: color-mix(in srgb, var(--qm-plan-to) 8%, transparent); }
    .qm-cashier-note { margin: 2.5rem auto 0; max-width: 56rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; border-radius: 1.25rem; border: 1.5px solid rgba(225, 29, 72, 0.35); background: linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(37, 99, 235, 0.06)); }
    .qm-cashier-note-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 0.95rem; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #f43f5e, #dc2626); }
    .qm-cashier-note-text { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: 0.2rem; }
    .qm-cashier-note-text strong { font-size: 1rem; font-weight: 800; color: var(--qm-text-main); }
    .qm-cashier-note-text span { font-size: 0.875rem; color: var(--qm-text-muted); }
    .qm-cashier-note-btn { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; border-radius: 9999px; padding: 0.7rem 1.2rem; font-size: 0.9rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e11d48, #be123c); box-shadow: 0 12px 26px -14px rgba(225, 29, 72, 0.85); transition: filter 0.2s ease, transform 0.2s ease; }
    .qm-cashier-note-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .qm-addon-hint { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; color: #be123c; }
    .qm-addon-hint a { text-decoration: underline; }
    /* Secimle toplam kutusu: kart renginde, satir satir dokum + buyuk KDV dahil toplam */
    .qm-addon-opt ~ .qm-addon-total, .qm-addon-total { display: block; padding: 1rem 1.1rem; border-radius: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--qm-plan-from), var(--qm-plan-to)); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--qm-plan-to) 90%, transparent); }
    .qm-at-title { margin-bottom: 0.55rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
    .qm-at-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.18rem 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.9); }
    .qm-at-row b { font-weight: 800; color: #fff; white-space: nowrap; }
    .qm-at-sum { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed rgba(255, 255, 255, 0.35); }
    .qm-at-grand { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.45rem; padding: 0.7rem 0.85rem; border-radius: 0.85rem; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
    .qm-at-grand span { font-size: 0.85rem; font-weight: 800; }
    .qm-at-grand strong { font-size: 1.85rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }

/* ===== 4 paket yan yana (20.10, qm-plans-4) =====
   Kart dar oldugu icin her sey sikistirilir: buyuk soluk paket simgesi basligin arka planinda, one cikan pakete ust serit,
   ek moduller tek satirlik kutu, ozelliklerin ilk 6'si gorunur (kalanlari qm-plan-more ile dort kartta birlikte acilir). */
    .qm-plans-4 { align-items: stretch; }
    .qm-plans-4 .qm-plan-card { border-radius: 1.5rem; }
    .qm-plans-4 .qm-plan-ribbon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.75rem; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #f43f5e, #e11d48 50%, #be123c); }
    .qm-plans-4 .qm-plan-head { padding: 1.4rem 1.35rem 1.35rem; }
    .qm-plans-4 .qm-plan-watermark { position: absolute; right: -1.1rem; bottom: -1.4rem; font-size: 8.5rem; line-height: 1; color: #fff; opacity: 0.12; transform: rotate(-14deg); pointer-events: none; transition: transform 0.5s ease, opacity 0.5s ease; }
    .qm-plans-4 .qm-plan-card:hover .qm-plan-watermark { opacity: 0.2; transform: rotate(-4deg) scale(1.06); }
    .qm-plans-4 .qm-plan-head h3 { font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.06em; }
    .qm-plans-4 .qm-plan-head .h-11 { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; border-radius: 0.8rem; }
    .qm-plans-4 .qm-plan-price { font-size: 2.45rem; line-height: 1; }
    .qm-plans-4 .qm-plan-tax { margin-top: 0.45rem; font-size: 0.95rem; }
    .qm-plans-4 .qm-plan-print { font-size: 9px; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; }
    .qm-plans-4 .qm-plan-desc { font-size: 0.8rem; line-height: 1.45; }
    .qm-plans-4 .qm-plan-body { padding: 1.25rem 1.2rem 1.4rem; }
    .qm-plans-4 .qm-plan-body > .mb-7 { margin-bottom: 1.1rem; }
    .qm-plans-4 .qm-addon-opt { gap: 0.3rem; padding: 0.6rem 0.7rem; border-radius: 0.9rem; }
    .qm-plans-4 .qm-addon-ico { width: 2rem; height: 2rem; font-size: 0.9rem; border-radius: 0.65rem; }
    .qm-plans-4 .qm-addon-name b { font-size: 0.85rem; }
    .qm-plans-4 .qm-addon-name small, .qm-plans-4 .qm-addon-opt .qm-addon-hint { display: none; }
    .qm-plans-4 .qm-addon-price { padding-left: 2.7rem; }
    .qm-plans-4 .qm-addon-price strong { font-size: 0.92rem; }
    .qm-plans-4 .qm-at-grand strong { font-size: 1.4rem; }
    .qm-plans-4 .qm-plan-features { row-gap: 0.6rem; font-size: 0.8rem; line-height: 1.4; }
    .qm-plans-4 .qm-plan-check, .qm-plans-4 .qm-pc { width: 1.55rem; height: 1.55rem; font-size: 0.72rem; border-radius: 0.5rem; margin-top: -0.1rem; }
    .qm-plans-4 .qm-plan-addon-note { display: flex; width: max-content; margin-left: 0; margin-top: 0.25rem; }
    .qm-plan-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 1rem; padding: 0.55rem 0.8rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 800; color: var(--qm-plan-to); border: 1.5px dashed color-mix(in srgb, var(--qm-plan-to) 45%, transparent); background: color-mix(in srgb, var(--qm-plan-to) 6%, transparent); transition: background 0.2s ease; }
    .qm-plan-more:hover { background: color-mix(in srgb, var(--qm-plan-to) 12%, transparent); }
    .qm-plan-more i { transition: transform 0.25s ease; }
    .qm-plan-more[aria-expanded="true"] i { transform: rotate(180deg); }
    .qm-plans-4 .qm-plan-cta { padding-top: 1.25rem; }
    .qm-plans-4 .qm-plan-btn { padding: 0.8rem 1.1rem; font-size: 0.9rem; }
    @media (min-width: 1024px) {
        .qm-plans-4 .qm-plan-card.is-featured { transform: translateY(-14px); }
        .qm-plans-4 .qm-plan-card.is-featured:hover { transform: translateY(-20px); }
    }
    @media (min-width: 1024px) and (max-width: 1199px) {
        .qm-plans-4 .qm-plan-price { font-size: 2rem; }
        .qm-plans-4 .qm-plan-head, .qm-plans-4 .qm-plan-body { padding-left: 1rem; padding-right: 1rem; }
    }

/* ===== Pastane Uretim ve Siparis Sistemi tanitimi (20.10, home-pastry.blade) =====
   Kurumsal koyu lacivert panel: ust baslik, 6 adimlik is akisi (genis ekranda yatay cizgiyle bagli, telefonda dikey),
   4 ozet kart ve alt bilgi etiketleri. Ekran goruntusu kullanilmaz. */
    .qm-ps-panel { position: relative; overflow: hidden; border-radius: 2rem; padding: 3.5rem 1.25rem 2rem; color: #fff;
        background: radial-gradient(120% 80% at 100% 0%, rgba(225, 29, 72, 0.28), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(74, 134, 214, 0.35), transparent 60%), linear-gradient(150deg, #0b1d3a, #12305e 55%, #1e3a8a);
        box-shadow: 0 40px 80px -40px rgba(15, 37, 71, 0.75); }
    .qm-ps-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
        background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
    .qm-ps-panel > * { position: relative; }
    .qm-ps-head { max-width: 48rem; margin: 0 auto; text-align: center; }
    .qm-ps-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
    .qm-ps-badge { max-width: 100%; justify-content: center; text-align: center; line-height: 1.35; }
    .qm-ps-badge i { color: #fda4af; }
    .qm-ps-flow, .qm-ps-pillars, .qm-ps-step, .qm-ps-pillar { min-width: 0; }
    .qm-ps-step > * { min-width: 0; overflow-wrap: anywhere; }
    .qm-ps-title { margin-top: 1.4rem; font-size: 1.9rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; }
    .qm-ps-lead { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }

    .qm-ps-flow { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: none; }
    .qm-ps-step { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; padding-bottom: 0.4rem; }
    .qm-ps-step::before { content: ""; position: absolute; left: 1.7rem; top: 3.6rem; bottom: -1.1rem; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)); }
    .qm-ps-step:last-child::before { display: none; }
    .qm-ps-dot { grid-row: span 2; position: relative; display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; font-size: 1.35rem; color: #fff;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 14px 30px -18px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .qm-ps-dot b { position: absolute; top: -0.45rem; right: -0.45rem; display: flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 0 0 3px #12305e; }
    .qm-ps-step strong { align-self: end; font-size: 1.02rem; font-weight: 800; }
    .qm-ps-step p { margin-top: 0.25rem; font-size: 0.86rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

    .qm-ps-pillars { margin-top: 3rem; display: grid; gap: 1rem; }
    .qm-ps-pillar { border-radius: 1.4rem; padding: 1.4rem 1.3rem; color: var(--qm-text-main); background: var(--qm-surface-bg, #fff); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.7); transition: transform 0.3s ease; }
    .qm-ps-pillar:hover { transform: translateY(-4px); }
    .qm-ps-picon { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 0.95rem; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, #2b62ac, #1e3a8a); box-shadow: 0 12px 22px -14px #1e3a8a; }
    .qm-ps-pillar:nth-child(2) .qm-ps-picon { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 12px 22px -14px #be123c; }
    .qm-ps-pillar:nth-child(4) .qm-ps-picon { background: linear-gradient(135deg, #0f2547, #2b62ac); }
    .qm-ps-ptitle { margin-top: 1rem; font-size: 1.02rem; font-weight: 800; }
    .qm-ps-pillar ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
    .qm-ps-pillar li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--qm-text-muted); }
    .qm-ps-pillar li i { margin-top: 0.22rem; font-size: 0.7rem; color: #2b62ac; }

    .qm-ps-foot { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
    .qm-ps-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
    .qm-ps-chips span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
    .qm-ps-chips i { color: #93c5fd; }
    .qm-ps-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
    .qm-ps-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.85rem 1.5rem; font-size: 0.95rem; font-weight: 800; transition: filter 0.2s ease, transform 0.2s ease; }
    .qm-ps-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
    .qm-ps-btn.is-primary { color: #fff; background: linear-gradient(135deg, #f43f5e, #e11d48 55%, #be123c); box-shadow: 0 14px 30px -14px rgba(225, 29, 72, 0.9); }
    .qm-ps-btn.is-ghost { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }

    @media (min-width: 768px) {
        .qm-ps-panel { padding: 4.5rem 2.5rem 2.75rem; }
        .qm-ps-title { font-size: 2.75rem; }
        .qm-ps-flow { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
        .qm-ps-step { grid-template-columns: 1fr; align-content: start; text-align: center; justify-items: center; }
        .qm-ps-step strong { align-self: start; }
        .qm-ps-step::before { display: none; }
        .qm-ps-dot { grid-row: auto; margin-bottom: 0.9rem; }
        .qm-ps-pillars { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1200px) {
        .qm-ps-panel { padding: 5rem 3.5rem 3rem; }
        .qm-ps-flow { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
        /* Adimlari baglayan yatay cizgi: ilk ve son ikonun ortasindan gecer. */
        .qm-ps-flow::before { content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 1.7rem; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08)); }
        .qm-ps-flow { position: relative; }
        .qm-ps-pillars { grid-template-columns: repeat(4, 1fr); }
    }

/* ===== Ozellikler kartlari (home.blade #features) ===== */
/* Her kart ikonunun renginde: --fc-a / --fc-b (home.blade, Tailwind gecisinden). */
.qm-fc { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 1.6rem; border-radius: 1.4rem;
    background: radial-gradient(260px 180px at 100% 0%, color-mix(in srgb, var(--fc-a) 13%, transparent), transparent 70%), var(--qm-surface-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--fc-a) 16%, var(--qm-border-color, #e5e7eb));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -24px color-mix(in srgb, var(--fc-a) 55%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.qm-fc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--fc-a), var(--fc-b)); opacity: 0.85; transform-origin: left; transform: scaleX(0.35); transition: transform 0.4s ease, opacity 0.3s ease; }
.qm-fc:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--fc-a) 45%, transparent);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 28px 50px -26px color-mix(in srgb, var(--fc-a) 75%, transparent); }
.qm-fc:hover::before { transform: scaleX(1); opacity: 1; }
.qm-fc-num { position: absolute; top: 1.15rem; right: 1.35rem; font-size: 2.1rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: color-mix(in srgb, var(--fc-a) 14%, transparent); transition: color 0.3s ease; }
.qm-fc:hover .qm-fc-num { color: color-mix(in srgb, var(--fc-a) 28%, transparent); }
.qm-fc-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 1.05rem; font-size: 1.45rem; color: #fff;
    background: linear-gradient(135deg, var(--fc-a), var(--fc-b));
    box-shadow: 0 12px 22px -12px var(--fc-a), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1); }
.qm-fc:hover .qm-fc-icon { transform: scale(1.1) rotate(-6deg); }
.qm-fc-title { margin-top: 1.25rem; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--qm-text-main); }
.qm-fc-desc { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: var(--qm-text-muted); }
.qm-fc-arrow { position: absolute; right: 1.35rem; bottom: 1.25rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; font-size: 0.85rem;
    color: var(--fc-a); background: color-mix(in srgb, var(--fc-a) 12%, transparent); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.qm-fc:hover .qm-fc-arrow { opacity: 1; transform: translateX(0); }
.qm-fc .qm-fc-desc { padding-right: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .qm-fc, .qm-fc-icon, .qm-fc::before { transition: none; } .qm-fc:hover { transform: none; } }

/* Ozellikler: Bento duzeni (10.10). Buyuk karolar 2x2 (yazi + ekran goruntusu), kucukler 1x1; bosluklar dense ile dolar. */
.qm-bento { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
@media (min-width: 1024px) { .qm-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qm-bento-big { position: relative; overflow: hidden; grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 0.75rem; min-height: 15rem; padding: 1.4rem 0 0 1.4rem; border-radius: 1.4rem; color: #fff;
    background: linear-gradient(150deg, #2b62ac 0%, #1c4479 100%); box-shadow: 0 24px 50px -30px rgba(28, 68, 121, 0.75); transition: transform 0.3s ease, box-shadow 0.3s ease; }
@media (min-width: 1024px) { .qm-bento-big { grid-row: span 2; } }
.qm-bento-big:nth-child(2n) { background: linear-gradient(150deg, #1c4479 0%, #0f2547 100%); }
.qm-bento-big:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(28, 68, 121, 0.9); }
.qm-bento-big .qm-bento-ico { color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); }
.qm-bento-big h3 { margin-top: 0.9rem; font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: #fff; }
.qm-bento-big p { margin-top: 0.5rem; padding-bottom: 1.4rem; font-size: 0.86rem; line-height: 1.55; color: rgba(226, 232, 240, 0.85); }
.qm-bento-shot { position: relative; align-self: end; height: 100%; max-height: 17rem; overflow: hidden; border-top-left-radius: 1.1rem; }
.qm-bento-shot img { display: block; width: 100%; height: auto; border-top-left-radius: 1.1rem; box-shadow: -10px -6px 30px -12px rgba(0, 0, 0, 0.5); }
.qm-bento-shot .qm-pm { max-width: none; transform: none; }
.qm-bento-small { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: 1.1rem; border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.qm-bento-small:hover { transform: translateY(-3px); border-color: rgba(43, 98, 172, 0.4); box-shadow: 0 14px 28px -20px rgba(43, 98, 172, 0.8); }
.qm-bento-ico { display: inline-flex; flex-shrink: 0; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 0.75rem; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #4a86d6, #2b62ac); }
.qm-bento-small h3 { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--qm-text-main); }
.qm-bento-small p { margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.45; color: var(--qm-text-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) { .qm-bento-big { grid-template-columns: 1fr; padding-right: 1.4rem; } .qm-bento-shot { display: none; } }

/* Ozellikler: Koyu lacivert vitrin (10.10). Bant + cam kartlar + kayan ozellik seridi. */
.qm-fd { position: relative; overflow: hidden; isolation: isolate; padding: 3.5rem 1.5rem 2rem; border-radius: 2rem; color: #fff;
    background: radial-gradient(120% 120% at 50% 0%, #1f4a85 0%, #122c52 45%, #0a1528 85%); box-shadow: 0 40px 90px -40px rgba(10, 21, 40, 0.8); }
@media (min-width: 768px) { .qm-fd { padding: 4.5rem 3rem 2.5rem; } }
.qm-fd::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, #2b62ac 25%, #5b8fd6 50%, #e11d48 78%, transparent); }
.qm-fd h2 { color: #fff !important; }
.qm-fd .text-center p { color: rgba(226, 232, 240, 0.8) !important; }
.qm-fd-cards .qm-fc { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.qm-fd-cards .qm-fc:hover { border-color: rgba(147, 187, 236, 0.5); box-shadow: 0 0 0 1px rgba(147, 187, 236, 0.2), 0 18px 40px -20px rgba(43, 98, 172, 0.9), 0 10px 30px -18px rgba(225, 29, 72, 0.6); }
.qm-fd-cards .qm-fc-title { color: #fff; }
.qm-fd-cards .qm-fc-desc { color: rgba(226, 232, 240, 0.72); }
.qm-fd-cards .qm-fc-num { color: rgba(255, 255, 255, 0.12); }
.qm-fd-marquee { margin-top: 2.25rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.qm-fd-track { display: flex; gap: 0.75rem; width: max-content; animation: qm-fd-scroll 60s linear infinite; }
.qm-fd-marquee:hover .qm-fd-track { animation-play-state: paused; }
.qm-fd-track span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: rgba(226, 232, 240, 0.9); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.qm-fd-track i { color: #93bbec; }
@keyframes qm-fd-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .qm-fd-track { animation: none; } }

/* Ozellikler: kategorili sekmeler (10.10). Solda/ustte sekmeler, altta 2 sutun kompakt kart + sagda ilgili ekranin telefon goruntusu. */
.qm-ft-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.35rem; margin: 0 auto 1.75rem; width: max-content; max-width: 100%; border-radius: 9999px;
    background: color-mix(in srgb, var(--qm-text-main) 4%, var(--qm-surface-bg)); border: 1px solid var(--qm-border-color); scrollbar-width: none; }
.qm-ft-tabs::-webkit-scrollbar { display: none; }
.qm-ft-tab { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 9999px; font-size: 0.88rem; font-weight: 600; color: var(--qm-text-main); white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.qm-ft-tab:hover { color: var(--qm-text-main); background: color-mix(in srgb, var(--tc, #2b62ac) 8%, transparent); }
/* Renkli sekmeler (10.10): her sekmenin rengi --tc (home.blade); secili degilken simge/sayac o renkte, seciliyken dolgu. */
.qm-ft-tab i { color: var(--tc, #2b62ac); transition: color 0.2s ease; }
.qm-ft-tab .qm-ft-count { color: var(--tc, #2b62ac); background: color-mix(in srgb, var(--tc, #2b62ac) 14%, transparent); }
.qm-ft-tab.is-on { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--tc, #2b62ac) 75%, white), var(--tc, #2b62ac)); box-shadow: 0 10px 22px -12px var(--tc, #2b62ac); }
.qm-ft-tab.is-on i { color: #fff; }
.qm-ft-tab.is-on .qm-ft-count { color: #fff; }
.qm-ft-count { display: inline-flex; min-width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; padding: 0 0.35rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 800;
    background: color-mix(in srgb, var(--qm-text-main) 8%, transparent); }
.qm-ft-tab.is-on .qm-ft-count { background: rgba(255, 255, 255, 0.22); }
/* Telefon/tablet: yana kaydirma fark edilmiyordu (yalniz 2-3 sekme gorunuyordu); sekmeler satirlara sarilir, hepsi gorunur.
   Asil .qm-ft-tab kuralindan SONRA olmali, yoksa ezilir. */
/* 7 sekme (11.10): uzun adlar 80rem kapsayiciya sigmadigi icin her boyutta kisa ad gosterilir (uzun ad title'da). */
.qm-ft-label { display: none; }
.qm-ft-short { display: inline; }
@media (max-width: 1023px) {
    .qm-ft-tabs { flex-wrap: wrap; justify-content: center; width: 100%; overflow: visible; border-radius: 1.25rem; gap: 0.35rem; }
    .qm-ft-tab { padding: 0.5rem 0.8rem; font-size: 0.8rem; gap: 0.4rem; }
    .qm-ft-count { min-width: 1.15rem; height: 1.15rem; font-size: 0.65rem; }
}
/* Telefon: yana kaydirmali tek serit; simge ustte, kisa ad altta (uygulama alt menusu gibi). Sayac gizli.
   Sekmeler esit genislikte ve kaydirma sekmeye oturur (snap). Sag kenar solmasi kullanici istegiyle kaldirildi (11.10). */
@media (max-width: 639px) {
    .qm-ft-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
        gap: 0.25rem; padding: 0.3rem; border-radius: 1rem; }
    .qm-ft-tab { flex: 0 0 4.6rem; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.15rem; border-radius: 0.75rem; font-size: 0.68rem; line-height: 1.1; scroll-snap-align: start; }
    .qm-ft-tab i { font-size: 1.05rem; }
    .qm-ft-count { display: none; }
    .qm-ft-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.qm-ft-panel { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .qm-ft-panel { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; } }
.qm-ft-cards { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qm-ft-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qm-ft-cards .qm-fc { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: center; padding: 1.1rem 1.15rem; border-radius: 1rem; }
.qm-ft-cards .qm-fc:hover { transform: translateY(-3px); }
.qm-ft-cards .qm-fc::before { height: 3px; }
.qm-ft-cards .qm-fc-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; font-size: 1.1rem; }
.qm-ft-cards .qm-fc:hover .qm-fc-icon { transform: scale(1.06); }
.qm-ft-cards .qm-fc-title { margin-top: 0; font-size: 0.98rem; line-height: 1.3; }
.qm-ft-cards .qm-fc-desc { grid-column: 1 / -1; margin-top: 0.6rem; padding-right: 0; font-size: 0.85rem; line-height: 1.55; }
.qm-ft-shot { position: relative; display: none; max-width: 15rem; width: 100%; margin: 0 auto; }
@media (min-width: 1024px) { .qm-ft-shot { display: block; } }
.qm-ft-glow { position: absolute; inset: -12%; z-index: -1; border-radius: 9999px; background: radial-gradient(circle, rgba(43, 98, 172, 0.28), transparent 65%); filter: blur(20px); }

/* Kompakt ozellik kartlari (10.10): simge basligin solunda, aciklama 2 satir; 3 sutun (21 kart = 7 tam satir), bolum ~1/3 yukseklik. */
.qm-fc-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qm-fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qm-fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qm-fc-grid .qm-fc { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center; padding: 1rem 1.1rem 1.05rem; border-radius: 1rem; }
.qm-fc-grid .qm-fc:hover { transform: translateY(-3px); }
.qm-fc-grid .qm-fc::before { height: 3px; }
.qm-fc-grid .qm-fc-icon { grid-row: 1; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; font-size: 1.05rem; }
.qm-fc-grid .qm-fc:hover .qm-fc-icon { transform: scale(1.06); }
.qm-fc-grid .qm-fc-title { grid-row: 1; grid-column: 2; margin-top: 0; font-size: 0.95rem; line-height: 1.3; padding-right: 1.6rem; }
.qm-fc-grid .qm-fc-desc { grid-column: 1 / -1; margin-top: 0.6rem; padding-right: 0; font-size: 0.82rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qm-fc-grid .qm-fc-num { top: 0.7rem; right: 0.85rem; font-size: 1.05rem; }
.qm-fc-grid .qm-fc-arrow { display: none; }

/* ---- Site alt bilgisi (footer-main.blade.php): satir ici stilden tasindi (11.10, HTML agirligi) ---- */
.qm-corp-footer {
    --qm-text-main: #ffffff;
    --qm-text-muted: #c7d2fe;
    --qm-border-color: rgba(255, 255, 255, 0.16);
    position: relative;
    overflow: hidden;
    color: var(--qm-text-muted);
    /* Gece lacivert -> indigo zemin (11.10, kullanici istegi; hesaplayici sonuc kutusuyla ayni aile). */
    background: linear-gradient(120deg, #0b1437 0%, #101a4a 55%, #1f2373 100%);
}
/* Üstte ince marka çizgisi (ikincil renk kırmızı #e11d48) + sağ üstte hafif ışık. */
.qm-corp-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px; /* 11.10: 3px -> 1px (kullanici istegi, ince) */
    background: linear-gradient(90deg, #e11d48, #f43f5e 50%, #e11d48);
}
.qm-corp-footer::after {
    content: '';
    position: absolute;
    width: 560px;
    height: 560px;
    right: -180px;
    top: -260px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, transparent 70%);
    pointer-events: none;
}
.qm-corp-brand { display: inline-block; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.qm-corp-logo { display: block; height: 44px; width: auto; }
.qm-corp-logo.is-on-light { display: none; }
html:not(.dark) .qm-corp-logo.is-on-light { display: block; }
html:not(.dark) .qm-corp-logo.is-on-dark { display: none; }
.qm-corp-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.qm-corp-link { font-size: 0.9rem; color: var(--qm-text-muted); transition: color 0.15s ease; }
.qm-corp-link:hover, .qm-corp-contact:hover, .qm-corp-legal:hover { color: #fff; }
.qm-corp-contact { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--qm-text-muted); transition: color 0.15s ease; }
.qm-corp-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.qm-corp-icon:hover, .qm-corp-contact:hover .qm-corp-icon { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); }
.qm-corp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Boşluklar burada (Tailwind önceden derlenmiş; pt-16 gibi yeni sınıflar derlemede yok). */
.qm-corp-inner { padding: 4.5rem 1.5rem 2.5rem; }
@media (min-width: 1024px) { .qm-corp-inner { padding-top: 5rem; } }
.qm-corp-contacts li + li { margin-top: 0.75rem; }
.qm-corp-bottom { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.qm-corp-legal { font-size: 0.75rem; color: var(--qm-text-muted); transition: color 0.15s ease; }
.qm-corp-footer > div { z-index: 1; }

/* ACIK FOOTER (11.10, deneme): acik temada cok acik gri-mavi zemin, koyu yazi. Koyu temada (html.dark)
   yukaridaki gece laciverti aynen kalir. Geri almak icin bu blogu silmek yeterli. */
html:not(.dark) .qm-corp-footer {
    --qm-text-main: #0f172a;
    --qm-text-muted: #475569;
    --qm-border-color: rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, #f3f7fc 0%, #e9f0f9 100%);
    box-shadow: 0 -18px 40px -30px rgba(15, 23, 42, 0.35);
}
html:not(.dark) .qm-corp-footer::after { background: radial-gradient(circle, rgba(43, 98, 172, 0.12) 0%, transparent 70%); }
html:not(.dark) .qm-corp-brand, html:not(.dark) .qm-corp-heading { color: #0f172a; }
html:not(.dark) .qm-corp-link:hover, html:not(.dark) .qm-corp-contact:hover, html:not(.dark) .qm-corp-legal:hover { color: #2b62ac; }
html:not(.dark) .qm-corp-icon:not([class*="is-"]) { color: #2b62ac; background: #fff; border-color: rgba(15, 23, 42, 0.1); }
html:not(.dark) .qm-corp-icon.is-instagram, html:not(.dark) .qm-corp-icon.is-facebook, html:not(.dark) .qm-corp-icon.is-linkedin,
html:not(.dark) .qm-corp-icon.is-x, html:not(.dark) .qm-corp-icon.is-phone, html:not(.dark) .qm-corp-icon.is-mail, html:not(.dark) .qm-corp-icon.is-wa { color: #fff; border-color: transparent; }
html:not(.dark) .qm-corp-icon.is-x { background: #0f172a; }
html:not(.dark) .qm-corp-badge { color: #0f172a; }
html:not(.dark) .qm-corp-badge.is-ssl { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.4); }
html:not(.dark) .qm-corp-badge.is-ssl i { color: #059669; }
html:not(.dark) .qm-corp-badge.is-2fa { background: rgba(245, 158, 11, 0.14); border-color: rgba(217, 119, 6, 0.4); }
html:not(.dark) .qm-corp-badge.is-2fa i { color: #d97706; }
html:not(.dark) .qm-corp-bottom { border-top-color: rgba(15, 23, 42, 0.1); }
html:not(.dark) .qm-corp-inner > .grid > :nth-child(2) { --qm-hc: #0891b2; }
html:not(.dark) .qm-corp-inner > .grid > :nth-child(3) { --qm-hc: #e11d48; }
html:not(.dark) .qm-corp-inner > .grid > :nth-child(4) { --qm-hc: #10b981; }

/* Renkli (10.10): zemin kurumsal mavi kalir; simgeler, rozetler ve baslik cizgileri renkli. */
.qm-corp-icon.is-instagram { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); border-color: transparent; }
.qm-corp-icon.is-facebook { background: #1877f2; border-color: transparent; }
.qm-corp-icon.is-linkedin, a.qm-corp-icon.is-linkedin:hover { background: #0a66c2; border-color: transparent; }
.qm-corp-icon.is-x, a.qm-corp-icon.is-x:hover { background: #000; border-color: rgba(255, 255, 255, 0.28); }
.qm-corp-icon.is-linkedin, .qm-corp-icon.is-x { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55); transition: transform 0.15s ease, filter 0.15s ease; }
a.qm-corp-icon.is-linkedin:hover, a.qm-corp-icon.is-x:hover { transform: translateY(-2px); filter: brightness(1.08); }
.qm-corp-icon.is-phone { background: #10b981; border-color: transparent; }
.qm-corp-icon.is-mail { background: #f59e0b; border-color: transparent; }
.qm-corp-icon.is-wa { background: #25d366; border-color: transparent; }
.qm-corp-icon.is-instagram, .qm-corp-icon.is-facebook, .qm-corp-icon.is-phone, .qm-corp-icon.is-mail, .qm-corp-icon.is-wa { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55); transition: transform 0.15s ease, filter 0.15s ease; }
a.qm-corp-icon.is-instagram:hover, a.qm-corp-icon.is-facebook:hover, .qm-corp-contact:hover .qm-corp-icon.is-phone, .qm-corp-contact:hover .qm-corp-icon.is-mail, .qm-corp-contact:hover .qm-corp-icon.is-wa { transform: translateY(-2px); filter: brightness(1.08); }
a.qm-corp-icon.is-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
a.qm-corp-icon.is-facebook:hover { background: #1877f2; }
.qm-corp-contact:hover .qm-corp-icon.is-phone { background: #10b981; }
.qm-corp-contact:hover .qm-corp-icon.is-mail { background: #f59e0b; }
.qm-corp-contact:hover .qm-corp-icon.is-wa { background: #25d366; }
.qm-corp-badge.is-ssl { background: rgba(16, 185, 129, 0.2); border-color: rgba(52, 211, 153, 0.55); }
.qm-corp-badge.is-ssl i { color: #6ee7b7; }
.qm-corp-badge.is-2fa { background: rgba(245, 158, 11, 0.2); border-color: rgba(251, 191, 36, 0.55); }
.qm-corp-badge.is-2fa i { color: #fcd34d; }
/* Sutun basliklarinin altinda renkli cizgi: Platform camgobegi, Sirket kirmizi, Iletisim yesil. */
.qm-corp-heading::after { content: ''; display: block; width: 1.75rem; height: 3px; margin-top: 0.55rem; border-radius: 9999px; background: var(--qm-hc, #e11d48); }
.qm-corp-inner > .grid > :nth-child(2) { --qm-hc: #22d3ee; }
.qm-corp-inner > .grid > :nth-child(3) { --qm-hc: #fb7185; }
.qm-corp-inner > .grid > :nth-child(4) { --qm-hc: #34d399; }

/* ---- Baski maliyeti hesaplayici (home-savings.blade.php): satir ici stilden tasindi (11.10, HTML agirligi) ---- */
.qm-sav-card { display: grid; gap: 2.5rem; padding: 2rem; border-radius: 2rem; border: 1px solid var(--qm-border-color); background: var(--qm-surface-bg); box-shadow: 0 30px 70px -45px rgba(15, 23, 42, 0.5); }
@media (min-width: 1024px) { .qm-sav-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; padding: 3.5rem; align-items: center; } }
.qm-sav-inputs { margin-top: 2.25rem; display: grid; gap: 1.6rem; }
.qm-sav-field { display: grid; gap: 0.6rem; }
.qm-sav-label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--qm-text-main); }
.qm-sav-label b { color: var(--qm-accent); font-weight: 800; }
.qm-sav-range { width: 100%; accent-color: var(--qm-accent); height: 1.4rem; cursor: pointer; }
.qm-sav-result { position: relative; overflow: hidden; padding: 2.25rem; border-radius: 1.5rem; color: #e0e7ff; background: linear-gradient(160deg, #0b1437 0%, #19206b 60%, #312e81 100%); }
.qm-sav-result::after { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 9999px; background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%); pointer-events: none; }
.qm-sav-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a5b4fc; }
.qm-sav-big { margin-top: 0.5rem; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.1; }
.qm-sav-sub { margin-top: 0.4rem; font-size: 0.85rem; color: #a5b4fc; }
.qm-sav-calc { position: relative; z-index: 1; margin-top: 1rem; display: flex; align-items: stretch; gap: 0.4rem; }
.qm-sav-calc-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.75rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); }
.qm-sav-calc-item b { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.2; }
.qm-sav-calc-item > span { font-size: 0.78rem; font-weight: 600; color: #c7d2fe; }
.qm-sav-calc-item small { font-size: 0.68rem; line-height: 1.3; color: #818cf8; }
.qm-sav-calc-op { align-self: center; font-style: normal; font-weight: 700; color: #818cf8; }
@media (max-width: 639px) {
    .qm-sav-card { padding: 1.25rem; }
    .qm-sav-result { padding: 1.5rem 1.1rem; }
    .qm-sav-calc { gap: 0.25rem; }
    .qm-sav-calc-item { padding: 0.55rem 0.5rem; }
    .qm-sav-calc-item b { font-size: 1.05rem; }
}
.qm-sav-compare { margin-top: 1.5rem; display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.qm-sav-compare > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.qm-sav-compare b { color: #fff; }
.qm-sav-win b { color: #34d399; font-size: 1.1rem; }
.qm-sav-info { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 0.35rem; padding: 0.7rem 0.85rem; border-radius: 0.85rem; font-size: 0.82rem; line-height: 1.5; color: #e0e7ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.qm-sav-info i { margin-top: 0.2rem; color: #34d399; }
.qm-sav-foot { margin-top: 1.25rem; font-size: 0.72rem; line-height: 1.5; color: #818cf8; }
.qm-sav-cta { position: relative; z-index: 1; margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border-radius: 9999px; font-weight: 800; color: #1e1b4b; background: #fff; transition: transform 0.2s ease; }
.qm-sav-cta:hover { transform: translateY(-2px); }

/* ---- Ana sayfa CTA (home.blade.php): satir ici stilden tasindi (11.10, HTML agirligi) ---- */
/* Zarif surum (10.10) — asagidaki eski kurallarin uzerine yazar. */
    .menurobo-shell > .qm-cta { padding: 3.5rem 1.5rem; }
    @media (min-width: 768px) { .menurobo-shell > .qm-cta { padding: 4.5rem 4rem; } }
    .qm-cta .qm-cta-grid { opacity: 0.18; }
    .qm-cta .qm-cta-orb.is-blue { opacity: 0.55; animation: none; }
    .qm-cta .qm-cta-line { opacity: 0.55; }
    .qm-cta .qm-cta-badge { padding: 0; gap: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.32em; color: rgba(191, 210, 236, 0.85); background: none; border: 0; }
    .qm-cta .qm-cta-badge::before, .qm-cta .qm-cta-badge::after { content: ''; display: inline-block; width: 1.75rem; height: 1px; margin: 0 0.85rem; vertical-align: middle; background: rgba(191, 210, 236, 0.45); }
    .qm-cta .qm-cta-title { margin-top: 1.1rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; font-size: 2.1rem; }
    @media (min-width: 768px) { .qm-cta .qm-cta-title { font-size: 3.1rem; } }
    .qm-cta .qm-cta-accent { display: inline; animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fb7185; }
    .qm-cta .qm-cta-sub { margin-top: 1.1rem; font-size: 1.02rem; color: rgba(226, 232, 240, 0.72); }
    @media (min-width: 1024px) { .qm-cta .qm-cta-sub { max-width: none; } }
    .qm-cta .qm-cta-actions { margin-top: 2rem; gap: 0.75rem; }
    .qm-cta .qm-cta-btn { padding: 0.85rem 1.6rem; font-size: 0.95rem; font-weight: 700; }
    .qm-cta .qm-cta-btn.is-primary { background: #e11d48; box-shadow: 0 10px 24px -14px rgba(225, 29, 72, 0.9); }
    .qm-cta .qm-cta-btn.is-primary::after { display: none; }
    .qm-cta .qm-cta-btn.is-primary:hover { background: #c8143d; box-shadow: 0 14px 28px -14px rgba(225, 29, 72, 0.95); }
    .qm-cta .qm-cta-btn.is-ghost { border-width: 1px; border-color: rgba(255, 255, 255, 0.28); }
    .qm-cta .qm-cta-trust { margin-top: 2rem; gap: 0.5rem 0; font-size: 0.82rem; color: rgba(226, 232, 240, 0.65); }
    .qm-cta .qm-cta-trust span { padding: 0 1.1rem; border: 0; border-radius: 0; background: none; }
    .qm-cta .qm-cta-trust span + span { border-left: 1px solid rgba(255, 255, 255, 0.18); }
    .qm-cta .qm-cta-trust i { color: rgba(191, 210, 236, 0.85); }
    @media (max-width: 639px) { .qm-cta .qm-cta-trust { flex-direction: column; gap: 0.45rem; } .qm-cta .qm-cta-trust span + span { border-left: 0; } }

    /* ACIK SURUM (11.10): acik temada beyaz -> acik mavi zemin, koyu yazi; koyu temada (html.dark) lacivert hal aynen kalir.
       Geri almak icin bu blogu silmek yeterli. */
    html:not(.dark) .qm-cta { color: #0f172a;
        background: radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f3f7fd 45%, #e6eef9 100%);
        border-color: rgba(43, 98, 172, 0.16);
        box-shadow: 0 40px 80px -45px rgba(15, 23, 42, 0.35), inset 0 1px 0 #fff; }
    html:not(.dark) .qm-cta .qm-cta-grid { opacity: 0.6;
        background-image: linear-gradient(rgba(43, 98, 172, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 98, 172, 0.08) 1px, transparent 1px); }
    html:not(.dark) .qm-cta .qm-cta-orb.is-blue { opacity: 0.35; background: rgba(91, 143, 214, 0.45); }
    html:not(.dark) .qm-cta .qm-cta-badge { color: #2b62ac; }
    html:not(.dark) .qm-cta .qm-cta-badge::before, html:not(.dark) .qm-cta .qm-cta-badge::after { background: rgba(43, 98, 172, 0.35); }
    html:not(.dark) .qm-cta .qm-cta-accent { color: #e11d48; }
    html:not(.dark) .qm-cta .qm-cta-sub { color: #475569; }
    html:not(.dark) .qm-cta .qm-cta-btn.is-ghost { color: #0f172a; background: #fff; border-color: rgba(15, 23, 42, 0.16); box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.4); }
    html:not(.dark) .qm-cta .qm-cta-btn.is-ghost:hover { background: #f8fafc; border-color: rgba(43, 98, 172, 0.45); color: #2b62ac; }
    html:not(.dark) .qm-cta .qm-cta-trust { color: #475569; }
    html:not(.dark) .qm-cta .qm-cta-trust i { color: #2b62ac; }
    html:not(.dark) .qm-cta .qm-cta-trust span + span { border-left-color: rgba(15, 23, 42, 0.14); }

    /* FOOTER'A BIRLESIK INCE SURUM (11.10): footer'la ayni genislikte (kenardan kenara) ince serit; footer'in kirmizi ust
       cizgisinin tam ustune oturur (footer mt-32 = 8rem bosluk -8rem ile kapanir). Icerik footer icerigiyle ayni hizada (max-w-7xl).
       Masaustunde yatay: solda metin, sagda dugmeler. */
    .menurobo-shell.qm-cta-joined { position: relative; z-index: 2; max-width: none; margin-top: 6rem; margin-bottom: -8rem; padding: 0; }
    .menurobo-shell.qm-cta-joined > .qm-cta { padding: 2.25rem 1.5rem; border-radius: 0; border: 0; box-shadow: none; }
    .qm-cta-joined .qm-cta-body { max-width: 77rem; margin: 0 auto; } /* footer: max-w-7xl (80rem) - 2 x 1.5rem ic bosluk */
    .qm-cta-joined .qm-cta-line { display: none; }
    html:not(.dark) .qm-cta-joined .qm-cta { border-top: 1px solid rgba(43, 98, 172, 0.12); box-shadow: none; }
    .qm-cta-joined .qm-cta .qm-cta-title { margin-top: 0.6rem; font-size: 1.6rem; }
    .qm-cta-joined .qm-cta .qm-cta-sub { margin-top: 0.6rem; font-size: 0.95rem; }
    .qm-cta-joined .qm-cta .qm-cta-actions { margin-top: 1.4rem; }
    .qm-cta-joined .qm-cta .qm-cta-btn { padding: 0.75rem 1.4rem; font-size: 0.9rem; }
    .qm-cta-joined .qm-cta .qm-cta-trust { margin-top: 1.2rem; font-size: 0.78rem; }
    @media (min-width: 1024px) {
        .menurobo-shell.qm-cta-joined > .qm-cta { padding: 2.25rem 1.5rem; text-align: left; }
        .qm-cta-joined .qm-cta-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: center; }
        .qm-cta-joined .qm-cta-body > * { grid-column: 1; }
        .qm-cta-joined .qm-cta .qm-cta-actions { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; flex-wrap: nowrap; }
        .qm-cta-joined .qm-cta .qm-cta-badge::before, .qm-cta-joined .qm-cta .qm-cta-badge::after { display: none; }
        .qm-cta-joined .qm-cta .qm-cta-title { margin-left: 0; margin-right: 0; max-width: none; font-size: 2rem; }
        .qm-cta-joined .qm-cta .qm-cta-sub { margin-left: 0; margin-right: 0; }
        .qm-cta-joined .qm-cta .qm-cta-trust { justify-content: flex-start; }
        .qm-cta-joined .qm-cta .qm-cta-trust span:first-child { padding-left: 0; }
    }

/* ---- Ana sayfa CTA (home.blade.php): satir ici stilden tasindi (11.10, HTML agirligi) ---- */
.qm-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 2rem; padding: 4rem 1.5rem; text-align: center; color: #fff;
        background: radial-gradient(120% 140% at 50% 0%, #1f4a85 0%, #122c52 40%, #0a1528 80%);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: 0 40px 90px -30px rgba(11, 17, 32, 0.75), 0 0 0 1px rgba(43, 98, 172, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    @media (min-width: 768px) { .qm-cta { padding: 5.5rem 4rem; } }
    .qm-cta-grid { position: absolute; inset: 0; z-index: -1; opacity: 0.35;
        background-image: linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%); }
    .qm-cta-orb { position: absolute; z-index: -1; border-radius: 9999px; filter: blur(70px); animation: qm-cta-breathe 9s ease-in-out infinite; }
    .qm-cta-orb.is-blue { width: 24rem; height: 24rem; left: -8rem; top: -10rem; background: rgba(43, 98, 172, 0.6); animation-delay: -4.5s; }
    .qm-cta-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 0;
        background: linear-gradient(90deg, transparent, #2b62ac 25%, #5b8fd6 50%, #e11d48 78%, transparent); opacity: 0.9; }
    .qm-cta-chip { position: absolute; z-index: 0; display: none; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 1rem; font-size: 1.25rem; color: #c7dbf5;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        transform: rotate(var(--qm-rot)); animation: qm-cta-float 6s ease-in-out infinite; }
    @media (min-width: 1024px) { .qm-cta-chip { display: flex; } }
    .qm-cta-body { position: relative; z-index: 1; }
    .qm-cta-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
        color: #dbe7f7; background: rgba(43, 98, 172, 0.28); border: 1px solid rgba(91, 143, 214, 0.45); }
    .qm-cta-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #fb7185; box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.7); animation: qm-cta-ping 2s ease-out infinite; }
    .qm-cta-title { margin: 1.5rem auto 0; max-width: 48rem; font-size: 2.25rem; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
    @media (min-width: 768px) { .qm-cta-title { font-size: 3.75rem; } }
    .qm-cta-accent { display: inline-block; background: linear-gradient(90deg, #fb7185 0%, #e11d48 45%, #f43f5e 70%, #fda4af 100%); background-size: 200% auto;
        -webkit-background-clip: text; background-clip: text; color: transparent; animation: qm-cta-sheen 6s linear infinite; }
    .qm-cta-sub { margin: 1.5rem auto 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.7; color: rgba(226, 232, 240, 0.85); }
    .qm-cta-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
    .qm-cta-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; border-radius: 9999px; font-size: 1.05rem; font-weight: 800; color: #fff; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
    .qm-cta-btn.is-primary { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #be123c 100%); box-shadow: 0 16px 40px -12px rgba(225, 29, 72, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    .qm-cta-btn.is-primary::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: qm-cta-shine 3.8s ease-in-out infinite; }
    .qm-cta-btn.is-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(225, 29, 72, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    .qm-cta-btn.is-ghost { background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.35); }
    .qm-cta-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
    .qm-cta-trust { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; font-size: 0.875rem; color: rgba(226, 232, 240, 0.85); }
    .qm-cta-trust span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
    .qm-cta-trust i { color: #93bbec; }
    @keyframes qm-cta-float { 0%, 100% { transform: translateY(0) rotate(var(--qm-rot)); } 50% { transform: translateY(-10px) rotate(var(--qm-rot)); } }
    @keyframes qm-cta-breathe { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
    @keyframes qm-cta-sheen { to { background-position: 200% center; } }
    @keyframes qm-cta-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
    @keyframes qm-cta-ping { 0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(251, 113, 133, 0); } }
    @media (prefers-reduced-motion: reduce) { .qm-cta *, .qm-cta *::after { animation: none !important; } }