.acilis-panosu {
  margin-bottom: 28px;
}

.acilis-kartlari {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.acilis-karti {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 13px;
  min-height: 130px;
  padding: 19px 17px;
  border: 1px solid var(--cizgi);
  border-radius: 13px;
  background: var(--yuzey);
  color: var(--metin);
  box-shadow: var(--golge);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.acilis-karti:hover,
.acilis-karti:focus-visible {
  border-color: color-mix(in srgb, var(--kart-rengi) 42%, var(--cizgi));
  box-shadow: 0 16px 38px rgba(24, 48, 83, .11);
  outline: none;
  transform: translateY(-2px);
}

.acilis-kart-ikonu {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kart-yumusak);
  color: var(--kart-rengi);
  font-size: 19px;
  font-weight: 750;
  grid-row: 1 / 3;
}

.acilis-kart-metni {
  display: flex;
  min-width: 0;
  flex-direction: column;
  grid-column: 2 / 4;
  grid-row: 1;
  padding-right: 10px;
}

.acilis-kart-metni strong {
  margin-top: 2px;
  font-size: var(--yazi-kart-basligi);
  line-height: 1.3;
}

.acilis-kart-metni small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 7px;
  color: var(--metin-ikincil);
  font-size: var(--yazi-aciklama);
  line-height: var(--satir-aciklama);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.acilis-kart-metrigi {
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: 7px;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding-top: 12px;
}

.acilis-kart-metrigi small {
  overflow: hidden;
  color: var(--metin-ikincil);
  font-size: var(--yazi-meta);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acilis-kart-metrigi strong {
  color: var(--kart-rengi);
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.03em;
}

.acilis-kart-oku {
  align-self: end;
  color: var(--metin-ikincil);
  font-size: 17px;
  font-weight: 700;
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  transition: color .18s ease, transform .18s ease;
}

.acilis-karti:hover .acilis-kart-oku,
.acilis-karti:focus-visible .acilis-kart-oku {
  color: var(--kart-rengi);
  transform: translateX(3px);
}

.acilis-karti.mavi { --kart-rengi: #2473d6; --kart-yumusak: #e9f3ff; }
.acilis-karti.kirmizi { --kart-rengi: #db4055; --kart-yumusak: #ffedf0; }
.acilis-karti.turkuaz { --kart-rengi: #159d94; --kart-yumusak: #e4f8f5; }
.acilis-karti.mor { --kart-rengi: #7756d8; --kart-yumusak: #f0ebff; }
.acilis-karti.sari { --kart-rengi: #c39013; --kart-yumusak: #fff6dc; }
.acilis-karti.turuncu { --kart-rengi: #d76e39; --kart-yumusak: #fff0e8; }

.operasyon-kpi-basligi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0;
  padding: 0 2px;
}

.operasyon-kpi-basligi > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.operasyon-kpi-basligi strong {
  color: var(--metin);
  font-size: var(--yazi-kart-basligi);
  line-height: 1.3;
}

.operasyon-kpi-basligi small,
.operasyon-kpi-basligi > span {
  color: var(--metin-ikincil);
  font-size: var(--yazi-aciklama);
  line-height: var(--satir-aciklama);
}

.operasyon-kpi-basligi > span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
}

.operasyon-kpi-basligi > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16916f;
  box-shadow: 0 0 0 4px rgba(22, 145, 111, .1);
}

.operasyon-kpi-izgarasi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.operasyon-kpi-karti {
  position: relative;
  --kpi-renk: #326bb8;
  --kpi-yumusak: #e8f0fc;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--kpi-renk);
  border-radius: 12px;
  background: var(--yuzey);
  box-shadow: var(--golge);
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

.operasyon-kpi-karti[data-boyut="dar"] { grid-column: span 1; }
.operasyon-kpi-bilgi { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--metin-soluk); font-size:14px; line-height:1; cursor:help; }
.operasyon-kpi-bilgi:hover, .operasyon-kpi-bilgi:focus-visible { background:var(--kpi-yumusak); color:var(--kpi-renk); }
.operasyon-kpi-bilgi:focus-visible { outline:2px solid var(--kpi-renk); outline-offset:2px; }
.operasyon-kpi-karti[data-boyut="orta"] { grid-column: span 2; }
.operasyon-kpi-karti[data-boyut="genis"] { grid-column: span 3; justify-content: center; }
.operasyon-kpi-karti[data-boyut="tam"] { grid-column: 1 / -1; justify-content: center; }
.operasyon-kpi-karti.surukleniyor { opacity: .45; transform: scale(.985); }
.operasyon-kpi-karti.surukleme-hedefi { border-color: var(--kpi-renk); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-renk) 18%, transparent), var(--golge); }

.operasyon-kpi-tutamac {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--kpi-renk) 75%, var(--metin-soluk));
  cursor: grab;
  font-size: 14px;
  line-height: 1;
}

.operasyon-kpi-karti:active,
.operasyon-kpi-karti:active .operasyon-kpi-tutamac { cursor: grabbing; }

.operasyon-kpi-ikonu {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: var(--kpi-yumusak);
  color: var(--kpi-renk);
  font-size: 17px;
  font-weight: 750;
}

.operasyon-kpi-metni {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.operasyon-kpi-metni small {
  overflow: hidden;
  color: var(--metin-ikincil);
  font-size: var(--yazi-aciklama);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operasyon-kpi-metni strong {
  margin-top: 2px;
  color: var(--metin);
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.operasyon-kpi-karti.mavi { --kpi-renk: #2473d6; --kpi-yumusak: #e9f3ff; }
.operasyon-kpi-karti.kirmizi { --kpi-renk: #db4055; --kpi-yumusak: #ffedf0; }
.operasyon-kpi-karti.turkuaz { --kpi-renk: #159d94; --kpi-yumusak: #e4f8f5; }
.operasyon-kpi-karti.yesil { --kpi-renk: #16876e; --kpi-yumusak: #e4f4ef; }
.operasyon-kpi-karti.turuncu { --kpi-renk: #cf721e; --kpi-yumusak: #fbefe2; }
.operasyon-kpi-karti.mor { --kpi-renk: #7756d8; --kpi-yumusak: #f0ebff; }
.operasyon-kpi-karti.lacivert { --kpi-renk: #3568a8; --kpi-yumusak: #e7eef7; }

/* Genel Bakış aynı Canlı Operatör Takip kart bileşenini kullanır. */
.operasyon-kpi-izgarasi.supervisor-izgara { grid-auto-rows: auto; margin-top: 0; }
.operasyon-kpi-karti.supervisor-kpi-karti {
  --kpi-renk: var(--ozet-renk);
  --kpi-yumusak: color-mix(in srgb, var(--ozet-renk) 12%, var(--yuzey));
  justify-content: normal;
}
.operasyon-kpi-karti.supervisor-kpi-karti > .operasyon-kpi-tutamac { line-height: inherit; }
.operasyon-kpi-karti.supervisor-kpi-karti > .operasyon-kpi-ikonu { font-weight: inherit; }
.operasyon-kpi-karti.supervisor-kpi-karti .operasyon-kpi-metni strong { margin-top: 0; }

.operasyon-kpi-ayar-listesi { gap: 8px; }

.operasyon-kpi-ayar-satiri {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto minmax(86px, auto) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  background: var(--yuzey-ikincil);
}

.operasyon-kpi-ayar-tutamac { color: var(--mavi); cursor: grab; font-size: 15px; }
.operasyon-kpi-ayar-metni { display: flex; min-width: 0; flex-direction: column; }
.operasyon-kpi-ayar-metni b { overflow: hidden; color: var(--metin); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.operasyon-kpi-ayar-metni small { margin-top: 2px; color: var(--metin-soluk); font-size: 8px; }
.operasyon-kpi-ayar-satiri select { height: 29px; min-width: 86px; border: 1px solid var(--cizgi); border-radius: 7px; background: var(--yuzey); color: var(--metin); font-size: 8px; }
.operasyon-kpi-sira-eylemleri { display: flex; gap: 3px; }
.operasyon-kpi-sira-eylemleri button { width: 26px; height: 27px; padding: 0; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuzey); color: var(--metin-ikincil); }
.operasyon-kpi-sira-eylemleri button:disabled { opacity: .35; }

:root[data-tema="gece"] .acilis-karti.mavi { --kart-yumusak: #294566; }
:root[data-tema="gece"] .acilis-karti.kirmizi { --kart-yumusak: #51343e; }
:root[data-tema="gece"] .acilis-karti.turkuaz { --kart-yumusak: #244b49; }
:root[data-tema="gece"] .acilis-karti.mor { --kart-yumusak: #40395b; }
:root[data-tema="gece"] .acilis-karti.sari { --kart-yumusak: #504529; }
:root[data-tema="gece"] .acilis-karti.turuncu { --kart-yumusak: #513a30; }
:root[data-tema="gece"] .operasyon-kpi-karti.mavi,
:root[data-tema="gece"] .operasyon-kpi-karti.lacivert { --kpi-yumusak: #294566; }
:root[data-tema="gece"] .operasyon-kpi-karti.kirmizi { --kpi-yumusak: #51343e; }
:root[data-tema="gece"] .operasyon-kpi-karti.turkuaz,
:root[data-tema="gece"] .operasyon-kpi-karti.yesil { --kpi-yumusak: #244b49; }
:root[data-tema="gece"] .operasyon-kpi-karti.mor { --kpi-yumusak: #40395b; }
:root[data-tema="gece"] .operasyon-kpi-karti.turuncu { --kpi-yumusak: #513a30; }

.pano-bolum-basligi {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 12px;
  scroll-margin-top: 82px;
}

.pano-bolum-basligi span {
  color: var(--mavi);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.pano-bolum-basligi h2 { margin: 3px 0 0; font-size: 18px; }
.pano-bolum-basligi p { max-width: 460px; margin: 0; color: var(--metin-ikincil); font-size: 9px; text-align: right; }

@media (max-width: 1450px) {
  .operasyon-kpi-izgarasi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .operasyon-kpi-karti[data-boyut="genis"] { grid-column: span 2; }
}

@media (max-width: 1120px) {
  .acilis-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operasyon-kpi-izgarasi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operasyon-kpi-karti[data-boyut="orta"],
  .operasyon-kpi-karti[data-boyut="genis"] { grid-column: span 2; }
}

@media (max-width: 700px) {
  .acilis-kartlari { grid-template-columns: 1fr; }
  .acilis-karti { min-height: 112px; }
  .operasyon-kpi-basligi { align-items: flex-start; flex-direction: column; gap: 6px; }
  .operasyon-kpi-izgarasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operasyon-kpi-karti[data-boyut="orta"],
  .operasyon-kpi-karti[data-boyut="genis"] { grid-column: 1 / -1; }
  .pano-bolum-basligi { align-items: flex-start; flex-direction: column; gap: 5px; }
  .pano-bolum-basligi p { text-align: left; }
}

@media (max-width: 440px) {
  .operasyon-kpi-izgarasi { grid-template-columns: 1fr; }
  .operasyon-kpi-karti[data-boyut="dar"],
  .operasyon-kpi-karti[data-boyut="orta"],
  .operasyon-kpi-karti[data-boyut="genis"],
  .operasyon-kpi-karti[data-boyut="tam"] { grid-column: 1 / -1; }
}