:root{
  --hd-red:#ef4444;
  --hd-red-dark:#dc2626;
  --hd-green:#25D366;
  --hd-text:#111827;
  --hd-muted:#6b7280;
  --hd-border:#e5e7eb;
  --hd-bg:#f7f7f8;
}

.mus-tabs{
  margin:12px 0;
  font-family:Arial, sans-serif;
  color:var(--hd-text);
}

.mus-tabs *,
.mus-tabs *::before,
.mus-tabs *::after{
  box-sizing:border-box;
}

/* Kart menü */
.mus-cards-wrap{
  display:flex;
  gap:16px;
  margin:14px 0 20px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:14px 6px 16px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  align-items:flex-start;
}

.mus-cards-wrap::-webkit-scrollbar{
  height:10px;
}
.mus-cards-wrap::-webkit-scrollbar-track{
  background:#f1f1f1;
  border-radius:999px;
}
.mus-cards-wrap::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:999px;
}
.mus-cards-wrap::-webkit-scrollbar-thumb:hover{
  background:#9ca3af;
}

.mus-card-btn{
  flex:0 0 182px;
  min-width:182px;
  border:2px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  transition:.18s ease;
  text-align:center;
  transform:scale(1);
  transform-origin:center center;
  margin:2px;
  appearance:none;
  -webkit-appearance:none;
}

.mus-card-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.mus-card-btn.active{
  border-color:var(--hd-red);
  transform:scale(1.02);
  box-shadow:0 8px 22px rgba(239,68,68,.12);
}

.mus-card-image{
  display:block;
  width:100%;
  height:170px;
  background:#f3f4f6;
}

.mus-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mus-noimg{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  font-weight:700;
}

.mus-card-title{
  display:block;
  padding:12px 10px 14px;
  font-weight:800;
  color:var(--hd-text);
  white-space:normal;
  min-height:58px;
  background:#fff;
  transition:background .18s ease, color .18s ease;
}

/* Hover ve aktif durumda başlık zemini kırmızı olsun */
.mus-card-btn:hover .mus-card-title,
.mus-card-btn.active .mus-card-title{
  background:var(--hd-red);
  color:#fff;
}

/* Kartlar */
.mus-card{
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:14px;
  padding:18px;
  margin:16px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.mus-title{
  margin:0 0 12px;
  font-size:24px;
  font-weight:800;
  color:var(--hd-text);
}

/* Alanlar */
.mus-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,260px));
  gap:14px;
  margin-bottom:12px;
}

.mus-fields label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  color:var(--hd-text);
}

.mus-fields input{
  padding:12px 14px;
  border:1.5px solid #d1d5db;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:var(--hd-text);
  width:100%;
}

.mus-fields input::placeholder{
  color:#9ca3af;
}

.mus-fields input:focus{
  border-color:var(--hd-red);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

/* Butonlar */
.mus-btn{
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  border:0;
  transition:transform .05s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  appearance:none;
  -webkit-appearance:none;
}

.mus-btn:active{
  transform:translateY(0);
}

.mus-btn:not(.ghost):not(.wa){
  background:var(--hd-red);
  color:#fff;
}

.mus-btn:not(.ghost):not(.wa):hover{
  background:var(--hd-red-dark);
}

.mus-btn.ghost{
  background:#fff;
  color:var(--hd-red);
  border:2px solid var(--hd-red);
}

.mus-btn.ghost:hover{
  background:var(--hd-red);
  color:#fff;
}

.mus-btn.wa{
  background:var(--hd-green);
  color:#fff;
}

.mus-btn.wa:hover{
  filter:brightness(.95);
}

.mus-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  background:#fff;
  color:#9ca3af;
  border:2px solid var(--hd-border);
}

/* Özet */
.summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--hd-bg);
  border:1px solid var(--hd-border);
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
}

.summary .summary-actions{
  margin-left:auto;
}

/* Tablo */
.tbl{
  width:100%;
  border-collapse:collapse;
}

.tbl thead th{
  background:var(--hd-bg);
}

.tbl th,
.tbl td{
  text-align:left;
  padding:12px 14px;
  border-top:1px solid #eee;
}

/* Alt aksiyonlar */
.global-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.global-actions .grand{
  font-weight:900;
  color:var(--hd-text);
}

.global-actions .right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:900px){
  .mus-fields{
    grid-template-columns:1fr;
  }

  .global-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .global-actions .right{
    width:100%;
    justify-content:flex-start;
  }
}