.mutashabih-page {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

.mutashabih-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

.mut-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 18px 20px;
}

.source-meta {
  font-size: 16px;
  font-weight: 700;
  color: #24324a;
  margin-bottom: 14px;
}

.source-arabic {
  font-family: "MyArabic", "Amiri", serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 2;
  text-align: right;
  color: #111;
  margin-bottom: 18px;
}

.source-meal-label {
  font-size: 14px;
  font-weight: 700;
  color: #5a6780;
  margin-bottom: 8px;
}

.source-meal {
  font-size: 20px;
  line-height: 1.9;
  color: #222;
}

.group-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}

.group-left {
  min-width: 240px;
}

.group-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.group-id {
  font-size: 22px;
  font-weight: 700;
  color: #24324a;
  margin-bottom: 16px;
}

.group-stats {
  font-size: 15px;
  line-height: 1.9;
  color: #24324a;
}

.group-phrase {
  font-family: "MyArabic", "Amiri", serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.8;
  text-align: right;
}

.mut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid #d8b4fe;
  background: #f3e8ff;
  color: #6b21a8;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.mut-btn:hover {
  background: #e9d5ff;
  color: #581c87;
  text-decoration: none;
}

/* Renkler */
.mut-green{ color:#7cdb5a; font-weight:400; }
.mut-blue{ color:#5b7cff; font-weight:400; }
.mut-pink{ color:#d86bf4; font-weight:400; }
.mut-purple{ color:#9b5cf6; font-weight:400; }
.mut-orange{ color:#f59e0b; font-weight:400; }
.mut-teal{ color:#14b8a6; font-weight:400; }

@media (max-width: 992px) {
  .group-card {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .group-phrase {
    text-align: right;
    width: 100%;
  }
}