/* musteri-araclar-2.0.0 — /musteri arac kartlari: YATAY sekme seridi + tam genislik panel.
 *
 * 1.x'te kartlar bir grid sariciya aliniyordu ama sarici, kartlarin dogal yeri olan
 * DAR .ant-col (ilk istatistik kartinin sutunu) icinde kaliyordu; genislik ~%25 oldugu icin
 * auto-fit tek sutuna dusuyor ve kartlar yine alt alta diziliyordu.
 *
 * 2.0.0: sarici icerik kabinin DOGRUDAN cocugu olarak konumlanir (tam genislik) ve kartlarin
 * kendi basliklari gizlenip yerine tek satirlik sekme seridi cizilir. Acilan kartin govdesi
 * seridin altinda tum genisligi kullanir.
 *
 * Kartlarin kendi HTML/JS'ine DOKUNULMAZ; yalnizca yerlesim ve baslik gorunumu degisir.
 */

.op-mus-araclar{
  width:100%;
  margin:0 0 16px;
  /* Ust kap grid ya da flex olursa da tam satiri kaplasin. */
  grid-column:1/-1;
  flex:1 1 100%;
  min-width:0;
  border:1px solid #e8ecf1;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  font:400 13px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1f2937;
}

/* gap:1px + arka plan rengi = sutun sayisi kac olursa olsun temiz ayirac cizgileri. */
.op-mus-seritler{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:#eef1f5;
}
.op-mus-araclar.acik .op-mus-seritler{border-bottom:1px solid #eef1f5}

.op-mus-sek{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 14px;
  border:0;
  background:#fff;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.op-mus-sek:hover{background:#f7f9fc}
.op-mus-sek:focus-visible{outline:2px solid #bfdbfe;outline-offset:-2px}
.op-mus-sek[aria-pressed="true"]{background:#eff4ff;box-shadow:inset 0 -3px 0 #1a56db}

.op-mus-sek .ic{
  width:28px;height:28px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:linear-gradient(140deg,#1a56db,#0e7490);
  color:#fff;font-size:14px;
}
.op-mus-sek .tx{min-width:0;display:block}
.op-mus-sek b{
  display:block;font-size:13.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.op-mus-sek .alt{
  display:block;font-size:11.5px;color:#6b7280;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.op-mus-sek[aria-pressed="true"] b{color:#1a56db}
.op-mus-sek .ok{
  margin-left:auto;flex:none;color:#9ca3af;font-size:11px;
  transition:transform .15s;
}
.op-mus-sek[aria-pressed="true"] .ok{transform:rotate(180deg);color:#1a56db}

/* Kartin kendi cercevesi ve basligi serit icinde gereksiz: govde tam genislikte acilir. */
.op-mus-araclar .op-tf-card{
  border:0;border-radius:0;margin:0;background:transparent;
}
.op-mus-araclar .op-tf-card .op-tf-head{display:none}
.op-mus-araclar .op-tf-card:not(.open){display:none}
.op-mus-araclar .op-tf-card.open .op-tf-body{padding:16px}

@media (max-width:1100px){
  .op-mus-seritler{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .op-mus-seritler{grid-template-columns:minmax(0,1fr)}
  .op-mus-sek .alt{display:none}
}