.pi {
    --pi-bg: #111f32; --pi-border: #aec9ea18; --pi-ink: #edf5ff;
    --pi-muted: #91a8c1; --pi-mint: #35dfbd; --pi-soft: #35dfbd0b;
    color: var(--pi-ink); font-family: Inter, 'Segoe UI', sans-serif; max-width: 1800px; margin: auto;
}
.pi *, .pi *::before, .pi *::after { box-sizing: border-box; }
.pi button, .pi select { font: inherit; color: var(--pi-ink); border: 1px solid var(--pi-border); background: var(--pi-bg); border-radius: 9px; padding: 9px 13px; cursor: pointer; }
.pi button { transition: background .18s, border-color .18s, color .18s; }
.pi button:hover { border-color: var(--pi-mint); }
.pi button:focus-visible, .pi select:focus-visible, .pi summary:focus-visible { outline: 2px solid var(--pi-mint); outline-offset: 4px; }
.pi button:disabled { opacity: .4; cursor: default; }
.pi button[aria-pressed=true] { border-color: var(--pi-mint); background: var(--pi-soft); }
.pi-hero { display: flex; justify-content: space-between; align-items: center; padding: 22px 2px; background: radial-gradient(ellipse at 90% 0, #35dfbd0b, transparent 55%); }
.pi-eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 1.8px; color: var(--pi-muted); }
.pi-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pi-mint); box-shadow: 0 0 12px #35dfbd; margin-right: 7px; }
.pi h2 { font-size: clamp(29px, 2.7vw, 40px); letter-spacing: -1.8px; margin: 10px 0 7px; font-weight: 650; line-height: 1.15; }
.pi h2 > span { color: var(--pi-mint); }
.pi-hero p { font-size: 12px; color: var(--pi-muted); margin: 0; }
.pi-live-mark { display: flex; align-items: center; gap: 11px; font-size: 9px; letter-spacing: 1.7px; color: var(--pi-mint); }
.pi-live-mark > span { display: inline-block; font-size: 35px; line-height: 1; }
.pi-toolbar, .pi-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pi-toolbar { margin-bottom: 15px; font-size: 12px; }
.pi-nav { display: flex; align-items: center; gap: 15px; margin-right: auto; }
.pi-nav strong { min-width: 240px; text-align: center; font-size: 13px; }
.pi-nav button { font-size: 20px; padding: 4px 13px; }
.pi-segment { display: flex; border: 1px solid var(--pi-border); border-radius: 10px; padding: 3px; background: var(--pi-bg); }
.pi .pi-segment button { border: 0; background: transparent; font-size: 11px; padding: 8px 14px; }
.pi .pi-segment button[aria-pressed=true] { color: #062d29; background: var(--pi-mint); font-weight: 700; }
.pi [data-replay] { color: var(--pi-mint); }
.pi-filters { padding: 13px 0; border-top: 1px solid var(--pi-border); border-bottom: 1px solid var(--pi-border); }
.pi-filters label { display: flex; gap: 9px; align-items: center; color: var(--pi-muted); font-size: 11px; }
.pi-filters select { font-size: 11px; max-width: 225px; }
.pi-filters .pi-segment { margin-left: auto; }
.pi-filters [data-reset] { font-size: 11px; }
.pi-selection { min-height: 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; }
.pi-selection > span { font-size: 9px; color: var(--pi-muted); letter-spacing: 1px; }
.pi-selection > .pi-selection-hint { font-size: 11px; letter-spacing: 0; color: var(--pi-mint); }
.pi-selection button { font-size: 10px; color: var(--pi-mint); background: var(--pi-soft); padding: 5px 9px; max-width: 100%; overflow-wrap: anywhere; }
.pi-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 18px; }
.pi-kpis article { padding: 16px 20px; border: 1px solid var(--pi-border); border-radius: 14px; background: var(--pi-bg); }
.pi-kpis article:first-child { background: linear-gradient(115deg,#35dfbd12,var(--pi-bg)); border-color: #35dfbd30; }
.pi-kpis article > span { display: block; font-size: 9px; letter-spacing: 1.4px; color: var(--pi-muted); }
.pi-kpis strong { display: block; margin: 9px 0 5px; font-size: clamp(24px,2.3vw,34px); font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pi-kpis strong small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--pi-muted); }
.pi-kpis article > small { font-size: 10px; color: var(--pi-muted); }
.pi .pi-accent { color: var(--pi-mint); }
.pi-chart-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 18px; }
.pi-card { background: var(--pi-bg); border: 1px solid var(--pi-border); border-radius: 18px; padding: 22px; min-width: 0; }
.pi-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pi h3 { font-size: 18px; font-weight: 600; letter-spacing: -.5px; margin: 6px 0 7px; }
.pi-pill { display: inline-block; border: 1px solid var(--pi-border); border-radius: 30px; padding: 5px 9px; color: var(--pi-muted); font-size: 10px; white-space: nowrap; }
.pi-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 15px 0 6px; font-size: 10px; color: var(--pi-muted); }
.pi-legend .pi-muted { margin-left: auto; font-size: 10px; }
.pi-key { display: inline-flex; gap: 6px; align-items: center; }
.pi-key-mint::before, .pi-key-purple::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: #35dfbd; }
.pi-key-purple::before { background: #aa94ff; }
.pi-key-dashed { color: #9badd4; }
.pi-key-dashed input { accent-color: #8c9ed0; }
.pi-canvas-wrap { position: relative; height: 310px; min-width: 0; }
.pi-canvas-tall { height: 320px; }
.pi-canvas-ring { height: 255px; max-width: 360px; margin: 0 auto; }
.pi-canvas-bars { height: 285px; }
.pi-canvas-small { height: 265px; }
.pi-canvas-wrap canvas { display: block; max-width: 100%; }
.pi-chart-empty { position: absolute; inset: 0; display: grid; place-content: center; font-size: 13px; color: var(--pi-muted); pointer-events: none; }
.pi-chart-empty[hidden] { display: none; }
.pi-footnote { color: var(--pi-muted); font-size: 10px; line-height: 1.6; margin: 10px 0; }
.pi-time-choices { display: flex; justify-content: space-between; gap: 7px; overflow-x: auto; padding: 5px 0; }
.pi .pi-time-choices button { flex: 1 0 45px; display: grid; gap: 5px; text-align: center; padding: 8px 6px; background: transparent; border-color: transparent; }
.pi .pi-time-choices button:hover, .pi .pi-time-choices button[aria-pressed=true] { border-color: #35dfbd60; background: var(--pi-soft); }
.pi-time-choices span { font-size: 10px; color: var(--pi-muted); }
.pi-time-choices strong { font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; }
.pi-product-legend { display: grid; gap: 3px; }
.pi-product-legend button, .pi-value-list button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 6px; font-size: 10px; text-align: left; border-color: transparent; background: transparent; }
.pi-product-legend button > i, .pi-value-list button > i { width: 7px; height: 7px; border-radius: 2px; background: var(--swatch); flex-shrink: 0; }
.pi-product-legend button > span, .pi-value-list button > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pi-product-legend button > strong, .pi-value-list button > strong { margin-left: auto; font-weight: 550; white-space: nowrap; }
.pi-product-legend button > small, .pi-value-list button > small { color: var(--pi-muted); min-width: 30px; text-align: right; }
.pi .pi-detail { margin-top: 12px; border-top: 1px solid var(--pi-border); padding-top: 12px; }
.pi .pi-detail summary { font-size: 11px; color: var(--pi-muted); cursor: pointer; }
.pi-value-list { padding-top: 8px; max-height: 260px; overflow: auto; }
.pi-insight-strip { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 22px; border: 1px solid #35dfbd20; background: linear-gradient(100deg,#35dfbd08,#35dfbd02); border-radius: 15px; margin: 18px 0; padding: 20px 24px; }
.pi-insight-strip > div { min-width: 0; }
.pi-insight-strip > div + div { border-left: 1px solid var(--pi-border); padding-left: 22px; }
.pi-insight-strip span { display: block; font-size: 9px; letter-spacing: 1.4px; color: var(--pi-mint); }
.pi-insight-strip strong { display: block; font-size: 16px; margin: 9px 0 5px; overflow-wrap: anywhere; }
.pi-insight-strip small, .pi-insight-strip p { color: var(--pi-muted); font-size: 10px; line-height: 1.7; margin: 8px 0 0; }
.pi-operations { margin-bottom: 18px; }
.pi-operations > summary, .pi-records > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.pi-operations > summary { padding: 20px 22px; border: 1px solid var(--pi-border); border-radius: 14px; background: var(--pi-bg); }
.pi-operations > summary::-webkit-details-marker, .pi-records > summary::-webkit-details-marker { display: none; }
.pi-operations summary strong, .pi-records summary strong { display: block; font-size: 14px; margin-top: 6px; font-weight: 500; }
.pi-expand-icon { color: var(--pi-mint); font-size: 23px; transition: transform .2s; }
.pi-operations[open] .pi-expand-icon { transform: rotate(45deg); }
.pi-operation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.pi-operation-grid h3 { font-size: 15px; }
.pi-operation-values { max-height: 180px; }
.pi-tablewrap { overflow: auto; margin-top: 18px; }
.pi table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 12px; }
.pi th, .pi td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--pi-border); }
.pi th { font-size: 10px; color: var(--pi-muted); font-weight: 500; }
.pi td:last-child { text-align: right; color: var(--pi-mint); font-variant-numeric: tabular-nums; }
.pi-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 11px; margin-top: 18px; }
.pi-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 20px; color: var(--pi-muted); font-size: 9px; }
.pi-muted { color: var(--pi-muted); font-size: 11px; }
.light-theme .pi { --pi-bg: #fff; --pi-ink: #183347; --pi-muted: #536d82; --pi-border: #dce6ef; --pi-mint: #087d6c; --pi-soft: #087d6c0a; }
@media(min-width:1600px) { .pi-canvas-tall { height: 350px; } .pi-canvas-ring { height: 285px; } }
@media(max-width:1100px) { .pi-chart-grid { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); } .pi-card { padding: 18px; } .pi-live-mark { display: none; } .pi-kpis article { padding: 15px; } .pi-filters .pi-segment { margin-left: 0; } .pi-legend .pi-muted { width: 100%; margin-left: 0; } .pi-operation-grid { grid-template-columns: 1fr; } }
@media(max-width:760px) { .pi-chart-grid { grid-template-columns: minmax(0,1fr); } .pi-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .pi-product { order: 2; } .pi-batches { order: 3; } .pi-trend { order: 0; } .pi-customers { order: 1; } .pi-nav { width: 100%; justify-content: space-between; gap: 5px; } .pi-nav strong { min-width: 0; } .pi-filters label { width: 100%; justify-content: space-between; } .pi-filters select { max-width: 70%; } .pi-insight-strip { grid-template-columns: 1fr; gap: 15px; } .pi-insight-strip > div + div { border-left: 0; border-top: 1px solid var(--pi-border); padding: 15px 0 0; } .pi-canvas-tall { height: 270px; } .pi-canvas-ring { height: 270px; } .pi-footer { flex-direction: column; } }
@media(max-width:420px) { .pi h3 { font-size: 16px; } .pi-card { padding: 14px; } .pi-kpis article { padding: 13px; } .pi-kpis strong { font-size: 24px; } .pi-hero p { font-size: 11px; } .pi-cardhead { gap: 7px; } .pi-eyebrow { letter-spacing: 1.1px; } .pi-records summary strong { font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { .pi * { animation: none !important; transition: none !important; } }
.pi-key-previous::before { content: ''; width: 10px; height: 10px; background: #8c9ed025; border: 1px solid #8c9ed090; border-radius: 2px; }
.pi [hidden] { display: none !important; }
.pi-selection > .pi-no-records { color: #e6b877; letter-spacing: 0; font-size: 11px; }

/* 11 Eki 2026 — mobil: kayıt tablosu kart düzeni (style.css genel table kuralını aşar) */
@media(max-width:700px) { .pi-tablewrap table { min-width: 0 !important; width: 100% !important; } .pi-tablewrap thead { display: none; } .pi-tablewrap table, .pi-tablewrap tbody, .pi-tablewrap tr, .pi-tablewrap td { display: block; } .pi-tablewrap tr { padding: 8px 0; border-bottom: 1px solid var(--pi-border); } .pi-tablewrap td { min-width: 0 !important; white-space: normal !important; padding: 2px 0 !important; border: 0 !important; position: static !important; background: transparent !important; font-size: 12px; } .pi-tablewrap td::before { content: attr(data-l) ' · '; color: var(--pi-muted); font-size: 11px; } .pi-tablewrap td:not([data-l])::before { content: none; } .pi-filters select { max-width: 100%; flex: 1; } .pi-pagination { flex-wrap: wrap; gap: 8px; } }