/* ==========================================================================
   OPERASYON KOKPİTİ (2026-11-05) -- kullanıcının verdiği "İşemriTakip
   Operasyon Kokpiti" görselinin birebir düzeni. Yalnız .okp altında çalışır;
   eski index.css (.dc-*, .dca-*) kuralları bu yapıya dokunmaz.
   ========================================================================== */
.dosab-cockpit.okp {
  --okp-blue: #2563eb; --okp-blue-soft: #e8f0ff;
  --okp-sky: #0ea5e9; --okp-sky-soft: #e3f4fd;
  --okp-orange: #f97316; --okp-orange-soft: #fff1e6;
  --okp-red: #ef4444; --okp-red-soft: #fdecec;
  --okp-violet: #8b5cf6; --okp-violet-soft: #f1ecff;
  --okp-indigo: #4f46e5; --okp-indigo-soft: #ecebff;
  --okp-green: #16a34a; --okp-green-soft: #e7f7ec;
  --okp-ink: #0f1d3a; --okp-muted: #64708a; --okp-line: #e4eaf4;
  --okp-card: #ffffff;
  --okp-radius: var(--v33-radius-lg, 16px);
  --okp-shadow: 0 1px 2px rgba(15, 29, 58, .05), 0 8px 24px -12px rgba(15, 29, 58, .14);
  display: grid; gap: 16px; padding: 0 0 24px; color: var(--okp-ink);
}
.okp a { color: inherit; text-decoration: none; }
.okp .okp-ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* tonlar: ikon kutusu zemini + ikon rengi */
.okp .okp-tone-blue { --t: var(--okp-blue); --ts: var(--okp-blue-soft); }
.okp .okp-tone-sky { --t: var(--okp-sky); --ts: var(--okp-sky-soft); }
.okp .okp-tone-orange { --t: var(--okp-orange); --ts: var(--okp-orange-soft); }
.okp .okp-tone-red { --t: var(--okp-red); --ts: var(--okp-red-soft); }
.okp .okp-tone-violet { --t: var(--okp-violet); --ts: var(--okp-violet-soft); }
.okp .okp-tone-indigo { --t: var(--okp-indigo); --ts: var(--okp-indigo-soft); }
.okp .okp-tone-green { --t: var(--okp-green); --ts: var(--okp-green-soft); }

