/* Product demo — isolated from marketing page styles. */
.demo-app { color:#243956; container-type:inline-size; background:#fff; }
.demo-app button, .demo-app select, .demo-app input { font-family:var(--font); }
.demo-app button { border:1px solid #dce5f2; background:#fff; border-radius:6px; padding:8px 11px; font-size:11px; line-height:1.4; color:#476184; }
.demo-app button:hover { background:#f0f5ff; border-color:#bed0ef; }
.demo-app button:disabled { cursor:default; opacity:.45; }
.demo-app [hidden] { display:none!important; }
.demo-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid #e0e8f4; background:#f5f8fd; }
.demo-topbar > div { display:flex; align-items:center; gap:7px; }
.demo-topbar strong { font-size:9px; letter-spacing:1px; color:#516c93; }
.demo-dot { width:6px; height:6px; border-radius:50%; background:#4e7cdf; }
.demo-data-label { font-size:9px; color:#8394aa; border-left:1px solid #d4dfed; padding-left:8px; }
.demo-topbar button { font-size:10px; white-space:nowrap; }
.demo-context { display:flex; align-items:center; gap:13px; padding:12px 17px; border-bottom:1px solid #e7edf6; }
.demo-context label, .demo-filters label, .demo-report-picker { display:flex; flex-direction:column; gap:4px; color:#7588a2; font-size:9px; }
.demo-app select, .demo-app input { border:1px solid #dfe7f2; border-radius:5px; padding:8px 9px; background:#fff; color:#355075; font-size:11px; min-width:0; max-width:100%; height:34px; }
.demo-context label:first-child { min-width:170px; }
.dia-demo-label { margin-left:auto; font-size:9px; color:#6782ac; }
.demo-layout { display:flex; }
.demo-sidebar { width:207px; flex-shrink:0; background:#f8faff; border-right:1px solid #e4eaf3; padding:18px 10px; overflow:auto; }
.demo-sidebar details { margin-bottom:11px; }
.demo-sidebar summary { font-size:10px; font-weight:600; color:#6c7e96; padding:6px; cursor:pointer; }
.demo-sidebar button { display:block; border:0; background:none; text-align:left; width:100%; margin-top:3px; padding:8px 9px; font-size:11px; }
.demo-sidebar button.selected { background:#e7efff; color:#2c5fc9; font-weight:600; }
.demo-workspace { flex:1; min-width:0; padding:17px; }
.demo-guide { background:#eff5ff; border:1px solid #e0eafd; color:#6380ae; border-radius:6px; padding:9px 11px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10px; margin-bottom:15px; }
.demo-guide b { font-weight:600; color:#3e68af; }
.demo-guide button { border:0; background:none; padding:0 3px; font-size:17px; color:#7892bc; }
.demo-report-picker { margin-bottom:15px; }
.demo-report-picker select { width:100%; font-weight:500; }
.demo-report-header h2 { font:600 22px/1.35 var(--heading); color:#283e60; letter-spacing:-.6px; margin:4px 0 6px; }
#demo-breadcrumb { font-size:9px; color:#8596af; }
#demo-subtitle { font-size:11px; color:#7a8da8; line-height:1.7; }
.demo-filters { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; padding:15px 0 12px; }
.demo-filters label { flex:1; min-width:120px; }
.demo-filters input { width:100%; }
.demo-app .demo-primary, .demo-primary { background:#3268e6; border:1px solid #3268e6; color:white; border-radius:6px; padding:8px 13px; font-size:11px; min-height:34px; cursor:pointer; }
.demo-app .demo-primary:hover { background:#2457cb; }
#demo-filter-error { width:100%; color:#bd4b4b; font-size:10px; margin:0; }
#demo-filter-error:empty { display:none; }
.demo-toolbar { display:flex; gap:7px; align-items:center; flex-wrap:wrap; border-top:1px solid #e7edf6; padding:11px 0; }
.demo-toolbar button { font-size:10px; }
#demo-refresh-status { font-size:9px; color:#8193ab; margin-left:auto; }
#demo-progress { display:block; width:100%; height:4px; border:0; accent-color:#3268e6; margin-bottom:12px; }
.demo-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:8px 0 15px; }
.demo-kpi { min-width:0; padding:14px 11px; border:1px solid #e1e9f6; background:#f9fbff; border-radius:8px; }
.demo-kpi > span { display:block; font-size:10px; color:#7387a4; }
.demo-kpi strong { display:block; font:600 clamp(16px,3.2cqw,27px)/1.4 var(--heading); letter-spacing:-.7px; color:#2b4267; margin:7px 0 5px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.demo-kpi small { display:block; font-size:8px; line-height:1.5; color:#99a7ba; }
.demo-chart-panel { border:1px solid #e1e8f4; padding:15px; border-radius:8px; }
.demo-section-heading { display:flex; gap:15px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.demo-section-heading h3 { font:600 11px/1.5 var(--font); color:#4b6387; }
.demo-section-heading > span { font-size:9px; color:#8a9bb3; white-space:nowrap; }
.demo-chart { display:grid; gap:12px; margin:18px 0; }
.demo-chart-row { display:grid; grid-template-columns:125px minmax(0,1fr) 87px; gap:10px; align-items:center; }
.demo-chart-row > span { font-size:10px; color:#647d9f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-bar-track { height:9px; border-radius:3px; background:#f0f4fa; overflow:hidden; }
.demo-bar-track i { display:block; height:100%; background:#5c88e8; border-radius:3px; }
.demo-chart-row b { font-size:10px; font-weight:500; color:#607b9f; text-align:right; font-variant-numeric:tabular-nums; }
#demo-insight { font-size:10px; line-height:1.7; padding:10px; border-radius:4px; color:#7188ab; background:#f5f8ff; }
.demo-empty-chart { font-size:12px; color:#91a0b5; }
.demo-table-panel { margin-top:19px; }
.demo-search-row { display:flex; gap:9px; margin-bottom:12px; }
.demo-search-row input { flex:1; width:100%; }
.demo-search-row select { width:140px; }
.demo-table-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
.demo-app table { min-width:660px; width:100%; font-variant-numeric:tabular-nums; }
.demo-app th, .demo-app td { font:400 10px/1.6 var(--font); padding:11px 10px; border-bottom:1px solid #e9eef6; color:#687f9f; text-align:right; }
.demo-app th { font-weight:500; color:#7790b1; background:#f4f7fd; }
.demo-app th:first-child, .demo-app td:first-child, .demo-app th:nth-child(3), .demo-app td:nth-child(3) { text-align:left; }
.demo-app td:first-child { color:#466896; }
.demo-app .demo-row-detail { font-size:10px; padding:5px 8px; color:#3967bc; border-color:#dce7fb; }
.demo-app .demo-empty-cell { padding:27px 10px; text-align:center; color:#8b9db7; }
.demo-pagination { display:flex; gap:12px; align-items:center; justify-content:space-between; padding-top:12px; }
.demo-pagination > span { font-size:10px; color:#8a9bb3; }
.demo-pagination > div { display:flex; gap:6px; }
.demo-pagination button { padding:5px 12px; }
.demo-footnote { font-size:9px; line-height:1.7; color:#95a5bb; margin-top:18px; border-top:1px solid #e8eef7; padding-top:12px; }
.demo-app:not(.demo-expanded) .demo-sidebar { display:none; }
.demo-open { overflow:hidden; }
.demo-app.demo-expanded { position:fixed; inset:14px; z-index:100; overflow:auto; border:1px solid #c9d8ed; box-shadow:0 0 0 100vmax #142c56a6; border-radius:14px; max-width:none; scroll-behavior:auto; }
.demo-expanded .demo-topbar { position:sticky; top:0; z-index:3; }
.demo-expanded .demo-workspace { padding:24px 30px; }
.demo-expanded .demo-sidebar { position:sticky; top:58px; height:calc(100dvh - 154px); }
.demo-expanded .demo-report-picker { display:none; }
.demo-expanded .demo-report-header h2 { font-size:27px; }
.demo-expanded .demo-kpi strong { font-size:30px; }
.demo-expanded .demo-chart-row { grid-template-columns:190px minmax(0,1fr) 110px; }
.demo-expanded .demo-chart-row > span, .demo-expanded .demo-chart-row b { font-size:12px; }
.demo-expanded table th, .demo-expanded table td { font-size:12px; }
/* Report discovery and platform content */
.catalog-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:35px; }
.catalog-heading .eyebrow { color:#477bd7; margin-bottom:16px; }
.catalog-heading > p { max-width:375px; color:#7185a2; line-height:1.9; font-size:14px; }
.report-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.catalog-card { padding:25px; border:1px solid #e1eaf7; border-radius:14px; background:#fff; }
.catalog-card:first-child { background:#edf3ff; }
.catalog-card h3 { font:600 16px/1.5 var(--heading); color:#2c4670; margin-bottom:15px; letter-spacing:-.3px; }
.catalog-card button { display:block; text-align:left; width:100%; border:0; border-top:1px solid #eaf0f9; padding:10px 0; background:none; color:#6b83a5; font-size:12px; cursor:pointer; }
.catalog-card button:hover { color:#3268e6; }
.platform-section { background:#f5f8fe; border-block:1px solid #e5edf9; }
.platform-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.platform-grid article { padding:22px 0; border-top:1px solid #dbe5f5; }
.platform-grid article > span { font-size:10px; color:#8ba2c6; }
.platform-grid h3 { font-size:18px; letter-spacing:-.4px; color:#36527c; margin:15px 0 12px; }
.platform-grid p { font-size:13px; line-height:1.9; color:#7589a5; }
.platform-demo-link { display:inline-flex; align-items:center; gap:25px; color:#3268e6; font-weight:500; font-size:13px; margin-top:25px; }
/* Native record and schedule dialogs */
#demo-detail, #demo-plan { width:570px; max-width:calc(100% - 28px); max-height:calc(100dvh - 32px); border:1px solid #d6e3f6; padding:32px; border-radius:15px; color:#314a70; background:#fff; box-shadow:0 20px 80px #132a4b44; }
#demo-detail::backdrop, #demo-plan::backdrop { background:#142c5680; backdrop-filter:blur(3px); }
.dialog-x { position:absolute; right:15px; top:11px; font-size:25px; background:none; border:0; padding:3px 7px; color:#7e95b6; cursor:pointer; }
.demo-dialog-eyebrow { font-size:9px; color:#8da3c4; letter-spacing:1.2px; margin-bottom:13px; }
#demo-detail h2, #demo-plan h2 { font-size:24px; letter-spacing:-.6px; line-height:1.4; }
#detail-fields { display:grid; grid-template-columns:1fr 1.5fr; font-size:12px; margin:22px 0; }
#detail-fields dt, #detail-fields dd { margin:0; padding:10px 0; border-bottom:1px solid #e7edf6; }
#detail-fields dt { color:#859abb; }
#detail-fields dd { color:#4a668e; overflow-wrap:anywhere; }
.demo-dialog-note { color:#8b9db8; font-size:11px; line-height:1.8; margin:16px 0; }
#plan-form > label { display:flex; align-items:center; gap:15px; font-size:12px; margin:20px 0; }
#plan-time { border:1px solid #d7e2f3; border-radius:5px; padding:8px; color:#4a668e; }
#plan-form fieldset { border:1px solid #e2eaf7; border-radius:7px; margin:0 0 20px; padding:12px; }
#plan-form legend { font-size:11px; padding:0 5px; color:#7f95b6; }
#plan-reports { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#plan-reports label { display:flex; align-items:center; gap:7px; font-size:10px; color:#6c83a5; }
#plan-reports input { accent-color:#3268e6; }
#plan-status { font-size:11px; color:#40806d; line-height:1.7; margin-top:17px; }
#plan-error { font-size:11px; color:#ba5b5b; margin-bottom:10px; }
@container (max-width:600px) {
 .dia-demo-label { display:none; }
 .demo-kpis { gap:6px; }
 .demo-kpi { padding:12px 8px; }
 .demo-kpi > span { font-size:9px; }
 .demo-kpi strong { font-size:17px; }
 .demo-chart-row { grid-template-columns:100px minmax(0,1fr) 80px; gap:7px; }
 #demo-refresh-status { width:100%; margin-left:0; }
}
@media(max-width:1000px) {
 .report-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .demo-expanded .demo-sidebar { width:180px; }
 .demo-expanded .demo-workspace { padding:20px; }
}
@media(max-width:760px) {
 .demo-topbar { padding:10px; }
 .demo-topbar strong { font-size:8px; letter-spacing:.6px; }
 .demo-data-label { display:none; }
 .demo-context { padding:11px 12px; gap:10px; }
 .demo-context label:first-child { min-width:0; flex:1; }
 .demo-context label:nth-child(2) { width:75px; }
 .demo-workspace { padding:13px; }
 .demo-report-header h2 { font-size:21px; }
 .demo-guide { font-size:9px; padding:8px; }
 .demo-filters { gap:7px; }
 .demo-filters label { min-width:100px; }
 .demo-app.demo-expanded { inset:5px; border-radius:9px; }
 .demo-expanded .demo-sidebar { display:none; }
 .demo-expanded .demo-report-picker { display:flex; }
 .demo-expanded .demo-workspace { padding:14px; }
 .demo-expanded .demo-report-header h2 { font-size:22px; }
 .demo-expanded .demo-kpi strong { font-size:18px; }
 .demo-expanded .demo-chart-row { grid-template-columns:105px minmax(0,1fr) 85px; }
 .demo-expanded .demo-chart-row > span, .demo-expanded .demo-chart-row b { font-size:10px; }
 .catalog-heading { display:block; }
 .catalog-heading > p { margin-top:20px; font-size:13px; }
 .report-catalog { gap:12px; }
 .catalog-card { padding:20px; }
 .catalog-card h3 { font-size:15px; }
 .catalog-card button { font-size:11px; }
 .platform-grid { gap:20px; }
 .platform-grid h3 { font-size:17px; }
 #demo-detail, #demo-plan { padding:26px 20px; }
}
@media(max-width:520px) {
 .report-catalog, .platform-grid { grid-template-columns:1fr; }
 .demo-kpis { grid-template-columns:1fr; gap:6px; }
 .demo-kpi { display:grid; grid-template-columns:1fr auto; padding:11px; align-items:center; }
 .demo-kpi > span { font-size:11px; }
 .demo-kpi strong, .demo-expanded .demo-kpi strong { grid-column:2; grid-row:span 2; font-size:20px; margin:0; }
 .demo-kpi small { grid-column:1; font-size:8px; margin-top:3px; }
 .demo-chart-panel { padding:13px 11px; }
 .demo-chart-row { grid-template-columns:90px minmax(0,1fr) 74px; gap:6px; }
 .demo-chart-row > span, .demo-chart-row b { font-size:9px; }
 .demo-search-row { flex-wrap:wrap; }
 .demo-search-row input { flex-basis:100%; }
 .demo-search-row select { width:100%; }
 .demo-filters label { flex-basis:40%; }
 .demo-filters > button { flex:1; }
 #demo-report-title { font-size:20px; }
 #plan-reports { grid-template-columns:1fr; }
 #detail-fields { font-size:11px; grid-template-columns:1fr 1.5fr; }
}
/* Ön izlemede de görünür rapor menüsü. */
.demo-app:not(.demo-expanded) .demo-sidebar { display:block; width:170px; padding:16px 9px; }
.demo-nav-heading { font:600 12px/1.5 var(--font); color:#365680; margin:0 7px 16px; }
.demo-menu-bar { display:none; }
@media (max-width:760px) {
 .demo-menu-bar { display:flex; gap:12px; align-items:center; padding:10px 13px; border-bottom:1px solid #e2eaf6; background:#f8faff; }
 .demo-menu-bar button { color:#3268e6; font-weight:600; }
 .demo-menu-bar > span { font-size:10px; color:#8397b4; }
 .demo-layout { flex-wrap:wrap; }
 .demo-app:not(.demo-expanded) .demo-sidebar, .demo-expanded .demo-sidebar { display:none; }
 .demo-app.demo-nav-open .demo-sidebar { display:block; position:static; width:100%; flex-basis:100%; height:auto; max-height:320px; border-right:0; border-bottom:1px solid #dfe8f6; padding:14px; }
 .demo-workspace { flex-basis:100%; width:100%; }
}
/* Sayfa içindeki demo kısa bir pencere; detaylar içeride kaydırılır. */
.demo-app:not(.demo-expanded) .demo-layout { height:440px; overflow:hidden; }
.demo-app:not(.demo-expanded) .demo-workspace { height:100%; overflow-y:auto; overscroll-behavior-y:contain; }
.demo-app:not(.demo-expanded) .demo-sidebar { max-height:440px; overflow-y:auto; }
@media (max-width:760px) {
 .demo-app:not(.demo-expanded) .demo-layout { height:400px; display:block; overflow-y:auto; overscroll-behavior-y:contain; }
 .demo-app:not(.demo-expanded) .demo-workspace { height:auto; overflow:visible; }
 .demo-app:not(.demo-expanded).demo-nav-open .demo-sidebar { max-height:220px; }
}
.demo-app:not(.demo-expanded) .demo-layout { height:290px; }
.demo-app:not(.demo-expanded) .demo-sidebar { max-height:290px; }
.demo-app:not(.demo-expanded) .demo-guide { display:none; }
@media (max-width:760px) { .demo-app:not(.demo-expanded) .demo-layout { height:260px; } .demo-app:not(.demo-expanded).demo-nav-open .demo-sidebar { max-height:180px; } }