/* --- HERO ----------------------------------------------------------------- */
.okp-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 190px; padding: 22px 28px 22px 40px; border-radius: var(--okp-radius);
  color: #fff;
  background:
    radial-gradient(60% 120% at 78% 10%, rgba(96, 165, 250, .45) 0%, transparent 60%),
    radial-gradient(40% 80% at 100% 100%, rgba(59, 130, 246, .35) 0%, transparent 70%),
    linear-gradient(115deg, #0a1d55 0%, #12348f 45%, #1d4ed8 75%, #1a3fa8 100%);
  box-shadow: 0 18px 40px -22px rgba(13, 40, 120, .65);
}
.okp-hero__text { position: relative; z-index: 2; max-width: 680px; }
.okp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(147, 197, 253, .55); background: rgba(30, 64, 175, .55);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #dbeafe;
}
.okp-hero__eyebrow .okp-ic { width: 15px; height: 15px; color: #93c5fd; }
.okp-hero__title { margin: 12px 0 8px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.okp-hero__desc { margin: 0; max-width: 500px; font-size: 14px; line-height: 1.5; color: rgba(226, 236, 255, .92); }
.okp-hero__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.okp-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid rgba(191, 219, 254, .45); background: rgba(10, 29, 85, .35);
  font-size: 13px; font-weight: 500; color: #e6eeff; backdrop-filter: blur(4px);
}
.okp-chip .okp-ic { width: 16px; height: 16px; color: #c7dbff; }
.okp-chip b { font-weight: 600; }
.okp-chip b.is-ok { color: #4ade80; }
.okp-chip b.is-warn { color: #fbbf24; }
.okp-chip b.is-bad { color: #fca5a5; }
.okp-hero__art {
  position: absolute; right: 0; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: 62%;
  object-fit: contain; object-position: right bottom; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

/* --- KPI KARTLARI ---------------------------------------------------------- */
.okp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.okp-kpi {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
  column-gap: 10px; align-items: center; min-height: 104px; padding: 14px 14px 12px;
  border: 1px solid var(--okp-line); border-radius: var(--okp-radius); background: var(--okp-card);
  box-shadow: var(--okp-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.okp-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(15, 29, 58, .3); }
.okp-tone-red.okp-kpi { background: linear-gradient(180deg, #fff 0%, #fff7f7 100%); }
.okp-kpi__icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ts); color: var(--t); align-self: start;
}
.okp-kpi__label { grid-column: 2 / span 2; font-size: 14px; font-weight: 600; color: #26324d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okp-kpi__value { grid-column: 2; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }
.okp-kpi__trend {
  grid-column: 3; grid-row: 2; align-self: start; justify-self: end; margin-top: 4px;
  padding: 2px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.okp-kpi__trend--up { background: var(--okp-green-soft); color: var(--okp-green); }
.okp-kpi__trend--down { background: var(--okp-red-soft); color: var(--okp-red); }
.okp-kpi__trend--flat { background: #eef2f8; color: #475569; }
.okp-kpi__trend--new {
  grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 6px;
  background: transparent; color: #94a3b8; font-weight: 500; font-size: 11px; padding: 0;
}
.okp-kpi__spark {
  position: absolute; right: 12px; bottom: 10px; width: 46%; height: 24px; overflow: visible;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.okp-kpi__spark path { vector-effect: non-scaling-stroke; }
.okp-kpi__spark--up { stroke: #22c55e; }
.okp-kpi__spark--down { stroke: #ef4444; }
.okp-kpi__spark--flat { stroke: #6b8fd6; }

/* --- PANELLER ----------------------------------------------------------- */
.okp-row { display: grid; gap: 16px; }
.okp-row--a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.okp-row--b { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); }
.okp-panel {
  min-width: 0; padding: 16px 18px 16px; border: 1px solid var(--okp-line); border-radius: var(--okp-radius);
  background: var(--okp-card); box-shadow: var(--okp-shadow);
}
.okp-panel__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.okp-panel__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--ts); color: var(--t); }
.okp-panel__icon .okp-ic { width: 22px; height: 22px; }
.okp-panel__titles { flex: 1 1 auto; min-width: 0; }
.okp-panel__titles h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--okp-ink); }
.okp-panel__titles p { margin: 2px 0 0; font-size: 12.5px; color: var(--okp-muted); }
.okp-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #d7deea; background: #fff; color: #1e293b; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 29, 58, .06);
}
.okp-btn:hover { border-color: var(--okp-blue); color: var(--okp-blue); }
.okp-btn .okp-ic { width: 14px; height: 14px; }
.okp-select { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.okp-select select {
  appearance: none; -webkit-appearance: none; padding: 6px 30px 6px 12px; border-radius: 8px; border: 1px solid #d7deea;
  background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer;
}
.okp-select .okp-ic { position: absolute; right: 9px; width: 14px; height: 14px; pointer-events: none; color: #475569; }
.okp-empty { margin: 8px 0; color: var(--okp-muted); font-size: 13px; list-style: none; }

/* Dikkat Gerektirenler */
.okp-att-list { display: grid; gap: 8px; }
.okp-att {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px; background: #f6f8fc; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.okp-att:hover { background: #fff; border-color: var(--okp-line); }
.okp-att__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ts); color: var(--t); }
.okp-att__text b { display: block; font-size: 14px; font-weight: 700; color: var(--okp-ink); }
.okp-att__text small { display: block; margin-top: 1px; font-size: 12px; color: var(--okp-muted); }
.okp-att__count {
  min-width: 34px; padding: 3px 10px; border-radius: 999px; text-align: center;
  background: var(--ts); color: var(--t); font-size: 13px; font-weight: 800;
}
.okp-att.is-zero .okp-att__count { background: #eef2f8; color: #64748b; }
.okp-att__go { color: #64748b; }
.okp-att__go .okp-ic { width: 18px; height: 18px; }

/* Operasyon Özeti */
.okp-summary { display: grid; grid-template-columns: 160px minmax(150px, .9fr) minmax(0, 1.3fr); align-items: center; gap: 18px; }
.okp-donut { position: relative; width: 156px; height: 156px; }
.okp-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.okp-donut__track { fill: none; stroke: #e8eef8; stroke-width: 13; }
.okp-donut__value { fill: none; stroke: url(#okpDonutGrad); stroke-width: 13; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.okp-donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.okp-donut__center b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.okp-donut__center span { font-size: 12.5px; color: var(--okp-muted); }
.okp-legend { margin: 0; padding: 0 0 0 16px; list-style: none; display: grid; gap: 14px; border-left: 1px solid var(--okp-line); }
.okp-legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: #334155; }
.okp-legend i { width: 12px; height: 12px; border-radius: 50%; }
.okp-legend b { font-size: 14px; font-weight: 700; color: var(--okp-ink); }
.okp-bars { min-width: 0; padding-left: 14px; border-left: 1px solid var(--okp-line); }
.okp-bars__plot { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.okp-bars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.okp-bars__col i {
  display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #4f7dff 0%, #2563eb 55%, #22d3ee 100%);
}
.okp-bars__col:nth-child(n+8) i { background: linear-gradient(180deg, #8b5cf6 0%, #6366f1 100%); }
.okp-bars__col i.is-empty { background: #e8eef8; }
.okp-bars__col small { margin-top: 6px; font-size: 11px; color: var(--okp-muted); }
.okp-bars__caption { margin: 8px 0 0; font-size: 11.5px; color: var(--okp-muted); text-align: right; }

/* Hızlı İşlemler */
.okp-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.okp-quick__tile {
  display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 78px; padding: 10px 6px;
  border-radius: 10px; background: #f3f6fc; border: 1px solid transparent; text-align: center;
  font-size: 12px; font-weight: 600; color: #1e293b; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.okp-quick__tile .okp-ic { width: 24px; height: 24px; color: var(--okp-blue); }
.okp-quick__tile:nth-child(7) .okp-ic { color: var(--okp-green); }
.okp-quick__tile:nth-child(8) .okp-ic { color: var(--okp-violet); }
.okp-quick__tile:hover { background: #fff; border-color: #c9d8f5; transform: translateY(-1px); }
.okp-quick__hint { margin: 0 0 8px; font-size: 12px; color: var(--okp-muted); }
.okp-quick__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.okp-quick__checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.okp-quick__checks .okp-ic { width: 16px; height: 16px; color: var(--okp-blue); }

/* Ekip / Vardiya Yükü */
.okp-load { display: grid; gap: 12px; }
.okp-load__row { display: grid; grid-template-columns: 30px minmax(0, 1.5fr) 42px minmax(60px, 1fr) 38px; align-items: center; gap: 10px; font-size: 13px; }
.okp-load__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--okp-blue-soft); color: var(--okp-blue); }
.okp-load__icon .okp-ic { width: 16px; height: 16px; }
.okp-load__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okp-load__num { color: var(--okp-muted); text-align: right; white-space: nowrap; }
.okp-load__bar { height: 8px; border-radius: 999px; background: #e8eef8; overflow: hidden; }
.okp-load__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #6366f1); }
.okp-load__pct { font-weight: 700; text-align: right; }
.okp-load__row.is-gap .okp-load__icon { background: var(--okp-orange-soft); color: var(--okp-orange); }
.okp-load__row.is-gap .okp-load__bar i { background: linear-gradient(90deg, #f59e0b, #f97316); }

/* Son Faaliyetler */
.okp-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.okp-feed li > a, .okp-feed li > div {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 4px 7px 16px; border-radius: 8px; font-size: 13px;
}
.okp-feed li > a:hover { background: #f6f8fc; }
.okp-feed li > a::before, .okp-feed li > div::before {
  content: ''; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--okp-blue);
}
.okp-feed li:first-child > a::before { background: var(--okp-green); }
.okp-feed__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ts); color: var(--t); }
.okp-feed__icon .okp-ic { width: 15px; height: 15px; }
.okp-feed__text { min-width: 0; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okp-feed time { font-size: 12px; color: var(--okp-muted); white-space: nowrap; }

/* Sistem Sağlığı */
.okp-health .okp-panel__head { margin-bottom: 10px; }
.okp-health__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.9fr); gap: 14px; align-items: stretch; }
.okp-health__item {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--okp-line); background: #fff; box-shadow: 0 1px 2px rgba(15, 29, 58, .04);
}
.okp-health__item > .okp-ic { width: 30px; height: 30px; color: var(--okp-green); }
.okp-health__item span { display: grid; }
.okp-health__item b { font-size: 13.5px; font-weight: 700; }
.okp-health__item em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--okp-muted); }
.okp-dot { position: absolute; top: 14px; left: 44px; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 0 2px #fff; }
.okp-health__item.is-ok em { color: var(--okp-green); }
.okp-health__item.is-ok .okp-dot { background: #22c55e; }
.okp-health__item.is-warn em { color: #d97706; }
.okp-health__item.is-warn .okp-dot { background: #f59e0b; }
.okp-health__item.is-warn > .okp-ic { color: #d97706; }
.okp-health__item.is-bad em { color: var(--okp-red); }
.okp-health__item.is-bad .okp-dot { background: var(--okp-red); }
.okp-health__item.is-bad > .okp-ic { color: var(--okp-red); }
.okp-health__note {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px; border-radius: 10px;
  background: #eef2ff; border: 1px solid #dfe5fb; font-size: 12.5px; line-height: 1.5; color: #334155;
}
.okp-health__note > .okp-ic { width: 26px; height: 26px; color: var(--okp-indigo); }
.okp-health__note b { color: var(--okp-ink); }

/* --- Duyarlı ---------------------------------------------------------------- */
@media (max-width: 1360px) {
  .okp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .okp-row--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .okp-row--b > .okp-quick { grid-column: 1 / -1; }
  .okp-quick__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .okp-health__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .okp-health__note { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .okp-row--a { grid-template-columns: minmax(0, 1fr); }
  .okp-hero__art { opacity: .45; max-width: 90%; }
}
@media (max-width: 760px) {
  .okp-hero { padding: 20px; min-height: 0; }
  .okp-hero__title { font-size: 26px; }
  .okp-hero__art { opacity: .3; }
  .okp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .okp-kpi { min-height: 92px; padding: 12px; column-gap: 10px; grid-template-columns: 36px minmax(0, 1fr); }
  .okp-kpi__icon { width: 36px; height: 36px; }
  .okp-kpi__value { font-size: 24px; }
  .okp-kpi__trend { grid-column: 2; grid-row: auto; justify-self: start; }
  .okp-kpi__spark { display: none; }
  .okp-row--b { grid-template-columns: minmax(0, 1fr); }
  .okp-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .okp-summary { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .okp-legend { border-left: 0; padding-left: 0; width: 100%; }
  .okp-bars { border-left: 0; padding-left: 0; width: 100%; }
  .okp-health__grid { grid-template-columns: minmax(0, 1fr); }
  .okp-panel__head { flex-wrap: wrap; }
}

/* Operasyon Özeti içeriği panelin dikey ortasında (Dikkat Gerektirenler daha uzun) */
.okp-row--a > .okp-panel { display: flex; flex-direction: column; }
.okp-row--a > .okp-panel > .okp-summary { flex: 1 1 auto; }

/* 2026-11-05 ortak DOSAB Kokpit dili (core/opx-theme.css): ana sayfa hero'su da
   gün batımı enerji illüstrasyonu + sol dikey vurgu çizgisi; KPI kartlarında
   alt renk şeridi. */
.okp-hero {
  min-height: 210px;
  background:
    linear-gradient(90deg, rgba(10, 20, 58, .94) 0%, rgba(16, 32, 86, .76) 34%, rgba(20, 30, 80, .15) 62%, transparent 80%),
    url("/assets/brand/orders-dusk-hero.svg?v=1") right bottom / cover no-repeat,
    linear-gradient(135deg, #12235f 0%, #4b3f8f 70%, #f2955c 100%);
}
.okp-hero__art { display: none; }
.okp-hero__text { padding-left: 16px; border-left: 3px solid #60a5fa; }
.okp-hero__eyebrow { padding: 0; border: 0; background: none; text-transform: none; letter-spacing: .02em; font-size: 14px; font-weight: 600; color: #dbe6ff; }
.okp-hero__eyebrow .okp-ic { display: none; }
.okp-kpi { overflow: hidden; }
.okp-kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 25%, transparent)); }
.okp-kpi__icon { border-radius: 14px; width: 46px; height: 46px; }